/* Owner-facing layout. Expert evidence tools retain the original styles below. */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-muted: #f9fafb;
  --ink: #152033;
  --ink-strong: #101828;
  --muted: #667085;
  --muted-2: #98a2b3;
  --line: #e5e8ee;
  --line-strong: #d7dce5;
  --primary: #5267e9;
  --primary-strong: #4054d5;
  --primary-soft: #eef0ff;
  --success: #087a55;
  --success-soft: #e9f8f1;
  --warning: #a65d08;
  --warning-soft: #fff4df;
  --danger: #c33a4b;
  --danger-soft: #fff0f2;
  --info: #2862ad;
  --info-soft: #eef5ff;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 12px 32px rgba(22, 30, 52, 0.11);
  --radius: 10px;
  --radius-sm: 7px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button,
select {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(82, 103, 233, 0.22);
  outline-offset: 2px;
}

.icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.18em;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.status-success {
  color: var(--success);
}

.status-warning {
  color: var(--warning);
}

.status-danger {
  color: var(--danger);
}

.status-info {
  color: var(--info);
}

.status-muted {
  color: var(--muted-2);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.pill-success {
  color: var(--success);
  background: var(--success-soft);
  border-color: #ccecdf;
}

.pill-warning {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: #f5dfb5;
}

.pill-danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: #f4ccd2;
}

.pill-info {
  color: var(--info);
  background: var(--info-soft);
  border-color: #d7e6fb;
}

.pill-muted {
  color: var(--muted);
  background: #f2f4f7;
  border-color: #e4e7ec;
}

.product-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-glyph {
  position: relative;
  display: grid;
  grid-template-columns: 8px 8px;
  align-items: end;
  gap: 3px;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 8px;
  background: var(--primary);
  box-shadow: 0 5px 14px rgba(82, 103, 233, 0.25);
}

.brand-glyph span {
  display: block;
  height: 11px;
  border-radius: 2px 2px 1px 1px;
  background: #fff;
}

.brand-glyph span:last-child {
  height: 17px;
  opacity: 0.72;
}

.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.2;
}

.brand-copy strong {
  font-size: 17px;
  letter-spacing: 0.05em;
}

.brand-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.product-mark.inverse .brand-glyph {
  background: #8090ff;
}

.product-mark.inverse .brand-copy strong {
  color: #fff;
}

.product-mark.inverse .brand-copy small {
  color: #9ea8c0;
}

.prototype-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5f6b7c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.015em;
}

.prototype-notice .icon {
  color: var(--success);
}

.text-button,
.quiet-button,
.primary-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  background: transparent;
}

.text-button {
  padding: 5px 2px;
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 700;
}

.text-button:hover {
  color: #253cbe;
}

.quiet-button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #475467;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 650;
}

.quiet-button:hover {
  border-color: #cbd2df;
  background: #fafbfc;
}

.primary-button {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 7px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 4px 10px rgba(82, 103, 233, 0.2);
  font-size: 12px;
  font-weight: 750;
}

.primary-button:hover {
  background: var(--primary-strong);
}

.icon-button {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #475467;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.icon-button.subtle {
  box-shadow: none;
}

.icon-button > i {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--danger);
}

.panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 12px;
}

.panel-header h3 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-size: 15px;
  font-weight: 740;
  letter-spacing: -0.01em;
}

.eyebrow {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend i {
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--primary);
}

.legend .legend-dash {
  height: 0;
  border-top: 2px dashed #9aa6bb;
  background: transparent;
}

/* Variant A — executive command center */

.app-shell {
  min-height: 100vh;
}

.sidebar-a {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  width: 224px;
  flex-direction: column;
  padding: 23px 16px 16px;
  color: #c8d0e3;
  background: #151c2d;
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.04);
}

.sidebar-a .product-mark {
  padding: 0 8px 26px;
}

.primary-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  color: #9ea8bd;
  background: transparent;
  text-align: left;
  transition: 0.15s ease;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
  color: #fff;
  background: rgba(122, 139, 255, 0.15);
  box-shadow: inset 2px 0 #8390ff;
}

.nav-item span {
  font-size: 13px;
  font-weight: 620;
}

.nav-item b {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #c7ceff;
  background: rgba(115, 132, 255, 0.18);
  font-size: 10px;
  text-align: center;
}

.sidebar-spacer {
  flex: 1;
}

.readonly-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 2px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.readonly-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  color: #7ce0ba;
  background: rgba(46, 180, 128, 0.12);
}

.readonly-card > div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.readonly-card strong {
  color: #d8dfed;
  font-size: 11px;
}

.readonly-card span {
  margin-top: 3px;
  color: #77829a;
  font-size: 9px;
}

.profile-chip {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #9ea8bd;
  background: transparent;
  text-align: left;
}

.profile-chip .avatar {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #3b4763;
  font-size: 11px;
  font-weight: 800;
}

.profile-chip > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.profile-chip strong {
  overflow: hidden;
  color: #dce1ec;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-chip small {
  margin-top: 2px;
  overflow: hidden;
  color: #77829a;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-a {
  min-height: 100vh;
  margin-left: 224px;
}

.topbar-a {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 91px;
  padding: 16px 28px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
}

