*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Mindteck — solid surfaces on a light ground. Colour comes from each
     panel's own identity tint (--panel), not from a global gradient. */
  --bg:        #f2f4f8;
  --surface:   #ffffff;
  --surface2:  #f4f6fa;
  --border:    #d7dde7;
  --border2:   #e3e8f0;

  /* Every panel tints its own background with its identity colour; each view
     sets --panel to override this default. */
  --panel:     #1c6b4a;

  --text:      #16202e;
  --text2:     #46586e;
  --text3:     #7d8da1;

  /* Primary: Mindteck green */
  --accent:    #1c6b4a;
  --accent2:   #2f9268;
  --dim:       rgba(28,107,74,0.08);

  /* Secondary: gold */
  --gold:      #b3862f;
  --gold2:     #d0a44e;

  /* Semantic */
  --green:     #1c6b4a;
  --green2:    #2f9268;
  --red:       #c33b3b;
  --amber:     #b3862f;
  --purple:    #6b58cc;
  --teal:      #12867a;
  --pink:      #c0306d;   /* Randomwalk logo */
  --pink2:     #d95a90;

  /* Glow */
  --glow-g:    0 0 14px rgba(28,107,74,0.26);
  --glow-go:   0 0 9px  rgba(28,107,74,0.18);
  --glow-r:    0 0 11px rgba(195,59,59,0.30);
  --glow-a:    0 0 11px rgba(179,134,47,0.32);
  --glow-c:    0 0 11px rgba(28,107,74,0.20);

  /* Elevation */
  --shadow:    0 1px 2px rgba(23,42,69,0.06), 0 8px 24px rgba(23,42,69,0.10);
  --shadow-lg: 0 2px 8px rgba(23,42,69,0.09), 0 20px 48px rgba(23,42,69,0.16);

  /* Exactly two families, everywhere. */
  --font-mono: 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --radius: 10px;

  /* Animation durations */
  --transition-view: 0.28s;
}

body {
  color: var(--text); font-family: var(--font-body);
  font-size: 13px; line-height: 1.5; overflow: hidden;
  background: var(--bg);
}
#app { display: flex; flex-direction: column; height: 100vh; }

/* Only two families may ever render. Drawflow hardcodes generic `monospace`
   on its nodes, and the browser default for code/pre/kbd/samp is a third
   family again — pull both back onto the project mono. */
.drawflow, .drawflow *,
code, pre, kbd, samp { font-family: var(--font-mono); }




/* ── Per-panel identity tint ──────────────────────────────────────
   Each panel carries a light wash of its own colour. --panel drives both
   the background bloom and any accent that should follow the panel. */
.view { background: var(--bg); }
.view::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(760px 420px at 6% -6%, color-mix(in srgb, var(--panel) 16%, transparent), transparent 62%),
    radial-gradient(620px 380px at 104% 8%, color-mix(in srgb, var(--panel) 10%, transparent), transparent 60%);
}
.view > * { position: relative; z-index: 1; }

#pipeline-view   { --panel: #1c6b4a; }
#view-logmind    { --panel: #1c6b4a; }   /* LogMind — green   */
#view-annotator  { --panel: #2563a8; }   /* Annotation Engine */
#view-roothub    { --panel: #6b58cc; }   /* Knowledge Base    */
#view-diffusion  { --panel: #b3862f; }   /* TrainHub — gold   */
#view-inference  { --panel: #c92a8f; }   /* Inference Hub — pink */

/* ── Top bar ─────────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 52px; flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border2);
  box-shadow: 0 1px 3px rgba(35,107,70,0.06);
  position: relative; z-index: 100;
  overflow: hidden;
}
#topbar::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.5;
}
.logo-mark {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
/* Mindteck logo SVG inline */
.logo-svg-wrap { display: flex; align-items: center; height: 32px; }
.logo-divider { width: 1px; height: 28px; background: var(--border2); margin: 0 16px; }
.logo-sub { font-size: 10px; color: var(--text3); letter-spacing: 0.15em; text-transform: uppercase; font-family: var(--font-mono); }
.topbar-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; white-space: nowrap;
  pointer-events: none;
}
.topbar-title .hl { color: var(--accent); }
.spacer { flex: 1; }
.sys-pill {
  display: flex; align-items: center; gap: 7px; padding: 4px 12px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--border2);
  font-size: 11px; color: var(--text3); font-family: var(--font-mono);
}
.sys-dot { width: 7px; height: 7px; border-radius: 50%; transition: all .4s; flex-shrink: 0; }
.sys-dot.online  { background: var(--green); box-shadow: var(--glow-go); animation: blink 2.4s ease-in-out infinite; }
.sys-dot.offline { background: var(--red);   box-shadow: var(--glow-r); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%; margin-left: 12px; flex-shrink: 0;
  background: rgba(28,107,74,0.12); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; cursor: pointer; position: relative;
  transition: box-shadow .15s;
}
.user-avatar:hover { box-shadow: 0 0 0 2px rgba(28,107,74,0.25); }
#status-ribbon {
  display: flex; align-items: center; gap: 12px; padding: 5px 24px;
  background: var(--surface2); border-bottom: 1px solid var(--border2);
  font-size: 10.5px; color: var(--text2); flex-shrink: 0;
}
#status-ribbon .rb-dot { color: var(--text3); }

