:root { --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2b303b; --text:#e8eaf0; --muted:#9aa3b2; --accent:#6c8cff; --danger:#ff6b6b; --ok:#4cc38a; --warn:#f0b429; }
@media (prefers-color-scheme: light) { :root { --bg:#f3f4f7; --panel:#fff; --panel2:#f0f2f6; --line:#d9dde5; --text:#1b1f27; --muted:#5d6676; } }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:16px; margin:0 0 10px; } h3 { font-size:14px; margin:0 0 8px; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
button, select, input, textarea { font:inherit; color:inherit; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:7px 12px; min-width:0; }
button { cursor:pointer; } button:disabled { opacity:.5; cursor:default; } button:hover:not(:disabled) { border-color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } button.danger { border-color:var(--danger); color:var(--danger); } button.danger.solid { background:var(--danger); color:#fff; }
input[type=checkbox] { width:auto; } textarea { width:100%; resize:vertical; } input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
a.btn { display:inline-block; padding:7px 14px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--text); } a.btn:hover { text-decoration:none; border-color:var(--accent); } a.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.muted { color:var(--muted); } .center { text-align:center; } .pad { padding:16px; } .grow { flex:1; } .pre { white-space:pre-wrap; } small { color:var(--muted); font-size:12px; }
.layout { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.side { background:var(--panel); border-right:1px solid var(--line); padding:14px; display:flex; flex-direction:column; gap:10px; position:sticky; top:0; height:100vh; }
.logo { font-size:16px; padding:4px 4px 10px; } .logo b { color:var(--accent); }
.navlist { display:flex; flex-direction:column; gap:2px; } .navlist a { display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius:8px; color:var(--text); } .navlist a:hover { background:var(--panel2); text-decoration:none; } .navlist a.on { background:var(--accent); color:#fff; } .ico { width:18px; text-align:center; }
main { padding:22px 26px 60px; min-width:0; max-width:1240px; width:100%; outline:none; }
.head { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; } .head .sp { flex:1; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; } .card + .card { margin-top:14px; }
.grid { display:grid; gap:14px; } .g2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .g4 { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); } .g3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; } .kpi .v { font-size:24px; font-weight:650; margin-top:2px; } .kpi .l { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row.end { justify-content:flex-end; margin-top:14px; } .stack { display:flex; flex-direction:column; gap:10px; }
.f { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; } .f > span { color:var(--muted); font-size:12px; } .f input, .f select, .f textarea { width:100%; }
.badge { display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; background:var(--panel2); border:1px solid var(--line); white-space:nowrap; }
.s-live, .s-approved, .s-published, .s-succeeded, .s-reliable, .s-sent { color:var(--ok); border-color:var(--ok); } .s-rejected, .s-failed, .s-denied { color:var(--danger); border-color:var(--danger); }
.s-awaiting_approval, .s-review, .s-suggested, .s-in_review, .s-early_signal, .s-insufficient_data, .s-scheduled, .s-generating, .s-queued, .s-running { color:var(--warn); border-color:var(--warn); }
table { width:100%; border-collapse:collapse; } th { text-align:left; color:var(--muted); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.04em; } th, td { padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; } tr:last-child td { border-bottom:0; } td.r, th.r { text-align:right; }
.tablewrap { overflow-x:auto; }
.attn { display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-left:4px solid var(--warn); border-radius:8px; margin-bottom:8px; background:var(--panel2); } .attn.bad { border-left-color:var(--danger); } .attn.info { border-left-color:var(--accent); } .attn .t { flex:1; min-width:0; }
.empty { text-align:center; color:var(--muted); padding:28px 12px; } .banner { padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel2); margin-bottom:12px; } .banner.warn { border-color:var(--warn); } .banner.bad { border-color:var(--danger); } .banner.ok { border-color:var(--ok); }
.tabs { display:flex; gap:4px; margin-bottom:14px; flex-wrap:wrap; } .tabs a, .tabs button { padding:7px 14px; border-radius:8px; border:1px solid var(--line); color:var(--text); background:var(--panel2); } .tabs a.on, .tabs button.on { background:var(--accent); border-color:var(--accent); color:#fff; text-decoration:none; }
.assets { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; } .asset { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; } .asset.sel { outline:2px solid var(--accent); }
.asset .thumb { aspect-ratio:9/12; background:#000; display:flex; align-items:center; justify-content:center; color:var(--muted); } .asset .thumb img, .asset .thumb video { width:100%; height:100%; object-fit:cover; } .asset .thumb audio { width:92%; } .asset .meta { padding:8px 10px; display:flex; flex-direction:column; gap:2px; font-size:12px; } .asset .meta b { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; } .modal { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; width:min(560px,100%); max-height:90vh; overflow:auto; }
#toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:60; } .toast { background:var(--panel); border:1px solid var(--ok); border-left-width:4px; padding:10px 14px; border-radius:8px; max-width:380px; box-shadow:0 6px 24px rgba(0,0,0,.3); } .toast.err { border-color:var(--danger); }
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; } .auth { width:min(400px,100%); display:flex; flex-direction:column; gap:6px; }
.json { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px; overflow:auto; max-height:260px; font-size:12px; }
.pill-list { display:flex; gap:6px; flex-wrap:wrap; } .check { display:flex; gap:8px; align-items:center; margin:4px 0; }
.bar { height:8px; background:var(--panel2); border-radius:99px; overflow:hidden; } .bar > i { display:block; height:100%; background:var(--accent); }
.step { display:flex; gap:10px; align-items:flex-start; padding:8px 0; } .dot { width:18px; height:18px; border-radius:50%; border:2px solid var(--line); flex:none; margin-top:1px; } .dot.ok { background:var(--ok); border-color:var(--ok); } .dot.bad { border-color:var(--danger); }
@media (max-width: 860px) { .layout { grid-template-columns:1fr; } .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; } .navlist { flex-direction:row; flex-wrap:wrap; } main { padding:16px 14px 60px; } }