/* ============ ARIA · HUD — full status-monitor product ============ */
/* Google Fonts @import removed — fonts self-hosted via fonts.css (CSP-clean) */
:root {
  --bg: #04080d; --bg2: #070d15;
  --panel: rgba(11,24,32,.6); --panel2: rgba(13,28,37,.5); --solid: #0a141c;
  --line: rgba(82,224,210,.18); --line2: rgba(82,224,210,.34);
  --gridc: rgba(82,224,210,.035);
  --cy: #34E5D4; --cy-dim: #1ABC9C; --ice: #6FE3FF;
  --amber: #FF9900; --coral: #FF6B6B; --violet: #9D8CFF;
  --ok: #2ED3A7;
  --ink: #E8FBFA; --ink2: #AEC9CF; --mut: #6E8B97;
  --display: "Chakra Petch", sans-serif; --mono: "IBM Plex Mono", monospace; --sans: "IBM Plex Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(110% 60% at 50% -10%, #0a2230 0%, transparent 55%),
    linear-gradient(180deg, #05090f, #04070c);
  background-attachment: fixed;
  color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body::before { /* grid bg */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--gridc) 1px, transparent 1px), linear-gradient(90deg, var(--gridc) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* ===== COLOR SCHEMES (set html[data-palette]) — status warn/down stay amber/coral ===== */
html[data-palette="sapphire"] { --cy:#4C8DFF; --cy-dim:#2f6fe0; --ice:#9BC2FF; --line:rgba(76,141,255,.20); --line2:rgba(76,141,255,.38); --gridc:rgba(76,141,255,.04); }
html[data-palette="sapphire"] body { background: radial-gradient(110% 60% at 50% -10%, #122a4d 0%, transparent 55%), linear-gradient(180deg,#070d18,#05080f); }

html[data-palette="violet"] { --cy:#9D8CFF; --cy-dim:#7a64ef; --ice:#C3B8FF; --line:rgba(157,140,255,.20); --line2:rgba(157,140,255,.40); --gridc:rgba(157,140,255,.045); }
html[data-palette="violet"] body { background: radial-gradient(110% 60% at 50% -10%, #241a45 0%, transparent 55%), linear-gradient(180deg,#0c0a18,#07060f); }

html[data-palette="ice"] { --cy:#7FE9FF; --cy-dim:#48c7e6; --ice:#BDF3FF; --line:rgba(127,233,255,.20); --line2:rgba(127,233,255,.38); --gridc:rgba(127,233,255,.04); }
html[data-palette="ice"] body { background: radial-gradient(110% 60% at 50% -10%, #0c2c38 0%, transparent 55%), linear-gradient(180deg,#06121a,#04090f); }

html[data-palette="ember"] { --cy:#FFB454; --cy-dim:#e0902f; --ice:#FFD9A0; --line:rgba(255,180,84,.20); --line2:rgba(255,180,84,.40); --gridc:rgba(255,180,84,.045); }
html[data-palette="ember"] body { background: radial-gradient(110% 60% at 50% -10%, #2e1f0c 0%, transparent 55%), linear-gradient(180deg,#13100a,#0a0805); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lbl { font-family: var(--display); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; color: var(--mut); font-weight: 600; }
h1,h2,h3 { font-family: var(--display); margin: 0; font-weight: 600; }
.s-ok{color:var(--ok)} .s-warn{color:var(--amber)} .s-down{color:var(--coral)} .s-unk{color:var(--mut)}
.bg-ok{background:var(--ok)} .bg-warn{background:var(--amber)} .bg-down{background:var(--coral)} .bg-unk{background:var(--mut)}
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:rgba(82,224,210,.2);border-radius:6px;border:3px solid var(--bg)}

@keyframes spin{to{transform:rotate(360deg)}} @keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes eq{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
@keyframes scanY{from{transform:translateY(-100%)}to{transform:translateY(900%)}}
@keyframes flick{0%,100%{opacity:1}93%{opacity:1}95%{opacity:.5}97%{opacity:1}}
@keyframes rise{from{transform:translateY(8px)}to{transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes flowin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

.shell { position: relative; z-index: 1; max-width: 1520px; margin: 0 auto; padding: 18px 22px 80px; }

/* clip helper */
.cut { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); }
.cut-sm { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }

.panel { background: var(--panel); border: 1px solid var(--line); position: relative; }
.panel.cut { }
.crn { position: absolute; width: 9px; height: 9px; pointer-events: none; }
.crn.tr{top:-1px;right:-1px;border-top:2px solid var(--cy);border-right:2px solid var(--cy)}
.crn.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--cy);border-left:2px solid var(--cy)}

/* ============ TOPBAR ============ */
.topbar { display: flex; align-items: center; gap: 18px; padding: 13px 20px; margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(10,28,34,.7), rgba(8,18,26,.5)); border: 1px solid var(--line); }
.tb-brand { display: flex; align-items: center; gap: 12px; }
.tb-brand b { font-family: var(--display); font-size: 18px; letter-spacing: .3em; font-weight: 700; }
.tb-brand .sub { font-size: 9.5px; color: var(--mut); letter-spacing: .14em; }
.tb-status { display: flex; align-items: center; gap: 16px; padding-left: 18px; border-left: 1px solid var(--line); }
.tb-seg .v { font-family: var(--mono); font-size: 17px; font-weight: 600; line-height: 1; }
.tb-seg .k { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-top: 3px; }
.tb-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.tb-chip { display: flex; align-items: center; gap: 6px; padding: 7px 11px; font-size: 11.5px; color: var(--ink2);
  border: 1px solid transparent; transition: .15s; font-family: var(--display); letter-spacing: .04em; }
.tb-chip:hover { color: var(--cy); border-color: var(--line2); background: rgba(52,229,212,.06); }
.tb-chip.on { color: var(--cy); border-color: var(--line2); background: rgba(52,229,212,.08); }
.tb-btn { display: flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 12px; font-weight: 600;
  font-family: var(--display); letter-spacing: .05em; }
.tb-btn.ghost { border: 1px solid var(--line2); color: var(--cy); }
.tb-btn.ghost:hover { background: rgba(52,229,212,.1); }
.tb-btn.solid { background: var(--cy); color: #042520; }
.tb-btn.solid:hover { box-shadow: 0 0 18px rgba(52,229,212,.5); }

/* ARIA ticker */
.ticker { display: flex; align-items: center; gap: 13px; padding: 9px 16px; margin-bottom: 16px; font-size: 12.5px;
  background: rgba(52,229,212,.05); border-left: 2px solid var(--cy); }
.ticker .tag { font-family: var(--display); font-weight: 700; letter-spacing: .14em; font-size: 11px; color: var(--cy); animation: flick 4s infinite; }
.ticker .tm { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.ticker .msg { color: var(--ice); }

/* ============ HERO ============ */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; margin-bottom: 16px; }
.hero-reactor { padding: 20px; display: flex; align-items: center; gap: 18px; }
.reactor { position: relative; width: 320px; height: 320px; display: grid; place-items: center; justify-self: center; flex-shrink: 0; }
.react-issues { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.react-issues .ri-h { font-family: var(--display); font-size: 10px; letter-spacing: .18em; color: var(--mut); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.react-issues .ri-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 250px; padding-right: 4px; }
.ri-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; transition: .14s; }
.ri-row:hover { border-color: var(--line2); background: rgba(52,229,212,.05); }
.ri-row .ri-n { flex: 1; font-size: 12px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-row .ri-s { font-family: var(--display); font-size: 8.5px; letter-spacing: .1em; }
.ri-empty { color: var(--mut); font-size: 12px; padding: 16px 4px; }

/* focus visibility (a11y) */
:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, .vmod:focus-visible, .ri-row:focus-visible, .site:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }
.tab { min-height: 36px; }
.vm-tag { font-size: 9.5px; }
.lbl { font-size: 10px; }
.rail-grp > .gl { font-size: 9.5px; }

/* business value strip */
.vstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 16px; }
.vstrip .vc { background: var(--panel); padding: 13px 16px; display: flex; align-items: center; gap: 12px; }
.vstrip .vc .ic { width: 30px; height: 30px; display: grid; place-items: center; color: var(--cy); flex-shrink: 0; }
.vstrip .vc .v { font-family: var(--mono); font-size: 19px; font-weight: 600; line-height: 1; }
.vstrip .vc .k { font-size: 9.5px; letter-spacing: .1em; color: var(--mut); text-transform: uppercase; margin-top: 3px; }

/* vendor card state badge */
.vm-state { position: absolute; top: 11px; right: 34px; font-family: var(--display); font-size: 8px; letter-spacing: .1em; padding: 3px 6px; z-index: 2; }
.vm-state.ack { color: var(--ice); border: 1px solid rgba(111,162,255,.5); }
.vm-state.maint { color: var(--amber); border: 1px solid rgba(255,153,0,.5); }
.vm-state.off { color: var(--mut); border: 1px solid var(--line2); }

/* toasts */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--bg2); border: 1px solid var(--line2); padding: 11px 16px; display: flex; gap: 14px; align-items: center; font-size: 12.5px; box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: rise .25s ease; }
.toast .tk { color: var(--cy); display: flex; }
.toast .undo { color: var(--cy); cursor: pointer; font-family: var(--display); font-size: 11px; letter-spacing: .06em; }
.toast .undo:hover { text-decoration: underline; }

/* command palette */
.cmdk-scrim { position: fixed; inset: 0; background: rgba(2,6,10,.6); backdrop-filter: blur(3px); z-index: 100; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; animation: fade .15s; }
.cmdk { width: 580px; max-width: 92vw; background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 20px 70px rgba(0,0,0,.6); animation: slidein .2s ease; }
.cmdk-in { width: 100%; padding: 16px 18px; background: none; border: none; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; font-family: var(--mono); outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-sec { font-family: var(--display); font-size: 9px; letter-spacing: .18em; color: var(--mut); padding: 9px 12px 5px; }
.cmdk-item { display: flex; gap: 11px; align-items: center; padding: 9px 12px; cursor: pointer; font-size: 13px; }
.cmdk-item svg { color: var(--mut); }
.cmdk-item.sel { background: rgba(52,229,212,.12); }
.cmdk-item.sel svg { color: var(--cy); }
.cmdk-kind { margin-left: auto; font-size: 9px; color: var(--mut); font-family: var(--display); letter-spacing: .1em; }
.cmdk-hint { padding: 9px 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; color: var(--mut); display: flex; gap: 16px; }

/* tz toggle + hamburger */
.tz-btn { font-family: var(--mono); font-size: 10px; color: var(--mut); border: 1px solid var(--line); padding: 5px 8px; }
.tz-btn:hover { color: var(--cy); border-color: var(--line2); }
.hamburger { display: none; }
@media (max-width: 1100px) {
  .hamburger { display: grid; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 70; transform: translateX(-100%); transition: transform .25s; width: 232px; }
  .rail.open { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.5); }
  .rail-scrim { position: fixed; inset: 0; background: rgba(2,6,10,.6); z-index: 65; }
}
.reactor svg { position: absolute; inset: 0; }
.rr { animation: spin 42s linear infinite; transform-origin: 50% 50%; }
.rr.rev { animation: spinr 30s linear infinite; } .rr.fast { animation: spin 18s linear infinite; }
.radar { position: absolute; inset: 16px; border-radius: 50%; animation: sweep 6s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 300deg, rgba(52,229,212,.05) 332deg, rgba(52,229,212,.3) 360deg); }
.core { position: relative; width: 142px; height: 142px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle, rgba(52,229,212,.22), rgba(52,229,212,.04) 70%, transparent);
  box-shadow: 0 0 42px rgba(52,229,212,.32), inset 0 0 28px rgba(52,229,212,.22); animation: pulse 4s ease-in-out infinite; }
.core .big { font-family: var(--mono); font-size: 40px; font-weight: 600; line-height: 1; }
.core .big small { font-size: 18px; color: var(--mut); }
.core .cap { font-family: var(--display); font-size: 9.5px; letter-spacing: .24em; color: var(--cy); margin-top: 5px; }
.core .cap.cap-issue { color: var(--amber); }
.onode { position: absolute; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 9px currentColor; left: 50%; top: 50%; }

/* hero right — intelligence summary */
.hero-intel { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.hi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.hi-score { display: flex; align-items: baseline; gap: 10px; }
.hi-score .big { font-family: var(--mono); font-size: 44px; font-weight: 600; color: var(--cy); line-height: 1; text-shadow: 0 0 20px rgba(52,229,212,.4); }
.hi-score .meta .g { font-family: var(--display); font-size: 13px; letter-spacing: .1em; color: var(--cy); }
.hi-statgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.hi-stat { background: var(--solid); padding: 12px 14px; }
.hi-stat .v { font-family: var(--mono); font-size: 21px; font-weight: 600; }
.hi-stat .k { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-top: 3px; }
.hi-quote { font-size: 12.5px; color: var(--ink2); line-height: 1.55; border-top: 1px solid var(--line); padding-top: 12px; }
.hi-quote b { color: var(--cy); }

/* ============ SECTION HEAD ============ */
.sec { margin-bottom: 16px; }
.sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 11px; }
.sec-head h2 { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.sec-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.sec-head .right { display: flex; gap: 8px; align-items: center; }
.tab { padding: 6px 13px; font-size: 11.5px; font-family: var(--display); letter-spacing: .06em; color: var(--ink2);
  border: 1px solid var(--line); transition: .15s; }
.tab:hover { border-color: var(--line2); } .tab.on { background: var(--cy); color: #042520; border-color: var(--cy); font-weight: 600; }
.search { display: flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--line); min-width: 220px; }
.search input { background: none; border: none; outline: none; color: var(--ink); font-size: 12px; flex: 1; font-family: var(--mono); }
.search svg { color: var(--mut); }

/* ============ VENDOR GRID ============ */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.vmod { padding: 14px 15px; background: var(--panel); border: 1px solid var(--line); position: relative; transition: .18s; animation: rise .4s ease; }
.vmod:hover { border-color: var(--line2); transform: translateY(-2px); }
.vmod.warn { border-color: rgba(255,153,0,.4); background: linear-gradient(rgba(40,28,4,.4), var(--panel)); }
.vmod.down { border-color: rgba(255,107,107,.45); background: linear-gradient(rgba(40,12,12,.4), var(--panel)); }
.vmod.unk { border-color: rgba(110,139,151,.4); }
.vm-head { display: flex; align-items: center; gap: 10px; }
.vm-logo { width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 12px;
  border: 1px solid var(--line); background: rgba(82,224,210,.05); color: var(--ink2); flex-shrink: 0; }
.vm-name { font-family: var(--display); font-size: 13.5px; font-weight: 600; flex: 1; letter-spacing: .02em; }
.vm-ret { width: 13px; height: 13px; position: relative; flex-shrink: 0; }
.vm-ret::before,.vm-ret::after { content:""; position: absolute; background: currentColor; }
.vm-ret::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.vm-ret::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.vm-ret i { position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 50%; }
.vm-ret.live i { animation: pulse 1.5s infinite; }
.vm-status { font-family: var(--display); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; margin-top: 11px; }
.vm-note { font-size: 11.5px; color: var(--ink2); margin-top: 7px; line-height: 1.45; min-height: 16px; }
.vm-comp { font-size: 11px; color: var(--amber); margin-top: 5px; font-family: var(--mono); }
.vm-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.vm-tags { display: flex; gap: 5px; }
.vm-tag { font-size: 8.5px; letter-spacing: .1em; padding: 2px 6px; border: 1px solid var(--line); color: var(--mut); font-family: var(--mono); text-transform: uppercase; }
.vm-time { font-family: var(--mono); font-size: 10px; color: var(--mut); }

/* ============ UPTIME TIMELINE ============ */
.uptime { padding: 18px 20px; }
.ut-row { display: grid; grid-template-columns: 130px 1fr 50px; gap: 12px; align-items: center; padding: 4px 0; }
.ut-name { font-size: 12px; display: flex; align-items: center; gap: 7px; }
.ut-badge { background: var(--coral); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; font-family: var(--mono); }
.ut-bar { display: flex; gap: 1px; height: 16px; }
.ut-seg { flex: 1; border-radius: 1px; }
.ut-pct { font-family: var(--mono); font-size: 11px; text-align: right; }

/* ============ TWO COL ============ */
.duo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }

/* recent changes */
.changes { display: flex; flex-direction: column; gap: 9px; max-height: 560px; overflow-y: auto; padding-right: 6px; }
.chg { padding: 11px 13px; background: var(--panel2); border-left: 2px solid var(--mut); position: relative; animation: flowin .35s ease; }
.chg.up { border-left-color: var(--coral); } .chg.down { border-left-color: var(--cy); }
.chg-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.chg-tm { font-family: var(--mono); font-size: 10px; color: var(--mut); }
.chg-v { font-family: var(--display); font-weight: 600; font-size: 12.5px; }
.chg-trans { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; }
.chg-pill { padding: 2px 7px; border: 1px solid var(--line); letter-spacing: .08em; text-transform: uppercase; }
.chg-detail { font-size: 11px; color: var(--mut); margin-top: 5px; font-family: var(--mono); }

/* intelligence */
.intel { padding: 18px 20px; }
.intel-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skill { padding: 12px; border: 1px solid var(--line); background: var(--panel2); position: relative; }
.skill-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skill-nm { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; font-family: var(--display); }
.skill-ic { width: 22px; height: 22px; display: grid; place-items: center; color: var(--cy); flex-shrink: 0; }
.skill-lv { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; }
.auto-badge { font-size: 8px; letter-spacing: .12em; padding: 2px 5px; background: rgba(52,229,212,.15); color: var(--cy); font-family: var(--mono); margin-left: 6px; }
.skill-track { height: 5px; background: rgba(255,255,255,.07); margin-top: 10px; overflow: hidden; }
.skill-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy-dim), var(--cy)); box-shadow: 0 0 8px rgba(52,229,212,.5); transition: width 1s; }
.skill-unlock { font-size: 9.5px; color: var(--mut); margin-top: 8px; display: flex; gap: 5px; align-items: flex-start; }
.skill-unlock svg { flex-shrink: 0; margin-top: 1px; }
.skill.legendary { border-color: rgba(157,140,255,.4); }
.skill.legendary .skill-track i { background: linear-gradient(90deg, var(--cy), var(--violet)); }

/* live activity */
.live { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.live-feed { display: flex; flex-direction: column; gap: 8px; max-height: 230px; overflow-y: auto; padding-right: 6px; }
.lf { display: grid; grid-template-columns: 62px 16px 1fr; gap: 8px; align-items: start; font-size: 11.5px; animation: flowin .3s ease; }
.lf-tm { font-family: var(--mono); font-size: 10px; color: var(--mut); padding-top: 1px; }
.lf-ic { display: grid; place-items: center; color: var(--cy); }
.lf-tx { color: var(--ink2); line-height: 1.4; }
.lf-tx b { color: var(--ink); }

/* =================================================================
   APP SHELL — nav rail + routed screens
   ================================================================= */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; position: relative; z-index: 1; }
.rail { border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(8,18,26,.7), rgba(5,10,16,.5));
  display: flex; flex-direction: column; padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.rail-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; }
.rail-brand b { font-family: var(--display); font-size: 17px; letter-spacing: .3em; font-weight: 700; }
.rail-brand .sub { font-size: 8.5px; color: var(--mut); letter-spacing: .16em; text-transform: uppercase; }
.rail-grp { margin-top: 14px; }
.rail-grp > .gl { font-family: var(--display); font-size: 8.5px; letter-spacing: .24em; color: var(--mut); padding: 0 10px 6px; }
.rail-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12.5px; color: var(--ink2);
  position: relative; transition: .14s; font-family: var(--sans); width: 100%; text-align: left; border-radius: 2px; }
.rail-item svg { color: var(--mut); transition: .14s; flex-shrink: 0; }
.rail-item:hover { background: rgba(52,229,212,.06); color: var(--ink); }
.rail-item:hover svg { color: var(--cy); }
.rail-item.on { background: rgba(52,229,212,.1); color: var(--cy); }
.rail-item.on svg { color: var(--cy); }
.rail-item.on::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 2.5px; background: var(--cy); box-shadow: 0 0 8px var(--cy); }
.rail-item .rb { margin-left: auto; background: var(--coral); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; font-family: var(--mono); }
.rail-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.rail-agent { display: flex; align-items: center; gap: 9px; padding: 6px 8px; }
.rail-agent .ap { width: 8px; height: 8px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 0 0 var(--cy); animation: ap 2.4s infinite; }
@keyframes ap { 0%{box-shadow:0 0 0 0 rgba(52,229,212,.5)} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.rail-agent b { font-size: 11.5px; display: block; font-family: var(--display); } .rail-agent span { font-size: 9.5px; color: var(--mut); }

.main { min-width: 0; display: flex; flex-direction: column; }
.apptop { display: flex; align-items: center; gap: 16px; padding: 13px 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; background: rgba(5,10,16,.7); backdrop-filter: blur(10px); }
.apptop h1 { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; }
.apptop .crumb { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.apptop .clock { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ice); }
.apptop .ablob { display: flex; align-items: center; gap: 14px; }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink2); transition: .15s; }
.iconbtn:hover { color: var(--cy); border-color: var(--line2); }
.screen { padding: 22px 24px 70px; max-width: 1480px; width: 100%; animation: rise .4s ease; }

/* module stub */
.stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 90px 20px; text-align: center; }
.stub .ring { width: 78px; height: 78px; border-radius: 50%; border: 1.5px solid var(--line2); border-top-color: var(--cy); animation: spin 2.4s linear infinite; display: grid; place-items: center; }
.stub h2 { font-size: 18px; letter-spacing: .1em; }
.stub p { color: var(--mut); font-size: 12.5px; max-width: 380px; line-height: 1.6; }
.stub .bars { display: flex; gap: 4px; align-items: flex-end; height: 26px; margin-top: 4px; }