/* ── Login ───────────────────────────────────────────────────── */
#login-overlay {
  display: none; position: fixed; inset: 0; background: rgba(26,18,8,0.35);
  z-index: 200; align-items: center; justify-content: center;
}
#login-overlay.show { display: flex; }
#login-card {
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 24px 26px; width: 300px; box-shadow: 0 12px 32px rgba(26,18,8,0.18);
}
.login-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.login-sub { font-size: 12px; color: var(--text3); margin-bottom: 16px; }
#login-name-input {
  width: 100%; padding: 9px 12px; margin-bottom: 12px; border-radius: 5px;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text);
  font-size: 13px; font-family: inherit;
}
#user-menu {
  display: none; position: absolute; top: 48px; right: 24px; z-index: 150;
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 14px 16px; width: 190px; box-shadow: 0 8px 24px rgba(26,18,8,0.14);
}
#user-menu.show { display: block; }
#user-menu-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
/* ── Content & views ─────────────────────────────────────────── */
#content { flex: 1; overflow: hidden; position: relative; }

/* ── Activity stream ─────────────────────────────────────────────
   A running tail of what the system is actually doing, inline on the
   analyzer page. Every line is emitted by real work — no synthetic
   chatter, no filler ticks. */
.ev-feed-el {
  max-height: 190px; overflow-y: auto; scrollbar-width: thin;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 7px 0;
  font-family: var(--font-mono); font-size: 11px;
}
.ev-feed-el::-webkit-scrollbar { width: 6px; }
.ev-feed-el::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.evline {
  display: flex; gap: 9px; padding: 2px 11px; line-height: 1.5;
  border-left: 2px solid transparent; animation: evIn .22s ease both;
}
.evline .ev-ts  { color: var(--text3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.evline .ev-msg { color: var(--text2); word-break: break-word; }
.evline.ok   { border-left-color: var(--green); }
.evline.ok   .ev-msg { color: var(--green); }
.evline.warn { border-left-color: var(--gold); }
.evline.warn .ev-msg { color: #a37a1e; }
.evline.err  { border-left-color: var(--red); }
.evline.err  .ev-msg { color: var(--red); }
.evline.work { border-left-color: var(--teal); }
.evline.work .ev-msg { color: #12756a; }

/* Blinking cursor under the last line, so the feed reads as live even
   while nothing is happening. */
.ev-cursor-el { padding: 1px 11px; color: var(--accent); }
.ev-cursor-el::after { content: '\2588'; animation: caret 1.05s step-end infinite; }

@keyframes evIn  { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Value change flash ──────────────────────────────────────────
   Counters tick up and pulse, so an update is something you see happen
   rather than something you notice was different. */
@keyframes flashUp {
  0%   { background: rgba(35,107,70,0.26); }
  100% { background: transparent; }
}
.counter-flash { animation: flashUp .85s ease-out; border-radius: 3px; }
.delta-up {
  font-size: 10px; color: var(--green2); font-family: var(--font-mono);
  margin-left: 6px; animation: evIn .3s ease both;
}

.view {
  position: absolute; inset: 0; overflow-y: auto;
  opacity: 0; pointer-events: none;
  transform: translateY(14px);
  transition: opacity var(--transition-view) cubic-bezier(.4,0,.2,1),
              transform var(--transition-view) cubic-bezier(.4,0,.2,1);
}
.view.active {
  opacity: 1; pointer-events: all;
  transform: translateY(0);
}
/* pipeline has no transform shift */
#pipeline-view { overflow: hidden; transform: none; display: flex; flex-direction: column; }
#pipeline-view.active { transform: none; }

/* Fixed single-screen app layouts — no page-level scroll, columns scroll internally */
#view-logmind, #view-annotator, #view-roothub, #view-diffusion, #view-inference { overflow: hidden; }

/* ── Pipeline ────────────────────────────────────────────────── */
#pipeline-view {
  background: radial-gradient(ellipse at 50% 40%, #e8f2ec 0%, #faf7f1 78%);
}
.frame-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; font-family: var(--font-mono); }
.frame-title { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.frame-title .hl { color: var(--accent); }
.frame-title .hlg { color: var(--gold); }
#pipeline-hero {
  flex-shrink: 0; text-align: center; padding: 18px 40px 4px;
  color: var(--text2); font-size: 14px;
}
#pipeline-hero span { font-weight: 700; color: var(--text); }
#pipeline-footer {
  flex-shrink: 0; text-align: center; padding: 6px 0 10px;
  color: var(--text3); font-size: 11px; white-space: nowrap;
  font-family: var(--font-mono);
}
#pipeline-svg-wrap {
  position: relative; flex: 1; min-height: 0;
  width: 100%; max-width: 1400px; margin: 0 auto;
}
#pipeline-svg { width: 100%; height: 100%; display: block; }
#pipeline-activity {
  flex-shrink: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 1400px; width: 100%; margin: 0 auto; padding: 0 40px;
}
.activity-card { background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); padding: 12px 16px; }
.activity-title { font-size: 10px; color: var(--text3); margin-bottom: 8px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.activity-list { display: flex; flex-direction: column; gap: 6px; }
.activity-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); }
.activity-muted { color: var(--text3); font-family: var(--font-mono); font-size: 11px; }
.activity-empty { font-size: 11px; color: var(--text3); }

