/* Prodigii Cybernetics Control System — styles */
:root{
  --ground:#0A1017; --panel:#101A24; --panel-2:#152232; --raise:#1B2B3C;
  --line:#223142; --line-soft:#1A2735;
  --ink:#DCE7F2; --ink-2:#9FB2C4; --ink-3:#6B7F91;
  --beacon:#4D65FF;                 /* Prodigii brand indigo (#4d65ff) — inference / active layer */
  --ok:#38D08A; --warn:#E7B34E; --crit:#F26144; --idle:#54697B;
  --ok-dim:rgba(56,208,138,.14); --warn-dim:rgba(231,179,78,.14);
  --crit-dim:rgba(242,97,68,.15); --beacon-dim:rgba(77,101,255,.18);
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px; --r-sm:7px;
}
:root[data-theme="light"]{
  --ground:#EEF2F6; --panel:#FBFCFE; --panel-2:#F3F6FA; --raise:#FFFFFF;
  --line:#D2DCE6; --line-soft:#E1E8F0;
  --ink:#14202C; --ink-2:#41576B; --ink-3:#71879A;
  --ok:#12A566; --warn:#B7841E; --crit:#D2452A; --idle:#7C90A2;
  --ok-dim:rgba(18,165,102,.12); --warn-dim:rgba(183,132,30,.13);
  --crit-dim:rgba(210,69,42,.12); --beacon:#3A50E6; --beacon-dim:rgba(58,80,230,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.dim{color:var(--ink-2)} .faint{color:var(--ink-3)}
button{font-family:inherit; cursor:pointer; color:inherit}
:focus-visible{outline:2px solid var(--beacon); outline-offset:2px; border-radius:4px}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; gap:20px; padding:12px 20px;
  border-bottom:1px solid var(--line); background:var(--panel);
}
.brand{display:flex; align-items:center; gap:11px; min-width:250px}
.mark{width:30px;height:30px;flex:none;display:block}
.brand h1{font-size:14px; font-weight:600; letter-spacing:.02em; margin:0}
.login-brand b{letter-spacing:.14em}
.brand .sub{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.homeostasis{display:flex; align-items:center; gap:10px; margin-left:auto; padding:6px 12px;
  border:1px solid var(--line); border-radius:100px; background:var(--panel-2)}
.homeostasis .lbl{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.homeostasis .val{font-size:12.5px; font-weight:600}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 var(--ok); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ok-dim)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tgl{margin-left:4px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:7px; width:30px;height:30px; font-size:14px; display:grid;place-items:center}

/* ---------- summary strip ---------- */
.strip{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);
  border-bottom:1px solid var(--line)}
.kpi{background:var(--panel); padding:12px 18px; display:flex; flex-direction:column; gap:3px}
.kpi .k{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.kpi-info{position:relative; display:inline-flex; align-items:center; margin-left:5px; color:var(--ink-3); cursor:help; vertical-align:middle; outline:none}
.kpi-info:hover, .kpi-info:focus-visible{color:var(--beacon)}
.kpi-info:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb, var(--beacon) 45%, transparent); border-radius:50%}
.kpi-tip{position:absolute; left:-4px; top:170%; width:300px; z-index:60;
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:11px 13px;
  font-size:11.5px; line-height:1.5; letter-spacing:normal; text-transform:none; font-weight:400; color:var(--ink-2);
  box-shadow:0 14px 36px rgba(0,0,0,.55); opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .12s, transform .12s; pointer-events:none}
.kpi-tip::before{content:""; position:absolute; left:9px; top:-5px; width:9px; height:9px; background:var(--panel-2);
  border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg)}
.kpi-info:hover .kpi-tip, .kpi-info:focus-visible .kpi-tip, .kpi-info:focus-within .kpi-tip{opacity:1; visibility:visible; transform:none}
.kpi-tip b{color:var(--ink-1); font-weight:640}
.kpi-tip .frm{font-family:var(--mono); color:var(--beacon); font-size:10.5px}
.tsdot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 8%, transparent)}
.kpi .v{font-size:23px; font-weight:600; letter-spacing:-.01em; font-family:var(--mono); font-variant-numeric:tabular-nums}
.kpi .m{font-size:11px}
.kpi .v small{font-size:13px; color:var(--ink-3); font-weight:400}
/* clickable KPI (Integrity alerts → twin roster popover) */
.kpi-click{position:relative; cursor:pointer; outline:none}
.kpi-click:hover, .kpi-click:focus-visible{background:var(--panel-2)}
.twin-menu{position:absolute; top:calc(100% + 4px); left:0; min-width:340px; max-width:440px; max-height:60vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px; z-index:60;
  box-shadow:0 14px 44px rgba(0,0,0,.45); cursor:default; text-transform:none; letter-spacing:normal}
.twin-menu .th{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:7px 8px 5px;
  display:flex; justify-content:space-between; align-items:baseline}
.twin-menu .th .tct{font-family:var(--mono); font-size:11px; letter-spacing:normal}
.twin-row{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px; font-size:11.5px; cursor:pointer}
.twin-row:hover{background:var(--panel-2)}
.twin-row b{color:var(--ink-1); font-weight:560; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px}
.twin-row .tw-type{color:var(--ink-3); font-size:10.5px}
.twin-row .tw-feed{color:var(--ink-3); font-size:10.5px; margin-left:auto}
.twin-row .tw-st{font-family:var(--mono); font-size:10px}
.twin-empty{padding:9px 8px; font-size:11.5px; color:var(--ink-3)}
/* active-firewall card accent (Configuration tab · vendor selector) */
.card.enf-active{border-color:color-mix(in srgb, var(--ok) 55%, var(--line)); box-shadow:inset 3px 0 0 var(--ok)}
.enf-vendorseg{margin-top:2px}
/* SOAR · Shuffle workflow registry rows */
.soar-wf-list{display:flex; flex-direction:column; gap:5px}
.soar-wf-row{display:flex; align-items:center; gap:9px; padding:5px 8px; background:var(--panel-2); border-radius:7px; font-size:11.5px}
.soar-wf-row b{color:var(--ink-1)}
.soar-wf-hook{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- body split ---------- */
.split{display:grid; grid-template-columns:288px 1fr; flex:1; min-height:0}
.rail{border-right:1px solid var(--line); background:var(--panel); overflow-y:auto; display:flex; flex-direction:column}
.rail-h{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 8px}
.rail-h span{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3)}
.add{font-size:11px; padding:4px 9px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink-2)}
.add:hover{border-color:var(--beacon); color:var(--ink)}

.src{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px;
  padding:11px 16px; border:none; border-left:2px solid transparent; background:transparent;
  width:100%; text-align:left; border-bottom:1px solid var(--line-soft)}
.src:hover{background:var(--panel-2)}
.src[aria-selected="true"]{background:var(--panel-2); border-left-color:var(--beacon)}
.src .dot{width:9px;height:9px;border-radius:50%}
.src .nm{display:flex; flex-direction:column; gap:1px; min-width:0}
.src .nm b{font-size:13px; font-weight:600}
.src .nm em{font-style:normal; font-size:10.5px; color:var(--ink-3); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.src canvas{width:52px; height:22px; opacity:.9}
.grp{font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); padding:15px 16px 6px; border-top:1px solid var(--line)}
.grp:first-child{border-top:none; padding-top:8px}

.rail-foot{margin-top:auto; padding:12px 16px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-3)}

/* ---------- main ---------- */
.main{overflow-y:auto; padding:0}
.mhead{display:flex; align-items:center; gap:14px; padding:16px 22px 0}
.mhead .tt{font-size:17px; font-weight:600}
.mhead .path{font-size:11px; color:var(--ink-3)}
.state-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px;
  font-size:11px; font-weight:600; letter-spacing:.03em; border:1px solid transparent}
.state-ok{color:var(--ok); background:var(--ok-dim); border-color:var(--ok-dim)}
.state-warn{color:var(--warn); background:var(--warn-dim); border-color:var(--warn-dim)}
.state-crit{color:var(--crit); background:var(--crit-dim); border-color:var(--crit-dim)}
.state-idle{color:var(--idle); background:transparent; border-color:var(--line)}

.tabs{display:flex; gap:2px; padding:14px 22px 0; border-bottom:1px solid var(--line)}
.tab{padding:9px 15px; font-size:12.5px; font-weight:500; color:var(--ink-3); background:transparent;
  border:none; border-bottom:2px solid transparent; margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--beacon)}
.tab:hover{color:var(--ink-2)}

.pane{padding:20px 22px 40px}
.pane[hidden]{display:none}

