/* IFC Sentinel — Material-3 dark tokens (see UI Design Reference §2) */
:root {
  --bg: #10141a;
  --s-lowest: #0a0e15;
  --s-low: #181c22;
  --s: #1c2027;
  --s-high: #262a31;
  --s-highest: #31353c;
  --s-bright: #353941;
  --outline: #a18d7e;
  --outline-v: #534437;
  --line: #2b3038;
  --on: #dfe2ec;
  --on-v: #d9c2b2;
  --muted: #9aa1ad;
  --dim: #6b7382;

  --primary: #ffb779;
  --on-primary: #4c2700;
  --primary-container: #e08b38;
  --on-primary-container: #542c00;
  --secondary: #80cfff;
  --secondary-container: #00729d;
  --tertiary: #8ad987;
  --tertiary-container: #63b063;
  --error: #ffb4ab;
  --error-container: #93000a;

  /* severity — one colour means one thing everywhere */
  --sev-pass: #8ad987;
  --sev-info: #80cfff;
  --sev-warn: #ffb779;
  --sev-fail: #ffb4ab;
  --sev-pass-bg: rgba(138, 217, 135, .12);
  --sev-info-bg: rgba(128, 207, 255, .12);
  --sev-warn-bg: rgba(255, 183, 121, .14);
  --sev-fail-bg: rgba(255, 120, 105, .16);

  --r: .25rem; --r-lg: .5rem; --r-xl: .75rem;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hdr-h: 56px;
  --rail-w: 44px;
  --lpanel-w: 340px;
  --insp-w: 340px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--on); }
body { font: 400 13px/18px var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--secondary); }
::selection { background: rgba(255, 183, 121, .35); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.muted { color: var(--muted); }
.grow { flex: 1; }
.hide { display: none !important; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--s-highest) transparent; }

/* ---------- app grid ---------- */
.app { display: grid; height: 100dvh; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: var(--hdr-h) 1fr; grid-template-areas: "hdr hdr" "rail main"; }
.hdr { grid-area: hdr; }
.rail { grid-area: rail; }
.main { grid-area: main; min-width: 0; min-height: 0; position: relative; }

/* ---------- header ---------- */
.hdr { display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); min-width: 0; }
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand-mark { width: 28px; height: 28px; color: var(--primary); }
.brand-name { font: 600 14px/15px var(--sans); letter-spacing: -.01em; }
.brand-ver { font: 400 11px var(--mono); color: var(--dim); border: 1px solid var(--line); padding: 1px 5px; border-radius: var(--r); }
.hdr-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.split-btn { display: flex; }
.split-btn .btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.split-btn .btn-caret { border-radius: 0 var(--r) var(--r) 0; border-left: 1px solid rgba(0,0,0,.25); padding: 0 4px; }
.model-picker { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--s-low); font: 400 12px var(--mono); max-width: 260px; min-width: 0; }
.model-picker .mp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-picker:hover { border-color: var(--outline-v); }
.tabs-main { display: flex; align-self: stretch; margin-left: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs-main button { padding: 0 14px; font: 500 14px/18px var(--sans); color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs-main button:hover { color: var(--on); background: var(--s-low); }
.tabs-main button.active { color: var(--primary); border-bottom-color: var(--primary); background: var(--s-low); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.mem { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.mem-txt { display: flex; justify-content: space-between; gap: 8px; font: 400 11px var(--mono); }
.mem-txt .lab { color: var(--muted); }
.mem-bar { height: 4px; border-radius: 2px; background: var(--s-highest); overflow: hidden; }
.mem-fill { height: 100%; width: 0; background: var(--tertiary); transition: width .3s, background .3s; }
.mem.warn .mem-fill { background: var(--primary); }
.mem.crit .mem-fill { background: var(--error); }
.host-chip { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--s-lowest); font: 400 11px var(--mono); white-space: nowrap; }
.host-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.host-chip.ok .dot { background: var(--tertiary); box-shadow: 0 0 6px var(--tertiary); }
.host-chip.down .dot { background: var(--error); }
.host-chip .sep { color: var(--dim); }
.host-chip .host-name { color: var(--muted); }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r); color: var(--on-v); }
.icon-btn:hover { background: var(--s-high); color: var(--on); }
.icon-btn.sm { width: 26px; height: 26px; }
.icon-btn.sm .ms { font-size: 16px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font: 600 13px var(--sans); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r); font: 500 13px var(--sans); white-space: nowrap; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.btn .ms { font-size: 18px; }
.btn-primary { background: var(--primary-container); color: #1f1000; }
.btn-primary:hover { background: #ec9947; }
.btn-tonal { background: var(--s-high); color: var(--on); border-color: var(--line); }
.btn-tonal:hover { background: var(--s-highest); }
.btn-ghost { color: var(--on-v); border-color: var(--line); }
.btn-ghost:hover { background: var(--s-high); color: var(--on); }
.btn-danger { background: var(--error-container); color: #ffdad6; }
.btn-sm { height: 26px; padding: 0 8px; font-size: 12px; }
.btn-sm .ms { font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled], button[disabled] { opacity: .45; cursor: not-allowed; }
.btn-mono { font-family: var(--mono); font-weight: 400; font-size: 12px; }

/* ---------- rail ---------- */
.rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; background: var(--bg); border-right: 1px solid var(--line); }
.rail button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r); color: var(--muted); position: relative; }
.rail button:hover { background: var(--s-high); color: var(--on); }
.rail button.active { background: rgba(255, 183, 121, .12); color: var(--primary); box-shadow: inset 2px 0 0 var(--primary); }
.rail .ms { font-size: 20px; }
.rail-gap { flex: 1; }

/* tooltips */
[data-tip] { position: relative; }
.tip { position: fixed; z-index: 1000; pointer-events: none; background: var(--s-highest); color: var(--on); border: 1px solid var(--line); padding: 4px 8px; border-radius: var(--r); font: 400 11px var(--mono); white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.4); }