/* ── Node cards ──────────────────────────────────────────────── */
.p-node {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px; padding: 20px 22px; cursor: pointer;
  height: 100%; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  box-shadow: 0 2px 8px rgba(35,107,70,0.06);
}
.p-node::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--node-accent, var(--accent)), transparent);
  opacity: 0.5; transition: opacity .22s;
}
.p-node:hover { border-color: var(--node-accent, var(--accent)); box-shadow: 0 4px 20px rgba(35,107,70,0.12), 0 0 0 1px rgba(35,107,70,0.1); transform: translateY(-1px); }
.p-node:hover::before { opacity: 1; }
.p-node:active { transform: translateY(0) scale(0.99); }

.n-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-family: var(--font-mono); }
.n-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.n-badge-big { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; font-family: var(--font-mono); padding: 7px 15px; border-radius: 6px; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; align-self: flex-start; }
.n-desc  { font-size: 12px; color: var(--text2); line-height: 1.65; }
.n-status {
  display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px;
}
.n-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: all .4s; }
.n-dot.g { background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 2.2s ease-in-out infinite; }
.n-dot.a { background: var(--gold);  box-shadow: 0 0 10px var(--gold); }
.n-dot.r { background: var(--red);   box-shadow: var(--glow-r); }
.n-dot.d { background: var(--text3); }
.n-stat  { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--text3); font-family: var(--font-mono); text-transform: uppercase; }

/* ── SVG connection paths ────────────────────────────────────── */
.fp { fill: none; stroke-linecap: round; }
/* All actual color/width set directly via JS setPath() inline styles */
.fp-bg { display: none; }

.stage-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  fill: var(--text3); opacity: 0.55; letter-spacing: 0.02em;
}

.arrowhead { opacity: 0.95; transition: fill .4s; }

@keyframes dash-g   { to { stroke-dashoffset: -32; } }  /* pattern 10 6 = 16 -> 2x */
@keyframes dash-a   { to { stroke-dashoffset: -42; } }  /* pattern 6 8  = 14 -> 3x */
@keyframes dash-r   { to { stroke-dashoffset: -36; } }  /* pattern 3 6  = 9  -> 4x */
@keyframes dash-t   { to { stroke-dashoffset: -40; } }  /* pattern 4 6  = 10 -> 4x */
@keyframes dash-dim { to { stroke-dashoffset: -32; } }  /* pattern 7 9  = 16 -> 2x */
@keyframes blink  { 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes progInd { 0%{width:0;margin-left:0} 50%{width:60%;margin-left:20%} 100%{width:0;margin-left:100%} }
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ── Inner views ─────────────────────────────────────────────── */

.node-view-inner { max-width: 1200px; margin: 0 auto; padding: 28px; }
.nv-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border2); }
.nv-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 18px; border-radius: 5px; white-space: nowrap; margin-bottom: 10px;
  font-family: var(--font-mono);
}
.nv-title { font-size: 20px; font-weight: 700; color: var(--text); }
.nv-sub   { font-size: 12px; color: var(--text3); margin-top: 3px; }

/* ── App shell (single-screen, no page scroll) ────────────────── */
.app-shell { height: 100%; max-width: 1400px; margin: 0 auto; padding: 24px 28px; display: flex; flex-direction: column; overflow: hidden; }
.app-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 15px; font-weight: 700; letter-spacing: 0.1em; font-family: var(--font-mono);
  padding: 7px 18px; border-radius: 5px; margin-bottom: 16px; flex-shrink: 0;
}
.app-cols { flex: 1; display: grid; grid-template-columns: 260px 1fr 240px; gap: 16px; min-height: 0; }
.app-col {
  display: flex; flex-direction: column; gap: 12px; min-height: 0;
  overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.app-col-left  { gap: 8px; }
.app-col-mid   { }
.app-col-right { }
#view-logmind .app-col-right { overflow-y: hidden; }
.app-col::-webkit-scrollbar { width: 6px; }
.app-col::-webkit-scrollbar-track { background: transparent; }
.app-col::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .2s; }
.app-col:hover::-webkit-scrollbar-thumb { background: var(--border2); }
.app-col:hover { scrollbar-color: var(--border2) transparent; }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border2); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow);
}

