/* JBB Control - B v2 (console). Three finishes: slate (default), stripe, paper. Sample data only. */
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#fbfbfc;--side:#f5f6f8;--panel:#fff;--sunken:#f6f7f9;--hover:#f0f1f4;
  --line:#e6e8ec;--line-2:#eef0f3;--ink:#0f1115;--ink-2:#3c424d;--mute:#6b7280;--faint:#9aa1ad;
  --accent:#4f46e5;--accent-ink:#fff;--accent-soft:#eef0ff;--accent-line:#c7cbff;
  --ok:#15803d;--ok-soft:#e9f7ee;--warn:#b45309;--warn-soft:#fff6e6;--bad:#b42318;--bad-soft:#fdeeec;--run:#2563eb;--run-soft:#eaf1ff;
  --r:7px;--r-l:10px;--shadow:0 1px 0 rgba(15,17,21,.03);--shadow-pop:0 12px 40px rgba(15,17,21,.14),0 2px 6px rgba(15,17,21,.06);
  --head-font:var(--font);--side-w:244px;--pad:20px;--row:34px;
}
:root{
  --bg:#f6f8fa;--side:#fff;--panel:#fff;--sunken:#f6f8fa;--hover:#f2f5f9;
  --line:#e3e8ee;--line-2:#edf1f5;--ink:#1a1f36;--ink-2:#3c4257;--mute:#697386;--faint:#a3acb9;
  --accent:#635bff;--accent-soft:#efeeff;--accent-line:#cdcaff;
  --r:8px;--r-l:12px;--shadow:0 2px 5px rgba(60,66,87,.06),0 1px 1px rgba(0,0,0,.04);--pad:26px;--row:38px;
}
:root{
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Cascadia Mono",ui-monospace,Consolas,"SFMono-Regular",Menlo,monospace;
  --c-fb:#4a52d0;--c-post:#1c8236;--c-tt:#c03d6c;--c-live:#e0531f;--c-gal:#0f7a62;--c-ia:#5b6577;--c-words:#9a6f12;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:13.5px/1.5 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
button{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:14px;height:14px}
.mono{font-family:var(--mono);font-size:12px}
.mute{color:var(--mute)}.faint{color:var(--faint)}
h1,h2,h3{margin:0;font-family:var(--head-font);font-weight:600;letter-spacing:-.012em}
/* ---------- sidebar */
.side{position:sticky;top:0;height:100vh;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.ws{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--line-2)}
.logo{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fde68a;display:grid;place-items:center;font:700 11px/1 var(--font);letter-spacing:.02em;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ws b{display:block;font-size:14px;line-height:1.2}
.ws small{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:11.5px}
.navscroll{flex:1;overflow:auto;padding:10px 8px}
.navlbl{font-size:11px;font-weight:600;color:var(--faint);padding:14px 10px 6px;letter-spacing:.04em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--r);color:var(--ink-2);cursor:pointer;font-weight:500;position:relative;user-select:none}
.nav:hover{background:var(--hover);color:var(--ink)}
.nav.on{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--line),var(--shadow);font-weight:600}
.nav.on{background:var(--accent-soft);color:var(--accent);box-shadow:none}
.nav .sw{width:8px;height:8px;border-radius:2.5px;flex:none}
.nav .end{margin-left:auto;display:flex;align-items:center;gap:6px}
.count{font-size:11px;font-weight:600;min-width:18px;height:18px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;background:var(--hover);color:var(--mute)}
.count.warn{background:var(--warn-soft);color:var(--warn)}
.sidefoot{padding:12px 14px;border-top:1px solid var(--line-2);display:grid;gap:9px;font-size:11.5px;color:var(--mute)}
.mm{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:8px}
.mm .bar{height:4px;border-radius:9px;background:var(--line);overflow:hidden}.mm .bar i{display:block;height:100%;background:var(--ink-2);border-radius:9px}
.mm .bar i.hi{background:var(--warn)}
.local{display:flex;align-items:center;gap:6px;color:var(--faint)}

/* ---------- top bar */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:10;height:54px;display:flex;align-items:center;gap:12px;padding:0 var(--pad);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.crumbs{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:13px;min-width:0;white-space:nowrap}
.crumbs b{color:var(--ink);font-weight:600}
.cmdk{margin-left:auto;display:flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--faint);
  min-width:270px;cursor:pointer;box-shadow:var(--shadow);white-space:nowrap}
