/* Evidence Lab on the DFX5 design system: light canvas, Inter, hairlines, 24 px cards, one gradient flourish.
   Accents carry fixed meaning: purple = data moving through the database path, coral = the model
   thinking, green = verified, red = refused or failed, near-black = the person. */
:root {
  --white: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB;
  --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-900: #121212;
  --c-purple: #806EE1; --c-purple-700: #5E4FB0; --c-coral: #E07D6E; --c-coral-700: #B4503F; --c-mint: #6EE0AB; --c-yellow: #E0D26E;
  --success: #16A34A; --danger: #DC2626; --warning: #D97706;
  --brand-gradient: linear-gradient(110deg, #806EE1 0%, #E07D6E 100%);
  --grad-pink: rgba(224, 125, 110, 0.38); --grad-violet: rgba(128, 110, 225, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
  --shadow-gradient-md: 0 8px 40px -8px var(--grad-pink), 0 4px 16px -4px var(--grad-violet);
  --shadow-gradient-lg: 0 16px 60px -10px var(--grad-pink), 0 8px 28px -8px var(--grad-violet);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 300ms; --dur-fast: 150ms;
  /* pipeline meaning colours (read by app.js through COLORS) */
  --data: var(--c-purple); --think: var(--c-coral); --ok: var(--success); --bad: var(--danger); --user: var(--gray-900);
  --canvas: var(--gray-50); --paper: var(--white); --paper-edge: var(--gray-200); --paper-ink: var(--gray-900); --paper-ink-2: var(--gray-600);
  --ink: var(--gray-900); --ink-2: var(--gray-600); --muted: var(--gray-500);
  --font-ui: var(--font-sans); --font-display: var(--font-sans);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: default; opacity: .6; }
.stage > *, .col, .chat, .chat-scroll, .msg, .node, .node-body, .kv, .brand, .top-right,
.ask textarea, .control, .range-row, .range-row input, .admin-add, .admin-add fieldset,
.admin-add input, .admin-add label, .slider input, select { min-width: 0; }
.msg, .who, .log span, .chip, .hint, .error, .control, .role-grid label { overflow-wrap: anywhere; }
.ask button { flex-shrink: 0; }
.range-row input { width: 100%; }
.control { max-width: 100%; }
.control select, .control input { max-width: 100%; }
.busy .tbl.clickable { pointer-events: none; opacity: .6; }
html, body { height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--gray-900); font: 16px/1.5 var(--font-sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid rgba(128, 110, 225, .35); outline-offset: 2px; }
.eyebrow { font: 600 13px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-500); }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* buttons: icon + verb */
button.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-900); font-size: 15px; font-weight: 500; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
button.ghost:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
button.primary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--gray-900); background: var(--gray-900); color: var(--white); font-weight: 600; font-size: 16px; }
button.primary:hover { background: #000; }
button.danger { display: inline-flex; align-items: center; gap: 6px; background: var(--white); color: var(--danger); border: 1px solid #F3B4B4; border-radius: 8px; padding: 6px 10px; font-size: 14px; min-height: 32px; }
button.danger svg.i { width: 16px; height: 16px; }

/* ------------------------------------------------------------ header */
.top { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gray-200); position: relative; z-index: 3; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { height: 26px; width: auto; display: block; }
.brand .sep { width: 1px; height: 24px; background: var(--gray-200); }
.brand h1 { font: 600 20px/1.2 var(--font-sans); letter-spacing: -0.01em; margin: 0; white-space: nowrap; }
.brand-sub { color: var(--gray-500); font-size: 15px; white-space: nowrap; }
.brand-mark { display: none; }
.top-right { display: flex; align-items: center; gap: 12px; flex: none; }
.top-right button { white-space: nowrap; }
.who { color: var(--gray-600); font-size: 15px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ stage */
.stage { position: relative; z-index: 2; height: calc(100% - 64px); display: grid; grid-template-columns: 320px minmax(520px, 1fr) 340px; gap: 24px; padding: 24px; }
.col { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: auto; scrollbar-width: thin; }
#wires { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* nodes: white 24 px cards; the live state is the gradient bloom the brand uses on hover, here earned by a real event */
.node { background: var(--white); border: 1px solid var(--gray-200); border-radius: 24px; padding: 18px 20px; position: relative; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.node-head { display: flex; align-items: center; gap: 10px; }
.node-head .icon { width: 32px; height: 32px; border-radius: 10px; background: var(--gray-100); display: grid; place-items: center; color: var(--gray-700); flex: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.node-head h2 { font: 600 13px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; margin: 0; color: var(--gray-500); flex: 1; }
.node-state { font: 500 13px/1 var(--font-mono); color: var(--gray-500); padding: 5px 8px; border-radius: 6px; background: var(--gray-50); border: 1px solid var(--gray-200); white-space: nowrap; }
.dot { display: none; }
.node.active { border-color: transparent; box-shadow: var(--shadow-gradient-lg), 0 0 0 1px var(--glow, var(--c-purple)); }
.node.active .icon { background: var(--glow, var(--c-purple)); color: var(--white); animation: breathe 1.2s ease-in-out infinite; }
.node.active .node-state { color: var(--glow, var(--c-purple-700)); border-color: var(--glow, var(--c-purple)); background: var(--white); }
.node.done .icon { background: var(--gray-900); color: var(--white); }
.node.done .node-state { color: var(--success); border-color: #BBF7D0; background: #F0FDF4; }
.node.failed { --glow: var(--danger); border-color: var(--danger); }
.node.failed .icon { background: var(--danger); color: var(--white); }
.node.failed .node-state { color: var(--danger); border-color: #FECACA; background: #FEF2F2; }
.node.thinking { --glow: var(--c-coral); }
.node.unguarded { border-color: var(--warning); }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.node-body { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.kv { display: flex; flex-direction: column; gap: 4px; }
.kv span { font-size: 13px; color: var(--gray-500); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.kv strong { font: 500 14px/1.4 var(--font-mono); color: var(--gray-900); word-break: break-all; }
.hint { color: var(--gray-500); font-size: 14px; margin: 0; line-height: 1.5; }
select { background: var(--white); color: var(--gray-900); border: 1px solid var(--gray-200); border-radius: 8px; padding: 9px 10px; font: 15px var(--font-sans); min-height: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 13px/1 var(--font-mono); padding: 6px 8px; border-radius: 4px; background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-700); transition: all var(--dur-fast) var(--ease); }
.chip.active { background: #EEEBFC; border-color: var(--c-purple); color: var(--c-purple-700); box-shadow: 0 0 0 3px rgba(128, 110, 225, .18); }
.chip.refused { background: #FEF2F2; border-color: var(--danger); color: var(--danger); }
.schemas { display: flex; flex-direction: column; gap: 8px; }
.schema { border: 1px solid var(--gray-200); border-radius: 12px; padding: 10px 12px; background: var(--white); transition: all var(--dur-fast) var(--ease); }
.schema.active { border-color: var(--c-purple); box-shadow: var(--shadow-gradient-md); }
.schema h3 { margin: 0 0 8px; font: 600 14px/1 var(--font-mono); color: var(--gray-900); display: flex; justify-content: space-between; }
.schema h3 small { color: var(--gray-500); font-weight: 400; font-size: 13px; }

/* sliders and toggle */
.slider { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; font-size: 14px; color: var(--gray-600); }
.slider output { font: 500 13px var(--font-mono); color: var(--gray-900); min-width: 88px; text-align: right; }
input[type=range] { width: 100%; accent-color: var(--c-purple); height: 24px; }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; min-height: 24px; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track { width: 40px; height: 24px; border-radius: 999px; background: var(--gray-300); position: relative; transition: background var(--dur-fast); flex: none; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); transition: left var(--dur-fast); }
.toggle input:checked + .track { background: var(--success); }
.toggle input:checked + .track::after { left: 19px; }
.toggle input:focus-visible + .track { outline: 3px solid rgba(128, 110, 225, .35); outline-offset: 2px; }

/* logs */
.log { font: 13px/1.5 var(--font-mono); color: var(--gray-600); display: flex; flex-direction: column; gap: 4px; max-height: 132px; overflow: auto; scrollbar-width: thin; }
.log.tall { max-height: none; flex: 1; min-height: 120px; }
.log div { display: flex; gap: 8px; align-items: baseline; }
.log time { color: var(--gray-400); flex: none; }
.log .ok { color: var(--success); } .log .bad { color: var(--danger); } .log .think { color: var(--c-coral-700); } .log .data { color: var(--c-purple-700); }
.log .new { animation: fade-in .3s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ chat */
.chat { background: var(--white); color: var(--gray-900); border: 1px solid var(--gray-200); border-radius: 24px; display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow-lg); position: relative; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.chat.receiving { border-color: transparent; box-shadow: var(--shadow-gradient-lg), 0 0 0 1px var(--c-purple); }
.chat.sending { border-color: transparent; box-shadow: var(--shadow-lg), 0 0 0 1px var(--gray-900); }
.chat-scroll { flex: 1; overflow: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; scroll-behavior: smooth; }
.msg { max-width: 100%; }
.msg.user { align-self: flex-end; background: var(--gray-900); color: var(--white); border-radius: 16px 16px 4px 16px; padding: 12px 16px; max-width: 78%; white-space: pre-wrap; font-size: 16px; }
.msg.assistant { background: var(--white); border: 1px solid var(--gray-200); border-radius: 4px 16px 16px 16px; padding: 20px 22px; }
.msg.assistant.intro { background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-600); padding: 16px 18px; border-radius: 16px; font-size: 16px; }
.msg.assistant.intro p { margin: 0; }
.msg h3 { font: 600 16px/1.3 var(--font-sans); margin: 16px 0 8px; color: var(--gray-900); }
.msg h3:first-child { margin-top: 0; }
.status { display: flex; align-items: center; gap: 10px; color: var(--gray-600); font-size: 15px; }
.status .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gray-200); border-top-color: var(--c-purple); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.banner { border-radius: 10px; padding: 10px 14px; font-size: 15px; margin-bottom: 14px; }
.banner.warn { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.banner.bad { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.banner.info { background: #EEEBFC; color: var(--c-purple-700); border: 1px solid #D5CFF5; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 10px; }
.kpi { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 16px; padding: 14px 16px; }
.kpi .label { font-size: 13px; color: var(--gray-500); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.kpi .value { font: 700 40px/1.05 var(--font-sans); letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.vis { width: 100%; overflow-x: auto; }
.vis .vega-embed { width: 100%; }
.vis .vega-embed summary { display: none; }
.vis-tooltip { position: fixed; z-index: 6; pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere; max-width: min(320px, calc(100vw - 16px)); max-height: 240px; overflow: hidden; padding: 8px 10px; border: 1px solid var(--gray-200); border-radius: 8px; background: var(--white); color: var(--gray-900); font-size: 14px; box-shadow: var(--shadow-md); }
.tbl { overflow: auto; max-height: 380px; border: 1px solid var(--gray-200); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
th { position: sticky; top: 0; background: var(--gray-50); color: var(--gray-500); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 14px; }
.tbl.clickable tbody tr { cursor: pointer; }
.tbl.clickable tbody tr:hover { background: var(--gray-50); }
.tbl tbody tr.selected { background: #EEEBFC; }
.prose { font-size: 16px; line-height: 1.6; margin: 8px 0; white-space: pre-wrap; color: var(--gray-700); }
.prose.unverified { border-left: 3px solid var(--danger); padding-left: 12px; }
.controls { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; padding: 14px 16px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 16px; }
.control { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--gray-500); min-width: 180px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.control select, .control input { font: 15px var(--font-sans); color: var(--gray-900); background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 10px; min-height: 40px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.control .range-row { display: flex; gap: 6px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--gray-600); margin: 8px 0; }
.filters .pill { background: #EEEBFC; color: var(--c-purple-700); border-radius: 4px; padding: 4px 8px; font-family: var(--font-mono); font-size: 13px; }
.filters button { border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-900); border-radius: 8px; padding: 4px 12px; font-size: 14px; min-height: 28px; }
.suggest { display: flex; flex-direction: column; gap: 8px; }
.suggest button { text-align: left; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 14px; color: var(--gray-900); font-size: 16px; min-height: 44px; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.suggest button:hover { border-color: transparent; box-shadow: var(--shadow-gradient-md); }
details.prov { margin-top: 14px; border-top: 1px solid var(--gray-200); padding-top: 10px; font-size: 15px; color: var(--gray-600); }
details.prov summary { cursor: pointer; font-weight: 600; color: var(--gray-900); }
details.prov pre { background: var(--gray-900); color: #E5E7EB; border-radius: 10px; padding: 12px 14px; overflow-x: auto; font: 13px/1.5 var(--font-mono); white-space: pre-wrap; }
details.prov .meta { font-family: var(--font-mono); font-size: 13px; }
details.prov ul { padding-left: 18px; }
.error-card { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; border-radius: 10px; padding: 10px 14px; font-size: 15px; }
.click-hint { font-size: 14px; color: var(--gray-500); margin: 4px 0 12px; }
.chart-title { font-weight: 600; font-size: 16px; margin: 14px 0 6px; }
.empty-note { margin: 4px 0 12px; padding: 12px 14px; border: 1px dashed var(--gray-300); border-radius: 10px; color: var(--gray-600); font-size: 15px; }
.linkish { background: none; border: 0; padding: 0; color: var(--c-purple-700); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:disabled { color: var(--gray-400); cursor: default; }

.ask { display: flex; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--gray-200); background: var(--white); border-radius: 0 0 24px 24px; }
.ask textarea { flex: 1; resize: none; font: 16px/1.5 var(--font-sans); color: var(--gray-900); background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 16px; max-height: 160px; }
.ask textarea:focus { border-color: var(--c-purple); outline: none; box-shadow: 0 0 0 3px rgba(128, 110, 225, .3); }
.ask button { width: 48px; min-height: 48px; border: 0; border-radius: 12px; background: var(--gray-900); color: var(--white); display: grid; place-items: center; position: relative; }
.ask button:disabled { opacity: .4; cursor: default; }
.send-icon { display: none; }

/* ------------------------------------------------------------ wires */
.wire { fill: none; stroke: var(--gray-300); stroke-width: 2; }
.port { fill: var(--white); stroke: var(--gray-400); stroke-width: 1.5; }
.wire.lit + .port, .port.lit { stroke: var(--wire-color, var(--c-purple)); fill: var(--wire-color, var(--c-purple)); }
.wire.lit { stroke: var(--wire-color, var(--c-purple)); stroke-width: 2.5; stroke-dasharray: none; filter: drop-shadow(0 0 6px var(--wire-color, var(--c-purple))); }
.packet { fill: var(--wire-color, var(--c-purple)); filter: drop-shadow(0 0 8px var(--wire-color, var(--c-purple))); }
.wire-label { font: 13px var(--font-mono); fill: var(--gray-500); }

/* ------------------------------------------------------------ gate: a sign-in page */
.gate { position: fixed; inset: 0; z-index: 5; overflow: auto; display: grid; place-items: center; padding: 24px;
  background-color: var(--gray-50);
  background-image: radial-gradient(circle, var(--gray-300) 1px, transparent 1.2px);  /* dot grid */
  background-size: 24px 24px; }
.gate::before { content: ""; position: fixed; inset: 0; background:
  radial-gradient(640px 440px at 12% 8%, rgba(128, 110, 225, .22) 0%, transparent 62%),
  radial-gradient(560px 400px at 90% 92%, rgba(224, 125, 110, .18) 0%, transparent 62%),
  radial-gradient(420px 320px at 82% 12%, rgba(110, 224, 171, .16) 0%, transparent 62%),
  radial-gradient(380px 300px at 10% 90%, rgba(224, 210, 110, .16) 0%, transparent 62%);
  filter: blur(28px); pointer-events: none; }
/* the constellation: a graph of nodes and hairlines drawn by app.js to fill the viewport (the logo is a node cluster;
   the product is a graph of hops), a few nodes in the four logo colours, the rest ink on the dot grid */
.gate-art { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gate-art line { stroke: var(--gray-400); stroke-width: 1; }
.gate-art circle { fill: var(--gray-400); }
.gate-art circle.c1 { fill: var(--c-purple); } .gate-art circle.c2 { fill: var(--c-coral); } .gate-art circle.c3 { fill: var(--c-mint); } .gate-art circle.c4 { fill: var(--c-yellow); }
.gate-art circle.c1, .gate-art circle.c2, .gate-art circle.c3, .gate-art circle.c4 { animation: twinkle 6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.gate-card { position: relative; width: min(440px, 100%); background: var(--white); border: 1px solid var(--gray-200); border-radius: 24px; padding: 36px 32px 28px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gate-card img { height: 32px; width: auto; display: block; margin-bottom: 6px; }
.gate-card h2 { font: 700 28px/1.15 var(--font-sans); letter-spacing: -0.02em; margin: 0; color: var(--gray-900); }
.gate-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gray-600); }
.gate-card button.primary { margin-top: 8px; width: 100%; justify-content: center; }
.gate-note { font-size: 14px; color: var(--gray-500); margin: 0; }
.error { color: var(--danger); font-size: 15px; }

/* ------------------------------------------------------------ admin dialog */
.admin { width: min(880px, 94vw); background: var(--white); color: var(--gray-900); border: 1px solid var(--gray-200); border-radius: 24px; padding: 0; box-shadow: var(--shadow-lg); }
.admin::backdrop { background: rgba(18, 18, 18, .45); backdrop-filter: blur(4px); }
.admin-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--gray-200); margin: 0; }
.admin-head h2 { font: 600 20px var(--font-sans); margin: 0; }
.admin-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 20px; max-height: 70vh; overflow: auto; }
.admin table th, .admin table td { white-space: normal; }
.admin .role-list { font: 13px/1.5 var(--font-mono); color: var(--gray-600); }
.admin-add { display: flex; flex-direction: column; gap: 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 16px; padding: 16px; }
.admin-add h3 { margin: 0; font: 600 16px var(--font-sans); }
.admin-add label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--gray-600); }
.admin-add label.check { flex-direction: row; align-items: center; gap: 8px; }
.admin-add input[type=text], .admin-add input[type=email] { background: var(--white); color: var(--gray-900); border: 1px solid var(--gray-200); border-radius: 8px; padding: 9px 10px; font: 15px var(--font-sans); min-height: 40px; }
.admin-add fieldset { border: 1px solid var(--gray-200); border-radius: 12px; padding: 10px 14px 14px; background: var(--white); }
.admin-add legend { font-size: 13px; color: var(--gray-500); padding: 0 6px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.role-grid label { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-900); min-height: 24px; }
.admin .row { display: flex; align-items: center; gap: 12px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  body { overflow: auto; }
  .stage { grid-template-columns: 1fr; height: auto; }
  .chat { min-height: 70vh; order: -1; }
  #wires { display: none; }
}
@media (max-width: 600px) {
  .top { height: auto; min-height: 64px; padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .brand { flex-wrap: wrap; gap: 10px; }
  .brand-sub { width: 100%; white-space: normal; }
  .top-right { width: 100%; flex-wrap: wrap; gap: 8px; }
  .who { flex: 1 1 100%; }
  .stage { padding: 16px; gap: 16px; grid-template-columns: minmax(0, 1fr); }
  .chat-scroll { padding: 16px; }
  .msg.assistant { padding: 14px; }
  .msg.user { max-width: 90%; }
  .ask { padding: 12px; gap: 8px; }
  .ask textarea { width: 0; }
  .controls { padding: 12px; }
  .control { width: 100%; }
  .range-row { flex-wrap: wrap; }
  .range-row input { flex: 1 1 110px; }
  .admin-head, .admin-body { padding: 14px; }
  .role-grid { grid-template-columns: minmax(0, 1fr); }
  .admin table { table-layout: fixed; }
  .admin td, .admin th { padding: 6px 4px; overflow-wrap: anywhere; font-size: 13px; }
  .admin table button { padding: 4px; max-width: 100%; }
  .admin .row { flex-wrap: wrap; }
  .kpi .value { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .node.active .icon, .gate-art circle { animation: none; }
  .packet { display: none; }
  .chat-scroll { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ information architecture pass */
.identity { display: flex; align-items: center; gap: 10px; }
.identity .eyebrow { white-space: nowrap; }
.identity select { min-width: 220px; max-width: 320px; }
details.more { border-top: 1px solid var(--gray-200); padding-top: 8px; }
details.more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-500); font-weight: 500; min-height: 24px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 8px; height: 8px; border-right: 1.75px solid var(--gray-400); border-bottom: 1.75px solid var(--gray-400); transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease); margin-left: 2px; }
details.more[open] > summary::before { transform: rotate(45deg); }
details.more[open] > summary { margin-bottom: 10px; }
details.more > :not(summary) { margin-top: 8px; }
.schema > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font: 600 14px/1 var(--font-mono); color: var(--gray-900); }
.schema > summary::-webkit-details-marker { display: none; }
.schema > summary small { color: var(--gray-500); font-weight: 400; font-size: 13px; }
.schema[open] > summary { margin-bottom: 8px; }
.schema .chip { cursor: pointer; }
.schema .chip:hover { border-color: var(--gray-400); }
.timing { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 14px; padding: 8px 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; font: 500 13px/1.4 var(--font-mono); color: var(--gray-600); }
.timing b { color: var(--gray-900); font-weight: 600; }
.timing .dot-model { color: var(--c-coral-700); } .timing .dot-db { color: var(--c-purple-700); } .timing .dot-verify { color: var(--success); }
.node.active { background: color-mix(in srgb, var(--glow, var(--c-purple)) 6%, var(--white)); }
.node.active .node-head h2 { color: var(--glow, var(--c-purple-700)); }
.table-dialog { width: min(720px, 94vw); }
.table-dialog table td, .table-dialog table th { white-space: normal; }
.table-dialog .meta-row { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--gray-600); }
@media (max-width: 900px) { .identity { width: 100%; } .identity select { max-width: none; flex: 1; } }
@media (max-width: 1500px) { .brand-sub { display: none; } }
@media (max-width: 1240px) { .who { display: none; } }

/* guardrail levels */
.seg { display: inline-flex; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; background: var(--white); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.seg span { display: block; padding: 7px 12px; font-size: 14px; color: var(--gray-600); cursor: pointer; min-height: 36px; line-height: 22px; border-right: 1px solid var(--gray-200); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--gray-900); color: var(--white); }
.seg input:focus-visible + span { outline: 3px solid rgba(128, 110, 225, .35); outline-offset: -3px; }
.analysis { font-size: 16px; line-height: 1.65; color: var(--gray-800, #1F2937); margin: 0 0 14px; padding: 14px 16px; border-left: 3px solid var(--success); background: #F7FDF9; border-radius: 0 10px 10px 0; }
.analysis.unverified { border-left-color: var(--warning); background: #FFFBEB; }
.analysis .note { display: block; margin-top: 8px; font-size: 13px; color: var(--gray-500); font-family: var(--font-mono); }