:root{--bg:#0f141a;--card:#18212a;--border:#26323f;--txt:#e8edf2;--muted:#8ca0b3;--accent:#ff5722;--accent2:#ff7a50;--ok:#2ec4b6;--warn:#ffc107;--err:#ef4444;--r:10px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--txt);line-height:1.5}
a{color:inherit;text-decoration:none}
.wrap{display:flex;min-height:100vh}
.side{width:220px;background:var(--card);border-right:1px solid var(--border);padding:20px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{font-size:20px;font-weight:800;padding:0 20px 20px;color:var(--accent)}
.nav a{display:flex;gap:10px;padding:11px 20px;color:var(--muted);font-size:14px;border-left:3px solid transparent}
.nav a:hover{color:var(--txt);background:#1e2935}
.nav a.on{color:var(--accent);border-left-color:var(--accent);background:#1e2935}
.main{flex:1;padding:24px;max-width:1400px}
h1.title{font-size:22px;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:16px}
.card h2{font-size:15px;margin-bottom:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
button,.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;background:#26323f;color:var(--txt);transition:.2s;display:inline-flex;gap:6px;align-items:center}
button:hover{opacity:.85}
button:disabled{opacity:.4;cursor:not-allowed}
.prim{background:var(--accent);color:#fff}
.okb{background:var(--ok);color:#05201e}
.dan{background:var(--err);color:#fff}
.dan{background:var(--err);color:#fff}
.wrn{background:var(--warn);color:#332600}
.sm{padding:6px 10px;font-size:12px}
input,textarea,select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#0b1015;color:var(--txt);font-size:14px;font-family:inherit}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-size:12px;text-transform:uppercase}
.badge{padding:3px 9px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase}
.b-pending{background:#343f4c;color:#a9b8c6}
.b-downloading{background:#1e3a8a;color:#bfdbfe}
.b-ready{background:#0f463d;color:#6ee7b6}
.b-streaming{background:var(--accent);color:#fff}
.b-done{background:#26323f;color:#7d8f9e}
.b-error{background:#7f1d1d;color:#fecaca}
.stat{text-align:center}
.stat .n{font-size:26px;font-weight:800}
.stat .l{font-size:12px;color:var(--muted);margin-top:4px}
.bar{height:7px;background:#0b1015;border-radius:4px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--accent)}
.logs{background:#0b1015;border-radius:8px;padding:12px;font-family:monospace;font-size:12px;height:480px;overflow-y:auto}
.logs div{padding:3px 0;border-bottom:1px solid #151d26}
.logs .t{color:#556677}
.logs .error{color:#fca5a5}
.thumb{width:90px;height:50px;object-fit:cover;border-radius:6px;background:#0b1015}
.toast{position:fixed;bottom:20px;right:20px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--ok);padding:12px 18px;border-radius:8px;z-index:999;display:none}
.toast.e{border-left-color:var(--err)}
.log-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.log-box{width:360px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:32px}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}.side{width:64px}.nav a span,.logo span{display:none}}