/* Sato Dashboard - styles. Design language: the "Dashboard Card UI Kit" (FinPay) handoff - a light,
   airy fintech admin: bright royal-blue accent, deep-navy ink, white rounded cards on a soft canvas, a
   blue gradient hero card, a blue area chart, colored stat-card icons, and avatar/badge data tables.
   Inter throughout. Recorded in DESIGN.md.

   Guardrails kept in the styling: status is carried by an ICON + SHAPE + label, never colour alone; the
   HEALTH section uses amber (attention) and green (in range) ONLY - never red on a health value (red is
   reserved for SYSTEM-health failure). Structural tests lock these. */

:root {
  /* accent - royal blue */
  --blue:#0177FB; --blue-600:#0166D6; --blue-700:#0F56CA;
  --blue-050:#E9F2FF; --blue-100:#D6E7FF; --blue-200:#AFD0FE;
  /* neutrals */
  --ink:#141736; --slate:#4E5067; --mist:#898A9A; --faint:#AEB6C4;
  --bg:#F5F7FB; --surface:#FFFFFF; --border:#E9EDF4; --border-2:#EFF2F8; --divider:#F2F5FA;
  /* status (icon + soft wash + border; text stays ink) */
  --ok:#22B573; --ok-050:#E7F8EF; --amber:#F79009; --amber-050:#FEF3E4; --red:#F0483E; --red-050:#FDECEA;
  /* stat / accent washes (from the kit's statistics row) */
  --teal:#22B5C9; --teal-050:#E4F8FB; --violet:#7468E4; --violet-050:#EFECFD; --orange:#F5A623; --orange-050:#FDF1E2;
  /* geometry */
  --radius:16px; --radius-md:12px; --radius-sm:10px; --radius-chip:8px; --sidebar-w:236px;
  --shadow:0 1px 2px rgba(20,23,54,0.04), 0 2px 6px rgba(20,23,54,0.05);
  --shadow-md:0 6px 18px rgba(20,23,54,0.07);
  --shadow-lg:0 18px 44px rgba(20,23,54,0.14);
  --shadow-blue:0 14px 30px rgba(1,119,251,0.30);
  --font:Inter, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; padding:0; }
body {
  font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
.tnum { font-variant-numeric:tabular-nums; }

#sd-demobar {
  background:linear-gradient(90deg, var(--blue-700), var(--blue)); color:#EAF2FF; font-size:12px;
  line-height:1.4; text-align:center; padding:7px 16px; letter-spacing:0.01em; font-weight:500;
}

/* ===================== app shell ===================== */
.sd-root { display:block; }
.app { display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:calc(100vh - 29px); }

/* sidebar */
.side { background:var(--surface); border-right:1px solid var(--border); padding:18px 14px 14px;
  display:flex; flex-direction:column; gap:2px; position:sticky; top:0; align-self:start;
  height:calc(100vh - 29px); }
.brand { display:flex; align-items:center; gap:10px; padding:2px 6px 14px; }
.brand .mark { width:30px; height:30px; flex:0 0 auto; border-radius:9px;
  background:linear-gradient(135deg, #3B9BFF, var(--blue)); display:grid; place-items:center;
  box-shadow:var(--shadow-blue); }
.brand .mark svg { width:18px; height:18px; }
.brand .word { font-size:19px; font-weight:800; letter-spacing:-0.02em; }
.brand .word b { color:var(--blue); font-weight:800; }

/* sidebar search */
.side-search { position:relative; margin:4px 4px 10px; }
.side-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px;
  height:15px; stroke:var(--mist); stroke-width:1.8; fill:none; pointer-events:none; }
.side-search input { width:100%; padding:9px 12px 9px 33px; border:1px solid var(--border);
  border-radius:10px; font-size:13px; font-family:inherit; background:var(--bg); color:var(--ink); }
.side-search input::placeholder { color:var(--faint); }
.side-search input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); background:var(--surface); }

.nav-eyebrow { font-size:10.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--faint); padding:14px 12px 6px; }
.nav-item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  font-size:14px; color:var(--slate); font-weight:500; border:none; background:none; width:100%;
  text-align:left; cursor:pointer; font-family:inherit; position:relative; }