/* =================================================================
   DEPENDENCY MAP
   ================================================================= */
.depmap { display: grid; grid-template-columns: 230px 1fr 250px; gap: 0; height: 640px; position: relative; }
.dm-col { padding: 4px; overflow-y: auto; }
.dm-col .ttl { font-family: var(--display); font-size: 10px; letter-spacing: .2em; color: var(--mut); padding: 6px 10px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
.dm-node { display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-bottom: 6px; border: 1px solid var(--line); background: var(--panel2); font-size: 12px; cursor: pointer; transition: .14s; position: relative; }
.dm-node:hover, .dm-node.hot { border-color: var(--cy); background: rgba(52,229,212,.08); }
.dm-node.warn.hot, .dm-node.warn { border-color: rgba(255,153,0,.5); }
.dm-node .nm { flex: 1; } .dm-node .sub { font-size: 9px; color: var(--mut); display: block; }
.dm-node .cnt { font-family: var(--mono); font-size: 11px; color: var(--cy); }
.dm-node .af { font-size: 8.5px; color: var(--amber); letter-spacing: .1em; }
.dm-svg { position: absolute; inset: 0; pointer-events: none; z-index: 1; width: 100%; height: 100%; }
.dm-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.dm-legend span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink2); }
.dm-legend i { width: 14px; height: 2px; border-radius: 2px; }