.topbar-a h1 {
  margin: 7px 0 2px;
  color: var(--ink-strong);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.topbar-a p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.topbar-actions {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.global-filters {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.select-control {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.select-control > span {
  padding-left: 2px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
}

.select-control select {
  min-width: 120px;
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #344054;
  background: #fff;
  font-size: 11px;
  font-weight: 620;
}

.select-control:nth-child(2) select {
  min-width: 138px;
}

.content-a {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: 20px 28px 92px;
}

.context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.scenario-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scenario-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eceff3;
}

.scenario-option {
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: 5px;
  color: #697386;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.scenario-option:hover {
  color: var(--ink);
}

.scenario-option.active {
  color: var(--ink-strong);
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.11);
}

.scenario-control.compact {
  gap: 6px;
}

.scenario-control.compact .scenario-label {
  display: none;
}

.scenario-control.compact .scenario-option {
  padding-inline: 8px;
}

.freshness {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
}

.conclusion-hero {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.conclusion-hero.tone-success {
  border-left-color: var(--success);
}

.conclusion-hero.tone-warning {
  border-left-color: #d4882c;
}

.conclusion-hero.tone-danger {
  border-left-color: var(--danger);
}

.conclusion-hero.tone-info {
  border-left-color: var(--info);
}

.conclusion-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 19px 0;
  color: var(--muted-2);
  font-size: 10px;
}

.conclusion-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 14px 20px 18px;
}

.conclusion-body h2 {
  margin: 0 0 7px;
  color: var(--ink-strong);
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.conclusion-hero.large .conclusion-body h2 {
  font-size: 21px;
}

.conclusion-body p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.conclusion-number {
  display: flex;
  min-width: 164px;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 26px;
  border-left: 1px solid var(--line);
}

.conclusion-number span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.conclusion-number strong {
  margin: 5px 0 3px;
  color: var(--ink-strong);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

.tone-success .conclusion-number strong,
.tone-success.flow-conclusion strong {
  color: var(--success);
}

.tone-warning .conclusion-number strong,
.tone-warning.flow-conclusion strong {
  color: var(--warning);
}

.tone-danger .conclusion-number strong,
.tone-danger.flow-conclusion strong {
  color: var(--danger);
}

.tone-info .conclusion-number strong,
.tone-info.flow-conclusion strong {
  color: var(--info);
}

.conclusion-number small {
  color: var(--muted-2);
  font-size: 9px;
}

.conclusion-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 38px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  color: #5e6a7d;
  background: #fafbfc;
  font-size: 10px;
}

.conclusion-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.conclusion-footer > span .icon {
  color: #7b88a0;
}

.conclusion-footer button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  border: 0;
  color: var(--primary-strong);
  background: transparent;
  font-size: 10px;
  font-weight: 750;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.metric-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 103px;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.metric-card:hover {
  border-color: #cbd2df;
  box-shadow: 0 5px 14px rgba(16, 24, 40, 0.06);
  transform: translateY(-1px);
}

.metric-label {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.metric-label .icon {
  color: var(--muted-2);
}

.metric-value {
  margin: 7px 0 4px;
  color: var(--ink-strong);
  font-size: 22px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.metric-value.success {
  color: var(--success);
}

.metric-value.warning {
  color: var(--warning);
}

.metric-value.danger {
  color: var(--danger);
}

.metric-value.info {
  color: var(--info);
}

.metric-value.indigo {
  color: #4257d4;
}

.metric-meta {
  max-width: 92%;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.micro-spark {
  position: absolute;
  right: 13px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 27px;
  opacity: 0.46;
}

.micro-spark i {
  width: 3px;
  border-radius: 1px;
  background: #8694ad;
}

.micro-spark i:nth-child(1) { height: 9px; }
.micro-spark i:nth-child(2) { height: 15px; }
.micro-spark i:nth-child(3) { height: 12px; }
.micro-spark i:nth-child(4) { height: 22px; }
.micro-spark i:nth-child(5) { height: 18px; }
.micro-spark i:nth-child(6) { height: 27px; }
.micro-spark.success i { background: var(--success); }
.micro-spark.warning i { background: var(--warning); }
.micro-spark.indigo i { background: var(--primary); }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(320px, 0.82fr);
  gap: 12px;
}

.trend-panel {
  min-height: 310px;
}

.trend-wrap {
  height: 196px;
  margin: 0 20px;
}

.trend-wrap.small {
  height: 150px;
}

.trend-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trend-svg .grid-lines line {
  stroke: #eef0f4;
  stroke-width: 1;
}

.trend-svg .annotation line {
  stroke: #e7a84f;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.trend-svg .annotation circle {
  fill: #e7a84f;
  stroke: #fff;
  stroke-width: 2;
}

.axis-labels {
  display: flex;
  justify-content: space-between;
  padding: 3px 20px 0;
  color: var(--muted-2);
  font-size: 9px;
}

.annotation-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 28px;
  padding: 6px 20px 10px;
  color: #7c653e;
  font-size: 9px;
}

.annotation-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.annotation-legend i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e7a84f;
}

.trust-panel {
  min-height: 310px;
}

.gate-strip {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 19px 18px;
}

.gate-item {
  display: flex;
  min-width: 35px;
  flex: 0 1 54px;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
}

.gate-item > span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted-2);
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

.gate-item b {
  color: #475467;
  font-size: 9px;
}

.gate-item small {
  color: var(--muted-2);
  font-size: 8px;
  white-space: nowrap;
}

.gate-item.gate-pass > span {
  color: var(--success);
  border-color: #bfe5d6;
  background: var(--success-soft);
}

.gate-item.gate-warn > span {
  color: var(--warning);
  border-color: #eed7ac;
  background: var(--warning-soft);
}

.gate-item.gate-fail > span {
  color: var(--danger);
  border-color: #f1c4ca;
  background: var(--danger-soft);
}

.gate-item.gate-blocked {
  opacity: 0.42;
}

.gate-connector {
  height: 1px;
  min-width: 4px;
  flex: 1;
  margin: 0 -4px 26px;
  background: var(--line);
}

.trust-summary {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 14px;
  margin: 0 19px 18px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.trust-score {
  display: flex;
  height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #344054;
  background: #eef1f5;
}

.trust-score.tone-success { color: var(--success); background: var(--success-soft); }
.trust-score.tone-warning { color: var(--warning); background: var(--warning-soft); }
.trust-score.tone-danger { color: var(--danger); background: var(--danger-soft); }
.trust-score.tone-info { color: var(--info); background: var(--info-soft); }

.trust-score strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.trust-score span {
  margin-top: 1px;
  font-size: 8px;
  font-weight: 700;
}

.trust-summary > div:last-child strong {
  color: #344054;
  font-size: 11px;
}

.trust-summary p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.waterfall-panel,
.sources-panel {
  min-height: 268px;
}

.waterfall {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 188px;
  padding: 9px 15px 16px;
}

.waterfall-step {
  position: relative;
  display: flex;
  min-width: 50px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.waterfall-value {
  margin-bottom: 5px;
  color: #475467;
  font-size: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.waterfall-track {
  display: flex;
  height: 100px;
  align-items: flex-end;
}

.waterfall-track i {
  display: block;
  width: 24px;
  border-radius: 3px 3px 1px 1px;
  background: #8b99b3;
  transition: 0.2s ease;
}

.waterfall-step:hover .waterfall-track i {
  filter: brightness(0.9);
  transform: scaleX(1.07);
}

.waterfall-step.negative .waterfall-track i {
  background: #e39a9e;
}

.waterfall-step.positive .waterfall-track i {
  background: #63ba99;
}

.waterfall-step.result .waterfall-track i {
  background: var(--primary);
}

.waterfall-name {
  margin-top: 8px;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}

.waterfall-arrow {
  position: absolute;
  right: -7px;
  bottom: 48px;
  color: #c0c7d2;
  font-size: 10px;
}

.source-list {
  display: flex;
  flex-direction: column;
  padding: 1px 10px 12px;
}

.source-row {
  display: grid;
  grid-template-columns: 30px minmax(100px, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid #f0f2f5;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}

.source-row:last-child {
  border-bottom: 0;
}

.source-row:hover {
  background: #f8f9fb;
}

.source-monogram {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #5c6676;
  background: #f2f4f7;
  font-size: 9px;
  font-weight: 850;
}

.source-success { color: var(--success); border-color: #ccecdf; background: var(--success-soft); }
.source-warning { color: var(--warning); border-color: #f1ddb8; background: var(--warning-soft); }
.source-danger { color: var(--danger); border-color: #f1cbd1; background: var(--danger-soft); }
.source-info { color: var(--info); border-color: #d6e5fa; background: var(--info-soft); }
.source-muted { color: var(--muted); background: #f2f4f7; }

.source-main,
.source-scope {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.source-main strong,
.source-scope strong {
  overflow: hidden;
  color: #344054;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-main small,
.source-scope small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-scope {
  align-items: flex-end;
}

.source-row .status-pill {
  min-height: 22px;
  padding-inline: 7px;
  font-size: 8px;
}

.issue-panel {
  margin-top: 12px;
}

.panel-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.issue-table {
  min-width: 720px;
  padding: 0 12px 12px;
}

.issue-head,
.issue-line {
  display: grid;
  grid-template-columns: minmax(360px, 1.7fr) 100px 100px 80px 20px;
  align-items: center;
  gap: 13px;
}

.issue-head {
  min-height: 30px;
  padding: 0 10px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 700;
}

.issue-line {
  width: 100%;
  min-height: 53px;
  padding: 6px 10px;
  border: 0;
  border-top: 1px solid #eef0f3;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}

.issue-line:hover,
.issue-line.selected {
  background: #f8f9fc;
}

.issue-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.issue-title > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.issue-title strong {
  overflow: hidden;
  color: #263247;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-title small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.severity {
  width: 7px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: #a3adbd;
}

.severity-candidate { background: #dfa24a; }
.severity-explained { background: #4bb287; }
.severity-watch { background: #6d94c8; }
.severity-confirmed { background: #7768d5; }

.issue-amount,
.issue-store {
  color: #475467;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.issue-amount {
  font-weight: 750;
}

.case-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 780;
  white-space: nowrap;
}

.case-candidate { color: var(--warning); background: var(--warning-soft); }
.case-explained { color: var(--success); background: var(--success-soft); }
.case-watch { color: var(--info); background: var(--info-soft); }
.case-confirmed { color: #5c49bd; background: #f0edff; }

/* Variant B — evidence workbench */

.workbench {
  display: block;
  min-height: 100vh;
  background: #f7f8fa;
}

.case-list-rail {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  width: 304px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #fff;
}

.case-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 67px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.case-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin: 12px 14px 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted-2);
  background: #fafbfc;
}

.case-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 10px;
}

.case-search input::placeholder {
  color: #a4adbb;
}

.case-tabs {
  display: flex;
  gap: 14px;
  padding: 0 15px 9px;
  border-bottom: 1px solid var(--line);
}

.case-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 0 2px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}

.case-tabs button.active {
  color: var(--primary-strong);
}

.case-tabs button.active::after {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--primary);
}

.case-tabs b {
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  font-size: 8px;
}

.case-list {
  flex: 1;
  overflow: auto;
  padding: 8px;
}

.case-list-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin-bottom: 3px;
  padding: 11px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
}

.case-list-item:hover {
  background: #f8f9fb;
}

.case-list-item.active {
  border-color: #dbe0ff;
  background: #f3f4ff;
  box-shadow: inset 3px 0 var(--primary);
}

.case-item-top,
.case-item-meta,
.case-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.case-item-top small,
.case-item-foot small {
  color: var(--muted-2);
  font-size: 8px;
}

.case-list-item > strong {
  color: #263247;
  font-size: 11px;
  line-height: 1.5;
}

.case-item-meta {
  color: #475467;
  font-size: 9px;
  font-weight: 700;
}

.case-item-foot {
  padding-top: 6px;
  border-top: 1px solid rgba(215, 220, 229, 0.62);
}

.case-rail-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #fafbfc;
  font-size: 9px;
}

.case-main {
  min-width: 0;
  margin-left: 304px;
}

.workbench-topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 67px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.breadcrumb strong {
  color: #344054;
}

.workbench-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #475467;
  background: #fff;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.case-content {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 22px 24px 90px;
}

.case-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}

.case-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted-2);
  font-size: 9px;
}

.case-titlebar h1 {
  max-width: 900px;
  margin: 9px 0 4px;
  color: var(--ink-strong);
  font-size: 23px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.case-titlebar p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.case-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-impact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 0.55fr)) minmax(300px, 1.7fr);
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.case-impact-strip.tone-success { border-left-color: var(--success); }
.case-impact-strip.tone-warning { border-left-color: var(--warning); }
.case-impact-strip.tone-danger { border-left-color: var(--danger); }
.case-impact-strip.tone-info { border-left-color: var(--info); }

.case-impact-strip > div:not(.impact-message) {
  display: flex;
  min-height: 77px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 15px;
  border-right: 1px solid var(--line);
}

.case-impact-strip span,
.case-impact-strip small {
  color: var(--muted);
  font-size: 9px;
}

.case-impact-strip strong {
  margin-top: 5px;
  color: var(--ink-strong);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.impact-message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: #fafbfc;
}

.impact-message > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: var(--primary);
  background: var(--primary-soft);
}

.impact-message p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.impact-message p strong {
  display: block;
  margin: 0 0 3px;
  color: #344054;
  font-size: 10px;
}

.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 14px;
}

.case-primary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.case-chart-panel .trend-wrap {
  margin-top: 3px;
}

.evidence-timeline-panel {
  overflow: visible;
}

.timeline {
  padding: 0 20px 18px;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr 25px;
  gap: 9px;
  min-height: 66px;
  padding: 7px 0;
}

.timeline-item:not(:last-child)::after {
  position: absolute;
  top: 34px;
  bottom: -5px;
  left: 11px;
  width: 1px;
  content: "";
  background: var(--line);
}

.timeline-marker {
  z-index: 1;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: #fff;
  font-size: 10px;
  font-weight: 900;
}

.timeline-item.tone-success .timeline-marker { color: var(--success); border-color: #bfe4d5; background: var(--success-soft); }
.timeline-item.tone-warning .timeline-marker { color: var(--warning); border-color: #efd9b1; background: var(--warning-soft); }
.timeline-item.tone-info .timeline-marker { color: var(--info); border-color: #d5e4f8; background: var(--info-soft); }

.timeline-item > div {
  display: flex;
  flex-direction: column;
}

.timeline-item small {
  color: var(--muted-2);
  font-size: 8px;
}

.timeline-item strong {
  margin: 3px 0;
  color: #344054;
  font-size: 10px;
}

.timeline-item p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.timeline-item > button {
  align-self: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 5px;
  color: var(--muted-2);
  background: transparent;
}

.timeline-item > button:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.formula-version {
  padding: 4px 8px;
  border-radius: 5px;
  color: #5d6b7d;
  background: #f2f4f7;
  font-size: 8px;
  font-weight: 650;
}

.equation-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
}

.equation-row > span {
  display: flex;
  min-height: 65px;
  flex-direction: column;
  justify-content: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}

.equation-row small {
  color: var(--muted);
  font-size: 8px;
}

.equation-row strong {
  margin-top: 5px;
  color: #253146;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.equation-row > b {
  color: var(--muted-2);
  font-size: 15px;
}

.equation-row .equation-result {
  border-color: #ead5ae;
  background: var(--warning-soft);
}

.equation-row .equation-result strong {
  color: var(--warning);
}

.equation-note {
  margin: 0;
  padding: 0 20px 16px;
  color: var(--muted);
  font-size: 9px;
}

.case-context {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.context-card {
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.context-card > h3 {
  margin: 5px 0 0;
  color: #344054;
  font-size: 13px;
}

.context-card .gate-strip {
  padding: 15px 0 2px;
}

.context-card .gate-item small {
  display: none;
}

.context-card .gate-connector {
  margin-bottom: 14px;
}

.context-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.context-heading button {
  border: 0;
  color: var(--muted-2);
  background: transparent;
}

.context-definition {
  margin: 8px 0 0;
}

.context-definition div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #f0f2f5;
  font-size: 9px;
}

.context-definition dt {
  color: var(--muted);
}

.context-definition dd {
  margin: 0;
  color: #344054;
  font-weight: 650;
  text-align: right;
}

.compact-sources {
  margin: 8px -7px -6px;
}

.compact-sources .source-row {
  grid-template-columns: 28px 1fr auto;
}

.compact-sources .source-scope {
  display: none;
}

.compact-sources .source-main small {
  max-width: 120px;
}

.next-step-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--info);
  border-color: #d7e5f8;
  background: #f7faff;
}

.next-step-card > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #e7f0ff;
}

.next-step-card strong {
  color: #28558e;
  font-size: 10px;
}

.next-step-card p {
  margin: 4px 0;
  color: #5c6f8a;
  font-size: 9px;
  line-height: 1.5;
}

.next-step-card small {
  color: #8190a4;
  font-size: 8px;
}

/* Variant C — evidence flow */

.flow-app {
  min-height: 100vh;
  color: #e8edf8;
  background: #101521;
}

.flow-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 66px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 21, 33, 0.94);
  backdrop-filter: blur(14px);
}

.flow-header .product-mark {
  min-width: 170px;
}

.flow-nav {
  display: flex;
  align-self: stretch;
  gap: 22px;
}

.flow-nav button {
  position: relative;
  border: 0;
  color: #7e899f;
  background: transparent;
  font-size: 11px;
  font-weight: 650;
}

.flow-nav button:hover,
.flow-nav button.active {
  color: #edf1f8;
}

.flow-nav button.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: #8190ff;
}

.flow-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.flow-app .segmented {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.flow-app .scenario-option {
  color: #8c97aa;
}

.flow-app .scenario-option.active {
  color: #f4f6fb;
  background: #30394e;
  box-shadow: none;
}

.flow-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #b9c1d1;
  background: rgba(255, 255, 255, 0.04);
  font-size: 9px;
}

.flow-app .prototype-notice {
  color: #7e899e;
}

.flow-main {
  width: min(1640px, 100%);
  margin: 0 auto;
  padding: 31px 32px 104px;
}

.flow-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px;
}

