/* The same tokens as the agent's window (internal/ui/frontend/app.css), so the two look like one
   product. Components only read the tokens. */
:root {
  --bg:#eef0f3; --card:#ffffff; --ink:#171b21; --muted:#646b76;
  --line:#d9dde3; --hover:#f2f4f7; --chip:#eaeef3;
  --accent:#2f5d80; --accent-ink:#ffffff;
  --go:#1f7a4d; --gobg:#e7f4ed;
  --stop:#a3352f; --badbg:#fbeceb; --badline:#f0cfcd;
  --warn:#8a5b12; --warnbg:#fdf4e3; --warnline:#eeddb9;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#12161c; --card:#1a1f27; --ink:#e6e9ee; --muted:#98a1ae;
    --line:#2a313b; --hover:#212832; --chip:#242c37;
    --accent:#5d9ec9; --accent-ink:#0d1218;
    --go:#5cc48d; --gobg:#16281f;
    --stop:#e08b85; --badbg:#2a1a19; --badline:#4a2b29;
    --warn:#d9ac5c; --warnbg:#26200f; --warnline:#463a1c;
    --shadow:none;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
}
.top {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:9px; }
.brand b { font-size:15.5px; }
.brand .sub { color:var(--muted); font-size:13px; }
.mark { width:22px; height:22px; border-radius:6px; background:var(--accent); position:relative; }
.mark::after { content:""; position:absolute; inset:6px 5px; border-radius:2px;
               border:2px solid var(--accent-ink); border-top:0; }
.who { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
main { max-width:1100px; margin:0 auto; padding:20px 16px 40px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
        box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px; }
.narrow { max-width:460px; margin:40px auto; }
h1 { font-size:20px; margin:0 0 6px; }
h2 { font-size:16px; margin:0 0 10px; }
.head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.muted { color:var(--muted); }
label { display:block; font-size:12.5px; color:var(--muted); margin:8px 0 3px; }
input, select {
  font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:7px; padding:7px 9px; width:100%;
}
select { width:auto; }
input:focus, select:focus, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
button { font:inherit; cursor:pointer; border-radius:7px; padding:7px 12px;
         border:1px solid var(--line); background:var(--card); color:var(--ink); }
button:hover { background:var(--hover); }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
button.link { border:0; background:none; color:var(--accent); padding:4px 6px; }
button[disabled] { opacity:.6; cursor:default; }
form button.primary { margin-top:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.row > div { flex:1 1 160px; }
.row > div.wide { flex:2 1 240px; }
.row > div.actions { flex:0 0 auto; display:flex; gap:8px; align-items:center; }
.scroll { overflow-x:auto; }
table.grid { width:100%; border-collapse:collapse; font-size:14px; }
.grid th { text-align:left; font-weight:600; color:var(--muted); font-size:12.5px;
           border-bottom:1px solid var(--line); padding:6px 8px; white-space:nowrap; }
.grid td { border-bottom:1px solid var(--line); padding:8px; vertical-align:middle; }
.grid tr.inactive td { color:var(--muted); }
.grid td.acts { white-space:nowrap; text-align:right; }
.chip { display:inline-block; font-size:12px; padding:1px 8px; border-radius:99px;
        background:var(--chip); white-space:nowrap; }
.chip.go { background:var(--gobg); color:var(--go); }
.chip.warn { background:var(--warnbg); color:var(--warn); border:1px solid var(--warnline); }
.chip.bad { background:var(--badbg); color:var(--stop); border:1px solid var(--badline); }
.note { margin-top:10px; padding:8px 10px; border-radius:7px; background:var(--gobg); color:var(--go); }
.note.bad { background:var(--badbg); color:var(--stop); }
ul.plain { list-style:none; padding:0; margin:0 0 6px; }
ul.plain li { padding:6px 0; border-bottom:1px solid var(--line); }