/* NopalCyber Agent console: dark-first SOC layout, brand amber accent. */
:root {
  --bg: #0f1012; --surface: #16181b; --surface-2: #1c1f23; --surface-3: #24282d; --line: #262a2f; --line-2: #343940;
  --fg: #eceae6; --fg-2: #b6bac1; --fg-3: #8b9199;
  --accent: #f2992e; --accent-soft: #2e2213; --accent-ink: #1a1205;
  --good: #3cc25a; --warn: #f2b53a; --serious: #f08a5d; --crit: #f06464; --info: #9aa8b6; --blue: #3987e5;
  --good-bg: #14261a; --warn-bg: #2a2312; --serious-bg: #2c1b13; --crit-bg: #2e1616; --info-bg: #1e242a;
  --f-display: 'Sora', 'IBM Plex Sans', system-ui, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
/* light: the OS setting, unless the console theme says dark; or the console theme says light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f4f2; --surface: #ffffff; --surface-2: #f0f0ed; --surface-3: #e7e7e3; --line: #e0e0db; --line-2: #cfcfc9;
    --fg: #17191c; --fg-2: #474c53; --fg-3: #62676f; --accent: #b0570f; --accent-soft: #fbebdd; --accent-ink: #fff;
    --good: #0e8a2e; --warn: #9a6800; --serious: #c9561f; --crit: #c93030; --info: #5c6b7a; --blue: #2a78d6;
    --good-bg: #e3f4e6; --warn-bg: #fbf1d9; --serious-bg: #fce8dd; --crit-bg: #fbe3e3; --info-bg: #e8ecf0;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f4f2; --surface: #ffffff; --surface-2: #f0f0ed; --surface-3: #e7e7e3; --line: #e0e0db; --line-2: #cfcfc9;
    --fg: #17191c; --fg-2: #474c53; --fg-3: #62676f; --accent: #b0570f; --accent-soft: #fbebdd; --accent-ink: #fff;
    --good: #0e8a2e; --warn: #9a6800; --serious: #c9561f; --crit: #c93030; --info: #5c6b7a; --blue: #2a78d6;
    --good-bg: #e3f4e6; --warn-bg: #fbf1d9; --serious-bg: #fce8dd; --crit-bg: #fbe3e3; --info-bg: #e8ecf0;
    color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-size: 12.5px; }
.muted { color: var(--fg-2); } .faint { color: var(--fg-3); }

.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100%; }
.rail { background: #0a0b0c; color: #c9cbce; display: flex; flex-direction: column; border-right: 1px solid #1c1e21; overflow: auto; }
.brand { padding: 20px 18px 14px; border-bottom: 1px solid #1c1e21; }
.brand img { height: 26px; display: block; }
.brand small { display: block; margin-top: 8px; color: #7d8187; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.nav .grp { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #7d8187; padding: 14px 10px 6px; }
.nav a { padding: 8px 10px; border-radius: 7px; color: #c9cbce; text-decoration: none; font-weight: 500; }
.nav a:hover { background: #191b1e; }
.nav a.on { background: #191b1e; color: #fff; box-shadow: inset 2px 0 0 #f2992e; }
.foot { margin-top: auto; padding: 14px 18px; border-top: 1px solid #1c1e21; font-size: 12px; color: #7d8187; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.crumb { font-family: var(--f-display); font-weight: 600; font-size: 17px; margin-right: auto; }
.user { color: var(--fg-2); font-size: 12.5px; }
.pill { display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; background: var(--accent-soft); color: var(--accent); }
.view { padding: 22px 32px 48px; overflow: auto; flex: 1; outline: none; }
.wrap { max-width: 1840px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
h1 { font-family: var(--f-display); font-size: 22px; margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
h1 + p { margin: 4px 0 0; color: var(--fg-2); max-width: 75ch; }
h3 { margin: 0; font-size: 13.5px; font-weight: 600; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.card > header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; flex-wrap: wrap; }
.card > header .sub { color: var(--fg-3); font-size: 12px; }
.card > header .right { margin-left: auto; display: flex; gap: 8px; }
.body { padding: 14px 16px 16px; }
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.two { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .two { grid-template-columns: minmax(0, 1fr); } }
.kpi { padding: 14px 16px; }
.kpi .lbl { font-size: 11.5px; color: var(--fg-2); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.kpi .val { font-family: var(--f-display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi .val small { font-size: 13px; color: var(--fg-3); margin-left: 3px; }

.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; color: var(--fg); }
.btn:hover { background: var(--surface-2); }
.btn { white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.input, select, textarea { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 8px; padding: 7px 10px; min-width: 0; }
textarea { width: 100%; font-family: var(--f-mono); font-size: 12.5px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--fg-2); }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--surface-2); }
.num { font-variant-numeric: tabular-nums; text-align: right; }

.tag { display: inline-flex; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line); white-space: nowrap; }
.v { display: inline-flex; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.v.true_positive { background: var(--crit-bg); color: var(--crit); }
.v.true_positive_mitigated { background: var(--serious-bg); color: var(--serious); }
.v.validation_required { background: var(--warn-bg); color: var(--warn); }
.v.false_positive { background: var(--info-bg); color: var(--info); }
.v.benign, .v.suppressed_noise { background: var(--good-bg); color: var(--good); }
.v.pending { background: var(--surface-2); color: var(--fg-3); }
.sev { font-size: 12px; font-weight: 600; }
.sev.critical { color: var(--crit); } .sev.high { color: var(--serious); } .sev.medium { color: var(--warn); } .sev.low { color: var(--blue); } .sev.info { color: var(--info); }
.st { font-size: 12px; font-weight: 500; }
.st::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.st.ok { color: var(--good); } .st.warn { color: var(--warn); } .st.bad { color: var(--crit); } .st.off { color: var(--fg-3); }

.points { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.ref { font-family: var(--f-mono); font-size: 11px; color: var(--accent); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; margin-left: 4px; cursor: pointer; background: none; }
.steps { display: flex; flex-direction: column; gap: 8px; }
.step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: var(--surface-2); }
.step .no { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--blue); color: #fff; }
.lane { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; font-weight: 600; margin-left: 6px; }
.lane.code { background: var(--surface-3); color: var(--fg-2); } .lane.agent { background: var(--accent-soft); color: var(--accent); }
/* an element with [hidden] stays hidden even when its class sets display (e.g. the evidence filter) */
[hidden] { display: none !important; }
.ev { border-top: 1px solid var(--line); padding: 8px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.ev:first-child { border-top: 0; }
.ev.hl { background: var(--accent-soft); border-radius: 6px; }
.ev pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-family: var(--f-mono); font-size: 11.5px; color: var(--fg-2); max-height: 220px; overflow: auto; }
.note { white-space: pre-wrap; font-family: var(--f-mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 8px; padding: 12px; }
.banner { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--fg); border: 1px solid var(--line); }
.banner.bad { background: var(--crit-bg); }
.empty { padding: 28px; text-align: center; color: var(--fg-3); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 9px; font-weight: 500; z-index: 50; }

@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .rail { flex-direction: row; overflow-x: auto; }
  .brand { border-bottom: 0; flex: none; padding: 10px 12px; } .brand small, .foot, .nav .grp { display: none; }
  .nav { flex-direction: row; } .nav a { white-space: nowrap; }
  .view { padding: 16px; }
}

