.upload-area{position:relative;border:2px dashed var(--border2);border-radius:18px;padding:40px 24px 36px;text-align:center;cursor:pointer;background:var(--input-bg);transition:border-color 0.25s ease,background 0.25s ease,transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.25s ease!important;overflow:hidden;margin-bottom:16px}.upload-area::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(79,142,247,0.06) 0%,transparent 70%);opacity:0;transition:opacity 0.3s ease;pointer-events:none}.upload-area:hover::before,.upload-area:focus-within::before{opacity:1}.upload-area:hover,.upload-area:focus-within{border-color:var(--accent);border-style:solid;background:rgba(79,142,247,0.03);box-shadow:0 0 0 4px rgba(79,142,247,0.08),0 4px 20px rgba(0,0,0,0.15);transform:translateY(-1px)}.upload-area.drag-over{border-color:var(--accent)!important;border-style:solid!important;background:rgba(79,142,247,0.07)!important;transform:scale(1.025) translateY(-2px)!important;box-shadow:0 0 0 4px rgba(79,142,247,0.15),0 0 40px rgba(79,142,247,0.2),0 8px 32px rgba(0,0,0,0.2)!important}.upload-area.drag-over::before{opacity:1;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(79,142,247,0.12) 0%,transparent 70%)}.upload-area.drag-over::after{content:'';position:absolute;inset:-2px;border-radius:18px;background:transparent;border:2px solid rgba(79,142,247,0.4);animation:uploadRipple 1.2s ease-out infinite;pointer-events:none}@keyframes uploadRipple{0%{transform:scale(1);opacity:0.8}100%{transform:scale(1.04);opacity:0}}.upload-icon{font-size:44px;display:block;margin-bottom:12px;transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);filter:drop-shadow(0 2px 8px rgba(79,142,247,0.3))}.upload-area:hover .upload-icon{transform:scale(1.12) translateY(-3px)}.upload-area.drag-over .upload-icon{animation:iconFloat 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards}@keyframes iconFloat{0%{transform:scale(1) translateY(0)}40%{transform:scale(1.35) translateY(-8px)}70%{transform:scale(1.2) translateY(-5px)}100%{transform:scale(1.25) translateY(-6px)}}.upload-area strong{display:block;font-size:15px;font-weight:800;color:var(--text);margin-bottom:6px;transition:color 0.2s ease}.upload-area:hover strong,.upload-area.drag-over strong{color:var(--accent)}.upload-area small{font-size:12px;color:var(--muted);display:block;margin-bottom:14px}.upload-hint-chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}.upload-chip{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:rgba(79,142,247,0.1);color:var(--accent);border:1px solid rgba(79,142,247,0.2);letter-spacing:0.5px;text-transform:uppercase}.upload-area .drop-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:rgba(79,142,247,0.08);border-radius:16px;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:2}.upload-area.drag-over .drop-overlay{opacity:1}.drop-overlay-text{font-size:18px;font-weight:800;color:var(--accent);letter-spacing:-0.3px}.drop-overlay-icon{font-size:32px;animation:dropBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) infinite alternate}@keyframes dropBounce{from{transform:translateY(0)}to{transform:translateY(-6px)}}.file-count{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px;min-height:22px;transition:color 0.2s ease}.file-count.has-files{color:var(--accent)}.file-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:var(--accent);color:#fff;border-radius:999px;font-size:11px;font-weight:800;animation:badgePop 0.35s cubic-bezier(0.34,1.56,0.64,1) both}@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;margin-bottom:16px}.thumb-wrap{position:relative;animation:thumbSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;border-radius:12px}.thumb-wrap:nth-child(1){animation-delay:0.00s}.thumb-wrap:nth-child(2){animation-delay:0.04s}.thumb-wrap:nth-child(3){animation-delay:0.08s}.thumb-wrap:nth-child(4){animation-delay:0.12s}.thumb-wrap:nth-child(5){animation-delay:0.16s}.thumb-wrap:nth-child(6){animation-delay:0.20s}.thumb-wrap:nth-child(7){animation-delay:0.24s}.thumb-wrap:nth-child(8){animation-delay:0.28s}.thumb-wrap:nth-child(n+9){animation-delay:0.30s}@keyframes thumbSlideIn{from{opacity:0;transform:scale(0.6) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:2px solid var(--border2);display:block;transition:border-color 0.2s ease,transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s ease!important;background:var(--input-bg)}.thumb:hover{border-color:var(--accent)!important;transform:scale(1.06)!important;box-shadow:0 6px 20px rgba(0,0,0,0.35),0 0 0 3px rgba(79,142,247,0.2)!important;z-index:2;position:relative}.thumb-wrap::after{content:attr(data-size);position:absolute;bottom:22px;left:50%;transform:translateX(-50%) translateY(4px);background:rgba(0,0,0,0.75);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;white-space:nowrap;opacity:0;transition:opacity 0.2s ease,transform 0.2s ease;pointer-events:none;backdrop-filter:blur(4px)}.thumb-wrap:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}.thumb-name{display:block;font-size:9px;font-weight:600;color:var(--muted);text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px;padding:0 2px;transition:color 0.2s ease}.thumb-wrap:hover .thumb-name{color:var(--accent)}.thumb-remove{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:10px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:opacity 0.15s ease,transform 0.2s cubic-bezier(0.34,1.56,0.64,1);z-index:3;line-height:1}.thumb-wrap:hover .thumb-remove{opacity:1;transform:scale(1)}.thumb-remove:hover{background:#dc2626;transform:scale(1.15)!important}.progress-wrap{margin-bottom:16px;display:none;animation:progressFadeIn 0.3s ease both}@keyframes progressFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.progress-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}.progress-label span:last-child{color:var(--accent);font-weight:800;font-variant-numeric:tabular-nums;min-width:36px;text-align:right;transition:color 0.2s ease}.progress-bar{width:100%;height:8px;background:var(--border2);border-radius:999px;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent) 0%,#818cf8 50%,var(--pink) 100%);background-size:200% 100%;border-radius:999px;transition:width 0.45s cubic-bezier(0.4,0,0.2,1)!important;width:0%;position:relative;animation:progressGradient 2s linear infinite}@keyframes progressGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient( 90deg,transparent 0%,rgba(255,255,255,0.35) 45%,rgba(255,255,255,0.55) 50%,rgba(255,255,255,0.35) 55%,transparent 100% );background-size:60% 100%;animation:shimmerSweep 1.4s ease-in-out infinite;border-radius:inherit}@keyframes shimmerSweep{0%{background-position:-100% 0}100%{background-position:200% 0}}.progress-fill::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.9);box-shadow:0 0 8px 4px rgba(79,142,247,0.6);animation:progressPulse 0.8s ease-in-out infinite alternate}@keyframes progressPulse{from{opacity:0.6;box-shadow:0 0 6px 2px rgba(79,142,247,0.4)}to{opacity:1.0;box-shadow:0 0 12px 6px rgba(79,142,247,0.7)}}.progress-fill.complete{background:linear-gradient(90deg,#22c55e,#4ade80)!important;animation:none!important}.progress-fill.complete::before{display:none}.upload-area.has-files{border-style:solid;border-color:rgba(79,142,247,0.4);background:rgba(79,142,247,0.03);padding:16px 20px}.upload-area.has-files .upload-icon{font-size:28px;margin-bottom:4px}.upload-area.has-files strong{font-size:14px;color:var(--accent)}body.page-drag-active .upload-area{border-color:var(--accent)!important;border-style:dashed!important;animation:pageDragPulse 1s ease infinite alternate}@keyframes pageDragPulse{from{box-shadow:0 0 0 0px rgba(79,142,247,0.2)}to{box-shadow:0 0 0 6px rgba(79,142,247,0.1)}}@media (max-width:500px){.upload-area{padding:30px 16px 26px}.upload-icon{font-size:36px}.preview-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}.progress-bar{height:10px}.thumb-remove{opacity:1;transform:scale(1)}}[dir="rtl"] .progress-fill::after{background:linear-gradient( 270deg,transparent 0%,rgba(255,255,255,0.35) 45%,rgba(255,255,255,0.55) 50%,rgba(255,255,255,0.35) 55%,transparent 100% )}[dir="rtl"] .progress-fill::before{right:unset;left:0}[dir="rtl"] .progress-label span:last-child{text-align:left}[dir="rtl"] .thumb-remove{right:unset;left:-5px}