/* Argent command center: the Kimi "Argent Terminal" graphite system (0% saturation, Inter + JetBrains Mono,
   mono uppercase kickers, pills with a breathing dot) laid out like the Highland Intel galaxy command-center
   collage (dense bento of panels around a galaxy hero, chat + Guacamole on the right). Loaded after admin.css.
   Every colour is a grey. Fonts are self-hosted (CSP: font-src 'self'). */

@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root, :root[data-theme="dark"] {
  --a-bg0: #08080a; --a-bg1: #0e0e11; --a-bg2: #141419; --a-bg3: #1b1b21; --a-bg4: #232329;
  --a-tx1: #ececf0; --a-tx2: #b4b4bd; --a-tx3: #7c7c86; --a-tx4: #4e4e57;
  --a-silver: #d7d7dd; --a-line: #232329; --a-line-soft: #1c1c22;
  --hig-black: var(--a-bg0); --hig-bg: var(--a-bg0); --hig-panel: var(--a-bg1); --hig-raised: var(--a-bg3);
  --hig-line: var(--a-line); --hig-line-strong: #33333b; --hig-muted: var(--a-tx3); --hig-text: var(--a-tx2); --hig-white: var(--a-tx1);
  --glass: rgba(14, 14, 17, 0.82); --glass-strong: rgba(14, 14, 17, 0.94); --hair: rgba(255, 255, 255, 0.06);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 10px; --radius-sm: 7px; --nav-w: 236px; --nav-w-collapsed: 62px; --rail-w: 340px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body { font-family: var(--font-sans); font-size: 13px; -webkit-font-smoothing: antialiased; background: #000; }
.kicker, .panel-head h2, .rail h2, .navgroup h3, .strip-bar .cell small, .prov, .card-h h2, .stat small { font-family: var(--font-mono); }

/* ---------- top bar: brand + search + quick links (collage) on the Argent header gradient ---------- */
.cmd { grid-template-rows: auto auto 1fr; grid-template-areas: "top top top" "nav strip rail" "nav main rail"; }
.cmd .topbar { background: linear-gradient(180deg, rgba(20, 20, 25, 0.94), rgba(14, 14, 17, 0.94)); backdrop-filter: blur(8px); height: 58px; padding: 0 14px; gap: 14px; }
.cmd .sidenav, .cmd .rail { top: 58px; height: calc(100vh - 58px); background: linear-gradient(180deg, var(--a-bg1), rgba(8, 8, 10, 0.96)); }
.tb-brand { display: flex; align-items: center; gap: 10px; color: var(--a-tx1); text-decoration: none; min-width: calc(var(--nav-w) - 28px); }
.tb-brand .brand-mark { width: 46px; height: auto; color: var(--a-tx1); }
.tb-brand b { display: block; font-size: 17px; letter-spacing: 0.2em; font-weight: 700; line-height: 1; }
.tb-brand small { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.22em; color: var(--a-tx3); margin-top: 5px; white-space: nowrap; }
.cmd[data-nav="collapsed"] .tb-brand { min-width: 0; }
.searchbox { background: var(--a-bg2); border-color: var(--a-line); height: 36px; border-radius: 9px; max-width: 520px; }
.searchbox .kbd { font-family: var(--font-mono); font-size: 10px; color: var(--a-tx4); border: 1px solid var(--a-line); border-radius: 4px; padding: 1px 5px; }
.tb-links { display: flex; gap: 2px; }
.tb-links a { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; color: var(--a-tx2); text-decoration: none; font-size: 12.5px; }
.tb-links a:hover { background: var(--a-bg3); color: var(--a-tx1); }
.tb-links svg { width: 16px; height: 16px; }
.who { border-color: var(--a-line); background: var(--a-bg2); border-radius: 9px; }
.who .name small { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--a-tx3); letter-spacing: 0.12em; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border: 1px solid var(--a-line); border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--a-tx2); background: var(--a-bg2); white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a-tx3); }
.pill.on { color: var(--a-tx1); border-color: #33333b; }
.pill.on .dot { background: var(--a-silver); animation: pulse 2.2s ease-in-out infinite; }

/* ---------- left nav: Argent rail buttons with labels ---------- */
.cmd .sidenav .brand { display: none; }
.navgroup a { border-radius: 8px; color: var(--a-tx2); padding: 7px 10px; }
.navgroup a svg { color: var(--a-tx3); }
.navgroup a:hover { background: var(--a-bg3); color: var(--a-tx1); }
.navgroup a[aria-current="page"] { background: var(--a-bg4); color: var(--a-tx1); box-shadow: inset 0 0 0 1px #2c2c33; }
.navgroup a[aria-current="page"]::before { left: -8px; background: var(--a-silver); }
.navgroup a .sub { display: block; font-size: 10px; color: var(--a-tx4); line-height: 1.1; }
.quote { border-left-color: #33333b; font-size: 12.5px; line-height: 1.5; color: var(--a-tx3); }
.quote cite { display: block; margin-top: 6px; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--a-tx4); }

/* ---------- strip ---------- */
.strip-bar { background: rgba(10, 10, 12, 0.7); border-bottom: 1px solid var(--a-line); }
.strip-bar .cell b { font-size: 15px; }

/* ---------- bento cards ---------- */
.bento { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 1500px) { .span-3 { grid-column: span 6; } .span-4 { grid-column: span 6; } .span-5, .span-7 { grid-column: span 12; } .span-8 { grid-column: span 12; } }
@media (max-width: 900px) { .bento > * { grid-column: span 12 !important; } }
.card { background: linear-gradient(180deg, rgba(20, 20, 25, 0.8), rgba(12, 12, 15, 0.8)); border: 1px solid var(--a-line); border-radius: 12px; backdrop-filter: blur(2px); min-width: 0; display: flex; flex-direction: column; }
.card-h { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--a-line-soft); }
.card-h > svg { width: 17px; height: 17px; color: var(--a-tx2); flex: none; }
.card-h h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--a-tx1); font-family: var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-h .sp { flex: 1; }
.card-h .kebab { color: var(--a-tx4); letter-spacing: 2px; font-weight: 700; }
.card-b { padding: 12px 14px; flex: 1; min-width: 0; }
.card-b.flush { padding: 0; }
.card-f { padding: 9px 14px; border-top: 1px solid var(--a-line-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; padding: 8px 14px 0; flex-wrap: wrap; }
.tabs a { font-size: 11.5px; color: var(--a-tx3); text-decoration: none; border: 1px solid transparent; border-radius: 7px; padding: 5px 10px; }
.tabs a[aria-current="true"] { color: var(--a-tx1); background: var(--a-bg4); border-color: #2c2c33; }
.tabs a:hover { color: var(--a-tx1); border-color: #2c2c33; }
.prov-mock { color: var(--a-tx3); border-style: dashed; border-color: #3a3a42; }
.prov-mock::before { background: transparent; border: 1px dashed currentColor; }
.is-mock { position: relative; }
.is-mock .card-b { opacity: 0.72; }
.mock-note { font-family: var(--font-mono); font-size: 10px; color: var(--a-tx4); letter-spacing: 0.06em; padding: 0 14px 10px; }

/* list rows (stacks, projects, services) */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--a-line-soft); }
.rows li:last-child { border-bottom: 0; }
.rows li b { display: block; color: var(--a-tx1); font-weight: 500; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows li small { color: var(--a-tx3); font-size: 11px; font-family: var(--font-mono); }
.rows li .r { color: var(--a-tx3); font-size: 11px; font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--a-silver); box-shadow: 0 0 0 3px rgba(215, 215, 221, 0.08); }
.sdot.down { background: transparent; border: 1px solid var(--a-tx3); box-shadow: none; }
.sdot.unk { background: var(--a-tx4); box-shadow: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-family: var(--font-mono); color: var(--a-tx2); border: 1px solid var(--a-line); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.chip.on { color: var(--a-tx1); border-color: #3a3a42; }

/* hero */
.hero2 { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--a-line); min-height: 250px; background: linear-gradient(180deg, rgba(14, 14, 17, 0.35), rgba(8, 8, 10, 0.5)); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(160px, 0.7fr) minmax(0, 1fr); }
.hero2 .stats { grid-column: 3; }
.hero2 .lead { position: relative; padding: 26px 28px; }
.hero2 .lead .brand-row { display: flex; align-items: center; gap: 12px; }
.hero2 .lead .brand-mark { width: 54px; color: var(--a-tx1); }
.hero2 h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: 0.01em; color: var(--a-tx1); }
.hero2 .tag { color: var(--a-tx2); margin: 4px 0 12px; font-size: 14px; }
.hero2 p.blurb { color: var(--a-tx3); max-width: 460px; line-height: 1.55; margin: 0 0 16px; }
.hero2 .stats { position: relative; padding: 26px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; align-content: center; }
.stat small { display: block; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-tx3); margin-bottom: 5px; }
.stat b { font-size: 22px; font-weight: 600; color: var(--a-tx1); font-variant-numeric: tabular-nums; }
.stat { min-width: 0; }
.stat .prov { display: flex; width: fit-content; max-width: 100%; overflow: hidden; white-space: nowrap; margin-top: 6px; font-size: 8.5px; padding: 1px 6px; }
.stat .prov .dimtxt { display: none; }
@media (max-width: 1100px) { .hero2 { grid-template-columns: minmax(0, 1fr); } .hero2 .stats { grid-column: 1; padding-top: 0; background: rgba(8, 8, 10, 0.6); } }

/* rings (system overview) */
.rings { display: flex; gap: 14px; justify-content: space-around; padding: 6px 0 4px; }
.ring2 { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--a-silver) calc(var(--v) * 1%), var(--a-bg4) 0); position: relative; }
.ring2::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--a-bg1); }
.ring2 span { position: relative; z-index: 1; text-align: center; font-size: 13px; color: var(--a-tx1); font-weight: 600; line-height: 1.1; }
.ring2 span small { display: block; font-size: 9px; color: var(--a-tx3); font-family: var(--font-mono); font-weight: 400; }