/* =================================================================
   SITES / PORTFOLIO BOARD
   ================================================================= */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 12px; }
.site { padding: 14px 15px; border: 1px solid var(--line); background: var(--panel); position: relative; transition: .16s; }
.site:hover { border-color: var(--line2); transform: translateY(-2px); }
.site.down { border-color: rgba(255,107,107,.5); background: linear-gradient(rgba(40,12,12,.4), var(--panel)); }
.site.warn { border-color: rgba(255,153,0,.4); }
.site-top { display: flex; align-items: center; gap: 10px; }
.site-flag { width: 30px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); font-family: var(--mono); font-size: 10px; color: var(--ice); background: rgba(82,224,210,.05); flex-shrink: 0; letter-spacing: .04em; }
.site-nm { font-family: var(--display); font-size: 13px; font-weight: 600; flex: 1; }
.site-url { font-family: var(--mono); font-size: 10.5px; color: var(--mut); margin-top: 9px; }
.site-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 10px; }
.site-lat { font-family: var(--mono); color: var(--ink2); }
.site-st { font-family: var(--display); letter-spacing: .12em; }

/* settings drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(2,6,10,.6); backdrop-filter: blur(3px); z-index: 90; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; z-index: 91; background: var(--bg2);
  border-left: 1px solid var(--line2); box-shadow: -20px 0 60px rgba(0,0,0,.5); overflow-y: auto; padding: 20px 22px; animation: slidein .28s cubic-bezier(.2,.8,.2,1); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.drawer h2 { font-size: 16px; letter-spacing: .1em; }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.set-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.set-sec h3 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cy); margin-bottom: 10px; }
.input { width: 100%; padding: 10px 13px; background: var(--solid); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: 12px; outline: none; }
.input:focus { border-color: var(--cy); }
.row { display: flex; gap: 8px; align-items: center; }
.btn { padding: 9px 15px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .05em; transition: .15s; }
.btn-cy { background: var(--cy); color: #042520; } .btn-cy:hover { box-shadow: 0 0 16px rgba(52,229,212,.5); }
.btn-ghost { border: 1px solid var(--line2); color: var(--cy); } .btn-ghost:hover { background: rgba(52,229,212,.1); }
.btn-amber { background: var(--amber); color: #2a1c00; }
.btn-red { border: 1px solid rgba(255,107,107,.5); color: var(--coral); } .btn-red:hover { background: rgba(255,107,107,.12); }

@media (max-width: 1100px) {
  .hero, .duo { grid-template-columns: 1fr; }
  .tb-nav { display: none; }
  .app { grid-template-columns: 1fr; }
  /* NOTE: do NOT `display: none` the rail here — the @media block above turns it
     into a fixed off-canvas drawer (translateX(-100%), .rail.open slides it in).
     Hiding it killed the hamburger drawer (the only mobile nav). The single-
     column .app above already removes it from the desktop grid flow. */
  .depmap { grid-template-columns: 1fr; height: auto; }
}

