:root {
  --navy-950: #071a31;
  --navy-900: #0b2443;
  --navy-800: #123963;
  --navy-700: #1b4f82;
  --blue-600: #2869a6;
  --blue-100: #eaf3fb;
  --blue-50: #f4f8fc;
  --ink: #172238;
  --muted: #657086;
  --line: #dce4ef;
  --surface: #ffffff;
  --canvas: #f3f6fa;
  --critical: #a51d32;
  --critical-bg: #fff0f2;
  --high: #a25c00;
  --high-bg: #fff7e8;
  --success: #16704a;
  --success-bg: #edf9f3;
  --info: #2e5f93;
  --shadow: 0 8px 28px rgba(10, 32, 61, .08);
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--blue-600); overflow-wrap: anywhere; }
h1, h2, h3, h4, h5, p { margin-top: 0; }
h2 { font-size: clamp(24px, 2vw, 34px); line-height: 1.15; letter-spacing: -.025em; }
h3 { font-size: 18px; line-height: 1.25; margin-bottom: 0; }
h4 { font-size: 14px; margin: 18px 0 6px; }
h5 { font-size: 13px; margin-bottom: 5px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 14px;
  top: -100px;
  z-index: 100;
  background: white;
  padding: 10px 14px;
  border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.app-header {
  min-height: 78px;
  padding: 12px 22px;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.2fr) auto;
  align-items: center;
  gap: 24px;
  background: linear-gradient(118deg, var(--navy-950), var(--navy-800));
  color: white;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 5px 18px rgba(4, 18, 36, .22);
}

.brand-block { display: flex; align-items: center; gap: 12px; }
.brand-block h1 { font-size: 21px; margin: 1px 0 0; letter-spacing: -.02em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: white;
  color: var(--navy-800);
  font: 800 23px Georgia, serif;
  box-shadow: inset 0 0 0 3px rgba(22, 74, 124, .12);
}