.empty-mid {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 40px 24px;
}
.empty-mid-mark { font-size: 26px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); letter-spacing: 0.1em; }
.empty-mid-copy { font-size: 13px; color: var(--text2); max-width: 320px; }
.empty-mid-arrow { font-size: 20px; color: var(--gold); margin-top: 4px; }
.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 78px; }
.chart-bar-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.chart-bar-fill { width: 100%; border-radius: 2px 2px 0 0; min-height: 2px; }
.chart-bar-label { font-size: 8px; color: var(--text3); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chart-bar-count { font-size: 10px; font-weight: 700; color: var(--text2); font-variant-numeric: tabular-nums; }

.card {
  background: var(--surface);
  border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 13px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.card-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 9px; font-family: var(--font-mono);
}
/* Small pulsing dot on any panel fed by live data. */
.card-title.live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: var(--green2); box-shadow: 0 0 6px var(--green2);
  animation: blink 1.8s ease-in-out infinite;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* auto-fit so tiles reflow instead of being crushed at narrow widths */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 8px; }
@media(max-width:620px){ .grid-2 { grid-template-columns: 1fr; } }


/* ── Split layout ────────────────────────────────────────────────
   Work on the left, the panel you act with pinned on the right. The
   aside sticks while the main column scrolls, so the form or preview
   stays reachable instead of being buried at the bottom of the page. */
.split { display: grid; gap: 14px; align-items: start; }
.split-main  { min-width: 0; }
.split-aside { position: sticky; top: 0; min-width: 0; }
.split-2 { grid-template-columns: minmax(0,1fr) 336px; }
.split-3 { grid-template-columns: 150px minmax(0,1fr) 322px; }

/* Vertical filter rail */
.filter-col { display: flex; flex-direction: column; gap: 5px; }
.filter-col .fchip { text-align: left; width: 100%; }

@media(max-width:1400px){
  .split-2 { grid-template-columns: minmax(0,1fr) 300px; }
  .split-3 { grid-template-columns: 136px minmax(0,1fr) 292px; }
}
@media(max-width:1120px){
  /* Stack rather than squeeze: below this the aside is too narrow to use. */
  .split-2, .split-3 { grid-template-columns: 1fr; }
  .split-aside { position: static; }
  .filter-col { flex-direction: row; flex-wrap: wrap; }
  .filter-col .fchip { width: auto; }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 9px 12px; animation: slideUp .3s ease both;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.stat-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); opacity: .5;
}
.sl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); }
.sv { font-size: 21px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; font-family: var(--font-mono); line-height: 1.25; }
.sh { font-size: 10px; color: var(--text3); margin-top: 1px; }

.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-mono); }
.pill.g { background: rgba(35,107,70,0.1);  color: var(--green);  border: 1px solid rgba(35,107,70,0.25); }
.pill.r { background: rgba(201,48,48,0.1);   color: var(--red);    border: 1px solid rgba(201,48,48,0.25); }
.pill.a { background: rgba(192,148,64,0.1);  color: var(--gold);   border: 1px solid rgba(192,148,64,0.25); }
.pill.b { background: rgba(35,107,70,0.07); color: var(--accent); border: 1px solid rgba(35,107,70,0.2); }
.pill.t { background: rgba(26,158,138,0.1);  color: var(--teal);   border: 1px solid rgba(26,158,138,0.2); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 5px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; transition: all .18s; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); }
.btn-p { background: var(--accent); color: #fff; }
.btn-p:hover { filter: brightness(1.15); box-shadow: var(--glow-g); }
.btn-g { background: transparent; color: var(--text2); border: 1px solid var(--border2); }
.btn-g:hover { border-color: var(--accent); color: var(--accent); }
.btn-d { background: rgba(201,48,48,0.08); color: var(--red); border: 1px solid rgba(201,48,48,0.2); }
.btn-d:hover { background: rgba(201,48,48,0.16); }

input[type=text],input[type=search],textarea,select {
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  border-radius: 5px; padding: 8px 12px; font-size: 12px; width: 100%; outline: none;
  transition: border-color .15s; font-family: inherit;
}
input:focus,textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(35,107,70,0.12); }
textarea { resize: vertical; }
label { font-size: 10px; color: var(--text3); margin-bottom: 4px; display: block; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }
.divider { height: 1px; background: var(--border2); margin: 18px 0; }

#drop-zone { border: 1px dashed var(--border2); border-radius: var(--radius); padding: 36px 24px; text-align: center; cursor: pointer; transition: all .2s; }
#drop-zone:hover,.drag-over { border-color: var(--accent); background: rgba(35,107,70,0.04); }
#drop-zone p { color: var(--text2); margin-bottom: 5px; font-size: 13px; }
#drop-zone small { color: var(--text3); font-size: 11px; font-family: var(--font-mono); }
.upload-icon { margin: 0 auto 12px; color: var(--text3); display: block; }
#file-input { display: none; }