.flow-kicker {
  color: #75829a;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.flow-intro h1 {
  margin: 9px 0 5px;
  color: #f5f7fb;
  font-size: 26px;
  font-weight: 720;
  letter-spacing: -0.035em;
}

.flow-intro p {
  margin: 0;
  color: #8995aa;
  font-size: 11px;
}

.flow-conclusion {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 3px 13px;
  min-width: 190px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #171e2d;
}

.flow-conclusion .status-pill {
  grid-row: span 2;
}

.flow-conclusion strong {
  color: #fff;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.flow-conclusion small {
  color: #748096;
  font-size: 8px;
  text-align: right;
}

.flow-canvas {
  position: relative;
  min-height: 322px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: #151b28;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.canvas-grid {
  position: absolute;
  inset: 0;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 30px 30px;
}

.flow-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 80px minmax(180px, 1fr) 80px minmax(180px, 1fr) 80px minmax(180px, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 270px;
  padding: 34px 30px 54px;
}

.flow-node {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 7px 11px;
  min-width: 0;
  min-height: 155px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  color: #cbd3e2;
  background: #1b2231;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  text-align: left;
  transition: 0.16s ease;
}

.flow-node:hover {
  border-color: rgba(127, 143, 255, 0.5);
  background: #20283a;
  transform: translateY(-2px);
}

.flow-node::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 9px 0 0 9px;
  content: "";
  background: #657187;
}

