input.km-upload-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); opacity: 0; }
.km-upload-wrap { display: inline-flex; flex-direction: column; gap: 5px; width: 240px; max-width: 100%; min-width: 0; vertical-align: middle; }
button.km-upload {
    --upload-progress: 0%; --upload-accent: #2563c8;
    position: relative; display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 52px; padding: 0; margin: 0; overflow: hidden;
    border: 1px solid #b2c6df; border-radius: 8px; background: #eaf1fc; color: #214c83;
    box-shadow: inset 0 1px 0 #fff, 0 2px 4px #264d7510;
    font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0;
    text-align: left; cursor: pointer; isolation: isolate;
}
.km-upload-label { position: relative; z-index: 1; min-width: 0; flex: 1; padding: 12px 15px; overflow-wrap: anywhere; }
.km-upload-icon { position: relative; z-index: 1; display: grid; place-items: center; align-self: stretch; flex: 0 0 48px; min-height: 50px; border-left: 1px solid #8baacf4d; background: #ffffff59; }
.km-upload-icon svg { grid-area: 1/1; width: 21px; height: 21px; stroke-width: 2.2; }
.km-upload-icon .km-upload-check, .km-upload-icon .km-upload-error { display: none; }
.km-upload-fill { position: absolute; z-index: 0; inset: 0; background: #9fc6f459; transform: translateX(calc(var(--upload-progress) - 100%)); transition: transform 180ms ease-out; }
.km-upload-fill::after { content: ''; position: absolute; top: -30%; bottom: -30%; right: 0; width: 20px; border-radius: 45%; background: #ffffff40; }
button.km-upload[data-upload-state="reading"] .km-upload-fill::after { animation: km-upload-wave 1.8s linear infinite; }
button.km-upload[data-upload-state="reading"] .km-upload-arrow { animation: km-upload-arrow 1.1s ease-in-out infinite; }
button.km-upload[data-upload-state="processing"] .km-upload-fill { transform: none; background: repeating-linear-gradient(115deg,#97bdf129 0px,#97bdf129 12px,#b9d2f438 12px,#b9d2f438 24px); background-size: 53px 100%; animation: km-upload-flow 1.5s linear infinite; }
button.km-upload[data-upload-state="success"] { background: #e2f2e9; border-color: #8cbea4; color: #236045; }
button.km-upload[data-upload-state="success"] .km-upload-fill { background: #a9d7bd33; }
button.km-upload[data-upload-state="success"] .km-upload-icon { border-color: #86b59c66; background: #bee4ce; }
button.km-upload[data-upload-state="success"] .km-upload-arrow { display: none; }
button.km-upload[data-upload-state="success"] .km-upload-check { display: block; }
button.km-upload[data-upload-state="error"] { background: #fbe9e9; border-color: #d6a0a0; color: #983b3b; }
button.km-upload[data-upload-state="error"] .km-upload-arrow { display: none; }
button.km-upload[data-upload-state="error"] .km-upload-error { display: block; }
button.km-upload:disabled { cursor: wait; opacity: 1; }
button.km-upload:focus-visible { outline: 3px solid #2563c8; outline-offset: 3px; }
button.km-upload:not(:disabled):hover { box-shadow: inset 0 1px 0 #fff,0 2px 7px #264d7526; }
.km-upload-status { display: block; max-width: 100%; min-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #556a7c; font-family: inherit; font-size: 10px; line-height: 1.5; font-weight: 500; text-transform: none; letter-spacing: 0; }
.km-upload-progress { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.km-upload-progress[hidden] { display: none; }
button.km-upload-retry { align-self: flex-start; min-height: 28px; padding: 3px 0; border: 0; background: transparent; color: #9b3f3f; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.km-upload-retry[hidden] { display: none; }
button.km-upload-retry:focus-visible { outline: 2px solid #2563c8; outline-offset: 3px; }
.km-upload-drop-active { outline: 2px solid #2563c8; outline-offset: 3px; }
@keyframes km-upload-wave { to { transform: rotate(360deg); } }
@keyframes km-upload-arrow { 50% { transform: translateY(-3px); } }
@keyframes km-upload-flow { to { background-position: 53px 0; } }
@media (prefers-reduced-motion: reduce) { button.km-upload *, button.km-upload *::after { animation: none !important; transition: none !important; } }
@media print { .km-upload-wrap { display: none; } }