:root {
  --ink: #0a2119;
  --ink-soft: #29433a;
  --muted: #62766e;
  --paper: #ffffff;
  --canvas: #f3f7f5;
  --canvas-deep: #e8f1ed;
  --line: #d1dfd9;
  --line-strong: #a9c1b7;
  --emerald: #006b4f;
  --emerald-dark: #004e3a;
  --emerald-bright: #00a77b;
  --emerald-soft: #e5f4ee;
  --success: #087a58;
  --success-soft: #e4f5ed;
  --warning: #956000;
  --warning-soft: #fff4d8;
  --danger: #a3263f;
  --danger-soft: #fdecef;
  --info: #2057a6;
  --info-soft: #e9f1fc;
  --silicon: #26313c;
  --sapphire: #174ea6;
  --layer-emerald: #006b4f;
  --opal: #6d28a8;
  --titanium: #3f6073;
  --amber: #8a5700;
  --alloy: #00747a;
  --copper: #a13e17;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --shadow-sm: 0 10px 30px rgba(9, 48, 35, 0.07);
  --shadow-lg: 0 24px 70px rgba(9, 48, 35, 0.16);
  --radius-sm: 0.55rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.25rem;
  --sidebar: 16.75rem;
  --topbar: 4.75rem;
}

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

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
img, svg { display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid #f1bb43;
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--ink);
  text-decoration: none;
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.eyebrow {
  margin: 0 0 0.45rem;
  color: var(--emerald);
  font: 750 0.72rem/1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow.light { color: #75e5c2; }

.button {
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.7rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.button svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: 0.55; cursor: wait; transform: none; }
.button.primary { color: #fff; background: var(--emerald); }
.button.primary:hover { background: var(--emerald-dark); }
.button.secondary { border-color: var(--line-strong); background: #fff; }
.button.secondary:hover { border-color: var(--emerald); color: var(--emerald); }
.button.danger { border-color: #d9a4af; color: var(--danger); background: #fff; }
.button.danger:hover { border-color: var(--danger); background: var(--danger-soft); }
.button.wide { width: 100%; }

.icon-button {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

.icon-button:hover { border-color: var(--emerald); color: var(--emerald); }
.icon-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem;
  border: 0;
  color: var(--emerald);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 750;
}

.text-button:hover { color: var(--emerald-dark); }
.text-button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* Login */
.login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(28rem, 0.88fr);
  background: #fff;
}

.login-story {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4.5rem);
  color: #fff;
  background:
    radial-gradient(circle at 76% 22%, rgba(25, 203, 150, 0.26), transparent 28%),
    linear-gradient(145deg, #061f18 0%, #004936 66%, #006b4f 100%);
}

.login-story::before,
.login-story::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.login-story::before {
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 72%, transparent);
}

.login-story::after {
  right: -12rem;
  bottom: -16rem;
  width: 36rem;
  height: 36rem;
  border: 1px solid rgba(117, 229, 194, 0.24);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(117, 229, 194, 0.035), 0 0 0 10rem rgba(117, 229, 194, 0.025);
}

.login-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
  color: #fff;
  font-size: 1.22rem;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.login-brand img { width: 2.45rem; height: 2.45rem; }
.login-brand strong { font-weight: 850; }

.login-story-copy { position: relative; z-index: 1; max-width: 45rem; margin: auto 0; padding: 4rem 0; }
.login-story-copy h1 { max-width: 14ch; margin: 0 0 1.3rem; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 0.98; letter-spacing: -0.055em; }
.login-story-copy > p:last-child { max-width: 43rem; margin: 0; color: #cfe6dc; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.65; }

.login-route {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1.25rem auto 1.25rem auto;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius-md);
  background: rgba(2, 29, 22, 0.38);
  backdrop-filter: blur(12px);
}

.login-route span { font: 700 0.76rem/1.35 var(--mono); }
.login-route svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: #75e5c2; stroke-width: 1.8; }
.login-boundary { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.55rem; margin: 1.1rem 0 0; color: #add7c7; font: 650 0.72rem/1.4 var(--mono); }
.login-boundary svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

.login-panel { min-height: 100vh; display: grid; place-items: center; padding: clamp(2rem, 6vw, 7rem); background: #fbfdfc; }
.login-card { width: min(100%, 27rem); }
.login-card-mark { width: 3.15rem; height: 3.15rem; display: grid; place-items: center; margin-bottom: 1.5rem; border: 1px solid #b7d6c9; border-radius: var(--radius-md); color: var(--emerald); background: var(--emerald-soft); }
.login-card-mark svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.login-card h2 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1.12; letter-spacing: -0.04em; }
.form-intro { margin: 0.8rem 0 2rem; color: var(--muted); }
.field { display: grid; gap: 0.5rem; margin-bottom: 1rem; color: var(--ink-soft); font-size: 0.82rem; font-weight: 750; }
.field input { min-height: 3rem; width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: #fff; }
.field input:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(0,107,79,.1); outline: 0; }
.form-error { margin: 0 0 1rem; padding: 0.8rem 0.9rem; border: 1px solid #e0aeba; border-radius: var(--radius-sm); color: var(--danger); background: var(--danger-soft); font-size: 0.84rem; }
.login-help { margin: 1rem 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }

/* Console shell */
.console-view { min-height: 100vh; }
.sidebar {
  position: fixed;
  z-index: 90;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.1);
  color: #d6e7e0;
  background: #08251d;
}

.sidebar-head { height: var(--topbar); display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.console-brand { display: inline-flex; align-items: center; gap: 0.7rem; color: #fff; font-size: 1.05rem; letter-spacing: -0.02em; text-decoration: none; }
.console-brand img { width: 2rem; height: 2rem; }
.console-brand strong { font-weight: 850; }
.sidebar-close { display: none; border-color: rgba(255,255,255,.18); color: #fff; background: transparent; }
.deployment-chip { display: flex; align-items: center; gap: 0.75rem; margin: 1.2rem 1rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(129, 217, 185, .18); border-radius: var(--radius-sm); background: rgba(255,255,255,.045); }
.deployment-chip > span:last-child { min-width: 0; display: grid; gap: 0.1rem; }
.deployment-chip small { color: #82ab9c; font: 650 0.65rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.deployment-chip strong { overflow: hidden; color: #f3faf7; font-size: 0.83rem; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 0.55rem; height: 0.55rem; flex: 0 0 auto; border-radius: 50%; background: #27c997; box-shadow: 0 0 0 4px rgba(39,201,151,.12); }
.console-nav { display: grid; gap: 0.25rem; padding: 0.35rem 0.75rem; }
.nav-item { width: 100%; min-height: 2.9rem; display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.65rem 0.8rem; border: 0; border-radius: var(--radius-sm); color: #a8c2b8; background: transparent; font-size: 0.88rem; font-weight: 650; text-align: left; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: #07543f; }
.nav-item svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.nav-count { min-width: 1.45rem; height: 1.45rem; display: inline-grid; place-items: center; border-radius: 50%; color: #08251d; background: #75e5c2; font: 750 0.68rem/1 var(--mono); }
.sidebar-foot { margin-top: auto; padding: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.environment-badge { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.65rem; margin-bottom: 1rem; }
.environment-badge span { padding: 0.26rem 0.42rem; border-radius: 0.28rem; color: #08251d; background: #75e5c2; font: 800 0.62rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.environment-badge strong { color: #d6e7e0; font-size: 0.77rem; font-weight: 650; }
.back-link { display: inline-flex; align-items: center; gap: 0.45rem; color: #81a99a; font-size: 0.75rem; text-decoration: none; }
.back-link:hover { color: #fff; }
.back-link svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sidebar-backdrop { position: fixed; z-index: 80; inset: 0; background: rgba(2,18,13,.56); backdrop-filter: blur(2px); }

.console-main-shell { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; z-index: 60; top: 0; height: var(--topbar); display: flex; align-items: center; gap: 1rem; padding: 0 clamp(1rem, 2.5vw, 2.2rem); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }
.menu-button { display: none; }
.topbar-context { min-width: 0; display: flex; align-items: center; gap: 0.6rem; }
.topbar-context span { color: var(--muted); font-size: 0.78rem; }
.topbar-context span::after { content: "/"; margin-left: 0.6rem; color: var(--line-strong); }
.topbar-context strong { overflow: hidden; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.live-badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.65rem; border: 1px solid #bbd8cc; border-radius: 999px; color: var(--emerald); background: var(--emerald-soft); font: 750 0.67rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.live-badge .status-dot { width: 0.42rem; height: 0.42rem; }
.user-menu-wrap { position: relative; }
.user-button { display: flex; align-items: center; gap: 0.65rem; padding: 0.25rem 0.35rem; border: 0; border-radius: var(--radius-sm); background: transparent; }
.user-button:hover { background: var(--canvas); }
.user-avatar { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; color: var(--emerald); background: var(--emerald-soft); }
.user-avatar svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.user-copy { display: grid; gap: 0.05rem; text-align: left; }
.user-copy strong { font-size: 0.76rem; }
.user-copy small { color: var(--muted); font-size: 0.65rem; }
.user-button .chevron { width: 1rem; height: 1rem; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.user-menu { position: absolute; top: calc(100% + 0.65rem); right: 0; min-width: 10rem; padding: 0.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-lg); }
.user-menu button { width: 100%; padding: 0.6rem 0.7rem; border: 0; border-radius: 0.35rem; background: transparent; font-size: 0.8rem; text-align: left; }
.user-menu button:hover { color: var(--danger); background: var(--danger-soft); }

.main-content { width: min(100%, 100rem); margin: 0 auto; padding: clamp(1.5rem, 3.2vw, 3.2rem); }
.console-section { animation: sectionIn 180ms ease; }
@keyframes sectionIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { max-width: 58rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-heading h1 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -0.048em; }
.page-heading > p:last-child, .page-heading > div > p:last-child { max-width: 48rem; margin: 0.75rem 0 0; color: var(--muted); font-size: 1rem; }
.heading-with-action { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }

.panel { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.panel-heading { min-height: 4.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.panel-heading .eyebrow { margin-bottom: 0.25rem; }
.panel-heading h2 { margin: 0; font-size: 1.06rem; line-height: 1.25; letter-spacing: -0.02em; }
.status-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.55rem; border: 1px solid currentColor; border-radius: 999px; font: 750 0.64rem/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.status-badge.healthy, .status-badge.allowed, .status-badge.completed, .status-badge.approved { color: var(--success); background: var(--success-soft); }
.status-badge.pending, .status-badge.pending_approval { color: var(--warning); background: var(--warning-soft); }
.status-badge.denied, .status-badge.failed { color: var(--danger); background: var(--danger-soft); }
.status-badge.synthetic { color: var(--info); background: var(--info-soft); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.metric-card { min-height: 7.4rem; display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.metric-copy { display: grid; gap: 0.25rem; }
.metric-copy small { color: var(--muted); font-size: 0.75rem; font-weight: 650; }
.metric-copy strong { font-size: 1.65rem; line-height: 1.1; letter-spacing: -0.035em; }
.metric-copy span { color: var(--muted); font-size: 0.72rem; }
.metric-icon { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 0.6rem; color: var(--emerald); background: var(--emerald-soft); }
.metric-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(19rem, .72fr); gap: 1rem; }
.workflow-panel, .recent-panel { min-height: 26rem; }
.workflow-map { min-height: 13rem; display: grid; grid-template-columns: repeat(7, auto); align-items: center; justify-content: center; gap: clamp(0.35rem, 1vw, 1rem); padding: 1.6rem 1.2rem; }
.workflow-node { width: clamp(7rem, 10vw, 9.2rem); min-height: 8.7rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center; }
.workflow-node.governed { border-color: #7fc1aa; background: var(--emerald-soft); }
.node-icon { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border-radius: 0.65rem; color: var(--emerald); background: var(--canvas-deep); }
.workflow-node.governed .node-icon { color: #fff; background: var(--emerald); }
.node-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.workflow-node > div { display: grid; gap: 0.15rem; }
.workflow-node small { color: var(--muted); font: 700 0.62rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.workflow-node strong { font-size: 0.79rem; line-height: 1.25; }
.workflow-node span { color: var(--muted); font-size: 0.68rem; line-height: 1.3; }
.workflow-arrow svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--line-strong); stroke-width: 1.8; }
.layer-rail { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 0.35rem; padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line); }
.layer { min-width: 0; display: inline-flex; justify-content: center; padding: 0.46rem 0.3rem; border-radius: 0.35rem; color: #fff; font: 750 0.62rem/1 var(--mono); overflow: hidden; text-overflow: ellipsis; }
.layer.silicon { background: var(--silicon); }.layer.sapphire { background: var(--sapphire); }.layer.emerald { background: var(--layer-emerald); }.layer.opal { background: var(--opal); }.layer.titanium { background: var(--titanium); }.layer.amber { background: var(--amber); }.layer.alloy { background: var(--alloy); }.layer.copper { background: var(--copper); }
.request-list { display: grid; }
.request-list.compact { padding: 0.35rem 1.05rem 0.7rem; }
.request-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.9rem 0.35rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.request-row:last-child { border-bottom: 0; }
.request-row:hover, .request-row.selected { background: var(--canvas); }
.request-row.selected { box-shadow: inset 3px 0 var(--emerald); }
.request-state-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--success); background: var(--success-soft); }
.request-state-icon.pending, .request-state-icon.pending_approval { color: var(--warning); background: var(--warning-soft); }
.request-state-icon.denied, .request-state-icon.failed { color: var(--danger); background: var(--danger-soft); }
.request-state-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.request-row-copy { min-width: 0; display: grid; gap: 0.2rem; }
.request-row-copy strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.request-row-copy span { overflow: hidden; color: var(--muted); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.request-row-time { color: var(--muted); font: 650 0.66rem/1.3 var(--mono); white-space: nowrap; }
.list-empty { padding: 2.2rem 1rem; color: var(--muted); font-size: 0.84rem; text-align: center; }

.reality-strip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid #b8d4c9; border-radius: var(--radius-md); background: #edf7f3; }
.reality-icon { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: 0.6rem; color: var(--emerald); background: #fff; }
.reality-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.reality-strip h2 { margin: 0 0 0.15rem; font-size: 0.9rem; }
.reality-strip p { margin: 0; color: var(--ink-soft); font-size: 0.78rem; }

/* Requests */
.request-workspace { display: grid; grid-template-columns: minmax(18rem, .65fr) minmax(0, 1.35fr); gap: 1rem; align-items: start; }
.request-index-panel { position: sticky; top: calc(var(--topbar) + 1rem); max-height: calc(100vh - var(--topbar) - 2rem); overflow: auto; }
.segmented { display: inline-flex; padding: 0.2rem; border: 1px solid var(--line); border-radius: 0.45rem; background: var(--canvas); }
.segmented button { padding: 0.35rem 0.5rem; border: 0; border-radius: 0.3rem; color: var(--muted); background: transparent; font-size: 0.68rem; font-weight: 700; }
.segmented button.active { color: var(--ink); background: #fff; box-shadow: 0 1px 4px rgba(9,48,35,.08); }
.request-index-panel > .request-list { padding: 0.4rem 0.8rem 0.7rem; }
.request-detail-panel { min-height: 38rem; }
.empty-state { min-height: 28rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--muted); text-align: center; }
.empty-state > svg { width: 2.4rem; height: 2.4rem; margin-bottom: 0.9rem; fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.empty-state h2 { margin: 0; color: var(--ink); font-size: 1rem; }
.empty-state p { max-width: 24rem; margin: 0.45rem 0 0; font-size: 0.8rem; }
.request-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; padding: 1.3rem; border-bottom: 1px solid var(--line); }
.request-detail-head h2 { margin: 0.15rem 0 0.25rem; font-size: 1.25rem; }
.request-detail-head p { margin: 0; color: var(--muted); font: 650 0.68rem/1.4 var(--mono); }
.request-facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.request-facts > div { min-height: 5.1rem; display: grid; align-content: center; gap: 0.25rem; padding: 0.8rem 1rem; border-right: 1px solid var(--line); }
.request-facts > div:last-child { border-right: 0; }
.request-facts small { color: var(--muted); font: 700 0.62rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.request-facts strong { overflow-wrap: anywhere; font-size: 0.75rem; }
.approval-callout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 1.2rem 0; padding: 0.95rem 1rem; border: 1px solid #e4c779; border-radius: var(--radius-sm); background: var(--warning-soft); }
.approval-callout > div { display: grid; gap: 0.15rem; }
.approval-callout strong { font-size: 0.82rem; }
.approval-callout span { color: #684b0d; font-size: 0.72rem; }
.trace-section { padding: 1.2rem; }
.subheading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.subheading h3 { margin: 0; font-size: 0.95rem; }
.subheading span { color: var(--muted); font: 650 0.66rem/1.3 var(--mono); }
.layer-trace { display: grid; gap: 0.55rem; }
.trace-step { position: relative; display: grid; grid-template-columns: 5.5rem 8rem minmax(0,1fr) auto; align-items: center; gap: 0.8rem; min-height: 4.25rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-left: 4px solid var(--trace-color, var(--line-strong)); border-radius: var(--radius-sm); background: #fff; }
.trace-step::after { content: ""; position: absolute; left: 1.12rem; top: 100%; width: 1px; height: 0.57rem; background: var(--line-strong); }
.trace-step:last-child::after { display: none; }
.trace-layer { display: inline-flex; justify-content: center; padding: 0.42rem 0.5rem; border-radius: 0.35rem; color: #fff; background: var(--trace-color); font: 750 0.64rem/1 var(--mono); }
.trace-role { display: grid; gap: 0.15rem; }
.trace-role strong { font-size: 0.75rem; }
.trace-role small { color: var(--muted); font-size: 0.65rem; }
.trace-detail { color: var(--ink-soft); font-size: 0.73rem; }
.trace-detail small { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.64rem; }
.trace-silicon { --trace-color: var(--silicon); }
.trace-sapphire { --trace-color: var(--sapphire); }
.trace-emerald { --trace-color: var(--layer-emerald); }
.trace-opal { --trace-color: var(--opal); }
.trace-titanium { --trace-color: var(--titanium); }
.trace-amber { --trace-color: var(--amber); }
.trace-alloy { --trace-color: var(--alloy); }
.trace-copper { --trace-color: var(--copper); }
.trace-meta { display: grid; justify-items: end; gap: 0.28rem; }
.trace-meta time { color: var(--muted); font: 650 0.62rem/1 var(--mono); }
.trace-state { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--success); font: 750 0.61rem/1 var(--mono); text-transform: uppercase; }
.trace-state.denied { color: var(--danger); }.trace-state.pending { color: var(--warning); }.trace-state.idle { color: var(--muted); }
.trace-state svg { width: 0.82rem; height: 0.82rem; fill: none; stroke: currentColor; stroke-width: 2; }
.decision-summary { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.decision-card { padding: 1.2rem; }
.decision-card + .decision-card { border-left: 1px solid var(--line); }
.decision-card small { color: var(--muted); font: 700 0.64rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.decision-card h3 { margin: 0.35rem 0; font-size: 0.95rem; }
.decision-card p { margin: 0; color: var(--ink-soft); font-size: 0.74rem; }
.model-evidence-section { border-top: 1px solid var(--line); }
.model-evidence-section.recorded { padding: 1.1rem 1.2rem; background: var(--canvas); }
.model-evidence-section.live { background: #fbfdfc; }
.model-evidence-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .85rem; padding: 1.1rem 1.2rem; }
.model-evidence-icon { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border-radius: .6rem; color: var(--emerald); background: var(--emerald-soft); }
.model-evidence-icon svg { width: 1.18rem; height: 1.18rem; fill: none; stroke: currentColor; stroke-width: 1.75; }
.model-evidence-head > div { display: grid; gap: .15rem; }
.model-evidence-head small, .model-call-grid small, .disclosure-evidence small { color: var(--muted); font: 700 .72rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.model-evidence-head h3 { margin: 0; font-size: .9rem; }
.model-evidence-head p { margin: 0; color: var(--muted); font-size: .72rem; }
.model-call-grid { display: grid; grid-template-columns: 1.35fr .75fr .75fr .75fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.model-call-grid > div { min-width: 0; min-height: 4.9rem; display: grid; align-content: center; gap: .2rem; padding: .75rem 1rem; border-right: 1px solid var(--line); }
.model-call-grid > div:last-child { border-right: 0; }
.model-call-grid strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.model-call-grid span { color: var(--muted); font-size: .72rem; }
.disclosure-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 1.2rem 1.2rem; }
.disclosure-evidence > div { display: grid; align-content: start; gap: .55rem; }
.field-pill-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.field-pill-row > span { padding: .32rem .42rem; border: 1px solid #b8d4c9; border-radius: .35rem; color: var(--emerald); background: var(--emerald-soft); font: 700 .72rem/1 var(--mono); }
.disclosure-evidence > p { display: grid; gap: .3rem; margin: 0; padding: .75rem .85rem; border-left: 3px solid var(--emerald); color: var(--ink-soft); background: var(--canvas); font-size: .72rem; }
.disclosure-evidence > p strong { color: var(--ink); font-size: .72rem; }

/* Policy */
.policy-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(20rem,.7fr); gap: 1rem; align-items: start; }
.version-badge { padding: 0.38rem 0.5rem; border-radius: 0.35rem; color: var(--muted); background: var(--canvas); font: 700 0.64rem/1 var(--mono); }
.switch-grid { display: grid; }
.switch-row { min-height: 5.4rem; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch-row:last-child { border-bottom: 0; }
.switch-row > span:first-child { display: grid; gap: 0.25rem; }
.switch-row strong { font-size: 0.84rem; }
.switch-row small { color: var(--muted); font-size: 0.72rem; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 2.7rem; height: 1.5rem; border-radius: 999px; background: #b9c7c1; transition: background 150ms ease; }
.switch::after { content: ""; position: absolute; top: 0.19rem; left: 0.19rem; width: 1.12rem; height: 1.12rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.16); transition: transform 150ms ease; }
.switch-row input:checked + .switch { background: var(--emerald); }
.switch-row input:checked + .switch::after { transform: translateX(1.2rem); }
.switch-row input:focus-visible + .switch { outline: 3px solid #f1bb43; outline-offset: 3px; }
.policy-limits { position: sticky; top: calc(var(--topbar) + 1rem); }
.range-field { display: grid; gap: 0.7rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); }
.range-field > span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.range-field strong { font-size: 0.82rem; }
.range-field output { color: var(--emerald); font: 750 0.76rem/1 var(--mono); }
.range-field input { width: 100%; accent-color: var(--emerald); }
.range-field small { color: var(--muted); font-size: 0.7rem; }
.policy-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; }
.save-state { color: var(--muted); font-size: 0.7rem; }
.save-state.dirty { color: var(--warning); }
.policy-routing { grid-column: 1 / -1; }
.release-grid { display: grid; grid-template-columns: 1fr 1fr minmax(17rem,.8fr); align-items: stretch; }
.check-group { display: grid; align-content: start; gap: 0.45rem; margin: 0; padding: 1.15rem 1.25rem 1.3rem; border: 0; border-right: 1px solid var(--line); }
.check-group legend { margin-bottom: 0.35rem; color: var(--muted); font: 700 0.64rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.check-group label { min-height: 2.4rem; display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 0.42rem; color: var(--ink-soft); cursor: pointer; font-size: 0.75rem; }
.check-group label:hover { border-color: var(--line-strong); background: var(--canvas); }
.check-group input { width: 1rem; height: 1rem; flex: 0 0 auto; accent-color: var(--emerald); }
.model-check-group label > span { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; }
.model-check-group small { color: var(--muted); font-size: 0.64rem; }
.check-group input:disabled + span { opacity: .48; }
.external-route-control { min-height: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1.25rem; cursor: pointer; }
.external-route-control > span:first-child { display: grid; gap: .25rem; }
.external-route-control strong { font-size: .8rem; }
.external-route-control small { color: var(--muted); font-size: .68rem; }
.external-route-control > input { position: absolute; opacity: 0; pointer-events: none; }
.external-route-control > input:checked + .switch { background: var(--emerald); }
.external-route-control > input:checked + .switch::after { transform: translateX(1.2rem); }
.external-route-control > input:focus-visible + .switch { outline: 3px solid #f1bb43; outline-offset: 3px; }

/* Models */
.openai-panel { margin-bottom: 1rem; overflow: hidden; }
.openai-layout { display: grid; grid-template-columns: minmax(17rem,.8fr) minmax(0,1.2fr); align-items: center; gap: 1.5rem; padding: 1.25rem; }
.openai-copy { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .9rem; }
.openai-mark { width: 2.85rem; height: 2.85rem; display: grid; place-items: center; border-radius: .68rem; color: var(--emerald); background: var(--emerald-soft); }
.openai-mark svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.openai-copy h3 { margin: .1rem 0 .3rem; font-size: .92rem; }
.openai-copy p { margin: 0; color: var(--muted); font-size: .75rem; }
.openai-managed { display: grid; gap: .28rem; min-width: 15rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
.openai-managed > span { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.openai-managed > strong { color: var(--ink); font-size: .86rem; }
.openai-managed > small { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.compact-field { min-width: 0; display: grid; gap: .42rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.compact-field :is(input, select) { width: 100%; min-height: 2.9rem; padding: .65rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: #fff; }
.compact-field :is(input, select):focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(0,107,79,.1); outline: 0; }
.compact-field :is(input, select):disabled { color: var(--muted); background: var(--canvas); }
.credential-boundary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid var(--line); color: var(--ink-soft); background: var(--canvas); }
.credential-boundary > svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--emerald); stroke-width: 1.8; }
.credential-boundary p { display: flex; align-items: baseline; gap: .55rem; margin: 0; }
.credential-boundary strong { font-size: .72rem; }
.credential-boundary span { color: var(--muted); font-size: .7rem; }
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.model-card { min-height: 16rem; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.model-card-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.model-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 0.65rem; color: var(--emerald); background: var(--emerald-soft); }
.model-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.model-card h2 { margin: 1.2rem 0 0.35rem; font-size: 1.05rem; }
.model-card > p { margin: 0; color: var(--muted); font-size: 0.76rem; }
.model-meta { display: grid; gap: 0.45rem; margin-top: auto; padding-top: 1.2rem; }
.model-meta div { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.45rem; border-top: 1px solid var(--line); font-size: 0.7rem; }
.model-meta span { color: var(--muted); }
.routing-panel { padding-bottom: 1.25rem; }
.context-route { display: grid; grid-template-columns: minmax(0,1fr) 1.2rem minmax(0,1fr) 1.2rem minmax(0,1fr); align-items: center; gap: 0.75rem; padding: 1.25rem; }
.context-route > svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--line-strong); stroke-width: 1.8; }
.context-card { min-height: 7.3rem; display: grid; align-content: center; gap: 0.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.context-card small { color: var(--muted); font: 700 0.62rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.context-card strong { font-size: 0.76rem; line-height: 1.45; }
.context-card.filter { border-color: #7fc1aa; background: var(--emerald-soft); }
.context-card.model { border-color: #c8b4de; background: #f5effa; }

/* Assets */
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.asset-card { min-height: 18rem; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.asset-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.asset-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 0.7rem; color: var(--emerald); background: var(--emerald-soft); }
.asset-icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.asset-card h2 { margin: 1.2rem 0 0.25rem; font-size: 1.05rem; }
.asset-type { margin: 0; color: var(--muted); font-size: 0.73rem; }
.asset-facts { display: grid; gap: 0.5rem; margin-top: auto; padding-top: 1.3rem; }
.asset-facts div { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: 0.7rem; }
.asset-facts span { color: var(--muted); }
.asset-facts strong { text-align: right; }

/* Evidence */
.evidence-layout { display: grid; grid-template-columns: minmax(18rem,.65fr) minmax(0,1.35fr); gap: 1rem; align-items: start; }
.evidence-index-panel { position: sticky; top: calc(var(--topbar) + 1rem); max-height: calc(100vh - var(--topbar) - 2rem); overflow: auto; }
.evidence-list { display: grid; padding: 0.4rem 0.8rem 0.7rem; }
.evidence-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 0.8rem; padding: 0.85rem 0.35rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.evidence-row:hover, .evidence-row.selected { background: var(--canvas); }
.evidence-row.selected { box-shadow: inset 3px 0 var(--emerald); }
.evidence-row:last-child { border-bottom: 0; }
.evidence-row > svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--emerald); stroke-width: 1.7; }
.evidence-row-copy { min-width: 0; display: grid; gap: 0.18rem; }
.evidence-row-copy strong { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.evidence-row-copy span { color: var(--muted); font-size: 0.67rem; }
.evidence-row time { color: var(--muted); font: 650 0.62rem/1.3 var(--mono); }
.evidence-detail-panel { min-height: 34rem; }
.evidence-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--line); }
.evidence-detail-head h2 { margin: 0.15rem 0 0.25rem; font-size: 1.1rem; }
.evidence-detail-head p { margin: 0; color: var(--muted); font: 650 0.67rem/1.4 var(--mono); }
.evidence-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.evidence-facts div { min-height: 4.9rem; display: grid; align-content: center; gap: 0.2rem; padding: 0.75rem 1rem; border-right: 1px solid var(--line); }
.evidence-facts div:last-child { border-right: 0; }
.evidence-facts small { color: var(--muted); font: 700 0.6rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.evidence-facts strong { overflow-wrap: anywhere; font-size: 0.72rem; }
.evidence-json-wrap { padding: 1.2rem; }
.evidence-json-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.65rem; }
.evidence-json-head h3 { margin: 0; font-size: 0.85rem; }
.copy-button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 0.35rem; background: #fff; font-size: 0.68rem; font-weight: 700; }
.copy-button:hover { color: var(--emerald); border-color: var(--emerald); }
.copy-button svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.evidence-json { max-height: 26rem; margin: 0; overflow: auto; padding: 1rem; border-radius: var(--radius-sm); color: #c6f0df; background: #071b15; font: 500 0.7rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Deployment */
.deployment-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.deployment-card { min-height: 10rem; display: flex; flex-direction: column; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.deployment-card svg { width: 1.4rem; height: 1.4rem; margin-bottom: 1.25rem; fill: none; stroke: var(--emerald); stroke-width: 1.7; }
.deployment-card small { color: var(--muted); font: 700 0.64rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.deployment-card strong { margin-top: 0.3rem; font-size: 0.9rem; }
.deployment-card span { margin-top: 0.25rem; color: var(--muted); font-size: 0.7rem; }
.primitives-panel { margin-bottom: 1rem; padding-bottom: 1.2rem; }
.primitive-row { display: grid; grid-template-columns: repeat(13, auto); align-items: center; justify-content: center; gap: clamp(0.35rem, 1vw, 0.8rem); padding: 1.4rem 1rem 0.2rem; }
.primitive-row span { padding: 0.65rem 0.75rem; border: 1px solid #aed0c2; border-radius: 0.45rem; color: var(--emerald); background: var(--emerald-soft); font: 750 0.68rem/1 var(--mono); }
.primitive-row svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: var(--line-strong); stroke-width: 1.8; }
.reality-table-panel { margin-bottom: 1rem; }
.reality-table { display: grid; grid-template-columns: 1fr 1fr; }
.reality-table > div { display: flex; gap: 1rem; padding: 1.2rem; }
.reality-table > div + div { border-left: 1px solid var(--line); }
.status-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 0.6rem; }
.status-icon.live { color: var(--success); background: var(--success-soft); }
.status-icon.synthetic { color: var(--info); background: var(--info-soft); }
.status-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.reality-table p { display: grid; gap: 0.25rem; margin: 0; }
.reality-table strong { font-size: 0.82rem; }
.reality-table span { color: var(--muted); font-size: 0.73rem; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 1.25rem; border: 1px solid #dfbbc2; border-radius: var(--radius-md); background: #fff; }
.danger-zone > div { display: grid; gap: 0.2rem; }
.danger-zone strong { font-size: 0.82rem; }
.danger-zone span { color: var(--muted); font-size: 0.72rem; }

/* Dialogs and notifications */
dialog { color: var(--ink); }
dialog::backdrop { background: rgba(4,25,18,.6); backdrop-filter: blur(4px); }
.request-dialog { width: min(calc(100% - 2rem), 47rem); max-height: calc(100vh - 2rem); padding: 0; overflow: auto; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.request-dialog form { padding: 1.5rem; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.dialog-heading h2 { margin: 0; font-size: 1.55rem; letter-spacing: -0.035em; }
.dialog-intro { max-width: 41rem; margin: 0.75rem 0 1.3rem; color: var(--muted); font-size: 0.84rem; }
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 0; padding: 0; border: 0; }
.scenario-grid legend { width: 100%; margin-bottom: 0.65rem; color: var(--ink-soft); font-size: 0.75rem; font-weight: 750; }
.scenario-option { position: relative; cursor: pointer; }
.scenario-option input { position: absolute; opacity: 0; }
.scenario-card { min-height: 6.7rem; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.8rem; padding: 0.95rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.scenario-card > svg { width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; fill: none; stroke: var(--emerald); stroke-width: 1.7; }
.scenario-card > span { display: grid; gap: 0.25rem; }
.scenario-card strong { font-size: 0.8rem; }
.scenario-card small { color: var(--muted); font-size: 0.69rem; line-height: 1.4; }
.scenario-option input:checked + .scenario-card { border-color: var(--emerald); background: var(--emerald-soft); box-shadow: 0 0 0 2px rgba(0,107,79,.08); }
.scenario-option input:focus-visible + .scenario-card { outline: 3px solid #f1bb43; outline-offset: 3px; }
.model-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1rem 0 0; padding: 0; border: 0; }
.model-route-grid legend { width: 100%; margin-bottom: .65rem; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.model-route-option { position: relative; cursor: pointer; }
.model-route-option > input { position: absolute; opacity: 0; }
.model-route-card { min-height: 5.2rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.route-icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .55rem; color: var(--emerald); background: var(--emerald-soft); }
.route-icon.live { color: var(--opal); background: #f2eafa; }
.route-icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.75; }
.model-route-card > span:nth-child(2) { display: grid; gap: .18rem; }
.model-route-card strong { font-size: .78rem; }
.model-route-card small { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.route-state { padding: .3rem .4rem; border-radius: .3rem; color: var(--muted); background: var(--canvas); font: 750 .7rem/1 var(--mono); }
.model-route-option > input:checked + .model-route-card { border-color: var(--emerald); background: var(--emerald-soft); box-shadow: 0 0 0 2px rgba(0,107,79,.08); }
.model-route-option > input:focus-visible + .model-route-card { outline: 3px solid #f1bb43; outline-offset: 3px; }
.model-route-option.disabled { cursor: not-allowed; }
.model-route-option.disabled .model-route-card { opacity: .58; background: var(--canvas); }
.model-route-option.available .route-state { color: var(--success); background: var(--success-soft); }
.request-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.request-preview > span { display: grid; gap: 0.2rem; padding: 0.75rem 0.9rem; border-right: 1px solid var(--line); }
.request-preview > span:last-child { border-right: 0; }
.request-preview small { color: var(--muted); font: 700 0.6rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.request-preview strong { font-size: 0.72rem; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; margin-top: 1.35rem; }
.confirm-dialog { width: min(calc(100% - 2rem), 26rem); padding: 1.5rem; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center; }
.confirm-mark { width: 3.1rem; height: 3.1rem; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 50%; color: var(--danger); background: var(--danger-soft); }
.confirm-mark svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.confirm-dialog h2 { margin: 0; font-size: 1.3rem; }
.confirm-dialog p { margin: 0.6rem 0 1rem; color: var(--muted); font-size: 0.8rem; }
.confirm-dialog .dialog-actions { justify-content: center; }
.toast-region { position: fixed; z-index: 1100; right: 1rem; bottom: 1rem; display: grid; gap: 0.6rem; pointer-events: none; }
.toast { min-width: 18rem; max-width: 25rem; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; padding: 0.8rem 0.9rem; border: 1px solid #b4d0c4; border-radius: var(--radius-sm); color: var(--ink); background: #fff; box-shadow: var(--shadow-lg); animation: toastIn 180ms ease; }
.toast.error { border-color: #e0aeba; }
.toast svg { width: 1rem; height: 1rem; margin-top: 0.15rem; fill: none; stroke: var(--success); stroke-width: 2; }
.toast.error svg { stroke: var(--danger); }
.toast span { font-size: 0.77rem; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.loading-shimmer { min-height: 5rem; border-radius: var(--radius-md); background: linear-gradient(90deg, #edf3f0 25%, #f7faf8 50%, #edf3f0 75%); background-size: 200% 100%; animation: shimmer 1.1s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Keep operational labels readable on investor laptops and wall displays. */
:is(
  .deployment-chip small,
  .nav-count,
  .environment-badge span,
  .live-badge,
  .user-copy small,
  .status-badge,
  .workflow-node small,
  .workflow-node span,
  .layer,
  .request-row-time,
  .segmented button,
  .request-detail-head p,
  .request-facts small,
  .subheading span,
  .trace-layer,
  .trace-role small,
  .trace-detail small,
  .trace-state,
  .trace-meta time,
  .version-badge,
  .check-group legend,
  .model-check-group small,
  .external-route-control small,
  .context-card small,
  .evidence-row-copy span,
  .evidence-row time,
  .evidence-detail-head p,
  .evidence-facts small,
  .copy-button,
  .deployment-card small,
  .primitive-row span,
  .scenario-card small,
  .request-preview small
) { font-size: 0.72rem; }

@media (max-width: 1180px) {
  :root { --sidebar: 15.25rem; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .workflow-panel, .recent-panel { min-height: auto; }
  .model-grid, .asset-grid { grid-template-columns: 1fr 1fr; }
  .openai-layout { grid-template-columns: 1fr; }
  .deployment-grid { grid-template-columns: 1fr 1fr; }
  .trace-step { grid-template-columns: 5.2rem 7rem minmax(0,1fr) auto; }
  .primitive-row { grid-template-columns: repeat(7, auto); }
  .primitive-row svg:nth-of-type(n+4) { display: none; }
}

@media (max-width: 940px) {
  .sidebar { transform: translateX(-102%); transition: transform 180ms ease; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close, .menu-button { display: inline-grid; }
  .console-main-shell { margin-left: 0; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-limits { position: static; }
  .release-grid { grid-template-columns: 1fr 1fr; }
  .external-route-control { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .request-workspace, .evidence-layout { grid-template-columns: 1fr; }
  .request-index-panel, .evidence-index-panel { position: static; max-height: none; }
  .request-list:not(.compact), .evidence-list { max-height: 22rem; overflow: auto; }
}

@media (max-width: 780px) {
  .login-view { grid-template-columns: 1fr; }
  .login-story { min-height: auto; padding: 2rem 1.5rem; }
  .login-story-copy { padding: 4rem 0; }
  .login-story-copy h1 { font-size: clamp(2.3rem, 12vw, 4rem); }
  .login-panel { min-height: auto; padding: 4rem 1.5rem; }
  .workflow-map { grid-template-columns: 1fr; justify-items: stretch; }
  .workflow-node { width: 100%; min-height: 6rem; flex-direction: row; justify-content: flex-start; text-align: left; }
  .workflow-arrow { display: grid; place-items: center; transform: rotate(90deg); }
  .layer-rail { grid-template-columns: repeat(4,1fr); }
  .heading-with-action { align-items: start; flex-direction: column; gap: 1rem; }
  .model-grid, .asset-grid { grid-template-columns: 1fr; }
  .context-route { grid-template-columns: 1fr; }
  .context-route > svg { margin: 0 auto; transform: rotate(90deg); }
  .trace-step { grid-template-columns: 5rem minmax(0,1fr) auto; }
  .trace-role { display: none; }
  .request-facts { grid-template-columns: 1fr 1fr; }
  .request-facts > div:nth-child(2) { border-right: 0; }
  .request-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .decision-summary { grid-template-columns: 1fr; }
  .decision-card + .decision-card { border-top: 1px solid var(--line); border-left: 0; }
  .model-call-grid { grid-template-columns: 1fr 1fr; }
  .model-call-grid > div:nth-child(2) { border-right: 0; }
  .model-call-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .disclosure-evidence { grid-template-columns: 1fr; }
  .reality-table { grid-template-columns: 1fr; }
  .reality-table > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .primitive-row { display: flex; flex-wrap: wrap; }
  .primitive-row svg { display: none; }
  .scenario-grid { grid-template-columns: 1fr; }
  .model-route-grid { grid-template-columns: 1fr; }
  .release-grid { grid-template-columns: 1fr; }
  .check-group { border-right: 0; border-bottom: 1px solid var(--line); }
  .external-route-control { grid-column: auto; }
}

@media (max-width: 560px) {
  .topbar { gap: 0.65rem; padding-inline: 0.75rem; }
  .topbar-context span, .live-badge, .user-copy, .user-button .chevron { display: none; }
  .topbar-context strong { font-size: 0.78rem; }
  .topbar-actions { gap: 0.35rem; }
  .main-content { padding: 1.25rem 0.85rem 2rem; }
  .page-heading h1 { font-size: 2rem; }
  .metric-grid, .deployment-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 6.5rem; }
  .layer-rail { grid-template-columns: repeat(2,1fr); }
  .stacked-mobile { align-items: start; flex-direction: column; }
  .trace-step { grid-template-columns: 4.8rem 1fr; }
  .trace-meta { grid-column: 2; justify-items: start; grid-template-columns: auto auto; align-items: center; }
  .request-detail-head, .approval-callout, .danger-zone { align-items: stretch; flex-direction: column; }
  .model-evidence-head { grid-template-columns: auto 1fr; }
  .model-evidence-head > .status-badge { grid-column: 1 / -1; width: fit-content; }
  .request-facts, .evidence-facts { grid-template-columns: 1fr; }
  .request-facts > div, .evidence-facts > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .request-facts > div:last-child, .evidence-facts > div:last-child { border-bottom: 0; }
  .policy-actions { align-items: stretch; flex-direction: column; }
  .request-preview { grid-template-columns: 1fr; }
  .openai-managed { min-width: 0; }
  .credential-boundary p { display: grid; gap: .2rem; }
  .request-preview > span { border-right: 0; border-bottom: 1px solid var(--line); }
  .request-preview > span:last-child { border-bottom: 0; }
  .login-route { grid-template-columns: 1fr; width: 100%; }
  .login-route svg { margin: 0 auto; transform: rotate(90deg); }
  .toast-region { right: 0.65rem; bottom: 0.65rem; left: 0.65rem; }
  .toast { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Operational labels remain readable on dense desktop and mobile views. */
.deployment-chip small,
.nav-count,
.environment-badge span,
.live-badge,
.user-copy small,
.status-badge,
.workflow-node small,
.workflow-node span,
.layer,
.request-row-time,
.segmented button,
.request-detail-head p,
.request-facts small,
.subheading span,
.trace-layer,
.trace-role small,
.trace-detail small,
.trace-meta time,
.trace-state,
.decision-card small,
.version-badge,
.check-group legend,
.model-check-group small,
.context-card small,
.evidence-row-copy span,
.evidence-row time,
.evidence-detail-head p,
.copy-button,
.deployment-card small,
.primitive-row span,
.scenario-card small {
  font-size: 0.72rem;
}