.cmdk:hover{border-color:var(--accent-line)}
.cmdk span{flex:1;text-align:left}
kbd{font:600 10.5px var(--font);color:var(--mute);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:var(--panel)}
.runpill{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border-radius:99px;background:var(--run-soft);color:var(--run);font-weight:600;font-size:12.5px;white-space:nowrap;cursor:pointer;border:0}
.runpill .ring{width:14px;height:14px}
.btn.menu-btn{display:none}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow);transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:var(--hover)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.08)}
.btn.primary:hover{background:color-mix(in srgb,var(--ink) 86%,#fff)}
.btn.primary{background:var(--accent);border-color:var(--accent)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.btn.sm{height:26px;padding:0 9px;font-size:12px;gap:5px}
.btn.icon{width:32px;padding:0}.btn.sm.icon{width:26px}
.btn.quiet{border-color:transparent;box-shadow:none;background:transparent}.btn.quiet:hover{background:var(--hover)}
.split{display:inline-flex}.split .btn:first-child{border-radius:var(--r) 0 0 var(--r)}.split .btn:last-child{border-radius:0 var(--r) var(--r) 0;border-left-color:rgba(255,255,255,.18);padding:0 8px}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:1px}

/* ---------- page */
.page{display:none;padding:22px var(--pad) 80px;max-width:1240px;width:100%;gap:18px}
.page.on{display:grid}
.ph{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.ph h1{font-size:22px}
.ph p{margin:3px 0 0;color:var(--mute)}
.ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ph .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.ph .ico svg{width:20px;height:20px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow);min-width:0}
.panel>.hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2);min-height:48px}
.panel>.hd h2{font-size:13.5px;font-family:var(--font)}
.panel>.hd .sub{color:var(--faint);font-size:12px}
.panel>.hd .r{margin-left:auto;display:flex;align-items:center;gap:6px}
.panel>.bd{padding:14px 16px}
.panel>.bd.flush{padding:0}

/* KPI */
.kpi{padding:14px 16px 12px;display:grid;gap:2px;position:relative;overflow:hidden}
.kpi .lb{color:var(--mute);font-size:12px;display:flex;align-items:center;gap:6px}
.kpi .v{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.kpi .d{font-size:12px;color:var(--mute)}.kpi .d b{font-weight:600}.kpi .d .up{color:var(--ok)}
.kpi svg.spark{position:absolute;right:12px;bottom:12px;width:92px;height:34px}

/* status chips */
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.run{background:var(--run-soft);color:var(--run)}.chip.idle{background:var(--hover);color:var(--mute)}
.chip.line{background:transparent;border:1px solid var(--line);color:var(--ink-2);font-weight:500}
.st{width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:50%}
.st svg{width:10px;height:10px;stroke-width:3}
.st.ok{background:var(--ok);color:#fff}.st.warn{background:var(--warn);color:#fff}.st.bad{background:var(--bad);color:#fff}
.st.idle{border:1.5px dashed var(--faint)}
.st.run{border:2px solid var(--run-soft);border-top-color:var(--run);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--faint)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.run{background:var(--run);box-shadow:0 0 0 3px var(--run-soft)}

/* current run (actions-style) */
.job{display:grid}
.step{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line-2)}
.step:first-child{border-top:0}
.step b{font-weight:600}.step .note{color:var(--mute);font-size:12.5px}
.step .t{font-family:var(--mono);font-size:12px;color:var(--mute)}
.step.run{background:linear-gradient(90deg,var(--run-soft),transparent 70%)}
.progress{height:3px;background:var(--line-2)}.progress i{display:block;height:100%;background:var(--run);width:38%;transition:width .6s}

/* inbox */
.inbox .it{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-2)}
.inbox .it:first-child{border-top:0}
.inbox .badge{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff}
.inbox .badge svg{width:15px;height:15px}
.inbox b{display:block;font-weight:600}.inbox span.s{color:var(--mute);font-size:12.5px}

/* tables */
table.tb{width:100%;border-collapse:collapse}
.tb th{font-size:11.5px;font-weight:600;color:var(--mute);text-align:left;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--sunken);white-space:nowrap}
.tb td{padding:0 16px;height:var(--row);border-bottom:1px solid var(--line-2);white-space:nowrap}
.tb tr:last-child td{border-bottom:0}
.tb tbody tr:hover td{background:var(--sunken)}
.tb .src{display:inline-flex;align-items:center;gap:7px}
.tb .src i{width:8px;height:8px;border-radius:2.5px}
.dur{display:flex;align-items:center;gap:8px}.dur .b{height:6px;border-radius:9px;background:var(--accent-line);min-width:3px}
.tablewrap{overflow-x:auto}