/* =================================================================
   PHASE 2 — OPS / MAP screens
   ================================================================= */
.intro { font-size: 13px; color: var(--ink2); line-height: 1.6; max-width: 920px; margin-bottom: 16px; }
.intro b { color: var(--cy); } .intro code { font-family: var(--mono); color: var(--ice); font-size: 12px; background: rgba(82,224,210,.08); padding: 1px 5px; }

/* incident response */
.incident { margin-bottom: 18px; padding: 0; }
.inc-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.inc-head .v { font-family: var(--display); font-size: 17px; font-weight: 600; }
.inc-head .meta { font-family: var(--mono); font-size: 11px; color: var(--mut); margin-top: 5px; }
.inc-state { font-family: var(--display); font-size: 10px; letter-spacing: .14em; padding: 5px 11px; border: 1px solid var(--cy); color: var(--cy); }
.inc-body { padding: 18px 20px; }
.inc-diag { display: flex; gap: 13px; padding: 14px 16px; background: rgba(52,229,212,.05); border-left: 2px solid var(--cy); font-size: 13px; line-height: 1.6; color: var(--ink2); }
.inc-diag .mk { flex-shrink: 0; }
.inc-action { margin-top: 14px; padding: 15px 16px; border: 1px solid var(--line); background: var(--panel2); display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.inc-action.risk { border-color: rgba(255,153,0,.4); }
.inc-action . a-t { font-family: var(--display); font-size: 13.5px; font-weight: 600; }
.inc-action .a-d { font-size: 12px; color: var(--mut); margin-top: 5px; line-height: 1.5; max-width: 640px; }
.inc-action .a-btns { display: flex; gap: 8px; flex-shrink: 0; }
.inc-warn { display: flex; gap: 9px; align-items: center; margin-top: 11px; padding: 9px 13px; background: rgba(255,153,0,.08); border: 1px solid rgba(255,153,0,.3); font-size: 11.5px; color: var(--amber); }
.inc-pm { margin-top: 14px; padding: 15px 16px; border-left: 2px solid var(--cy); background: rgba(13,28,37,.5); }
.inc-pm .pm-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.inc-pm .pm-h .l { font-family: var(--display); font-size: 11px; letter-spacing: .16em; color: var(--cy); display: flex; align-items: center; gap: 8px; }
.inc-pm p { font-size: 12.5px; color: var(--ink2); line-height: 1.6; margin: 0; }
/* Customer-comms DRAFT block — amber-tinted to read as caution (vs the cyan
   postmortem); collapsed by default since it's secondary + operator-only. */
.inc-comms { margin-top: 14px; padding: 13px 16px; border-left: 2px solid var(--amber); background: rgba(255,153,0,.05); }
/* flex on <summary> drops the UA disclosure triangle, so supply our own
   rotating chevron — otherwise a collapsed draft has no visible expand cue. */
.inc-comms > summary.pm-h { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 0; list-style: none; }
.inc-comms > summary.pm-h::-webkit-details-marker { display: none; }
.inc-comms > summary.pm-h::after { content: "\25B8"; margin-left: auto; color: var(--amber); font-size: 11px; transition: transform .15s ease; }
.inc-comms[open] > summary.pm-h::after { transform: rotate(90deg); }
.inc-comms[open] > summary.pm-h { margin-bottom: 9px; }
.inc-comms .pm-h .l { font-family: var(--display); font-size: 11px; letter-spacing: .16em; color: var(--amber); display: flex; align-items: center; gap: 8px; }
.inc-comms p { font-size: 12.5px; color: var(--ink2); line-height: 1.6; margin: 8px 0 0; }
.done-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 11px; color: var(--cy); }

/* proposals */
.prop { padding: 15px 18px; margin-bottom: 11px; border: 1px solid var(--line); border-left: 3px solid var(--amber); background: var(--panel2); position: relative; }
.prop.observed { border-left-color: var(--cy); }
.prop-top { display: flex; align-items: center; justify-content: space-between; }
.prop-type { font-family: var(--display); font-size: 10px; letter-spacing: .12em; padding: 4px 9px; background: rgba(111,162,255,.15); color: var(--ice); }
.prop-conf { font-size: 12px; color: var(--mut); } .prop-conf b { color: var(--ink); font-family: var(--mono); }
.prop-text { font-size: 13.5px; margin: 12px 0; line-height: 1.5; }
.prop-meta { display: flex; align-items: center; gap: 16px; font-size: 10.5px; color: var(--mut); font-family: var(--mono); flex-wrap: wrap; }
.prop-meta .pid { margin-left: auto; }
.prop-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.prop-score { color: var(--cy); font-family: var(--mono); font-size: 11px; }

