:root { --bg:#0c0c10; --card:#15151b; --card2:#1b1b23; --line:#272731; --text:#ececf2; --muted:#8b8b99; --acc:#ff7a1a; --acc2:#ffb066; --ok:#3ccf8e; --bad:#ff6b6b; --warn:#ffc04d; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--acc2); }
button { background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 14px; font:inherit; cursor:pointer; }
button:hover { border-color:#3a3a46; }
button.main { background:var(--acc); border-color:var(--acc); color:#140a00; font-weight:600; }
button:disabled { opacity:.45; cursor:default; }
input, textarea, select { width:100%; background:#101016; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 10px; font:inherit; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--acc); }
textarea { resize:vertical; min-height:90px; }
label { color:var(--muted); font-size:12px; display:block; margin:12px 0 4px; }
.err { color:var(--bad); min-height:18px; font-size:13px; }
.muted { color:var(--muted); }
header { display:flex; align-items:center; gap:14px; padding:12px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(12,12,16,.92); backdrop-filter:blur(8px); z-index:5; }
header .logo { font-weight:700; letter-spacing:.2px; }
header .logo b { color:var(--acc); }
header nav { display:flex; gap:6px; margin-left:12px; }
header nav a { color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px; }
header nav a.on, header nav a:hover { color:var(--text); background:var(--card); }
header .who { margin-left:auto; color:var(--muted); font-size:13px; }
main { max-width:1180px; margin:0 auto; padding:22px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px; }
h1 { font-size:22px; margin:0 0 14px; } h2 { font-size:16px; margin:0 0 10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
@media (max-width:820px) { .grid2, .grid3 { grid-template-columns:1fr; } main { padding:14px; } }
.presets { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.preset { border:1px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; background:var(--card2); }
.preset.on { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset; }
.preset b { display:block; margin-bottom:4px; } .preset span { color:var(--muted); font-size:12px; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.seg button { border:0; border-radius:0; background:transparent; }
.seg button.on { background:var(--acc); color:#140a00; font-weight:600; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { border:1px solid var(--line); border-radius:20px; padding:4px 10px; font-size:12px; cursor:pointer; color:var(--muted); }
.chip.on { border-color:var(--acc); color:var(--text); }
table { width:100%; border-collapse:collapse; }
td, th { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:12px; }
tr.click { cursor:pointer; } tr.click:hover td { background:var(--card2); }
.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; border:1px solid var(--line); white-space:nowrap; }
.badge.running, .badge.queued { color:var(--warn); border-color:#5a4a20; }
.badge.waiting { color:var(--acc2); border-color:#6b4520; }
.badge.done { color:var(--ok); border-color:#1f5a40; }
.badge.error, .badge.cancelled { color:var(--bad); border-color:#5a2525; }
.chat { display:flex; flex-direction:column; gap:10px; max-height:560px; overflow:auto; padding-right:4px; }
.msg { border-radius:12px; padding:10px 12px; white-space:pre-wrap; word-break:break-word; }
.msg.agent { background:var(--card2); border:1px solid var(--line); }
.msg.user { background:#2a1a0d; border:1px solid #4a2c12; align-self:flex-end; max-width:80%; }
.msg.system { color:var(--muted); font-size:12px; padding:2px 4px; }
.msg small { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.activity { font:12px/1.55 ui-monospace, Menlo, monospace; color:var(--muted); max-height:220px; overflow:auto; white-space:pre-wrap; }
.spin { display:inline-block; width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:sp 1s linear infinite; vertical-align:-2px; margin-right:6px; }
@keyframes sp { to { transform:rotate(360deg) } }
video { width:100%; border-radius:10px; background:#000; max-height:70vh; }
.board { width:100%; height:78vh; border:1px solid var(--line); border-radius:12px; background:#fff; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.drop { border:2px dashed var(--line); border-radius:12px; padding:16px; text-align:center; color:var(--muted); cursor:pointer; }
.drop.over { border-color:var(--acc); color:var(--text); }
.files { font-size:13px; color:var(--muted); margin-top:6px; }
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.auth .card { width:100%; max-width:380px; padding:26px; }
.tabs { display:flex; gap:6px; margin-bottom:6px; }
.tabs button { flex:1; }
.tabs button.on { background:var(--acc); border-color:var(--acc); color:#140a00; font-weight:600; }