/* uptime */
.svc{display:grid;grid-template-columns:150px minmax(0,1fr) 64px;gap:14px;align-items:center;padding:9px 16px;border-top:1px solid var(--line-2)}
.svc:first-child{border-top:0}
.svc .n{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.svc .n small{font-weight:400;color:var(--faint)}
.bars{display:flex;gap:2px;height:22px;align-items:stretch}
.bars i{flex:1;border-radius:2px;background:var(--ok);opacity:.8}
.bars i.w{background:var(--warn)}.bars i.x{background:var(--bad)}.bars i.n{background:var(--line)}
.svc .ms{text-align:right;font-family:var(--mono);font-size:12px;color:var(--mute)}

/* chart */
.chart{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:2.5px}

/* key-value list */
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 16px;border-top:1px solid var(--line-2)}
.kv:first-child{border-top:0}
.kv .k{display:flex;align-items:center;gap:9px;min-width:0}
.kv .v{color:var(--mute);font-size:12.5px;text-align:right}

/* switches */
.setrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-2)}
.setrow:first-child{border-top:0}
.setrow b{font-weight:600;display:block}.setrow small{color:var(--mute);font-size:12.5px}
.setrow code{font-family:var(--mono);font-size:11px;color:var(--faint);background:var(--sunken);padding:1px 5px;border-radius:4px;margin-left:6px}
.tog{width:36px;height:21px;border-radius:99px;background:var(--line);position:relative;border:0;cursor:pointer;transition:background .16s;flex:none;padding:0}
.tog::after{content:"";position:absolute;left:2.5px;top:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .16s}
.tog.on{background:var(--ok)}.tog.on{background:var(--accent)}
.tog.on::after{transform:translateX(15px)}
select.sel{height:32px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:0 30px 0 10px;font:inherit;color:var(--ink);box-shadow:var(--shadow);
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}

/* segmented + tabs */
.seg{display:inline-flex;padding:2px;border-radius:var(--r);background:var(--hover);gap:2px}
.seg button{border:0;background:transparent;height:26px;padding:0 10px;border-radius:calc(var(--r) - 2px);font-size:12.5px;font-weight:600;color:var(--mute);cursor:pointer}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:none;padding:10px 0;font-weight:600;color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.tabs button span{font-weight:500;color:var(--faint);margin-left:5px}

/* log viewer */
.logv{font-family:var(--mono);font-size:12px;line-height:1.7;background:var(--panel);overflow:auto;counter-reset:ln}
.logv .l{display:grid;grid-template-columns:46px 66px 84px minmax(0,1fr);gap:0;padding:0 12px 0 0;white-space:pre-wrap;word-break:break-word}
.logv .l:hover{background:var(--sunken)}
.logv .l::before{counter-increment:ln;content:counter(ln);color:var(--faint);text-align:right;padding-right:12px;user-select:none;opacity:.7}
.logv .ts{color:var(--faint)}
.logv .sr{font-weight:600}
.logv .l.warn{background:color-mix(in srgb,var(--warn-soft) 70%,transparent)}.logv .l.warn .m{color:var(--warn)}
.logv .l.bad{background:var(--bad-soft)}.logv .l.bad .m{color:var(--bad)}
.logv .l.ok .m{color:var(--ok)}.logv .l.dim .m{color:var(--mute)}
.logv mark{background:#fde68a;color:inherit;border-radius:2px}
.logbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.search{display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--faint);min-width:0;flex:1;max-width:340px}
.search input{border:0;outline:0;background:transparent;font:inherit;color:var(--ink);width:100%}
.srcchips{display:flex;gap:6px;flex-wrap:wrap}
.srcchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.srcchip i{width:7px;height:7px;border-radius:2px}
.srcchip.off{opacity:.45}
.live-ind{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ok);font-weight:600}
.live-ind .dot{background:var(--ok);animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.3}}

/* checks */
.check{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid var(--line-2)}
.check:first-child{border-top:0}.check b{font-weight:600}.check small{color:var(--mute)}

/* gantt */
.gantt{display:grid;gap:6px;padding:14px 16px}
.gr{display:grid;grid-template-columns:120px minmax(0,1fr) 60px;gap:12px;align-items:center;font-size:12.5px}
.gr .lane{position:relative;height:20px;background:var(--sunken);border-radius:4px}
.gr .lane i{position:absolute;top:0;bottom:0;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.gaxis{display:grid;grid-template-columns:120px minmax(0,1fr) 60px;gap:12px;font-size:11px;color:var(--faint)}
.gaxis div{display:flex;justify-content:space-between}

/* command palette */
.k-back{position:fixed;inset:0;background:rgba(15,17,21,.28);backdrop-filter:blur(2px);display:none;z-index:50;padding:12vh 16px 0}
.k-back.on{display:block}
.kpal{max-width:600px;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);overflow:hidden}
.kpal .kin{display:flex;align-items:center;gap:10px;padding:0 16px;height:52px;border-bottom:1px solid var(--line-2);color:var(--faint)}
.kpal .kin input{flex:1;border:0;outline:0;font:15px var(--font);color:var(--ink);background:transparent}
.kpal .kl{max-height:360px;overflow:auto;padding:6px}
.kpal .kg{font-size:11px;font-weight:600;color:var(--faint);padding:8px 10px 4px;text-transform:uppercase;letter-spacing:.04em}
.kpal .ki{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:8px;cursor:pointer;color:var(--ink-2)}
.kpal .ki.on{background:var(--hover);color:var(--ink)}
.kpal .ki .hint{margin-left:auto;color:var(--faint);font-size:12px}
.kpal .kf{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--faint)}

