:root {
  color-scheme: dark;
  --bg: oklch(0.13 0.025 248);
  --bg-deep: oklch(0.105 0.02 248);
  --surface-1: oklch(0.17 0.032 248);
  --surface-2: oklch(0.205 0.038 248);
  --surface-3: oklch(0.235 0.043 248);
  --surface-selected: oklch(0.27 0.075 250);
  --line: oklch(0.36 0.055 248);
  --line-soft: oklch(0.28 0.043 248);
  --ink: oklch(0.96 0.015 240);
  --ink-soft: oklch(0.84 0.023 242);
  --muted: oklch(0.72 0.028 242);
  --muted-2: oklch(0.60 0.03 242);
  --primary: oklch(0.68 0.17 252);
  --primary-bright: oklch(0.78 0.14 244);
  --primary-deep: oklch(0.46 0.14 255);
  --aqua: oklch(0.76 0.13 190);
  --aqua-deep: oklch(0.51 0.10 190);
  --success: oklch(0.76 0.14 155);
  --success-deep: oklch(0.45 0.10 155);
  --warning: oklch(0.80 0.15 78);
  --warning-deep: oklch(0.48 0.11 72);
  --danger: oklch(0.70 0.19 28);
  --danger-deep: oklch(0.43 0.13 28);
  --violet: oklch(0.72 0.12 300);
  --focus: oklch(0.82 0.12 220);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 0.875rem;

  --z-sticky: 20;
  --z-toast: 60;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  min-width: 20rem;
  background: var(--bg-deep);
}

body {
  margin: 0;
  min-width: 20rem;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  color: inherit;
}

svg {
  display: block;
}

.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-toast);
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg-deep);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform 180ms var(--ease-out);
}

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

:focus-visible {
  outline: 0.1875rem solid var(--focus);
  outline-offset: 0.1875rem;
}

.app-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  grid-template-rows: 4.5rem minmax(0, 1fr) 2.75rem;
  width: 100%;
  height: 100dvh;
  min-height: 42rem;
  background:
    radial-gradient(circle at 78% 8%, oklch(0.22 0.07 244), transparent 32rem),
    var(--bg);
}

.topbar {
  position: relative;
  z-index: var(--z-sticky);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto minmax(14rem, 1fr);
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
  padding: 0 var(--space-md);
  border-bottom: 0.0625rem solid var(--line-soft);
  background: var(--bg-deep);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: block;
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ink);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.28);
}

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

.brand-copy strong {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-copy span {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.page-heading {
  display: flex;
  grid-column: 2;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-sm);
  min-width: 0;
  justify-self: center;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
}

.page-heading h1 {
  order: 1;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-wrap: balance;
  white-space: nowrap;
}

.page-kicker {
  order: 2;
  flex: 0 0 auto;
  color: var(--primary-bright);
  font-size: 0.75rem;
  font-weight: 600;
}

.page-kicker::before {
  display: inline-block;
  width: 0.0625rem;
  height: 0.85rem;
  margin-right: var(--space-sm);
  background: var(--line);
  content: "";
  vertical-align: -0.12rem;
}

.time-block {
  display: flex;
  min-width: 10rem;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.time-block strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.time-block span {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.live-control {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.4rem 0.55rem 0.4rem 0.7rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.live-control:hover {
  border-color: var(--primary);
  background: var(--surface-2);
}

.live-control > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.live-control strong {
  color: var(--success);
  font-size: 0.75rem;
  font-weight: 650;
}

.live-control small {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.625rem;
}

.live-control[aria-pressed="false"] strong {
  color: var(--warning);
}

.live-dot,
.nav-meta-dot,
.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--success);
}

.live-dot {
  box-shadow: 0 0 0 0.25rem oklch(0.35 0.08 155);
  animation: live-pulse 2.4s ease-out infinite;
}

.live-control[aria-pressed="false"] .live-dot {
  background: var(--warning);
  box-shadow: none;
  animation: none;
}

.pause-icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: var(--space-2xs);
  fill: var(--muted);
}

.live-control[aria-pressed="false"] .pause-icon {
  transform: rotate(90deg);
}

@keyframes live-pulse {
  70%, 100% { box-shadow: 0 0 0 0.5rem oklch(0.35 0.08 155 / 0); }
}

.sidebar {
  z-index: var(--z-sticky);
  grid-column: 1;
  grid-row: 2 / 4;
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right: 0.0625rem solid var(--line-soft);
  background: var(--bg-deep);
}

.sidebar-toggle {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  align-self: center;
  margin-top: var(--space-xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.sidebar-toggle:hover { background: var(--surface-1); color: var(--ink); }
.sidebar-toggle:active { transform: scale(0.96); }
.sidebar-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms var(--ease-out);
}

.sidebar nav {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-xs);
}

.nav-item {
  position: relative;
  display: flex;
  min-height: 4.25rem;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.nav-item:hover {
  background: var(--surface-1);
  color: var(--ink-soft);
}

.nav-item:active {
  transform: scale(0.97);
}

.nav-item[aria-current="page"] {
  background: var(--surface-selected);
  color: var(--ink);
}

.nav-item[aria-current="page"]::after {
  position: absolute;
  right: -0.5rem;
  width: 0.1875rem;
  height: 2rem;
  border-radius: 999px 0 0 999px;
  background: var(--primary-bright);
  content: "";
}

.nav-item svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.nav-item span {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.nav-item kbd {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
  color: var(--muted-2);
  font-family: inherit;
  font-size: 0.5625rem;
}

.nav-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-sm) 0.25rem;
  border-top: 0.0625rem solid var(--line-soft);
  color: var(--muted-2);
  font-size: 0.5625rem;
  text-align: center;
}

.nav-meta-dot {
  width: 0.4rem;
  height: 0.4rem;
}

.dashboard-main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: var(--space-sm);
}

.dashboard-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-sm);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.dashboard-view.is-entering {
  animation: view-in 240ms var(--ease-out) both;
}

@keyframes view-in {
  from { opacity: 0.15; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-sm);
}

.kpi-strip.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.kpi {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 4.25rem;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  min-height: 5.75rem;
  padding: 0.8rem 0.9rem;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.kpi:hover {
  border-color: var(--primary);
  background: var(--surface-2);
}

.kpi:active { transform: scale(0.99); }

.kpi::after {
  position: absolute;
  top: -2rem;
  left: -1rem;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--surface-2);
  content: "";
}

.kpi-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 0.65rem;
  background: var(--surface-selected);
  color: var(--primary-bright);
}