/* Utilities (inline styles are blocked by the CSP) */
.col { display: flex; flex-direction: column; } .row { display: flex; }
.g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g16 { gap: 16px; } .g18 { gap: 18px; }
.mw0 { min-width: 0; } .mw280 { min-width: 280px; } .grow { flex: 1; }
.ai-start { align-items: flex-start; } .ai-center { align-items: center; } .wrapf { flex-wrap: wrap; }
label.lbl-row { flex-direction: row; align-items: center; gap: 8px; }
.fw5 { font-weight: 500; } .u-accent { color: var(--accent); } .nound { text-decoration: none; } .nowrap { white-space: nowrap; }
.mt3 { margin-top: 3px; } .mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.p0 { padding: 0; } .tr { text-align: right; }

/* Learning */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs a { padding: 8px 12px; color: var(--fg-2); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--fg); border-bottom-color: var(--accent); }
.tabs a .cnt { margin-left: 6px; font-size: 11px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 7px; }
.tag.memory { background: var(--good-bg); color: var(--good); border-color: transparent; }
.tag.precedent { background: var(--info-bg); color: var(--blue); border-color: transparent; }
.teach { border: 1px dashed var(--line-2); border-radius: 9px; padding: 10px 12px; }
.teach summary { cursor: pointer; font-weight: 500; color: var(--fg); }
.teach[open] summary { margin-bottom: 10px; }
.fact { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--surface-2); }
.meter { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; min-width: 80px; }
.meter > i { display: block; height: 100%; background: var(--good); }
.meter.w > i { background: var(--warn); } .meter.b > i { background: var(--crit); }
.w0 { width: 0 } .w5 { width: 5% } .w10 { width: 10% } .w15 { width: 15% } .w20 { width: 20% } .w25 { width: 25% } .w30 { width: 30% } .w35 { width: 35% } .w40 { width: 40% } .w45 { width: 45% } .w50 { width: 50% }
.w55 { width: 55% } .w60 { width: 60% } .w65 { width: 65% } .w70 { width: 70% } .w75 { width: 75% } .w80 { width: 80% } .w85 { width: 85% } .w90 { width: 90% } .w95 { width: 95% } .w100 { width: 100% }
.cm td.hit { background: var(--good-bg); color: var(--good); font-weight: 600; }
.cm td.miss { background: var(--crit-bg); }
.span-all { grid-column: 1 / -1; }

