/* Shared look for the sign-in, status and console pages (the chat page carries the same tokens inline). */
:root {
  color-scheme: dark;
  --bg:#191919; --rail:#141414; --raise:#202020; --raise2:#262626; --hover:#242424;
  --ink:#EDEDEB; --text:#D7D7D4; --mute:#9C9C98; --faint:#7E7E7A;
  --line:#2B2B2B; --line-strong:#3A3A3A;
  --solid:#EDEDEB; --solid-ink:#141414;
  --ok:#34C77B; --ok-bg:#10261A; --ok-line:#1F5E3B;
  --warn:#E8A33D; --warn-bg:#2A1F0E; --warn-line:#6B4C1B;
  --bad:#EF6B5E; --bad-bg:#2C1412; --bad-line:#6E2B25;
  --none:#2E2E2E;
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Manrope","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono","Cascadia Code",ui-monospace,Menlo,Consolas,monospace;
  --r-sm:6px; --r:9px; --r-lg:14px; --r-xl:20px;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); }
body { font:15px/1.6 var(--sans); -webkit-font-smoothing:antialiased; min-height:100dvh; }
a { color:var(--ink); }
button, input, select { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono { font-family:var(--mono); }
[hidden] { display:none !important; }

/* top bar: logo, tabs in the middle, actions on the right */
.top { position:sticky; top:0; z-index:4; background:var(--bg); border-bottom:1px solid var(--line); }
.top-in { max-width:1120px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:600 17px/1 var(--display); letter-spacing:-.02em; }
.logo { width:30px; height:30px; border-radius:8px; background:var(--solid); color:var(--solid-ink); display:grid; place-items:center; flex:none; }
.logo svg { width:17px; height:17px; fill:currentColor; }
.tabs { display:flex; gap:4px; margin:0 auto; }
.tab { border:1px solid transparent; background:none; border-radius:var(--r); padding:7px 14px; color:var(--mute); cursor:pointer; text-decoration:none; font-weight:500; }
.tab:hover { color:var(--ink); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color:var(--ink); background:var(--raise2); border-color:var(--line-strong); }
.page { max-width:1120px; margin:0 auto; padding:36px 24px 64px; }
.page-title { font:500 30px/1.15 var(--display); letter-spacing:-.025em; margin:0 0 6px; }
.lede { color:var(--mute); margin:0 0 28px; }

/* buttons and fields */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line-strong); background:var(--raise); color:var(--ink); border-radius:var(--r); padding:8px 14px; font-weight:500; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover { background:var(--hover); }
.btn:disabled { opacity:.5; cursor:default; }
.btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn-solid { background:var(--solid); color:var(--solid-ink); border-color:var(--solid); }
.btn-solid:hover { background:#fff; }
.btn-ghost { background:none; border-color:var(--line); color:var(--mute); }
.btn-ghost:hover { color:var(--ink); }
.btn-danger { background:none; border-color:var(--bad-line); color:var(--bad); }
.btn-danger:hover { background:var(--bad-bg); }
.btn-danger.armed { background:var(--bad); color:#140707; border-color:var(--bad); }
.field { display:flex; flex-direction:column; gap:6px; }
.field > span, .label { font-size:13.5px; color:var(--text); }
.input { width:100%; border:1px solid var(--line-strong); background:var(--rail); border-radius:var(--r); padding:10px 12px; outline:none; }
.input:focus { border-color:var(--mute); }
.hint { font-size:13px; color:var(--faint); }
.err { color:var(--bad); font-size:14px; min-height:1.2em; margin:0; }

.card { background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); }
.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:13px; color:var(--text); }
.dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--faint); }
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.bad { background:var(--bad); }
.spin { width:16px; height:16px; border:2px solid var(--line-strong); border-top-color:var(--ink); border-radius:50%; animation:spin .8s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 720px) {
  .top-in { padding:10px 16px; gap:10px; flex-wrap:wrap; }
  .tabs { order:3; width:100%; margin:0; }
  .page { padding:24px 16px 48px; }
  .page-title { font-size:24px; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation:none; } }