/* ---------- views ---------- */
.view { display: none; height: 100%; flex-direction: column; min-height: 0; }
.view.active { display: flex; }

.hud { display: flex; align-items: center; gap: 14px; min-height: 34px; padding: 4px 12px; border-bottom: 1px solid var(--line); background: var(--bg); font: 400 12px var(--mono); color: var(--muted); overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex: none; }
.hud b { color: var(--primary); font-weight: 500; letter-spacing: .02em; }
.hud .sep { color: var(--line); }
.hud .ok { color: var(--tertiary); }
.hud .sec { color: var(--secondary); }
.hud .warn { color: var(--primary); }
.hud .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tertiary); margin-right: 5px; vertical-align: 1px; }
.hud .hud-right { margin-left: auto; display: flex; gap: 14px; align-items: center; }

/* ---------- takeoff ---------- */
.takeoff { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--lpanel-w) 1fr var(--insp-w); }
.takeoff.collapsed { grid-template-columns: 0 1fr var(--insp-w); }
.takeoff.collapsed .lpanel { visibility: hidden; }
.takeoff.no-insp { grid-template-columns: var(--lpanel-w) 1fr 0; }
.takeoff.collapsed.no-insp { grid-template-columns: 0 1fr 0; }
.takeoff.no-insp .inspector { visibility: hidden; }

.lpanel { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--s-low); border-right: 1px solid var(--line); }
.panel-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; }
.panel-resize:hover, .panel-resize.drag { background: rgba(255, 183, 121, .35); }
.ltabs { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); flex: none; }
.ltabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: var(--r); font: 500 13px var(--sans); text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.ltabs button:hover { color: var(--on); background: var(--s-high); }
.ltabs button.active { background: var(--primary-container); color: #1f1000; }
.ltabs .ms { font-size: 17px; }
.badge-count { background: var(--error-container); color: #ffdad6; border-radius: 9px; padding: 0 6px; font: 600 11px/17px var(--mono); }
.lpanel-body { flex: 1; overflow-y: auto; padding: 10px 10px 14px; min-height: 0; }

.sect { margin-bottom: 14px; }
.sect-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on); }
.sect-h .aside { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.sect-h .link { font-weight: 400; color: var(--primary); text-transform: none; letter-spacing: 0; cursor: pointer; }
.check-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.check-row input { accent-color: var(--primary-container); width: 16px; height: 16px; margin: 0; }
.check-row .count { margin-left: auto; font: 500 12px var(--mono); color: var(--primary); background: var(--s-lowest); padding: 2px 8px; border-radius: var(--r); }

.seg { display: flex; gap: 4px; background: var(--s-lowest); border-radius: var(--r); padding: 3px; }
.seg button { flex: 1; height: 28px; border-radius: var(--r); font: 400 12px var(--mono); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg button:hover { color: var(--on); }
.seg button.active { background: var(--primary-container); color: #1f1000; font-weight: 500; }
.seg button .n { opacity: .75; }
.seg.tall button { height: auto; padding: 6px 4px; flex-direction: column; gap: 0; line-height: 16px; }

.bubbles { display: flex; flex-wrap: wrap; gap: 4px; }
.bubble { height: 24px; padding: 0 8px; border-radius: var(--r); font: 400 12px var(--mono); color: var(--on-v); border: 1px solid transparent; display: inline-flex; align-items: center; gap: 4px; }
.bubble:hover { background: var(--s-high); color: var(--on); }
.bubble.active { background: rgba(255, 183, 121, .14); color: var(--primary); border-color: rgba(255, 183, 121, .35); font-weight: 500; }
.bubble .n { color: var(--dim); }
.bubble.active .n { color: var(--primary); opacity: .8; }
.prio-high { color: var(--error); }
.prio-medium { color: var(--primary); }
.prio-low { color: var(--secondary); }

.search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); }
.search:focus-within { border-color: var(--primary); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: 400 13px var(--mono); }
.search .ms { color: var(--muted); }
.search button .ms { font-size: 17px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r); background: var(--s); border: 1px solid var(--line); font: 400 12px var(--mono); color: var(--on); }
.chip:hover { border-color: var(--outline-v); background: var(--s-high); }
.chip .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.chip .n { color: var(--dim); }
.chip.absent { opacity: .45; }
.chip.active { background: rgba(255, 183, 121, .16); border-color: var(--primary-container); color: var(--primary); font-weight: 500; }
.chip.active .n { color: var(--primary); }
.chip-tools { display: flex; gap: 2px; }