/* detectors */
.det-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.det { padding: 18px; border: 1px solid var(--line); background: var(--panel); position: relative; }
.det h3 { font-size: 15px; } .det .d { font-size: 12px; color: var(--mut); margin: 7px 0 16px; line-height: 1.5; min-height: 50px; }
.det .pct { font-family: var(--mono); font-size: 36px; font-weight: 600; line-height: 1; }
.det .split { font-size: 11px; color: var(--mut); font-family: var(--mono); margin-top: 8px; }
.det .gbar { height: 6px; background: rgba(255,255,255,.07); margin-top: 12px; overflow: hidden; }
.det .gbar i { display: block; height: 100%; transition: width 1s; }

/* code map */
.cm-proj { padding: 18px 20px; margin-bottom: 16px; }
.cm-proj .ph { display: flex; align-items: flex-start; justify-content: space-between; }
.cm-proj h2 { font-size: 18px; } .cm-proj .pd { color: var(--mut); font-size: 12.5px; margin: 5px 0 10px; }
.cm-proj .pmeta { font-size: 12px; color: var(--ink2); } .cm-proj .pmeta b { color: var(--cy); }
.cm-flow { display: flex; gap: 0; align-items: stretch; overflow-x: auto; padding: 8px 2px 16px; }
.cm-node { min-width: 200px; flex-shrink: 0; padding: 14px; border: 1px solid var(--line); border-top: 2px solid var(--cy); background: var(--panel2); position: relative; }
.cm-arrow { display: flex; align-items: center; color: var(--cy); padding: 0 6px; flex-shrink: 0; }
.cm-node .nh { font-family: var(--display); font-size: 13px; font-weight: 600; }
.cm-node .rt { font-size: 9px; letter-spacing: .14em; color: var(--mut); margin-top: 3px; }
.cm-node .fl { font-family: var(--mono); font-size: 10.5px; color: var(--ice); margin: 9px 0; word-break: break-all; }
.cm-deps { display: flex; flex-wrap: wrap; gap: 4px; margin: 9px 0; }
.cm-dep { font-family: var(--mono); font-size: 9px; padding: 2px 6px; border: 1px solid var(--line); color: var(--mut); }
.cm-node .role { font-size: 11px; color: var(--ink2); font-style: italic; }
.cm-node .hl { font-family: var(--display); font-size: 10px; color: var(--cy); margin-top: 7px; display: flex; align-items: center; gap: 5px; }
.cm-sla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.cm-tile { padding: 14px; border: 1px solid var(--line); background: var(--panel2); text-align: center; }
.cm-tile .v { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--cy); }
.cm-tile .k { font-size: 9.5px; letter-spacing: .14em; color: var(--mut); margin-top: 4px; }

/* =================================================================
   PHASE 3 — INTEL / TELEMETRY / ESTATE / SYSTEM
   ================================================================= */
/* skill matrix */
.skillmx { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skillc { padding: 14px 16px; border: 1px solid var(--line); background: var(--panel2); position: relative; }
.skillc.legendary { border-color: rgba(157,140,255,.4); }
.skillc .sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skillc .snm { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 13px; font-weight: 600; }
.skillc .sic { width: 24px; height: 24px; display: grid; place-items: center; color: var(--cy); flex-shrink: 0; }
.skillc.legendary .sic { color: var(--violet); }
.skillc .slv { font-family: var(--mono); font-size: 10px; color: var(--ink2); }
.skillc .slv .prestige { color: var(--violet); font-weight: 700; text-shadow: 0 0 6px rgba(157,140,255,.5); }
.skillc .auto { font-size: 8px; letter-spacing: .12em; padding: 2px 6px; background: rgba(52,229,212,.15); color: var(--cy); margin-left: 7px; font-family: var(--mono); }
.skillc .strack { height: 5px; background: rgba(255,255,255,.07); margin: 11px 0 9px; overflow: hidden; }
.skillc .strack i { display: block; height: 100%; background: linear-gradient(90deg, var(--cy-dim), var(--cy)); box-shadow: 0 0 8px rgba(52,229,212,.5); transition: width 1s; }
.skillc.legendary .strack i { background: linear-gradient(90deg, var(--cy), var(--violet)); }
.skillc .sun { font-size: 9.5px; color: var(--mut); display: flex; gap: 5px; align-items: flex-start; }
.intel-tabs { display: flex; gap: 6px; margin-bottom: 14px; }

/* report */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
.kpi { padding: 14px 16px; border: 1px solid var(--line); border-top: 2px solid var(--amber); background: var(--panel2); }
.kpi .k { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.kpi .v { font-family: var(--mono); font-size: 28px; font-weight: 600; margin: 7px 0 2px; }
.kpi .s { font-size: 10px; color: var(--mut); }
.sla-row { display: grid; grid-template-columns: 150px 1fr 56px; gap: 14px; align-items: center; padding: 5px 0; }
.sla-nm { font-size: 12.5px; color: var(--ink2); }
.sla-bar { height: 18px; background: rgba(255,255,255,.05); position: relative; }
.sla-fill { height: 100%; transition: width 1s; }
.sla-pct { font-family: var(--mono); font-size: 12px; text-align: right; font-weight: 500; }

/* briefs */
.brief { padding: 15px 18px; margin-bottom: 11px; border: 1px solid var(--line); background: var(--panel2); }
.brief-top { display: flex; align-items: center; justify-content: space-between; }
.brief-v { font-family: var(--display); font-size: 14px; font-weight: 600; }
.brief-st { font-family: var(--display); font-size: 10px; letter-spacing: .12em; padding: 4px 10px; }
.brief-st.WON { color: var(--cy); border: 1px solid var(--cy); }
.brief-st.PENDING { color: var(--amber); border: 1px solid var(--amber); }
.brief-st.LOST { color: var(--mut); border: 1px solid var(--line2); }
.brief-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0; }
.brief-cell .k { font-size: 9px; letter-spacing: .1em; color: var(--mut); text-transform: uppercase; }
.brief-cell .v { font-family: var(--mono); font-size: 14px; margin-top: 3px; }
.brief-note { font-size: 11.5px; color: var(--mut); border-top: 1px solid var(--line); padding-top: 10px; }

/* journal */
.jrnl-today { padding: 18px 20px; margin-bottom: 18px; border-left: 2px solid var(--cy); background: rgba(52,229,212,.05); }
.jrnl-today .jh { font-family: var(--display); font-size: 11px; letter-spacing: .16em; color: var(--cy); margin-bottom: 10px; }
.jrnl-today p { font-size: 13.5px; line-height: 1.7; color: var(--ink2); margin: 0; }
.jrnl-item { padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--line); border-left: 2px solid var(--cy); background: var(--panel2); }
.jrnl-item.major { border-left-color: var(--coral); }
.jrnl-item .jd { font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--cy); }
.jrnl-item.major .jd { color: var(--coral); }
.jrnl-item .js { font-size: 13.5px; margin: 7px 0; }
.jrnl-item .jm { display: flex; gap: 18px; font-size: 11px; color: var(--mut); font-family: var(--mono); }
.jrnl-pm { margin-top: 11px; font-size: 12px; color: var(--ink2); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 10px; }
.jrnl-toggle { font-family: var(--mono); font-size: 11px; color: var(--cy); cursor: pointer; margin-top: 9px; display: inline-flex; align-items: center; gap: 5px; }

/* timeline */
.tl-controls { display: flex; gap: 6px; }
.tl-row { display: grid; grid-template-columns: 150px 1fr 52px; gap: 12px; align-items: center; padding: 4px 0; }
.tl-name { font-size: 12px; display: flex; align-items: center; gap: 7px; }
.tl-badge { background: var(--coral); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; font-family: var(--mono); }
.tl-bar { display: flex; gap: 1px; height: 16px; }
.tl-seg { flex: 1; border-radius: 1px; }
.tl-pct { font-family: var(--mono); font-size: 11px; text-align: right; }

