:root {
  --navy-950: #061b33;
  --navy-900: #082344;
  --navy-800: #0b2e5f;
  --blue-600: #0b63e5;
  --blue-500: #1d6ff2;
  --cyan-50: #eef6ff;
  --green-600: #059669;
  --green-50: #ecfdf5;
  --amber-500: #f59e0b;
  --amber-50: #fffbeb;
  --red-600: #dc2626;
  --red-50: #fef2f2;
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;
  --shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
  --soft-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  --panel-gradient: linear-gradient(145deg, rgba(255,255,255,.98) 0%, #f9fcff 48%, #f3f8ff 100%);
  --panel-gradient-soft: linear-gradient(150deg, #ffffff 0%, #f8fbff 54%, #eef6ff 100%);
  --nav-control-gradient: linear-gradient(145deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.055) 54%, rgba(29,111,242,.14) 100%);
  --radius: 14px;
  --radius-sm: 10px;
  font-family: "Inter", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--slate-100); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--slate-900);
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}
button, select, input { font: inherit; }
button { cursor: pointer; }
a { color: var(--blue-600); text-decoration: none; }

.triage-app { min-height: 100vh; background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%); }
.dashboard-viewport { min-height: 100vh; }
.dashboard-shell {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 50%, #eaf3ff 100%);
}
.sidebar {
  position: sticky;
  grid-column: 1;
  grid-row: 2;
  top: 76px;
  height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  padding: 18px 10px;
  color: #eaf2ff;
  background:
    radial-gradient(circle at 16% 0%, rgba(29, 111, 242, .26), transparent 34%),
    radial-gradient(circle at 100% 38%, rgba(14, 165, 233, .13), transparent 30%),
    linear-gradient(180deg, #061b33 0%, #082344 48%, #06172b 100%);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.brand-block { padding: 0 10px 18px; }
.brand-title { font-size: 18px; font-weight: 900; letter-spacing: .02em; }
.brand-subtitle { margin-top: 2px; color: #9fb7d6; font-size: 12px; font-weight: 700; }
.side-nav { display: grid; gap: 8px; }
.side-nav__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 9px;
  color: #dce9ff;
  background: transparent;
  text-align: left;
  font-weight: 800;
  font-size: 14px;
}
.side-nav__item.is-active {
  color: #fff;
  background: linear-gradient(135deg, #0b63e5 0%, #1d6ff2 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px rgba(13, 99, 229, .28);
}
.side-nav__icon { font-size: 16px; line-height: 1; color: inherit; }
.sidebar-card {
  margin-top: auto;
  padding: 14px 12px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.105) 0%, rgba(255,255,255,.052) 52%, rgba(29,111,242,.12) 100%);
  color: #eaf2ff;
  display: grid;
  gap: 6px;
  font-size: 12px;
}
.sidebar-card--compact { margin-top: 10px; }
.sidebar-card strong { font-size: 13px; color: #fff; }
.settings-button {
  margin-top: 10px;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, .36);
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(0,0,0,.12));
  color: #fff;
  font-weight: 800;
}
.dashboard-main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(29,111,242,.08), transparent 28%),
    linear-gradient(160deg, #f9fcff 0%, #f4f8ff 42%, #eef5ff 100%);
}
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  color: #fff;
  background:
    radial-gradient(circle at 25% 0%, rgba(29,111,242,.32), transparent 32%),
    linear-gradient(100deg, #061b33 0%, #082344 56%, #06162a 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__title { min-width: 430px; }
.topbar__title h2 { margin: 0; font-size: 25px; line-height: 1.05; letter-spacing: -.04em; white-space: nowrap; }
.topbar__title p { margin: 5px 0 0; color: #d9e7fb; font-weight: 700; }
.topbar__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.search-box, .top-select, .top-pill, .system-health, .icon-button {
  height: 42px;
  border-radius: 9px;
  border: 1px solid rgba(205, 219, 238, .32);
  color: #f8fbff;
  background: var(--nav-control-gradient);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.search-box { display: flex; align-items: center; gap: 8px; min-width: 320px; padding: 0 13px; }
.search-box input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; font-weight: 700; }
.top-select { min-width: 160px; padding: 0 12px; color: #fff; }
.top-select option { color: var(--slate-900); }
.top-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; font-weight: 800; }
.top-pill__value { color: inherit; font: inherit; }
.system-health {
  min-width: 170px;
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  column-gap: 7px;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.15;
}
.system-health__text { min-width: 0; }
.system-health__label { display: block; }
.system-health strong { color: #22c55e; }
.system-health.is-risk strong { color: #fbbf24; }
.system-health .dot { width: 8px; height: 8px; border-radius: 99px; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.14); }
.system-health.is-risk .dot { background: var(--amber-500); box-shadow: 0 0 0 4px rgba(245,158,11,.16); }
.icon-button { width: 42px; display: grid; place-items: center; font-weight: 900; }
.dashboard-content {
  display: grid;
  grid-template-columns: minmax(780px, 1fr) 360px;
  gap: 14px;
  padding: 14px;
}
.workspace { display: grid; gap: 12px; min-width: 0; }
.page-title-row { display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.eyebrow { margin: 0 0 2px; color: var(--navy-800); font-weight: 900; letter-spacing: .04em; }
.page-title-row h1 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.runtime-note {
  padding: 7px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
  color: var(--navy-800);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.card {
  border: 1px solid #dce6f2;
  border-radius: var(--radius);
  background: var(--panel-gradient);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}
.runtime-card { padding: 16px 16px 18px; }
.scheduler-switcher,
.scheduler-bridge {
  padding: 14px;
  background:
    radial-gradient(circle at 98% 8%, rgba(11,99,229,.075), transparent 22%),
    var(--panel-gradient);
}
.switcher-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 12px;
}
.switcher-heading h3,
.bridge-copy h3 {
  margin: 0;
  color: var(--navy-900);
  font-size: 16px;
}
.switcher-heading p,
.bridge-copy p {
  margin: 4px 0 0;
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 800;
}
.switcher-count {
  min-width: 82px;
  padding: 7px 10px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
  text-align: center;
  box-shadow: 0 10px 20px rgba(11, 99, 229, .16);
}
.switcher-count strong { display: block; font-size: 19px; line-height: 1; }
.switcher-count span { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.program-card-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.program-card {
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 11px;
  border: 1px solid #d8e4f2;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.program-card.is-selected {
  border-color: rgba(11, 99, 229, .48);
  background: linear-gradient(180deg, #f2f7ff 0%, #ffffff 100%);
  box-shadow: 0 12px 24px rgba(11, 99, 229, .12), inset 4px 0 0 var(--blue-600);
}
.program-card strong {
  color: var(--navy-900);
  font-size: 14px;
  line-height: 1.25;
}
.program-card__task {
  color: var(--slate-700);
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.program-card__meta {
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 800;
}
.program-card__status {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.program-card__status--healthy { color: #047857; background: var(--green-50); }
.program-card__status--warning { color: #92400e; background: var(--amber-50); }
.program-card__status--critical { color: #991b1b; background: var(--red-50); }
.program-card__status--neutral { color: var(--slate-700); background: var(--slate-100); }
.scheduler-bridge {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(420px, 1.45fr) minmax(210px, .72fr);
  align-items: stretch;
  gap: 12px;
}
.bridge-copy {
  padding: 4px 2px;
}
.bridge-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.bridge-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 104px;
  padding: 11px 10px;
  border: 1px solid #d8e4f2;
  border-radius: 12px;
  background: linear-gradient(155deg, #ffffff 0%, #f8fbff 58%, #eef6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.bridge-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -12px;
  top: 37px;
  z-index: 2;
  color: var(--blue-600);
  font-weight: 900;
}
.bridge-step span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #fff;
  background: var(--navy-900);
  font-size: 12px;
  font-weight: 900;
}
.bridge-step strong { color: var(--navy-900); font-size: 13px; }
.bridge-step em { color: var(--slate-500); font-style: normal; font-size: 11px; font-weight: 800; line-height: 1.35; }
.bridge-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}
.bridge-meta div,
.scheduler-rail dl div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e1eaf6;
  background: linear-gradient(145deg, #f7fbff 0%, #edf4fc 100%);
}
.bridge-meta dt,
.scheduler-rail dt {
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.bridge-meta dd,
.scheduler-rail dd {
  margin: 0;
  color: var(--navy-900);
  font-size: 12px;
  font-weight: 900;
  word-break: break-word;
}
.card-header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.card-header h3, .card-subheader h3, .panel-title h3, .rail-title h3 { margin: 0; }
.card-header p { margin: 5px 0 0; color: var(--slate-500); font-size: 12px; font-weight: 800; }
.legend { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; color: var(--slate-700); font-size: 12px; font-weight: 800; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend-dot.healthy { background: var(--green-600); }
.legend-dot.warning { background: var(--amber-500); }
.legend-dot.critical { background: var(--red-600); }
.legend-line { width: 26px; height: 0; border-top: 2px solid var(--blue-600); }
.legend-line--dash { border-top-style: dashed; }
.flow-map {
  position: relative;
  min-height: 420px;
  margin-top: 12px;
  border: 1px solid #d6e2f1;
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 38%, rgba(11, 99, 229, 0.045), transparent 33%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(214,226,241,.54);
  overflow: hidden;
}
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flow-path {
  fill: none;
  stroke: #1d67d8;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .86;
  filter: drop-shadow(0 1px 1px rgba(7,88,216,.035));
}
.flow-path--dash { stroke-dasharray: 6 8; opacity: .74; }
.runtime-node {
  --node-accent: var(--blue-600);
  --node-border: #cbd8ea;
  --node-tint: #fbfdff;
  --node-glow: rgba(11, 99, 229, .07);
  position: absolute;
  z-index: 2;
  width: 128px;
  min-height: 132px;
  isolation: isolate;
  padding: 16px 10px 12px;
  border: 1px solid var(--node-border);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, var(--node-tint) 100%);
  box-shadow:
    0 13px 25px rgba(15, 23, 42, .055),
    0 8px 18px var(--node-glow),
    inset 0 1px 0 rgba(255,255,255,.94);
  overflow: hidden;
  text-align: center;
}
.runtime-node::before,
.runtime-node::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.runtime-node::before {
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 0;
  background: linear-gradient(90deg, var(--node-accent) 0%, rgba(255,255,255,.25) 100%);
}
.runtime-node::after {
  inset: 4px auto 0 0;
  width: 3px;
  z-index: 0;
  background: var(--node-accent);
  opacity: .16;
}
.runtime-node > * {
  position: relative;
  z-index: 1;
}
.runtime-node--intent { left: 2%; top: 54px; }
.runtime-node--planner { left: 16%; top: 54px; }
.runtime-node--retriever { left: 30%; top: 54px; }
.runtime-node--selector { left: 44%; top: 54px; }
.runtime-node--executor { left: 58%; top: 54px; }
.runtime-node--validator { left: 72%; top: 54px; }
.runtime-node--reflection { left: 79%; top: 212px; }
.runtime-node--memory { left: 49%; top: 238px; }
.runtime-node--composer { left: 31%; top: 238px; }
.runtime-node--healthy {
  --node-accent: var(--green-600);
  --node-border: #c7ddf3;
  --node-tint: #fbfdff;
  --node-glow: rgba(11, 99, 229, .055);
}
.runtime-node--warning {
  --node-accent: var(--amber-500);
  --node-border: #f3c56a;
  --node-tint: #fffaf0;
  --node-glow: rgba(245, 158, 11, .13);
}
.runtime-node--critical {
  --node-accent: var(--red-600);
  --node-border: #f0a1a1;
  --node-tint: #fff8f8;
  --node-glow: rgba(220, 38, 38, .14);
}
.runtime-node--neutral {
  --node-accent: var(--slate-500);
  --node-border: #d4deeb;
  --node-tint: #f8fafc;
  --node-glow: rgba(100, 116, 139, .09);
}
.runtime-node.is-highlighted {
  box-shadow:
    0 0 0 2px rgba(220, 38, 38, .16),
    0 16px 30px rgba(220, 38, 38, .14),
    0 8px 18px var(--node-glow),
    inset 0 1px 0 rgba(255,255,255,.94);
}
.node-badge {
  position: absolute;
  top: 10px; left: 10px;
  width: 23px; height: 23px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--navy-800);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(6, 27, 51, .18);
}
.node-title { min-height: 28px; padding-left: 26px; color: var(--navy-900); font-size: 12px; font-weight: 900; text-align: left; }
.node-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 10px auto 8px;
  border: 1px solid rgba(11, 99, 229, .16);
  border-radius: 10px;
  color: var(--blue-600);
  background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 10px rgba(11,99,229,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 6px 14px rgba(11,99,229,.08);
}
.node-metric { color: var(--slate-900); font-size: 18px; font-weight: 900; }
.node-metric.is-critical { color: var(--red-600); }
.node-sub { margin-top: 5px; color: var(--slate-700); font-size: 12px; font-weight: 700; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 99px; background: var(--slate-300); }
.status-dot--healthy { background: var(--green-600); }
.status-dot--warning { background: var(--amber-500); }
.status-dot--critical { background: var(--red-600); }
.status-dot--neutral { background: var(--slate-400); }
.panel-grid { display: grid; gap: 10px; }
.panel-grid--two { grid-template-columns: 1.25fr .9fr; }
.panel-grid--three { grid-template-columns: 1fr .8fr 1.12fr; }
.panel-title {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(90deg, var(--navy-950), var(--navy-900));
  font-size: 14px;
}
.panel-title h3 { font-size: 15px; letter-spacing: .01em; }
.panel-title a { margin-left: auto; color: #d7e8ff; font-size: 12px; font-weight: 900; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); }
.data-table th, .data-table td { padding: 10px 11px; border-bottom: 1px solid #e4ecf6; text-align: left; vertical-align: middle; }
.data-table th { color: var(--navy-900); background: linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%); font-size: 11px; font-weight: 900; }
.data-table td { color: var(--slate-700); font-weight: 700; }
.severity, .state-pill, .impact {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 6px;
  border-radius: 5px;
  font-size: 11px; font-weight: 900;
}
.severity--critical { color: var(--red-600); background: var(--red-50); border: 1px solid #fecaca; }
.severity--warning { color: #b45309; background: var(--amber-50); border: 1px solid #fde68a; }
.severity--info { color: var(--blue-600); background: #eff6ff; border: 1px solid #bfdbfe; }
.state-pill { color: #14804a; background: var(--green-50); border: 1px solid #bbf7d0; }
.state-pill--live { color: var(--red-600); background: var(--red-50); border-color: #fecaca; }
.impact--high { color: var(--red-600); }
.impact--medium { color: #d97706; }
.impact--low { color: var(--green-600); }
.table-link { display: block; padding: 8px 12px 12px; text-align: center; font-size: 12px; font-weight: 900; }
.spark { width: 82px; height: 20px; }
.spark polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark--red polyline { stroke: var(--red-600); }
.spark--amber polyline { stroke: var(--amber-500); }
.spark--green polyline { stroke: var(--green-600); }
.metric-panel {
  padding: 13px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(29,111,242,.07), transparent 36%),
    var(--panel-gradient-soft);
}
.card-subheader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-subheader h3 { color: var(--navy-900); font-size: 15px; }
.card-subheader a { font-size: 12px; font-weight: 900; }
.line-chart { width: 100%; height: 120px; }
.chart-grid line { stroke: #e5edf6; stroke-width: 1; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.chart-line--p99 { stroke: var(--red-600); }
.chart-line--p95 { stroke: var(--amber-500); }
.chart-line--p50 { stroke: var(--blue-600); }
.chart-legend { display: flex; gap: 12px; align-items: center; color: var(--slate-500); font-size: 12px; font-weight: 900; }
.chart-legend strong { margin-left: auto; color: var(--slate-700); }
.chart-legend .p99 { color: var(--red-600); }
.chart-legend .p95 { color: var(--amber-500); }
.chart-legend .p50 { color: var(--blue-600); }
.cost-layout { display: grid; grid-template-columns: 1fr 118px; gap: 14px; align-items: center; }
.small-label { display: block; color: var(--slate-500); font-size: 12px; font-weight: 900; }
.cost-panel strong { display: block; margin: 4px 0 8px; color: var(--navy-900); font-size: 24px; line-height: 1; }
.cost-panel em { color: var(--green-600); font-style: normal; font-size: 12px; font-weight: 900; }
.donut { width: 110px; height: 110px; border-radius: 999px; background: conic-gradient(var(--blue-600) 0 49%, var(--green-600) 49% 86%, #d8dee9 86% 100%); position: relative; }
.donut::after { content: ""; position: absolute; inset: 28px; border-radius: inherit; background: #fff; box-shadow: inset 0 0 0 1px #e5edf6; }
.health-bars { display: grid; gap: 7px; }
.health-row { display: grid; grid-template-columns: 116px 1fr 42px; gap: 8px; align-items: center; font-size: 11px; font-weight: 800; }
.bar { height: 7px; border-radius: 999px; background: linear-gradient(90deg, #e8edf5, #f5f8fc); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--green-600); }
.bar-fill--warning { background: var(--amber-500); }
.bar-fill--critical { background: var(--red-600); }
.insight-rail { display: grid; gap: 10px; align-content: start; }
.rail-card {
  padding: 14px;
  box-shadow: var(--soft-shadow);
  background:
    radial-gradient(circle at 100% 0%, rgba(11,99,229,.075), transparent 38%),
    var(--panel-gradient-soft);
}
.rail-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rail-title h3 { color: var(--navy-900); font-size: 15px; }
.rail-title a { font-size: 12px; font-weight: 900; }
.scheduler-rail dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.info-dot {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: 3px;
  border: 1px solid #b6c6dc;
  border-radius: 999px;
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 900;
  vertical-align: 1px;
}
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.summary-grid > div { min-height: 74px; padding: 11px; border: 1px solid #e0e8f3; border-radius: 10px; background: linear-gradient(145deg, #ffffff 0%, #f7fbff 56%, #eef6ff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.86); }
.summary-grid span, .summary-grid em { display: block; color: var(--slate-500); font-size: 12px; font-style: normal; font-weight: 900; }
.summary-grid strong { color: var(--navy-900); font-size: 23px; }
.summary-grid .risk-number { color: var(--red-600); font-size: 36px; line-height: 1; }
.summary-grid b { display: block; margin-top: 4px; color: var(--red-600); }
.summary-grid .down { color: var(--red-600); }
.failed-box { padding: 12px; border: 1px solid #dbe5f1; border-radius: 10px; background: linear-gradient(145deg, #ffffff 0%, #f8fbff 62%, #f1f7ff 100%); }
.failed-box strong { display: block; margin: 8px 0 10px; color: var(--navy-900); }
dt, dd { margin: 0; }
.failed-box dl { display: grid; grid-template-columns: 88px 1fr; gap: 6px 10px; color: var(--slate-600); font-size: 12px; }
.failed-box dt { font-weight: 900; }
.failed-box dd { font-weight: 700; }
.failed-box a { display: inline-block; margin-top: 10px; font-weight: 900; }
.ai-badge { color: var(--blue-600); border: 1px solid #bfdbfe; border-radius: 4px; padding: 0 4px; font-size: 11px; }
.root-list { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.root-list li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.root-list span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: var(--blue-600); font-weight: 900; }
.root-list strong { color: var(--slate-800); }
.root-list em { color: var(--slate-500); font-style: normal; font-weight: 900; }
.check-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid #e8eef7; color: var(--slate-700); font-size: 12px; font-weight: 800; }
.check-list li:last-child { border-bottom: 0; }
.check-list span { color: var(--green-600); font-weight: 900; }
.dashboard-error { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.error-card { max-width: 520px; padding: 24px; }
.error-card h1 { margin-top: 0; }

@media (min-width: 901px) {
  html,
  body {
    overflow-x: hidden;
  }

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

  .dashboard-viewport {
    --artboard-scale: 1;
    position: relative;
    margin: 0 auto;
    min-height: 0;
    overflow: visible;
  }

  .dashboard-shell {
    width: 1792px;
    min-height: 1024px;
    transform: scale(var(--artboard-scale));
    transform-origin: top left;
  }

  .topbar {
    min-height: 72px;
    padding: 14px 20px;
  }

  .topbar__title h2 {
    font-size: 24px;
  }

  .topbar__title p {
    margin-top: 4px;
  }

  .dashboard-content {
    grid-template-columns: minmax(820px, 1fr) 350px;
    gap: 12px;
    padding: 12px 14px 12px 14px;
  }

  .workspace,
  .insight-rail {
    gap: 9px;
  }

  .page-title-row {
    gap: 12px;
  }

  .page-title-row h1 {
    font-size: 20px;
  }

  .runtime-note {
    padding: 6px 10px;
  }

  .runtime-card {
    padding: 14px 14px 15px;
  }

  .card-header {
    gap: 12px;
  }

  .card-header p {
    margin-top: 4px;
    font-size: 11px;
  }

  .legend {
    gap: 10px 14px;
    font-size: 11px;
  }

  .flow-map {
    min-height: 308px;
    margin-top: 8px;
  }

  .runtime-node {
    width: 114px;
    min-height: 114px;
    padding: 12px 8px 8px;
    border-radius: 10px;
  }

  .runtime-node--intent { left: 2%; top: 42px; }
  .runtime-node--planner { left: 16%; top: 42px; }
  .runtime-node--retriever { left: 30%; top: 42px; }
  .runtime-node--selector { left: 44%; top: 42px; }
  .runtime-node--executor { left: 58%; top: 42px; }
  .runtime-node--validator { left: 72%; top: 42px; }
  .runtime-node--reflection { left: 79%; top: 165px; }
  .runtime-node--memory { left: 49%; top: 181px; }
  .runtime-node--composer { left: 31%; top: 181px; }

  .node-badge {
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .node-title {
    min-height: 22px;
    padding-left: 23px;
    font-size: 10px;
    line-height: 1.15;
  }

  .node-icon {
    width: 30px;
    height: 30px;
    margin: 5px auto 5px;
    border-radius: 9px;
    font-size: 21px;
  }

  .node-metric {
    font-size: 15px;
    line-height: 1.1;
  }

  .node-sub {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.15;
  }

  .panel-grid {
    gap: 9px;
  }

  .panel-title {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .panel-title h3,
  .card-subheader h3,
  .rail-title h3 {
    font-size: 14px;
  }

  .data-table {
    font-size: 11px;
  }

  .data-table th,
  .data-table td {
    padding: 5px 8px;
  }

  .metric-panel {
    min-height: 0;
    padding: 8px 11px;
  }

  .card-subheader {
    margin-bottom: 5px;
  }

  .line-chart {
    height: 96px;
    margin: -6px 0 -4px;
  }

  .chart-legend {
    gap: 10px;
    font-size: 11px;
    line-height: 1;
  }

  .cost-layout {
    grid-template-columns: minmax(0, 1fr) 94px;
    gap: 8px;
    min-height: 0;
  }

  .cost-panel strong {
    margin: 2px 0 5px;
    font-size: 21px;
  }

  .donut {
    width: 90px;
    height: 90px;
  }

  .donut::after {
    inset: 23px;
  }

  .health-bars {
    gap: 4px;
  }

  .health-row {
    grid-template-columns: 102px 1fr 38px;
    gap: 6px;
    font-size: 9.5px;
    line-height: 1.12;
  }

  .bar {
    height: 6px;
  }

  .rail-card {
    padding: 10px;
  }

  .rail-title {
    margin-bottom: 7px;
  }

  .rail-card--summary {
    padding: 10px;
  }

  .rail-card--summary .rail-title {
    margin-bottom: 8px;
  }

  .summary-grid {
    grid-template-columns: 1.12fr .88fr .88fr;
    gap: 8px;
  }

  .summary-tile {
    min-height: 52px;
    padding: 8px 9px;
    border-radius: 9px;
  }

  .summary-tile--score {
    grid-row: span 2;
    min-height: 112px;
  }

  .summary-tile--score .risk-number {
    margin-top: 8px;
  }

  .summary-grid span,
  .summary-grid em {
    font-size: 11px;
  }

  .summary-grid strong {
    font-size: 19px;
    line-height: 1.08;
  }

  .summary-grid .risk-number {
    font-size: 31px;
  }

  .failed-box {
    padding: 10px;
  }

  .failed-box strong {
    margin: 6px 0 8px;
  }

  .failed-box dl {
    grid-template-columns: 80px 1fr;
    gap: 5px 9px;
    font-size: 11px;
  }

  .failed-box a {
    margin-top: 8px;
  }

  .root-list {
    gap: 7px;
  }

  .root-list li {
    font-size: 11px;
  }

  .check-list li {
    padding: 7px 0;
    font-size: 11px;
  }

  .sidebar {
    padding-top: 14px;
  }

  .side-nav {
    gap: 6px;
  }

  .side-nav__item {
    padding: 10px;
  }
}

@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
  }

  .dashboard-viewport {
    min-height: 100vh;
  }

  .dashboard-shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .topbar {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 0;
    padding: 14px;
    gap: 12px;
  }
  .sidebar { grid-column: 1; grid-row: 2; position: static; height: auto; flex-direction: row; overflow-x: auto; padding: 10px; }
  .dashboard-main { grid-column: 1; grid-row: 3; }
  .brand-block, .sidebar-card, .settings-button { display: none; }
  .side-nav { display: flex; min-width: max-content; }
  .side-nav__item { width: auto; min-width: 118px; }
  .dashboard-content { grid-template-columns: 1fr; padding: 10px; }
  .page-title-row { align-items: flex-start; flex-direction: column; }
  .runtime-note { border-radius: 10px; }
  .card-header { flex-direction: column; }
  .legend { justify-content: flex-start; gap: 10px 12px; }
  .panel-grid { gap: 12px; }
  .panel-grid--two, .panel-grid--three, .insight-rail { grid-template-columns: 1fr; }
  .program-card-list { grid-template-columns: 1fr; }
  .scheduler-bridge { grid-template-columns: 1fr; }
  .bridge-steps { grid-template-columns: 1fr; }
  .bridge-step:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 18px;
    top: auto;
    bottom: -15px;
  }
  .metric-panel,
  .rail-card {
    padding: 14px;
    border-color: #d8e4f2;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
  }
  .card-subheader,
  .rail-title {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6eef8;
  }
  .card-subheader h3,
  .rail-title h3 {
    font-size: 16px;
    line-height: 1.35;
  }
  .card-subheader a,
  .rail-title a {
    white-space: nowrap;
  }
  .line-chart {
    height: 142px;
    margin: 2px 0 6px;
  }
  .cost-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
  }
  .cost-panel strong {
    font-size: 28px;
  }
  .donut {
    width: 104px;
    height: 104px;
  }
  .health-bars {
    gap: 9px;
  }
  .health-row {
    grid-template-columns: minmax(112px, 1fr) minmax(92px, 1.2fr) 44px;
    gap: 8px;
    font-size: 12px;
  }
  .summary-grid {
    gap: 10px;
  }
  .summary-grid > div {
    min-height: 94px;
    padding: 13px;
  }
  .failed-box {
    padding: 14px;
    border-color: #d8e4f2;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  }
  .failed-box dl {
    grid-template-columns: 94px 1fr;
    gap: 7px 10px;
  }
  .root-list,
  .check-list {
    gap: 8px;
  }
  .root-list li {
    padding: 2px 0;
  }
  .check-list li {
    padding: 11px 0;
  }
  .runtime-card { overflow: visible; padding: 12px; }
  .flow-map {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    overflow: visible;
  }
  .flow-lines { display: none; }
  .runtime-node {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 5px 10px;
    align-items: center;
    padding: 12px;
    text-align: left;
  }
  .node-badge { position: static; width: 24px; height: 24px; }
  .node-title { min-height: 0; padding-left: 0; font-size: 13px; }
  .node-icon { width: 34px; height: 34px; margin: 0; border-radius: 9px; font-size: 24px; }
  .node-metric { grid-column: 2 / 4; font-size: 18px; }
  .node-sub { grid-column: 2 / 4; margin-top: 0; }
  .topbar__title { min-width: 0; }
  .topbar__title h2 { font-size: 21px; white-space: normal; }
  .topbar__title p { font-size: 13px; }
  .topbar__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-content: stretch; width: 100%; }
  .topbar__controls > * { min-width: 0; }
  .search-box { grid-column: 1 / -1; min-width: 0; width: 100%; height: 38px; }
  .search-box input { min-width: 0; }
  .top-select, .top-pill, .system-health { min-width: 0; width: 100%; height: 36px; font-size: 12px; padding: 0 10px; }
  .system-health { grid-column: 1 / -1; height: 40px; }
  .icon-button { display: none; }

  .anomaly-table,
  .anomaly-table tbody,
  .cluster-table,
  .cluster-table tbody {
    display: block;
    width: 100%;
  }

  .anomaly-table thead,
  .cluster-table thead {
    display: none;
  }

  .anomaly-table tbody,
  .cluster-table tbody {
    padding: 10px;
    background: #f7faff;
  }

  .anomaly-table tr,
  .cluster-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #d9e4f2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 20px rgba(15, 23, 42, .05);
  }

  .anomaly-table tr:last-child,
  .cluster-table tr:last-child {
    margin-bottom: 0;
  }

  .anomaly-table td,
  .cluster-table td {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border-bottom: 0;
    color: var(--navy-900);
    font-size: 12px;
    line-height: 1.35;
  }

  .anomaly-table td::before,
  .cluster-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--slate-500);
    font-size: 11px;
    font-weight: 900;
  }

  .anomaly-table td[data-label="コンポーネント"],
  .anomaly-table td[data-label="イベント"] {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }

  .anomaly-table td[data-label="コンポーネント"] {
    font-size: 13px;
    font-weight: 900;
  }

  .anomaly-table td[data-label="イベント"] {
    color: var(--slate-900);
    font-size: 13px;
    font-weight: 900;
  }

  .cluster-table td[data-label="クラスタ"] {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    color: var(--slate-900);
    font-size: 13px;
    font-weight: 900;
  }

  .cluster-table td[data-label="トレンド"] {
    grid-column: 1 / -1;
  }

  .cluster-table .spark {
    width: 110px;
    height: 24px;
  }
}

@media (max-width: 520px) {
  .topbar__controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .search-box {
    grid-column: 1 / -1;
    height: 36px;
  }
  .top-select {
    grid-column: 1 / -1;
    height: 34px;
  }
  .top-pill,
  .system-health {
    grid-column: auto;
    height: 30px;
    padding: 0 7px;
    border-radius: 8px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }
  .top-pill__label,
  .system-health__label {
    display: none;
  }
  .system-health {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }
  .system-health__text {
    display: inline-flex;
    align-items: center;
  }
  .system-health strong {
    display: inline;
  }
  .system-health .dot {
    flex: 0 0 auto;
  }
}

.panel-title--navy { background: linear-gradient(90deg, var(--navy-950), var(--navy-900)); }