.upload-progress-modal[hidden] { display: none !important; }
.upload-progress-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(2, 6, 23, .78);
    backdrop-filter: blur(12px);
}
.upload-progress-dialog {
    position: relative;
    width: min(100%, 34rem);
    overflow: hidden;
    border: 1px solid rgba(100, 116, 139, .45);
    border-radius: 1.75rem;
    background: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(8, 15, 28, .98));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(52, 211, 153, .08);
    color: #e2e8f0;
}
.upload-progress-dialog::before {
    display: block;
    height: .25rem;
    background: linear-gradient(90deg, #22d3ee, #34d399);
    content: "";
}
.upload-progress-content { padding: 1.5rem; }
.upload-progress-heading { display: flex; align-items: flex-start; gap: 1rem; }
.upload-progress-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid rgba(45, 212, 191, .3);
    border-radius: 1.1rem;
    background: rgba(13, 148, 136, .13);
    color: #5eead4;
}
.upload-progress-spinner {
    width: 1.45rem;
    height: 1.45rem;
    border: .17rem solid rgba(94, 234, 212, .22);
    border-top-color: currentColor;
    border-radius: 999px;
    animation: upload-progress-spin .85s linear infinite;
}
.upload-progress-check { display: none; font-size: 1.55rem; font-weight: 800; }
.upload-progress-modal[data-state="success"] .upload-progress-spinner,
.upload-progress-modal[data-state="error"] .upload-progress-spinner { display: none; }
.upload-progress-modal[data-state="success"] .upload-progress-check { display: block; }
.upload-progress-modal[data-state="error"] .upload-progress-icon { border-color: rgba(251, 113, 133, .4); background: rgba(159, 18, 57, .18); color: #fda4af; }
.upload-progress-modal[data-state="error"] .upload-progress-dialog::before { background: #fb7185; }
.upload-progress-kicker { margin: 0 0 .35rem; color: #5eead4; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.upload-progress-title { margin: 0; color: #f8fafc; font-size: 1.2rem; font-weight: 700; line-height: 1.35; }
.upload-progress-description { margin: .55rem 0 0; color: #94a3b8; font-size: .9rem; line-height: 1.55; }
.upload-progress-track { position: relative; overflow: hidden; height: .65rem; margin-top: 1.6rem; border-radius: 999px; background: rgba(51, 65, 85, .7); }
.upload-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #34d399); box-shadow: 0 0 20px rgba(52, 211, 153, .35); transition: width .2s ease-out; }
.upload-progress-fill.is-indeterminate { width: 40%; animation: upload-progress-indeterminate 1.25s ease-in-out infinite; }
.upload-progress-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .65rem; color: #94a3b8; font-size: .75rem; }
.upload-progress-percent { color: #cbd5e1; font-variant-numeric: tabular-nums; }
.upload-progress-note { margin: 1.1rem 0 0; color: #64748b; font-size: .75rem; line-height: 1.5; }
body.upload-progress-open { overflow: hidden; }
@keyframes upload-progress-spin { to { transform: rotate(360deg); } }
@keyframes upload-progress-indeterminate { 0% { transform: translateX(-150%); } 100% { transform: translateX(340%); } }
@media (max-width: 480px) { .upload-progress-content { padding: 1.25rem; } .upload-progress-title { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .upload-progress-spinner, .upload-progress-fill.is-indeterminate { animation: none; } .upload-progress-fill { transition: none; } }