.prog-wrap { height: 3px; background: var(--border2); border-radius: 2px; overflow: hidden; }
.prog-bar  { height: 100%; background: var(--accent); border-radius: 2px; box-shadow: 0 0 8px var(--accent); }
.prog-ind  { animation: progInd 1.4s ease-in-out infinite; }

/* Hypothesis cards */
.hyp-card {
  background: var(--surface);
  border: 1px solid var(--border2); border-radius: var(--radius); padding: 16px;
  margin-bottom: 10px; animation: slideUp .3s ease both;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  box-shadow: var(--shadow);
}
.hyp-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.hyp-card.confirmed { border-color: rgba(35,107,70,0.4);  box-shadow: inset 0 0 0 1px rgba(35,107,70,0.08); }
.hyp-card.rejected  { border-color: rgba(201,48,48,0.4);   box-shadow: inset 0 0 0 1px rgba(201,48,48,0.08); }
.hyp-card.corrected { border-color: rgba(192,148,64,0.4);  box-shadow: inset 0 0 0 1px rgba(192,148,64,0.08); }
.hyp-hd { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rank-num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; font-family: var(--font-mono); border: 1px solid; }
.rank-1 { border-color: rgba(201,48,48,0.4);   color: var(--red);    background: rgba(201,48,48,0.08); }
.rank-2 { border-color: rgba(192,148,64,0.4);  color: var(--gold);   background: rgba(192,148,64,0.08); }
.rank-3 { border-color: rgba(35,107,70,0.4);  color: var(--accent); background: rgba(35,107,70,0.08); }
.hyp-mod  { font-size: 14px; font-weight: 700; color: var(--text); }
.hyp-conf { font-size: 11px; color: var(--text3); margin-top: 2px; font-family: var(--font-mono); }
.conf-bar { height: 2px; background: var(--border2); border-radius: 1px; margin-top: 5px; }
.conf-fill { height: 100%; border-radius: 1px; transition: width .6s ease; }
.hf   { margin-bottom: 9px; }
.hf-l { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text3); margin-bottom: 3px; font-family: var(--font-mono); }
.hf-v { font-size: 12px; color: var(--text2); line-height: 1.5; }
.ev-chip { display: inline-flex; align-items: center; background: rgba(35,107,70,0.07); border: 1px solid rgba(35,107,70,0.2); color: var(--accent); border-radius: 3px; padding: 2px 7px; font-size: 10px; font-family: var(--font-mono); margin: 2px; }
.ev-chip.mod { background: rgba(192,148,64,0.07); border-color: rgba(192,148,64,0.2); color: var(--gold); }

