@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');
:root{--bg:#081018;--card:#101b24;--line:#263642;--text:#f4f7f8;--muted:#91a0aa;--accent:#d9b77a;--accent2:#f0d59e;--danger:#e77979;--ok:#71d0a2}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Cairo,system-ui,sans-serif}body{min-height:100vh;background:radial-gradient(circle at 50% 0%,#1b2b37 0,#0b151d 38%,#060c11 100%);color:var(--text)}
.shell{min-height:100vh;display:grid;place-items:center;padding:22px}.upload-card{width:min(620px,100%);background:rgba(16,27,36,.94);border:1px solid rgba(255,255,255,.08);border-radius:30px;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.35);backdrop-filter:blur(12px)}
.mark{width:58px;height:58px;margin:0 auto 10px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent2),var(--accent));color:#111;font-size:28px;font-weight:800;box-shadow:0 12px 30px rgba(217,183,122,.15)}h1{text-align:center;font-size:28px;margin:0 0 24px;font-weight:800;letter-spacing:-.5px}
.dropzone{min-height:270px;border:1.5px dashed #435560;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:25px;cursor:pointer;transition:.2s;background:rgba(255,255,255,.02)}
.dropzone:hover,.dropzone.drag,.dropzone:focus{border-color:var(--accent);background:rgba(217,183,122,.05);outline:none}.cloud{width:66px;height:66px;border-radius:21px;display:grid;place-items:center;background:#192832;color:var(--accent2);font-size:34px;margin-bottom:8px}.drop-title{font-size:20px;font-weight:800}.drop-hint{font-size:13px;color:var(--muted)}
.outline{margin-top:16px;border:1px solid #50626e;background:transparent;color:var(--text);border-radius:12px;padding:10px 22px;font:700 13px Cairo;cursor:pointer}.outline:hover{border-color:var(--accent);color:var(--accent2)}
.file-list{display:grid;gap:8px;margin-top:15px}.file{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #253640;border-radius:13px;background:#0c161e}.file .icon{color:var(--accent2)}.file .name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.file .size{color:var(--muted);font-size:11px;direction:ltr}
.primary{width:100%;border:0;border-radius:14px;padding:14px;margin-top:14px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#121212;font:800 15px Cairo;cursor:pointer;box-shadow:0 10px 28px rgba(217,183,122,.12)}.primary:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.primary:not(:disabled):hover{filter:brightness(1.04);transform:translateY(-1px)}
.progress-wrap{margin-top:15px}.progress{height:7px;border-radius:99px;background:#1d2b34;overflow:hidden}.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}.progress-wrap div:last-child{text-align:left;color:var(--muted);font-size:10px;margin-top:5px;direction:ltr}.status{text-align:center;min-height:23px;margin-top:12px;font-size:12px;font-weight:700}.status.ok{color:var(--ok)}.status.err{color:var(--danger)}
@media(max-width:560px){.shell{padding:12px}.upload-card{padding:19px;border-radius:24px}.dropzone{min-height:240px}.mark{width:52px;height:52px}.drop-title{font-size:18px}}