/* config */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 17px}
.card h3{margin:0 0 3px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.card .hint{font-size:11.5px; color:var(--ink-3); margin:0 0 14px}
/* jargon terms (STIX/TAXII) carry a native title tooltip; normalise the underline + help cursor
   across browsers so the dotted underline reads as "hover for the definition". */
abbr.tt{text-decoration:none; border-bottom:1px dotted currentColor; cursor:help}
/* alert "who → whom" connection panel (fire-time vs live) */
.ba-conn .conn-row{display:flex; align-items:baseline; gap:10px; margin:4px 0}
.ba-conn .conn-when{flex:0 0 52px; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3)}
.ba-conn .conn-list{display:flex; flex-wrap:wrap; gap:6px}
.ba-conn .conn-pair{font-family:var(--mono,monospace); font-size:12px; background:var(--line); padding:2px 8px; border-radius:4px; white-space:nowrap}
.ba-conn .conn-arw{color:var(--beacon); padding:0 2px}
.ba-conn .conn-note{font-size:11px; margin-top:2px}
/* alert causality DAG (attack progression): Observation → regime → entity → ATT&CK → response */
.dag-panel .dag-flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:4px; margin:2px 0 6px}
.dag-node{display:flex; flex-direction:column; gap:2px; padding:6px 11px; border-radius:6px;
  background:var(--panel,#121926); border:1px solid var(--line,#2a3648); min-width:96px}
.dag-node .dag-k{font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3,#63748c)}
.dag-node .dag-v{font-family:var(--mono,monospace); font-size:12.5px; color:var(--ink-1,#dfe7f2); font-weight:600}
.dag-arrow{align-self:center; color:var(--beacon,#4aa8ff); font-size:15px; padding:0 1px}
.dag-node.dag-crit{border-color:#43222a} .dag-node.dag-crit .dag-v{color:var(--crit,#ff4d5e)}
.dag-node.dag-warn{border-color:#40331f} .dag-node.dag-warn .dag-v{color:var(--warn,#ff9f43)}
.dag-node.dag-tech{border-color:#3a2b46} .dag-node.dag-tech .dag-v{color:#c58bff}
.dag-node.dag-act{border-color:#43222a} .dag-node.dag-act .dag-v{color:var(--crit,#ff4d5e)}
.dag-node.dag-obs .dag-v{color:var(--ink-2,#9fb0c4)}
.dag-panel .dag-note{font-size:11px; margin-top:2px}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:13px}
.field:last-child{margin-bottom:0}
.field label{font-size:11px; color:var(--ink-2); letter-spacing:.02em}
.field input,.field select{font-family:var(--mono); font-size:12.5px; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 11px}
.field input::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus{border-color:var(--beacon); outline:none; background:var(--raise)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.seg{display:flex; gap:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; width:max-content}
.seg button{padding:7px 14px; font-size:12px; background:var(--panel-2); border:none; color:var(--ink-3); border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"]{background:var(--beacon-dim); color:var(--ink)}

.toggle{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid var(--line-soft)}
.toggle:first-of-type{border-top:none}
.toggle .tx b{font-size:12.5px; font-weight:500; display:block}
.toggle .tx small{font-size:11px; color:var(--ink-3)}
.sw{width:38px;height:22px;border-radius:100px;background:var(--line);border:none;position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.sw[aria-pressed="true"]{background:var(--ok)}
.sw[aria-pressed="true"]::after{transform:translateX(16px)}

.mapping{font-family:var(--mono); font-size:12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden}
.mapping .mr{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line-soft)}
.mapping .mr:last-child{border-bottom:none}
.mapping .arw{color:var(--beacon)}
.mapping .src-f{color:var(--ink-2)} .mapping .ocsf-f{color:var(--ink)}

.actions{display:flex; gap:10px; margin-top:20px}
.btn{padding:10px 18px; font-size:13px; font-weight:600; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel-2); color:var(--ink)}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--beacon); border-color:var(--beacon); color:#fff}
.btn-primary:hover{filter:brightness(1.08)}

/* integrity monitoring */
.wave-card{grid-column:1/-1; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 17px 10px}
.wave-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px}
.wave-head h3{margin:0; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2)}
.wave-head .rt{font-size:11px; color:var(--ink-3)}
#wave{width:100%; height:132px; display:block}
.wave-legend{display:flex; gap:18px; font-size:11px; color:var(--ink-3); padding:8px 2px 2px}
.wave-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

.mtiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px}
.tile.alert{border-color:var(--crit); box-shadow:inset 3px 0 0 var(--crit)}
.tile.warnb{box-shadow:inset 3px 0 0 var(--warn)}
.tile .t{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.tile .n{font-size:21px; font-weight:600; font-family:var(--mono); font-variant-numeric:tabular-nums; margin:3px 0 1px}
.tile .d{font-size:11px; color:var(--ink-3)}
.spark{width:100%; height:26px; margin-top:6px; display:block}

.log{margin-top:20px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.log h3{margin:0; padding:13px 16px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); border-bottom:1px solid var(--line)}
.log table{width:100%; border-collapse:collapse; font-size:12px}
.log td{padding:9px 16px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.log tr:last-child td{border-bottom:none}
.log .ts{font-family:var(--mono); color:var(--ink-3); white-space:nowrap; width:1%}
.log .sev{width:1%; white-space:nowrap}
.chip{font-size:10px; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:4px; text-transform:uppercase}
.chip.ok{color:var(--ok); background:var(--ok-dim)} .chip.warn{color:var(--warn); background:var(--warn-dim)} .chip.crit{color:var(--crit); background:var(--crit-dim)}
.chip.dim{color:var(--ink-2); background:var(--panel-2)}

.uef{grid-column:1/-1; display:flex; align-items:center; gap:12px; padding:12px 16px; margin-top:18px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  border-left:3px solid var(--ok)}
.uef .ic{width:20px;height:20px;flex:none;color:var(--ok)}
.uef b{font-size:12.5px} .uef small{color:var(--ink-3); font-size:11.5px}

@media (max-width:1080px){.strip{grid-template-columns:repeat(3,1fr)}.mtiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.split{grid-template-columns:1fr}.rail{display:none}.grid2{grid-template-columns:1fr}.strip{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- administration ---------- */
.navitem{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 16px;
  background:transparent; border:none; border-left:2px solid transparent; color:var(--ink-2); font-size:13px; border-bottom:1px solid var(--line-soft)}
.navitem:hover{background:var(--panel-2); color:var(--ink)}
.navitem.on{background:var(--panel-2); border-left-color:var(--beacon); color:var(--ink)}
.navitem .ni-ic{width:16px;height:16px;flex:none;display:grid;place-items:center;color:var(--ink-3)}
.navitem.on .ni-ic{color:var(--beacon)}
.admin-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 22px 12px; flex-wrap:wrap}
.atitle{font-size:17px; font-weight:600}
.asub{font-size:12px; color:var(--ink-3); margin-top:2px}
.ahdr-actions{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.search{font-size:12.5px; font-family:var(--sans); color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 11px; min-width:170px}
.search:focus{outline:none; border-color:var(--beacon)}
.abody{padding:6px 22px 40px}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.atable{width:100%; border-collapse:collapse; font-size:12.5px; min-width:660px}
.atable th{text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.atable td{padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.atable tr:last-child td{border-bottom:none}
.atable .right{text-align:right}
.u{display:flex; align-items:center; gap:10px}
.u b{font-size:13px; font-weight:600; display:block}
.u small{font-size:11px; color:var(--ink-3)}
.avatar{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;font-family:var(--mono)}
.rolechip,.statuschip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap;display:inline-block}
.rolesel{font-size:12px;padding:4px 8px;border-radius:7px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-1);cursor:pointer}
.rolesel:hover{border-color:var(--ink-3)}
.rolesel:disabled{opacity:.5}
.rolechip{background:var(--beacon-dim);color:var(--beacon)}
.rolechip.svc{background:var(--panel-2);color:var(--ink-2);font-family:var(--mono)}
.statuschip.ok{background:var(--ok-dim);color:var(--ok)}
.statuschip.warn{background:var(--warn-dim);color:var(--warn)}
.statuschip.crit{background:var(--crit-dim);color:var(--crit)}
.rowbtn{background:transparent;border:1px solid transparent;border-radius:6px;color:var(--ink-3);padding:0 9px;font-size:18px;line-height:1.4}
.rowbtn:hover{border-color:var(--line);color:var(--ink)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);padding:2px 0 14px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.matrix{width:100%;border-collapse:collapse;font-size:12px;min-width:760px}
.matrix th{padding:10px 8px;text-align:center;font-size:11px;color:var(--ink-2);border-bottom:1px solid var(--line);white-space:nowrap}
.matrix th:first-child{text-align:left}
.matrix th .sys{display:block;font-size:9px;color:var(--ink-3);letter-spacing:.04em}
.matrix .pgroup td{padding:13px 12px 5px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border:none}
.matrix td.perm{padding:8px 12px;color:var(--ink);border-bottom:1px solid var(--line-soft);white-space:nowrap}
.matrix td.pc{text-align:center;border-bottom:1px solid var(--line-soft);padding:6px}
.pcell{min-width:62px;display:inline-block;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;user-select:none;border:1px solid transparent}
.pcell.allow{background:var(--ok-dim);color:var(--ok)}
.pcell.scoped{background:var(--warn-dim);color:var(--warn)}
.pcell.deny{background:transparent;color:var(--ink-3);border-color:var(--line)}
.pcell.lock{cursor:not-allowed;opacity:.7}
.pcell.lock{cursor:default}
.pcell.editable{cursor:pointer}
.pcell.editable:hover{border-color:var(--beacon);filter:brightness(1.15)}
.role-h{display:inline-flex;align-items:center;gap:5px;justify-content:center}
.role-h .rowbtn{padding:0 4px;font-size:11px}
.ro-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:var(--warn-dim);border:1px solid var(--warn);border-radius:6px;padding:3px 9px;margin-right:8px}
.acards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.acards{grid-template-columns:1fr}}

/* ---------- left menu ---------- */
.menu-sect{border-bottom:1px solid var(--line)}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px;background:transparent;border:none;border-left:2px solid transparent;color:var(--ink-2);font-size:13.5px;font-weight:500}
.menu-item:hover{background:var(--panel-2);color:var(--ink)}
.menu-item.on{color:var(--ink);border-left-color:var(--beacon)}
.menu-item .mi-ic{width:17px;height:17px;flex:none;display:grid;place-items:center;color:var(--ink-3)}
.menu-item.on .mi-ic{color:var(--beacon)}
.menu-item .chev{margin-left:auto;color:var(--ink-3);font-size:9px;transition:transform .15s}
.menu-item.open .chev{transform:rotate(90deg)}
.submenu{background:rgba(0,0,0,.14);border-top:1px solid var(--line-soft)}
:root[data-theme="light"] .submenu{background:rgba(0,0,0,.03)}
.subitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 16px 9px 44px;background:transparent;border:none;border-left:2px solid transparent;color:var(--ink-2);font-size:12.5px}
.subitem:hover{background:var(--panel-2);color:var(--ink)}
.subitem.on{background:var(--panel-2);border-left-color:var(--beacon);color:var(--ink)}
.submenu .grp{padding-left:24px}
.submenu .src{padding-left:24px}
.menu-item.logout,.menu-item.logout .mi-ic{color:var(--crit)}
.menu-item.logout:hover{background:var(--crit-dim)}

/* ---------- tenancy + audit ---------- */
.tenant{position:relative;margin-left:8px}
.tenant-btn{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:6px 11px 6px 7px;cursor:pointer;color:var(--ink)}
.tenant-btn:hover{border-color:var(--ink-3)}
.tenant-logo{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;font-family:var(--mono);flex:none}
.tenant-nm{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.tenant-nm b{font-size:12.5px}.tenant-nm small{font-size:10.5px;color:var(--ink-3)}
.tenant-chev{color:var(--ink-3);font-size:10px;margin-left:2px}
.tenant-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:238px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;z-index:60;box-shadow:0 14px 44px rgba(0,0,0,.45)}
.tenant-menu .th{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:7px 8px 5px}
.topt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;border-radius:7px;padding:8px;cursor:pointer;color:var(--ink)}
.topt:hover{background:var(--panel-2)}
.topt .tenant-logo{width:24px;height:24px;font-size:11px}
.topt b{font-size:13px;display:block}.topt small{color:var(--ink-3);font-size:11px;display:block}
.areachip{font-size:10px;font-weight:600;padding:2px 8px;border-radius:100px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.livebadge{font-size:11px;color:var(--ok);font-weight:600;display:inline-flex;align-items:center;gap:5px;margin-right:6px}
.livebadge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
.tenant.is-master .tenant-btn{border-color:var(--beacon);box-shadow:inset 0 0 0 1px var(--beacon)}
.orgchip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:100px;background:var(--beacon-dim);color:var(--beacon);white-space:nowrap}

/* ---------- login ---------- */
.login{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--ground)}
.login[hidden]{display:none}
.login-bg{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% -5%,rgba(77,101,255,.16),transparent 60%);pointer-events:none}
.login-card{position:relative;z-index:2;width:380px;max-width:92vw;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px 30px 24px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.login-brand b{font-size:15px;display:block;letter-spacing:-.01em}.login-brand span{font-size:11px;color:var(--ink-3)}
.login-card h2{font-size:18px;margin:0 0 16px;font-weight:600}
.login-card label{display:block;font-size:11px;color:var(--ink-2);letter-spacing:.02em;margin:13px 0 6px}
.login-card input{width:100%;font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:11px 12px}
.login-card input:focus{outline:none;border-color:var(--beacon)}
.login-btn{width:100%;justify-content:center;margin-top:22px;padding:12px}
.login-err{color:var(--crit);font-size:12.5px;margin-top:14px;background:var(--crit-dim);padding:9px 12px;border-radius:8px}
.login-foot{font-size:11.5px;color:var(--ink-3);margin-top:20px;line-height:1.5;text-align:center}
.login-sub{font-size:12.5px;color:var(--ink-2);margin:0 0 4px;line-height:1.5}
.otp-input{letter-spacing:.5em;font-size:20px !important;text-align:center}
.otp-demo{font-size:11px;color:var(--ink-3);margin-top:13px;text-align:center;font-family:var(--mono)}
.login-alt{background:none;border:none;color:var(--beacon);font-size:12px;margin-top:14px;cursor:pointer;padding:0}
.login-alt:hover{text-decoration:underline}

/* ---------- behavioral alerts ---------- */
.ba-list{display:flex;flex-direction:column;gap:12px;margin-top:18px;align-items:stretch;width:100%;box-sizing:border-box}
/* width/flex/transform here are DEFENSIVE, not decorative: alert rows have twice rendered
   progressively narrower down the list (a cumulative taper). align-self/min-width pin every
   row to the list's full width so no inherited flex-shrink, align-items or transform can
   narrow one row relative to its neighbours. If the taper returns despite this, the cause is
   DOM nesting rather than sizing -- _assertAlertsDom() in app.js reports that to the console. */
.ba-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;flex:0 0 auto;width:100%;min-width:100%;align-self:stretch;box-sizing:border-box;transform:none}
.ba-row.open{border-color:var(--ink-3)}
.ba-head{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;user-select:none;height:66px;box-sizing:border-box;flex:0 0 auto}
.ba-head:hover{background:var(--panel-2)}
.ba-score{font-family:var(--mono);font-size:16px;font-weight:700;padding:6px 10px;border-radius:8px;flex:none;min-width:52px;text-align:center}
.ba-score.crit{color:var(--crit);background:var(--crit-dim)}
.ba-score.warn{color:var(--warn);background:var(--warn-dim)}
.ba-score.ok{color:var(--idle);background:var(--panel-2)}
.ba-id{min-width:0;flex:1}
.ba-id b{font-size:14px;display:block}
.ba-id small{font-size:11.5px;color:var(--ink-3)}
.ba-status{font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.ba-dup{font-size:10.5px;font-weight:600;font-family:var(--mono);padding:2px 8px;border-radius:100px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap;flex:none}
.ba-time{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ba-chev{color:var(--ink-3);font-size:11px;transition:transform .15s}
.ba-row.open .ba-chev{transform:rotate(180deg)}
.ba-detail{border-top:1px solid var(--line-soft);padding:16px}
.ba-sum{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);max-width:90ch}
.ev-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:2px 0 12px}
.ev-k{font-size:12.5px;color:var(--ink-2)}
.ev-k b{color:var(--ink-1);font-weight:640}
.ba-viz{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:980px){.ba-viz{grid-template-columns:1fr}}
.ba-panel{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 14px}
.ba-panel h4{margin:0 0 10px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.ba-curve{width:100%;display:block}
.ba-legend{display:flex;gap:16px;font-size:10.5px;color:var(--ink-3);padding-top:9px;flex-wrap:wrap}
.ba-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.ba-dims{display:flex;flex-direction:column;gap:9px}
.ba-dim{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:10px}
.ba-dim-name{font-size:12px;color:var(--ink-2)}
.ba-bars{display:flex;flex-direction:column;gap:3px}
.ba-bar{height:7px;border-radius:3px;min-width:4px}
.ba-bar.base{background:var(--line)}
.ba-bar.now{background:var(--beacon)}
.ba-bar.now.bad{background:var(--crit)}
.ba-dim-val{font-size:11px;color:var(--ink-3);white-space:nowrap}
.ba-dim-val b{color:var(--ink)}
.ba-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.ba-empty{padding:26px;text-align:center;color:var(--ink-3);font-size:13px}
.ba-verdict{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ba-verdict-cur{font-size:12px;color:var(--ink-2);margin-bottom:9px}
.ba-verdict-cur .chip{margin:0 2px}
.ba-verdict-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.ba-verdict-reason{flex:1 1 220px;min-width:180px;font-size:12.5px;font-family:var(--sans);color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px}

/* ---------- audit window controls ---------- */
.aud-seg button{padding:7px 12px;font-size:12px;background:var(--panel-2);border:none;color:var(--ink-3);border-right:1px solid var(--line);cursor:pointer}
.aud-seg button:last-child{border-right:none}
.aud-seg button[aria-pressed="true"]{background:var(--beacon-dim);color:var(--ink)}
.aud-custom{display:inline-flex;align-items:center;gap:7px}
.aud-custom input[type="date"]{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;color-scheme:dark}
:root[data-theme="light"] .aud-custom input[type="date"]{color-scheme:light}
.aud-count{font-size:11.5px;padding:2px 2px 10px}
.ba-delta{font-size:11px;font-weight:700;flex:none;min-width:64px}
.ba-delta small{font-weight:400;color:var(--ink-3)}
.ba-delta.crit{color:var(--crit)} .ba-delta.warn{color:var(--warn)} .ba-delta.ok{color:var(--ok)}
.tile.clickable{cursor:pointer;text-align:left;font-family:inherit;color:inherit;transition:border-color .12s, transform .06s}
.tile.clickable:hover{border-color:var(--ink-3)}
.tile.clickable:active{transform:translateY(1px)}
/* active highlight uses each tile's own semantic color */
.tile.clickable.t-crit.active{border-color:var(--crit);box-shadow:inset 0 0 0 1px var(--crit),inset 3px 0 0 var(--crit)}
.tile.clickable.t-crit.active .t{color:var(--crit)}
.tile.clickable.t-warn.active{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn),inset 3px 0 0 var(--warn)}
.tile.clickable.t-warn.active .t{color:var(--warn)}
.tile.clickable.t-settled.active{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.tile.clickable.t-settled.active .t{color:var(--ok)}
.tile.clickable.t-sort.active{border-color:var(--beacon);box-shadow:inset 0 0 0 1px var(--beacon)}
.tile.clickable.t-sort.active .t{color:var(--beacon)}

/* ---------- Network · Active Inference panel ---------- */
.nai-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:14px}
@media(max-width:860px){.nai-grid{grid-template-columns:1fr}}
.nai-card{background:var(--panel,#111824);border:1px solid var(--line,#1d2733);border-radius:12px;padding:14px 16px}
.nai-card h4{margin:0 0 10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink,#e6edf3);opacity:.6}
#netaiWave{width:100%;display:block}
.nai-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;opacity:.72}
.nai-legend span{display:inline-flex;align-items:center;gap:6px;text-transform:capitalize}
.nai-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.nai-bars{display:flex;flex-direction:column;gap:9px}
.nai-bar{display:grid;grid-template-columns:60px 1fr 54px;align-items:center;gap:10px;font-size:12.5px}
.nai-bl{opacity:.7;text-transform:capitalize}
.nai-track{height:8px;border-radius:4px;background:var(--line,#1d2733);overflow:hidden}
.nai-track>i{display:block;height:100%;border-radius:4px;transition:width .3s ease}
.nai-bv{text-align:right}
.nai-efe{display:flex;flex-direction:column;gap:7px;font-size:13px}
.nai-efe>div{display:flex;justify-content:space-between;gap:12px}
.nai-efe>div.dim{justify-content:flex-start}
.nai-lh{margin:18px 0 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.nai-log{border:1px solid var(--line,#1d2733);border-radius:10px;overflow:hidden}
.nai-lrow{display:grid;grid-template-columns:54px 72px 54px 1fr auto;gap:12px;align-items:center;padding:8px 14px;border-top:1px solid var(--line,#1d2733);font-size:12.5px}
.nai-lrow:first-child{border-top:none}
.nai-lw{opacity:.65}
.nai-lp{text-align:right}
.nai-lig{text-align:right}
.nai-lr{text-align:right}

/* ---------- idle auto sign-out control ---------- */
.idle-field .idle-seg{margin:6px 0;flex-wrap:wrap}
.idle-custom{display:flex;gap:8px;align-items:center;margin-top:6px}
.idle-custom input{width:130px}
.idle-note{display:block;margin-top:6px;opacity:.65;font-size:12px}

/* ---------- per-protocol net-AI panel ---------- */
.nai-protogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:900px){.nai-protogrid{grid-template-columns:1fr}}
.nai-protogrid canvas.netaiWave{width:100%;display:block}
.nai-lrow2{display:grid;grid-template-columns:52px repeat(3,1fr);gap:12px;align-items:center;padding:8px 14px;border-top:1px solid var(--line,#1d2733);font-size:12.5px}
.nai-lrow2:first-child{border-top:none}
.nai-pchip{display:inline-flex;align-items:center;gap:8px}
.nai-pchip em{font-style:normal;opacity:.55;font-family:var(--mono,monospace);font-size:11px;min-width:34px}
.nai-pchip .chip{min-width:58px;text-align:center}

/* ---------- net-AI drill-in ---------- */
.nai-drillhint{font-size:11px;opacity:.5;margin-top:8px}
.tile.clickable.active .nai-drillhint{opacity:.85}
.nai-drill{border:1px solid var(--line,#1d2733);border-radius:14px;margin-top:14px;overflow:hidden;background:var(--panel-2,#0d131c)}
.nai-drill-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line,#1d2733)}
.nai-drill-head button{margin-left:auto}
.nai-drill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 16px}
@media(max-width:900px){.nai-drill-grid{grid-template-columns:1fr}}
.nai-drill-grid .nai-card{background:var(--panel,#111824)}
.nai-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.nai-tbl th{text-align:left;font-weight:500;opacity:.5;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px 6px}
.nai-tbl td{padding:4px 6px;border-top:1px solid var(--line,#1d2733)}
.nai-recrow td{background:rgba(52,211,153,.06)}
.nai-tt .nai-ttc{text-align:right;opacity:.7}
.nai-feat{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.nai-feat>div{display:flex;justify-content:space-between;gap:12px}
.nai-feat>div span{opacity:.6}
/* belief state carries a why-tooltip (beliefStateWhy in app.js). The dotted label + help cursor
   ARE the feature: an explanation with no affordance is undiscoverable, which is the same defect
   class as a panel that renders below the fold — built, correct, and never found. */
.nai-feat>div.bs-why{cursor:help}
.nai-feat>div.bs-why>span{border-bottom:1px dotted currentColor;opacity:.75}
.nai-card-wide{grid-column:span 2}
@media(max-width:900px){.nai-card-wide{grid-column:auto}}
.nai-tt td:first-child{word-break:break-all}

/* ---------- net-AI entity views (protocol / host federation) ---------- */
.nai-viewseg{margin-right:10px}
.nai-fedhead{font-size:12px;margin-top:4px}
.nai-hosttiles{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.tile.nai-stale{opacity:.5}

/* ---------- net-AI time-window / history ---------- */
.nai-rangeseg{margin-right:10px}
.nai-histgrid{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.nai-histrow{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px}
.nai-histlabel{font-size:12px;opacity:.7;font-family:var(--mono,monospace)}
canvas.netaiHist{width:100%;display:block;border-radius:4px}
.nai-lrow2b{display:grid;grid-template-columns:90px 60px 1fr auto;gap:12px;align-items:center;padding:7px 14px;border-top:1px solid var(--line,#1d2733);font-size:12.5px}
.nai-lrow2b:first-child{border-top:none}
.nai-srcseg{margin-right:10px}
.nai-srcseg button[aria-pressed="true"]{font-weight:600}

/* ---------- net-AI streamlined layout ---------- */
.nai-summary .tile .n{font-size:22px}
.nai-summary .nai-busy{font-size:16px;font-family:var(--mono,monospace)}
.nai-tabs{display:flex;gap:4px;margin:16px 0 10px;border-bottom:1px solid var(--line,#1d2733)}
.nai-tabs button{background:none;border:none;color:var(--ink,#e6edf3);opacity:.55;padding:8px 14px;font-size:13.5px;cursor:pointer;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:7px}
.nai-tabs button:hover{opacity:.8}
.nai-tabs button.on{opacity:1;border-bottom-color:var(--beacon,#22d3ee)}
.nai-tabn{font-size:11px;font-family:var(--mono,monospace);opacity:.6;background:var(--line,#1d2733);border-radius:999px;padding:1px 7px}
.nai-twins{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.nai-twin .t{font-size:12.5px}
.nai-twin .n{text-transform:capitalize;font-weight:600}
.tile.nai-twin.active{outline:2px solid var(--beacon,#22d3ee);outline-offset:-2px}
#netaiDrillWave{width:100%;display:block}

/* ---------- net-AI multi-feed + sortable table ---------- */
.nai-feeds{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:6px}
.nai-feed .nai-feedif{font-size:15px;font-family:var(--mono,monospace)}
.nai-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
.nai-dot.live{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.15)}
.nai-dot.idle{background:#fbbf24}
.nai-dot.offline{background:#6b7280}
.nai-tablewrap{overflow-x:auto;border:1px solid var(--line,#1d2733);border-radius:12px;margin-top:8px}
.nai-mtable{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.nai-mtable thead th{position:sticky;top:0;background:var(--panel-2,#0d131c);text-align:left;padding:9px 12px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink,#e6edf3);opacity:.6;border-bottom:1px solid var(--line,#1d2733)}
.nai-mtable th.nai-sortable{cursor:pointer;user-select:none;white-space:nowrap}
.nai-mtable th.nai-sortable:hover{opacity:.9}
.nai-mtable th.on{opacity:1;color:var(--beacon,#22d3ee)}
.nai-mtable td{padding:8px 12px;border-top:1px solid var(--line,#1d2733)}
.nai-mtable tbody tr{cursor:pointer}
.nai-mtable tbody tr:hover{background:rgba(255,255,255,.03)}
.nai-trow.nai-threat td{background:rgba(251,146,60,.07)}
.nai-trow.on td{background:rgba(34,211,238,.10)}
.nai-reg{font-size:13px}
/* Entropy screen (per-host table reuses .nai-mtable/.nai-tablewrap wholesale) — rows aren't
   clickable here (no row drill-in), so undo the shared table's pointer cursor + hover tint. */
.ent-table tbody tr{cursor:default}
.ent-table tbody tr:hover{background:none}
.ent-cell{display:flex;flex-direction:column;gap:2px;font-size:11.5px;line-height:1.4}
.ent-cell .chip{align-self:flex-start;margin-top:1px}
.nai-histfeed{margin-top:14px}

/* ---------- net-AI history time axis + packet drill ---------- */
.nai-axisrow{margin-bottom:2px}
.nai-axis{position:relative;height:14px}
.nai-tick{position:absolute;top:0;transform:translateX(-50%);font-size:10px;font-family:var(--mono,monospace);opacity:.55;white-space:nowrap}
.nai-tick:first-child{transform:translateX(0)}
.nai-tick:last-child{transform:translateX(-100%)}
canvas.netaiHist{cursor:crosshair}
.nai-pktdrill{margin-top:14px}
.nai-pktlist{max-height:340px;overflow:auto;padding:6px 10px;font-size:12px;line-height:1.5}
.nai-pktln{white-space:pre-wrap;word-break:break-all;padding:1px 0;border-bottom:1px solid rgba(255,255,255,.03)}

/* ---------- reporting-spec: surprise / free-energy / model-integrity ---------- */
.nai-hi{color:#fb923c;font-weight:600}
.nai-tracebtn{margin-left:auto;font-size:11px;padding:3px 10px}
.nai-drill-head .nai-tracebtn+.rowbtn{margin-left:8px}
/* Task 6 (Phase B): historical surprise timeline canvas — same full-width/block idiom as the other
   per-screen canvases above (.ba-curve/.netaiHist/#netaiDrillWave) */
#surpTimelineCanvas{width:100%;display:block}

/* ---------- credible intervals + forecast ---------- */
.nai-track{position:relative}
.nai-ci{position:absolute;top:50%;transform:translateY(-50%);height:2px;background:rgba(255,255,255,.55);border-left:1px solid rgba(255,255,255,.7);border-right:1px solid rgba(255,255,255,.7);box-sizing:border-box;pointer-events:none}
.nai-fc{display:flex;flex-direction:column;gap:5px}
.nai-fcrow{display:grid;grid-template-columns:28px 1fr 96px;align-items:center;gap:8px;font-size:12px}
.nai-fck{opacity:.6}
.nai-fctrack{position:relative;height:10px;background:var(--line,#1d2733);border-radius:5px}
.nai-fcband{position:absolute;top:0;bottom:0;background:rgba(251,146,60,.35);border-radius:5px}
.nai-fcpt{position:absolute;top:-1px;width:2px;height:12px;background:#fb923c;transform:translateX(-1px)}
.nai-fcv{text-align:right}

/* ---------- Consensus Topos (Engine 3) ---------- */
.cx-strip{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;margin-bottom:14px}
.cx-gauge{display:flex;flex-direction:column;align-items:center;padding-right:20px;border-right:1px solid var(--line)}
.cx-gnum{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.cx-gnum.ok{color:var(--ok)} .cx-gnum.warn{color:var(--warn)} .cx-gnum.crit{color:var(--crit)}
.cx-glbl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.cx-stat{display:flex;flex-direction:column;gap:2px}
.cx-stat b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.cx-stat b.ok{color:var(--ok)} .cx-stat b.crit{color:var(--crit)}
.cx-stat span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cx-cells{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.cx-cell{font-family:var(--mono);font-size:11.5px;padding:5px 10px;border-radius:100px;border:1px solid var(--line)}
.cx-cell.on{color:var(--ink-2);background:var(--panel-2)}
.cx-cell.on::before{content:"●";color:var(--ok);margin-right:6px;font-size:9px}
.cx-cell.off{color:var(--crit);background:var(--crit-dim);border-color:transparent}
.cx-cell.off::before{content:"●";color:var(--crit);margin-right:6px;font-size:9px}
.cx-obs{background:var(--crit-dim);border:1px solid var(--crit);border-radius:var(--r);padding:13px 16px;margin-bottom:14px}
.cx-obs h4{margin:0 0 10px;font-size:12px;color:var(--crit);letter-spacing:.02em}
.cx-obrow{display:flex;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--crit-dim);cursor:pointer}
.cx-obrow:first-of-type{border-top:none}
.cx-obl{font-family:var(--mono);font-size:12.5px;color:var(--ink);min-width:150px}
.cx-obv{font-size:12.5px;color:var(--ink-2);flex:1} .cx-x{color:var(--crit);margin:0 4px;font-weight:700}
.cx-obj{font-family:var(--mono);font-size:12px;color:var(--crit);font-variant-numeric:tabular-nums}
.cx-allglued{background:var(--ok-dim);border:1px solid var(--ok);border-radius:var(--r);padding:12px 16px;margin-bottom:14px;font-size:13px;color:var(--ok)}
.cx-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cx-table th{text-align:left;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line)}
.cx-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:middle}
.cx-row{cursor:pointer} .cx-row:hover{background:var(--panel-2)} .cx-row.on{background:var(--beacon-dim)}
.cx-num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.cx-badge{font-size:10.5px;padding:3px 9px;border-radius:100px;font-weight:600}
.cx-badge.ok{color:var(--ok);background:var(--ok-dim)} .cx-badge.crit{color:var(--crit);background:var(--crit-dim)}
.cx-bar{display:inline-flex;width:88px;height:9px;border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:7px;background:var(--panel-2);border:1px solid var(--line)}
.cx-seg{height:100%;display:inline-block}
.cx-drilld .cx-drow{display:flex;align-items:center;gap:12px;padding:7px 0}
.cx-dname{font-family:var(--mono);font-size:12px;color:var(--ink-2);min-width:130px}
.cx-drilld .cx-bar{width:180px;height:12px}
.cx-dmap{font-size:12.5px} .cx-dprec{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.cx-dsep{height:1px;background:var(--line);margin:6px 0}
.cx-noglue{font-size:12.5px;color:var(--crit)}
.cx-legend{display:flex;gap:16px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--ink-3)}
.cx-legend span{display:inline-flex;align-items:center;gap:5px}
.cx-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* ---------- admin: create-user form ---------- */
.newuser-form{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.nu-grid{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nu-grid .search{min-width:150px}
.nu-grid select.search{cursor:pointer}
.nu-err{color:var(--crit);font-size:12.5px;margin-top:10px}

/* ---------- Governance · Control Gate (Engine 4) ---------- */
.gate-badge{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 10px;border-radius:100px;display:inline-block}
.gate-badge.admit{color:var(--ok);background:var(--ok-dim)}
.gate-badge.review{color:var(--warn);background:var(--warn-dim)}
.gate-badge.block{color:var(--crit);background:var(--crit-dim)}
.gate-pred{font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:4px;border:1px solid var(--line);color:var(--ink-2)}
.gate-pred.block{color:var(--crit);border-color:var(--crit)}
.gate-pred.review{color:var(--warn);border-color:var(--warn)}
.gate-pred.admit{color:var(--ok);border-color:transparent;background:var(--ok-dim)}
.gate-rat{font-size:11.5px;min-width:220px}
.gate-reason{color:var(--ink-2);margin-top:4px;font-size:11.5px}
.gate-proof{margin-top:5px;font-size:11.5px;color:var(--crit);background:var(--crit-dim);border-radius:6px;padding:5px 8px}
.gate-proof b{font-family:var(--mono)}
.gate-testresult{margin-top:12px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2)}
.gate-testresult.block{border-color:var(--crit)} .gate-testresult.review{border-color:var(--warn)} .gate-testresult.admit{border-color:var(--ok)}
.gate-tr-head{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.gate-tr-head b{font-family:var(--mono)}

/* ---------- Factor Graph (VFG viz) ---------- */
.fg-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px 6px;margin-bottom:14px}
.fg-svg{width:100%;height:auto;max-height:455px;display:block}
.fg-var{fill:var(--panel-2);stroke:var(--line)}
.fg-var-s{stroke:var(--beacon);stroke-width:1.5}
.fg-t{fill:var(--ink-2);font-size:11px;font-weight:600}
.fg-l{fill:var(--ink-2);font-size:11px}
.fg-l.fg-h{fill:var(--ink);font-weight:700}
.fg-v{fill:var(--ink-3);font-size:10px;font-family:var(--mono)}
.fg-track{fill:var(--ground);stroke:var(--line)}
.fg-fac{fill:var(--raise);stroke:var(--line)}
.fg-fac.on{fill:var(--beacon-dim);stroke:var(--beacon)}
.fg-fl{fill:var(--ink);font-size:14px;font-weight:700;font-family:var(--mono)}
.fg-edge{stroke:var(--line);stroke-width:1.5}
.fg-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);padding:4px 2px 2px}
.fg-legend span{display:inline-flex;align-items:center;gap:5px}
.fg-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.fg-cols{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}
@media (max-width:900px){.fg-cols{grid-template-columns:1fr}}
.fg-mwrap{overflow-x:auto}
.fg-mtx{width:100%;border-collapse:collapse;font-size:11.5px;font-variant-numeric:tabular-nums}
.fg-mtx th{font-size:10px;color:var(--ink-3);font-weight:600;padding:4px 5px;text-align:center;white-space:nowrap}
.fg-mtx td{padding:5px 6px;text-align:center;color:var(--ink);border:1px solid var(--panel)}
.fg-mtx .fg-rl{text-align:right;color:var(--ink-2);background:none;font-weight:600;white-space:nowrap}
.fg-crow{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px}
.fg-crow .fg-rl{min-width:72px;color:var(--ink-2)}
.fg-cbar{flex:1;height:11px;background:var(--panel-2);border:1px solid var(--line);border-radius:3px;display:flex;overflow:hidden}
.fg-cbar i{height:100%;display:block;border-radius:2px}
.fg-crow .fg-v{min-width:44px;text-align:right;font-family:var(--mono);color:var(--ink)}
.fg-odd{border-color:var(--crit)!important;box-shadow:0 0 0 1px var(--crit) inset}
.fg-stat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.fg-s{font-size:12px;color:var(--ink-3)} .fg-s b{color:var(--ink);font-family:var(--mono)}
.fg-explain{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:2px 0 10px}
.fg-rblock{font-size:11.5px;color:var(--ink-3);margin:7px 0}
.fg-chip{display:inline-block;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid var(--line);margin:2px 3px 0 0;color:var(--ink-2)}
.fg-chip b{color:var(--ink);font-family:var(--mono)}
.fg-rangeseg{margin-right:8px}
.fg-banner{font-size:11.5px;color:var(--ink-3);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:4px 10px;margin:2px 2px 6px;display:inline-block}

/* ---------- Frameworks (ATT&CK × NIST CSF crosswalk) ---------- */
.fw-summary{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch;margin:0 0 14px}
.fw-sum-block{flex:1 1 340px;min-width:280px}
.fw-sum-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fw-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.fw-pill{font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);color:var(--ink-3);background:var(--panel-2)}
.fw-pill.has{color:var(--ink-2);border-color:var(--ink-3)}
.fw-pill.on{color:#37d39a;border-color:#37d39a;background:rgba(55,211,154,.12)}
.fw-pill.gap{opacity:.55;border-style:dashed}
.fw-pill b{font-weight:640}
.fw-sum-tiles{display:flex;gap:10px}
.fw-tile{border:1px solid var(--line);border-radius:10px;padding:10px 16px;background:var(--panel-2);min-width:130px}
.fw-tile .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fw-tile .v{font-size:22px;font-weight:600;font-family:var(--mono);margin-top:3px}
.fw-tile .v small{font-size:12px;color:var(--ink-3);font-weight:400}
.fw-tile .v.hot{color:var(--warn)}
.fw-graphwrap{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#0b1322,#070c17);padding:8px;overflow-x:auto}
.fw-svg{width:100%;height:auto;max-height:540px;display:block;min-width:800px}
.fw-colh{fill:var(--ink-3);font-size:10.5px;letter-spacing:.12em;font-weight:600}
.fw-nl{font-size:11.5px;font-weight:600}
.fw-ns{font-size:9.5px;fill:var(--ink-2)}
.fw-node{cursor:pointer}
.fw-node:hover rect{stroke-opacity:1;stroke-width:2.2}
.fw-detail{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-top:12px;background:var(--panel-2);font-size:12.5px}
.fw-detail.dim{color:var(--ink-3)}
.fw-d-h{display:flex;align-items:center;gap:9px;font-size:14px}
.fw-d-desc{color:var(--ink-2);margin:7px 0 9px;line-height:1.45}
.fw-d-row{display:flex;gap:12px;padding:4px 0;border-top:1px solid var(--line)}
.fw-d-row span{color:var(--ink-3);min-width:110px;font-size:11.5px}
.fw-d-row b{color:var(--ink-1)}
.fw-d-live{margin-top:9px;font-size:11.5px;color:var(--beacon)}
.fw-chip{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:5px;border:1px solid var(--line);color:var(--ink-2)}
.fw-chip.tech{color:#fb7185;border-color:#fb7185}
.fw-chip.csf{color:#37d39a;border-color:#37d39a}
.fw-chip.gate{color:#8b9bff;border-color:#8b9bff}
.fw-chip.alert{color:var(--warn);border-color:var(--warn)}
.fw-chip.consensus{color:#a78bfa;border-color:#a78bfa}
.fw-chip.regime{color:var(--warn);border-color:var(--warn)}
.fw-live-dot{color:#37d39a;font-size:11px;font-weight:600}
.fw-stepctl{display:inline-flex;align-items:center;gap:4px;margin-left:8px}
.fw-stepn{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-left:6px;min-width:44px;text-align:center}
.fw-step{border:1px solid var(--beacon);border-radius:11px;padding:15px 17px;margin-top:12px;background:linear-gradient(180deg,rgba(90,109,255,.08),var(--panel-2))}
.fw-step-h{display:flex;align-items:center;gap:9px;font-size:15px}
.fw-step-desc{color:var(--ink-2);margin:8px 0 12px;line-height:1.5;font-size:13px;max-width:95ch}
.fw-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fw-step-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.fw-step-v{font-size:13px;color:var(--ink-1);line-height:1.7}
.fw-step-ev{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.fw-step-ev b{color:var(--ink-1)}
@media (max-width:760px){.fw-step-grid{grid-template-columns:1fr}}
/* factor-graph spider/radar */
.fg-ring{fill:none;stroke:var(--line);stroke-width:1}
.fg-axis{stroke:var(--line-soft);stroke-width:1}
.fg-axlbl{font-size:11px;font-weight:600}
.fg-poly-base{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 3}
.fg-poly-other{fill:none;stroke:var(--ink-3);stroke-width:1;opacity:.22}
.fg-poly-cur{stroke-width:2}
.fg-viewseg{margin-right:8px}
.fg-legend .fg-lg-base{background:none!important;width:14px!important;height:0!important;border-top:2px dashed var(--ink-3);border-radius:0}
.fg-legend .fg-lg-other{background:var(--ink-3);opacity:.4}

.fg-refresh{margin-left:8px}
.nai-subitem{font-weight:600;display:flex;align-items:center}
.nai-livedot{width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:7px;flex:0 0 auto}
/* factor-graph spider + PCA scatter side by side */
.fg-spider-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.fg-vpanel{flex:1 1 300px;min-width:280px}
.fg-vh{font-size:11px;color:var(--ink-3);letter-spacing:.02em;padding:2px 2px 5px;text-align:center}
.fg-scatter{max-height:330px}
.fg-scatter-lbl{font-size:9.5px;fill:var(--ink-2);font-family:var(--mono)}
.fg-pclbl{font-size:10px;fill:var(--ink-3)}
.fg-legend .fg-lg-outlier{background:transparent;border:2px solid #f87171;border-radius:50%;width:10px!important;height:10px!important}
.ing-sync-btn{align-self:center;height:fit-content;margin-left:auto;white-space:nowrap}
/* per-workspace login protection */
.orgsec-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line-soft)}
.orgsec-nm{min-width:130px;font-weight:600;font-size:13px;color:var(--ink-1)}
.orgsec-row label{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.orgsec-in{width:74px}
/* password field with show/hide + generate */
.pw-field{display:flex;align-items:center;gap:6px}
.pw-field>.search{flex:1;min-width:0}
.pw-eye{background:transparent;border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:4px 8px;font-size:13px;opacity:.65;line-height:1}
.pw-eye:hover,.pw-eye.on{opacity:1;border-color:var(--ink-3)}
.pw-gen{white-space:nowrap;padding:5px 9px}
.pw-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pw-row .pw-field{flex:1 1 280px}
.reset-head{font-size:13px;color:var(--ink-1);margin-bottom:8px}
/* user management actions + self-MFA */
.user-actions{display:inline-flex;gap:4px;justify-content:flex-end;align-items:center}
.rowbtn.danger:hover{color:var(--crit);border-color:var(--crit)}
.mfa-row{display:flex;gap:10px;align-items:baseline;margin:6px 0;font-size:12px}
.mfa-row code{background:var(--ground);border:1px solid var(--line);border-radius:5px;padding:3px 7px;word-break:break-all;color:var(--ink-1)}
.mfa-uri{font-size:10.5px}
/* Systems tab — embedded Prometheus observability */
.prom-card{margin-top:14px}
.prom-card h3{display:flex;align-items:center;gap:8px}
.prom-asof{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:400}
.prom-group{margin:10px 0}
.prom-gh{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:6px}
.prom-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.prom-tile{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.prom-tile .pt-l{font-size:11px;color:var(--ink-3);margin-bottom:3px}
.prom-tile .pt-v{font-size:19px;font-weight:600;color:var(--ink-1);font-family:var(--mono)}
.prom-tile.warnb{border-color:var(--warn)} .prom-tile.warnb .pt-v{color:var(--warn)}
.prom-tile.alert{border-color:var(--crit)} .prom-tile.alert .pt-v{color:var(--crit)}
.prom-tile.ok .pt-v{color:var(--ok)} .prom-tile.warn .pt-v{color:var(--warn)}
.prom-sparks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.prom-sparkcard{background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.prom-sparkcard .pt-l{font-size:11px;color:var(--ink-3);margin-bottom:6px}
.prom-spark{width:100%;height:40px;display:block}
.prom-spark-empty{font-size:11px;padding:12px 0}
/* Ingestion catalog — tile layout of connection types */
.conn-group{margin-bottom:22px}
.conn-grp-h{display:flex;align-items:center;gap:9px;margin:0 0 11px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.conn-grp-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--pv,var(--line)),transparent);opacity:.5}
.conn-grp-mark{display:inline-flex;align-items:center}
.conn-grp-n{flex:0 0 auto;order:1;font-family:var(--mono,monospace);font-size:11px;color:var(--ink-3);background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:1px 8px;text-transform:none;letter-spacing:0}
.conn-tile.prov-aws{border-left:3px solid #ff9900}
.conn-tile.prov-gcp{border-left:3px solid #4285f4}
.conn-tile.prov-azure{border-left:3px solid #38a3ff}
.conn-tile.prov-aws:hover{border-color:#ff9900}
.conn-tile.prov-gcp:hover{border-color:#4285f4}
.conn-tile.prov-azure:hover{border-color:#38a3ff}
.conn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.conn-tile{text-align:left;display:flex;align-items:flex-start;gap:13px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer;position:relative;transition:border-color .12s,transform .12s,box-shadow .12s}
.conn-tile:hover{border-color:var(--beacon);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.conn-ic{flex:0 0 auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--ground);color:var(--beacon)}
.conn-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.conn-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.conn-h b{font-size:15px;color:var(--ink-1)}
.conn-d{font-size:12px;line-height:1.45}
.conn-meta{font-size:10.5px;color:var(--ink-2)}
.conn-go{position:absolute;right:14px;bottom:12px;font-size:11px;color:var(--beacon);opacity:0;transition:opacity .12s}
.conn-tile:hover .conn-go{opacity:1}
/* setup wizard */
.ing-steps{display:flex;align-items:center;gap:2px;margin-bottom:14px;flex-wrap:wrap}
.ing-step{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:none;background:transparent;color:var(--ink-3);font-size:12.5px;cursor:pointer;border-radius:7px}
.ing-step .ing-num{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);font-size:11px}
.ing-step.on{color:var(--ink-1);font-weight:600}
.ing-step.on .ing-num{background:var(--beacon);border-color:var(--beacon);color:#fff}
.ing-step.done .ing-num{background:var(--ok);border-color:var(--ok);color:#fff}
.ing-sep{width:20px;height:1px;background:var(--line)}
.ing-card{max-width:640px}
.ing-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.ing-field label{font-size:11px;color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase}
.ing-field small{font-size:11px}
.ing-maprow{display:grid;grid-template-columns:1fr auto 1.4fr;align-items:center;gap:10px;margin-bottom:8px}
.ing-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.ing-verify-actions{display:flex;align-items:center;gap:12px;margin:12px 0}
.ing-test-res{font-size:12px}
.ing-test-res.ok{color:var(--ok)} .ing-test-res.bad{color:var(--crit)}
.ing-curl{background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:11px 13px;font-size:11px;font-family:var(--mono);color:var(--ink-2);overflow-x:auto;margin:10px 0;white-space:pre}
.ing-note{font-size:12px;color:var(--ink-2);background:var(--ground);border-left:3px solid var(--line);padding:9px 12px;border-radius:6px;margin-top:10px}
.ing-note.ok{border-left-color:var(--ok)}
.as-info{display:flex;flex-direction:column;gap:5px;margin:6px 0}
.as-info-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:5px 0;border-top:1px solid var(--line-soft)}
.as-info-row b{color:var(--ink-2)}
/* connection graph — square window, round arena inside */
.fg-obsquare{width:100%;max-width:400px;aspect-ratio:1/1;margin:0 auto;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fg-obsquare .fg-svg{width:100%;height:100%;max-height:none}
.fg-obsquare-big{max-width:none;width:min(74vh,660px);height:min(74vh,660px)}
.fg-obsidian{background:transparent;cursor:grab;touch-action:none}
.fg-obsidian:active{cursor:grabbing}
.fg-ob-arena{fill:var(--ground)}
.fg-ob-ring{fill:none;stroke:var(--line-soft);stroke-width:1;opacity:.45}
.fg-zoom{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.fg-cgfilter{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle}
.fg-pfbtn{height:20px;padding:0 8px;line-height:1;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);border-radius:5px;font-size:10.5px;letter-spacing:.02em;cursor:pointer;font-family:var(--mono)}
.fg-pfbtn:hover{color:var(--ink-1);border-color:var(--ink-3)}
.fg-pfbtn.on{background:var(--beacon);color:#fff;border-color:var(--beacon)}
.fg-zbtn{width:20px;height:20px;line-height:1;padding:0;border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);border-radius:5px;font-size:13px;cursor:pointer;font-family:var(--mono)}
.fg-zbtn:hover{color:var(--ink-1);border-color:var(--ink-3)}
.fg-ob-g{cursor:pointer}
.fg-ob-node{cursor:pointer;transition:filter .1s}
.fg-ob-g:hover .fg-ob-node{filter:brightness(1.35)}
.fg-ob-lbl{font-size:9.5px;fill:var(--ink-2);font-family:var(--mono)}
.fg-ob-lbl-c{font-size:11px;fill:var(--ink-1);font-weight:600}
.fg-cg-lbl{fill:#fff;font-size:10px;font-weight:700;pointer-events:none}
.fg-3dmount{width:100%;height:100%;display:block}
.fg-zbtn.on{background:var(--beacon);color:#fff;border-color:var(--beacon)}
.btn.on{background:var(--beacon);color:#fff;border-color:var(--beacon)}
/* connection detail readout */
.fg-conn{margin-top:8px;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12px}
.fg-conn-h{margin-bottom:6px}
.fg-conn-sub{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin:4px 0 3px}
.fg-conn-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0;font-size:11.5px}
.fg-conn-meta{margin-top:5px;font-size:11.5px;color:var(--ink-2)}
/* pop-out overlay */
#fgPop{position:fixed;inset:0;z-index:900;background:rgba(4,6,12,.74);display:none;align-items:center;justify-content:center;padding:20px}
.fgpop-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;width:min(94vw,860px);max-height:94vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.fgpop-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fgpop-title{font-size:14px;font-weight:600;color:var(--ink-1)}
.fgpop-close{margin-left:auto;width:26px;height:26px;font-size:14px}
.fg-ob-big{max-height:none;height:min(72vh,680px)}

/* ---- Observability · Performance profile ---- */
.perf-corelbl{font-size:11px;color:var(--ink-2);letter-spacing:.04em;margin:14px 0 8px}
.perf-hb{display:grid;grid-template-columns:132px 1fr 44px;gap:10px;align-items:center;margin:6px 0;font-size:12px}
.perf-n{color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
.perf-track{position:relative;height:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.perf-track>i{display:block;height:100%;border-radius:4px}
.perf-core{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--warn);opacity:.55}
.perf-val{text-align:right;color:var(--ink-1);font-weight:600;font-family:var(--mono)}
.perf-chartwrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:4px}
.perf-chart{flex:1;min-width:280px;max-width:100%;height:auto}
.perf-legend{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--ink-2);min-width:120px}
.perf-legend div{display:flex;align-items:center;gap:8px}
.perf-legend i{width:14px;height:3px;border-radius:2px;flex:none}
.perf-bar{height:7px;min-width:90px;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.perf-bar>i{display:block;height:100%;border-radius:3px}
.perf-table td .dim{font-size:10.5px;margin-top:1px}
.perf-find{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.perf-find:last-child{border-bottom:none}
.perf-rank{width:23px;height:23px;flex:none;border-radius:6px;display:grid;place-items:center;font-weight:700;
  font-size:12px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-1);font-family:var(--mono)}
.perf-ft{color:var(--ink-1);font-size:12.5px}
.perf-tag{font-size:9px;letter-spacing:.1em;padding:1.5px 6px;border-radius:4px;margin-left:6px;
  text-transform:uppercase;border:1px solid currentColor;vertical-align:middle}

/* Model-evidence KPI: learned value dimmer/secondary to the live value */
.me-learned{color:var(--ink-2)}
.me-learned small{color:var(--ink-3)}

/* Observability refresh control (.ahdr-actions already flex+gap at :209) */
.obs-asof{font-size:11px;white-space:nowrap}
.obs-refresh .ref-ic{display:inline-block}
.obs-refresh.spinning .ref-ic{animation:refspin .7s linear infinite}
@keyframes refspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.obs-refresh.spinning .ref-ic{animation:none}}

/* Battle Space matrix */
.bs-viewseg{margin-right:8px}
.bs-wrap{overflow-x:auto;padding-bottom:8px}
.bs-grid{display:flex;gap:6px;min-width:1600px}
.bs-grid.bs-compact{min-width:0}
.bs-col{flex:1;min-width:96px}
.bs-tactic{font-weight:600;font-size:11px;padding:4px;border-bottom:1px solid var(--line,#2a3140);margin-bottom:4px;white-space:nowrap}
.bs-cell{font-size:10px;padding:3px 4px;margin:2px 0;border-radius:3px;border:1px solid transparent;cursor:pointer;display:flex;justify-content:space-between;gap:4px}
.bs-dim{opacity:.28}
.bs-detect{opacity:.6;border-color:#2a3140}
.bs-active{opacity:1;border-color:currentColor}
.bs-crit{color:#ff5d5d;background:rgba(255,93,93,.12)}
.bs-warn{color:#ffb020;background:rgba(255,176,32,.10)}
.bs-watch{color:#58a6ff;background:rgba(88,166,255,.10)}
.bs-n{font-weight:700}
/* Cross-host spread per-cell indicator (task-6 §3) — a small badge on a technique cell whose
   service/port maps to a GET /entropy connection type (see BS_SPREAD_TID/bsSpreadHint). Neutral by
   default; "-hot" (spread.n < 0.6, i.e. concentrated rather than uniform) picks up a warn tint since
   that's the interesting end — a directed conversation, not broadcast noise. */
.bs-spread{font-size:9px;font-family:var(--mono,monospace);opacity:.65;white-space:nowrap}
.bs-spread-hot{opacity:1;color:var(--warn,#ffb020);font-weight:600}
.bs-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-panel{margin-top:10px;margin-bottom:12px}
/* The drill-in renders ABOVE the matrix: the grid is ~1000px tall, so a panel below it opened
   off-screen and every click read as a no-op. */
.bs-panel h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bs-panel .bs-mitre{font-size:11px;font-weight:600;text-decoration:none;padding:3px 8px;
  border:1px solid var(--line-soft);border-radius:4px;white-space:nowrap}
.bs-panel .bs-mitre:hover{border-color:currentColor;text-decoration:underline}
.bs-panel .bs-close{margin-left:auto}
.bs-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.bs-subs{display:flex;flex-direction:column;gap:2px}
.bs-sub{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px;
  display:flex;align-items:center;gap:6px}
.bs-sub a{font-weight:600;text-decoration:none}
.bs-sub a:hover{text-decoration:underline}
/* Selected cell: without this, clicking gave no confirmation of WHICH cell was opened. */
.bs-cell.bs-sel{outline:2px solid var(--beacon);outline-offset:-1px;opacity:1}
.bs-alert,.bs-d3{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.bs-rule{background:rgba(88,166,255,.15)}
.bs-llm{background:rgba(190,120,255,.15)}
.bs-foot{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bs-foot .err{color:var(--crit)}
/* small inline action button (drill-in rows: "open alert" / D3FEND "apply") — a lighter-weight .btn */
.mini{font-size:11px;padding:2px 8px;border-radius:5px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer}
.mini:disabled{opacity:.45;cursor:not-allowed}
.mini:not(:disabled):hover{border-color:var(--beacon)}

/* Playbooks screen + inline recommendation cards (dark-ops palette consistent with .bs-*) */
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pb-lib-card h3,.pb-run-card h3,.pb-proposal-card h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;letter-spacing:normal;text-transform:none;color:var(--ink)}
.pb-trigger{margin:4px 0 8px;font-size:11.5px}
.pb-steps,.pb-step-chip{display:inline-flex}
.pb-steps{flex-wrap:wrap;gap:5px;margin-top:6px}
.pb-step-chip{background:var(--panel-2);color:var(--ink-2)}
.pb-run-card,.pb-proposal-card{margin-bottom:12px}
.pb-steps-list{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.pb-step-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.pb-step-row:last-child{border-bottom:none}
.pb-outcome{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.pb-detail{font-size:11.5px}
.pb-approvals{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.pb-yaml{margin:8px 0;padding:11px 13px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow:auto}
.pb-err{color:var(--crit)}
.pb-provenance{margin:2px 0 8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;font-size:11.5px}
.pb-prov-chip.pb-prov-drafted{color:var(--warn);background:var(--warn-dim)}
.pb-prov-chip.pb-prov-imported{color:var(--ok);background:var(--ok-dim)}
.pb-evidence{display:inline-flex;flex-wrap:wrap;gap:5px;margin-left:6px}
.pb-evidence-chip{background:var(--panel-2);color:var(--ink-2);font-family:var(--mono);text-transform:none;letter-spacing:normal}
/* autonomy eligibility + arm/disarm (Task 6 §3) */
.pb-auto-wrap{margin-top:16px}
.pb-auto-head{margin:0 0 10px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;flex-wrap:wrap}
.pb-auto-card .dim{margin-top:2px;font-size:11.5px}
.pb-rate-chip{text-transform:none;letter-spacing:normal;font-weight:600}
/* autopilot run labeling (Task 6 §4) — the "active inference / autonomous layer" brand color,
   distinct from the ok/warn/crit state chips already on the card */
.pb-autopilot-badge{color:var(--beacon);background:var(--beacon-dim);border:1px solid var(--beacon)}
.pb-run-card.pb-autopilot-run{border-color:var(--beacon)}
/* import modal (Task 6 §1) — fixed overlay, same idiom as the Factor Graph pop-out (#fgPop) */
.pb-import-overlay{position:fixed;inset:0;z-index:900;background:rgba(4,6,12,.74);display:flex;align-items:center;justify-content:center;padding:20px}
.pb-import-card{width:min(94vw,620px);max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.pb-import-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pb-import-head h3{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.pb-import-x{margin-left:auto;width:28px;height:28px;padding:0;font-size:15px;line-height:1}
.pb-import-body{margin:12px 0}
.pb-import-textarea{width:100%;min-height:220px;resize:vertical;font-family:var(--mono);font-size:12px;line-height:1.5;
  color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.pb-import-textarea:focus{outline:none;border-color:var(--beacon)}
.pb-import-input{width:100%}
.pb-import-err{margin:8px 0}
.pb-card{margin-top:12px;padding:11px 13px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.pb-rec-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.pb-rationale{margin:6px 0;font-size:11.5px}
.pb-rec-actions{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pb-degraded{font-size:10.5px;font-style:italic}

/* ---------- Briefing: split pane — sources rail (left) + cited narrative (right) ---------- */
.bf-wrap{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:14px;align-items:start}
.bf-rail{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 260px);overflow-y:auto;
  padding:2px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.bf-src-row{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:8px;
  padding:8px 10px;border-bottom:1px solid var(--line-soft);cursor:pointer;border-radius:var(--r-sm)}
.bf-src-row:last-child{border-bottom:none}
.bf-src-row:hover{background:var(--panel-2)}
.bf-src-row.hi{background:var(--beacon-dim);outline:1px solid var(--beacon)}
.bf-src-n{font-size:11px}
.bf-src-id{display:flex;flex-direction:column;min-width:0}
.bf-src-id b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-src-id small{color:var(--ink-3);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-src-time{font-size:10.5px;white-space:nowrap}
.bf-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.bf-section h4{margin:0 0 8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.bf-claims{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.bf-claim{font-size:13.5px;line-height:1.55;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm)}
.bf-cite{display:inline-flex;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--beacon);
  background:var(--beacon-dim);border:none;border-radius:4px;padding:0 5px;margin:0 1px;cursor:pointer;vertical-align:1px}
.bf-cite.hi,.bf-src-row.hi .chip{outline:1px solid var(--beacon)}
.bf-err{padding:20px 4px;color:var(--crit)}
@media (max-width:860px){
  .bf-wrap{grid-template-columns:1fr}
  .bf-rail{max-height:260px}
}

/* Flow-review links (2026-08-05): per-row exits on Entropy, the arriving twin-filter chip on
   Alerts, and the focused row when another screen sends you to one host. */
.ent-go{white-space:nowrap;text-align:right}
.ent-go .mini{margin-left:6px}
.ent-focus>td{background:var(--beacon-dim)}
.ba-twinfilter{display:flex;align-items:center;gap:8px;margin:10px 0 0}
.chip.beacon{border-color:var(--beacon);color:var(--beacon);background:var(--beacon-dim)}


/* first-login MFA enrolment (login step 3) + Security self-service card QR */
.enrol-qr{display:flex;justify-content:center;margin:10px 0 6px}
.enrol-qr svg{width:180px;height:180px;background:#fff;border-radius:8px;padding:6px}
.enrol-secret{font-size:12px;opacity:.85;text-align:center;margin-bottom:10px;word-break:break-all}
.enrol-secret code{user-select:all}