/* toast + theme picker */
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,12px);opacity:0;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;display:flex;align-items:center;gap:9px;
  box-shadow:var(--shadow-pop);transition:.18s;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* responsive */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,1fr)}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  body{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:30;transform:translateX(-104%);transition:transform .22s;box-shadow:var(--shadow-pop)}
  body.nav-open .side{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(15,17,21,.25);z-index:20}
  .btn.menu-btn{display:inline-flex}
  .cmdk{min-width:0;width:34px;padding:0;justify-content:center}.cmdk span:not(#cmdk-i),.cmdk kbd{display:none}
  .runpill .txt{display:none}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .svc{grid-template-columns:110px minmax(0,1fr) 54px}
  }
@media (max-width:560px){
  :root{--pad:14px}
  .g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kpi svg.spark{display:none}
  .crumbs .hide-s{display:none}
  .crumbs{flex:1;overflow:hidden}
  #go .txt,#go2{display:none}
  #go{width:36px;padding:0;border-radius:var(--r)!important}
  .panel>.hd .sub{display:none}
  .runpill{padding:0 10px}
  .ph .acts{width:100%}.ph .acts .btn{flex:1}
  .logv .l{grid-template-columns:34px 58px minmax(0,1fr)}.logv .l .sr{display:none}
  .gr,.gaxis{grid-template-columns:80px minmax(0,1fr) 44px}
}

/* live build extras */
.testbar{display:flex;align-items:center;gap:10px;padding:8px var(--pad);background:var(--warn-soft);color:var(--warn);font-size:12.5px;font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--warn) 25%,transparent)}
.testbar span{font-weight:400;color:var(--ink-2)}
.empty{padding:22px 16px;color:var(--faint);text-align:center;font-size:13px}
.stale{opacity:.55}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.tog:disabled{opacity:.5;cursor:not-allowed}
.testbar[hidden]{display:none}

[hidden]{display:none!important}

/* ---------- J.A.R.V.I.S. look (Settings > Appearance): HUD navy + cyan */
[data-theme="jarvis"]{
  --bg:#040a14;--side:#06101f;--panel:rgba(9,22,40,.82);--sunken:rgba(14,34,60,.6);--hover:rgba(34,211,238,.08);
  --line:rgba(34,211,238,.22);--line-2:rgba(34,211,238,.12);--ink:#d8f3ff;--ink-2:#a9d8ec;--mute:#6fa3bf;--faint:#4b7891;
  --accent:#22d3ee;--accent-soft:rgba(34,211,238,.14);--accent-line:rgba(34,211,238,.45);
  --ok:#34f5a6;--ok-soft:rgba(52,245,166,.12);--warn:#ffc35c;--warn-soft:rgba(255,195,92,.12);--bad:#ff5d73;--bad-soft:rgba(255,93,115,.13);
  --run:#38bdf8;--run-soft:rgba(56,189,248,.14);
  --shadow:0 0 0 1px rgba(34,211,238,.06),0 0 18px rgba(34,211,238,.06);--shadow-pop:0 0 0 1px rgba(34,211,238,.3),0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(34,211,238,.15);
  color-scheme:dark;
}
[data-theme="jarvis"] body{background:
  radial-gradient(1200px 600px at 70% -10%,rgba(34,211,238,.10),transparent 60%),
  radial-gradient(900px 500px at -10% 110%,rgba(56,189,248,.08),transparent 60%),
  linear-gradient(rgba(34,211,238,.035) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(34,211,238,.035) 1px,transparent 1px) 0 0/28px 28px,var(--bg)}