.nav-item svg { width:18px; height:18px; flex:0 0 auto; stroke:currentColor; stroke-width:1.7; fill:none; }
.nav-item:hover { background:var(--divider); color:var(--ink); }
.nav-item.active { background:var(--blue); color:#fff; font-weight:600; box-shadow:var(--shadow-blue); }
.nav-item.active svg { stroke:#fff; }
.nav-item .badge { margin-left:auto; background:rgba(255,255,255,0.24); color:#fff; border-radius:999px;
  min-width:20px; text-align:center; padding:1px 7px; font-size:11.5px; font-weight:700; }
.nav-item:not(.active) .badge { background:var(--blue); color:#fff; }
.nav-item[hidden] { display:none; }
.side .spacer { flex:1; }
.side .foot { border-top:1px solid var(--border); padding-top:10px; margin-top:8px; display:flex;
  align-items:center; gap:10px; }
.side .foot .avatar { width:32px; height:32px; flex:0 0 auto; }
.side .foot .who { font-size:12px; color:var(--slate); min-width:0; flex:1; line-height:1.3; }
.side .foot .who b { display:block; color:var(--ink); font-size:12.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side .foot .signout { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 8px;
  cursor:pointer; color:var(--slate); display:inline-flex; }
.side .foot .signout svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.7; fill:none; }
.side .foot .signout:hover { background:var(--bg); color:var(--ink); }

/* mobile top bar */
.topbar { display:none; align-items:center; gap:12px; background:var(--surface);
  border-bottom:1px solid var(--border); padding:12px 16px; position:sticky; top:0; z-index:20; }
.topbar .menu-btn { background:none; border:1px solid var(--border); border-radius:9px; padding:7px 9px;
  cursor:pointer; color:var(--ink); display:inline-flex; }
.topbar .menu-btn svg { width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; }
.topbar .brand-sm { display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; }
.topbar .brand-sm .mark { width:24px; height:24px; border-radius:7px;
  background:linear-gradient(135deg, #3B9BFF, var(--blue)); display:grid; place-items:center; }
.topbar .brand-sm .mark svg { width:14px; height:14px; }
.scrim { display:none; }

/* main */
.main { min-width:0; display:flex; flex-direction:column; }
.hd { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 30px 14px; }
.hd h1 { font-size:24px; font-weight:800; margin:0; letter-spacing:-0.02em; }
.hd .sub { font-size:13px; color:var(--mist); margin-top:3px; }
.hd-tools { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.hd-search { position:relative; }
.hd-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px;
  stroke:var(--mist); stroke-width:1.8; fill:none; }
.hd-search input { width:230px; max-width:40vw; padding:9px 14px 9px 36px; border:1px solid var(--border);
  border-radius:11px; font-size:13px; font-family:inherit; background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow); }
.hd-search input::placeholder { color:var(--faint); }
.hd-search input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }
.hd .refresh { background:var(--surface); border:1px solid var(--border); border-radius:11px; color:var(--slate);
  width:38px; height:38px; display:inline-grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); }
.hd .refresh svg { width:17px; height:17px; stroke:currentColor; stroke-width:1.8; fill:none; }
.hd .refresh:hover { color:var(--blue); border-color:var(--blue-200); }
.hd .refresh:disabled { opacity:0.5; }
.scroll { padding:6px 30px 44px; overflow-y:auto; }

/* avatars */
.avatar { width:32px; height:32px; border-radius:50%; color:#fff; font-weight:700; display:grid;
  place-items:center; font-size:12px; flex:0 0 auto; letter-spacing:0.02em; }
/* role icon tile - a clear person glyph coloured by role (clearer than 2-letter initials) */
.role-ico { width:26px; height:26px; border-radius:8px; }
.role-ico svg { width:15px; height:15px; stroke:#fff; stroke-width:2; fill:none; }
.avatar.a0 { background:linear-gradient(135deg,#3B9BFF,#0177FB); }
.avatar.a1 { background:linear-gradient(135deg,#5BD0E4,#22B5C9); }
.avatar.a2 { background:linear-gradient(135deg,#5FD6A2,#22B573); }
.avatar.a3 { background:linear-gradient(135deg,#FBC56B,#F5A623); }
.avatar.a4 { background:linear-gradient(135deg,#A79BF0,#7468E4); }

/* ===================== primitives ===================== */
.grid { display:grid; gap:18px; }
.cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.hero-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; margin-top:18px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); }
.card.tight { padding:0; overflow:hidden; }
.card-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 4px; }
.card-hd h2 { font-size:16px; font-weight:700; margin:0; letter-spacing:-0.01em; }
.card-hd .meta { font-size:12.5px; color:var(--mist); }
.row-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px;
  border-bottom:1px solid var(--border); }
.row-hd h2 { font-size:16px; font-weight:700; margin:0; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--faint); }
.section-eyebrow { margin:24px 2px 12px; }
.muted { color:var(--mist); font-size:13px; }
.empty { color:var(--slate); font-size:14px; padding:26px 20px; text-align:center; }
.empty .next { display:block; color:var(--mist); font-size:12.5px; margin-top:5px; }
.linkout { color:var(--blue); font-size:13px; font-weight:600; background:none; border:none; cursor:pointer;
  font-family:inherit; padding:0; margin-top:12px; display:inline-flex; align-items:center; gap:4px; }
.linkout:hover { color:var(--blue-700); text-decoration:underline; }
.linkout svg { width:15px; height:15px; stroke:currentColor; stroke-width:1.9; fill:none; flex:0 0 auto; }

/* status chip */
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--radius-chip);
  font-size:11.5px; font-weight:700; letter-spacing:0.03em; color:var(--ink); border:1px solid; white-space:nowrap; }
.chip svg { width:10px; height:10px; flex:0 0 auto; }
.chip.ok { background:var(--ok-050); border-color:rgba(34,181,115,0.30); color:#0C7A4C; }
.chip.amber { background:var(--amber-050); border-color:rgba(247,144,9,0.30); color:#8A5406; }
.chip.red { background:var(--red-050); border-color:rgba(240,72,62,0.30); color:#A82C25; }
.chip.blue { background:var(--blue-050); border-color:var(--blue-200); color:var(--blue-700); }
.tag { display:inline-flex; align-items:center; gap:5px; background:var(--divider); color:var(--slate);
  border-radius:999px; padding:2px 10px; font-size:12px; font-weight:500; }
.count-pill { background:var(--blue-050); color:var(--blue-700); border-radius:999px; padding:2px 9px;
  font-size:12px; font-weight:700; }

/* hero (blue gradient card, from the kit's payment card) */
.hero { background:linear-gradient(140deg, #2B93FF 0%, var(--blue) 55%, var(--blue-700) 100%);
  border-radius:var(--radius); padding:22px; color:#fff; box-shadow:var(--shadow-blue); display:flex;
  flex-direction:column; min-height:200px; }
.hero-top { display:flex; align-items:center; justify-content:space-between; }
.hero-eyebrow { font-size:12px; font-weight:700; letter-spacing:0.04em; opacity:0.9; }
.hero-win { font-size:11.5px; font-weight:600; background:rgba(255,255,255,0.18); padding:3px 9px; border-radius:999px; }
.hero-big { font-size:52px; font-weight:800; letter-spacing:-0.03em; margin-top:14px; line-height:1; }
.hero-sub { font-size:13px; opacity:0.92; margin-top:8px; }
.hero-bar { height:8px; border-radius:5px; background:rgba(255,255,255,0.22); overflow:hidden; margin-top:auto; }
.hero-bar > span { display:block; height:100%; border-radius:5px; background:#fff; }
.hero-foot { display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; margin-top:10px; opacity:0.95; }

/* stat cards (statistics row) */
.stat-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px; }
.stat-ico { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:8px; }
.stat-ico svg { width:19px; height:19px; stroke-width:1.9; fill:none; }
.stat-ico.blue { background:var(--blue-050); color:var(--blue); }
.stat-ico.green { background:var(--ok-050); color:var(--ok); }
.stat-ico.orange { background:var(--orange-050); color:var(--orange); }
.stat-ico.teal { background:var(--teal-050); color:var(--teal); }
.stat-v { font-size:24px; font-weight:800; letter-spacing:-0.02em; }
.stat-k { font-size:12.5px; color:var(--slate); }

/* needs-me (pinned focal card) */
.needs-card { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  box-shadow:var(--shadow); overflow:hidden; }
.needs-card.has-items { border-color:var(--blue-200); box-shadow:0 0 0 3px var(--blue-050), var(--shadow); }
.needs-item { display:flex; gap:14px; align-items:flex-start; padding:15px 20px; border-top:1px solid var(--divider); }
.needs-item .ico { width:34px; height:34px; border-radius:10px; background:var(--blue-050); color:var(--blue);
  display:grid; place-items:center; flex:0 0 auto; }
.needs-item .ico svg { width:17px; height:17px; stroke:currentColor; stroke-width:1.8; fill:none; }
.needs-item .kind { font-size:10.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--blue-600); margin-bottom:2px; }
.needs-item .title { font-size:14px; font-weight:600; color:var(--ink); }
.needs-item .sub { font-size:12.5px; color:var(--slate); margin-top:2px; }

/* area chart (money-flow style) */
.chart { padding-top:6px; }
.area { width:100%; height:auto; display:block; }
.area .ax { font-size:9px; fill:var(--mist); font-family:var(--font); }
.area .pk { fill:var(--blue); stroke:#fff; stroke-width:2; }
.area .pt { cursor:pointer; }
.chart-legend { display:flex; gap:18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--divider);
  font-size:12.5px; color:var(--slate); }
.chart-legend .dot { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:7px; }

/* system health rows */
.check { display:flex; gap:13px; align-items:center; padding:14px 20px; border-top:1px solid var(--divider); }
.check .ico { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; }
.check .ico.ok { background:var(--ok-050); color:var(--ok); }
.check .ico.amber { background:var(--amber-050); color:var(--amber); }
.check .ico.red { background:var(--red-050); color:var(--red); }
.check .ico svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.9; fill:none; }
.check .body { flex:1; min-width:0; }
.check .title { font-size:14px; font-weight:600; }
.check .sub { font-size:12.5px; color:var(--slate); margin-top:1px; }

/* task board */
.board { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.col-h { font-size:12px; font-weight:700; color:var(--slate); margin:0 0 10px 2px; display:flex; gap:7px;
  align-items:center; text-transform:uppercase; letter-spacing:0.04em; }
.taskcard { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:13px 14px; margin-bottom:10px; font-size:13px; box-shadow:var(--shadow); }
.taskcard .desc { color:var(--ink); font-weight:500; line-height:1.45; }
.taskcard .role { font-size:11px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--mist); margin-top:9px; display:flex; align-items:center; gap:7px; }

/* Sato's schedule (mirror of the Hermes cron store) */
.sched-item { display:flex; gap:13px; align-items:flex-start; padding:14px 20px; border-top:1px solid var(--divider); }
.sched-ico { width:32px; height:32px; border-radius:9px; background:var(--blue-050); color:var(--blue);
  display:grid; place-items:center; flex:0 0 auto; }
.sched-ico svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none; }
.sched-item .body { flex:1; min-width:0; }
.sched-name { font-size:14px; font-weight:600; color:var(--ink); }
.sched-meta { font-size:12px; color:var(--mist); margin-top:2px; }
.sched-preview { font-size:12.5px; color:var(--slate); margin-top:5px; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* data table */
.dtable { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.dtable th { text-align:left; font-size:10.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--mist); padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface); }
.dtable td { padding:13px 16px; border-bottom:1px solid var(--divider); vertical-align:middle; }
.dtable tr:last-child td { border-bottom:none; }
.dtable tbody tr:hover td { background:var(--bg); }
.cell-id { display:flex; align-items:center; gap:11px; }
.cell-id .avatar { width:34px; height:34px; }
.cell-id .nm { font-weight:600; color:var(--ink); }
.cell-id .sc { font-size:12px; color:var(--mist); margin-top:1px; }
.tbl-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tbl-search { position:relative; }
.tbl-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px;
  stroke:var(--mist); stroke-width:1.8; fill:none; }
.tbl-search input { width:220px; max-width:46vw; padding:8px 12px 8px 33px; border:1px solid var(--border);
  border-radius:10px; font-size:13px; font-family:inherit; background:var(--bg); color:var(--ink); }
.tbl-search input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050);
  background:var(--surface); }
tr[hidden] { display:none; }

/* health - amber/green ONLY (never red on a value) */
.hperson .card-hd { margin-bottom:14px; }
.marker { display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--divider); }
.marker:first-of-type { border-top:none; }
.marker .an { font-size:14px; font-weight:600; }
.marker .flag { font-size:12.5px; color:var(--ink); background:var(--amber-050);
  border:1px solid rgba(247,144,9,0.28); border-radius:9px; padding:8px 11px; margin-top:6px; line-height:1.5; }
.spark { height:30px; width:84px; flex:0 0 auto; align-self:center; }
.spark polyline { fill:none; stroke:var(--amber); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.regimen { display:flex; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--divider); }
.regimen .body { flex:1; min-width:0; }
.regimen .title { font-size:13.5px; font-weight:600; }
.regimen .sub { font-size:12px; color:var(--slate); margin-top:1px; }

/* ===================== model settings ===================== */
.setup { font-size:14px; line-height:1.7; color:var(--slate); }
.setup b { color:var(--ink); font-weight:700; }
.note { font-size:12.5px; color:var(--slate); margin-top:10px; line-height:1.55; }
.note-box { font-size:12.5px; color:var(--slate); background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 14px; margin-top:12px; line-height:1.55; }

/* settings summary hero (blue) */
.chain-hero { background:linear-gradient(140deg, #2B93FF, var(--blue) 60%, var(--blue-700));
  color:#fff; border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-blue); }
.chain-hero .eyebrow2 { font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; opacity:0.9; }
.chain-hero .setup { color:#fff; font-size:15px; margin-top:8px; }
.chain-hero .setup b { color:#fff; }

/* line-up rows (ordered chain) */
.lineup-row, .opt { display:flex; gap:13px; align-items:flex-start; padding:13px 15px; border:1px solid var(--border);
  border-radius:var(--radius-sm); margin-bottom:9px; background:var(--surface); }
.lineup-row { align-items:center; }
.opt { cursor:pointer; transition:border-color 0.12s; }
.opt:hover { background:var(--bg); }
.opt:has(input:checked) { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue), 0 4px 12px rgba(1,119,251,0.10);
  background:linear-gradient(180deg, var(--blue-050), var(--surface)); }
.opt input, .lineup-row input { margin-top:2px; width:17px; height:17px; accent-color:var(--blue); flex:0 0 auto; }
.lineup-row input { margin-top:0; }
.pos-badge { width:26px; height:26px; border-radius:8px; background:var(--blue); color:#fff; font-size:12px;
  font-weight:800; display:grid; place-items:center; flex:0 0 auto; }
.pos-badge.paid { background:var(--amber); }
.obody { flex:1; min-width:0; }
.oname { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.oname .by { font-weight:400; color:var(--mist); font-size:12.5px; }
.oname .pos { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--blue-700); background:var(--blue-050); border:1px solid var(--blue-200); border-radius:6px; padding:1px 7px; }
.odesc { font-size:12.5px; color:var(--slate); margin-top:3px; }
.price { display:inline-flex; gap:10px; font-size:11.5px; color:var(--slate); margin-top:5px; flex-wrap:wrap; }
.price b { color:var(--ink); font-weight:700; }
.price .free { color:var(--ok); font-weight:700; }
.otag { margin-left:8px; flex:0 0 auto; }

/* library controls (filter + sort + search) */
.lib-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0; }
.lib-filters { display:inline-flex; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px; }
.lib-filter { border:none; background:none; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--slate);
  padding:6px 12px; border-radius:8px; cursor:pointer; }
.lib-filter:hover { color:var(--ink); }
.lib-filter.active { background:var(--blue); color:#fff; box-shadow:var(--shadow); }
.lib-select { position:relative; }
.lib-select select { appearance:none; -webkit-appearance:none; font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:8px 30px 8px 12px; cursor:pointer; }
.lib-select:after { content:""; position:absolute; right:12px; top:50%; width:7px; height:7px; border-right:2px solid var(--mist);
  border-bottom:2px solid var(--mist); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.lib-select select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }
.reasoning-pick { padding:2px 2px 4px; }
.reasoning-pick select { width:100%; max-width:520px; appearance:none; -webkit-appearance:none; font-family:inherit;
  font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:10px 32px 10px 12px; cursor:pointer; }
.reasoning-pick select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }
.reasoning-pick .note { margin-top:8px; }
.pref-select { width:100%; max-width:520px; appearance:none; -webkit-appearance:none; font-family:inherit;
  font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:10px 32px 10px 12px; cursor:pointer; }
.pref-select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }
.lib-list { max-height:360px; overflow-y:auto; padding:2px; }
.lib-count { font-size:11.5px; color:var(--mist); margin-top:8px; }
.lib-src { font-size:11.5px; color:var(--mist); margin-top:6px; }

details.adv { margin-top:16px; border-top:1px solid var(--divider); padding-top:14px; }
details.adv summary { cursor:pointer; font-size:13px; color:var(--slate); font-weight:600; list-style:none;
  display:inline-flex; align-items:center; gap:6px; }
details.adv summary::-webkit-details-marker { display:none; }
details.adv summary:before { content:"+"; color:var(--blue); font-weight:800; }
details.adv[open] summary:before { content:"\2212"; }

/* meter */
.meter { height:9px; border-radius:6px; background:var(--divider); overflow:hidden; margin-top:12px; }
.meter > span { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, #3B9BFF, var(--blue)); }

/* usage live-refresh stamp */
.usage-live { display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:5px 11px;
  border:1px solid var(--ok-050); background:var(--ok-050); border-radius:999px; }
.usage-live .live-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 0 rgba(34,181,115,0.55); animation:live-pulse 2s ease-out infinite; }
.usage-live .live-label { font-size:11.5px; font-weight:700; letter-spacing:0.03em; color:#0C7A4C; }
.usage-live .live-when { font-size:12px; color:var(--slate); }
@keyframes live-pulse { 0% { box-shadow:0 0 0 0 rgba(34,181,115,0.5); } 70% { box-shadow:0 0 0 7px rgba(34,181,115,0); } 100% { box-shadow:0 0 0 0 rgba(34,181,115,0); } }
@media (prefers-reduced-motion: reduce) { .usage-live .live-dot { animation:none; } }

/* forms */
.form label { display:block; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--mist); margin:14px 0 6px; }
.form input { width:100%; padding:10px 13px; border:1px solid var(--border); border-radius:10px;
  font-size:13.5px; font-family:inherit; background:var(--surface); color:var(--ink); }
.form input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }
.err { color:var(--red); font-size:12.5px; min-height:16px; margin-top:10px; }

/* buttons */
.btn-primary { height:44px; padding:0 26px; border:none; border-radius:12px; background:var(--blue);
  color:#fff; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; box-shadow:var(--shadow-blue); }
.btn-primary:hover { background:var(--blue-600); }
.btn-primary:disabled { opacity:0.55; box-shadow:none; }
.btn-ghost { background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--slate);
  font-size:13px; font-weight:600; font-family:inherit; padding:9px 14px; cursor:pointer; box-shadow:var(--shadow); }
.btn-ghost:hover { background:var(--bg); color:var(--ink); }
.btn-ghost:disabled { opacity:0.5; }
.save-bar { display:flex; align-items:center; gap:14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--divider); }
button:focus-visible, .nav-item:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline:none; box-shadow:0 0 0 3px var(--blue-100); }