.rules-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rule-q { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r); background: var(--s); border: 1px solid var(--line); cursor: pointer; }
.rule-q:hover { border-color: var(--outline-v); }
.rule-q.active { border-color: var(--primary-container); background: rgba(255,183,121,.07); }
.rule-q .rq-prop { font: 400 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-q .rq-pset { font: 400 11px var(--mono); color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-q .rq-cov { font: 500 11px var(--mono); text-align: right; }

/* authority badge */
.auth { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: var(--r); font: 600 11px var(--mono); background: var(--s-highest); color: var(--secondary); letter-spacing: .02em; white-space: nowrap; }
.auth.BCA { color: #ffb779; } .auth.URA { color: #80cfff; } .auth.SCDF { color: #ffb4ab; } .auth.LTA { color: #b8c4ff; }
.auth.NEA { color: #c5e1a5; } .auth.NPARKS { color: #8ad987; } .auth.PUB { color: #7fdbda; } .auth.IFC-SG, .auth.IFCSG { color: #e1bee7; }

/* severity pill */
.sev { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.sev.pass { color: var(--sev-pass); background: var(--sev-pass-bg); }
.sev.info { color: var(--sev-info); background: var(--sev-info-bg); }
.sev.warn { color: var(--sev-warn); background: var(--sev-warn-bg); }
.sev.fail { color: var(--sev-fail); background: var(--sev-fail-bg); }
.sev.none { color: var(--dim); background: var(--s-high); }
.c-pass { color: var(--sev-pass); } .c-info { color: var(--sev-info); } .c-warn { color: var(--sev-warn); } .c-fail { color: var(--sev-fail); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* takeoff dock (quantum takeoff) */
.takeoff-dock { flex: none; border-top: 1px solid var(--line); background: var(--s-low); padding: 10px; max-height: 45%; overflow-y: auto; }
.dock-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font: 600 14px var(--sans); text-transform: uppercase; letter-spacing: .02em; }
.dock-h .ms { color: var(--primary); margin-right: 6px; }
.dock-h .aside { font: 400 11px var(--mono); color: var(--muted); text-transform: none; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.card { background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; min-width: 0; cursor: pointer; }
.card:hover { border-color: var(--outline-v); }
.card.active { border-color: var(--primary-container); }
.card .k { font: 400 12px var(--mono); color: var(--on-v); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .v { font: 600 20px/26px var(--mono); color: var(--on); margin-top: 2px; }
.card .v small { font: 400 11px var(--mono); color: var(--muted); margin-left: 3px; }
.card .v.pri { color: var(--primary); }
.card .v.sec { color: var(--secondary); }
.card .v.zero { color: var(--muted); }
.card .meter { height: 4px; background: var(--s-highest); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.card .meter div { height: 100%; background: var(--primary-container); }
.card .meter.sec div { background: var(--secondary); }
.card .sub { font: 400 11px var(--mono); color: var(--muted); margin-top: 4px; }
.explain { margin-top: 8px; padding: 8px; border: 1px solid var(--outline-v); border-radius: var(--r); background: rgba(255,183,121,.06); font: 400 12px/17px var(--sans); }
.explain b { color: var(--primary); font-family: var(--mono); font-weight: 500; }
.explain code { font: 400 11.5px var(--mono); color: var(--secondary); }
.explain .ms { color: var(--primary); font-size: 16px; vertical-align: -3px; margin-right: 4px; }

/* ---------- viewport ---------- */
.viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #1a1f27 0%, #10141a 70%); }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.dropzone { position: absolute; inset: 16px; display: grid; place-items: center; border: 1.5px dashed var(--outline-v); border-radius: var(--r-xl); background: rgba(16, 20, 26, .6); z-index: 2; transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--primary); background: rgba(255, 183, 121, .07); }
.dropzone.mini { inset: auto 16px 16px auto; width: auto; padding: 0; border: 0; background: none; pointer-events: none; }
.dropzone.mini .dz-inner { display: none; }
.dz-inner { text-align: center; max-width: 420px; padding: 24px; }
.dz-ico { font-size: 48px; color: var(--primary); }
.dz-title { font: 600 20px/24px var(--sans); margin: 10px 0 6px; }
.dz-sub { color: var(--muted); margin-bottom: 18px; }
.dz-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.app.dragging .dropzone { display: grid !important; inset: 16px; border-color: var(--primary); background: rgba(255,183,121,.08); pointer-events: auto; }
.app.dragging .dropzone .dz-inner { display: block; }

.legend { position: absolute; top: 10px; left: 10px; z-index: 3; min-width: 230px; max-width: 300px; background: rgba(10, 14, 21, .88); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 10px; backdrop-filter: blur(6px); }
.legend-h { display: flex; align-items: center; gap: 6px; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.legend-h .grow { flex: 1; }
.legend-rows { display: flex; flex-direction: column; gap: 3px; }
.legend-row { display: flex; align-items: center; gap: 8px; font: 400 12px var(--mono); padding: 2px 4px; border-radius: var(--r); cursor: pointer; }
.legend-row:hover { background: var(--s-high); }
.legend-row.off { opacity: .4; }
.legend-row .lbl { flex: 1; }
.legend-row .n { color: var(--on); }
.legend-sub { font: 400 11px var(--mono); color: var(--muted); margin-top: 6px; max-width: 280px; white-space: normal; }

.vp-top { position: absolute; top: 10px; right: 64px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vp-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; background: rgba(10,14,21,.85); border: 1px solid var(--line); border-radius: var(--r); font: 400 11px var(--mono); }
.vp-pill.active { background: var(--primary-container); color: #1f1000; border-color: var(--primary-container); }
.vp-pill .ms { font-size: 16px; }
.vp-pill select { background: transparent; border: 0; outline: 0; font: inherit; color: inherit; }
.vp-pill select option { background: var(--s-high); color: var(--on); }

.vtools { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 5px; background: rgba(10,14,21,.85); border: 1px solid var(--line); border-radius: var(--r-lg); }
.vtools button { width: 38px; height: 38px; border-radius: var(--r); display: grid; place-items: center; color: var(--on-v); }
.vtools button:hover { background: var(--s-high); color: var(--on); }
.vtools button.active { background: var(--primary-container); color: #1f1000; }
.vtools button.half { background: rgba(255,183,121,.15); color: var(--primary); }
.vtools .ms { font-size: 20px; }

.vp-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: linear-gradient(transparent, rgba(10,14,21,.92) 40%); font: 400 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; }
.vp-foot b { color: var(--on); font-weight: 500; }
.vp-foot .ok { color: var(--tertiary); }
.vp-foot .ms { font-size: 15px; vertical-align: -3px; }

.loading { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(10,14,21,.55); }
.loading-card { width: min(420px, 90%); background: var(--s-high); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.loading-title { font: 600 14px var(--sans); margin-bottom: 10px; }
.loading-sub { font: 400 12px var(--mono); color: var(--muted); margin-top: 8px; white-space: pre-line; }
.bar { height: 6px; background: var(--s-lowest); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--tertiary); transition: width .2s; }

.plan-badge { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 3; }

/* ---------- inspector ---------- */
.inspector { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--s-low); border-left: 1px solid var(--line); }
.insp-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.insp-head { padding: 12px; border-bottom: 1px solid var(--line); }
.insp-top { display: flex; align-items: center; gap: 6px; }
.type-tag { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border-radius: var(--r); background: var(--primary-container); color: #1f1000; font: 600 12px var(--mono); }
.insp-title { font: 600 16px/20px var(--sans); margin: 8px 0 2px; word-break: break-word; }
.insp-guid { font: 400 11px var(--mono); color: var(--dim); word-break: break-all; }
.insp-guid b { color: var(--secondary); font-weight: 400; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.kpi { background: var(--s-lowest); padding: 8px 6px; text-align: center; }
.kpi .k { font: 400 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kpi .v { font: 600 15px/20px var(--mono); color: var(--primary); }
.kpi .v.sec { color: var(--secondary); }
.pset { padding: 10px 12px 4px; }
.pset-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.pset-h .nm { font: 600 13px var(--mono); color: var(--primary); word-break: break-all; }
.pset-h .nm.sg { color: var(--secondary); }
.pset-h .tag { font: 400 10px var(--mono); padding: 2px 6px; border-radius: var(--r); background: var(--s-highest); color: var(--muted); text-transform: uppercase; flex: none; }
.pset-h .tag.mod { color: var(--primary); background: rgba(255,183,121,.14); }
.pset-h .tag.ok { color: var(--tertiary); background: var(--sev-pass-bg); }
.prow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 6px; border-radius: var(--r); font: 400 12.5px var(--sans); }
.prow:nth-child(even) { background: rgba(255,255,255,.02); }
.prow .pk { color: var(--on-v); word-break: break-word; }
.prow .pv { font: 500 12.5px var(--mono); text-align: right; word-break: break-word; }
.prow .pv.f { color: var(--error); }
.prow .pv.t { color: var(--tertiary); }
.prow .pv.edited { color: var(--primary); }
.prow.editable { cursor: text; }
.prow.editable:hover { background: var(--s-high); }
.prow input { width: 55%; background: var(--s-lowest); border: 1px solid var(--primary); border-radius: var(--r); padding: 3px 6px; font: 400 12px var(--mono); outline: 0; }
.insp-empty { padding: 24px 16px; color: var(--muted); text-align: center; }
.insp-empty .ms { font-size: 36px; color: var(--outline-v); display: block; margin: 0 auto 8px; }
.insp-foot { flex: none; padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.add-prop { margin: 8px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.add-prop input { background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); padding: 5px 7px; font: 400 12px var(--mono); outline: 0; min-width: 0; }
.add-prop input:focus { border-color: var(--primary); }
.add-prop .btn { grid-column: span 2; }

.edits-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(224, 139, 56, .14); border-top: 1px solid var(--primary-container); font: 400 12px var(--mono); }
.edits-bar b { color: var(--primary); }

/* ---------- compliance ---------- */
.tri { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) 1fr minmax(320px, 400px); gap: 8px; padding: 8px; overflow: hidden; }
.pane { background: var(--s-low); border: 1px solid var(--line); border-radius: var(--r-lg); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane-scroll { overflow-y: auto; min-height: 0; flex: 1; padding: 10px; }
.pane-h { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pane-h h2 { margin: 0; font: 600 16px/20px var(--sans); }
.eyebrow { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.big-title { font: 600 20px/24px var(--sans); margin: 4px 0 2px; }
.sub-title { color: var(--muted); font: 400 12.5px var(--sans); }
.yield { background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin: 10px 0; }
.yield-top { display: flex; justify-content: space-between; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.yield-top .pct { color: var(--on); }
.stack { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--s-highest); margin: 8px 0; }
.stack > div { height: 100%; }
.yield-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font: 400 12px var(--mono); }
.yield-grid > div { display: flex; justify-content: space-between; }
.engine { background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; margin-top: 8px; font: 400 12px var(--mono); }
.engine .row { display: flex; justify-content: space-between; }
.engine .ok { color: var(--tertiary); }
.reg-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.reg-item { display: grid; grid-template-columns: 18px auto 1fr auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: var(--r); font: 400 12px var(--sans); cursor: pointer; }
.reg-item:hover { background: var(--s-high); }
.reg-item input { accent-color: var(--primary-container); margin: 0; }
.reg-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-item .st { font: 400 11px var(--mono); }

.findings { display: flex; flex-direction: column; }
.f-head, .f-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px 120px 96px; gap: 10px; align-items: center; padding: 10px 12px; }
.f-head { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--s-low); z-index: 1; }
.f-row { border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.f-row:hover { background: var(--s); }
.f-row.active { background: var(--s-high); border-left-color: var(--primary-container); }
.f-row .who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f-row .who .badges { display: flex; gap: 4px; flex-wrap: wrap; }
.f-row .who .cid { font: 500 11.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-row .what .t { font: 500 14px/19px var(--sans); }
.f-row .what .d { font: 400 12.5px/17px var(--sans); color: var(--muted); margin-top: 2px; }
.f-row .code { font: 400 11.5px var(--mono); color: var(--secondary); word-break: break-all; }
.f-row .ents { font: 400 11.5px var(--mono); color: var(--muted); }
.f-row .ents b { color: var(--on); font-weight: 600; display: block; }
.f-row .acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.f-compact .f-row .what .d { display: none; }
.logbox { margin: 10px; background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); }
.logbox-h { display: flex; justify-content: space-between; padding: 8px 10px; font: 600 14px var(--sans); color: var(--primary); border-bottom: 1px solid var(--line); }
.logbox-h .aside { font: 400 11px var(--mono); color: var(--muted); }
.logbox pre { margin: 0; padding: 8px 10px; font: 400 11.5px/17px var(--mono); white-space: pre-wrap; color: var(--on-v); max-height: 260px; overflow: auto; }
.logbox pre .lf { color: var(--sev-fail); } .logbox pre .lw { color: var(--sev-warn); } .logbox pre .lo { color: var(--sev-pass); } .logbox pre .li { color: var(--sev-info); }

.detail-block { background: var(--s); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin-bottom: 8px; }
.detail-label { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; display: flex; justify-content: space-between; align-items: center; }
.kv { display: flex; justify-content: space-between; gap: 8px; font: 400 12px var(--mono); padding: 2px 0; }
.kv .k { color: var(--muted); }
.kv .v { text-align: right; word-break: break-word; }
.kv .v.sec { color: var(--secondary); }
.diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.diff > div { background: var(--s-lowest); border-radius: var(--r); padding: 6px; text-align: center; }
.diff .k { font: 400 10.5px var(--mono); color: var(--muted); text-transform: uppercase; }
.diff .v { font: 600 17px var(--mono); }
.diff .delta { background: rgba(147, 0, 10, .45); }
.diff .delta .v { color: var(--error); }
.guid-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); font: 400 11.5px var(--mono); margin-bottom: 4px; cursor: pointer; }
.guid-row:hover { border-color: var(--outline-v); }
.guid-row .g { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guid-row .ty { color: var(--muted); }
.gate { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--r); background: var(--s); }
.gate .ico { width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; background: var(--error-container); color: #ffdad6; flex: none; }
.gate.ok .ico { background: #1d4a1d; color: var(--tertiary); }
.gate .t { font: 600 15px var(--sans); }
.gate .d { color: var(--muted); font-size: 12.5px; }
.empty { padding: 30px 16px; text-align: center; color: var(--muted); }
.empty .ms { font-size: 40px; display: block; margin: 0 auto 10px; color: var(--outline-v); }

/* ---------- issues ---------- */
.issues-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.issues-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.issues-top h2 { margin: 0; font: 600 16px var(--sans); display: flex; align-items: center; gap: 6px; }
.issues-top h2 .ms { color: var(--primary); }
.counter { display: flex; gap: 10px; padding: 4px 10px; background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); font: 500 12px var(--mono); }
.issues-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 8px; padding: 8px; }
.issue-list { display: flex; flex-direction: column; gap: 6px; }
.issue-card { background: var(--s); border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: var(--r); padding: 10px; cursor: pointer; }
.issue-card:hover { background: var(--s-high); }
.issue-card.active { border-left-color: var(--primary-container); background: var(--s-high); }
.issue-card .ih { display: flex; align-items: center; gap: 6px; font: 400 12px var(--mono); }
.issue-card .ih .ago { margin-left: auto; color: var(--muted); }
.issue-card .it { font: 600 14.5px/19px var(--sans); margin: 6px 0 2px; }
.issue-card .id { color: var(--muted); font-size: 12.5px; }
.issue-card .if { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 400 12px var(--mono); color: var(--on-v); }
.issue-card .if .grow { flex: 1; }
.issue-card.resolved .it { text-decoration: line-through; color: var(--muted); }
.prio-tag { font: 600 11px var(--mono); padding: 2px 6px; border-radius: var(--r); text-transform: uppercase; }
.prio-tag.critical { color: #ffdad6; background: var(--error-container); }
.prio-tag.high { color: var(--sev-fail); background: var(--sev-fail-bg); }
.prio-tag.medium { color: var(--sev-warn); background: var(--sev-warn-bg); }
.prio-tag.low { color: var(--sev-info); background: var(--sev-info-bg); }
.prio-tag.resolved { color: var(--sev-pass); background: var(--sev-pass-bg); }
.ttl { font: 600 20px/26px var(--sans); margin: 8px 0 10px; }
.ttl input { width: 100%; background: transparent; border: 0; border-bottom: 1px dashed transparent; font: inherit; color: var(--on); outline: 0; padding: 2px 0; }
.ttl input:hover { border-bottom-color: var(--outline-v); }
.ttl input:focus { border-bottom-color: var(--primary); }
.fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fields > label { display: flex; flex-direction: column; gap: 2px; background: var(--s-lowest); padding: 6px 8px; font: 400 11px var(--mono); color: var(--muted); text-transform: uppercase; }
.fields select, .fields input { background: transparent; border: 0; outline: 0; font: 500 14px var(--sans); color: var(--on); text-transform: none; padding: 2px 0; }
.fields select option { background: var(--s-high); }
.snap { position: relative; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--s-lowest); }
.snap-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font: 600 14px var(--sans); }
.snap-h .ms { color: var(--primary); }
.snap img { display: block; width: 100%; max-height: 380px; object-fit: contain; background: #0c1016; }
.snap .noimg { padding: 40px; text-align: center; color: var(--muted); }
.snap .cam { padding: 6px 10px; font: 400 11.5px var(--mono); color: var(--muted); border-top: 1px solid var(--line); }
.comment { display: flex; gap: 10px; padding: 10px; background: var(--s); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 6px; }
.comment .av { width: 32px; height: 32px; border-radius: var(--r); display: grid; place-items: center; background: var(--primary-container); color: #1f1000; font: 600 13px var(--sans); flex: none; }
.comment .av.bot { background: var(--s-highest); color: var(--primary); }
.comment .who { font: 600 14px var(--sans); }
.comment .who .role { font: 400 11px var(--mono); color: var(--tertiary); background: var(--sev-pass-bg); padding: 1px 5px; border-radius: var(--r); margin-left: 6px; }
.comment .when { margin-left: auto; font: 400 12px var(--mono); color: var(--muted); }
.comment .txt { margin-top: 4px; white-space: pre-wrap; }
.compose textarea { width: 100%; min-height: 70px; resize: vertical; background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; outline: 0; }
.compose textarea:focus { border-color: var(--primary); }
.compose .row { display: flex; justify-content: space-between; margin-top: 6px; gap: 6px; }

/* ---------- report ---------- */
.report-root { flex: 1; overflow-y: auto; padding: 12px; }
.rep-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.rep-head h1 { margin: 0; font: 600 18px/24px var(--sans); }
.rep-head .ref { font: 500 12px var(--mono); color: var(--primary); margin-left: 6px; }
.rep-head .crumbs { font: 400 12px var(--mono); color: var(--muted); }
.rep-head .crumbs .sec { color: var(--secondary); }
.rep-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rep-card { background: var(--s-low); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; margin-bottom: 10px; }
.rep-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.ring { width: 80px; height: 80px; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .lbl { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 700 15px/16px var(--mono); }
.ring .lbl small { display: block; font: 400 10px var(--mono); color: var(--muted); }
.verdict { font: 700 13px var(--mono); padding: 3px 8px; border-radius: var(--r); display: inline-block; }
.verdict.pass { color: #1f1000; background: var(--tertiary); }
.verdict.cond { color: var(--primary); background: rgba(255,183,121,.14); border: 1px solid var(--primary-container); }
.verdict.fail { color: #ffdad6; background: var(--error-container); }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 6px; }
.stat { background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.stat .k { font: 400 11.5px var(--mono); color: var(--on-v); }
.stat .v { font: 700 18px/24px var(--mono); }
.stat .s { font: 400 11px var(--mono); color: var(--tertiary); }
.auth-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin-top: 14px; }
.auth-bar .top { display: flex; justify-content: space-between; font: 500 12.5px var(--mono); }
.auth-bar .bot { display: flex; justify-content: space-between; font: 400 11px var(--mono); color: var(--muted); }
.auth-bar .track { height: 5px; background: var(--s-highest); border-radius: 3px; margin: 4px 0; overflow: hidden; }
.auth-bar .track div { height: 100%; }
.bignum { font: 600 clamp(19px, 2.2vw, 26px)/1.25 var(--mono); white-space: nowrap; }
.rep-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rep-sec-h { display: flex; align-items: center; gap: 8px; font: 600 15px var(--sans); margin-bottom: 10px; }
.rep-sec-h .ms { color: var(--primary); }
.rep-sec-h .tag { margin-left: auto; font: 500 11px var(--mono); color: var(--tertiary); background: var(--sev-pass-bg); padding: 2px 6px; border-radius: var(--r); }
.hashbox { background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; font: 400 12px var(--mono); margin-bottom: 6px; }
.hashbox .k { color: var(--on-v); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.hashbox .v { color: var(--primary); word-break: break-all; margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid2 > *, .rep-2col > *, .hashbox, .kv .v { min-width: 0; overflow-wrap: anywhere; }
table.lv { width: 100%; border-collapse: collapse; font: 400 12.5px var(--sans); }
table.lv th { text-align: left; font: 600 12px var(--sans); padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.lv td { padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.04); }
table.lv td.num, table.lv th.num { text-align: right; font-family: var(--mono); }
.fail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fail-card { background: var(--s); border: 1px solid var(--line); border-left: 3px solid var(--sev-fail); border-radius: var(--r); padding: 8px 10px; }
.fail-card.warn { border-left-color: var(--sev-warn); }
.fail-card .h { display: flex; gap: 8px; align-items: baseline; }
.fail-card .code { font: 500 12px var(--mono); color: var(--error); }
.fail-card.warn .code { color: var(--primary); }
.fail-card .t { font: 600 14px var(--sans); }
.fail-card .blk { margin-left: auto; font: 400 11.5px var(--mono); color: var(--primary); }
.fail-card .d { color: var(--on-v); font-size: 12.5px; margin: 3px 0; }
.fail-card .f { display: flex; justify-content: space-between; font: 400 11.5px var(--mono); color: var(--muted); }
.fail-card .f a { color: var(--primary); cursor: pointer; text-decoration: none; }
.decl { font: 400 14px/22px var(--sans); color: var(--on); }
.decl b { color: var(--primary); }
.sig { background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); height: 150px; position: relative; }
.sig canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.sig .hint { position: absolute; right: 8px; bottom: 6px; font: 400 11px var(--mono); color: var(--muted); pointer-events: none; }

/* ---------- overlays ---------- */
.menu { position: fixed; z-index: 900; min-width: 220px; max-width: 340px; background: var(--s-high); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); text-align: left; font: 400 13px var(--sans); }
.menu button:hover { background: var(--s-highest); }
.menu button .ms { color: var(--on-v); }
.menu button .hint { margin-left: auto; font: 400 11px var(--mono); color: var(--muted); }
.menu button.on .ms:first-child { color: var(--primary); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu .mh { padding: 6px 10px 2px; font: 600 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sheet { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; background: rgba(5, 8, 12, .6); padding: 16px; }
.sheet-card { width: min(640px, 100%); max-height: 90dvh; display: flex; flex-direction: column; background: var(--s-low); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.sheet-card.wide { width: min(980px, 100%); }
.sheet-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font: 600 16px var(--sans); }
.sheet-h .ms { color: var(--primary); }
.sheet-b { padding: 14px; overflow-y: auto; }
.sheet-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-row label { font: 500 12px var(--mono); color: var(--on-v); text-transform: uppercase; letter-spacing: .04em; }
.form-row input, .form-row select, .form-row textarea { background: var(--s-lowest); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; outline: 0; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--primary); }
.form-row .hint { font: 400 11.5px var(--sans); color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.tree { font: 400 12.5px var(--mono); }
.tree details { margin-left: 14px; }
.tree summary { cursor: pointer; padding: 2px 0; list-style: none; }
.tree summary::before { content: '▸ '; color: var(--dim); }
.tree details[open] > summary::before { content: '▾ '; }
.tree .leaf { margin-left: 14px; padding: 2px 0; cursor: pointer; color: var(--on-v); }
.tree .leaf:hover, .tree summary:hover { color: var(--primary); }
.tree .ty { color: var(--secondary); }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 8px; align-items: flex-start; max-width: 420px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--s-highest); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.5); font: 400 13px var(--sans); animation: tin .2s ease-out; }
.toast .ms { font-size: 18px; }
.toast.ok .ms { color: var(--tertiary); }
.toast.warn .ms { color: var(--primary); }
.toast.err .ms { color: var(--error); }
.toast.info .ms { color: var(--secondary); }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

.drawer { position: fixed; left: var(--rail-w); right: 0; bottom: 0; height: 34vh; z-index: 700; display: flex; flex-direction: column; background: var(--s-lowest); border-top: 1px solid var(--primary-container); box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 12px; font: 600 12px var(--mono); border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; }
.drawer-head .ms { color: var(--primary); }
.drawer-body { flex: 1; margin: 0; padding: 8px 12px; overflow: auto; font: 400 11.5px/17px var(--mono); color: var(--on-v); white-space: pre-wrap; }
.drawer-body .e { color: var(--error); } .drawer-body .w { color: var(--primary); } .drawer-body .o { color: var(--tertiary); }

/* ---------- responsive ---------- */
@media (max-width: 1500px) {
  .tabs-main button { padding: 0 10px; font-size: 13.5px; }
  .host-chip .host-name, .host-chip .sep { display: none; }
  .mem { min-width: 120px; }
  .brand-ver { display: none; }
}
@media (max-width: 1280px) {
  :root { --lpanel-w: 300px; --insp-w: 300px; }
  .mem { min-width: 110px; }
  .host-chip .host-name, .host-chip .sep { display: none; }
  .tri { grid-template-columns: 300px 1fr; }
  .tri > .pane:nth-child(3) { grid-column: 1 / -1; }
  .tri { overflow-y: auto; grid-auto-rows: minmax(0, auto); }
  .f-head, .f-row { grid-template-columns: 100px 1fr 140px 90px; }
  .f-head > :nth-child(4), .f-row > :nth-child(4) { display: none; }
}
@media (max-width: 1024px) {
  .tabs-main button { padding: 0 10px; font-size: 13px; }
  .brand-name, .brand-ver { display: none; }
  .split-btn .lbl { display: none; }
  .takeoff { grid-template-columns: var(--lpanel-w) 1fr; }
  .takeoff .inspector { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 92vw); z-index: 8; box-shadow: -10px 0 30px rgba(0,0,0,.5); }
  .takeoff.no-insp .inspector { display: none; }
  .takeoff.no-insp, .takeoff.collapsed.no-insp { grid-template-columns: var(--lpanel-w) 1fr; }
  .takeoff.collapsed, .takeoff.collapsed.no-insp { grid-template-columns: 0 1fr; }
  .view-takeoff { position: relative; }
  .issues-body { grid-template-columns: 1fr; overflow-y: auto; }
  .rep-2col, .fail-grid { grid-template-columns: 1fr; }
  .auth-bars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --hdr-h: auto; --rail-w: 0px; }
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "hdr" "main"; height: auto; min-height: 100dvh; }
  .rail { display: none; }
  .hdr { flex-wrap: wrap; padding: 8px 10px 0; gap: 8px; }
  .hdr-actions { flex: 1; }
  .model-picker { flex: 1; max-width: none; }
  .hdr-right { order: 2; margin-left: 0; }
  .mem { display: none; }
  .host-chip { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .reg-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r); padding: 4px; }
  .rep-head h1 { font-size: 16px; line-height: 21px; }
  .decl-grid { grid-template-columns: 1fr !important; }
  .tabs-main { order: 3; width: 100%; margin: 0 -10px; padding: 0 4px; }
  .tabs-main button { height: 40px; }
  .view { height: auto; }
  .takeoff, .takeoff.collapsed, .takeoff.no-insp, .takeoff.collapsed.no-insp { display: flex; flex-direction: column; }
  .takeoff .lpanel { order: 3; visibility: visible !important; border-right: 0; border-top: 1px solid var(--line); }
  .takeoff .viewport { order: 1; height: 58dvh; flex: none; }
  .takeoff .inspector { position: static; width: auto; order: 2; box-shadow: none; border-left: 0; border-top: 1px solid var(--line); max-height: 70dvh; }
  .takeoff.no-insp .inspector { display: none; }
  .lpanel-body { overflow: visible; }
  .takeoff-dock { max-height: none; }
  .panel-resize { display: none; }
  .vtools { top: auto; bottom: 40px; transform: none; flex-direction: row; flex-wrap: wrap; right: 8px; left: 8px; justify-content: center; }
  .vtools button { width: 34px; height: 34px; }
  .vp-top { right: 8px; top: 8px; }
  .legend { min-width: 0; max-width: 60%; font-size: 11px; }
  .tri { display: flex; flex-direction: column; overflow: visible; }
  .pane { overflow: visible; }
  .pane-scroll { overflow: visible; }
  .f-head { display: none; }
  .f-row { grid-template-columns: 1fr; gap: 6px; }
  .f-row > :nth-child(4) { display: block; }
  .f-row .acts { justify-content: flex-start; }
  .issues-body { display: flex; flex-direction: column; }
  .fields { grid-template-columns: 1fr 1fr; }
  .rep-summary { grid-template-columns: auto 1fr; }
  .rep-summary .stats4 { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .auth-bars { grid-template-columns: 1fr; }
  .drawer { left: 0; }
  .hud { font-size: 11px; }
}

/* ---------- print (Readiness Report → PDF) ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff; color: #111; overflow: visible; height: auto; }
  .hdr, .rail, .hud, .rep-actions, .toasts, .drawer, .no-print { display: none !important; }
  .app { display: block; height: auto; }
  .view { display: none !important; }
  .view-report { display: block !important; }
  .report-root { overflow: visible; padding: 0; }
  .rep-card, .stat, .hashbox, .fail-card, .sig { background: #fff !important; border-color: #ccc !important; break-inside: avoid; }
  .rep-head h1, .rep-sec-h, .fail-card .t, .stat .v, .decl, table.lv { color: #111 !important; }
  .muted, .dim, .rep-head .crumbs, .stat .k, .hashbox .k, .auth-bar .bot, .fail-card .f { color: #555 !important; }
  .hashbox .v, .rep-head .ref, .decl b, .rep-sec-h .ms { color: #a85a00 !important; }
  body.print-decl .report-root > *:not(.decl-card):not(.rep-head) { display: none !important; }
  .rep-summary { grid-template-columns: auto 1fr !important; }
  .rep-summary .stats4 { grid-column: 1 / -1; }
  .auth-bars { grid-template-columns: 1fr 1fr !important; }
  .rep-2col { grid-template-columns: 1fr !important; }
  .fail-grid { grid-template-columns: 1fr 1fr !important; }
  .c-pass, .stat .s { color: #1f7a1f !important; } .c-warn { color: #a85a00 !important; } .c-fail, .fail-card .code { color: #b3261e !important; } .c-info { color: #00658f !important; }
  .rep-head .crumbs .sec, .hashbox [style*="secondary"], .kv .v { color: #333 !important; }
  .verdict.fail { background: #b3261e !important; color: #fff !important; }
  .fail-card .d, .fail-card .t { color: #111 !important; }
  .sig { height: 110px; }
  .report-root [style*="--on-v"], .report-root .sect-h, .report-root .dim, .auth-bar .top, .stat .k { color: #333 !important; }
  .decl-grid { grid-template-columns: 1fr 260px !important; }
}