[data-theme="jarvis"] .panel{backdrop-filter:blur(6px);border-color:var(--line)}
[data-theme="jarvis"] .panel:hover{box-shadow:0 0 0 1px rgba(34,211,238,.18),0 0 24px rgba(34,211,238,.08)}
[data-theme="jarvis"] h1,[data-theme="jarvis"] .panel>.hd h2,[data-theme="jarvis"] .navlbl{text-transform:uppercase;letter-spacing:.12em}
[data-theme="jarvis"] .ph h1{font-size:20px;text-shadow:0 0 18px rgba(34,211,238,.45)}
[data-theme="jarvis"] .panel>.hd h2{font-size:12px;color:var(--accent)}
[data-theme="jarvis"] .kpi .v{color:#fff;text-shadow:0 0 14px rgba(34,211,238,.5)}
[data-theme="jarvis"] .logo{background:radial-gradient(circle at 50% 45%,#7ff3ff 0,#22d3ee 28%,#0e3a5a 62%,#06101f 100%);color:#03121c;box-shadow:0 0 16px rgba(34,211,238,.55)}
[data-theme="jarvis"] .top{background:rgba(4,10,20,.78);border-bottom-color:var(--line)}
[data-theme="jarvis"] .nav.on{background:var(--accent-soft);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}
[data-theme="jarvis"] .btn{background:rgba(9,22,40,.9);border-color:var(--line);color:var(--ink)}
[data-theme="jarvis"] .btn:hover{background:var(--hover);border-color:var(--accent-line)}
[data-theme="jarvis"] .btn.primary{background:var(--accent);border-color:var(--accent);color:#03121c;box-shadow:0 0 18px rgba(34,211,238,.35)}
[data-theme="jarvis"] .btn.primary:hover{background:#67e8f9}
[data-theme="jarvis"] .btn.danger{color:var(--bad)}
[data-theme="jarvis"] .tog{background:rgba(111,163,191,.25)}
[data-theme="jarvis"] .tog.on{background:var(--accent);box-shadow:0 0 12px rgba(34,211,238,.45)}
[data-theme="jarvis"] .tog::after{background:#e6fbff}
[data-theme="jarvis"] .tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
[data-theme="jarvis"] .seg button.on{background:var(--accent-soft);color:var(--accent);box-shadow:none}
[data-theme="jarvis"] .logv{background:transparent}
[data-theme="jarvis"] .logv mark{background:rgba(34,211,238,.35);color:#fff}
[data-theme="jarvis"] .toast{background:#06101f;color:var(--ink);border:1px solid var(--accent-line)}
[data-theme="jarvis"] .testbar{background:rgba(255,195,92,.08)}
[data-theme="jarvis"] .bars i{opacity:.9;box-shadow:0 0 4px rgba(52,245,166,.25)}
[data-theme="jarvis"] .cmdk,[data-theme="jarvis"] select.sel,[data-theme="jarvis"] .search,[data-theme="jarvis"] kbd{background:rgba(9,22,40,.9);border-color:var(--line);color:var(--ink-2)}
[data-theme="jarvis"] .kpal{background:#06101f}
[data-theme="jarvis"] .st.run{border-color:rgba(56,189,248,.2);border-top-color:var(--run)}
[data-theme="jarvis"] ::selection{background:rgba(34,211,238,.35)}

/* footer */
.foot{margin-top:auto;padding:18px var(--pad) 22px;border-top:1px solid var(--line-2);color:var(--faint);font-size:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.foot b{color:var(--ink-2);letter-spacing:.06em}
[data-theme="jarvis"] .foot b{color:var(--accent);text-shadow:0 0 10px rgba(34,211,238,.45)}
.page{padding-bottom:40px}

/* Overview: Right now */
.nowpanel .now-live{display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.nowpanel .now-live .dot{margin-top:6px;width:10px;height:10px}
.nowpanel .now-live.ok{background:linear-gradient(90deg,var(--ok-soft),transparent 70%)}
.nowpanel .now-live.bad{background:linear-gradient(90deg,var(--bad-soft),transparent 70%)}
.nowpanel .now-live b{font-weight:600}
.nowpanel .now-live small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
.now-sub{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.now-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.now-cell{padding:12px 16px;border-left:1px solid var(--line-2);min-width:0}
.now-cell:first-child{border-left:0}
.now-k{display:flex;align-items:center;gap:6px;color:var(--mute);font-size:12px}
.now-v{display:flex;align-items:center;gap:7px;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.now-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.now-cell:nth-child(4){border-left:0}.now-cell:nth-child(n+4){border-top:1px solid var(--line-2)}}
@media (max-width:560px){.now-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.now-cell{border-left:0!important;border-top:1px solid var(--line-2)}.now-cell:nth-child(even){border-left:1px solid var(--line-2)!important}}

/* newest posts: two lines + numbers */
.kv.newest{align-items:start}
.kv.newest b{font-weight:600;display:block}
.kv.newest .nx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2);font-size:12.5px;line-height:1.4;margin-top:1px}
.kv.newest .ne{display:block;color:var(--faint);font-size:11.5px;margin-top:2px}
.kv.newest .v{white-space:nowrap;padding-top:2px}
/* phone: rows whose control is a group of buttons stack under the text */
@media (max-width:560px){.setrow:has(> span > .btn + .btn){grid-template-columns:1fr}.setrow:has(> span > .btn + .btn) > span{justify-content:flex-start}}

/* ---------- J.A.R.V.I.S. look, stronger HUD (25 Oct 2026) */
[data-theme="jarvis"]{--mono-hud:"Cascadia Mono","Consolas",ui-monospace,monospace}
[data-theme="jarvis"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(180deg,rgba(34,211,238,.035) 0 1px,transparent 1px 3px);mix-blend-mode:screen;animation:hudscan 9s linear infinite}
@keyframes hudscan{to{background-position:0 300px}}
/* arc-reactor logo */
[data-theme="jarvis"] .logo{position:relative;border-radius:50%;overflow:visible}
[data-theme="jarvis"] .logo::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 12%,rgba(34,211,238,.95) 12% 22%,transparent 22% 37%,rgba(34,211,238,.6) 37% 45%,transparent 45% 62%,rgba(34,211,238,.95) 62% 72%,transparent 72% 87%,rgba(34,211,238,.6) 87% 95%,transparent 95%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);animation:reactor 6s linear infinite}
@keyframes reactor{to{transform:rotate(360deg)}}
/* panels: HUD corner brackets + a scan line along the top edge */
[data-theme="jarvis"] .panel{position:relative;border-radius:4px;background:linear-gradient(180deg,rgba(12,30,54,.86),rgba(7,18,34,.86))}
[data-theme="jarvis"] .panel::before,[data-theme="jarvis"] .panel::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;border:2px solid var(--accent);opacity:.85;filter:drop-shadow(0 0 4px rgba(34,211,238,.7))}
[data-theme="jarvis"] .panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
[data-theme="jarvis"] .panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
[data-theme="jarvis"] .panel>.hd{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(34,211,238,.07),transparent 60%)}
[data-theme="jarvis"] .panel>.hd::after{content:"";position:absolute;left:-30%;top:0;width:30%;height:1px;background:linear-gradient(90deg,transparent,#7ff3ff,transparent);animation:hdscan 5s ease-in-out infinite}
@keyframes hdscan{0%{left:-30%}60%,100%{left:110%}}
[data-theme="jarvis"] .panel>.hd h2{font-family:var(--mono-hud);font-weight:600;font-size:11.5px;letter-spacing:.18em}
[data-theme="jarvis"] .panel>.hd h2::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;background:var(--accent);transform:rotate(45deg);box-shadow:0 0 8px var(--accent);vertical-align:1px}
/* numbers and labels */
[data-theme="jarvis"] .kpi .v,[data-theme="jarvis"] .now-v,[data-theme="jarvis"] .step .t,[data-theme="jarvis"] .svc .ms,[data-theme="jarvis"] .runpill .mono{font-family:var(--mono-hud);letter-spacing:.02em}
[data-theme="jarvis"] .kpi .v{font-size:26px;font-weight:600}
[data-theme="jarvis"] .kpi .lb,[data-theme="jarvis"] .now-k,[data-theme="jarvis"] .tb th,[data-theme="jarvis"] .navlbl{font-family:var(--mono-hud);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px}
[data-theme="jarvis"] .ph h1{font-family:var(--mono-hud);letter-spacing:.22em;font-weight:600}
[data-theme="jarvis"] .ph h1::after{content:"";display:block;width:64px;height:2px;margin-top:6px;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 10px var(--accent)}
/* sidebar + top bar */
[data-theme="jarvis"] .side{background:linear-gradient(180deg,rgba(6,16,31,.96),rgba(4,10,20,.96));box-shadow:inset -1px 0 0 rgba(34,211,238,.35),4px 0 24px rgba(34,211,238,.06)}
[data-theme="jarvis"] .nav{font-family:var(--mono-hud);font-size:12.5px;letter-spacing:.04em}
[data-theme="jarvis"] .nav.on{box-shadow:inset 3px 0 0 var(--accent),0 0 18px rgba(34,211,238,.12)}
[data-theme="jarvis"] .top{box-shadow:0 1px 0 rgba(34,211,238,.35),0 8px 24px rgba(0,0,0,.35)}
[data-theme="jarvis"] .runpill{border:1px solid var(--accent-line);box-shadow:0 0 14px rgba(56,189,248,.25);font-family:var(--mono-hud)}
/* buttons: angled corners */
[data-theme="jarvis"] .btn{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;font-family:var(--mono-hud)}
[data-theme="jarvis"] .btn.sm{font-size:10.5px}
[data-theme="jarvis"] .chip{border:1px solid currentColor;background:transparent;font-family:var(--mono-hud);letter-spacing:.05em;text-transform:uppercase;font-size:10.5px}
[data-theme="jarvis"] .dot.ok{box-shadow:0 0 8px var(--ok)}[data-theme="jarvis"] .dot.bad{box-shadow:0 0 8px var(--bad)}[data-theme="jarvis"] .dot.warn{box-shadow:0 0 8px var(--warn)}
[data-theme="jarvis"] .progress i,[data-theme="jarvis"] .mm .bar i{box-shadow:0 0 10px var(--accent);background:var(--accent)}
[data-theme="jarvis"] .now-live.ok{background:linear-gradient(90deg,rgba(52,245,166,.10),transparent 70%)}
[data-theme="jarvis"] .foot{font-family:var(--mono-hud);letter-spacing:.08em}
[data-theme="jarvis"] .logv{font-family:var(--mono-hud)}
@media (prefers-reduced-motion:reduce){[data-theme="jarvis"] *,[data-theme="jarvis"] *::before,[data-theme="jarvis"] *::after,[data-theme="jarvis"] body::after{animation:none!important}}

.now-s{display:block;color:var(--faint);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-foot{padding:9px 16px;border-top:1px solid var(--line-2);color:var(--mute);font-size:12.5px}
[data-theme="jarvis"] .now-foot{font-family:var(--mono-hud);letter-spacing:.06em;color:var(--accent)}

.pair{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.pill2{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--panel);font-size:12.5px;font-weight:600}
.pill2.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn)}
.pill2.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)}
.pill2 .btn{margin-left:4px}
.notes{white-space:pre-wrap;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-2);padding:12px 16px;border-top:1px solid var(--line-2);max-height:240px;overflow:auto;background:var(--sunken)}
[data-theme="jarvis"] .pill2{font-family:var(--mono-hud);letter-spacing:.04em;font-size:11.5px;background:rgba(9,22,40,.9)}

/* alignment (25 Oct 2026) */
.logv .l{grid-template-columns:46px 66px 112px minmax(0,1fr)}
.logv .sr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px}
.tb td{white-space:normal;vertical-align:middle;padding-top:7px;padding-bottom:7px;height:auto}
.tb td.nowrap{white-space:nowrap}
.tb td.mono.nowrap:first-child{max-width:320px;overflow:hidden;text-overflow:ellipsis}
.tb td.wrap .chip{white-space:normal;height:auto;min-height:22px;padding:3px 9px;line-height:1.35;border-radius:11px}
.howit{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:10px 18px;align-items:baseline}
.howit .hk{color:var(--mute);font-size:13px}
.howit .hv{min-width:0}
.howit .hline{display:block;line-height:1.55}
.logo{overflow:hidden;background:#06101f}
.logo img{width:100%;height:100%;display:block;object-fit:cover}
[data-theme="jarvis"] .logo{background:transparent}
@media (max-width:560px){.howit{grid-template-columns:1fr;gap:2px}.howit .hv{margin-bottom:8px}}

/* layout fixes (25 Oct 2026) */
.top{gap:10px}
.crumbs{flex:0 1 auto;min-width:0;overflow:hidden}
.crumbs b{white-space:nowrap}
.cmdk{flex:0 1 270px;min-width:150px}
.runpill{flex:0 1 auto;min-width:0;max-width:440px;overflow:hidden}
.runpill .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.runpill .mono{flex:none;margin-left:6px}
.split{flex:none}
@media (max-width:1180px){.cmdk span:not(#cmdk-i),.cmdk kbd{display:none}.cmdk{flex:none;min-width:0;width:34px;padding:0;justify-content:center}}
.now-grid.fill{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.now-grid.fill .now-cell{border-left:1px solid var(--line-2);border-top:0}
.now-grid.fill .now-cell:first-child{border-left:0}
@media (max-width:560px){.now-grid.fill{grid-template-columns:repeat(2,minmax(0,1fr))}.now-grid.fill .now-cell{border-top:1px solid var(--line-2)}}
/* J.A.R.V.I.S.: one shape for the split button; brackets clear of sparklines */
[data-theme="jarvis"] .split .btn{clip-path:none;border-radius:0}
[data-theme="jarvis"] .split{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
[data-theme="jarvis"] .split .btn:last-child{border-left:1px solid rgba(3,18,28,.35)}
[data-theme="jarvis"] .kpi svg.spark{right:22px;bottom:16px}
[data-theme="jarvis"] .panel::before,[data-theme="jarvis"] .panel::after{width:12px;height:12px}
.now-k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* chart fills its panel */
.chartpanel{display:flex;flex-direction:column}
.chartbox{flex:1;min-height:190px;padding:10px 14px 6px;position:relative}
.chartbox svg.chart{position:absolute;inset:10px 14px 6px;width:calc(100% - 28px);height:calc(100% - 16px)}
/* Needs you + notes */
.inbox{display:flex;flex-direction:column}
.allclear{display:flex;align-items:center;gap:8px;padding:12px 16px;color:var(--ok);font-weight:600;font-size:13px;border-bottom:1px solid var(--line-2)}
.notes-box{flex:1;display:flex;flex-direction:column;min-height:200px}
.notes-hd{display:flex;align-items:center;gap:7px;padding:10px 16px 6px;font-weight:600;font-size:13px}
.notes-hd .faint{font-weight:400;font-size:11.5px;margin-left:auto}
#notes{flex:1;margin:0 12px 12px;min-height:150px;resize:vertical;border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);color:var(--ink);font:13px/1.55 var(--font);padding:10px 12px}
#notes:focus{outline:2px solid var(--accent-line);outline-offset:0;background:var(--panel)}
.notes-hidden{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--faint);margin:0 12px 12px;border:1px dashed var(--line);border-radius:var(--r)}
/* screen-safe */
.safe-btn{flex:none}
.safe-btn.on{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 0 0 3px var(--ok-soft)}
@media (max-width:860px){.safe-btn .t{display:none}}
[data-theme="jarvis"] #notes{background:rgba(4,12,24,.7);font-family:var(--mono-hud);font-size:12.5px;border-color:var(--line)}
[data-theme="jarvis"] .safe-btn.on{background:var(--ok);color:#03121c;box-shadow:0 0 14px rgba(52,245,166,.5)}

/* search lives in the sidebar now (25 Oct 2026) */
.navsearch{color:var(--mute)}
.navsearch kbd{font-size:10px;padding:0 5px}

/* newest posts: hover / tap preview */
.kv.newest{position:relative;cursor:default}
.kv.newest .peek{display:none;position:absolute;right:calc(100% + 12px);top:-6px;width:380px;max-height:340px;overflow:auto;z-index:15;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-pop);padding:12px 14px;font-size:13px;line-height:1.55;white-space:pre-wrap;color:var(--ink-2)}
.kv.newest .peek b{display:block;color:var(--ink);margin-bottom:6px;font-size:12.5px}
.kv.newest:hover .peek,.kv.newest:focus .peek,.kv.newest:focus-within .peek{display:block}
@media (max-width:1100px){.kv.newest .peek{right:auto;left:0;top:calc(100% - 4px);width:min(380px,92vw)}}
[data-theme="jarvis"] .kv.newest .peek{background:#06101f;border-color:var(--accent-line);box-shadow:0 0 0 1px rgba(34,211,238,.25),0 20px 50px rgba(0,0,0,.6),0 0 30px rgba(34,211,238,.12)}

/* the hover card sits above the panels around it */
.panel:has(.kv.newest:hover),.panel:has(.kv.newest:focus),.panel:has(.kv.newest:focus-within){z-index:30}

/* Right now: LIVE left, stats right (25 Oct 2026) */
.now-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.nowpanel .now-live{border-bottom:0;border-right:1px solid var(--line-2);padding:12px 16px}
.nowpanel .now-live b{font-size:14px}
.pair{margin:7px 0 0}
.now-sub{margin-top:7px}
.now-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.now-grid.compact .now-cell{padding:10px 14px;border-left:1px solid var(--line-2);border-top:0}
.now-grid.compact .now-cell:nth-child(3n+1){border-left:0}
.now-grid.compact .now-cell:nth-child(n+4){border-top:1px solid var(--line-2)}
@media (max-width:1100px){.now-body{grid-template-columns:minmax(0,1fr)}.nowpanel .now-live{border-right:0;border-bottom:1px solid var(--line-2)}}
@media (max-width:560px){.now-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.now-grid.compact .now-cell{border-left:0!important;border-top:1px solid var(--line-2)!important}.now-grid.compact .now-cell:nth-child(even){border-left:1px solid var(--line-2)!important}}
/* tighter rows where they were roomy */
.step{padding:8px 16px}
.inbox .it{padding:10px 16px}
.svc{padding:7px 16px}

.sitespanel{display:flex;flex-direction:column}
.sitespanel .svc{flex:1}
.sitesfoot{display:flex;align-items:center;gap:7px;padding:9px 16px;border-top:1px solid var(--line-2);color:var(--mute);font-size:12px}
.kpi:has(svg.spark) .d{padding-right:108px}

/* wider pages; Settings as columns without gaps */
.page{max-width:1600px}
.page[data-page="settings"] .grid.g2{display:block;columns:2 440px;column-gap:14px}
.page[data-page="settings"] .grid.g2>.panel{break-inside:avoid;margin-bottom:14px;display:inline-block;width:100%}