.eyebrow {
  margin: 0 0 3px;
  color: #6c7a91;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.app-header .eyebrow { color: #a9c4df; }

.global-search {
  height: 44px;
  display: grid;
  grid-template-columns: 21px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 11px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .11);
}
.global-search:focus-within { border-color: #9bc5ec; background: rgba(255, 255, 255, .17); }
.global-search svg { width: 20px; fill: none; stroke: #c8d9e9; stroke-width: 1.8; }
.global-search input { width: 100%; border: 0; outline: 0; background: transparent; color: white; }
.global-search input::placeholder { color: #c6d4e3; }
kbd { padding: 2px 6px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 5px; color: #d5e2ee; font-size: 10px; font-family: inherit; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.meeting-toggle, .export-menu > summary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9px;
  padding: 0 13px;
  background: rgba(255, 255, 255, .1);
  color: white;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.meeting-toggle:hover, .export-menu > summary:hover { background: rgba(255, 255, 255, .17); }
.meeting-toggle.active { background: #fff; color: var(--critical); border-color: white; }
.export-menu { position: relative; }
.export-menu > summary { list-style: none; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu > summary::after { content: "⌄"; margin-left: 2px; }
.export-options {
  width: 190px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: var(--shadow);
}
.export-options button { width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.export-options button:hover { background: var(--blue-50); }

.trace-warning {
  padding: 9px 22px;
  background: #fff4d9;
  border-bottom: 1px solid #ead5a0;
  color: #6f4c08;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
  position: sticky;
  top: 78px;
  z-index: 35;
}

.filter-bar {
  min-height: 47px;
  padding: 6px 22px;
  display: flex;
  align-items: center;
  background: white;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 113px;
  z-index: 30;
}
.filter-toggle { border: 0; background: transparent; color: var(--navy-800); font-weight: 750; cursor: pointer; }
.count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 5px; border-radius: 20px; background: var(--blue-100); }
.filter-panel {
  flex: 1;
  margin-left: 20px;
  display: grid;
  grid-template-columns: repeat(9, minmax(110px, 1fr)) auto;
  gap: 8px;
  align-items: end;
}
.filter-panel label, .decision-grid label, .question-card label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
input, select, textarea {
  width: 100%;
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  background: white;
  color: var(--ink);
  outline: none;
}
input, select { height: 34px; padding: 0 8px; }
textarea { min-height: 70px; padding: 9px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(40, 105, 166, .11); }
.secondary-button { height: 34px; padding: 0 12px; border: 1px solid #cad5e3; border-radius: 8px; background: white; color: var(--navy-700); font-weight: 700; cursor: pointer; }

.app-shell {
  min-height: calc(100vh - 160px);
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
}

/* Simplified presentation requested: no top chrome, warnings, filters or notes rail. */
.app-header,
.trace-warning,
.filter-bar,
.context-panel {
  display: none !important;
}

.sidebar, .context-panel { background: white; border-color: var(--line); }
.sidebar { border-right: 1px solid var(--line); padding: 20px 14px 14px; }
.sidebar-title { padding: 0 10px 15px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.sidebar-title strong { color: var(--navy-900); }
.tree-group { margin: 2px 0; }
.tree-group > summary { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 8px; color: #33445d; font-weight: 750; cursor: pointer; list-style: none; }
.tree-group > summary::-webkit-details-marker { display: none; }
.tree-group > summary::after { content: "›"; margin-left: auto; color: #8695a9; transform: rotate(0); transition: transform .15s; }
.tree-group[open] > summary::after { transform: rotate(90deg); }
.tree-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--blue-600); background: var(--blue-100); border-radius: 6px; font-size: 11px; }
.tree-group.warning .tree-icon { color: var(--high); background: var(--high-bg); }
.tree-children { position: relative; margin-left: 19px; padding-left: 12px; border-left: 1px solid #d7e0eb; }
.tree-node { width: 100%; display: block; border: 0; border-radius: 7px; padding: 7px 9px; background: transparent; color: #536076; font-size: 12px; text-align: left; cursor: pointer; }
.tree-node:hover { background: var(--blue-50); color: var(--navy-800); }
.tree-node.active { background: #e6f0f9; color: var(--navy-800); font-weight: 800; box-shadow: inset 3px 0 var(--blue-600); }
.sidebar-foot { margin: 24px 7px 0; padding: 12px 8px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 10px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #25a56c; box-shadow: 0 0 0 4px #e6f7ef; }

.main-panel { min-width: 0; padding: 26px clamp(20px, 2.5vw, 38px) 70px; }
.main-panel:focus { outline: none; }
.page-heading { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; margin-bottom: 22px; }
.page-heading h2 { margin-bottom: 7px; color: var(--navy-900); }
.page-heading > div > p:last-child { max-width: 880px; color: var(--muted); margin-bottom: 0; }

.surface, .component-hero, .trace-explainer, .disclaimer-card, .source-alert {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.surface { padding: 20px; margin-bottom: 18px; }
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-title > span:not(.badge) { color: var(--muted); font-size: 11px; }
.section-title h4 { margin: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid #d5deea;
  border-radius: 6px;
  background: #f4f6f9;
  color: #5d697c;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge.danger { background: var(--critical-bg); color: var(--critical); border-color: #f2c6ce; }
.badge.warning { background: var(--high-bg); color: #82500d; border-color: #efd49f; }
.badge.success { background: var(--success-bg); color: var(--success); border-color: #b9e5d0; }
.badge.info { background: var(--blue-100); color: var(--info); border-color: #c5dcef; }
.legend-inline { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card { min-height: 122px; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 5px 18px rgba(10, 32, 61, .05); }
.kpi-card > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.kpi-card strong { color: var(--navy-800); font-size: 27px; margin-top: auto; }
.kpi-card small { color: var(--muted); font-size: 10px; }
.kpi-card.warning { border-top: 3px solid var(--high); }
.kpi-card.success { border-top: 3px solid var(--success); }
.kpi-card.danger { border-top: 3px solid var(--critical); }
.disclaimer-card { display: flex; gap: 13px; padding: 14px 16px; margin-bottom: 18px; border-color: #cbdcea; background: #f8fbfe; box-shadow: none; }
.disclaimer-card p { margin: 2px 0 0; color: var(--muted); }
.disclaimer-icon { flex: 0 0 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--navy-700); color: white; font-weight: 800; }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 18px; }
.dashboard-grid .surface { margin: 0; }
.bar-chart { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(100px, 180px) minmax(80px, 1fr) 35px; gap: 10px; align-items: center; }
.bar-row > span { color: #4f5d72; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row > strong { text-align: right; font-size: 11px; }
.bar-track { height: 8px; border-radius: 10px; background: #edf1f6; overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2869a6, #6fa5d3); }
.donut-row { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 230px; }
.donut { width: 150px; height: 150px; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--critical) 0 var(--critical-angle), var(--high) var(--critical-angle) 360deg); }
.donut::before { content: ""; position: absolute; inset: 21px; border-radius: 50%; background: white; }
.donut span { position: relative; display: grid; text-align: center; font-size: 25px; font-weight: 850; color: var(--navy-800); }
.donut span small { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.legend p { display: flex; align-items: center; gap: 7px; margin: 8px 0; }
.legend > small { color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.critical { background: var(--critical); }
.dot.high { background: var(--high); }
.checks-panel { margin-top: 18px; }
.check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.check-grid > div { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 9px 10px; background: var(--blue-50); border-radius: 8px; }
.check-grid span { font-size: 10px; color: var(--muted); }
.check-grid b { color: var(--success); }

.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.clean-list { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.clean-list li { display: flex; gap: 9px; align-items: center; }
.clean-list li span { color: var(--success); font-weight: 900; }
.flow-inline { padding: 13px; border-radius: 9px; background: var(--navy-900); color: white !important; font-weight: 750; text-align: center; }
.source-alert { padding: 14px 17px; margin-bottom: 18px; border-color: #efd39b; background: #fff9eb; box-shadow: none; color: #694b15; }
.source-alert p { margin: 3px 0 0; }
.document-table { border-top: 1px solid var(--line); }
.document-table > div { min-height: 54px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #edf1f5; }
.document-table strong, .document-table small { display: block; }
.document-table small { color: var(--muted); margin-top: 2px; }
.file-icon { width: 25px; height: 28px; display: grid; place-items: center; border-radius: 5px; background: var(--blue-100); color: var(--blue-600); }
.pan-card { border-left: 4px solid var(--high); }
.pan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pan-grid > div { padding: 13px; background: #fbfcfe; border: 1px solid #e8edf4; border-radius: 9px; }
.pan-grid p { margin: 4px 0 0; color: var(--muted); }
.pan-card > details { margin-top: 12px; }
.pan-card > details > summary { cursor: pointer; font-weight: 750; color: var(--navy-700); }
.issue-list { display: grid; gap: 8px; margin: 0; padding-left: 28px; }
.issue-list li { padding: 8px 10px; background: #f8fafc; border-radius: 8px; }
.pending-item { padding: 12px 0; border-top: 1px solid var(--line); }
.pending-item p { margin: 3px 0 0; color: var(--muted); }

.flow-surface { overflow-x: auto; }
.flow-diagram { min-width: 700px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 45px 10px; }
.flow-node { min-width: 125px; padding: 17px 12px; border: 1px solid #b9cce0; border-radius: 11px; background: linear-gradient(180deg, #fff, #f2f7fc); color: var(--navy-800); font-weight: 800; text-align: center; }
.flow-edge { min-width: 125px; display: grid; gap: 2px; place-items: center; border: 0; background: transparent; color: var(--blue-600); cursor: pointer; }
.flow-edge > span { font-size: 0; }
.flow-edge > span::after { content: "→"; font-size: 26px; }
.flow-edge strong { padding: 4px 7px; border-radius: 5px; background: var(--blue-100); font-size: 10px; }
.flow-edge small { max-width: 135px; color: var(--muted); font-size: 8px; }
.flow-edge.uncertain strong { background: var(--high-bg); color: var(--high); }
.flow-edge.selected strong { outline: 2px solid var(--blue-600); }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.detail-grid > div { display: grid; gap: 4px; padding: 12px; border-radius: 9px; background: #f7f9fc; }
.detail-grid span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.callout { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--blue-600); background: var(--blue-50); }
.callout p { margin: 3px 0 0; }
.pill-list, .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-list span, .chip-row span, .chip-row button { padding: 5px 8px; border: 1px solid #d5dfeb; border-radius: 20px; background: #f7f9fc; color: #46576f; font-size: 10px; }
.chip-row button { cursor: pointer; }
.chip-row button:hover { border-color: var(--blue-600); color: var(--blue-600); }

.component-hero { overflow: hidden; margin-bottom: 18px; }
.hero-facts { display: grid; grid-template-columns: repeat(2, 1fr); }
.hero-facts > div { display: grid; gap: 5px; padding: 16px 19px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-facts span, .fact-item span, .control-meta span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.security-score { display: flex; align-items: center; justify-content: space-between; padding: 14px 19px; background: var(--navy-900); color: white; }
.security-score .eyebrow { color: #a8c4df; }
.security-score > div { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; font-weight: 800; }
.critical-count { color: #ff9ba9; }
.high-count { color: #ffd188; }
.confirm-strip { border-top: 3px solid var(--high); }
.confirm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.confirm-grid span { padding: 9px 11px; background: var(--high-bg); border-radius: 8px; color: #69491b; font-size: 11px; }
.observation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.observation-card { padding: 14px; border: 1px solid #e1e8f0; border-radius: 10px; background: #fbfcfe; }
.observation-card > div:first-child { display: flex; flex-wrap: wrap; gap: 5px; }
.observation-card h4 { margin-top: 10px; color: var(--navy-800); }
.observation-card > p { color: #4f5e73; }
.observation-card > small { display: block; color: var(--muted); margin-top: 7px; }
.requirements-table { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.requirements-head, .requirements-table > div:not(.requirements-head) { display: grid; grid-template-columns: minmax(210px, 1fr) 90px 140px minmax(240px, 1.4fr); gap: 10px; align-items: center; }
.requirements-head { padding: 9px 12px; background: var(--navy-900); color: white; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.requirements-table > div:not(.requirements-head) { min-height: 54px; padding: 9px 12px; border-bottom: 1px solid #e8edf3; }
.requirements-table p { margin: 0; color: var(--muted); font-size: 11px; }
.facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
.fact-item { min-width: 0; padding: 13px 0; border-top: 1px solid #e9eef4; }
.fact-item > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 5px; }
.fact-item > strong, .fact-item > a { display: block; font-size: 12px; }
.fact-item > small { display: block; margin-top: 4px; color: #8994a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.card-accordions, .question-list { display: grid; gap: 8px; }
.cornucopia-card, .question-card, .domain-group, .list-group, .trace-group, .card-index > details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  overflow: hidden;
}
.cornucopia-card > summary { min-height: 56px; display: grid; grid-template-columns: 28px 70px minmax(180px, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px; list-style: none; cursor: pointer; }
.cornucopia-card > summary::-webkit-details-marker, .question-card > summary::-webkit-details-marker, .domain-group > summary::-webkit-details-marker, .list-group > summary::-webkit-details-marker, .trace-group > summary::-webkit-details-marker, .card-index summary::-webkit-details-marker { display: none; }
.cornucopia-card summary > span:nth-of-type(2) { color: var(--muted); font-size: 11px; }
.cornucopia-card summary > b { color: var(--muted); font-size: 10px; }
.playing-card { width: 25px; height: 30px; display: grid; place-items: center; border: 1px solid #aebed0; border-radius: 5px; color: var(--critical); background: white; }
.cornucopia-body { padding: 15px 20px 18px 110px; border-top: 1px solid var(--line); background: #fbfcfe; }
.cornucopia-body p { color: #4f5d72; }
.trace-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.trace-tags span { padding: 5px 8px; border-radius: 6px; background: #eaf1f8; color: var(--navy-700); font-size: 9px; font-weight: 800; }
.question-card > summary { padding: 12px 14px; cursor: pointer; font-weight: 700; }
.question-card > label { padding: 0 14px 14px; }

.controls-section > .section-title { position: sticky; top: 0; z-index: 8; padding: 10px 0; background: white; }
.domain-group { margin: 10px 0; }
.domain-group > summary, .list-group > summary, .trace-group > summary { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; list-style: none; cursor: pointer; background: #f4f8fc; color: var(--navy-800); font-weight: 800; }
.domain-group > summary b, .list-group > summary b, .trace-group > summary b { margin-left: auto; color: var(--muted); font-size: 10px; }
.domain-group > div { padding: 0 14px 14px; }
.subdomain-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; }
.subdomain-title h4 { margin: 0; color: #42516a; }
.subdomain-title span { min-width: 21px; height: 21px; display: grid; place-items: center; background: #edf2f7; border-radius: 20px; font-size: 10px; }
.control-card { border: 1px solid #dbe3ed; border-radius: 9px; margin: 7px 0; background: white; scroll-margin-top: 190px; }
.control-card > summary { min-height: 62px; display: grid; grid-template-columns: 22px 135px minmax(0, 1fr) 20px; gap: 10px; align-items: center; padding: 9px 12px; cursor: pointer; list-style: none; }
.control-card > summary::-webkit-details-marker { display: none; }
.control-card > summary p { margin: 0; color: #4d5b70; font-size: 11px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.control-card > summary span > small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.criticality-icon { font-size: 12px; }
.criticality-icon.critical { color: var(--critical); }
.criticality-icon.high { color: var(--high); }
.accordion-arrow { font-size: 17px; color: #7c899c; transition: transform .15s; }
.control-card[open] .accordion-arrow { transform: rotate(180deg); }
.control-body { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.control-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 0; }
.control-meta span strong { color: #45546a; margin-left: 4px; text-transform: none; }
.control-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.control-columns p { color: #526076; }
.source-wording { border: 1px dashed #cfd8e4; border-radius: 8px; padding: 10px 12px; background: #fbfcfe; }
.source-wording > summary { cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 700; }
.source-wording p { margin: 10px 0 3px; }
.source-wording small { color: var(--critical); }
.card-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 13px 0; }
.explain-button, .text-button { border: 0; background: transparent; color: var(--blue-600); font-size: 10px; font-weight: 850; cursor: pointer; }
.explain-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.explain-panel > div { padding: 11px; border-radius: 8px; background: var(--blue-50); }
.explain-panel p { color: #526076; margin: 0; }
.decision-panel { margin-top: 16px; padding: 15px; border-radius: 10px; background: #f3f7fb; border: 1px solid #dae4ef; }
.decision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.decision-grid label:nth-last-child(-n+2) { grid-column: span 3; }

.compact-table { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.compact-head, .compact-row { display: grid; grid-template-columns: 170px minmax(240px, 1fr) 190px 90px 170px; gap: 8px; align-items: center; }
.compact-head { padding: 9px 12px; background: var(--navy-900); color: white; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.compact-row { width: 100%; min-height: 54px; padding: 8px 12px; border: 0; border-bottom: 1px solid #e8edf3; background: white; text-align: left; cursor: pointer; }
.compact-row:hover { background: var(--blue-50); }
.compact-row small { display: block; max-width: 500px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-caption { color: var(--muted); font-size: 10px; margin: 8px 0 0; }
.list-group { margin-bottom: 10px; }
.list-group .compact-table { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.card-index { display: grid; gap: 8px; }
.card-index summary { min-height: 58px; display: grid; grid-template-columns: 30px 70px minmax(220px, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px; list-style: none; cursor: pointer; }
.card-index summary p { margin: 0; color: var(--muted); }
.card-index details > .chip-row { padding: 12px 108px 16px; border-top: 1px solid var(--line); background: #fbfcfe; }

.trace-explainer { padding: 18px; margin-bottom: 18px; background: var(--navy-900); color: white; }
.trace-explainer > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; }
.trace-explainer strong { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.08); font-size: 10px; }
.trace-explainer p { max-width: 850px; margin: 15px auto 0; color: #c7d7e7; text-align: center; }
.trace-columns { align-items: start; }
.trace-group { margin: 8px 0; }
.trace-card { padding: 12px 14px; border-top: 1px solid var(--line); }
.trace-card > span { display: block; color: var(--muted); font-size: 10px; margin: 3px 0 8px; }
.conflict-card { padding: 13px 15px; border: 1px solid #efc99c; border-radius: 9px; background: #fff9ef; }
.conflict-card p { margin: 4px 0; }
.empty-state { padding: 45px 20px; text-align: center; border: 1px dashed #c7d1de; border-radius: 9px; color: var(--muted); }
.empty-state p { margin: 4px 0 0; }

.context-panel { border-left: 1px solid var(--line); padding: 20px 16px; }
.context-sticky { position: sticky; top: 176px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.panel-heading h2 { font-size: 18px; }
.local-badge { padding: 3px 6px; border-radius: 4px; background: var(--success-bg); color: var(--success); font-size: 8px; font-weight: 900; }
.notes-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.context-panel textarea { min-height: 190px; background: #fffdf5; border-color: #e4dcb9; }
.storage-hint { color: var(--muted); font-size: 9px; }
.context-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; }
.context-metrics > div { padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.context-metrics strong, .context-metrics span { display: block; }
.context-metrics strong { font-size: 18px; color: var(--navy-800); }
.context-metrics span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.context-summary > small { display: block; margin-top: 8px; color: var(--muted); }

.toast-region { position: fixed; right: 25px; bottom: 25px; z-index: 80; padding: 11px 15px; border-radius: 9px; background: var(--navy-900); color: white; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .18s; }
.toast-region.show { opacity: 1; transform: translateY(0); }
.fatal-error { max-width: 700px; margin: 80px auto; padding: 30px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }

.meeting-mode .meeting-hide { display: none !important; }
.meeting-mode .app-header { background: linear-gradient(118deg, #41101a, #7a1d30); }
.meeting-mode .trace-warning { background: #fff0f2; color: #7f1c30; border-color: #edc4cc; }
.meeting-mode .questions-section, .meeting-mode .controls-section, .meeting-mode .confirm-strip { box-shadow: 0 0 0 2px rgba(165, 29, 50, .08), var(--shadow); }

@media (max-width: 1500px) {
  .app-shell { grid-template-columns: 232px minmax(0, 1fr) 245px; }
  .filter-panel { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
  .compact-head, .compact-row { grid-template-columns: 140px minmax(210px, 1fr) 150px 80px 140px; }
}

@media (max-width: 1180px) {
  .app-header { grid-template-columns: auto 1fr; }
  .header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .global-search { grid-column: 1 / -1; grid-row: 2; }
  .trace-warning { top: 130px; }
  .filter-bar { top: 165px; }
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .context-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .context-sticky { position: static; }
  .context-panel textarea { min-height: 100px; }
  .dashboard-grid, .two-column { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .app-header { position: static; grid-template-columns: 1fr; padding: 13px; }
  .header-actions, .global-search { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .header-actions > * { flex: 1; }
  .meeting-toggle, .export-menu > summary { justify-content: center; width: 100%; }
  .trace-warning, .filter-bar { position: static; }
  .filter-panel { margin: 10px 0 0; grid-template-columns: 1fr 1fr; }
  .filter-bar { display: block; }
  .app-shell { display: block; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .main-panel { padding: 20px 13px 50px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .facts-grid, .hero-facts, .pan-grid, .detail-grid, .control-columns, .explain-panel, .decision-grid, .confirm-grid { grid-template-columns: 1fr; }
  .observation-grid { grid-template-columns: 1fr; }
  .requirements-table { overflow-x: auto; }
  .requirements-head, .requirements-table > div:not(.requirements-head) { min-width: 780px; }
  .decision-grid label:nth-last-child(-n+2) { grid-column: auto; }
  .cornucopia-card > summary, .card-index summary { grid-template-columns: 28px 60px 1fr; }
  .cornucopia-card > summary .badge, .cornucopia-card > summary > b, .card-index summary .badge, .card-index summary > b { grid-column: 3; }
  .cornucopia-body, .card-index details > .chip-row { padding: 14px; }
  .compact-table { overflow-x: auto; }
  .compact-head, .compact-row { min-width: 840px; }
  .control-card > summary { grid-template-columns: 20px 115px 1fr 18px; }
}

@media print {
  .app-header, .trace-warning, .filter-bar, .sidebar, .context-panel, .meeting-hide, .tree-nav { display: none !important; }
  .app-shell { display: block; }
  .main-panel { padding: 0; }
  .surface, .component-hero { box-shadow: none; break-inside: avoid; }
  body { background: white; }
}