/* api */
.api-auth { display: flex; gap: 12px; padding: 14px 16px; margin-bottom: 18px; border: 1px solid rgba(255,153,0,.3); background: rgba(255,153,0,.06); font-size: 12.5px; line-height: 1.5; }
.api-auth b { color: var(--amber); } .api-auth code { font-family: var(--mono); color: var(--ice); font-size: 11.5px; }
.api-grp h3 { font-family: var(--display); font-size: 13px; color: var(--cy); letter-spacing: .08em; margin: 18px 0 10px; }
.api-ep { display: flex; align-items: center; gap: 12px; padding: 12px 15px; margin-bottom: 8px; border: 1px solid var(--line); background: var(--panel2); }
.api-m { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 3px 8px; letter-spacing: .06em; flex-shrink: 0; min-width: 56px; text-align: center; }
.api-m.GET { background: rgba(52,229,212,.16); color: var(--cy); }
.api-m.POST { background: rgba(111,162,255,.18); color: var(--ice); }
.api-m.PATCH { background: rgba(255,153,0,.16); color: var(--amber); }
.api-m.DELETE { background: rgba(255,107,107,.16); color: var(--coral); }
.api-path { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.api-lock { font-size: 8px; letter-spacing: .1em; padding: 2px 6px; border: 1px solid rgba(255,153,0,.4); color: var(--amber); font-family: var(--mono); }
.api-desc { font-size: 11.5px; color: var(--mut); margin-left: auto; max-width: 50%; text-align: right; }

/* setup wizard */
.setup-wrap { max-width: 560px; margin: 40px auto; text-align: center; }
.setup-mark { display: grid; place-items: center; margin-bottom: 16px; }
.setup-wrap h2 { font-size: 24px; letter-spacing: .04em; }
.setup-wrap .sub { color: var(--ink2); font-size: 13px; margin-top: 6px; }
.setup-prog { display: flex; gap: 8px; margin: 22px 0; }
.setup-prog i { flex: 1; height: 3px; background: var(--line); transition: .3s; }
.setup-prog i.on { background: var(--cy); box-shadow: 0 0 8px var(--cy); }
.setup-card { padding: 24px; text-align: left; }
.setup-card h3 { font-size: 17px; } .setup-card .cd { font-size: 12.5px; color: var(--mut); margin: 7px 0 16px; line-height: 1.5; }
.setup-card .fl { font-size: 11px; color: var(--ink2); margin-bottom: 7px; font-weight: 600; }
.setup-btns { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 20px; }
.setup-skip { color: var(--cy); font-size: 12.5px; cursor: pointer; }

/* =================================================================
   VENDOR DETAIL DRAWER + site verify button
   ================================================================= */
.drawer.wide { width: 540px; }
.vmod { cursor: pointer; }
.vd-summary { padding: 14px 16px; margin-bottom: 16px; border: 1px solid rgba(111,162,255,.28);
  background: linear-gradient(135deg, rgba(111,162,255,.1), rgba(52,229,212,.04)); }
.vd-summary .sh { font-family: var(--display); font-size: 11px; letter-spacing: .1em; color: var(--ice); margin-bottom: 8px; display: flex; gap: 9px; align-items: center; }
.vd-summary .sh .uid { color: var(--mut); font-family: var(--mono); }
.vd-summary p { margin: 0; font-size: 13px; line-height: 1.55; }
.vd-status { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 17px; font-weight: 600; }
.vd-sub { font-size: 12.5px; color: var(--ink2); margin: 5px 0 0; }
.vd-meta { display: flex; align-items: center; gap: 11px; margin: 9px 0 16px; font-size: 11px; color: var(--mut); }
.vd-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; padding: 3px 8px; border: 1px solid var(--line); color: var(--mut); }
.vd-uptime { padding: 13px 15px; border: 1px solid var(--line); background: var(--panel2); margin-bottom: 16px; }
.vd-uptime .ut { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 9px; }
.vd-uptime .ut .lbl2 { font-family: var(--display); letter-spacing: .14em; color: var(--mut); font-size: 10px; }
.vd-uptime .ut .pc { font-family: var(--mono); font-weight: 600; }
.vd-bar { height: 12px; display: flex; gap: 1px; }
.vd-bar i { flex: 1; border-radius: 1px; }
.vd-sec { margin-top: 18px; }
.vd-sec > .h { font-family: var(--display); font-size: 11px; letter-spacing: .14em; color: var(--cy); margin-bottom: 11px; }
.vd-sec.config { border-left: 2px solid var(--amber); padding-left: 14px; }
.vd-sec.config > .h { color: var(--amber); }
.vd-field { margin-bottom: 12px; }
.vd-field .fl { font-size: 11px; color: var(--ink2); margin-bottom: 6px; }
.vd-field .fl .hint { color: var(--mut); font-weight: 400; }
.vd-inc { padding: 11px 13px; margin-bottom: 8px; background: var(--panel2); border: 1px solid var(--line); }
.vd-inc .it { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.vd-inc .im { font-size: 10.5px; color: var(--mut); font-family: var(--mono); margin-top: 5px; }
.vd-comp { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.vd-comp:last-child { border-bottom: none; }
.vd-cstat { font-family: var(--display); font-size: 9.5px; letter-spacing: .08em; padding: 4px 9px; border-radius: 2px; }
.vd-cstat.ok { color: var(--cy); background: rgba(52,229,212,.12); }
.vd-cstat.warn { color: var(--amber); background: rgba(255,153,0,.14); }
.vd-cstat.down { color: var(--coral); background: rgba(255,107,107,.14); }
.vd-comp-more { text-align: center; font-size: 11px; color: var(--mut); padding: 10px; cursor: pointer; font-family: var(--mono); }
.vd-comp-more:hover { color: var(--cy); }
.site-verify { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 10px; letter-spacing: .08em; padding: 5px 10px; border: 1px solid var(--line2); color: var(--cy); transition: .15s; text-decoration: none; }
.site-verify:hover { background: rgba(52,229,212,.1); box-shadow: 0 0 12px rgba(52,229,212,.3); }
.site-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

/* vendor drawer action buttons */
.vd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.vbtn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-family: var(--display); font-size: 11px; letter-spacing: .04em; font-weight: 600; border: 1px solid var(--line2); color: var(--ink2); background: var(--panel2); transition: .15s; text-decoration: none; cursor: pointer; }
.vbtn:hover { border-color: var(--cy); color: var(--cy); }
.vbtn.primary { border-color: var(--cy); color: var(--cy); }
.vbtn.primary:hover { background: rgba(52,229,212,.1); box-shadow: 0 0 12px rgba(52,229,212,.3); }
.vbtn.on { border-color: var(--amber); color: var(--amber); background: rgba(255,153,0,.1); }
.vbtn.on-red { border-color: var(--coral); color: var(--coral); background: rgba(255,107,107,.1); }
.vbtn.danger:hover { border-color: var(--coral); color: var(--coral); }

/* =================================================================
   ARIA PRESENCE — persistent avatar dock (bottom-right)
   ================================================================= */
.aria-dock { position: fixed; right: 22px; bottom: 22px; z-index: 85; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.aria-orb { position: relative; width: 76px; height: 76px; cursor: pointer; filter: drop-shadow(0 0 14px rgba(52,229,212,.4)); transition: transform .2s; }
.aria-orb:hover { transform: scale(1.06); }
.aria-orb.alert { filter: drop-shadow(0 0 14px rgba(255,153,0,.5)); }
.aria-orb svg.frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.aria-orb .av { position: absolute; inset: 8px; z-index: 1; }
.aria-orb image-slot { width: 100%; height: 100%; }
.aria-orb .sdot { position: absolute; right: 4px; top: 6px; z-index: 3; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--bg2); }
.aria-orb .wv { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); display: flex; gap: 2px; align-items: flex-end; height: 12px; z-index: 3; }
.aria-orb .wv i { width: 2px; border-radius: 2px; }

