:root { color-scheme: dark; --bg:#17191f; --panel:#222630; --raised:#2b303b; --line:#3a414e; --text:#f5f7fb; --muted:#abb4c4; --blue:#4a98e7; --blue-hover:#66acef; --red:#d8565e; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:Inter,"Segoe UI",Arial,sans-serif; -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; } button { cursor:pointer; } .hidden { display:none !important; }
.header { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--line); background:rgba(32,35,43,.96); position:sticky; top:0; z-index:10; }
.logo { color:var(--text); text-decoration:none; font-weight:750; font-size:20px; }.logo span,.logo b { color:#8ec7ff; }.logout-button,.text-button { border:0; background:transparent; color:var(--muted); padding:8px; }.logout-button:hover,.text-button:hover { color:var(--text); }
.container { width:min(100% - 40px, 1040px); margin:0 auto; padding:46px 0 112px; }.intro { max-width:580px; }.eyebrow { margin:0 0 8px; color:#8ec7ff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.intro h1 { margin:0; font-size:clamp(28px,5vw,44px); }.intro>p { color:var(--muted); line-height:1.55; }
.dropzone { min-height:260px; margin-top:30px; border:2px dashed #5286bb; border-radius:22px; background:linear-gradient(145deg,#202937,#1d2129); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; text-align:center; color:var(--muted); transition:.18s; }.dropzone.drag { border-color:#85c3ff; background:#23374d; transform:scale(1.01); }.dropzone strong { color:var(--text); font-size:21px; }.drop-icon { font-size:46px; color:#87c5ff; line-height:1; }.drop-actions { display:flex; gap:10px; margin-top:12px; }.primary-button,.secondary-button { min-height:44px; border:0; border-radius:11px; padding:0 16px; color:white; font-weight:650; }.primary-button { background:var(--blue); }.primary-button:hover { background:var(--blue-hover); }.secondary-button { background:#3b424f; }.secondary-button:hover { background:#4a5362; }
.queue-section { margin-top:32px; }.queue-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }.queue-header h2 { margin:0; font-size:20px; }.queue-header p { margin:5px 0 0; color:var(--muted); font-size:14px; }.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:15px; margin-top:18px; }.card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--panel); }.preview { height:135px; display:grid; place-items:center; background:#292e38; font-size:50px; overflow:hidden; }.preview img { width:100%; height:100%; object-fit:cover; cursor:zoom-in; }.info { padding:11px; min-width:0; }.info strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; }.info span { display:block; margin-top:5px; color:var(--muted); font-size:12px; }.remove { position:absolute; top:8px; right:8px; width:32px; height:32px; border:0; border-radius:9px; background:rgba(132,43,51,.94); color:white; font-size:17px; }
.upload-button { position:fixed; right:28px; bottom:28px; z-index:20; border:0; border-radius:14px; padding:15px 22px; background:var(--blue); color:white; font-weight:750; box-shadow:0 10px 30px rgba(0,0,0,.35); }.upload-button:hover { background:var(--blue-hover); }.upload-button:disabled { opacity:.6; cursor:not-allowed; }
.upload-status { position:fixed; z-index:30; right:28px; bottom:92px; width:min(380px,calc(100vw - 40px)); padding:14px; border:1px solid #4a5667; border-radius:14px; background:#2b313c; box-shadow:0 14px 36px rgba(0,0,0,.35); }.upload-line { display:flex; gap:10px; justify-content:space-between; align-items:center; font-size:14px; }.upload-line button { border:0; border-radius:8px; color:white; background:#474f5d; padding:6px 8px; }.progress-track { height:8px; margin-top:11px; overflow:hidden; border-radius:9px; background:#15181e; }.progress-track>div { width:0; height:100%; background:var(--blue); transition:width .15s linear; }
.modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.9); padding:18px; }.modal img { max-width:100%; max-height:92vh; border-radius:10px; }.close-modal { position:fixed; right:20px; top:17px; width:42px; height:42px; border:0; border-radius:50%; color:white; background:#3d4450; font-size:28px; }.mobile-nav { display:none; }
.login-page { display:grid; min-height:100vh; place-items:center; padding:22px; }.login-card { width:min(390px,100%); padding:30px; border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:0 20px 50px rgba(0,0,0,.28); }.login-mark { font-size:34px; color:#8ec7ff; }.login-card h1 { margin:10px 0 6px; font-size:26px; }.login-card>p { margin:0 0 24px; color:var(--muted); }.login-card form { display:grid; gap:14px; }.login-card label { display:grid; gap:7px; color:var(--muted); font-size:14px; }.login-card input { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; outline:0; background:#171a20; color:var(--text); }.login-card input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,152,231,.18); }.login-card .primary-button { margin-top:6px; }
@media (max-width:700px) { body { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }.header { height:58px; padding:0 15px; }.logo { font-size:17px; }.container { width:calc(100% - 28px); padding:30px 0 25px; }.intro h1 { font-size:29px; }.dropzone { min-height:220px; margin-top:23px; padding:20px; }.dropzone strong { font-size:18px; }.drop-actions { width:100%; }.drop-actions button { flex:1; padding:0 8px; }.grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.preview { height:112px; }.info { padding:9px; }.remove { width:30px; height:30px; }.upload-button { display:none; }.upload-status { right:12px; bottom:calc(80px + env(safe-area-inset-bottom)); width:calc(100vw - 24px); }.mobile-nav { position:fixed; z-index:20; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; min-height:calc(67px + env(safe-area-inset-bottom)); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(32,35,43,.98); }.mobile-nav button { border:0; border-radius:10px; background:transparent; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; }.mobile-nav span { font-size:21px; }.mobile-nav .main-action { background:var(--blue); color:white; font-weight:700; }.login-card { padding:25px; } }