.flow-node.tone-success::before { background: #42b98d; }
.flow-node.tone-warning::before { background: #dfa24a; }
.flow-node.tone-danger::before { background: #e15b6d; }
.flow-node.tone-info::before { background: #5e93d5; }

.node-index {
  grid-column: 1 / -1;
  color: #566177;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
}

.node-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  color: #8290a9;
  background: #252e40;
}

.tone-success .node-icon { color: #65d6aa; background: rgba(48, 173, 125, 0.12); }
.tone-warning .node-icon { color: #edb564; background: rgba(223, 162, 74, 0.12); }
.tone-danger .node-icon { color: #f17a8a; background: rgba(225, 91, 109, 0.12); }

.node-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.node-copy small {
  overflow: hidden;
  color: #6f7a90;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-copy strong {
  margin: 4px 0 8px;
  color: #e7ebf4;
  font-size: 11px;
}

.node-copy b {
  color: #fff;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}

.node-copy span {
  margin-top: 3px;
  color: #77849a;
  font-size: 8px;
}

.node-status {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #8792a7;
  font-size: 8px;
  font-weight: 650;
}

.flow-edge {
  position: relative;
  display: flex;
  height: 75px;
  align-items: center;
  justify-content: center;
}

.flow-edge i {
  width: 100%;
  height: 1px;
  background: #465166;
}

.flow-edge b {
  position: absolute;
  right: -2px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #465166;
  border-radius: 50%;
  color: #758198;
  background: #151b28;
}

.flow-edge > span {
  position: absolute;
  top: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #707b91;
  background: #151b28;
  font-size: 7px;
  white-space: nowrap;
}

.flow-edge.edge-positive i { background: #3b8f72; }
.flow-edge.edge-positive b { color: #59c49c; border-color: #3b8f72; }
.flow-edge.edge-warning i { background: #a27538; }
.flow-edge.edge-warning b { color: #e4ab5c; border-color: #a27538; }
.flow-edge.edge-blocked i { background: #7d3c48; }
.flow-edge.edge-blocked b { color: #dc6475; border-color: #7d3c48; }

.flow-legend {
  position: absolute;
  right: 20px;
  bottom: 13px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  color: #6f7b91;
  font-size: 8px;
}

.flow-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.flow-bottom-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.35fr) minmax(320px, 0.9fr);
  gap: 12px;
  margin-top: 12px;
}

.panel-dark {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: #171e2c;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.dark-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 57px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.dark-panel-head span {
  color: #5e6b81;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.dark-panel-head h3 {
  margin: 4px 0 0;
  color: #e6eaf2;
  font-size: 12px;
}

.dark-panel-head button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  color: #8f9cff;
  background: transparent;
  font-size: 8px;
  font-weight: 700;
}

.dark-panel-head small {
  color: #7a879d;
  font-size: 8px;
}

.ledger-table {
  padding: 7px 13px 12px;
}

.ledger-table > div {
  display: grid;
  grid-template-columns: 1fr 1.25fr 100px 70px;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: #9aa5b8;
  font-size: 8px;
}

.ledger-table .ledger-head {
  min-height: 29px;
  color: #59667b;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}

.ledger-table strong {
  color: #dce1eb;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ledger-table b {
  justify-self: end;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 7px;
}

.ledger-ok,
.ledger-success { color: #64cea7; background: rgba(59, 171, 129, 0.1); }
.ledger-warning { color: #e6ad5e; background: rgba(218, 154, 67, 0.1); }
.ledger-danger { color: #e77382; background: rgba(222, 83, 102, 0.1); }
.ledger-info { color: #79a7df; background: rgba(79, 135, 203, 0.1); }

.ledger-table .ledger-focus {
  margin-top: 4px;
  border-bottom: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
}

.dark-gates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 13px 13px 8px;
}

.dark-gate {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 3px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  color: #6f7a8f;
  background: #1c2433;
}

.dark-gate > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}

.dark-gate b {
  color: #a7b0c1;
  font-size: 8px;
}

.dark-gate small {
  overflow: hidden;
  max-width: 100%;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark-gate.gate-pass > span { color: #60caa3; background: rgba(60, 171, 129, 0.12); }
.dark-gate.gate-warn > span { color: #e0a44e; background: rgba(218, 154, 67, 0.12); }
.dark-gate.gate-fail > span { color: #e26979; background: rgba(222, 83, 102, 0.12); }
.dark-gate.gate-blocked { opacity: 0.38; }

.dark-next {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 3px 13px 12px;
  padding: 9px;
  border: 1px solid rgba(110, 132, 255, 0.15);
  border-radius: 6px;
  color: #8997ff;
  background: rgba(93, 112, 231, 0.065);
}

.dark-next > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.dark-next small {
  color: #65718a;
  font-size: 7px;
}

.dark-next strong {
  margin-top: 2px;
  overflow: hidden;
  color: #aab4c8;
  font-size: 8px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-source-map {
  grid-column: 1 / -1;
}

.root-map {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 17px;
}

.root-group {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 2px 9px;
  min-height: 66px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  background: #1c2433;
}

.root-dot {
  grid-row: span 3;
  width: 10px;
  height: 10px;
  margin: 3px auto;
  border-radius: 50%;
  background: #758197;
  box-shadow: 0 0 0 4px rgba(117, 129, 151, 0.1);
}

.root-dot.platform { background: #8492ff; box-shadow: 0 0 0 4px rgba(132, 146, 255, 0.1); }
.root-dot.settlement { background: #52c398; box-shadow: 0 0 0 4px rgba(82, 195, 152, 0.1); }

.root-group strong {
  color: #dce2ec;
  font-size: 9px;
}

.root-group small {
  color: #78849a;
  font-size: 8px;
}

.root-group i {
  color: #657187;
  font-size: 7px;
  font-style: normal;
}

.root-group.pending {
  opacity: 0.52;
  border-style: dashed;
}

.root-join {
  color: #4f5b70;
  font-size: 16px;
}

/* Shared evidence drawer */

.drawer-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  background: rgba(13, 18, 29, 0.32);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.16s ease;
}

.evidence-drawer {
  position: fixed;
  z-index: 110;
  inset: 0 0 0 auto;
  display: flex;
  width: min(560px, 92vw);
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  box-shadow: -18px 0 55px rgba(16, 24, 40, 0.18);
  animation: slideIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(25px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}

.drawer-header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.drawer-header small {
  color: var(--muted-2);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
}

.drawer-title {
  padding: 20px 20px 15px;
}

.drawer-title h2 {
  margin: 7px 0 5px;
  color: var(--ink-strong);
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.drawer-title p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.drawer-tabs {
  display: flex;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}

.drawer-tabs button {
  position: relative;
  min-height: 39px;
  padding: 0 1px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}

.drawer-tabs button.active {
  color: var(--primary-strong);
}

.drawer-tabs button.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--primary);
}

.drawer-scroll {
  flex: 1;
  overflow: auto;
  background: #fafbfc;
}

.drawer-section,
.raw-evidence {
  padding: 17px 20px 30px;
}

.evidence-summary {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.evidence-summary > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: var(--primary);
  background: var(--primary-soft);
}

.evidence-summary.tone-success > span { color: var(--success); background: var(--success-soft); }
.evidence-summary.tone-warning > span { color: var(--warning); background: var(--warning-soft); }
.evidence-summary.tone-danger > span { color: var(--danger); background: var(--danger-soft); }
.evidence-summary.tone-info > span { color: var(--info); background: var(--info-soft); }

.evidence-summary strong {
  color: #263247;
  font-size: 11px;
}

.evidence-summary p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.evidence-graph {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 5px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.evidence-graph > button {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}

.evidence-graph > button:hover {
  border-color: var(--line);
  background: #fafbfc;
}

.evidence-graph > button > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.evidence-graph > button strong {
  color: #344054;
  font-size: 9px;
}

.evidence-graph > button small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-graph > button > b {
  grid-column: 1 / -1;
  margin-top: 3px;
  color: #475467;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.evidence-graph > i {
  color: #b0b8c5;
}

.assertion-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.assertion-list h4,
.variable-group h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  color: #344054;
  font-size: 10px;
}

.assertion-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 7px 12px;
  border-bottom: 1px solid #eff1f4;
}

.assertion-row:last-child {
  border-bottom: 0;
}

.assertion-row > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: var(--success);
  background: var(--success-soft);
  font-size: 9px;
  font-weight: 900;
}

.assertion-row.warn > span {
  color: var(--warning);
  background: var(--warning-soft);
}

.assertion-row p {
  margin: 0;
  color: #475467;
  font-size: 9px;
}

.assertion-row b {
  color: var(--success);
  font-size: 8px;
}

.assertion-row.warn b {
  color: var(--warning);
}

.raw-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 43px;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #344054;
  background: #fff;
  font-size: 9px;
  font-weight: 650;
  text-align: left;
}

.raw-link:hover {
  border-color: #cbd2df;
}

.raw-link > span:last-child {
  margin-left: auto;
  color: var(--muted-2);
}

.variable-group {
  overflow: hidden;
  margin-bottom: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.variable-group h4 span {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: #f2f4f7;
  font-size: 8px;
}

.variable-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 6px 12px;
  border-bottom: 1px solid #f0f2f5;
  color: #475467;
  font-size: 9px;
}

.variable-row:last-child {
  border-bottom: 0;
}

.variable-row.confirmed .icon {
  color: var(--success);
}

.variable-row.missing .icon {
  color: var(--warning);
}

.variable-row b {
  color: var(--muted-2);
  font-size: 8px;
}

.empty-state {
  padding: 22px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.calculation-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  margin-bottom: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.calculation-card > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
}

.calculation-card > div {
  display: flex;
  flex-direction: column;
}

.calculation-card small {
  color: var(--muted-2);
  font-size: 8px;
}

.calculation-card strong {
  margin: 5px 0;
  color: #475467;
  font-size: 9px;
  font-weight: 600;
}

.calculation-card b {
  color: #28354a;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.calculation-card.result {
  border-color: #ebd8b5;
  background: #fffaf1;
}

.calculation-card.result > span {
  color: var(--warning);
  background: var(--warning-soft);
}

.calculation-card.result b {
  color: var(--warning);
}

.formula-meta {
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.formula-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  padding: 7px 12px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 8px;
}

.formula-meta div:last-child {
  border-bottom: 0;
}

.formula-meta span {
  color: var(--muted);
}

.formula-meta b {
  color: #475467;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 600;
}

.raw-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}

.raw-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.raw-head strong {
  color: #344054;
  font-size: 11px;
}

.raw-head small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted-2);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.raw-evidence pre {
  overflow: auto;
  padding: 14px;
  border: 1px solid #253146;
  border-radius: 8px;
  color: #b9c6d9;
  background: #182131;
  font: 9px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.raw-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #d6e3f5;
  border-radius: 7px;
  color: #58708e;
  background: #f3f8ff;
  font-size: 8px;
  line-height: 1.5;
}

.raw-evidence [data-close-raw] .icon {
  transform: rotate(180deg);
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 64px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.drawer-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
}

/* Prototype-only switcher */

.prototype-switcher {
  position: fixed;
  z-index: 90;
  right: 50%;
  bottom: 15px;
  display: grid;
  grid-template-columns: 38px minmax(150px, 1fr) 38px;
  align-items: center;
  width: 285px;
  min-height: 49px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #edf1f8;
  background: rgba(21, 28, 45, 0.96);
  box-shadow: 0 14px 34px rgba(10, 15, 27, 0.28);
  transform: translateX(50%);
  backdrop-filter: blur(12px);
}

.drawer-overlay ~ .prototype-switcher {
  opacity: 0;
  pointer-events: none;
}

.prototype-switcher > button {
  align-self: stretch;
  border: 0;
  color: #aeb7c8;
  background: transparent;
  font-size: 15px;
}

.prototype-switcher > button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.prototype-switcher > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 0 7px;
  text-align: center;
}

.prototype-switcher small {
  color: #707b91;
  font-size: 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prototype-switcher strong {
  margin-top: 2px;
  overflow: hidden;
  max-width: 100%;
  color: #f0f3f9;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast {
  position: fixed;
  z-index: 250;
  top: 18px;
  left: 50%;
  max-width: min(420px, 86vw);
  padding: 9px 13px;
  border: 1px solid #343e53;
  border-radius: 7px;
  color: #f3f5fa;
  background: #202839;
  box-shadow: var(--shadow-md);
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: 0.18s ease;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Demo-complete pages and contextual panels */

.demo-subpage {
  min-height: calc(100vh - 88px);
}

.demo-page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.demo-page-intro h2 {
  margin: 5px 0 4px;
  color: var(--ink-strong);
  font-size: 23px;
  letter-spacing: -0.025em;
}

.demo-page-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.demo-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.demo-stat-grid > button {
  display: flex;
  min-height: 94px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.demo-stat-grid > button:hover,
.connector-card:hover,
.governance-card:hover {
  border-color: #cbd2f7;
  box-shadow: 0 7px 22px rgba(33, 45, 80, 0.08);
  transform: translateY(-1px);
}

.demo-stat-grid span,
.demo-stat-grid small {
  color: var(--muted);
  font-size: 9px;
}

.demo-stat-grid strong {
  margin: 6px 0 4px;
  color: var(--ink-strong);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.store-comparison-panel {
  overflow: hidden;
}

.demo-table {
  min-width: 880px;
}

.demo-table-head,
.demo-table-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) .65fr .9fr .9fr .65fr .65fr .7fr 24px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
}

.demo-table-head {
  min-height: 38px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted-2);
  background: #fafbfc;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.demo-table-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  text-align: left;
  transition: .15s ease;
}

.demo-table-row:hover {
  background: #f8f9ff;
}

.demo-table-row > strong,
.demo-table-row > span {
  color: #344054;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.store-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.store-identity b {
  color: var(--ink-strong);
  font-size: 11px;
}

.store-identity small {
  color: var(--muted-2);
  font-size: 8px;
}

.source-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.source-summary-strip > div {
  display: flex;
  min-height: 70px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 18px;
  border-right: 1px solid var(--line);
}

.source-summary-strip > div:last-child {
  border-right: 0;
}

.source-summary-strip span {
  color: var(--muted);
  font-size: 9px;
}

.source-summary-strip strong {
  margin-top: 5px;
  color: var(--ink-strong);
  font-size: 18px;
}

.connector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.connector-card {
  display: flex;
  min-height: 248px;
  flex-direction: column;
  align-items: stretch;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: left;
  transition: .15s ease;
}

.connector-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

.connector-card > strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.connector-card > small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.connector-card dl {
  display: grid;
  gap: 7px;
  margin: 15px 0;
}

.connector-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid #edf0f4;
}

.connector-card dt,
.connector-card dd {
  margin: 0;
  font-size: 8px;
}

.connector-card dt { color: var(--muted-2); }
.connector-card dd { color: #344054; font-weight: 700; text-align: right; }

.connector-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  color: var(--primary-strong);
  font-size: 9px;
  font-weight: 700;
}

.governance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.governance-card {
  position: relative;
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: 3px solid #98a2b3;
  border-radius: 9px;
  background: #fff;
  text-align: left;
  transition: .15s ease;
}

.governance-card.gate-pass { border-top-color: var(--success); }
.governance-card.gate-warn { border-top-color: var(--warning); }
.governance-card.gate-fail { border-top-color: var(--danger); }
.governance-card.gate-blocked { border-top-color: #7b8494; opacity: .78; }

.gate-code {
  color: var(--primary-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.gate-result {
  position: absolute;
  top: 15px;
  right: 16px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: #f2f4f7;
  font-size: 8px;
  font-weight: 700;
}

.governance-card h3 {
  margin: 13px 0 6px;
  color: var(--ink-strong);
  font-size: 15px;
}

.governance-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}

.governance-card > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 15px 0;
  padding: 10px;
  border-radius: 7px;
  background: #f8f9fb;
}

.governance-card > div small { color: var(--muted-2); font-size: 8px; }
.governance-card > div strong { color: #475467; font-size: 9px; line-height: 1.5; }

.demo-empty-row {
  display: grid;
  min-height: 84px;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
}

.case-empty {
  display: flex;
  min-height: 210px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.case-empty strong { color: #344054; font-size: 12px; }
.case-empty span { margin-top: 5px; font-size: 9px; }
.case-empty button { margin-top: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--primary-strong); font-size: 9px; }

.waterfall-step.unavailable {
  opacity: .6;
}

.waterfall-step.unavailable .waterfall-track i {
  border: 1px dashed #98a2b3;
  background: transparent;
}

.case-mode-chip.dark {
  border-color: #2d374a;
  color: #c9d1df;
  background: #171f30;
}

.ledger-table > button {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr .8fr .8fr;
  align-items: center;
  width: 100%;
  min-height: 45px;
  padding: 0 15px;
  border: 0;
  border-top: 1px solid #293245;
  color: #aeb8c9;
  background: transparent;
  text-align: left;
}

.ledger-table > button:hover {
  background: rgba(255,255,255,.035);
}

.ledger-table > button strong { color: #f2f4f8; font-size: 9px; }
.ledger-table > button > b { justify-self: start; }

.root-map button.root-group {
  border: 1px solid #2d374a;
  color: inherit;
  background: #171f30;
  text-align: left;
}

.demo-panel-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  background: rgba(13, 18, 29, .34);
  backdrop-filter: blur(2px);
  animation: fadeIn .16s ease;
}

.demo-side-panel {
  position: fixed;
  z-index: 130;
  inset: 0 0 0 auto;
  display: flex;
  width: min(590px, 94vw);
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  box-shadow: -18px 0 55px rgba(16,24,40,.18);
  animation: slideIn .2s ease;
}

.demo-side-panel > header,
.demo-side-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}

.demo-side-panel > header > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.demo-side-panel > footer {
  min-height: 54px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.demo-side-panel > footer > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
}

.demo-panel-scroll {
  flex: 1;
  overflow: auto;
  padding: 24px 20px 36px;
}

.demo-panel-heading {
  margin-bottom: 20px;
}

.demo-panel-heading h2 {
  margin: 6px 0 5px;
  color: var(--ink-strong);
  font-size: 22px;
  letter-spacing: -.025em;
}

.demo-panel-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.notification-list,
.choice-list,
.event-detail-list,
.test-library {
  display: grid;
  gap: 8px;
}

.notification-list > button,
.choice-list > button,
.event-detail-list > button,
.test-library > button {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.notification-list > button:hover,
.choice-list > button:hover,
.event-detail-list > button:hover,
.test-library > button:hover,
.choice-list > button.active {
  border-color: #cad1fa;
  background: #f8f9ff;
}

.notification-list span:nth-child(2),
.choice-list span:nth-child(2),
.test-library span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notification-list strong,
.choice-list strong,
.event-detail-list strong,
.test-library strong {
  color: #344054;
  font-size: 10px;
}

.notification-list small,
.choice-list small,
.event-detail-list small,
.test-library small,
.notification-list time {
  color: var(--muted-2);
  font-size: 8px;
}

.choice-list.compact > button {
  min-height: 54px;
}

.filter-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #98a2b3;
}

.swatch-candidate { background: var(--warning); }
.swatch-watch { background: var(--info); }
.swatch-explained { background: var(--success); }
.swatch-confirmed { background: #6654c0; }

.panel-primary {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}

.panel-big-number,
.source-health-hero {
  display: flex;
  min-height: 126px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8f9fb;
}

.panel-big-number strong,
.source-health-hero > strong {
  color: var(--ink-strong);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.panel-big-number span,
.source-health-hero small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
}

.source-health-hero .status-pill {
  margin-bottom: 12px;
}

.detail-definition {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.detail-definition > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  min-height: 50px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f4;
}

.detail-definition > div:last-child { border-bottom: 0; }
.detail-definition span { color: var(--muted); font-size: 9px; }
.detail-definition strong { color: #344054; font-size: 9px; line-height: 1.55; }

.gate-panel-result {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid #98a2b3;
  border-radius: 8px;
  background: #fafbfc;
}

.gate-panel-result.gate-pass { border-left-color: var(--success); }
.gate-panel-result.gate-warn { border-left-color: var(--warning); }
.gate-panel-result.gate-fail { border-left-color: var(--danger); }
.gate-panel-result > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); }
.gate-panel-result div { display: flex; flex-direction: column; gap: 3px; }
.gate-panel-result small { color: var(--muted); font-size: 8px; }
.gate-panel-result strong { color: var(--ink-strong); font-size: 13px; }

.panel-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.panel-metric-grid > div {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}

.panel-metric-grid span { color: var(--muted); font-size: 8px; }
.panel-metric-grid strong { margin-top: 5px; color: var(--ink-strong); font-size: 16px; }

.formula-stack {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1.2fr auto 1.2fr;
  align-items: stretch;
  gap: 7px;
}

.formula-stack > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 12px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fafbfc;
}

.formula-stack > b { align-self: center; color: var(--muted); }
.formula-stack span { color: var(--ink-strong); font-size: 10px; font-weight: 800; }
.formula-stack small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.formula-stack .result { border-color: #cbd2fa; background: var(--primary-soft); }

.formula-blocked {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: #fffaf2;
}

.formula-blocked strong { color: #9a3412; font-size: 11px; }
.formula-blocked span { color: #9a5a2a; font-size: 9px; line-height: 1.55; }

.panel-ledger-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.panel-ledger-list > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.panel-ledger-list > button:hover {
  transform: translateY(-1px);
  border-color: #b8c1f4;
  background: #fafbff;
}

.panel-ledger-list > button > span { display: grid; gap: 3px; min-width: 0; }
.panel-ledger-list strong { color: var(--ink-strong); font-size: 10px; }
.panel-ledger-list small { color: var(--muted); font-size: 8px; }
.panel-ledger-list b { color: var(--ink-strong); font-size: 10px; white-space: nowrap; }
.panel-ledger-list em { color: var(--primary); font-size: 8px; font-style: normal; white-space: nowrap; }

.lineage-stack {
  display: grid;
  gap: 9px;
}

.lineage-stack > button {
  display: flex;
  min-height: 72px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.lineage-stack > button:hover { background: #f8f9ff; }
.lineage-stack strong { color: var(--ink-strong); font-size: 11px; }
.lineage-stack small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.lineage-stack > span,
.lineage-stack > b { justify-self: center; color: var(--muted-2); font-size: 9px; text-align: center; }

.test-library > button > b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  color: var(--primary-strong);
  background: var(--primary-soft);
  font-size: 10px;
}

.event-detail-list > button {
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: start;
}

.event-detail-list > button > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.event-detail-list p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.event-detail-list > button > b {
  color: var(--muted-2);
  font-size: 7px;
}

.demo-panel-overlay ~ .prototype-switcher {
  opacity: 0;
  pointer-events: none;
}

/* Responsive */

@media (max-width: 1280px) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
  }

  .flow-track {
    grid-template-columns: minmax(160px, 1fr) 55px minmax(160px, 1fr) 55px minmax(160px, 1fr) 55px minmax(160px, 1fr);
    padding-inline: 18px;
  }

  .case-impact-strip {
    grid-template-columns: repeat(4, minmax(90px, 0.55fr));
  }

  .impact-message {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 1080px) {
  .sidebar-a {
    width: 76px;
    padding-inline: 10px;
  }

  .sidebar-a .brand-copy,
  .nav-item span,
  .nav-item b,
  .readonly-card > div:last-child,
  .profile-chip > span:nth-child(2),
  .profile-chip .icon {
    display: none;
  }

  .sidebar-a .product-mark {
    justify-content: center;
    padding-inline: 0;
  }

  .nav-item {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
  }

  .readonly-card,
  .profile-chip {
    display: flex;
    justify-content: center;
    padding-inline: 0;
  }

  .main-a {
    margin-left: 76px;
  }

  .topbar-a {
    align-items: center;
  }

  .topbar-a p,
  .topbar-a .prototype-notice,
  .topbar-a .select-control > span,
  .select-control:nth-child(2) {
    display: none;
  }

  .dashboard-grid,
  .case-grid,
  .flow-bottom-grid {
    grid-template-columns: 1fr;
  }

  .flow-source-map {
    grid-column: auto;
  }

  .flow-header .prototype-notice,
  .flow-header .brand-copy,
  .flow-scope {
    display: none;
  }

  .flow-header .product-mark {
    min-width: auto;
  }

  .flow-track {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 22px 24px 46px;
  }

  .flow-node {
    min-height: 116px;
  }

  .flow-edge {
    width: 60px;
    height: 42px;
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .flow-edge > span {
    display: none;
  }
}

@media (max-width: 780px) {
  .sidebar-a {
    position: static;
    width: 100%;
    height: 60px;
    flex-direction: row;
    align-items: center;
    padding: 9px 12px;
  }

  .sidebar-a .product-mark {
    padding: 0;
  }

  .sidebar-a .primary-nav {
    display: none;
  }

  .sidebar-spacer {
    display: block;
  }

  .readonly-card {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .profile-chip {
    display: none;
  }

  .main-a {
    margin-left: 0;
  }

  .topbar-a {
    position: static;
    min-height: auto;
    padding: 14px 16px;
  }

  .topbar-a h1 {
    font-size: 19px;
  }

  .global-filters,
  .topbar-actions .icon-button {
    display: none;
  }

  .content-a,
  .case-content,
  .flow-main {
    padding: 14px 12px 92px;
  }

  .context-row,
  .case-titlebar,
  .flow-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .scenario-control {
    display: block;
  }

  .scenario-label {
    display: block;
    margin-bottom: 6px;
  }

  .segmented {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }

  .freshness {
    display: none;
  }

  .conclusion-body {
    grid-template-columns: 1fr;
  }

  .conclusion-number {
    align-items: flex-start;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .conclusion-footer {
    flex-wrap: wrap;
  }

  .conclusion-footer button {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .waterfall {
    overflow-x: auto;
  }

  .waterfall-step {
    min-width: 64px;
  }

  .issue-panel {
    overflow-x: auto;
  }

  .case-list-rail {
    position: static;
    width: 100%;
    max-height: 260px;
  }

  .case-list {
    display: flex;
    overflow-x: auto;
  }

  .case-list-item {
    min-width: 245px;
  }

  .case-rail-foot {
    display: none;
  }

  .workbench {
    display: block;
  }

  .case-main {
    margin-left: 0;
  }

  .workbench-topbar {
    position: static;
    flex-wrap: wrap;
  }

  .workbench-actions .prototype-notice,
  .workbench-actions .quiet-button {
    display: none;
  }

  .case-titlebar h1 {
    font-size: 19px;
  }

  .case-title-actions {
    width: 100%;
  }

  .case-impact-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-impact-strip > div:nth-child(2) {
    border-right: 0;
  }

  .equation-row {
    grid-template-columns: 1fr;
  }

  .equation-row > b {
    text-align: center;
  }

  .flow-header {
    gap: 10px;
    padding: 0 12px;
  }

  .flow-nav {
    display: none;
  }

  .flow-header-right {
    min-width: 0;
    flex: 1;
  }

  .flow-app .scenario-control.compact {
    min-width: 0;
    flex: 1;
  }

  .flow-app .segmented {
    display: flex;
    overflow-x: auto;
  }

  .flow-intro h1 {
    font-size: 21px;
  }

  .flow-conclusion {
    align-self: flex-start;
  }

  .root-map {
    grid-template-columns: 1fr;
  }

  .root-join {
    text-align: center;
  }

  .ledger-table {
    overflow-x: auto;
  }

  .ledger-table > div {
    min-width: 560px;
  }

  .dark-gates {
    grid-template-columns: repeat(4, 1fr);
  }

  .evidence-graph {
    grid-template-columns: 1fr;
  }

  .evidence-graph > i {
    justify-self: center;
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .prototype-switcher {
    bottom: 10px;
    width: 255px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 91px;
  }

  .conclusion-footer > span {
    width: calc(50% - 9px);
  }

  .case-impact-strip {
    grid-template-columns: 1fr;
  }

  .case-impact-strip > div:not(.impact-message) {
    min-height: 60px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .case-title-actions .quiet-button {
    display: none;
  }

  .evidence-drawer {
    width: 100vw;
  }
}

@media (max-width: 1080px) {
  .connector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .demo-page-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .connector-grid,
  .governance-grid {
    grid-template-columns: 1fr;
  }

  .source-summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .source-summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .source-summary-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .store-comparison-panel {
    overflow-x: auto;
  }

  .ledger-table > button {
    min-width: 560px;
  }

  .formula-stack {
    grid-template-columns: 1fr;
  }

  .formula-stack > b {
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .demo-stat-grid,
  .panel-metric-grid {
    grid-template-columns: 1fr;
  }

  .demo-side-panel {
    width: 100vw;
  }

  .demo-panel-scroll {
    padding: 20px 14px 30px;
  }

  .detail-definition > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

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

/* Owner edition: a single reading path, deliberately separate from expert chrome. */
.owner-mode { background: #f7f8fa; color: #253045; font-size: 14px; }
.owner-shell { min-height: 100vh; }
.owner-sidebar { position: fixed; inset: 0 auto 0 0; width: 216px; display: flex; flex-direction: column; padding: 30px 18px 20px; background: #fff; border-right: 1px solid #e9edf2; z-index: 20; }
.owner-brand { display: flex; align-items: center; gap: 12px; padding: 0 12px 34px; border: 0; background: transparent; text-align: left; }
.owner-brand .brand-glyph { width: 38px; height: 38px; border-radius: 11px; background: #5267e9; box-shadow: none; }
.owner-brand > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.owner-brand strong { color: #1c2740; font-size: 23px; letter-spacing: 1px; }
.owner-brand small { color: #8690a1; font-size: 11px; letter-spacing: .5px; }
.owner-nav-label { padding: 0 14px 12px; color: #9aa2b0; font-size: 11px; }
.owner-nav { display: flex; flex-direction: column; gap: 5px; }
.owner-nav button, .owner-sidebar-bottom > button { display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: #697486; text-align: left; font-size: 14px; }
.owner-nav button:hover, .owner-sidebar-bottom > button:hover { background: #f6f7fb; color: #344464; }
.owner-nav button.active, .owner-sidebar-bottom > button.active { background: #eff2ff; color: #4c60d5; font-weight: 600; }
.owner-sidebar-bottom { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding-top: 35px; }
.owner-sidebar-bottom > button { min-height: 40px; font-size: 12px; }
.owner-readonly { display: flex; align-items: center; gap: 7px; margin: 18px 12px 0; padding-top: 18px; border-top: 1px solid #edf0f4; color: #9199a6; font-size: 10px; white-space: nowrap; }
.owner-main { min-width: 0; margin-left: 216px; }
.owner-demo-strip { display: flex; justify-content: space-between; align-items: center; min-height: 33px; padding: 0 38px; border-bottom: 1px solid #edf0f4; background: #fff; color: #7f8998; font-size: 10px; letter-spacing: .15px; }
.owner-demo-strip > span:first-child { display: flex; align-items: center; gap: 7px; }
.owner-demo-strip i { width: 5px; height: 5px; border-radius: 50%; background: #8293d9; }
.owner-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1280px; margin: 0 auto; padding: 31px 38px 22px; }
.owner-header h1 { margin: 0 0 9px; color: #1c2740; font-size: 27px; font-weight: 650; letter-spacing: -.7px; line-height: 1.3; }
.owner-header p { margin: 0; color: #87909f; font-size: 12px; line-height: 1.8; }
.owner-updated { color: #959eaa; font-size: 11px; white-space: nowrap; }
.owner-filter-bar { max-width: 1280px; margin: 0 auto; padding: 0 38px 24px; }
.owner-filter-bar .global-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.owner-filter-bar .select-control { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0 10px; height: 36px; border: 1px solid #e3e7ef; border-radius: 6px; background: #fff; }
.owner-filter-bar .select-control > span { color: #9aa1ad; font-size: 10px; }
.owner-filter-bar .select-control select { width: auto; min-width: 0; height: 32px; padding: 0 21px 0 0; border: 0; background-color: transparent; box-shadow: none; color: #5b677a; font-size: 11px; }
.owner-content { max-width: 1280px; margin: 0 auto; padding: 0 38px 36px; }
.owner-content h2, .owner-content h3, .owner-content p { margin-top: 0; }
.owner-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 23px; }
.owner-kpi { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 137px; padding: 22px 24px; border: 1px solid #e5e9f0; border-radius: 10px; background: #fff; text-align: left; transition: border-color .15s; }
.owner-kpi:hover { border-color: #bdc6ed; }
.owner-kpi > span { display: flex; justify-content: space-between; align-items: center; color: #788396; font-size: 12px; }
.owner-kpi > span svg { color: #b8bfca; }
.owner-kpi > strong { color: #22304a; font-size: 29px; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.owner-kpi > small { color: #9aa2af; font-size: 10px; }
.owner-priority { overflow: hidden; margin-bottom: 24px; border: 1px solid #e3e7f0; border-radius: 11px; background: #fff; box-shadow: 0 3px 12px #25304503; }
.owner-priority > .owner-section-heading { padding: 22px 26px 0; }
.owner-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.owner-eyebrow { color: #939ba9; font-size: 11px; font-weight: 500; letter-spacing: 1px; }
.owner-tag { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 5px; background: #fff7e9; color: #ac7b26; font-size: 10px; font-weight: 500; white-space: nowrap; }
.owner-tag i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.owner-tag.success { background: #eef8f3; color: #47846b; }
.owner-tag.info { background: #eef3fc; color: #607dae; }
.owner-priority-body { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 2px 26px 25px; }
.owner-priority-body > div:first-child { max-width: 630px; }
.owner-priority h2 { margin: 0 0 13px; color: #25334e; font-size: 24px; font-weight: 620; line-height: 1.5; letter-spacing: -.5px; }
.owner-priority-body p { margin: 0; color: #7d8796; font-size: 12px; line-height: 1.9; }
.owner-priority-value { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-end; gap: 10px; padding-left: 26px; border-left: 1px solid #edf0f4; }
.owner-priority-value strong { color: #a77926; font-size: 33px; font-weight: 600; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.owner-priority-value span { color: #a7a1a0; font-size: 10px; }
.owner-priority-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 17px 26px; border-top: 1px solid #f0f1f6; background: #fcfcfe; }
.owner-priority-footer > span { display: flex; align-items: center; gap: 8px; color: #8590a3; font-size: 11px; line-height: 1.8; }
.owner-primary, .owner-secondary { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; gap: 12px; min-height: 38px; padding: 9px 16px; border: 1px solid #5267df; border-radius: 6px; background: #5267df; color: #fff; font-size: 12px; font-weight: 500; }
.owner-primary:hover { background: #4358ce; }
.owner-secondary { border-color: #dce1eb; background: #fff; color: #5b6b86; }
.owner-secondary:hover { background: #f7f9ff; border-color: #bdc6ed; }
.owner-text-button { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 3px 0; border: 0; background: transparent; color: #667cba; font-size: 11px; white-space: nowrap; }
.owner-text-button:hover { color: #3e57a0; }
.owner-section { margin-bottom: 22px; padding: 25px 26px; border: 1px solid #e5e9f0; border-radius: 10px; background: #fff; }
.owner-section-heading h2 { margin: 0 0 7px; color: #344058; font-size: 16px; font-weight: 600; }
.owner-section-heading h3 { margin: 0; font-size: 15px; font-weight: 600; }
.owner-section-heading p { margin: 0; color: #9aa2af; font-size: 11px; line-height: 1.8; }
.owner-evidence-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.owner-evidence-step { display: flex; align-items: center; gap: 12px; padding: 12px 0; border: 0; background: #fff; text-align: left; }
.owner-step-number { display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; width: 33px; height: 33px; border: 1px solid #e5e9ef; border-radius: 50%; background: #f9fafc; color: #8c97a9; font-size: 12px; }
.owner-step-number.success { background: #f2f9f5; border-color: #e0eee6; color: #6a9e85; }
.owner-step-number.warning, .owner-step-number.danger { background: #fff9ed; border-color: #f1e8d2; color: #ae8b41; }
.owner-evidence-step > span:nth-child(2) { display: flex; flex-direction: column; gap: 7px; }
.owner-evidence-step strong { color: #4a566c; font-size: 12px; font-weight: 500; }
.owner-evidence-step small { color: #9ca5b3; font-size: 10px; }
.owner-evidence-step > svg { margin-left: auto; color: #b8bfca; }
.owner-evidence-step:hover strong { color: #5267df; }
.owner-bottom-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.owner-bottom-links > button { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 62px; padding: 17px 22px; border: 1px solid #e5e9f0; border-radius: 8px; background: #fff; }
.owner-bottom-links > button > span { display: flex; align-items: center; gap: 11px; color: #738096; font-size: 12px; }
.owner-bottom-links b { display: flex; align-items: center; gap: 6px; color: #99a2b1; font-size: 11px; font-weight: 400; }
.owner-boundary { margin: 22px 0 0; color: #9aa3b1; font-size: 10px; line-height: 1.9; }
.owner-tabs { display: inline-flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid #e8ecf3; border-radius: 7px; background: #f8f9fc; }
.owner-tabs > button { padding: 10px 14px; border: 0; border-radius: 5px; background: transparent; color: #8c96a8; font-size: 12px; }
.owner-tabs > button.active { background: #fff; box-shadow: 0 1px 4px #27334d0a; color: #4d64b9; }
.owner-tabs b { padding-left: 5px; font-size: 11px; font-weight: 400; }
.owner-list-tools { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.owner-search { width: 220px; min-height: 36px; padding: 9px 12px; border: 1px solid #e3e7f0; border-radius: 6px; background: #fff; color: #667188; font-size: 12px; }
.owner-search::placeholder { color: #adb4c0; }
.owner-issue-row { display: flex; align-items: center; gap: 18px; width: 100%; padding: 24px 0; border: 0; border-top: 1px solid #edf0f5; background: #fff; text-align: left; }
.owner-issue-row:hover .owner-issue-copy strong { color: #536ac3; }
.owner-issue-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 9px; background: #f6f7fc; color: #8798bf; }
.owner-issue-icon.warning { background: #fff9ef; color: #bba068; }
.owner-issue-copy { display: flex; flex: 1; flex-direction: column; gap: 9px; min-width: 0; }
.owner-issue-copy strong { color: #4b5970; font-size: 14px; font-weight: 500; line-height: 1.6; }
.owner-issue-copy small { color: #a0a8b6; font-size: 11px; }
.owner-issue-row > svg { color: #b7bfcb; }
.owner-empty { padding: 48px 20px; text-align: center; color: #8d97a8; }
.owner-empty h2 { font-size: 18px; color: #5c6a80; }
.owner-empty p { margin: 12px 0 22px; font-size: 12px; }
.owner-back { padding: 0 0 20px; border: 0; background: transparent; color: #8d97a8; font-size: 11px; }
.owner-case-heading { padding: 0 0 29px; }
.owner-case-heading h2 { margin: 14px 0 13px; color: #26334d; font-size: 26px; font-weight: 600; line-height: 1.5; }
.owner-case-heading > p { max-width: 740px; margin-bottom: 19px; color: #7f899b; line-height: 1.9; font-size: 13px; }
.owner-case-value { display: flex; align-items: baseline; gap: 15px; margin: 18px 0; }
.owner-case-value strong { color: #9e7d3b; font-size: 29px; font-weight: 600; }
.owner-case-value span { color: #a4a9b4; font-size: 11px; }
.owner-case-meta { color: #9ca5b3; font-size: 11px; }
.owner-case-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.owner-case-facts h3 { margin: 15px 0 20px; color: #4f5d73; font-size: 15px; font-weight: 500; }
.owner-case-facts ul { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.owner-case-facts li { display: flex; align-items: flex-start; gap: 8px; color: #7c899b; font-size: 12px; line-height: 1.8; }
.owner-case-facts li svg { flex-shrink: 0; margin-top: 3px; color: #75a28d; }
.owner-limit p { margin: 0; max-width: 460px; color: #8c8790; font-size: 12px; line-height: 2; }
.owner-next-step { display: flex; align-items: center; gap: 17px; margin-bottom: 22px; padding: 22px 26px; border: 1px solid #e8e9ef; border-radius: 10px; background: #fffdf8; }
.owner-next-step > div { flex: 1; }
.owner-next-step h3 { margin: 0 0 8px; color: #756548; font-size: 14px; font-weight: 500; }
.owner-next-step p { margin: 0 0 7px; color: #8b8272; font-size: 12px; line-height: 1.8; }
.owner-next-step small { color: #ada598; font-size: 10px; }
.owner-detail-actions { display: flex; flex-wrap: wrap; gap: 26px; padding-bottom: 12px; }
.owner-table-scroll { overflow-x: auto; }
.owner-store-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.owner-store-table th { padding: 16px 18px; background: #f8f9fc; color: #929cac; font-size: 11px; font-weight: 400; text-align: left; }
.owner-store-table td { padding: 20px 18px; border-bottom: 1px solid #edf0f4; color: #78859b; font-variant-numeric: tabular-nums; }
.owner-store-table tr:last-child td { border-bottom: 0; }
.owner-store-table td strong { display: block; margin-bottom: 6px; color: #4f5e76; font-size: 13px; font-weight: 500; }
.owner-store-table td small { color: #a5adba; font-size: 10px; }
.owner-delay { color: #b0945e; }
.owner-inline-warning { margin-bottom: 18px; padding: 12px 16px; border-radius: 6px; background: #fff9ec; color: #a0844a; font-size: 12px; line-height: 1.8; }
.owner-chain-tabs { margin-bottom: 24px; }
.owner-chain-caption { margin: 0 0 23px; padding: 14px 16px; border-radius: 6px; background: #f8f9fc; color: #94a0b4; font-size: 11px; letter-spacing: .4px; }
.owner-flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.owner-flow-stage { min-width: 0; padding: 22px 18px; border: 1px solid #e6eaf2; border-radius: 8px; background: #fff; text-align: left; }
.owner-flow-stage:hover { border-color: #bdc7e8; }
.owner-flow-stage h3 { margin: 16px 0 6px; color: #51617a; font-size: 14px; font-weight: 500; }
.owner-flow-source { color: #9da8ba; font-size: 10px; }
.owner-flow-stage > strong { display: block; margin: 23px 0 9px; color: #5f7190; font-size: 21px; font-weight: 500; }
.owner-flow-stage > small { display: block; min-height: 33px; color: #a1abba; font-size: 10px; line-height: 1.8; }
.owner-flow-stage > .owner-text-button { margin-top: 16px; }
.owner-flow-conclusion { display: flex; align-items: baseline; gap: 20px; margin-top: 23px; padding-top: 22px; border-top: 1px solid #edf0f4; }
.owner-flow-conclusion strong { color: #7b879b; font-size: 12px; font-weight: 500; white-space: nowrap; }
.owner-flow-conclusion span { color: #a0a8b7; font-size: 11px; line-height: 1.8; }
.owner-source-intro, .owner-tool-intro { padding: 5px 0 28px; }
.owner-source-intro h2, .owner-tool-intro h2 { margin: 0 0 12px; color: #45546d; font-size: 21px; font-weight: 500; }
.owner-source-intro p, .owner-tool-intro p { margin: 0 0 16px; color: #939dae; font-size: 12px; line-height: 1.9; }
.owner-source-intro > span { display: inline-block; padding: 8px 12px; border-radius: 5px; background: #edf1fa; color: #8494b3; font-size: 10px; }
.owner-source-row { display: grid; grid-template-columns: 37px minmax(160px, 1fr) 120px 120px 16px; align-items: center; gap: 16px; width: 100%; padding: 19px 0; border: 0; border-bottom: 1px solid #edf0f4; background: #fff; text-align: left; }
.owner-source-row:last-child { border-bottom: 0; }
.owner-source-row:hover strong { color: #5267df; }
.owner-source-initial { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 7px; background: #f1f4fa; color: #8e9eba; font-size: 14px; }
.owner-source-row strong { display: block; margin-bottom: 7px; color: #586880; font-size: 13px; font-weight: 500; }
.owner-source-row small { color: #a5aebc; font-size: 11px; }
.owner-source-method { color: #99a4b6; font-size: 11px; }
.owner-source-status { color: #aaa080; font-size: 10px; }
.owner-source-status.success { color: #8baf9f; }
.owner-source-row > svg { color: #b6c0ce; }
.owner-scenario-grid, .owner-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; }
.owner-scenario { padding: 23px; border: 1px solid #e5eaf2; border-radius: 8px; background: #fff; text-align: left; }
.owner-scenario.active { background: #f7f9ff; border-color: #a8b7e4; }
.owner-scenario > span { color: #9ba7bc; font-size: 10px; }
.owner-scenario.active > span { color: #677fc0; }
.owner-scenario h3 { margin: 14px 0 10px; color: #566782; font-size: 15px; font-weight: 500; }
.owner-scenario p { margin: 0; color: #a0abbb; font-size: 11px; line-height: 1.8; }
.owner-tools-grid > button { margin: 0; padding: 26px; text-align: left; }
.owner-tools-grid > button > svg { margin-bottom: 20px; color: #879dc7; }
.owner-tools-grid h3 { margin: 0 0 12px; color: #566987; font-size: 16px; font-weight: 500; }
.owner-tools-grid p { min-height: 38px; color: #a1acbd; font-size: 12px; line-height: 1.8; }
.owner-tools-grid > button > span { color: #8a9fc7; font-size: 11px; }
.owner-return { position: fixed; bottom: 25px; left: 24px; z-index: 85; padding: 12px 16px; border: 1px solid #dbe1ee; border-radius: 8px; background: #fff; color: #576db1; box-shadow: 0 3px 15px #19233d12; font-size: 12px; }
.owner-mode .demo-page-intro .eyebrow { display: none; }
.owner-mode .demo-page-intro { margin-bottom: 24px; }
.owner-mode .governance-card { box-shadow: none; }
.owner-mode .governance-card h3 { font-size: 15px; }
@media (min-width: 1680px) {
  .owner-header { padding-top: 39px; padding-bottom: 27px; }
  .owner-kpi { padding-top: 25px; padding-bottom: 25px; }
  .owner-priority-body { padding-top: 9px; padding-bottom: 31px; }
  .owner-priority h2 { font-size: 26px; }
}
@media (max-width: 1150px) {
  .owner-sidebar { width: 190px; padding-inline: 12px; }
  .owner-main { margin-left: 190px; }
  .owner-header, .owner-content, .owner-filter-bar { padding-left: 25px; padding-right: 25px; }
  .owner-demo-strip { padding-inline: 25px; }
  .owner-updated { display: none; }
  .owner-kpi { padding: 20px; }
  .owner-kpi > strong { font-size: 24px; }
  .owner-priority h2 { font-size: 21px; }
  .owner-priority-value { padding-left: 18px; }
  .owner-priority-value strong { font-size: 26px; }
  .owner-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-source-row { grid-template-columns: 35px minmax(140px, 1fr) 90px 95px 16px; gap: 12px; }
}
@media (max-width: 800px) {
  .owner-sidebar { position: static; width: 100%; padding: 16px 18px 0; border-right: 0; border-bottom: 1px solid #e9edf2; }
  .owner-brand { padding: 0 0 14px; }
  .owner-brand strong { font-size: 20px; }
  .owner-brand small { font-size: 10px; }
  .owner-nav-label, .owner-readonly { display: none; }
  .owner-nav { flex-direction: row; overflow-x: auto; gap: 5px; }
  .owner-nav button { flex-shrink: 0; min-height: 40px; gap: 7px; padding: 0 11px; border-radius: 6px 6px 0 0; font-size: 11px; }
  .owner-nav button .icon { width: 15px; height: 15px; }
  .owner-sidebar-bottom { position: absolute; top: 19px; right: 18px; flex-direction: row; padding: 0; gap: 5px; margin: 0; }
  .owner-sidebar-bottom > button { min-height: 32px; gap: 5px; padding: 0 7px; font-size: 10px; }
  .owner-sidebar-bottom > button .icon { display: none; }
  .owner-main { margin-left: 0; }
  .owner-header { padding-top: 24px; padding-bottom: 19px; }
  .owner-header h1 { font-size: 23px; }
  .owner-next-step { flex-wrap: wrap; }
  .owner-next-step .owner-secondary { margin-left: 50px; }
}
@media (max-width: 560px) {
  .owner-header, .owner-content, .owner-filter-bar { padding-left: 18px; padding-right: 18px; }
  .owner-demo-strip { padding-inline: 18px; }
  .owner-demo-strip > span:last-child { display: none; }
  .owner-header p { font-size: 11px; }
  .owner-filter-bar { padding-bottom: 19px; }
  .owner-filter-bar .global-filters { gap: 7px; }
  .owner-filter-bar .select-control { padding-inline: 8px; }
  .owner-filter-bar .select-control > span { display: none; }
  .owner-filter-bar .select-control select { font-size: 10px; }
  .owner-kpis { gap: 0; margin-bottom: 18px; border: 1px solid #e5e9f0; border-radius: 8px; overflow: hidden; background: #fff; }
  .owner-kpi { min-height: 114px; gap: 10px; padding: 18px 10px; border: 0; border-right: 1px solid #edf0f4; border-radius: 0; }
  .owner-kpi:last-child { border-right: 0; }
  .owner-kpi > span { font-size: 9px; }
  .owner-kpi > span svg { display: none; }
  .owner-kpi > strong { font-size: 17px; letter-spacing: -.7px; }
  .owner-kpi > small { font-size: 9px; line-height: 1.7; }
  .owner-priority { margin-bottom: 18px; }
  .owner-priority > .owner-section-heading { padding: 19px 19px 0; }
  .owner-priority-body { flex-direction: column; align-items: flex-start; gap: 17px; padding: 0 19px 22px; }
  .owner-priority h2 { font-size: 21px; line-height: 1.5; }
  .owner-priority-body p { font-size: 11px; }
  .owner-priority-value { align-items: flex-start; gap: 6px; padding-left: 0; border-left: 0; }
  .owner-priority-value strong { font-size: 29px; }
  .owner-priority-footer { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 19px; }
  .owner-priority-footer > span { font-size: 10px; }
  .owner-primary { min-height: 42px; }
  .owner-section { padding: 21px 19px; margin-bottom: 18px; }
  .owner-section-heading { flex-wrap: wrap; gap: 9px; }
  .owner-section-heading h2 { font-size: 15px; }
  .owner-evidence-steps { grid-template-columns: 1fr; gap: 0; }
  .owner-evidence-step { padding-block: 13px; border-bottom: 1px solid #f0f2f7; }
  .owner-evidence-step:last-child { border-bottom: 0; }
  .owner-bottom-links { grid-template-columns: 1fr; gap: 10px; }
  .owner-bottom-links > button { min-height: 54px; padding: 14px 19px; }
  .owner-boundary { font-size: 9px; }
  .owner-tabs { width: 100%; }
  .owner-tabs > button { flex: 1; padding: 10px 8px; font-size: 10px; }
  .owner-search { width: 100%; }
  .owner-issue-row { gap: 10px; flex-wrap: wrap; padding-block: 20px; }
  .owner-issue-icon { width: 32px; height: 32px; }
  .owner-issue-copy { flex-basis: calc(100% - 45px); }
  .owner-issue-copy strong { font-size: 12px; }
  .owner-issue-row .owner-tag { margin-left: 42px; }
  .owner-issue-row > svg { margin-left: auto; }
  .owner-case-heading h2 { font-size: 23px; }
  .owner-case-heading > p { font-size: 12px; }
  .owner-case-facts { grid-template-columns: 1fr; gap: 0; }
  .owner-next-step { padding: 19px; gap: 12px; }
  .owner-next-step > div { min-width: 180px; }
  .owner-next-step .owner-secondary { width: 100%; margin-left: 0; }
  .owner-source-row { grid-template-columns: 30px 1fr auto 12px; gap: 10px; }
  .owner-source-initial { width: 28px; height: 30px; font-size: 11px; }
  .owner-source-row strong { font-size: 12px; }
  .owner-source-row small { font-size: 9px; }
  .owner-source-method { display: none; }
  .owner-source-status { font-size: 9px; }
  .owner-source-intro h2, .owner-tool-intro h2 { font-size: 19px; line-height: 1.6; }
  .owner-source-intro p, .owner-tool-intro p { font-size: 11px; }
  .owner-flow-grid { grid-template-columns: 1fr; }
  .owner-flow-stage { padding: 18px; }
  .owner-flow-stage h3 { display: inline; margin-left: 9px; }
  .owner-flow-source { display: block; margin: 10px 0; }
  .owner-flow-stage > strong { margin-top: 17px; }
  .owner-flow-stage > small { min-height: 0; }
  .owner-flow-stage > .owner-text-button { margin-top: 12px; }
  .owner-flow-conclusion { flex-direction: column; gap: 10px; }
  .owner-chain-caption { font-size: 9px; line-height: 2; }
  .owner-scenario-grid, .owner-tools-grid { grid-template-columns: 1fr; }
  .owner-case-value { flex-wrap: wrap; }
}

/* Keep supporting Chinese copy readable, including on a projector. */
.owner-header p, .owner-priority-body p, .owner-section-heading p,
.owner-case-heading > p, .owner-source-intro p, .owner-tool-intro p,
.owner-tools-grid p, .owner-scenario p, .owner-limit p,
.owner-case-facts li, .owner-next-step p { color: #6b778b; font-size: 13px; }
.owner-kpi > span, .owner-evidence-step strong, .owner-bottom-links > button > span,
.owner-source-row strong, .owner-store-table td, .owner-text-button,
.owner-primary, .owner-secondary { font-size: 13px; }
.owner-kpi > small, .owner-evidence-step small, .owner-issue-copy small,
.owner-priority-footer > span, .owner-case-meta, .owner-source-row small,
.owner-flow-stage > small, .owner-flow-source, .owner-source-method,
.owner-source-status, .owner-flow-conclusion span, .owner-scenario > span,
.owner-priority-value span, .owner-case-value span, .owner-updated,
.owner-demo-strip, .owner-boundary, .owner-next-step small,
.owner-nav-label, .owner-eyebrow { color: #768195; font-size: 11px; }
.owner-tag { font-size: 11px; }
.owner-source-status.success { color: #51806b; }
.owner-flow-conclusion strong { color: #596a83; font-size: 13px; }
.owner-sidebar-bottom > button { font-size: 12px; }
.owner-legacy-link { display: flex; align-items: center; gap: 10px; min-height: 38px; margin-top: 9px; padding: 0 14px; color: #697589; font-size: 12px; text-decoration: none; border-top: 1px solid #edf0f4; }
.owner-legacy-link > span:last-child { margin-left: auto; color: #8a95a6; }
.owner-legacy-link:hover { color: #4c60d5; background: #f6f7fb; }
.owner-legacy-link:focus-visible { outline: 3px solid #5267e944; outline-offset: 2px; }
@media (max-width: 800px) {
  .owner-legacy-link { position: fixed; right: 18px; bottom: 12px; z-index: 35; gap: 8px; margin: 0; padding: 9px 12px; min-height: 36px; border: 1px solid #e2e7f0; border-radius: 7px; background: #fff; box-shadow: 0 2px 10px #25304508; font-size: 11px; }
  .owner-content { padding-bottom: 78px; }
}
@media (max-width: 560px) {
  .owner-kpi > strong { font-size: clamp(14px, 4.2vw, 19px); }
  .owner-kpi > span { font-size: 9px; }
  .owner-kpi > small { font-size: 9px; }
  .owner-header p, .owner-priority-body p, .owner-section-heading p,
  .owner-source-intro p, .owner-tool-intro p { font-size: 12px; }
  .owner-nav button { font-size: 11px; }
  .owner-sidebar-bottom > button { font-size: 10px; }
  .owner-text-button, .owner-source-row strong { font-size: 11px; }
  .owner-source-row small, .owner-source-status { font-size: 10px; }
}