.aria-panel { width: 330px; background: var(--bg2); border: 1px solid var(--line2); box-shadow: -10px 14px 50px rgba(0,0,0,.55), 0 0 30px rgba(52,229,212,.12);
  animation: slidein .26s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.aria-panel .ap-stage { position: relative; height: 270px; background:
  radial-gradient(90% 70% at 50% 30%, rgba(52,229,212,.12), transparent 70%), linear-gradient(180deg, #0a1820, #060d14);
  border-bottom: 1px solid var(--line); overflow: hidden; }
.aria-panel .ap-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(52,229,212,.05) 1px, transparent 1px); background-size: 100% 22px; }
.aria-panel .ap-scan { position: absolute; left: 0; right: 0; height: 40%; pointer-events: none;
  background: linear-gradient(rgba(52,229,212,.07), transparent); animation: scanY 5s linear infinite; }
.aria-panel .ap-stage-tag { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 7px;
  font-family: var(--display); font-size: 9.5px; letter-spacing: .16em; color: var(--ink2); z-index: 3;
  background: rgba(5,10,16,.5); padding: 5px 9px; border: 1px solid var(--line); }
.aria-panel .ap-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 28px; height: 28px; background: rgba(5,10,16,.5); }
.aria-panel .ap-hint { position: absolute; bottom: 9px; right: 12px; z-index: 3; font-family: var(--mono); font-size: 9px; color: var(--mut); letter-spacing: .05em; }
.aria-panel .ap-id { padding: 13px 16px 4px; }
.aria-panel .ap-id b { font-family: var(--display); font-size: 17px; letter-spacing: .22em; display: block; }
.aria-panel .ap-id .role { font-size: 10px; color: var(--mut); letter-spacing: .06em; }
.aria-panel .ap-speech { padding: 8px 16px 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.aria-panel .ap-speech .q { color: var(--cy); font-family: var(--display); font-size: 10px; letter-spacing: .14em; display: block; margin-bottom: 7px; }
/* Multi-turn chat log: scrollable, bubbles for you (cyan, right) vs ARIA (panel, left). */
.aria-panel .ap-log { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; max-height: 200px; overflow-y: auto; overscroll-behavior: contain; }
.aria-panel .ap-log::-webkit-scrollbar { width: 6px; }
.aria-panel .ap-log::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 3px; }
.aria-panel .ap-msg { font-size: 12.5px; line-height: 1.5; padding: 8px 11px; border-radius: 11px; max-width: 86%; word-wrap: break-word; }
.aria-panel .ap-msg.you { align-self: flex-end; background: rgba(52,229,212,.12); border: 1px solid rgba(52,229,212,.30); color: var(--ink); border-bottom-right-radius: 3px; }
.aria-panel .ap-msg.aria { align-self: flex-start; background: var(--solid); border: 1px solid var(--line); color: var(--ink2); border-bottom-left-radius: 3px; }
.aria-panel .ap-msg.aria.blocked { border-color: var(--amber); }
.aria-panel .ap-msg.aria.err { border-color: var(--coral); color: var(--coral); }
.aria-panel .ap-msg strong { color: var(--cy); font-weight: 600; }
.aria-panel .ap-msg code { font-family: var(--mono); font-size: 11px; background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 4px; }
.aria-panel .ap-msg.typing { padding: 11px 13px; }
.aria-panel .ap-dots { display: inline-flex; gap: 4px; }
.aria-panel .ap-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cy); display: inline-block; animation: apdot 1.2s ease-in-out infinite; }
.aria-panel .ap-dots i:nth-child(2) { animation-delay: .18s; }
.aria-panel .ap-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes apdot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* S9: live agent-loop progress line (replaces the dots while a tool step runs) */
.aria-panel .ap-progress { font-size: 12px; color: var(--cy); opacity: .85; letter-spacing: .2px; animation: apFade .25s ease; }
@keyframes apFade { from { opacity: 0; } to { opacity: .85; } }
.aria-panel .ap-wave { display: flex; gap: 3px; align-items: center; height: 22px; padding: 0 16px 14px; }
.aria-panel .ap-wave i { width: 3px; border-radius: 2px; }
.aria-panel .ap-moods { display: flex; gap: 6px; padding: 0 16px 14px; }
.moodbtn { flex: 1; padding: 7px 0; font-family: var(--display); font-size: 10.5px; letter-spacing: .08em; color: var(--ink2); border: 1px solid var(--line); background: var(--panel2); transition: .14s; }
.moodbtn:hover { border-color: var(--line2); color: var(--cy); }
.moodbtn.on { background: var(--cy); color: #042520; border-color: var(--cy); font-weight: 700; }
.pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pal { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); color: var(--ink2); position: relative; transition: .15s; text-align: left; }
.pal:hover { border-color: var(--line2); }
.pal.on { border-color: var(--cy); color: var(--ink); }
.pal-sw { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.pal-nm { font-family: var(--display); font-size: 11.5px; letter-spacing: .04em; }
.pal-chk { margin-left: auto; color: var(--cy); display: flex; }
.aria-panel .ap-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.aria-panel .ap-input { flex: 1; padding: 9px 12px; background: var(--solid); border: 1px solid var(--line); color: var(--ink); font-size: 12px; font-family: var(--mono); outline: none; }
.aria-panel .ap-input:focus { border-color: var(--cy); }
.av3d-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mut); font-family: var(--mono); font-size: 9px; pointer-events: none; }
.av3d-spin { width: 26px; height: 26px; border: 2px solid var(--line2); border-top-color: var(--cy); border-radius: 50%; animation: spin 1s linear infinite; }
@media (max-width: 720px) { .aria-dock { right: 12px; bottom: 12px; } .aria-panel { width: 290px; } }

/* =================================================================
   EXTRACTED INLINE STYLES — moved from JSX for lint compliance
   ================================================================= */

/* hud-avatar: hex inner ring animation */
.hex-inner-ring { transform-origin: 50px 50px; animation: spin 14s linear infinite; }

/* hud-avatar: corner accents with dynamic color via CSS custom property */
.crn[style] { border-color: var(--crn-color); }

/* hud-avatar: wave equaliser bars (panel + orb) */
.ap-wave-bar { height: 18px; width: 3px; border-radius: 2px; background: var(--eq-color); box-shadow: 0 0 5px var(--eq-color); animation: eq var(--eq-dur) ease-in-out var(--eq-delay) infinite; }
.wv-bar { height: 10px; width: 2px; border-radius: 2px; background: var(--eq-color); box-shadow: 0 0 4px var(--eq-color); animation: eq var(--eq-dur) ease-in-out var(--eq-delay) infinite; }

/* hud-avatar: orb avatar hex clip + sdot status dot */
.av-hex { clip-path: polygon(50% 1%, 93% 25%, 93% 75%, 50% 99%, 7% 75%, 7% 25%); }
.av-full { width: 100%; height: 100%; }
.sdot[style] { background: var(--sdot-color); box-shadow: 0 0 8px var(--sdot-color); }
.sdot-alert { animation: pulse 1.5s infinite; }

/* hud-vendor: drawer header */
.dh-row { gap: 11px; }
.dh-title { font-size: 18px; }

/* hud-vendor: uptime % color via custom property */
.vd-uptime .pc[style] { color: var(--uptime-color); }

/* hud-vendor: uptime bar segment status colors */
.vd-bar .vd-seg-ok { background: var(--ok); }
.vd-bar .vd-seg-warn { background: var(--amber); }
.vd-bar .vd-seg-down { background: var(--coral); }