.kpi-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.kpi-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.kpi-label {
  display: block;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 550;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.kpi-value {
  color: var(--ink);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}

.kpi-unit {
  color: var(--muted);
  font-size: 0.6875rem;
}

.kpi-delta {
  position: relative;
  z-index: 1;
  align-self: end;
  color: var(--success);
  font-size: 0.625rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi-meta {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.25rem;
}

.kpi-spark {
  width: 4.1rem;
  height: 1.45rem;
  overflow: visible;
}

.kpi-spark polyline {
  fill: none;
  stroke: var(--primary-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.kpi-spark circle {
  fill: var(--surface-1);
  stroke: var(--primary-bright);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.kpi-spark.aqua polyline,
.kpi-spark.aqua circle { stroke: var(--aqua); }
.kpi-spark.success polyline,
.kpi-spark.success circle { stroke: var(--success); }
.kpi-spark.warning polyline,
.kpi-spark.warning circle { stroke: var(--warning); }
.kpi-spark.danger polyline,
.kpi-spark.danger circle { stroke: var(--danger); }

.kpi[data-tone="aqua"] .kpi-icon { color: var(--aqua); background: oklch(0.28 0.07 190); }
.kpi[data-tone="success"] .kpi-icon { color: var(--success); background: oklch(0.28 0.07 155); }
.kpi[data-tone="warning"] .kpi-icon { color: var(--warning); background: oklch(0.28 0.07 78); }
.kpi[data-tone="danger"] .kpi-icon { color: var(--danger); background: oklch(0.28 0.07 28); }
.kpi[data-tone="danger"] .kpi-value,
.kpi[data-tone="danger"] .kpi-delta { color: var(--danger); }
.kpi[data-tone="warning"] .kpi-value { color: var(--warning); }

.board {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.board.three-rows {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.board.conversion-board {
  grid-template-rows: minmax(7.5rem, 0.62fr) minmax(0, 1.38fr);
}

.conversion-side-stack {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-column: span 3;
  grid-template-rows: minmax(0, 1fr) minmax(0, 0.76fr);
  gap: var(--space-sm);
}

.conversion-side-stack .bar-list,
.conversion-side-stack .status-list {
  overflow: hidden;
  scrollbar-gutter: auto;
  padding-bottom: 0;
}

.conversion-side-stack .bar-row {
  grid-template-columns: 1rem minmax(0, 0.95fr) minmax(3.5rem, 1.2fr) 3.5rem;
  min-height: 1.25rem;
  gap: var(--space-2xs);
  padding: 0.1rem 0;
}

.conversion-side-stack .status-row {
  min-height: 1.5rem;
  padding-block: var(--space-2xs);
}

.conversion-side-stack .panel.has-scroll-region > .bar-list,
.conversion-side-stack .panel.has-scroll-region > .status-list { padding-bottom: 0; }

.board.overview-board {
  grid-template-rows: minmax(0, 1.28fr) minmax(0, 0.72fr);
}

.dashboard-view[data-view="safety"] .kpi {
  min-height: 4.75rem;
  padding-block: 0.6rem;
}

.panel {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.panel.chart-panel {
  display: flex;
  flex-direction: column;
}

.panel.span-3 { grid-column: span 3; }
.panel.span-4 { grid-column: span 4; }
.panel.span-5 { grid-column: span 5; }
.panel.span-6 { grid-column: span 6; }
.panel.span-7 { grid-column: span 7; }
.panel.span-8 { grid-column: span 8; }
.panel.span-9 { grid-column: span 9; }
.panel.span-12 { grid-column: 1 / -1; }
.panel.row-2 { grid-row: span 2; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex: 0 0 auto;
  min-height: 1.75rem;
  margin-bottom: var(--space-xs);
}

.panel-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
}

.panel-title svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--primary-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.panel-meta {
  color: var(--muted);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.panel-summary {
  margin: var(--space-xs) 0 0;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.45;
}

.legend {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--muted);
  font-size: 0.6875rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.5rem;
  padding: 0.15rem 0.25rem;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

.legend-item:hover { background: var(--surface-2); }
.legend-item[aria-pressed="false"] { opacity: 0.38; }

.chart-stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 2rem;
  margin: 0.25rem 0 0.1rem;
  padding: 0.25rem 0;
  border-bottom: 0.0625rem solid var(--line-soft);
}

.chart-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.625rem;
  white-space: nowrap;
}

.chart-stat strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.chart-stat em {
  color: var(--success);
  font-size: 0.625rem;
  font-style: normal;
}

.legend-swatch {
  width: 0.6rem;
  height: 0.18rem;
  border-radius: 999px;
  background: var(--primary);
}

.legend-swatch.aqua { background: var(--aqua); }
.legend-swatch.success { background: var(--success); }
.legend-swatch.warning { background: var(--warning); }
.legend-swatch.danger { background: var(--danger); }
.legend-swatch.violet { background: var(--violet); }

.period-button {
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.period-button:hover {
  border-color: var(--primary);
  background: var(--surface-3);
}

.chart-wrap {
  position: relative;
  min-height: 0;
}

.chart-panel .chart-wrap {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.line-chart {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.chart-grid line {
  stroke: var(--line-soft);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.chart-axis text {
  fill: var(--muted);
  font-size: calc(11px * var(--chart-scale, 1));
  font-family: inherit;
}

.chart-axis line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-series {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(3px * var(--chart-scale, 1));
  vector-effect: non-scaling-stroke;
}

.chart-series-group {
  transition: opacity 180ms var(--ease-out);
}

.chart-series-group.is-muted { opacity: 0.1; }

.chart-line-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: chart-draw 760ms var(--ease-out) forwards;
}

@keyframes chart-draw { to { stroke-dashoffset: 0; } }

.chart-area {
  opacity: 0;
  animation: chart-area-in 520ms 220ms var(--ease-out) forwards;
}

@keyframes chart-area-in { to { opacity: 1; } }

.chart-series.aqua { stroke: var(--aqua); }
.chart-series.success { stroke: var(--success); }
.chart-series.warning { stroke: var(--warning); }
.chart-series.danger { stroke: var(--danger); }
.chart-series.violet { stroke: var(--violet); }

.chart-point {
  fill: var(--surface-1);
  stroke: var(--primary-bright);
  stroke-width: calc(2px * var(--chart-scale, 1));
}

.chart-point.aqua { stroke: var(--aqua); }
.chart-point.success { stroke: var(--success); }
.chart-point.warning { stroke: var(--warning); }
.chart-point.danger { stroke: var(--danger); }

.chart-crosshair {
  opacity: 0;
  stroke: var(--ink-soft);
  stroke-width: calc(1px * var(--chart-scale, 1));
  stroke-dasharray: 3 4;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

.chart-hover-point {
  opacity: 0;
  fill: var(--surface-1);
  stroke: var(--primary-bright);
  stroke-width: calc(3px * var(--chart-scale, 1));
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

.chart-hover-point.aqua { stroke: var(--aqua); }
.chart-hover-point.success { stroke: var(--success); }
.chart-hover-point.warning { stroke: var(--warning); }
.chart-hover-point.danger { stroke: var(--danger); }
.chart-hover-point.violet { stroke: var(--violet); }

.interactive-chart.is-hovering .chart-crosshair,
.interactive-chart.is-hovering .chart-hover-point { opacity: 1; }

.chart-hit-area {
  fill: transparent;
  cursor: crosshair;
  pointer-events: all;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  left: 0;
  min-width: 9.5rem;
  padding: 0.55rem 0.65rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--ink-soft);
  font-size: 0.625rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.3rem);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.interactive-chart.is-hovering .chart-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.chart-tooltip time {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-weight: 650;
}

.chart-tooltip span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: 0.2rem;
}

.chart-tooltip i {
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--primary-bright);
}

.chart-tooltip i.aqua { background: var(--aqua); }
.chart-tooltip i.success { background: var(--success); }
.chart-tooltip i.warning { background: var(--warning); }
.chart-tooltip i.danger { background: var(--danger); }
.chart-tooltip strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.chart-label {
  fill: var(--ink-soft);
  font-size: 11px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.chart-value {
  fill: var(--primary-bright);
  font-size: calc(12px * var(--chart-scale, 1));
  font-family: inherit;
  font-weight: 700;
}

.chart-value.aqua { fill: var(--aqua); }
.chart-value.success { fill: var(--success); }
.chart-value.warning { fill: var(--warning); }
.chart-value.danger { fill: var(--danger); }

.bar-list {
  display: flex;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-xs);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.bar-list:not(.is-overflowing),
.status-list:not(.is-overflowing) {
  justify-content: space-evenly;
}

.bar-row {
  display: grid;
  grid-template-columns: 1.35rem minmax(5rem, 0.9fr) minmax(7rem, 2fr) 3.2rem;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2rem;
  flex: 0 0 auto;
  width: 100%;
  padding: 0.25rem 0.35rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.recommended-dept-panel .bar-list {
  overflow: hidden;
  scrollbar-gutter: auto;
}

.recommended-dept-panel .bar-row {
  grid-template-columns: 1rem minmax(4.25rem, 1fr) minmax(3rem, 1.35fr) 2.5rem;
  gap: var(--space-xs);
  padding-inline: 0.2rem;
}

.bar-row:hover { background: var(--surface-2); }
.bar-row:active { transform: scale(0.995); }

.bar-rank {
  color: var(--muted-2);
  font-size: 0.5625rem;
  font-variant-numeric: tabular-nums;
}

.bar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track,
.progress-track {
  position: relative;
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.bar-fill,
.progress-fill {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transform-origin: left;
  animation: bar-grow 500ms var(--ease-out) both;
}

.bar-fill.aqua,
.progress-fill.aqua { background: var(--aqua); }
.bar-fill.success,
.progress-fill.success { background: var(--success); }
.bar-fill.warning,
.progress-fill.warning { background: var(--warning); }
.bar-fill.danger,
.progress-fill.danger { background: var(--danger); }
.bar-fill.violet,
.progress-fill.violet { background: var(--violet); }

@keyframes bar-grow {
  from { transform: scaleX(0.15); }
  to { transform: scaleX(1); }
}

.bar-value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.status-list {
  display: flex;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-xs);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  right: var(--space-md);
  bottom: var(--space-xs);
  display: none;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 999px;
  border: 0.0625rem solid var(--line);
  background: var(--surface-3);
  color: var(--ink-soft);
  font-size: 0.5625rem;
  font-weight: 650;
  pointer-events: none;
}

.scroll-cue.is-visible { display: inline-flex; }

.panel > .matrix-scroll,
.panel > .dual-stack,
.panel > .risk-stack,
.panel > .task-grid {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.has-scroll-region > .bar-list,
.has-scroll-region > .status-list,
.has-scroll-region > .matrix-scroll,
.has-scroll-region > .dual-stack,
.has-scroll-region > .risk-stack,
.has-scroll-region > .task-grid,
.has-scroll-region > .consult-efficiency {
  padding-bottom: var(--space-lg);
}

.dual-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
  height: calc(100% - 2.1rem);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.mini-section {
  min-height: 0;
  padding-top: 0.3rem;
  overflow: auto;
  border-top: 0.0625rem solid var(--line-soft);
}

.mini-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.mini-section h3 {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 600;
}

.mini-section .bar-list,
.mini-section .status-list {
  height: calc(100% - 1rem);
  gap: 0.2rem;
}

.mini-section .bar-row {
  grid-template-columns: 1rem minmax(4.5rem, 0.85fr) minmax(4rem, 1.2fr) 2.5rem;
  min-height: 1.2rem;
  gap: var(--space-xs);
  font-size: 0.625rem;
}

.mini-section .status-row {
  min-height: 1.65rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.625rem;
}

.mini-section .status-row strong {
  font-size: 0.7rem;
}

.status-row {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2rem;
  width: 100%;
  padding: 0.38rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.status-row:hover { background: var(--surface-3); }
.status-row:active { transform: scale(0.995); }

.status-row .status-dot {
  width: 0.5rem;
  height: 0.5rem;
}

.status-row .status-dot.warning { background: var(--warning); }
.status-row .status-dot.danger { background: var(--danger); }
.status-row .status-dot.primary { background: var(--primary); }
.status-row .status-dot.aqua { background: var(--aqua); }

.status-row strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-row.danger strong,
.status-row.danger .status-name { color: var(--danger); }
.status-row.warning strong,
.status-row.warning .status-name { color: var(--warning); }

.status-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.25rem;
  height: calc(100% - 2.15rem);
  min-height: 0;
}

.funnel-step {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.3rem;
  border-radius: var(--radius-sm);
  background: var(--surface-selected);
  text-align: center;
}

.funnel-step:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -0.46rem;
  width: 0.65rem;
  height: 0.65rem;
  border-top: 0.125rem solid var(--primary-bright);
  border-right: 0.125rem solid var(--primary-bright);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.funnel-step:nth-child(3),
.funnel-step:nth-child(4) { background: oklch(0.26 0.06 210); }
.funnel-step:nth-child(5) { background: oklch(0.26 0.06 175); }

.funnel-label {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel-value {
  margin-top: 0.35rem;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.funnel-rate {
  margin-top: 0.2rem;
  color: var(--aqua);
  font-size: 0.625rem;
}

.donut-group {
  display: grid;
  grid-template-columns: minmax(7rem, 0.9fr) minmax(10rem, 1.2fr);
  align-items: center;
  gap: var(--space-md);
  height: calc(100% - 2rem);
}

.donut {
  position: relative;
  display: grid;
  width: min(8.5rem, 100%);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(var(--donut-color, var(--primary)) calc(var(--value) * 1%), var(--surface-3) 0);
}

.donut::before {
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface-1);
  content: "";
}

.donut-copy {
  position: relative;
  z-index: 1;
  text-align: center;
}

.donut-copy strong {
  display: block;
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.donut-copy span {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.625rem;
}

.metric-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-xs);
}

.metric-stack-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.metric-stack-row strong {
  color: var(--ink);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.avatar-value-flow {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-xs);
}

.value-flow-map {
  position: relative;
  min-height: 7.25rem;
  flex: 1 1 auto;
}

.value-flow-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.value-link,
.value-pulse {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.value-link {
  stroke-width: 5;
  opacity: 0.2;
}

.value-link.success,
.value-pulse.success { stroke: var(--success); }
.value-link.warning,
.value-pulse.warning { stroke: var(--warning); }
.value-link.aqua,
.value-pulse.aqua { stroke: var(--aqua); }

.value-pulse {
  stroke-width: 1.5;
  stroke-dasharray: 2 8;
  animation: value-flow-pulse 2.8s linear infinite;
}

@keyframes value-flow-pulse {
  to { stroke-dashoffset: -30; }
}

.value-flow-source,
.value-flow-node {
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.value-flow-source {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  width: 31%;
  min-height: 5.2rem;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-sm);
  border-color: var(--primary);
  transform: translateY(-50%);
}

.value-flow-source:hover {
  background: var(--surface-3);
  transform: translateY(-50%) scale(1.015);
}

.value-flow-source span {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.6875rem;
}

.value-flow-source svg,
.trust-metric svg,
.governance-row svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.value-flow-source strong {
  margin-top: var(--space-2xs);
  color: var(--ink);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.value-flow-source small,
.value-flow-node small {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.5625rem;
}

.value-flow-outcomes {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 42%;
  height: 100%;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.value-flow-node {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: baseline;
  gap: 0 var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
}

.value-flow-node:hover,
.value-flow-node.is-active {
  border-color: currentColor;
  background: var(--surface-3);
  transform: translateX(-0.15rem);
}

.value-flow-node.success { color: var(--success); }
.value-flow-node.warning { color: var(--warning); }
.value-flow-node.aqua { color: var(--aqua); }

.value-flow-node span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value-flow-node strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.value-flow-node small {
  grid-column: 1 / -1;
  color: currentColor;
}

.value-flow-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 0.0625rem solid var(--line-soft);
}

.value-flow-summary span {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  color: var(--muted);
  font-size: 0.625rem;
  white-space: nowrap;
}

.value-flow-summary strong {
  color: var(--ink);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.trust-grid {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.trust-metric {
  display: grid;
  min-width: 0;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border: 0;
  background: transparent;
  color: var(--primary-bright);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}

.trust-metric:nth-child(odd) { border-right: 0.0625rem solid var(--line-soft); }
.trust-metric:nth-child(-n + 2) { border-bottom: 0.0625rem solid var(--line-soft); }
.trust-metric:hover { background: var(--surface-2); }
.trust-metric.success { color: var(--success); }
.trust-metric.warning { color: var(--warning); }
.trust-metric.aqua { color: var(--aqua); }

.trust-metric > i {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: currentColor;
}

.trust-metric > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: var(--muted);
  font-size: 0.625rem;
}

.trust-metric strong {
  margin-top: 0.08rem;
  color: var(--ink);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.trust-metric small {
  margin-top: 0.12rem;
  color: currentColor;
  font-size: 0.5625rem;
}

.trust-track {
  grid-column: 1 / -1;
  display: block;
  height: 0.22rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.trust-track u {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  text-decoration: none;
  transform-origin: left;
  animation: bar-grow 500ms var(--ease-out) both;
}

.avatar-dept-matrix {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.avatar-dept-head,
.avatar-dept-row {
  display: grid;
  grid-template-columns: minmax(5rem, 1.45fr) minmax(3.2rem, 0.8fr) minmax(4rem, 0.9fr) 2.25rem;
  align-items: center;
  gap: var(--space-xs);
}

.avatar-dept-head {
  min-height: 1.4rem;
  padding: 0 var(--space-xs);
  border-bottom: 0.0625rem solid var(--line-soft);
  color: var(--muted-2);
  font-size: 0.5625rem;
}

.avatar-dept-head span:not(:first-child) { text-align: right; }

.avatar-dept-row {
  min-height: 0;
  flex: 1 1 0;
  width: 100%;
  padding: 0 var(--space-xs);
  border: 0;
  border-bottom: 0.0625rem solid var(--line-soft);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.6875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}

.avatar-dept-row:last-child { border-bottom: 0; }
.avatar-dept-row:hover { background: var(--surface-2); }

.avatar-dept-row strong {
  overflow: hidden;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-dept-row span,
.avatar-dept-row em {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.avatar-dept-row em {
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  justify-self: end;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--success);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
}

.avatar-dept-row.warning em { color: var(--warning); }
.avatar-dept-row.danger em { color: var(--danger); }

.governance-list {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2xs);
}

.governance-row {
  display: grid;
  min-height: 0;
  flex: 1 1 0;
  grid-template-columns: 1.85rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--primary-bright);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.governance-row:hover { background: var(--surface-3); }
.governance-row:active { transform: scale(0.995); }
.governance-row.danger { color: var(--danger); }
.governance-row.warning { color: var(--warning); }
.governance-row.aqua { color: var(--aqua); }

.governance-row > i {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
}

.governance-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.governance-row span strong {
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.governance-row small {
  margin-top: 0.1rem;
  color: currentColor;
  font-size: 0.5625rem;
}

.governance-row em {
  color: currentColor;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.flow-rail {
  position: relative;
  display: flex;
  height: calc(100% - 2rem);
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding: 0.35rem 0.2rem 0;
}

.flow-rail-visual {
  position: relative;
  min-width: 0;
}

.flow-rail-track {
  position: absolute;
  top: calc(var(--space-xs) + 1.125rem - 0.1rem);
  right: 9%;
  left: 9%;
  height: 0.2rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.flow-rail-track::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--primary), var(--aqua), var(--success));
  content: "";
}

.flow-rail-track i {
  position: absolute;
  top: 50%;
  left: -0.5rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0.5rem var(--primary-bright);
  transform: translateY(-50%);
  animation: flow-travel 3.2s linear infinite;
}

.flow-rail-track i:nth-child(2) { animation-delay: -1.05s; }
.flow-rail-track i:nth-child(3) { animation-delay: -2.1s; }

@keyframes flow-travel {
  from { left: -0.5rem; opacity: 0; }
  10%, 90% { opacity: 1; }
  to { left: calc(100% + 0.25rem); opacity: 0; }
}

.flow-stages {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.flow-rail.compact .flow-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.flow-stage {
  display: flex;
  min-width: 0;
  min-height: 7rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-xs) var(--space-2xs);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
  transition: color 180ms var(--ease-out);
}

.flow-stage:hover,
.flow-stage.is-active { color: var(--ink); }

.flow-stage:focus-visible { outline: none; }

.flow-node {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  margin-bottom: 0.4rem;
  border: 0.125rem solid var(--primary);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--primary-bright);
  transition: background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.flow-node.aqua { border-color: var(--aqua); color: var(--aqua); }
.flow-node.success { border-color: var(--success); color: var(--success); }

.flow-stage:hover .flow-node,
.flow-stage.is-active .flow-node,
.flow-stage:focus-visible .flow-node {
  background: var(--surface-selected);
  box-shadow: 0 0 0 var(--space-2xs) color-mix(in oklch, currentColor 24%, transparent);
  transform: scale(1.03);
}

.flow-stage:active .flow-node { transform: scale(0.96); }

.flow-stage.is-active .flow-stage-label { color: var(--ink); font-weight: 650; }

.flow-node svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.flow-stage-label {
  overflow: hidden;
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-stage strong {
  margin-top: 0.2rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.flow-stage small { color: var(--aqua); font-size: 0.5625rem; }

.flow-detail {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.25rem;
  margin: 0.35rem 0.2rem 0;
  padding: 0.35rem 0.55rem;
  border-radius: 0.4rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.625rem;
}

.flow-detail strong { color: var(--primary-bright); }
.flow-detail p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flow-rail.compact { height: calc(100% - 3.8rem); padding-top: 0; }
.flow-rail.compact .flow-stage { min-height: 5.75rem; }
.flow-rail.compact .flow-detail { display: none; }
.flow-rail.compact .flow-rail-track { top: calc(var(--space-xs) + 1.125rem - 0.1rem); }

.sankey {
  position: relative;
  display: flex;
  height: calc(100% - 3.1rem);
  min-height: 15rem;
  flex-direction: column;
  overflow: hidden;
}

.sankey-stage {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
}

.sankey-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sankey-band {
  fill: none;
  opacity: 0.62;
  stroke-linecap: round;
  transition: opacity 180ms var(--ease-out), filter 180ms var(--ease-out);
}

.sankey-pulse {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 20;
  animation: sankey-stream 1.4s linear infinite;
}

.sankey-pulse.aqua { animation-delay: -0.45s; }
.sankey-pulse.success { animation-delay: -0.9s; }
@keyframes sankey-stream { to { stroke-dashoffset: -44; } }

.sankey-flow { transition: opacity 180ms var(--ease-out); }
.sankey-flow.is-muted { opacity: 0.09; }
.sankey-flow.is-active .sankey-band { opacity: 0.95; filter: drop-shadow(0 0 0.25rem var(--primary)); }

.sankey-node {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 9.25rem;
  min-height: 4.25rem;
  flex-direction: column;
  justify-content: center;
  padding: 0.45rem 0.65rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.sankey-node:hover,
.sankey-node[aria-pressed="true"] { border-color: var(--primary-bright); background: var(--surface-3); }
.sankey-node:active { transform: translateY(-50%) scale(0.98); }
.sankey-node.source { top: 50%; left: 0.5rem; }
.sankey-node.target { right: 0.5rem; }
.sankey-node.target.avatar { top: 18%; }
.sankey-node.target.consult { top: 50%; }
.sankey-node.target.register { top: 82%; }
.sankey-node span { font-size: 0.625rem; }
.sankey-node strong { margin-top: 0.1rem; color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sankey-node small { color: var(--muted); font-size: 0.5625rem; }
.sankey-node.avatar small { color: var(--primary-bright); }
.sankey-node.consult small { color: var(--aqua); }
.sankey-node.register small { color: var(--success); }

.sankey-caption {
  position: relative;
  display: flex;
  flex: 0 0 1.7rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  min-height: 1.7rem;
  color: var(--muted);
  font-size: 0.625rem;
}

.sankey-caption strong { color: var(--ink); }

.pathway {
  display: flex;
  height: calc(100% - 4.4rem);
  min-height: 0;
  align-items: stretch;
  gap: 0.35rem;
}

.pathway-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  min-height: 1.9rem;
  margin-top: 0.4rem;
}

.pathway-summary span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.625rem;
  white-space: nowrap;
}

.pathway-summary strong {
  color: var(--ink);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.pathway-step {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.35rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: center;
}

.pathway-step.primary { background: var(--surface-selected); }
.pathway-step.aqua { background: oklch(0.25 0.06 190); }
.pathway-step.success { background: oklch(0.25 0.06 155); }

.pathway-icon {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--primary-bright);
}

.pathway-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pathway-step strong {
  margin-top: 0.25rem;
  color: var(--ink);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.pathway-step span {
  color: var(--ink-soft);
  font-size: 0.65rem;
  line-height: 1.2;
}

.pathway-step small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.5625rem;
}

.service-cards {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: var(--space-sm);
  height: calc(100% - 2rem);
}

.conversion-board .service-cards {
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.dashboard-view[data-view="conversion"] .kpi {
  min-height: 4.75rem;
  padding-block: 0.6rem;
}

.service-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  padding: 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.conversion-board .service-card {
  padding-block: 0.55rem;
}

.service-card[data-tone="primary"] { background: var(--surface-selected); }
.service-card[data-tone="aqua"] { background: oklch(0.27 0.07 190); }
.service-card[data-tone="success"] { background: oklch(0.27 0.07 155); }

.service-card .service-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--primary-bright);
}

.service-card .service-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.service-card h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 650;
}

.service-card p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.625rem;
  line-height: 1.35;
}

.service-price {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.service-price small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.5625rem;
  font-weight: 400;
}

.consult-efficiency-panel { container-type: inline-size; }

.consult-efficiency {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-rows: auto minmax(8rem, 1fr) auto auto;
  gap: var(--space-md);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sla-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--space-xs) 0;
  border-block: 0.0625rem solid var(--line-soft);
}

.sla-summary-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: 0 var(--space-sm);
  border-inline-start: 0.0625rem solid var(--line-soft);
}

.sla-summary-item:first-child { padding-inline-start: 0; border-inline-start: 0; }
.sla-summary-item:last-child { padding-inline-end: 0; }
.sla-summary-item > span { color: var(--muted); font-size: 0.625rem; }
.sla-summary-item strong { color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sla-summary-item strong small { margin-left: var(--space-2xs); color: var(--muted); font-size: 0.5625rem; font-weight: 500; }
.sla-summary-item em { color: var(--success); font-size: 0.5625rem; font-style: normal; white-space: nowrap; }

.sla-hourly {
  display: flex;
  min-height: 8rem;
  flex-direction: column;
}

.sla-hourly > header,
.sla-outcomes > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 1.5rem;
  color: var(--muted);
  font-size: 0.625rem;
}

.sla-hourly > header strong,
.sla-outcomes > header strong { color: var(--ink-soft); font-size: 0.6875rem; }

.sla-hourly > header span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.sla-hourly > header i { width: 0.75rem; border-top: 0.0625rem dashed var(--warning); }

.sla-hour-bars {
  position: relative;
  display: grid;
  min-height: 6.5rem;
  flex: 1 1 auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-bottom: 0.0625rem solid var(--line-soft);
}

.sla-target-line {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 71.4%;
  left: 0;
  border-top: 0.0625rem dashed color-mix(in oklch, var(--warning) 62%, transparent);
  pointer-events: none;
}

.sla-hour {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--space-2xs);
}

.sla-hour strong { color: var(--ink-soft); font-size: 0.5625rem; font-variant-numeric: tabular-nums; }
.sla-hour > i {
  width: min(1.5rem, 56%);
  height: var(--value);
  align-self: end;
  border-radius: 0.25rem 0.25rem 0 0;
  background: var(--primary);
  transform-origin: bottom;
  animation: bar-grow 500ms var(--ease-out) both;
}
.sla-hour.warning > i { background: var(--warning); }
.sla-hour > span { color: var(--muted-2); font-size: 0.5625rem; white-space: nowrap; }

.sla-outcomes { display: grid; gap: var(--space-xs); }
.sla-segments { display: flex; height: var(--space-xs); overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.sla-segments > i { display: block; flex: 0 0 var(--value); height: 100%; }
.sla-segments .success { background: var(--success); }
.sla-segments .warning { background: var(--warning); }
.sla-segments .danger { background: var(--danger); }

.sla-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

.sla-legend span { display: flex; min-width: 0; align-items: center; gap: var(--space-2xs); color: var(--muted); font-size: 0.5625rem; white-space: nowrap; }
.sla-legend span > i { width: 0.4rem; height: 0.4rem; flex: 0 0 auto; border-radius: 50%; }
.sla-legend i.success { background: var(--success); }
.sla-legend i.warning { background: var(--warning); }
.sla-legend i.danger { background: var(--danger); }
.sla-legend strong { margin-left: auto; color: var(--ink); font-size: 0.625rem; font-variant-numeric: tabular-nums; }

.sla-queue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 0.0625rem solid var(--line-soft);
}

.sla-queue span { display: flex; min-width: 0; justify-content: space-between; gap: var(--space-2xs); color: var(--muted); font-size: 0.5625rem; white-space: nowrap; }
.sla-queue strong { color: var(--ink); font-size: 0.625rem; font-variant-numeric: tabular-nums; }
.sla-queue strong.warning { color: var(--warning); }

@container (max-width: 26rem) {
  .sla-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sla-summary-item:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .sla-summary-item:nth-child(-n + 2) { padding-bottom: var(--space-xs); }
  .sla-summary-item:nth-child(n + 3) { padding-top: var(--space-xs); border-top: 0.0625rem solid var(--line-soft); }
  .sla-legend,
  .sla-queue { grid-template-columns: 1fr; }
}

.split-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(10rem, 1.2fr);
  align-items: center;
  gap: var(--space-md);
  height: calc(100% - 2rem);
}

.flow-source {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-selected);
  text-align: center;
}

.flow-source span {
  color: var(--muted);
  font-size: 0.65rem;
}

.flow-source strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.flow-targets {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.flow-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.flow-target strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.timeline {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  height: calc(100% - 2.1rem);
  min-height: 0;
}

.timeline-labels,
.timeline-chart {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.timeline-label {
  display: flex;
  align-items: center;
  border-bottom: 0.0625rem solid var(--line-soft);
  color: var(--muted);
  font-size: 0.65rem;
}

.timeline-chart {
  position: relative;
  border-left: 0.0625rem solid var(--line-soft);
}

.timeline-row {
  position: relative;
  border-bottom: 0.0625rem solid var(--line-soft);
  background-image: linear-gradient(to right, transparent 24.8%, var(--line-soft) 25%, transparent 25.2%, transparent 49.8%, var(--line-soft) 50%, transparent 50.2%, transparent 74.8%, var(--line-soft) 75%, transparent 75.2%);
}

.timeline-slot {
  position: absolute;
  top: 50%;
  left: var(--left);
  width: var(--width);
  min-width: 3rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.3rem;
  background: var(--success-deep);
  color: var(--ink);
  font-size: 0.625rem;
  text-align: center;
  white-space: nowrap;
  transform: translateY(-50%);
}

.timeline-slot.primary { background: var(--primary-deep); }
.timeline-slot.violet { background: oklch(0.44 0.12 300); }

.timeline-now {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--timeline-now-left, 17%);
  width: 0.0625rem;
  background: var(--danger);
}

.timeline-now::before {
  position: absolute;
  top: -0.15rem;
  left: 50%;
  padding: 0.15rem 0.3rem;
  border-radius: 0.25rem;
  background: var(--danger-deep);
  color: var(--ink);
  content: attr(data-time);
  font-size: 0.5625rem;
  transform: translate(-50%, -100%);
}

.risk-stack {
  display: flex;
  height: calc(100% - 2.1rem);
  min-height: 0;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--space-sm);
}

.risk-item {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-sm);
}

.risk-icon {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--success);
  font-weight: 800;
}

.risk-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.risk-item.warning .risk-icon { color: var(--warning); background: oklch(0.28 0.07 78); }
.risk-item.danger .risk-icon { color: var(--danger); background: oklch(0.28 0.07 28); }

.risk-copy {
  min-width: 0;
}

.risk-copy h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

.risk-copy h3 strong {
  color: var(--ink);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.risk-copy .progress-track {
  margin-top: 0.35rem;
}

.risk-rate {
  min-width: 3.2rem;
  color: var(--success);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.risk-item.warning .risk-rate { color: var(--warning); }
.risk-item.danger .risk-rate { color: var(--danger); }

.task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(100% - 2.1rem);
}

.task-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border-right: 0.0625rem solid var(--line-soft);
  text-align: center;
}

.task-cell:last-child { border-right: 0; }

.task-symbol {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  margin-bottom: 0.35rem;
  border: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--success);
  font-size: 1.25rem;
  font-weight: 700;
}

.task-cell.primary .task-symbol { color: var(--primary-bright); }
.task-cell.warning .task-symbol { color: var(--warning); }
.task-cell.danger .task-symbol { color: var(--danger); }

.task-cell span {
  color: var(--muted);
  font-size: 0.65rem;
}

.task-cell strong {
  margin-top: 0.2rem;
  color: currentColor;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.knowledge-governance-panel .bar-list,
.safety-board .dual-stack,
.safety-board .mini-section,
.safety-board .dual-stack .bar-list,
.safety-board .dual-stack .status-list,
.safety-board .risk-stack,
.safety-board .task-grid {
  overflow: hidden;
  scrollbar-gutter: auto;
}

.knowledge-governance-panel .bar-list,
.safety-board .dual-stack {
  padding-bottom: 0;
}

.knowledge-governance-panel .bar-row {
  grid-template-columns: 1.1rem minmax(0, 1.05fr) minmax(3.5rem, 1.35fr) 2.75rem;
  gap: var(--space-xs);
  padding-inline: 0;
}

.safety-board .dual-stack {
  grid-template-rows: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.safety-board .task-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.safety-board .task-cell {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) auto;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-right: 0.0625rem solid var(--line-soft);
  border-bottom: 0.0625rem solid var(--line-soft);
  text-align: left;
}

.safety-board .task-cell:nth-child(even) { border-right: 0; }
.safety-board .task-cell:nth-child(n + 3) { border-bottom: 0; }
.safety-board .task-symbol { margin-bottom: 0; }
.safety-board .task-cell strong { margin-top: 0; text-align: right; }

.safety-board .mini-section .status-row {
  min-height: 1.4rem;
  padding-block: 0.15rem;
}

.task-symbol svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.matrix {
  display: grid;
  grid-template-columns: 1.15fr repeat(4, 0.75fr) 0.9fr;
  height: 100%;
  min-height: 0;
  align-items: stretch;
  grid-template-rows: 2rem repeat(5, minmax(3rem, 1fr));
}

.matrix-scroll {
  height: calc(100% - 2rem);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.matrix-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.4rem;
  border-bottom: 0.0625rem solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}

.matrix-cell.header {
  color: var(--muted);
  font-weight: 600;
}

.matrix-cell.department {
  color: var(--ink);
  font-weight: 600;
}

.matrix-cell .mini-bar {
  display: block;
  width: 2.2rem;
  height: 0.3rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.matrix-cell .mini-bar::after {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--success);
  content: "";
}

.capacity-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.capacity-status::before {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--success);
  content: "";
}

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

.insight-strip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.8rem;
  padding: 0.55rem 0.8rem;
  color: var(--ink-soft);
}

.insight-strip svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--primary-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.insight-strip strong {
  color: var(--primary-bright);
  font-size: 0.75rem;
}

.insight-strip span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusbar {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  padding: 0 var(--space-md);
  border-top: 0.0625rem solid var(--line-soft);
  background: var(--bg-deep);
}

.statusbar-runtime {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  white-space: nowrap;
}

.statusbar-runtime .time-block {
  min-width: 0;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-xs);
}

.statusbar-runtime .time-block strong {
  font-size: 0.75rem;
}

.statusbar-runtime .time-block span {
  margin: 0;
  font-size: 0.625rem;
}

.statusbar-runtime .live-control {
  min-height: 1.8rem;
  gap: 0.4rem;
  padding: 0.22rem 0.45rem;
  border-color: var(--line-soft);
  background: transparent;
}

.statusbar-runtime .live-control strong,
.statusbar-runtime .live-control small {
  font-size: 0.625rem;
}

.statusbar-runtime .pause-icon {
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0;
}

.statusbar-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--primary-bright);
  font-size: 0.7rem;
  white-space: nowrap;
}

.statusbar-title svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.ticker {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 2rem, black calc(100% - 2rem), transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2.5rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  white-space: nowrap;
  animation: ticker-scroll 42s linear infinite;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.ticker-item::before {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--primary);
  content: "";
}

.ticker-item time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.toast {
  position: fixed;
  z-index: var(--z-toast);
  right: var(--space-md);
  bottom: 3.6rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg-deep);
  font-size: 0.75rem;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 47.51rem) {
  .app-shell.nav-collapsed { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .nav-collapsed .sidebar nav { padding-inline: var(--space-2xs); }
  .nav-collapsed .nav-item { min-height: 3.25rem; gap: 0; padding-inline: 0; }
  .nav-collapsed .nav-item span,
  .nav-collapsed .nav-item kbd,
  .nav-collapsed .nav-meta span { display: none; }
  .nav-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
  .nav-collapsed .nav-meta { padding-inline: 0; }
  .nav-collapsed .nav-item[aria-current="page"]::after { right: -0.25rem; }
}

@media (min-width: 86.01rem) and (max-width: 100rem) {
  .kpi {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    gap: var(--space-xs);
    padding-inline: 0.65rem;
  }
  .kpi-icon { width: 2.2rem; height: 2.2rem; }
  .kpi-spark { display: none; }
  .kpi-meta { max-width: 4.5rem; }
  .kpi-label {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.6875rem;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .kpi-value { font-size: 1.4rem; }
  .kpi-unit { white-space: nowrap; }
}

@media (max-width: 86rem) {
  .topbar { grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr); }
  .brand-copy span { display: none; }
  .kpi { grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--space-xs); }
  .kpi-icon { width: 2.2rem; height: 2.2rem; }
  .kpi-meta { display: none; }
  .panel { padding: 0.75rem 0.8rem; }
  .statusbar-runtime .time-block span { display: none; }
}

@media (min-width: 120rem) and (min-height: 60rem) {
  :root {
    font-size: clamp(1rem, min(0.833333vw, 1.48148vh), 2rem);
  }
}

@media (min-width: 68.76rem) and (max-height: 47.99rem) {
  body { overflow: hidden; }
  .app-shell {
    height: 100dvh;
    min-height: 0;
    grid-template-rows: 4rem minmax(0, 1fr) 2.25rem;
  }
  .dashboard-main {
    overflow: hidden;
    padding: var(--space-xs);
    scroll-padding-bottom: 0;
  }
  .dashboard-view { min-height: 0; gap: var(--space-xs); }
  .kpi-strip,
  .board { gap: var(--space-xs); }
  .kpi { min-height: 4.25rem; padding: var(--space-xs) var(--space-sm); }
  .panel { padding: var(--space-xs) var(--space-sm); }
  .panel-header { min-height: 1.5rem; margin-bottom: var(--space-2xs); }
  .panel-summary { margin-top: var(--space-2xs); }
  .statusbar { position: relative; bottom: auto; padding-inline: var(--space-sm); }
  .statusbar-title { font-size: 0.625rem; }
  .ticker-track { font-size: 0.625rem; }

  .dashboard-view[data-view="safety"] .legend { gap: var(--space-sm); }
  .dashboard-view[data-view="safety"] .kpi { min-height: 4.25rem; }
  .dashboard-view[data-view="safety"] .chart-stat-row { min-height: 1.5rem; gap: var(--space-sm); }
  .dashboard-view[data-view="safety"] .risk-stack { gap: var(--space-xs); }
  .dashboard-view[data-view="safety"] .risk-icon { width: 1.85rem; height: 1.85rem; }
  .dashboard-view[data-view="safety"] .risk-copy h3 strong { font-size: 0.95rem; }
  .dashboard-view[data-view="safety"] .risk-rate { font-size: 1.05rem; }
  .dashboard-view[data-view="safety"] .task-symbol { width: 2.15rem; height: 2.15rem; margin-bottom: var(--space-2xs); }
  .dashboard-view[data-view="safety"] .task-cell strong { font-size: 1.05rem; }
  .dashboard-view[data-view="safety"] .knowledge-governance-panel .bar-row { min-height: 1.5rem; }
  .dashboard-view[data-view="safety"] .mini-section .bar-row { min-height: 1.1rem; padding-block: 0.1rem; }

  .dashboard-view[data-view="overview"] .overview-board .status-list { gap: var(--space-2xs); }
  .dashboard-view[data-view="overview"] .overview-board .status-row { min-height: 1.4rem; padding-block: 0.15rem; }

  .dashboard-view[data-view="triage"] .symptom-distribution-panel .bar-list { gap: var(--space-2xs); }
  .dashboard-view[data-view="triage"] .symptom-distribution-panel .bar-row { min-height: 1.5rem; padding-block: 0.1rem; }

  .dashboard-view[data-view="conversion"] .sla-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-view[data-view="conversion"] .sla-summary-item:nth-child(3) {
    padding-inline-start: var(--space-sm);
    border-inline-start: 0.0625rem solid var(--line-soft);
  }
  .dashboard-view[data-view="conversion"] .sla-summary-item:nth-child(-n + 2) { padding-bottom: 0; }
  .dashboard-view[data-view="conversion"] .sla-summary-item:nth-child(n + 3) { padding-top: 0; border-top: 0; }
  .dashboard-view[data-view="conversion"] .sla-legend,
  .dashboard-view[data-view="conversion"] .sla-queue { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 68.76rem) and (max-height: 60rem) {
  .dashboard-view[data-view="conversion"] { gap: var(--space-xs); }
  .dashboard-view[data-view="conversion"] .kpi-strip,
  .dashboard-view[data-view="conversion"] .conversion-board,
  .dashboard-view[data-view="conversion"] .conversion-side-stack { gap: var(--space-xs); }
  .dashboard-view[data-view="conversion"] .conversion-board .panel { padding: 0.55rem 0.7rem; }
  .dashboard-view[data-view="conversion"] .conversion-board .panel-header { min-height: 1.5rem; margin-bottom: var(--space-2xs); }
  .dashboard-view[data-view="conversion"] .consult-efficiency { gap: var(--space-xs); }
  .dashboard-view[data-view="conversion"] .sla-summary { padding-block: var(--space-2xs); }
  .dashboard-view[data-view="conversion"] .sla-hourly { min-height: 6.5rem; }
  .dashboard-view[data-view="conversion"] .sla-hour-bars { min-height: 5rem; }
  .dashboard-view[data-view="conversion"] .sla-outcomes { gap: var(--space-2xs); }
  .dashboard-view[data-view="conversion"] .sla-queue { padding-top: var(--space-xs); }
}

@media (max-width: 68.75rem) {
  body { overflow: auto; }
  .app-shell {
    grid-template-columns: 4rem minmax(0, 1fr);
    grid-template-rows: 4.25rem auto 2.75rem;
    height: auto;
    min-height: 100dvh;
  }
  .topbar { grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr); }
  .brand-copy strong { font-size: 0.95rem; }
  .statusbar-runtime .live-control > span:nth-child(2) { display: none; }
  .sidebar { position: sticky; top: 4.25rem; height: calc(100dvh - 4.25rem); }
  .dashboard-main { overflow: visible; }
  .dashboard-view { height: auto; }
  .kpi-strip,
  .kpi-strip.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board,
  .board.three-rows { grid-template-rows: none; grid-auto-rows: minmax(15rem, auto); }
  .panel.span-3,
  .panel.span-4,
  .panel.span-5,
  .panel.span-6,
  .panel.span-7,
  .panel.span-8,
  .panel.span-9 { grid-column: span 6; }
  .panel.span-12 { grid-column: 1 / -1; }
  .panel.row-2 { grid-row: span 1; }
  .conversion-side-stack {
    grid-column: span 6;
    grid-template-rows: repeat(2, minmax(15rem, auto));
  }
  .statusbar { position: sticky; bottom: 0; }
}

@media (max-width: 47.5rem) {
  .app-shell {
    display: block;
    min-height: 100dvh;
    padding-bottom: 4.5rem;
  }
  .topbar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 4.25rem;
    padding: 0 var(--space-sm);
  }
  .brand-copy { display: none; }
  .brand-mark { width: 1.6rem; height: 1.6rem; flex-basis: 1.6rem; }
  .page-heading { justify-self: start; padding: 0; background: transparent; }
  .page-heading h1 { font-size: 1.05rem; }
  .page-kicker { display: none; }
  .live-control { min-width: 2.75rem; justify-content: center; padding: 0.4rem; }
  .pause-icon { display: none; }
  .sidebar {
    position: fixed;
    z-index: var(--z-sticky);
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 4.5rem;
    border-top: 0.0625rem solid var(--line);
    border-right: 0;
  }
  .sidebar nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    height: 100%;
    padding: 0.3rem;
  }
  .sidebar-toggle { display: none; }
  .nav-item { min-height: 0; gap: 0.15rem; padding: 0.3rem 0.1rem; }
  .nav-item[aria-current="page"]::after { top: -0.3rem; right: auto; width: 1.75rem; height: 0.1875rem; border-radius: 0 0 999px 999px; }
  .nav-item svg { width: 1.15rem; height: 1.15rem; }
  .nav-item span { font-size: 0.55rem; }
  .nav-item kbd,
  .nav-meta { display: none; }
  .dashboard-main { padding: var(--space-xs); }
  .kpi-strip,
  .kpi-strip.five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
  .kpi { min-height: 5rem; padding: 0.65rem; }
  .kpi-value { font-size: 1.3rem; }
  .board,
  .board.three-rows { display: flex; flex-direction: column; gap: var(--space-xs); }
  .conversion-side-stack { display: flex; flex-direction: column; gap: var(--space-xs); }
  .panel { min-height: 17rem; }
  .panel.compact { min-height: 12rem; }
  .service-cards { grid-template-columns: 1fr; height: auto; }
  .service-card { min-height: 5rem; }
  .funnel { grid-template-columns: 1fr; height: auto; }
  .funnel-step { min-height: 5rem; }
  .funnel-step:not(:last-child)::after { top: auto; right: 50%; bottom: -0.42rem; transform: translateX(50%) rotate(135deg); }
  .flow-rail,
  .flow-rail.compact {
    height: auto;
    padding-top: 0.5rem;
  }
  .flow-rail-track { display: none; }
  .flow-stages,
  .flow-rail.compact .flow-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }
  .flow-stage,
  .flow-rail.compact .flow-stage {
    min-height: 6rem;
    border: 0;
    background: transparent;
  }
  .flow-detail { grid-template-columns: 1fr; text-align: center; }
  .flow-detail p { white-space: normal; }
  .sankey {
    display: grid;
    height: auto;
    min-height: 0;
    gap: var(--space-xs);
    overflow: visible;
  }
  .sankey-stage {
    display: grid;
    gap: var(--space-xs);
  }
  .sankey-canvas { display: none; }
  .sankey-node,
  .sankey-node.source,
  .sankey-node.target,
  .sankey-node.target.avatar,
  .sankey-node.target.consult,
  .sankey-node.target.register {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 4rem;
    transform: none;
  }
  .sankey-node:active { transform: scale(0.99); }
  .sankey-caption {
    position: relative;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  .donut-group { grid-template-columns: 1fr; }
  .donut { width: 7rem; }
  .matrix { min-width: 40rem; }
  .matrix-scroll { overflow-x: auto; }
  .statusbar { display: none; }
  .toast { bottom: 5.25rem; }
}

@media (pointer: coarse) {
  .period-button,
  .live-control { min-height: 2.75rem; }
}

@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;
  }
}