.vrow { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.vbtn { padding: 6px 14px; border-radius: 4px; border: 1px solid; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .18s; background: transparent; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.vbtn.conf  { border-color: rgba(35,107,70,0.3);  color: var(--green); }
.vbtn.conf:hover,.vbtn.conf.active { background: rgba(35,107,70,0.12); box-shadow: 0 0 10px rgba(35,107,70,0.15); }
.vbtn.rej   { border-color: rgba(201,48,48,0.3);   color: var(--red); }
.vbtn.rej:hover,.vbtn.rej.active   { background: rgba(201,48,48,0.12); }
.vbtn.cor   { border-color: rgba(192,148,64,0.3);  color: var(--gold); }
.vbtn.cor:hover,.vbtn.cor.active   { background: rgba(192,148,64,0.12); }

.correct-form { background: var(--surface2); border: 1px solid rgba(192,148,64,0.25); border-radius: var(--radius); padding: 16px; margin-top: 12px; animation: slideUp .22s ease; }
.correct-form .cf-title { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-family: var(--font-mono); }

.cand { background: var(--surface2); border-left: 2px solid var(--border2); border-radius: 0 5px 5px 0; padding: 9px 13px; margin-bottom: 5px; transition: border-color .15s; }
.cand:hover { border-color: var(--text3); }
.cand.w { border-color: var(--gold); }
.cand.e { border-color: var(--red); }
.cand .cm   { font-size: 11px; color: var(--text2); font-family: var(--font-mono); line-height: 1.4; }
.cand .ct   { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.cand .ctag { font-size: 10px; color: var(--text3); font-family: var(--font-mono); }

/* Known-fault hits — the fast path, so they read as resolved not pending. */
.known-hit {
  background: linear-gradient(90deg, rgba(35,107,70,0.07), var(--surface));
  border: 1px solid rgba(35,107,70,0.28); border-left: 3px solid var(--green);
  border-radius: var(--radius); padding: 11px 13px; margin-bottom: 8px;
  animation: slideUp .28s ease both;
}
.kh-hd    { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.kh-seen  { font-size: 10px; color: var(--text3); font-family: var(--font-mono); }
.kh-mod   { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); }
.kh-cause { font-size: 12px; color: var(--text2); margin-top: 2px; }
.kh-fix   { font-size: 12px; color: var(--text); margin-top: 5px; }
.kh-meta  { font-size: 10px; color: var(--text3); margin-top: 5px; font-family: var(--font-mono); }

.noise-c { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin-bottom: 7px; }
.nc-name { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 3px; }
.nc-desc { font-size: 11px; color: var(--text3); margin-bottom: 5px; }
.nc-cnt  { font-size: 10px; color: var(--accent2); font-family: var(--font-mono); }

.tab-btn { padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text3); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tab-btn.active { color: var(--accent); border-color: var(--accent); }
.tab-btn:hover:not(.active) { color: var(--text2); }

.filter-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.fchip { padding: 4px 12px; border-radius: 3px; font-size: 10px; font-weight: 700; cursor: pointer; border: 1px solid var(--border2); color: var(--text3); background: transparent; transition: all .15s; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.fchip.active { border-color: var(--accent); color: var(--accent); background: rgba(35,107,70,0.07); }

.ann-rec {
  background: var(--surface);
  border: 1px solid var(--border2); border-radius: var(--radius); padding: 16px;
  margin-bottom: 12px; animation: slideUp .25s ease both;
  box-shadow: var(--shadow);
}
.ann-hd  { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.ann-mod   { font-weight: 700; color: var(--text); font-size: 14px; }
.ann-meta  { font-size: 10px; color: var(--text3); margin-bottom: 12px; font-family: var(--font-mono); }
.ann-sections { display: flex; flex-direction: column; gap: 8px; }
.ann-box { background: var(--surface2); border-radius: 6px; padding: 10px 13px; }
.ann-box-l { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; font-family: var(--font-mono); }
.ann-box-v { font-size: 12px; color: var(--text2); line-height: 1.5; }
.ann-notes-box { background: rgba(192,148,64,0.08); border-radius: 6px; padding: 10px 13px; }
.ann-notes-box .ann-box-l { color: var(--gold); }
.ann-note  { background: var(--surface); border-radius: 4px; padding: 8px 11px; margin-bottom: 5px; font-size: 11px; color: var(--text2); }
.ann-note:last-child { margin-bottom: 0; }
.ann-note-meta { font-size: 10px; color: var(--text3); margin-top: 3px; font-family: var(--font-mono); }
.add-note-row { display: flex; gap: 7px; margin-top: 9px; }
.add-note-row input { flex: 1; }

.rh-res   { background: var(--surface2); border: 1px solid var(--border2); border-left: 2px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; padding: 13px 15px; margin-bottom: 7px; animation: slideUp .25s ease both; }
.rh-mod   { font-weight: 700; color: var(--text); font-size: 12px; margin-bottom: 3px; font-family: var(--font-mono); }
.rh-cause { font-size: 11px; color: var(--text3); margin-bottom: 5px; }
.rh-fix   { font-size: 11px; color: var(--text2); }
.rh-meta  { display: flex; gap: 10px; margin-top: 7px; font-size: 10px; color: var(--text3); flex-wrap: wrap; font-family: var(--font-mono); }

.diff-tl { position: relative; padding-left: 22px; border-left: 1px solid var(--border2); }
.diff-ev { position: relative; margin-bottom: 18px; }
.diff-ev::before { content: ''; position: absolute; left: -27px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border2); }
.diff-ev.done::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 8px var(--green); }
.diff-ev.nxt::before  { background: var(--gold);  border-color: var(--gold);  animation: blink 1.5s ease-in-out infinite; box-shadow: 0 0 10px var(--gold); }
.diff-t { font-size: 10px; color: var(--text3); margin-bottom: 3px; font-family: var(--font-mono); }
.diff-l { font-size: 12px; color: var(--text2); }
.diff-d { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── Training dataset feed (terminal) ──────────────────────────
   Reads as `tail -f`: lines print one at a time, the block anchors to the
   bottom, and there is no scrollbar — the transform does the advancing. */
.ds-scroll {
  height: clamp(320px, calc(100vh - 330px), 720px);
  overflow: hidden; position: relative;
  background: #14181f; border: 1px solid #232a34;
  border-radius: var(--radius); padding: 10px 12px;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55;
}
.ds-term  { will-change: transform; }
.ds-line  { white-space: pre; overflow: hidden; text-overflow: ellipsis; animation: dsType .18s steps(6) both; }
.ds-line.hdr { color: #6fd39a; }
.ds-line.key { color: #d9a441; font-weight: 700; }
.ds-line.dim { color: #7c8798; }
.ds-line.out { color: #cfd8e3; }
.ds-line.gap { height: 6px; }
/* Newest line gets a caret so the feed reads as still writing. */
.ds-line:last-child::after {
  content: '▌'; color: #6fd39a; margin-left: 2px;
  animation: caret 1.05s step-end infinite;
}
@keyframes dsType { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ds-line { animation: none; } }
.ds-pair {
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 2px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 9px 11px; margin-bottom: 7px;
}
.ds-idx { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; font-family: var(--font-mono); }
.ds-prompt, .ds-completion { font-size: 10.5px; color: var(--text3); margin-bottom: 5px; line-height: 1.5; }
.ds-prompt strong, .ds-completion strong { color: var(--text2); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 2px; font-family: var(--font-mono); }
.ds-pair code {
  display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text2);
  background: var(--surface); border: 1px solid var(--border2); border-radius: 4px;
  padding: 5px 7px; max-height: 132px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

/* ── Causality mapper palette ────────────────────────────────── */
.mapper-palette {
  padding: 5px 12px; border-radius: 4px; cursor: grab;
  background: var(--surface2); border: 1px solid var(--border2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text2); letter-spacing: .05em; text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.mapper-palette:hover  { border-color: var(--teal); color: var(--teal); }
.mapper-palette:active { cursor: grabbing; }
.mapper-palette.add  { border-style: dashed; color: var(--pink); border-color: rgba(192,48,109,0.4); }
.mapper-palette.add:hover { border-color: var(--pink); color: var(--pink); }
.drawflow .drawflow-node {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; width: 210px; box-shadow: 0 2px 8px rgba(35,107,70,0.08);
}
/* Drawflow ships `drawflow-node.selected{background:red}` in its minified CSS,
   which flooded the whole node red on click. Three classes here outrank its two.
   The highlight is mixed from the node's own type colour (--node-color, set in
   repaintNodes) so a Threshold highlights gold and an Alarm red, rather than
   every type flashing the same blue. */
.drawflow .drawflow-node.selected {
  --sel: var(--node-color, var(--pink));
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--sel) 20%, transparent) 0%,
              color-mix(in srgb, var(--sel) 5%,  transparent) 100%);
  border-color: var(--sel);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sel) 22%, transparent),
              0 4px 14px color-mix(in srgb, var(--sel) 18%, transparent);
}
.drawflow .drawflow-node.selected .node-desc { color: var(--sel); }
/* Drawflow wraps content in .drawflow_content_node; without width:100% the
   inner card sat in the left half and left an empty white slab beside it. */
.drawflow .drawflow-node .drawflow_content_node { width: 100%; }
.node-wrap { padding-left: 8px; width: 100%; }
/* Sockets and links share one blue so a connection reads as a single object. */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  width: 11px; height: 11px; border: 2px solid var(--pink);
  transition: background .15s, transform .15s;
}
.drawflow .drawflow-node .input  { background: var(--pink); }
/* The output is the handle you drag from — left hollow so it reads as a
   starting point rather than a filled terminal. */
.drawflow .drawflow-node .output { background: var(--surface); }
.drawflow .drawflow-node .output:hover { background: var(--pink2); transform: scale(1.3); }
.drawflow .drawflow-node .input:hover  { background: var(--pink2); transform: scale(1.25); }
.drawflow .connection .main-path { stroke: var(--pink2); stroke-width: 2.5px; }
.drawflow .connection .main-path:hover { stroke: var(--pink); }

/* Symmetric dot field at 50% transparency — present enough to read as a
   playground surface without competing with the nodes. */
/* Expanded mapper — a CSS-only takeover of the viewport, not the browser
   Fullscreen API (that needs a user gesture per-call and can silently no-op
   in some embeds). Toggled by toggleMapperExpand() in inferdb.js. */
#inftab-mapper.mapper-expanded {
  position: fixed !important; inset: 0; z-index: 500;
  background: var(--bg); padding: 20px 28px; overflow-y: auto;
}
.mapper-expanded .mapper-intro { display: none; }
.mapper-expanded #mapper-split { grid-template-columns: 1fr 300px; }
.mapper-expanded #drawflow-canvas { height: calc(100vh - 180px); }
.mapper-expanded #mapper-rules { max-height: calc(100vh - 440px); }

.map-stage { position: relative; }
#drawflow-canvas {
  width: 100%; height: 480px;
  border: 1px solid var(--border2); border-radius: var(--radius);
  background-color: var(--surface);
  background-image: radial-gradient(circle, rgba(35,107,70,0.5) 1px, transparent 1.2px);
  background-size: 20px 20px;
  background-position: 0 0;
}
#drawflow-canvas.panning { cursor: grab; }
#drawflow-canvas.panning:active { cursor: grabbing; }

/* ── Canvas tools ────────────────────────────────────────────── */
/* Floated over the playground, top-right, stacked vertically. */
.map-tools {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border2); border-radius: 6px; padding: 3px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(35,107,70,0.10);
}
.map-tool {
  border: none; background: transparent; cursor: pointer; color: var(--text2);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  width: 32px; height: 26px; border-radius: 3px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.map-tool:hover  { background: var(--surface2); color: var(--pink); }
.map-tool.active { background: rgba(192,48,109,0.14); color: var(--pink); }
#map-zoom-pct { font-size: 9px; letter-spacing: -.02em; }
.node-title { font-size: 12px; font-weight: 700; font-family: var(--font-mono); }
.node-desc  { font-size: 10px; color: var(--text3); margin-top: 2px; max-width: 190px; }

select {
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  border-radius: 5px; padding: 7px 10px; font-size: 12px; width: 100%; outline: none;
  font-family: inherit;
}
select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(35,107,70,0.12); }