/* login */
.login { min-height:calc(100vh - 29px); display:flex; align-items:center; justify-content:center; padding:22px;
  background:radial-gradient(1200px 500px at 50% -10%, var(--blue-050), var(--bg) 60%); }
.login .box { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:34px 30px;
  width:100%; max-width:392px; box-shadow:var(--shadow-lg); }
.login .mark { width:46px; height:46px; margin:0 auto 16px; border-radius:14px;
  background:linear-gradient(135deg, #3B9BFF, var(--blue)); display:grid; place-items:center; box-shadow:var(--shadow-blue); }
.login .mark svg { width:26px; height:26px; }
.login h1 { font-size:23px; font-weight:800; margin:0 0 6px; text-align:center; letter-spacing:-0.02em; }
.login p { color:var(--slate); font-size:13.5px; margin:0 0 18px; text-align:center; }
.login .form label { text-align:left; }
.login .form input { margin-bottom:2px; }

/* toast */
#sd-toast { position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:var(--ink);
  color:#EAF2FF; font-size:13px; font-weight:500; padding:12px 18px; border-radius:12px;
  box-shadow:var(--shadow-lg); max-width:88%; text-align:center; z-index:40; display:flex; align-items:center; gap:9px; }
#sd-toast svg { width:16px; height:16px; stroke:#5FD6A2; stroke-width:2.2; fill:none; flex:0 0 auto; }

/* ===================== responsive: phone ===================== */
@media (max-width: 900px) {
  .app { grid-template-columns:1fr; }
  .topbar { display:flex; }
  .side { position:fixed; top:0; left:0; height:100vh; width:274px; z-index:30; transform:translateX(-100%);
    transition:transform 0.2s ease; box-shadow:var(--shadow-lg); }
  .app.nav-open .side { transform:translateX(0); }
  .app.nav-open .scrim { display:block; position:fixed; inset:0; background:rgba(20,23,54,0.38); z-index:25; }
  .hd { padding:16px 18px 10px; flex-wrap:wrap; }
  .hd h1 { font-size:21px; }
  .hd-search { flex:1; }
  .hd-search input { width:100%; max-width:none; }
  .scroll { padding:4px 16px 44px; }
  .board { grid-template-columns:1fr; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns:1fr; }
  .hero-grid { grid-template-columns:1fr; }
  .card { padding:17px 18px; }
  .tbl-search input { width:100%; }
}