/* hud-vendor: full-width acknowledge button */
.btn-full { width: 100%; display: flex; justify-content: center; }

/* hud-vendor: icon button no-shrink */
.iconbtn-noshrink { flex-shrink: 0; }

/* hud-vendor: dependency tag list */
.dep-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dep-tag { text-transform: none; letter-spacing: 0; }
.dep-remove { cursor: pointer; color: var(--coral); }

/* hud-api: stub variants */
.stub-compact { padding: 40px; min-height: 200px; }
.stub-compact-sm { padding: 40px; min-height: 120px; }
.stub-label { color: var(--mut); }
.stub-error-title { color: var(--coral); }
.ri-empty-padded { padding: 24px; }

/* hud-ops: postmortem labels */
.pm-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: 0.6; margin: 8px 0 2px; }
.pm-list { margin: 2px 0 0; padding-left: 18px; }

/* hud-ops: stub-padded (for empty-state stubs) */
.stub-padded { padding: 50px; }

/* hud-ops: postmortem copy button */
.pm-copy-btn { margin-left: auto; font-size: 11px; padding: 2px 8px; }

/* hud-ops: proposal chips row with spacing */
.chips-row-spaced { margin-bottom: 16px; }

/* hud-ops: proposal state value color */
.prop-state-val { color: var(--ink2); }

/* hud-ops: detector pct + gbar via custom properties */
.det .pct[style] { color: var(--det-color); }
.gbar-fill { display: block; height: 100%; width: var(--gbar-w); background: var(--gbar-color); box-shadow: 0 0 8px var(--gbar-color); transition: width 1s; }

/* hud-core: AriaMark glow filter */
.aria-mark-glow { filter: drop-shadow(0 0 4px var(--cy)); }

/* hud-core: Wave equaliser bar (generic) */
.wave-bar {
  display: inline-block; border-radius: 2px; transform-origin: center;
  animation: eq var(--eq-dur, .9s) ease-in-out var(--eq-delay, 0s) infinite;
}

/* hud-core: Reactor wrapper sizing via custom property */
.reactor[style] { width: var(--reactor-size); height: var(--reactor-size); }

/* hud-core: orbital node styling via custom properties */
.onode[style] { color: var(--onode-color); background: var(--onode-color); }
.onode-pulse { animation: pulse 1.5s ease-in-out infinite; }

/* hud-core: Dot status indicator */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.status-dot-pulse { animation: pulse 1.6s infinite; }

/* hud-core: VLogo sizing via custom property */
.vm-logo[style] { width: var(--logo-size); height: var(--logo-size); }
.vm-logo-img { width: 66%; height: 66%; object-fit: contain; border-radius: 3px; }

/* hud-deck: label margin-top helper */
.mt-3 { margin-top: 3px; }

/* hud-deck: stat value issue highlight */
.hi-stat-issue { color: var(--amber); }

/* hud-deck: vendor card left border via custom property */
.vmod[style] { border-left: 3px solid var(--vmod-border); }
.crn[style] { border-color: var(--crn-color); }

/* hud-deck: vendor status color via custom property */
.vm-ret-color { color: var(--vm-color); }
.vm-status-color { color: var(--vm-color); }

/* hud-deck: empty grid stub */
.stub-grid-full { grid-column: 1 / -1; padding: 40px; }

/* hud-deck: mini-changes/activity panel padding */
.intel-padded { padding: 16px 18px; }

/* hud-deck: changes max-height */
.changes-mini { max-height: 300px; }

/* hud-deck: change pill color transition (up/down) */
.chg-pill-up { color: var(--cy); }
.chg-pill-down { color: var(--coral); }

/* hud-deck: live activity header */
.live-hdr { display: flex; align-items: center; gap: 6px; }

/* hud-deck: activity feed max-height */
.live-feed-mini { max-height: 300px; }

/* hud-deck: value strip ok color */
.vc-ok { color: var(--ok); }

/* hud-deck: value strip cost unit */
.vc-unit { font-size: 11px; color: var(--mut); }

/* hud-deck: test-error sub text */
.vd-sub-error { color: var(--coral); }

/* hud-deck: ri-s status color via custom property */
.ri-s[style] { color: var(--ri-color); }

/* hud-deck: duo margin */
.duo-mt { margin-top: 16px; }

/* hud-intel: hero margin-bottom */
.hero-mb { margin-bottom: 16px; }

/* hud-intel: strack progress bar width via custom property */
.strack i[style] { width: var(--strack-w); }

/* hud-intel: skill unlock check icon color */
.sun-check-cy { color: var(--cy); }
.sun-check-violet { color: var(--violet); }

/* hud-intel: activity bottom wrapper */
.activity-mt { margin-top: 16px; }

/* hud-intel: report header row */
.report-header { justify-content: space-between; margin-bottom: 18px; }
.intro-flush { margin: 0; }

/* hud-intel: report row gap */
.row-gap-8 { gap: 8px; }

/* hud-intel: KPI issue value highlight */
.kpi-issue { color: var(--amber); }

/* hud-intel: SLA panel padded */
.panel-sla { padding: 16px 20px; }

/* hud-intel: SLA helper text */
.sla-helper { font-size: 11.5px; color: var(--mut); margin: 0 0 14px; }

/* hud-intel: SLA bar fill via custom properties */
.sla-fill[style] { background: var(--sla-color); box-shadow: 0 0 8px var(--sla-color); }
.sla-pct[style] { color: var(--sla-color); }

/* hud-intel: briefs summary panel */
.briefs-summary { padding: 16px 20px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.briefs-recovered-wrap { display: flex; align-items: baseline; gap: 10px; }
.briefs-recovered { font-family: var(--mono); font-size: 32px; font-weight: 600; color: var(--ok); }
.briefs-cost { font-size: 13px; color: var(--ink2); }
.briefs-cost-val { color: var(--cy); }
.briefs-winrate-wrap { display: flex; align-items: baseline; gap: 8px; }
.briefs-winrate { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--cy); }

/* hud-intel: brief cell estimated value highlight */
.brief-cell-est { color: var(--cy); }

/* hud-intel: journal duration/severity values */
.jm-ink { color: var(--ink); }
.jm-major { color: var(--coral); }
.jm-minor { color: var(--amber); }

/* ── Voice Control (hud-voice) — floating mic, palette-aware ───────────── */
/* Sits just LEFT of the ARIA avatar dock (.aria-dock: 76px orb at right:22,
   bottom:22, panel expands upward) so the two never overlap in either state. */
.voice-ctl { position: fixed; right: 120px; bottom: 26px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.voice-mic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--bg); background: var(--cy); border: 1px solid var(--line2);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.voice-mic:hover { transform: translateY(-1px) scale(1.04); }
.voice-mic.on { background: var(--coral); color: #fff; animation: voicePulse 1.2s ease-out infinite; }
@keyframes voicePulse {
  0%   { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 0 0 rgba(255,107,107,.55); }
  100% { box-shadow: 0 6px 22px rgba(0,0,0,.45), 0 0 0 14px rgba(255,107,107,0); }
}
.voice-panel {
  width: 320px; max-width: 78vw; padding: 12px 13px; background: var(--solid);
  border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-family: var(--sans); color: var(--ink);
}
.voice-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.voice-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--mut); }
.voice-tag.live { color: var(--coral); }
.voice-x { background: none; border: none; color: var(--mut); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
.voice-x:hover { color: var(--ink); }
.voice-heard { font-size: 12px; color: var(--ice); font-style: italic; margin-bottom: 6px; }
.voice-ans { font-size: 13px; color: var(--ink); line-height: 1.45; white-space: pre-wrap; }
.voice-ans.busy { color: var(--mut); }
.voice-hint { font-size: 11px; color: var(--mut); line-height: 1.5; }