/* Client report */
.report .rh { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.report .rt { font-family: var(--f-display); font-size: 16px; font-weight: 600; }
.m0 { margin: 0; }
table.kv { width: auto; max-width: 100%; }
table.kv th { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--fg-2); padding: 5px 14px 5px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.kv td { padding: 5px 0; word-break: break-all; }

/* Agent Studio */
.studio-ed { min-height: 420px; line-height: 1.5; white-space: pre; overflow: auto; tab-size: 2; }
.diff { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-height: 420px; overflow: auto; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.diff .d-add { background: var(--good-bg); color: var(--good); }
.diff .d-del { background: var(--crit-bg); color: var(--crit); text-decoration: line-through; text-decoration-thickness: 1px; }
.diff .d-same { padding: 2px 0; }
.modal:has(.diff), .modal:has(.studio-wide) { width: min(1000px, 96vw); max-width: 96vw; }

/* ========================================================================
   Live console (v0.5): charts, Command Center, queue, case workspace
   Chart palette: validated categorical steps (dataviz reference instance),
   its own steps in dark mode. Verdict order TP red · mitigated purple ·
   validation yellow · FP blue · benign green passes the CVD checks.
   ======================================================================== */
:root {
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
  --c-neutral: #5b6169; --c-pend: #3a3f46;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948; --c-neutral: #a3a8af; --c-pend: #d3d6da; }
}
:root[data-theme="light"] { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948; --c-neutral: #a3a8af; --c-pend: #d3d6da; }
.c-1 { --k: var(--c1); } .c-2 { --k: var(--c2); } .c-3 { --k: var(--c3); } .c-4 { --k: var(--c4); }
.c-5 { --k: var(--c5); } .c-6 { --k: var(--c6); } .c-7 { --k: var(--c7); } .c-8 { --k: var(--c8); }
.c-tp { --k: var(--c8); } .c-tpm { --k: var(--c7); } .c-vr { --k: var(--c4); } .c-fp { --k: var(--c1); } .c-bn { --k: var(--c3); }
.c-noise, .c-neutral { --k: var(--c-neutral); } .c-pend { --k: var(--c-pend); } .c-ink { --k: var(--fg-2); }
.v.true_positive_mitigated { background: #221f38; color: #9085e9; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .v.true_positive_mitigated { background: #ecebfb; color: #5a48c9; } }
:root[data-theme="light"] .v.true_positive_mitigated { background: #ecebfb; color: #5a48c9; }

/* chart marks */
.chart { width: 100%; min-height: 40px; }
.chart svg, .spark { display: block; overflow: visible; }
.chart svg text, .spark text { font: 11px var(--f-body); }
svg .grid { stroke: var(--line); stroke-width: 1; }
svg .axis { stroke: var(--line-2); stroke-width: 1; }
svg .ax { fill: var(--fg-3); font-variant-numeric: tabular-nums; }
svg .lbl { fill: var(--fg-2); font-weight: 500; }
svg .bar, svg .node, svg .dot, svg .pt, svg .hov, svg .gent { fill: var(--k); }
svg .line { fill: none; stroke: var(--k); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg .hit { fill: transparent; cursor: default; }
svg .hit[data-go] { cursor: pointer; }
svg .hit.on { fill: var(--fg); fill-opacity: .05; }
svg .xh { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 3; }
svg .hov { stroke: var(--surface); stroke-width: 2; }
svg .pt { stroke: var(--surface); stroke-width: 2; }
svg .rib { fill: var(--k); fill-opacity: .28; transition: fill-opacity .12s; }
svg .rib.on { fill-opacity: .55; }
svg .node { cursor: default; } svg .node[data-go] { cursor: pointer; }
svg .flab { fill: var(--fg); font-size: 12px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
svg .flab.link { cursor: pointer; }
svg .flab .fv { font-weight: 600; font-variant-numeric: tabular-nums; }
svg .flab .fp { fill: var(--fg-3); }
svg .edge { stroke: var(--line-2); stroke-width: 1.5; }
svg .edge.rel { stroke-dasharray: 4 3; }
svg .gent { stroke: var(--surface); stroke-width: 2; }
svg .gcenter { fill: var(--accent); stroke: var(--surface); stroke-width: 3; }
svg .gcase { fill: var(--surface-3); stroke: var(--fg-3); stroke-width: 1.5; cursor: pointer; }
svg .glab { fill: var(--fg-2); font-size: 11px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
svg .glab.b { fill: var(--fg); font-weight: 600; }
svg .glab[data-go] { cursor: pointer; }
.spark { margin-top: 8px; width: 100%; height: 34px; }
.hscroll { overflow-x: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--fg-2); }
.legend b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--k); margin-right: 6px; vertical-align: -1px; }
.sw.sq { background: var(--surface-3); border: 1.5px solid var(--fg-3); }
.tip { position: fixed; z-index: 80; pointer-events: none; background: var(--surface); color: var(--fg); border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 10px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.28); max-width: 320px; }
.tip .tt-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 3px; }
.tip .tt-row b { font-variant-numeric: tabular-nums; }
.tip .tt-note { color: var(--fg-3); margin-top: 4px; }
.tview summary { cursor: pointer; color: var(--fg-3); font-size: 12px; }
.tview .tbl { max-height: 260px; overflow: auto; margin-top: 6px; }

/* page head, filters, live */
.pagehead { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: none; padding: 6px 12px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--fg-2); }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
.seg.sm button { padding: 4px 9px; font-size: 12px; }
.seg button b { font-weight: 600; margin-left: 3px; color: var(--fg-3); }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 var(--good); animation: livepulse 2s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live i, .pulse::before, .thinking i { animation: none !important; } }
kbd { font: 500 11px var(--f-mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--fg-2); background: var(--surface-2); margin: 0 1px; }
.btn kbd { margin-left: 4px; }
.btn.primary kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .7; }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn.danger { color: var(--crit); }
.btn.danger:hover { background: var(--crit-bg); border-color: var(--crit); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.kbd-hint { font-size: 12px; }

/* Command Center */
.kpis7 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi2 { padding: 14px 16px 10px; display: flex; flex-direction: column; }
.kpi2 .lbl { font-size: 11.5px; color: var(--fg-2); letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.kpi2 .val { white-space: nowrap; font-family: var(--f-display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.15; }
.kpi2 .val small { font-size: 13px; color: var(--fg-3); margin-left: 4px; font-family: var(--f-body); font-weight: 500; }
.kpi2 .sub { font-size: 12px; margin-top: 4px; min-height: 18px; }
.delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.good { color: var(--good); } .delta.bad { color: var(--crit); } .delta.flat { color: var(--fg-2); }
.cc-a { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.cc-b { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .cc-a, .cc-b { grid-template-columns: minmax(0, 1fr); } }
.chipn { display: inline-flex; gap: 5px; align-items: baseline; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; color: var(--fg-2); font-size: 12.5px; }
.chipn b { color: var(--fg); font-variant-numeric: tabular-nums; }
.chipn.bad { border-color: var(--crit); color: var(--crit); } .chipn.bad b { color: var(--crit); }
.attl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sm { font-size: 12px; }
.att { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.att:first-child { border-top: 0; }
.att:hover { background: var(--surface-2); }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brk { word-break: break-all; }
.hstrip { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.hstrip .lbl, .hc .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }

/* SLA */
.sla { display: inline-flex; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sla.ok { background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line); }
.sla.soon { background: var(--warn-bg); color: var(--warn); }
.sla.breach, .sla.miss { background: var(--crit-bg); color: var(--crit); }
.sla.met { background: var(--good-bg); color: var(--good); }

/* queue */
.tabs a .cnt.bad { background: var(--crit-bg); color: var(--crit); }
.qrow.sel td { background: var(--surface-2); }
.qrow.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.who { font-weight: 500; } .who.me { color: var(--accent); }

/* topbar search + palette */
.searchbtn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--fg-3); border-radius: 8px; padding: 6px 8px 6px 12px; cursor: pointer; font-size: 12.5px; min-width: 0; }
.searchbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) { .searchbtn span { display: none; } }
.palette { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; z-index: 71; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; }
.pal-scrim { z-index: 70; }
.pal-in { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 14px 16px; font-size: 15px; outline: none; }
.pal-list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow: auto; }
.pal-list li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; min-width: 0; }
.pal-list li.on { background: var(--accent-soft); }
.pal-list .pk { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.pal-f { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; }

/* case workspace */
.casew { padding-bottom: 72px; }
.hstrip2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; }
.hc { padding: 12px 16px; border-left: 1px solid var(--line); min-width: 0; }
.hc:first-child { border-left: 0; }
.hc select { max-width: 100%; }
.tstrip { display: flex; align-items: center; gap: 0; padding: 14px 16px; flex-wrap: wrap; row-gap: 10px; }
.tstop { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; position: relative; min-width: 120px; }
.tstop i { position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); }
.tstop.done i { background: var(--accent); border-color: var(--accent); }
.tstop b { font-size: 12.5px; font-weight: 600; }
.tstop span { font-size: 12px; }
.tgap { flex: 1; min-width: 90px; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; padding: 0 10px; }
.tgap::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px solid var(--accent); opacity: .5; z-index: 0; }
.tgap.wait::before { border-top-style: dashed; border-color: var(--line-2); opacity: 1; }
.tgap span { position: relative; z-index: 1; background: var(--surface); padding: 0 6px; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; }
.tgap small { position: relative; z-index: 1; background: var(--surface); padding: 0 6px; color: var(--fg-3); font-size: 11px; }
.tsla { width: 100%; font-size: 11.5px; }
.ctabs { position: sticky; top: -22px; margin-top: -4px; z-index: 5; background: var(--bg); padding-top: 4px; }
.ctabs a { white-space: nowrap; }
.panel[hidden] { display: none !important; }
.lead { font-size: 15px; line-height: 1.55; }
.rh { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.kfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .kfacts { grid-template-columns: minmax(0, 1fr); } }
.kf { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); min-width: 0; }
.kf.wide { margin-top: 12px; }
.kf-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; margin-bottom: 6px; }
.kf dl { margin: 0; display: flex; flex-direction: column; gap: 1px; }
.kf dt { color: var(--fg-3); font-size: 11.5px; margin-top: 6px; }
.kf dt:first-child { margin-top: 0; }
.kf dd { margin: 0; word-break: break-word; }
.kf.wide dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; }
.kf.wide dt { margin-top: 0; font-size: 12.5px; color: var(--fg-2); }
.kf.wide dd { word-break: break-all; }
.decide .conf { display: flex; align-items: center; gap: 8px; }
.decide .conf .meter { width: 90px; }
.relc { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; color: var(--fg); }
.relc:hover { background: var(--surface-2); }
.right-auto { margin-left: auto; }
.chain { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.vsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.vsteps > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 8px 0 12px; position: relative; align-items: start; }
.vsteps > li::before { content: ''; position: absolute; left: 12px; top: 30px; bottom: -2px; border-left: 2px solid var(--line); }
.vsteps > li:last-child::before { display: none; }
.vsteps .no { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--fg-2); }
.vsteps li.done .no { background: var(--blue); color: #fff; }
.vsteps li.live .no { background: var(--accent-soft); border: 2px solid var(--accent); }
.vsteps li.stopped .no { background: var(--crit-bg); color: var(--crit); }
.tcalls { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tcalls li { border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; background: var(--surface-2); min-width: 0; }
.tcalls li.bad { border-left: 3px solid var(--crit); }
.tcalls li.ok { border-left: 3px solid var(--good); }
.pulse { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.pulse::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: livepulse 1.6s infinite; }
.livebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.ck > span { overflow-wrap: anywhere; }
.tcalls .tin { overflow-wrap: anywhere; font-size: 12px; margin-top: 2px; }
.ck:first-child { border-top: 0; }
.ck.nd > div { color: var(--fg-2); }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 180px 76px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline; }
.tl li:first-child { border-top: 0; }
.tl-t { color: var(--fg-3); font-size: 12px; }
.tl-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--fg-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; justify-self: start; }
.tl li.k-ai .tl-k { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.tl li.k-analyst .tl-k { color: var(--blue); }
@media (max-width: 720px) { .tl li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.ref.new { border-style: dashed; }
.ref.bad { color: var(--crit); text-decoration: line-through; cursor: default; }
.ask .qa { display: flex; flex-direction: column; gap: 8px; }
.ask .q { align-self: flex-end; max-width: 80%; background: var(--accent-soft); border-radius: 12px 12px 4px 12px; padding: 8px 12px; }
.ask .a { max-width: 92%; border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 10px 12px; background: var(--surface-2); }
.ask .a p { margin: 0 0 6px; } .ask .a p:last-child { margin-bottom: 0; }
.ask-empty { padding: 8px 2px; }
.ask textarea { flex: 1; font-family: var(--f-body); font-size: 13.5px; }
.chipq { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--fg-2); }
.chipq:hover { color: var(--fg); border-color: var(--accent); }
.thinking { display: inline-flex; gap: 4px; align-items: center; color: var(--fg-2); }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: think 1.2s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes think { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.vbar { position: sticky; bottom: -48px; margin: 0 -24px -48px; padding: 10px 24px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; z-index: 6; }
@media (max-width: 820px) { .vbar { margin: 0 -16px -48px; padding: 10px 16px; } }

.pal-list li .mono, .pal-list li > .faint:last-child { white-space: nowrap; }
.pal-list li .ellip { flex: 1; min-width: 0; }
@media (max-width: 820px) { .ctabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tstrip { align-items: stretch; } }

/* Command Center v0.7 */
.kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis4 { grid-template-columns: minmax(0, 1fr); } }
.kpi3 { padding: 16px 18px 0; display: flex; flex-direction: column; overflow: hidden; }
.kpi3 .lbl { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.kpi3 .val { font-family: var(--f-display); font-size: 34px; font-weight: 600; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi3 .val small { font-size: 13px; color: var(--fg-3); margin-left: 6px; font-family: var(--f-body); font-weight: 500; }
.kpi3 .sub { font-size: 12px; margin-top: 6px; min-height: 18px; }
.kpi3 .spark { margin: 12px -18px 0; width: calc(100% + 36px); height: 44px; }
svg .sarea { fill: var(--k); fill-opacity: .10; stroke: none; }
.statstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .statstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st2 { padding: 12px 18px; border-left: 1px solid var(--line); min-width: 0; }
.st2:first-child { border-left: 0; }
.st2[data-go] { cursor: pointer; } .st2[data-go]:hover { background: var(--surface-2); }
.st2 .lbl { font-size: 11.5px; color: var(--fg-3); letter-spacing: .04em; text-transform: uppercase; }
.st2 .v { font-family: var(--f-display); font-size: 20px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hrow { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; min-width: 0; }
.hrow:first-child { border-top: 0; padding-top: 0; }
.hrow .lbl { color: var(--fg-2); font-size: 12.5px; white-space: nowrap; }
.shortcuts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; align-items: baseline; }
.shortcuts h4 { grid-column: 1 / -1; margin: 10px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }

/* AI Governance, Ask (fleet), Integrations */
.kpis5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .kpis5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis5 { grid-template-columns: minmax(0, 1fr); } }
.kpi3.gv { padding-bottom: 16px; }
.agrow { display: flex; flex-direction: column; gap: 5px; }
.hbar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.hbar > i { display: block; height: 100%; background: var(--k); border-radius: 0 4px 4px 0; width: 0; }
.two-eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .two-eq { grid-template-columns: minmax(0, 1fr); } }
.lbl2 { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
.intgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.intc { padding: 14px 16px; }
.u-bad { color: var(--crit); font-weight: 600; }
.tag.bad { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.intc .st { white-space: nowrap; }
.mw80 { min-width: 90px; }

/* ---- time-range picker (filters.js) ---- */
.tpick { position: relative; display: inline-flex; }
.tp-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.tp-btn:hover { background: var(--surface-2); }
.tp-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tp-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tp-btn .chev { width: 12px; height: 12px; opacity: .7; }
.tp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 340px; max-width: calc(100vw - 32px); display: grid; grid-template-columns: 130px 1fr; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); overflow: hidden; }
.tp-pop.r { left: auto; right: 0; }
.tp-pop[hidden] { display: none; }
.tp-presets { display: flex; flex-direction: column; padding: 6px; border-right: 1px solid var(--line); background: var(--surface-2); }
.tp-presets button { text-align: left; border: 0; background: none; color: var(--fg-2); padding: 7px 9px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.tp-presets button:hover { background: var(--surface); color: var(--fg); }
.tp-presets button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tp-custom { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.tp-custom .lbl { font-size: 11.5px; }
.tp-custom label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--fg-2); }
.tp-custom .input { font-size: 12.5px; padding: 5px 7px; width: 100%; color-scheme: light dark; }
.tp-err { font-size: 12px; color: var(--bad, #d64545); }
@media (max-width: 560px) { .tp-pop, .tp-pop.r { grid-template-columns: 1fr; right: auto; left: 0; } .tp-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---- what the model saw ---- */
.tag.ok { background: var(--good-bg); color: var(--good); border-color: transparent; }
.tag.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.tag.zero { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }
.mwrec { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.mwparts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mwp { border-top: 1px solid var(--line); padding-top: 6px; }
.mwp summary { cursor: pointer; list-style-position: inside; }
.mwp.sys { color: var(--fg-2); }
.mwtext { margin: 6px 0 0; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
mark.tok { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.mt4 { margin-top: 4px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.agrow.click { cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: 0 -6px; } .agrow.click:hover { background: var(--surface-2); }
.qsel { width: 30px; }

/* live queue: rows that just arrived or changed */
.qrow.fresh td { animation: freshrow 5s ease-out; }
@keyframes freshrow { from { background: var(--accent-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .qrow.fresh td { animation: none; background: var(--accent-soft); } }
.mb12 { margin-bottom: 12px; }

/* correlated activity */
.tag.master { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tag.link { background: var(--info-bg); color: var(--fg-2); border-color: transparent; }

/* Entity 360 */
.etype { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.etype.lg { font-size: 12px; padding: 3px 8px; }
.brk { overflow-wrap: anywhere; }
.risk { display: inline-flex; align-items: center; gap: 8px; }
.risk .trk { display: block; width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; flex: none; }
.risk i { display: block; height: 100%; border-radius: 3px; background: var(--info); }
.kpi3 .val.vsm { font-size: 20px; }
.risk b { font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.risk.low i { background: var(--info); } .risk.med i { background: var(--warn); } .risk.high i { background: var(--serious); } .risk.crit i { background: var(--crit); }
.risk.crit b { color: var(--crit); }
.spark30 { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.spark30 i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; }
.spark30 i.z { background: var(--line-2); }
.vstack { display: flex; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-top: 6px; background: var(--surface-2); }
.vstack span { display: block; min-width: 4px; }
.vstack .tp, .dot.tp { background: var(--crit); } .vstack .vr, .dot.vr { background: var(--warn); } .vstack .fp, .dot.fp { background: var(--good); } .vstack .ot, .dot.ot { background: var(--fg-3); opacity: .45; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* entity page: compact tiles (counts and relative times, not headline numbers) */
.ent .kpi3 .val { font-size: 26px; }
.ent .kpi3 .val.vsm { font-size: 22px; }
.ent .ent-name { font-size: 24px; margin: 0; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- v0.11 case page */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--fg-2); white-space: nowrap; max-width: 100%; }
.chip.mono { font-family: var(--f-mono); font-size: 11.5px; }
.chip.warn { background: var(--warn-bg); color: var(--warn); } .chip.master { background: var(--accent-soft); color: var(--accent); } .chip.link { background: var(--info-bg); }
h1.ctitle { font-size: 24px; line-height: 1.25; }
.dbar { overflow: hidden; }
.dmain { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 16px 18px; }
.dcol { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dcol .lbl, .rlbl, .internal .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
.vsep { width: 1px; align-self: stretch; background: var(--line); }
.vbig { display: inline-flex; align-items: center; gap: 6px; }
.vbig .v { font-size: 13.5px; padding: 5px 12px; }
.vbig svg { color: var(--crit); }
.conf { display: inline-flex; align-items: center; gap: 8px; } .conf .meter { min-width: 88px; }
.dact { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.dact .btn.primary { min-width: 104px; justify-content: center; }
.dlife { border-top: 1px solid var(--line); background: var(--surface-2); }
.dlife .tstrip { padding: 10px 18px; }
.dlife .tgap span, .dlife .tgap small { background: var(--surface-2); }
.menu { position: relative; }
.menu > summary { list-style: none; padding: 6px 9px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.25); min-width: 160px; }
.review > header { padding-bottom: 6px; }
.rvl { list-style: none; margin: 0; padding: 4px 0 8px; }
.rvl li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 16px; }
.rvl li + li { border-top: 1px solid var(--line); }
.rvi { flex: none; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.rvi.warn { background: var(--warn-bg); color: var(--warn); } .rvi.bad { background: var(--crit-bg); color: var(--crit); }
.rvi.info { background: var(--info-bg); color: var(--blue); } .rvi.off { background: var(--surface-3); color: var(--fg-2); }
.fw6 { font-weight: 600; } .mb4 { margin-bottom: 4px; } .pt0 { padding-top: 0; } .pt6 { padding-top: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ovw { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ovl { flex: 999 1 620px; } .ovr { flex: 1 1 320px; }
.rgrid { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px 16px; }
.rlbl { padding-top: 3px; }
.rpt .rt { font-weight: 600; font-size: 15px; }
.rv { position: relative; padding-right: 26px; line-height: 1.55; }
.rv .ed { position: absolute; right: 0; top: 0; border: 0; background: none; color: var(--fg-3); cursor: pointer; padding: 3px; border-radius: 6px; opacity: .55; }
.rv:hover .ed, .rv .ed:focus-visible { opacity: 1; color: var(--accent); background: var(--surface-2); }
.rv.editing { padding-right: 0; }
.redit { width: 100%; font: inherit; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 10px; resize: vertical; }
mark.flagged { background: var(--warn-bg); color: inherit; border-radius: 4px; padding: 0 2px; text-decoration: underline wavy var(--warn); text-underline-offset: 4px; }
.flagline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 12.5px; color: var(--warn); }
.flagline .btn { color: var(--fg); }
.rpts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rpts > li { display: flex; gap: 10px; }
.rpts .no { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-3); color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; margin-top: 1px; }
.ref[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.evin { margin-top: 8px; }
.evbox { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); padding: 10px 12px; font-size: 13px; }
.internal { border-style: dashed; border-color: var(--line-2); background: var(--surface-2); }
.internal > header svg { color: var(--fg-3); }
.kcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.kdl { margin: 0; display: grid; grid-template-columns: 130px minmax(0, 1fr); font-size: 13.5px; }
.kdl dt { color: var(--fg-3); padding: 7px 0; border-bottom: 1px solid var(--line); }
.kdl dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kdl dd.mono { font-size: 12.5px; }
.rchip { font-family: var(--f-body); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--fg-2); white-space: nowrap; }
.rchip.crit { background: var(--crit-bg); color: var(--crit); } .rchip.warn { background: var(--warn-bg); color: var(--warn); }
.ctx3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ctxt { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: none; color: var(--fg-2); cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.ctxt b { font-family: var(--f-display); font-size: 20px; line-height: 1.15; color: var(--fg); }
.ctxt.on { border-color: var(--accent); background: var(--accent-soft); }
.ctxt:disabled { opacity: .5; cursor: default; }
.erl { list-style: none; margin: 0; padding: 0; }
.erl li { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.erl li:last-child { border-bottom: 0; }
.erl li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbar { display: inline-flex; align-items: center; gap: 7px; }
.rbar .trk { display: block; width: 64px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.rbar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.rbar.warn i { background: var(--warn); } .rbar.crit i { background: var(--crit); } .rbar.crit b { color: var(--crit); }
.rbar b { font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
.rtext { white-space: pre-wrap; font-family: var(--f-body); font-size: 13.5px; line-height: 1.55; margin: 0; }
.strike { text-decoration: line-through; color: var(--fg-3); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: -12px 0 32px rgba(0,0,0,.3); z-index: 40; display: flex; flex-direction: column; }
.drawer-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.drawer-b { overflow: auto; padding: 12px; flex: 1; }
.drawer-b .card { border: 0; }
.btn .cnt { font-size: 11px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 7px; }
@media (max-width: 720px) {
  .rgrid { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .rgrid .rlbl { padding-top: 10px; }
  .dact { margin-left: 0; justify-content: flex-start; }
  .vsep { display: none; }
}

/* ---------------------------------------------------------------- investigation graph */
.igbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.igchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--fg-2); font: inherit; font-size: 12px; cursor: pointer; }
.igchip b { color: var(--fg); font-weight: 600; }
.igchip.off { opacity: .45; text-decoration: line-through; }
.igchip .sw { margin-right: 0; }
.igchip.k-alert .sw, .ig-n.k-alert .ig-dot { --k: var(--accent); }
.igchip.k-case .sw, .ig-n.k-case .ig-dot { --k: var(--fg-3); }
.igsearch { width: 200px; padding: 5px 10px; }
.igtime { margin-bottom: 8px; }
.igtime input[type=range] { flex: 1; min-width: 160px; accent-color: var(--accent); }
.igwrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.igcanvas { flex: 999 1 560px; min-width: 0; overflow: auto; max-height: 620px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.igside { flex: 1 1 280px; min-width: 0; max-height: 620px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.igsvg { display: block; font-family: var(--f-body); }
.ig-e { fill: none; stroke: var(--line-2); opacity: .9; }
.ig-e.e-proc { stroke: var(--c7); } .ig-e.e-net { stroke: var(--c1); } .ig-e.e-file { stroke: var(--c4); } .ig-e.e-id { stroke: var(--c2); } .ig-e.e-alert { stroke: var(--accent); stroke-dasharray: 4 3; } .ig-e.e-case { stroke: var(--fg-3); stroke-dasharray: 2 3; }
.igk { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--line-2); }
.igk.e-proc { background: var(--c7); } .igk.e-net { background: var(--c1); } .igk.e-file { background: var(--c4); } .igk.e-id { background: var(--c2); } .igk.e-alert { background: var(--accent); } .igk.e-case { background: var(--fg-3); }
.ig-n { cursor: pointer; outline: none; }
.ig-n .ig-dot { fill: var(--k); stroke: var(--surface-2); stroke-width: 2; }
.ig-n.al .ig-dot { stroke: var(--accent); stroke-width: 2.5; }
.ig-n .ig-l { font-size: 12px; fill: var(--fg); }
.ig-n.al .ig-l { font-weight: 600; }
.ig-n.common { opacity: .45; }
.ig-b { font-size: 10.5px; font-weight: 600; fill: var(--fg-3); }
.ig-b.bad { fill: var(--crit); } .ig-b.warn { fill: var(--warn); }
.ig-ring { fill: none; stroke-width: 2; } .ig-ring.bad { stroke: var(--crit); } .ig-ring.warn { stroke: var(--warn); }
.ig-n:hover .ig-l, .ig-n:focus-visible .ig-l { text-decoration: underline; }
.ig-n.hit .ig-l { fill: var(--accent); font-weight: 600; }
.igsvg.focus .ig-n:not(.near) { opacity: .2; }
.igsvg.focus .ig-e:not(.near) { opacity: .08; }
.igsvg.focus .ig-e.near { opacity: 1; }
.ig-n.sel .ig-dot { stroke: var(--fg); stroke-width: 2.5; }
.ig-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.ig-lane { stroke: var(--line); }
.ig-ax { font-size: 11px; fill: var(--fg-3); font-family: var(--f-mono); }
.ig-ev { fill: var(--line-2); cursor: pointer; opacity: .9; }
.ig-ev.e-proc { fill: var(--c7); } .ig-ev.e-net { fill: var(--c1); } .ig-ev.e-file { fill: var(--c4); } .ig-ev.e-id { fill: var(--c2); } .ig-ev.e-alert { fill: var(--accent); } .ig-ev.e-case { fill: var(--fg-3); }
.igrel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.linkish { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left; }
.linkish:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- v0.11 Command Center */
.sec { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; margin: 6px 0 -6px; }
.nowg { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.nowt { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; text-decoration: none; color: var(--fg); }
.nowt:hover { background: var(--surface-2); }
.nowt .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
.nowt .v { font-family: var(--f-display); font-size: 26px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.nowt.bad { border-color: var(--crit); } .nowt.bad .v { color: var(--crit); }
.nowt.warn .v { color: var(--warn); }
.cc-c { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.frow { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: start; }
.fv { font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fbar { display: flex; gap: 2px; height: 24px; }
.fbar > a { display: block; background: var(--k); border-radius: 3px; min-width: 5px; }
.fbar > a:hover { filter: brightness(1.15); }
.c-acc { --k: var(--accent); } .c-ok { --k: var(--good); } .c-ser { --k: var(--serious); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.feed li:first-child { border-top: 0; }
.feed li.click { cursor: pointer; } .feed li.click:hover { background: var(--surface-2); }
.u-bad { color: var(--crit); }
@media (max-width: 640px) { .frow { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ---------------------------------------------------------------- v0.11 entities */
.g4 { gap: 4px; } .ai-baseline { align-items: baseline; }
.etiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.etile { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.etile .v { font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.etile .v.bad { color: var(--crit); }
.etile .sm { line-height: 1.3; }
.rlv { font-size: 11.5px; font-weight: 600; color: var(--fg-3); } .rlv.crit { color: var(--crit); } .rlv.warn { color: var(--warn); }
.rlv.lg { font-size: 17px; }
.spk { color: var(--fg-3); display: block; }
.ring-bg { stroke: var(--surface-3); } .ring-v { stroke: var(--blue); } .ring-v.crit { stroke: var(--crit); } .ring-v.warn { stroke: var(--warn); }
.ring-t { font-family: var(--f-display); font-size: 9.5px; font-weight: 600; fill: var(--fg); }
.kv.rk td { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv.rk tr.tot td { font-weight: 600; border-bottom: 0; padding-top: 8px; }
.ovr2 { flex: 1 1 340px; min-width: 0; } .ovl2 { flex: 2 1 560px; min-width: 0; }
.ovr2 > .card, .ovl2 > .card { height: 100%; }
.estrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-bottom: 1px solid var(--line); }
.estrip > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-left: 1px solid var(--line); min-width: 0; }
.estrip > div:first-child { border-left: 0; }
.estrip .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
.estrip b { font-family: var(--f-display); font-size: 22px; font-weight: 600; line-height: 1.25; }
.bars30 { display: flex; align-items: flex-end; gap: 3px; height: 120px; border-bottom: 1px solid var(--line-2); }
.dcol30 { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.dcol30 i { display: block; background: var(--k); border-radius: 2px; min-height: 3px; }
tr.child td { background: var(--surface-2); }
tr.child td:first-child { padding-left: 26px; }
.hbar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--k, var(--accent)); border-radius: 3px; }
.igcheck { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); white-space: nowrap; }
.igcheck input { width: auto; margin: 0; accent-color: var(--accent); }
.ig-ev.span { opacity: .55; }
.igcheck { flex-direction: row !important; }
.igside { flex-basis: 260px; }
.igstory { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.igstory h4 { font-size: 13.5px; font-weight: 600; }
.story { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow: auto; }
.story .sday { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; padding: 10px 0 4px 92px; }
.sline { display: grid; grid-template-columns: 70px 18px minmax(0, 1fr); gap: 4px; padding: 5px 4px; border-radius: 8px; cursor: pointer; position: relative; }
.sline:hover, .sline:focus-visible { background: var(--surface-2); outline: none; }
.sline .st-t { color: var(--fg-3); text-align: right; padding-top: 15px; font-size: 12px; }
.sline .st-d { width: 10px; height: 10px; border-radius: 50%; margin: 19px auto 0; background: var(--fg-3); border: 2px solid var(--surface); box-sizing: content-box; }
.sline.bad .st-d { background: var(--crit); } .sline.warn .st-d { background: var(--warn); } .sline.agent .st-d { background: var(--accent); } .sline.src .st-d { background: var(--surface); border-color: var(--blue); }
.sline .st-w { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
.sline > div:last-child { font-size: 13.5px; line-height: 1.45; }
.sline::before { content: ''; position: absolute; left: 82px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.sline.fail .st-d { background: var(--warn); }

/* ---------------------------------------------------------------- theme switch */
.themesw { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--surface); }
.themesw button { border: 0; background: none; color: var(--fg-3); padding: 5px 8px; cursor: pointer; display: inline-flex; align-items: center; }
.themesw button + button { border-left: 1px solid var(--line-2); }
.themesw button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.themesw button:hover { color: var(--fg); }

/* ---------------------------------------------------------------- client report, formatted */
.kv.bordered { border-collapse: collapse; width: 100%; max-width: 760px; }
.kv.bordered th, .kv.bordered td { border: 1px solid var(--line-2); padding: 7px 10px; text-align: left; vertical-align: top; font-size: 13px; }
.kv.bordered th { background: var(--surface-2); font-weight: 600; color: var(--fg-2); width: 34%; white-space: nowrap; }
.kv.bordered td { word-break: break-word; }
.rdoc { font-size: 14px; line-height: 1.6; max-width: 860px; }
.rdoc h4 { margin: 18px 0 6px; font-size: 14.5px; font-weight: 600; }
.rdoc h4:first-child { margin-top: 0; }
.rdoc p { margin: 0 0 10px; }
.rdoc ul { margin: 0; padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.rdoc ul li::marker { color: var(--fg-2); }
.rdoc .kv.bordered { margin: 8px 0 4px; }

/* decision bar: the auto-close reason takes the free space (two lines at most); the buttons keep their row */
.dcol.dac { flex: 1 1 240px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dact { flex: 0 0 auto; }

/* graph: enrichment status and replay */
.ig-n.s-bad .ig-dot { fill: var(--crit); }
.ig-n.s-bad .ig-l { fill: var(--crit); font-weight: 600; }
.ig-n.s-warn .ig-l { fill: var(--warn); font-weight: 600; }
.ig-b.good { fill: var(--good); }
.ig-e.hot-bad { stroke: var(--crit); opacity: 1; }
.ig-e.hot-warn { stroke: var(--warn); opacity: 1; }
.ig-ev.hot-bad { fill: var(--crit); opacity: 1; } .ig-ev.hot-warn { fill: var(--warn); opacity: 1; }
.igs { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.igs.bad { background: var(--crit); } .igs.warn { background: var(--warn); } .igs.good { background: var(--good); } .igs.al { border: 2px solid var(--accent); width: 8px; height: 8px; }
.igsvg .later { opacity: .07; transition: opacity .35s; }
.igsvg .ig-e, .igsvg .ig-n { transition: opacity .35s; }
.igsvg .ig-e.fresh { stroke: var(--accent); opacity: 1; stroke-width: 3.5; }
/* the alert as the source tool sent it: full-width field table */
table.kv.bordered.afields { width: 100%; max-width: none; table-layout: fixed; }
table.kv.bordered.afields th { width: 34%; font-weight: 500; overflow-wrap: anywhere; white-space: normal; }

/* ---- case queue: views, spreadsheet-style filters, active filter chips ---- */
.qtabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; width: fit-content; max-width: 100%; }
.qtabs a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9px; color: var(--fg-2); text-decoration: none; font-weight: 500; font-size: 13px; }
.qtabs a:hover { background: var(--surface-3); color: var(--fg); }
.qtabs a.on { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, .14), inset 0 0 0 1px var(--line-2); }
.qtabs a .cnt { font-size: 11px; min-width: 22px; text-align: center; background: var(--surface-3); color: var(--fg-2); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.qtabs a.on .cnt { background: var(--accent-soft); color: var(--accent); }
.qtabs a .cnt.bad { background: var(--crit-bg); color: var(--crit); }
.qbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qsearch { position: relative; flex: 1 1 260px; max-width: 380px; }
.qsearch svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); fill: none; stroke: var(--fg-3, var(--fg-2)); stroke-width: 1.6; pointer-events: none; }
.qsearch .input { width: 100%; padding-left: 32px; }
.qtog { display: inline-flex; flex-direction: row; align-items: center; margin: 0; gap: 6px; font-size: 13px; color: var(--fg-2); padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); cursor: pointer; white-space: nowrap; }
.qtog:has(input:checked) { border-color: var(--accent); color: var(--fg); background: var(--accent-soft); }
.qcount { font-size: 13px; color: var(--fg-2); white-space: nowrap; margin-left: auto; }
.ms { position: relative; }
.ms-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; max-width: 260px; }
.ms-btn:hover { border-color: var(--fg-2); }
.ms-btn.on { border-color: var(--accent); background: var(--accent-soft); }
.ms-btn .ms-l { color: var(--fg-2); }
.ms-btn .ms-v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ms-btn .ms-v.faint { font-weight: 400; }
.ms-btn .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.ms-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; width: 300px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.ms-pop.r { left: auto; right: 0; }
.ms-acts { display: flex; gap: 14px; font-size: 12px; padding: 0 2px; }
.ms-list { max-height: 300px; overflow: auto; display: flex; flex-direction: column; margin: 0 -4px; }
.ms-opt { display: flex; flex-direction: row; align-items: center; margin: 0; color: var(--fg); gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ms-opt:hover { background: var(--surface-2); }
.ms-opt[hidden] { display: none; }
.ms-opt input { margin: 0; accent-color: var(--accent); }
.ms-opt .ms-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-opt .ms-n { font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ms-opt.zero .ms-t, .ms-opt.zero .ms-n { color: var(--fg-3, var(--fg-2)); opacity: .7; }
.ms-opt .ms-only { display: none; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0 2px; }
.ms-opt:hover .ms-only, .ms-opt:focus-within .ms-only { display: inline; }
.ms-opt:hover .ms-n { display: none; }
.ms-foot { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--fg-2); border-radius: 999px; padding: 3px 6px 3px 12px; font: inherit; font-size: 12px; cursor: pointer; max-width: 100%; }
.fchip b { color: var(--fg); font-weight: 600; }
.fchip span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 13px; line-height: 1; }
.fchip:hover span { background: var(--surface-3); color: var(--fg); }
@media (max-width: 820px) { .qsearch { max-width: none; flex-basis: 100%; } .qcount { flex-basis: 100%; margin-left: 0; } }