.rule-line {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text2);
  background: var(--surface2); border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0; padding: 6px 9px; margin-bottom: 5px; line-height: 1.5;
}

/* ── Machine documentation ───────────────────────────────────── */
.doc-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 2px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 9px 11px; margin-bottom: 6px;
}
.doc-name { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.doc-meta { font-size: 10px; color: var(--text3); font-family: var(--font-mono); margin-top: 2px; }
.doc-sec {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 9px 11px; margin-bottom: 6px;
}
.doc-sec-hd   { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--teal); margin-bottom: 4px; }
.doc-sec-body { font-size: 11.5px; color: var(--text2); line-height: 1.55; }

#doc-drop {
  border: 1px dashed var(--border2); border-radius: var(--radius);
  padding: 20px 14px; text-align: center; cursor: pointer; transition: all .2s;
}
#doc-drop:hover, #doc-drop.drag-over { border-color: var(--accent); background: rgba(35,107,70,0.04); }
#doc-drop p     { color: var(--text2); font-size: 12px; margin-bottom: 4px; }
#doc-drop small { color: var(--text3); font-size: 10px; font-family: var(--font-mono); }
#doc-input { display: none; }

.inf-row { display: grid; grid-template-columns: 108px minmax(0,1fr) 58px 108px 92px 88px; gap: 8px; align-items: center; padding: 8px 3px; border-bottom: 1px solid var(--border); }
/* Keep Edit/Del on one line — they wrapped when the column was too tight. */
.inf-row > div:last-child { display: flex; gap: 4px; flex-wrap: nowrap; }
.inf-row > div:last-child .btn { padding: 3px 7px; font-size: 9.5px; }
.inf-row.hdr { align-items: center; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text3); font-family: var(--font-mono); }
/* overflow-wrap, not break-all — break-all split "coolant_flow" mid-word. */
.inf-param { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; line-height: 1.35; }
.inf-nm    { font-size: 12px; color: var(--text); }
.inf-range { font-size: 11px; color: var(--green2); font-family: var(--font-mono); }
.inf-unit  { font-size: 11px; color: var(--text3); }
@media(max-width:900px){.inf-row{grid-template-columns:1fr}.inf-row.hdr{display:none}}