/* orbit graph */
.core { position: relative; height: 440px; background: radial-gradient(ellipse at center, #141418 0%, #0a0a0c 72%); }
.core-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.core-sum { position: absolute; top: 10px; left: 14px; display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--a-tx3); pointer-events: none; }
.core-sum b { color: var(--a-tx1); font-size: 14px; margin-right: 2px; }
.core-info { position: absolute; left: 12px; bottom: 12px; max-width: min(320px, 70%); padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 10px; background: rgba(14,14,17,0.9); backdrop-filter: blur(6px); font-size: 12.5px; }
.core-info b { color: var(--a-tx1); }
.core-info small { display: block; color: var(--a-tx3); font-family: var(--font-mono); font-size: 10.5px; }
.core-info p { margin: 6px 0 8px; color: var(--a-tx2); word-break: break-word; }
.core-info .row { gap: 8px; align-items: center; }
.core-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--a-tx2); border: 1px solid var(--a-line); border-radius: 999px; padding: 3px 9px; }
.core-badge.bad { color: var(--a-tx1); border-color: #55555e; }
.rows-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* code preview (workspace) */
.code { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.65; color: var(--a-tx2); background: var(--a-bg0); margin: 0; padding: 10px 12px; overflow: auto; border-radius: 0 0 12px 12px; counter-reset: ln; white-space: pre; }
.code .ln { color: var(--a-tx4); display: inline-block; width: 22px; }
.tree { font-family: var(--font-mono); font-size: 11.5px; color: var(--a-tx3); padding: 8px 12px; line-height: 1.8; border-right: 1px solid var(--a-line-soft); white-space: pre; }
.ws { display: grid; grid-template-columns: 150px minmax(0, 1fr); }

/* integrations toggles */
.tog { width: 28px; height: 16px; border-radius: 999px; background: var(--a-bg4); position: relative; flex: none; }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--a-tx4); }
.tog.on { background: #5a5a63; } .tog.on::after { left: 14px; background: var(--a-tx1); }

/* ---------- right rail: chat + Guacamole (collage) ---------- */
.rail { padding-bottom: 20px; }
.rail .card { margin: 10px; }
.chatlog { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; padding: 12px; }
.bubble { max-width: 92%; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--a-line); white-space: pre-wrap; word-break: break-word; }
.bubble.me { align-self: flex-end; background: var(--a-bg4); color: var(--a-tx1); }
.bubble.bot { align-self: flex-start; background: var(--a-bg2); color: var(--a-tx2); }
.bubble.sys { align-self: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--a-tx3); border-style: dashed; }
.composer { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--a-line-soft); }
.composer textarea { flex: 1; resize: none; min-height: 38px; max-height: 120px; background: var(--a-bg0); color: var(--a-tx1); border: 1px solid var(--a-line); border-radius: 9px; padding: 9px 10px; font: inherit; }
.composer textarea:focus { outline: 1px solid #4a4a52; }
.suggest { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.suggest button { font: inherit; font-size: 11px; color: var(--a-tx2); background: var(--a-bg2); border: 1px solid var(--a-line); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.suggest button:hover { color: var(--a-tx1); border-color: #3a3a42; }
.guac-mini { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 10px; padding: 12px; }
.guac-screen { aspect-ratio: 16 / 10; border-radius: 8px; border: 1px solid var(--a-line); background: radial-gradient(ellipse at 60% 45%, rgba(255, 255, 255, 0.1), transparent 60%), var(--a-bg0); position: relative; overflow: hidden; }
.guac-screen canvas { width: 100%; height: 100%; display: block; }
.guac-screen .st { position: absolute; left: 8px; bottom: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--a-tx3); }
.proto { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.proto li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--a-tx2); }
.proto svg { width: 14px; height: 14px; color: var(--a-tx3); }

/* full-page chat */
.chatpage { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 160px); }
.chatpage .sess { border-right: 1px solid var(--a-line-soft); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.chatpage .sess button.s { text-align: left; font: inherit; background: none; border: 1px solid transparent; color: var(--a-tx2); padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.chatpage .sess button.s[aria-current="true"] { background: var(--a-bg4); color: var(--a-tx1); border-color: #2c2c33; }
.chatpage .sess button.s small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--a-tx4); }
.chatpage .chatlog { max-height: none; flex: 1; }
.chatpage .main { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 760px) { .chatpage { grid-template-columns: minmax(0, 1fr); } .chatpage .sess { display: none; } }

/* remote desktop page */
.guac-frame { width: 100%; height: min(72vh, 820px); border: 0; display: block; background: #000; border-radius: 0 0 12px 12px; }
.conn { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--a-line-soft); }
.conn .pico { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--a-line); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--a-tx2); background: var(--a-bg2); }

