:root { color-scheme: dark; --bg:#0b0d12; --panel:#141a24; --line:#243044; --text:#e8edf7; --muted:#9aa6b8; --accent:#a855f7; --ok:#34d399; --warn:#fbbf24; --err:#f87171; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 ui-sans-serif,system-ui,sans-serif; background:var(--bg); color:var(--text); }
a { color:#c4a1ff; text-decoration:none; } a:hover { text-decoration:underline; }
header.top { display:flex; align-items:center; gap:18px; padding:10px 22px; border-bottom:1px solid var(--line); background:#0e131b; position:sticky; top:0; z-index:5; }
header.top .brand { font-weight:700; letter-spacing:.2px; } header.top .brand span { color:var(--accent); font-weight:500; font-size:.85em; } header.top .brand img{border-radius:7px}
nav { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
nav a { padding:6px 11px; border-radius:8px; color:var(--muted); } nav a:hover { background:var(--panel); text-decoration:none; color:var(--text); }
nav a.active { background:var(--panel); color:var(--text); box-shadow:inset 0 -2px var(--accent); }
main { max-width:1180px; margin:0 auto; padding:24px 22px 70px; }
h1 { font-size:1.45rem; margin:0 0 4px; } h2 { font-size:1.05rem; margin:26px 0 10px; } .sub { color:var(--muted); margin:0 0 20px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:14px 0; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.stat .n { font-size:1.7rem; font-weight:700; } .stat .l { color:var(--muted); font-size:.85rem; }
table { width:100%; border-collapse:collapse; } th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
td.num { text-align:right; font-variant-numeric:tabular-nums; } .mono { font-family:ui-monospace,Menlo,monospace; font-size:.85em; word-break:break-all; } .muted { color:var(--muted); }
input,select,button,textarea { font:inherit; color:var(--text); background:#0f141c; border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
input:focus,select:focus { outline:2px solid var(--accent); outline-offset:-1px; } input[type=checkbox] { width:auto; accent-color:var(--accent); }
button,.btn { cursor:pointer; background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; display:inline-block; }
button.ghost,.btn.ghost { background:transparent; border-color:var(--line); color:var(--text); } button.danger { background:#b91c1c; border-color:#b91c1c; }
button:disabled { opacity:.5; cursor:not-allowed; } form.inline { display:inline; }
label { display:block; margin:10px 0 4px; color:var(--muted); font-size:.85rem; } .row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; } .row > div { flex:1; min-width:150px; } .row > .grow2 { flex:2; } .row > .grow3 { flex:3; }
.tag { display:inline-block; padding:1px 8px; border-radius:99px; font-size:.75rem; border:1px solid var(--line); }
.tag.ready,.tag.done { color:var(--ok); border-color:#1f6f55; } .tag.failed,.tag.cancelled { color:var(--err); border-color:#7f2d2d; }
.tag.processing,.tag.running,.tag.queued { color:var(--warn); border-color:#7a5f1a; } .tag.stored { color:var(--muted); }
.flash:empty { display:none; } .flash { padding:10px 14px; border-radius:10px; margin:0 0 16px; border:1px solid var(--line); } .flash.ok { border-color:#1f6f55; background:#0f2a22; } .flash.warn { border-color:#7a5f1a; background:#2a220f; } .flash.error { border-color:#7f2d2d; background:#2a1212; }
progress { width:100%; height:8px; accent-color:var(--accent); } .cover { width:48px; height:68px; object-fit:cover; border-radius:6px; background:#0f141c; }
.login { max-width:380px; margin:12vh auto; } .login .card { padding:24px; } .login input { width:100%; } .login button { width:100%; margin-top:16px; }
video { width:100%; max-height:70vh; background:#000; border-radius:10px; } pre { background:#0f141c; padding:10px 12px; border-radius:8px; overflow:auto; border:1px solid var(--line); }
.kv { display:grid; grid-template-columns:160px 1fr; gap:6px 14px; } .kv dt { color:var(--muted); } .kv dd { margin:0; word-break:break-word; }
.preview { display:flex; gap:12px; align-items:center; margin-top:10px; min-height:68px; }
@media (max-width:700px){ main{padding:16px 12px 60px} .kv{grid-template-columns:1fr} th:nth-child(n+6),td:nth-child(n+6){display:none} }