#toast { position: fixed; bottom: 20px; right: 20px; background: var(--surface); border: 1px solid var(--border2); color: var(--text); padding: 11px 16px; border-radius: 6px; font-size: 12px; box-shadow: 0 8px 32px rgba(35,107,70,0.12), 0 2px 8px rgba(0,0,0,0.08); transform: translateY(70px); opacity: 0; transition: all .22s; z-index: 9999; max-width: 320px; font-family: var(--font-mono); }
#toast.show { transform: translateY(0); opacity: 1; }
#toast.s { border-color: var(--green); }
#toast.e { border-color: var(--red); }
#toast.a { border-color: var(--gold); }

.loading-ov { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text3); font-size: 12px; font-family: var(--font-mono); }
.spinner { width: 24px; height: 24px; border: 1.5px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.empty-st { text-align: center; padding: 40px 24px; color: var(--text3); font-family: var(--font-mono); font-size: 12px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }

/* ── Resizable panels ────────────────────────────────────────────
   Any card marked .resizable grows a grab strip on its right and bottom
   edges. The handles are invisible until the pointer is near them, so the
   chrome stays quiet but the affordance is there when wanted. */
.resizable { position: relative; }
.rz-handle { position: absolute; opacity: 0; transition: opacity .15s; z-index: 6; }
.resizable:hover .rz-handle { opacity: 1; }

.rz-h {                       /* right edge — horizontal resize */
  top: 8px; bottom: 8px; right: 0; width: 7px; cursor: col-resize;
  border-radius: 3px;
}
.rz-v {                       /* bottom edge — vertical resize */
  left: 8px; right: 8px; bottom: 0; height: 7px; cursor: row-resize;
  border-radius: 3px;
}
.rz-c {                       /* corner — both at once */
  right: 0; bottom: 0; width: 15px; height: 15px; cursor: nwse-resize;
}
.rz-h::after, .rz-v::after {
  content: ''; position: absolute; inset: 0; border-radius: 3px;
  background: color-mix(in srgb, var(--panel, var(--accent)) 45%, transparent);
}
.rz-c::after {
  content: ''; position: absolute; right: 2px; bottom: 2px;
  width: 8px; height: 8px; border-right: 2px solid var(--panel, var(--accent));
  border-bottom: 2px solid var(--panel, var(--accent)); opacity: .6; border-radius: 0 0 3px 0;
}
.rz-handle:hover::after { background: var(--panel, var(--accent)); opacity: 1; }
/* While dragging, kill text selection and pointer noise across the page. */
body.rz-active, body.rz-active * { user-select: none !important; }
body.rz-active iframe { pointer-events: none; }