:root { --bg:#0b1220; --card:#121b2f; --muted:#93a4c7; --text:#e9f1ff; --accent:#4da3ff; --danger:#ff5b5b; --ok:#2dd4bf; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; background:var(--bg); color:var(--text); }
a{ color:var(--accent); text-decoration:none; }
.container{ padding:18px; max-width:1100px; margin:0 auto; }
.topbar{ display:flex; gap:16px; align-items:center; justify-content:space-between; padding:12px 18px; background:#0a1020; border-bottom:1px solid #1f2a44; position:sticky; top:0; }
.brand{ font-weight:800; letter-spacing:.5px; }
.nav a{ margin-right:12px; color:var(--text); opacity:.85; }
.nav a:hover{ opacity:1; }
.card{ background:var(--card); border:1px solid #1f2a44; border-radius:14px; padding:16px; margin:14px 0; box-shadow:0 10px 25px rgba(0,0,0,.2); }
.narrow{ max-width:420px; margin:60px auto; }
label{ display:block; font-size:13px; color:var(--muted); margin:10px 0 6px; }
input,select,textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a3a5f; background:#0c1428; color:var(--text); }
textarea{ resize:vertical; }
.btn{ padding:10px 14px; border-radius:10px; border:1px solid #2a3a5f; background:var(--accent); color:#031126; font-weight:700; cursor:pointer; }
.btn.secondary{ background:#0c1428; color:var(--text); }
.btn.danger{ background:var(--danger); color:#250404; border-color:#5f2a2a; }
.btn.smallBtn{ padding:8px 10px; font-size:12px; }
.row{ display:flex; gap:10px; align-items:center; }
.row.space{ justify-content:space-between; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.span2{ grid-column:1 / span 2; }
.hint{ color:var(--muted); font-size:13px; margin-top:6px; }
.alert{ padding:10px 12px; border-radius:10px; margin-left:10px; }
.alert.error{ background:rgba(255,91,91,.14); border:1px solid rgba(255,91,91,.35); }
.alert.ok{ background:rgba(45,212,191,.14); border:1px solid rgba(45,212,191,.35); }
.hidden{ display:none; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid #1f2a44; padding:10px; text-align:left; font-size:13px; vertical-align:top;}
.badge{ padding:3px 8px; border-radius:999px; font-size:12px; border:1px solid #2a3a5f; background:#0c1428; }
.badge.Success{ border-color:rgba(45,212,191,.45); }
.badge.Failed{ border-color:rgba(255,91,91,.45); }
.badge.Pending{ border-color:rgba(77,163,255,.45); }
.badge.Uploading{ border-color:rgba(255,209,102,.45); }
.badge.error{ border-color:rgba(255,91,91,.45); }
.badge.info{ border-color:rgba(77,163,255,.45); }
.badge.warn{ border-color:rgba(255,209,102,.45); }
.pre{ background:#0a1020; border:1px solid #1f2a44; padding:10px; border-radius:12px; overflow:auto; white-space:pre-wrap; }
.pre.small{ font-size:12px; max-width:420px; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.mediaCard{ border:1px solid #1f2a44; border-radius:14px; overflow:hidden; background:#0c1428; }
.mediaPreview{ background:#000; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
.mediaPreview video,.mediaPreview img{ width:100%; height:100%; object-fit:cover; }
.meta{ padding:10px; display:flex; gap:8px; align-items:center; justify-content:space-between; }
.small{ font-size:12px; color:var(--muted); }
.progressWrap{ margin:8px 0 14px; }
.bar{ width:100%; height:10px; background:#0a1020; border:1px solid #1f2a44; border-radius:999px; overflow:hidden; }
.bar > div{ height:100%; width:0%; background:var(--accent); transition:width .15s ease; }
@media (max-width: 900px) { .grid2{ grid-template-columns:1fr; } .span2{ grid-column:auto; } }

/* Modal & Dropzone */
.modal.hidden{ display:none; }
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px;}
.modal-card{ width:min(720px, 96vw); background:#0b1220; border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.modal-body{ padding:14px; }
.dropzone{ border:2px dashed rgba(255,255,255,.18); border-radius:14px; padding:20px; cursor:pointer; }
.dropzone.dragover{ border-color: rgba(255,255,255,.45); }