/* ---------- 2FA ---------- */
.mfa { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.mfa .box { width: min(560px, 100%); background: var(--glass-strong); border: 1px solid var(--a-line); border-radius: 14px; padding: 26px; backdrop-filter: blur(8px); }
.mfa h1 { font-size: 18px; margin: 10px 0 4px; color: var(--a-tx1); letter-spacing: 0.02em; }
.mfa p { color: var(--a-tx3); margin: 0 0 16px; line-height: 1.5; }
.mfa .brand-mark { width: 60px; color: var(--a-tx1); }
.opt { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; font: inherit; color: var(--a-tx2); background: var(--a-bg2); border: 1px solid var(--a-line); border-radius: 12px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
.opt:hover, .opt:focus-visible { border-color: #4a4a52; color: var(--a-tx1); outline: none; }
.opt .oi { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--a-bg4); color: var(--a-tx1); }
.opt .oi svg { width: 20px; height: 20px; }
.opt b { display: block; color: var(--a-tx1); font-size: 14px; }
.opt small { color: var(--a-tx3); font-size: 12px; }
.opt .rec { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--a-bg0); background: var(--a-silver); border-radius: 999px; padding: 3px 8px; }
.codein { width: 100%; height: 56px; font-family: var(--font-mono); font-size: 28px; letter-spacing: 0.4em; text-align: center; background: var(--a-bg0); color: var(--a-tx1); border: 1px solid var(--a-line); border-radius: 10px; }
.secret { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; word-break: break-all; color: var(--a-tx1); background: var(--a-bg0); border: 1px dashed #3a3a42; border-radius: 8px; padding: 10px 12px; }
.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-family: var(--font-mono); font-size: 15px; color: var(--a-tx1); background: var(--a-bg0); border: 1px solid var(--a-line); border-radius: 10px; padding: 14px; margin: 10px 0 14px; }
.mfa .err { min-height: 1.4em; color: var(--a-tx1); margin-top: 10px; font-size: 13px; }
.linkbtn { background: none; border: 0; color: var(--a-tx2); font: inherit; text-decoration: underline; cursor: pointer; padding: 6px 0; }

/* light theme keeps working: only the hard-coded gradients need a light twin */
:root[data-theme="light"] .card, :root[data-theme="light"] .hero2, :root[data-theme="light"] .cmd .topbar, :root[data-theme="light"] .cmd .sidenav, :root[data-theme="light"] .cmd .rail { background: rgba(255, 255, 255, 0.92); }
@media (max-width: 1240px) { .tb-links { display: none; } }
@media (max-width: 760px) {
  .cmd, .cmd[data-nav="collapsed"] { grid-template-areas: "top" "strip" "main"; }
  .tb-brand small, .tb-brand b { display: none; } .tb-brand { min-width: 0; }
  .cmd .sidenav { top: 0; height: 100vh; }
  .guac-mini { grid-template-columns: minmax(0, 1fr); }
  .ws { grid-template-columns: minmax(0, 1fr); } .tree { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pill.on .dot { animation: none; } }
.card-h h2 { text-transform: none; letter-spacing: 0.01em; font-size: 12.5px; }
.searchbox span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer { flex-wrap: nowrap; align-items: flex-end; }
.composer .btn { flex: none; width: 42px; height: 38px; padding: 0; justify-content: center; }
@media (max-width: 760px) {
  .tb-tools .clock, .tb-tools .pill, .tb-tools > .iconbtn:not(:last-child) { display: none; }
  .searchbox { min-width: 0; } .searchbox .kbd { display: none; }
  .composer .btn { width: 42px; }
}

/* ---------- Intel (Obsidian graph pages) ---------- */
.subnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; padding: 4px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-bg1); }
.subnav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; color: var(--a-tx2); text-decoration: none; font-size: 13px; }
.subnav a:hover { color: var(--a-tx1); background: var(--a-bg2); }
.subnav a[aria-current="page"] { color: var(--a-tx1); background: var(--a-bg3, #1c1c21); box-shadow: inset 0 0 0 1px #33333b; }
.subnav .sp { flex: 1; }
.ig-count { font-family: var(--font-mono); font-size: 11px; color: var(--a-tx3); padding-right: 8px; }
.ig-stage { position: relative; display: flex; flex-direction: column; }
.ig-add { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--a-line); }
.ig-add input { flex: 1; min-width: 0; }
.ig-canvas { display: block; width: 100%; height: min(64vh, 620px); min-height: 360px; cursor: grab; background: radial-gradient(ellipse at center, #121216 0%, #0a0a0c 70%); touch-action: none; }
.ig-tools { position: absolute; top: 70px; right: 12px; display: flex; flex-direction: column; gap: 4px; }
.ig-tools .btn { min-width: 64px; justify-content: center; background: rgba(14,14,17,0.85); }
.ig-tools .btn[aria-pressed="true"] { color: var(--a-tx1); border-color: #44444c; }
.ig-legend { position: absolute; left: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--a-tx3); pointer-events: none; }
.ig-legend i, .ig-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: middle; }
.ig-dot { width: 12px; height: 12px; margin: 4px 0 0; flex: none; box-shadow: 0 0 12px var(--c); }
.ig-ent { display: flex; gap: 10px; margin-bottom: 10px; }
.ig-ent b { display: block; word-break: break-all; color: var(--a-tx1); }
.ig-ent small { color: var(--a-tx3); font-family: var(--font-mono); font-size: 11px; }
.ig-insp .kv { font-size: 12px; max-height: 240px; overflow: auto; }
.ig-insp .kv dd { word-break: break-all; }
.ig-h { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-tx3); margin: 14px 0 8px; font-weight: 600; }
.ig-tlist { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ig-filter { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 8px; margin-bottom: 6px; }
.ig-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ig-t { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--a-line); border-radius: 10px; background: var(--a-bg2); }
.ig-t p { margin: 0; font-size: 12.5px; color: var(--a-tx2); flex: 1; }
.ig-t small { color: var(--a-tx3); font-size: 11px; }
.ig-t .btn { align-self: flex-start; }
.ig-t .pill { height: 20px; font-size: 9px; padding: 0 7px; }
.ig-th { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--a-tx2); }
.ig-th input { max-width: 260px; }
.ig-bar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--a-tx2) var(--w), var(--a-bg3, #222) var(--w)); vertical-align: middle; }
td .pill { height: 18px; font-size: 9px; margin-left: 6px; }
@media (max-width: 760px) { .ig-filter { grid-template-columns: 1fr; } .ig-canvas { height: 56vh; } .ig-tools { top: 66px; } }
.ig-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .ig-layout { grid-template-columns: 1fr; } }
.core-sum .hint { opacity: 0.7; }
@media (max-width: 760px) { .core { height: 380px; } .core-sum .hint { display: none; } }
/* hands-free 2FA */
.bignum { font: 700 64px/1 var(--font-mono); letter-spacing: 0.08em; text-align: center; color: var(--a-tx1); margin: 18px 0 10px; text-shadow: 0 0 28px rgba(236,236,240,0.25); }
.numpick { display: flex; gap: 10px; margin: 14px 0; }
.numpick .btn { flex: 1; height: 64px; justify-content: center; font: 700 26px var(--font-mono); }
.approve-dlg p { margin: 0 0 8px; }
/* Model Council / Swarm */
.cx { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 220px); }
.cx-roster { border-right: 1px solid var(--a-line-soft); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cx-roster h4 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-tx3); }
.cx-m { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; }
.cx-m .sdot { margin-top: 5px; }
.cx-m b { display: block; font-size: 12.5px; color: var(--a-tx1); font-weight: 500; }
.cx-m small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--a-tx3); word-break: break-all; }
.cx-main { display: flex; flex-direction: column; min-width: 0; }
.cx-compose { padding: 14px; border-bottom: 1px solid var(--a-line-soft); display: flex; flex-direction: column; gap: 8px; }
.cx-compose textarea { width: 100%; resize: vertical; min-height: 70px; background: var(--a-bg0); color: var(--a-tx1); border: 1px solid var(--a-line); border-radius: 9px; padding: 10px; font: inherit; }
.cx-compose .sp, .cx-q .sp, .cx-final .sp, .cx-step summary .sp { flex: 1; }
.cx-runs { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cx-run { border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-bg1); overflow: hidden; }
.cx-q { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--a-line-soft); }
.cx-q b { color: var(--a-tx1); font-weight: 600; }
.cx-q small, .cx-step small { color: var(--a-tx3); font-family: var(--font-mono); font-size: 10.5px; }
.cx-subs { margin: 10px 14px 0 30px; padding: 0; color: var(--a-tx2); font-size: 12.5px; }
.cx-steps { padding: 10px 14px; display: grid; gap: 6px; }
.cx-step { border: 1px solid var(--a-line-soft); border-radius: 9px; background: var(--a-bg2); }
.cx-step.bad { border-style: dashed; opacity: 0.75; }
.cx-step summary { display: flex; gap: 8px; align-items: center; padding: 8px 10px; cursor: pointer; list-style: none; font-size: 12.5px; }
.cx-step summary::-webkit-details-marker { display: none; }
.cx-ph { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-tx3); border: 1px solid var(--a-line); border-radius: 999px; padding: 2px 7px; }
.cx-body { padding: 0 12px 10px; font-size: 12.5px; color: var(--a-tx2); }
.cx-final { margin: 0 14px 14px; padding: 12px; border: 1px solid #33333b; border-radius: 10px; background: var(--a-bg3); }
.cx-final .md { font-size: 13px; color: var(--a-tx1); }
.md pre { background: var(--a-bg0); border: 1px solid var(--a-line); border-radius: 8px; padding: 10px; overflow: auto; font-size: 12px; }
.md p { margin: 6px 0; }
.cx-ex { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-ex .chip { cursor: pointer; font: inherit; font-size: 12px; }
@media (max-width: 900px) { .cx { grid-template-columns: 1fr; } .cx-roster { border-right: 0; border-bottom: 1px solid var(--a-line-soft); } }
.subnav svg, .cx-q svg, .ig-tlist svg { width: 15px; height: 15px; flex: none; }
.cx-compose select { width: auto; min-width: 160px; }
.cx-q b { flex: 0 1 auto; }
/* control planes */
.cp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-acts .btn { flex-direction: column; align-items: flex-start; height: auto; padding: 8px 12px; gap: 2px; }
.cp-acts .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.cp-why { font-size: 10px; font-family: var(--font-mono); color: var(--a-tx3); }
.cp-steps { margin: 0; padding-left: 18px; color: var(--a-tx2); font-size: 13px; line-height: 1.6; }
.cp-steps li { margin-bottom: 6px; }
.cp-table { width: 100%; font-size: 12.5px; }