/* ---- Theme tokens ---- */
/* Dark is the default; [data-theme=light] overrides. Accent stays constant across themes. */
:root, :root[data-theme="dark"] {
  --bg:#0f1115; --card:#171a21; --fg:#e6e8ec; --muted:#9aa3b2; --line:#262b35;
  --topbar:#12151c; --sidebar:#12151c; --input:#0e1016; --hover:#1d2230; --chip:#222836;
  --ok:#2ecc71; --warn:#f1c40f; --err:#e74c3c; --accent:#4aa3ff; --accent-fg:#04203f;
  --shadow:0 1px 0 rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --bg:#f4f6fa; --card:#ffffff; --fg:#1b2330; --muted:#5b6572; --line:#e2e6ee;
  --topbar:#ffffff; --sidebar:#ffffff; --input:#f7f9fc; --hover:#eef2f8; --chip:#eef1f6;
  --ok:#1c9e57; --warn:#b8860b; --err:#d93838; --accent:#2b7fd6; --accent-fg:#ffffff;
  --shadow:0 1px 2px rgba(20,30,50,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif; }

/* ---- Top bar ---- */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:58px; padding:0 20px; background:var(--topbar); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.brand-icon { display:block; border-radius:8px; }
.brand-name { font-size:18px; font-weight:400; letter-spacing:-.2px; }
.brand-name b { font-weight:700; }
.brand-sub { color:var(--muted); font-size:13px; padding-left:10px; margin-left:4px;
  border-left:1px solid var(--line); }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.token-reveal { margin:8px 0 0; }
.token-reveal:empty { display:none; }
.token-reveal code { background:var(--input); color:var(--ok); padding:4px 8px; border-radius:6px;
  word-break:break-all; }
.whoami { font-size:13px; margin-right:6px; white-space:nowrap; }
.whoami:empty { display:none; }
@media (max-width:720px) { .whoami { display:none; } }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--fg);
  cursor:pointer; text-decoration:none; }
.icon-btn:hover { background:var(--hover); }
.i-sun { display:none; } .i-moon { display:block; }
:root[data-theme="light"] .i-sun { display:block; }
:root[data-theme="light"] .i-moon { display:none; }

/* ---- Content ---- */
.content { padding:22px 26px; max-width:1180px; margin:0 auto; }

/* ---- Overview stat cards ---- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:0 0 18px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; box-shadow:var(--shadow); }
.stat .n { font-size:26px; font-weight:700; }
.stat .l { color:var(--muted); font-size:13px; margin-top:2px; }
.stat.alert .n { color:var(--err); }

/* ---- Cards / typography ---- */
.muted { color:var(--muted); font-weight:400; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px; margin:0 0 16px; box-shadow:var(--shadow); }
.sub { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; }
h2 { font-size:16px; margin:0 0 10px; }
h3 { font-size:14px; margin:0 0 8px; }

/* ---- Controls ---- */
input, select, textarea { background:var(--input); border:1px solid var(--line); color:var(--fg);
  padding:8px 10px; border-radius:6px; margin:4px 8px 4px 0; min-width:240px;
  font:inherit; box-sizing:border-box; }
select { min-width:180px; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
button { background:var(--accent); color:var(--accent-fg); border:0; padding:8px 14px;
  border-radius:6px; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(1.08); }
.btn-danger { background:transparent; color:var(--err); border:1px solid var(--line); font-weight:500; }
.btn-danger:hover { background:rgba(231,76,60,.12); filter:none; }
a { color:var(--accent); }

/* ---- Tables ---- */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; margin:8px 0 16px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px; }
th { color:var(--muted); font-weight:600; }
.row { display:flex; justify-content:space-between; align-items:center; }
.badge { padding:2px 8px; border-radius:999px; font-size:12px; background:var(--chip); }
.badge.ok { background:rgba(46,204,113,.16); color:var(--ok); }
.badge.warn { background:rgba(241,196,15,.16); color:var(--warn); }
.badge.err { background:rgba(231,76,60,.16); color:var(--err); }
.link-btn { background:transparent; color:var(--accent); border:1px solid var(--line); font-weight:500; }
.link-btn:hover { background:var(--hover); filter:none; }

/* ---- Status line ---- */
#status { min-height:20px; margin:0 0 12px; }
#status.ok { color:var(--ok); } #status.warn { color:var(--warn); } #status.err { color:var(--err); }

@media (max-width:720px) { .content { padding:18px 16px; } .brand-sub { display:none; } }