:root {
  --navy-950: #081326;
  --navy-900: #0b1830;
  --navy-850: #0f203d;
  --navy-800: #14294a;
  --blue-700: #155eef;
  --blue-600: #2878ff;
  --blue-500: #4094ff;
  --blue-100: #dfeaff;
  --blue-50: #f0f6ff;
  --cyan: #22c3d6;
  --green: #18a66a;
  --green-bg: #eafaf3;
  --orange: #df7b18;
  --orange-bg: #fff5e9;
  --red: #df3e50;
  --red-bg: #fff0f1;
  --purple: #7357d6;
  --purple-bg: #f1eeff;
  --ink: #172033;
  --text: #344054;
  --muted: #667085;
  --line: #e4e9f1;
  --line-strong: #d4dce8;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --page: #f2f5f9;
  --shadow: 0 10px 35px rgba(17, 40, 75, .08);
  --shadow-lg: 0 24px 70px rgba(8, 28, 60, .2);
  --radius: 16px;
  --sidebar: 258px;
}

* { box-sizing: border-box; }

html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }

body {
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--page);
  font-family: "Pretendard", "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

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

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--sidebar);
  padding: 24px 16px 18px;
  overflow-y: auto;
  color: #c9d5e8;
  background:
    radial-gradient(circle at 20% 0, rgba(38, 115, 255, .22), transparent 31%),
    linear-gradient(165deg, var(--navy-850), var(--navy-950) 58%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 20px;
}

.brand-mark {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  color: white;
  background: linear-gradient(145deg, #2478ff, #24bdd3);
  box-shadow: 0 8px 22px rgba(21, 94, 239, .32);
}

.brand-mark svg { width: 27px; height: 27px; fill: currentColor; stroke: none; }
.brand strong { display: block; color: white; font-family: "Segoe UI", sans-serif; font-size: 16px; letter-spacing: .04em; }
.brand small { display: block; margin-top: 2px; color: #91a4c0; font-size: 10px; letter-spacing: .03em; }

.scope-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 21px;
  padding: 8px 10px;
  border: 1px solid rgba(64,148,255,.28);
  border-radius: 10px;
  color: #b8d7ff;
  background: rgba(39, 112, 230, .1);
  font-size: 11px;
}

.scope-chip span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34,195,214,.13); }
.nav-section + .nav-section { margin-top: 18px; }
.nav-caption { padding: 0 13px 7px; color: #637895; font-size: 10px; font-weight: 700; letter-spacing: .12em; }

.nav-link {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  margin: 2px 0;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  color: #adbbcf;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: .18s ease;
}

.nav-link:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-link.active { color: white; background: linear-gradient(90deg, rgba(37,111,232,.35), rgba(36,189,211,.09)); box-shadow: inset 3px 0 #4aa0ff; }
.nav-link svg { width: 18px; height: 18px; }
.nav-link .nav-text { flex: 1; font-size: 13px; font-weight: 500; }
.nav-count { min-width: 22px; padding: 2px 6px; border-radius: 20px; color: #d5e5ff; background: rgba(76,145,255,.2); font: 600 10px "Segoe UI", sans-serif; text-align: center; }
.nav-tag { padding: 2px 6px; border-radius: 5px; color: #8da2c2; background: rgba(255,255,255,.06); font-size: 9px; font-weight: 700; }

.role-switcher {
  margin-top: auto;
  padding: 16px 12px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}

.role-switcher label { display: block; margin-bottom: 8px; color: #8194b2; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.select-wrap { position: relative; }
.select-wrap::after { content: "⌄"; position: absolute; top: 7px; right: 10px; color: #92a7c6; pointer-events: none; }
.role-switcher select { width: 100%; padding: 8px 27px 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: white; outline: none; appearance: none; background: #142641; font-size: 12px; }
.role-switcher option { color: var(--ink); background: white; }
.role-switcher p { min-height: 34px; margin: 9px 1px 0; color: #788ba7; font-size: 10px; line-height: 1.7; }

.reset-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 9px;
  padding: 8px;
  border: 0;
  color: #8194af;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}
.reset-demo:hover { color: #d3deed; }
.reset-demo svg { width: 14px; height: 14px; }
.sidebar-foot { padding-top: 4px; color: #455d7c; font: 500 9px "Segoe UI", sans-serif; text-align: center; }

.workspace { min-height: 100vh; margin-left: var(--sidebar); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid rgba(222,228,237,.92);
  background: rgba(255,255,255,.91);
  backdrop-filter: blur(18px);
}

.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-left h1 { margin: 2px 0 0; overflow: hidden; color: var(--ink); font-size: 19px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb { color: #8a96a8; font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .top-action {
  display: inline-grid;
  height: 39px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #526076;
  background: white;
  cursor: pointer;
}
.icon-button { width: 39px; padding: 0; }
.icon-button:hover, .top-action:hover { border-color: #bfd0e8; color: var(--blue-700); background: var(--blue-50); }
.menu-toggle { display: none; }
.top-action { display: flex; gap: 7px; padding: 0 12px; font-size: 11px; font-weight: 600; }
.top-action svg { width: 16px; height: 16px; }
.notice-button { position: relative; }
.notice-button i { position: absolute; top: -4px; right: -4px; display: grid; width: 17px; height: 17px; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: var(--red); font: normal 700 8px "Segoe UI", sans-serif; }

.top-search {
  display: flex;
  width: min(310px, 26vw);
  height: 39px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #8390a2;
  background: var(--surface-2);
}
.top-search:focus-within { border-color: #9bbdff; background: white; box-shadow: 0 0 0 3px rgba(21,94,239,.08); }
.top-search svg { width: 16px; height: 16px; }
.top-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.top-search kbd { padding: 2px 5px; border: 1px solid #d7dde6; border-radius: 4px; color: #9aa4b2; background: #fff; font: 9px "Segoe UI"; }
.user-chip { display: flex; align-items: center; gap: 9px; min-width: 137px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--line); }
.user-chip > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, #163665, #155eef); font-size: 12px; font-weight: 700; }
.user-chip strong, .user-chip small { display: block; white-space: nowrap; }
.user-chip strong { color: #2c374a; font-size: 11px; }
.user-chip small { margin-top: 1px; color: #9aa4b3; font: 9px "Segoe UI"; }

.view-root { width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px 32px 50px; outline: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-copy { min-width: 0; max-width: 760px; }
.eyebrow { display: block; margin-bottom: 6px; color: var(--blue-700); font: 700 10px "Segoe UI", "Malgun Gothic"; letter-spacing: .11em; text-transform: uppercase; }
.page-head h2 { margin: 0; color: var(--ink); font-size: 26px; line-height: 1.3; letter-spacing: -.035em; }
.page-head p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.button {
  display: inline-flex;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: .16s ease;
}
.button svg { width: 16px; height: 16px; }
.button.primary { color: white; background: linear-gradient(135deg, var(--blue-700), #277eff); box-shadow: 0 6px 15px rgba(21,94,239,.18); }
.button.primary:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(21,94,239,.25); }
.button.secondary { border-color: var(--line-strong); color: #3d4b60; background: white; }
.button.secondary:hover, .button.ghost:hover { border-color: #a9c1e6; color: var(--blue-700); background: var(--blue-50); }
.button.ghost { border-color: transparent; color: var(--muted); background: transparent; }
.button.soft { border-color: #cbdbf8; color: var(--blue-700); background: var(--blue-50); }
.button.danger { border-color: #ffd1d6; color: var(--red); background: var(--red-bg); }
.button.small { min-height: 31px; padding: 0 10px; font-size: 10px; }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 4px rgba(16, 38, 72, .018);
}
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 20px 15px; border-bottom: 1px solid #edf0f5; }
.card-header.no-line { border-bottom: 0; padding-bottom: 8px; }
.card-title { margin: 0; color: var(--ink); font-size: 15px; letter-spacing: -.02em; }
.card-desc { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.card-body { padding: 20px; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 32px;
  margin-bottom: 20px;
  padding: 30px 32px;
  overflow: hidden;
  border: 1px solid #213d67;
  border-radius: 20px;
  color: white;
  background:
    radial-gradient(circle at 80% -10%, rgba(56,165,255,.34), transparent 38%),
    radial-gradient(circle at 60% 130%, rgba(32,198,211,.2), transparent 35%),
    linear-gradient(125deg, #0d203e, #112e57 64%, #0e3762);
  box-shadow: 0 16px 35px rgba(13,32,62,.13);
}
.hero::after { content: ""; position: absolute; right: -80px; bottom: -110px; width: 290px; height: 290px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.018); }
.hero-copy, .hero-status { position: relative; z-index: 1; }
.hero .eyebrow { color: #7ed9ec; }
.hero h2 { max-width: 680px; margin: 0; font-size: 27px; line-height: 1.4; letter-spacing: -.04em; }
.hero h2 em { color: #65c8ff; font-style: normal; }
.hero p { max-width: 660px; margin: 12px 0 21px; color: #aabbd2; font-size: 12px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hero .button.primary { background: linear-gradient(135deg, #1a72f7, #2bc0d5); }
.hero .button.glass { border-color: rgba(255,255,255,.15); color: #dbe8f8; background: rgba(255,255,255,.07); }
.hero-status { align-self: center; padding: 19px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(4,17,36,.3); backdrop-filter: blur(8px); }
.status-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; color: #b7c7dc; font-size: 10px; }
.live { display: inline-flex; align-items: center; gap: 6px; color: #70e5b4; font-weight: 700; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: #55dc9e; box-shadow: 0 0 0 4px rgba(85,220,158,.1); }
.health-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.075); }
.health-row:first-of-type { border-top: 0; }
.health-row span { color: #9eb0c7; font-size: 11px; }
.health-row strong { color: white; font: 600 11px "Segoe UI", "Malgun Gothic"; }
.health-row small { grid-column: 1 / -1; color: #607897; font-size: 9px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric-card { position: relative; min-height: 132px; padding: 20px; overflow: hidden; }
.metric-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 16px; border-radius: 11px; }
.metric-icon svg { width: 19px; height: 19px; }
.metric-icon.blue { color: var(--blue-700); background: var(--blue-50); }
.metric-icon.green { color: var(--green); background: var(--green-bg); }
.metric-icon.orange { color: var(--orange); background: var(--orange-bg); }
.metric-icon.purple { color: var(--purple); background: var(--purple-bg); }
.metric-value { color: var(--ink); font: 700 25px "Segoe UI", "Malgun Gothic"; letter-spacing: -.025em; }
.metric-label { margin-top: 2px; color: var(--muted); font-size: 11px; }
.metric-delta { position: absolute; top: 20px; right: 18px; padding: 4px 7px; border-radius: 7px; color: var(--green); background: var(--green-bg); font: 700 9px "Segoe UI", "Malgun Gothic"; }

.simulation-control { margin-bottom: 14px; padding: 18px 20px 14px; }
.simulation-fields { display: grid; grid-template-columns: 1.25fr .75fr 1fr .62fr; gap: 10px; }
.simulation-fields label { display: grid; min-width: 0; gap: 6px; }
.simulation-fields label > span { color: #6e7b8f; font-size: 9px; font-weight: 600; }
.simulation-fields .select { width: 100%; }
.simulation-fields .input:disabled, .simulation-fields .select:disabled { color: #3d4d64; opacity: 1; background: #f7f9fc; }
.scenario-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #edf0f4; }
.scenario-row strong, .scenario-row small { display: block; }
.scenario-row strong { color: #344258; font-size: 10px; }
.scenario-row small { margin-top: 2px; color: #8b96a6; font-size: 9px; }
.scenario-pills { display: flex; gap: 5px; }
.scenario-pill { min-height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: #69778b; background: #fff; cursor: pointer; font-size: 9px; font-weight: 600; }
.scenario-pill:hover { border-color: #9cbcf0; color: var(--blue-700); }
.scenario-pill.active { border-color: #99baf0; color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 0 0 1px #c1d5f6; }
.scenario-pill:disabled { opacity: .48; cursor: not-allowed; }

.simulation-metrics { margin-bottom: 18px; }
.simulation-metric { min-height: 126px; }
.simulation-metric .metric-icon { margin-bottom: 12px; }
.simulation-metric .metric-value { font-size: 20px; }
.sim-detail { position: absolute; top: 20px; right: 18px; max-width: 120px; padding: 4px 7px; border-radius: 7px; color: #536986; background: #f0f4f9; font-size: 8px; font-weight: 600; text-align: right; }

.simulation-workbench { grid-template-columns: minmax(0,1.8fr) minmax(290px,.55fr); }
.simulation-table { min-width: 700px; }
.simulation-table td { transition: background .16s ease; }
.simulation-table tr.simulation-applied td { background: #f7fbff; }
.simulation-table tr.simulation-applied:hover td { background: #f1f7ff; }
.simulation-table tfoot td { padding: 14px; border-top: 2px solid #dce4ef; border-bottom: 0; background: #f8fafc; }
.sim-alt-select { width: 150px; min-width: 150px; }
.sim-candidate-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.sim-candidate-meta > small { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-result-cell strong, .sim-result-cell small { display: block; }
.sim-result-cell small { margin-top: 4px; font-size: 8px; }
.sim-toggle { display: inline-flex; cursor: pointer; }
.sim-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sim-toggle span { position: relative; width: 31px; height: 18px; border-radius: 20px; background: #dce3ec; transition: .16s ease; }
.sim-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(16,35,63,.2); transition: .16s ease; }
.sim-toggle input:checked + span { background: var(--blue-700); }
.sim-toggle input:checked + span::after { transform: translateX(13px); }
.sim-toggle input:disabled + span { opacity: .48; cursor: not-allowed; }
.delta-saving { color: var(--green) !important; }
.delta-cost { color: var(--red) !important; }
.saving-hero { padding: 3px 0 17px; border-bottom: 1px solid #e9edf3; text-align: center; }
.saving-hero span, .saving-hero strong, .saving-hero small { display: block; }
.saving-hero span { color: #718096; font-size: 9px; }
.saving-hero strong { margin: 7px 0 4px; font-size: 25px; letter-spacing: -.035em; }
.saving-hero small { color: #8592a5; font-size: 9px; }
.coverage { margin-top: 15px; padding: 12px; border-radius: 10px; background: #f5f8fc; }
.coverage > div { display: flex; align-items: center; justify-content: space-between; color: #67758a; font-size: 9px; }
.coverage > div strong { color: #34445d; }
.coverage > span { display: block; height: 5px; margin-top: 8px; overflow: hidden; border-radius: 10px; background: #dfe6ef; }
.coverage > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue-700),var(--cyan)); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 18px; }
.stack { display: grid; min-width: 0; gap: 18px; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 17px 20px 20px; }
.process-card { position: relative; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfe; cursor: pointer; transition: .17s ease; }
.process-card:hover { transform: translateY(-2px); border-color: #a8c4f3; box-shadow: 0 8px 22px rgba(25,65,120,.08); }
.process-no { display: flex; align-items: center; justify-content: space-between; color: #8c99aa; font: 700 9px "Segoe UI"; }
.process-no span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; }
.process-card:nth-child(1) .process-no span { color: var(--blue-700); background: var(--blue-50); }
.process-card:nth-child(2) .process-no span { color: var(--purple); background: var(--purple-bg); }
.process-card:nth-child(3) .process-no span { color: var(--green); background: var(--green-bg); }
.process-card h4 { margin: 13px 0 6px; color: var(--ink); font-size: 13px; }
.process-card p { min-height: 47px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.process-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; color: var(--blue-700); font-size: 10px; font-weight: 700; }
.process-foot svg { width: 14px; height: 14px; }

.task-list { padding: 5px 20px 12px; }
.task-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 13px 0; border-bottom: 1px solid #edf0f5; }
.task-item:last-child { border-bottom: 0; }
.task-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--blue-700); background: var(--blue-50); }
.task-icon svg { width: 16px; height: 16px; }
.task-item strong, .task-item small { display: block; }
.task-item strong { overflow: hidden; color: #303b4e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-item small { margin-top: 3px; color: #8a96a7; font-size: 9px; }

.scope-note { display: flex; min-width: 0; gap: 11px; padding: 16px 17px; border: 1px solid #cadcf9; border-radius: 13px; color: #385478; background: var(--blue-50); font-size: 11px; line-height: 1.65; }
.scope-note > svg { flex: 0 0 18px; margin-top: 1px; color: var(--blue-700); }
.scope-note > div { min-width: 0; overflow-wrap: anywhere; }
.scope-note strong { color: #24456e; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-field { position: relative; min-width: 240px; }
.search-field svg { position: absolute; top: 11px; left: 11px; width: 16px; height: 16px; color: #98a4b4; }
.input, .select, .textarea {
  width: 100%;
  min-height: 39px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  outline: 0;
  color: var(--ink);
  background: white;
  font-size: 11px;
}
.search-field .input { padding-left: 35px; }
.input:focus, .select:focus, .textarea:focus { border-color: #8eb4f7; box-shadow: 0 0 0 3px rgba(21,94,239,.08); }
.select { width: auto; min-width: 125px; appearance: none; background-image: linear-gradient(45deg,transparent 50%,#8793a3 50%),linear-gradient(135deg,#8793a3 50%,transparent 50%); background-position: calc(100% - 13px) 17px,calc(100% - 9px) 17px; background-size: 4px 4px; background-repeat: no-repeat; padding-right: 28px; }
.textarea { min-height: 78px; resize: vertical; }

.table-card { overflow: hidden; }
.table-scroll { width: 100%; max-width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: 11px 14px; border-bottom: 1px solid var(--line); color: #7b8799; background: #f8fafc; font-size: 10px; font-weight: 600; text-align: left; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid #edf0f5; color: #455267; font-size: 11px; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #fbfdff; }
.data-table td strong { color: #253146; font-weight: 600; }
.data-table td small { display: block; margin-top: 2px; color: #96a0ae; font-size: 9px; }
.code { color: #244f88; font: 600 10px "Segoe UI", monospace; letter-spacing: .02em; }
.money { color: #263752; font: 600 11px "Segoe UI", "Malgun Gothic"; text-align: right; }
.align-right { text-align: right !important; }
.empty { padding: 52px 20px !important; color: #8c98a8 !important; text-align: center !important; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; line-height: 1; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.blue { color: #175fce; background: #e9f1ff; }
.badge.green { color: #118052; background: #e9f9f1; }
.badge.orange { color: #b75d0b; background: #fff1df; }
.badge.red { color: #c63545; background: #ffebed; }
.badge.gray { color: #6f7a8b; background: #eef1f5; }
.badge.purple { color: #634ac2; background: #eeeaff; }
.badge.cyan { color: #057e91; background: #e4f9fb; }
.plain-badge { display: inline-flex; padding: 4px 7px; border-radius: 6px; color: #526681; background: #edf2f8; font-size: 9px; font-weight: 600; }
.condition-list { display: flex; max-width: 310px; gap: 4px; flex-wrap: wrap; }
.condition { padding: 3px 6px; border: 1px solid #dfe6ef; border-radius: 5px; color: #5a6b82; background: #f9fafc; font-size: 8px; }
.relation { display: flex; align-items: center; gap: 6px; }
.relation svg { width: 13px; height: 13px; color: var(--blue-600); }

.pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-top: 1px solid var(--line); color: #8a95a5; font-size: 9px; }
.page-buttons { display: flex; gap: 4px; }
.page-buttons button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: white; cursor: pointer; }
.page-buttons button.active { border-color: var(--blue-700); color: white; background: var(--blue-700); }

.group-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.group-card { padding: 18px; }
.group-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.group-code { color: #7f8b9d; font: 700 9px "Segoe UI"; letter-spacing: .08em; }
.group-card h3 { margin: 4px 0 2px; color: var(--ink); font-size: 14px; }
.group-card > p { margin: 0 0 15px; color: #8792a3; font-size: 9px; }
.group-arrow { display: flex; align-items: center; gap: 9px; margin: 13px 0; color: #9aa5b4; font-size: 9px; }
.group-arrow::before, .group-arrow::after { content: ""; height: 1px; flex: 1; background: #e6ebf1; }
.alternative-list { display: grid; gap: 7px; }
.alternative-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid #e4e9f0; border-radius: 9px; background: #fafbfd; }
.alternative-item strong { display: block; color: #31405a; font-size: 10px; }
.alternative-item span { color: #8a96a8; font-size: 8px; }
.group-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0f4; }

.upload-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.upload-card { position: relative; padding: 20px; overflow: hidden; }
.upload-card::after { content: attr(data-step); position: absolute; top: 10px; right: 15px; color: #eef2f7; font: 700 48px "Segoe UI"; pointer-events: none; }
.upload-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 15px; border-radius: 12px; color: var(--blue-700); background: var(--blue-50); }
.upload-card:nth-child(2) .upload-icon { color: var(--cyan); background: #e8fafc; }
.upload-card:nth-child(3) .upload-icon { color: var(--purple); background: var(--purple-bg); }
.upload-card h3 { position: relative; z-index: 1; margin: 0; color: var(--ink); font-size: 14px; }
.upload-card p { min-height: 51px; margin: 8px 0 14px; color: var(--muted); font-size: 10px; }
.upload-actions { display: flex; gap: 6px; }
.file-label input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.upload-result { display: none; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 10px; border-radius: 8px; color: #14794f; background: var(--green-bg); font-size: 9px; }
.upload-result.show { display: flex; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-field { display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: #47566c; font-size: 10px; font-weight: 600; }
.required { color: var(--red); }
.field-help { color: #8e99a8; font-size: 9px; }

.detail-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 18px; }
.bom-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.bom-title { display: flex; align-items: center; gap: 11px; }
.bom-title > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--blue-700); background: var(--blue-50); }
.bom-title h3 { margin: 0; color: var(--ink); font-size: 14px; }
.bom-title p { margin: 3px 0 0; color: #8793a4; font-size: 9px; }
.price-note { display: flex; align-items: center; gap: 6px; color: #738198; font-size: 9px; }
.price-note svg { width: 13px; height: 13px; color: var(--green); }
.summary-list { display: grid; gap: 0; }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #edf0f4; font-size: 11px; }
.summary-row:last-child { border-bottom: 0; }
.summary-row span { color: #7e899a; }
.summary-row strong { color: var(--ink); }
.summary-row.total { margin-top: 4px; padding-top: 16px; }
.summary-row.total strong { color: var(--blue-700); font: 700 18px "Segoe UI", "Malgun Gothic"; }
.saving { color: var(--green) !important; }
.candidate-list { display: grid; gap: 8px; }
.candidate { display: grid; grid-template-columns: 17px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.candidate:hover { border-color: #aac2e8; background: #fbfdff; }
.candidate.selected { border-color: #80adf7; background: var(--blue-50); box-shadow: inset 0 0 0 1px #80adf7; }
.candidate input { accent-color: var(--blue-700); }
.candidate strong, .candidate small { display: block; }
.candidate strong { color: #2d3c52; font-size: 10px; }
.candidate small { margin-top: 2px; color: #8b96a7; font-size: 8px; }

.stepper { display: grid; grid-template-columns: repeat(4,1fr); padding: 4px 8px 22px; }
.step { position: relative; text-align: center; }
.step::after { content: ""; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px; background: #e1e7ef; }
.step:last-child::after { display: none; }
.step-dot { position: relative; z-index: 1; display: grid; width: 33px; height: 33px; margin: 0 auto 8px; place-items: center; border: 2px solid #dce3ec; border-radius: 50%; color: #9aa5b4; background: white; font: 700 10px "Segoe UI"; }
.step.done::after, .step.active::after { background: #85aef1; }
.step.done .step-dot { border-color: var(--green); color: white; background: var(--green); }
.step.active .step-dot { border-color: var(--blue-700); color: var(--blue-700); background: var(--blue-50); box-shadow: 0 0 0 5px rgba(21,94,239,.08); }
.step strong { display: block; color: #3c485b; font-size: 10px; }
.step small { display: block; margin-top: 2px; color: #96a0ae; font-size: 8px; }

.approval-list { display: grid; gap: 11px; }
.approval-card { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(250px,.8fr) auto; gap: 18px; align-items: center; padding: 17px 18px; }
.approval-card h3 { margin: 4px 0 5px; color: var(--ink); font-size: 13px; }
.approval-card p { margin: 0; color: #8792a2; font-size: 9px; }
.mini-progress { display: flex; align-items: center; }
.mini-progress span { position: relative; display: block; flex: 1; height: 4px; background: #e7ecf2; }
.mini-progress span::before { content: ""; position: absolute; top: -3px; left: 0; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #d3dbe6; box-shadow: 0 0 0 1px #d3dbe6; }
.mini-progress span.done { background: #74a1ec; }
.mini-progress span.done::before { background: var(--blue-700); box-shadow: 0 0 0 1px var(--blue-700); }
.mini-progress-labels { display: flex; justify-content: space-between; margin-top: 8px; color: #8c98a8; font-size: 8px; }

.timeline { position: relative; padding-left: 29px; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 8px; left: 8px; width: 1px; background: #dfe5ed; }
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; top: 5px; left: -25px; width: 9px; height: 9px; border: 3px solid white; border-radius: 50%; background: #97a4b5; box-shadow: 0 0 0 1px #ccd5e1; }
.timeline-item.done::before { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.timeline-item.current::before { background: var(--blue-700); box-shadow: 0 0 0 3px #dbe8ff; }
.timeline-item h4 { margin: 0; color: #344157; font-size: 11px; }
.timeline-item p { margin: 3px 0 0; color: #8b96a5; font-size: 9px; }

.roadmap-intro { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 18px; margin-bottom: 18px; }
.coverage-card { display: flex; align-items: center; gap: 22px; padding: 23px; color: white; background: linear-gradient(135deg, #102a51, #155eef); }
.coverage-ring { display: grid; flex: 0 0 94px; width: 94px; height: 94px; place-items: center; border-radius: 50%; background: conic-gradient(#65d6e4 0 70%, rgba(255,255,255,.16) 70%); }
.coverage-ring::before { content: ""; position: absolute; width: 73px; height: 73px; border-radius: 50%; background: #174680; }
.coverage-ring strong { position: relative; z-index: 1; font: 700 21px "Segoe UI"; }
.coverage-card h3 { margin: 0; font-size: 17px; }
.coverage-card p { margin: 7px 0 0; color: #bfd0e7; font-size: 10px; }
.principle-card { padding: 22px; }
.principle-card h3 { margin: 0 0 13px; color: var(--ink); font-size: 14px; }
.principle-list { display: grid; gap: 8px; }
.principle { display: flex; gap: 8px; color: #637186; font-size: 10px; }
.principle svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--green); }

.roadmap { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.phase-card { position: relative; min-height: 310px; padding: 20px; overflow: hidden; }
.phase-card.current { border-color: #83acf1; box-shadow: 0 12px 30px rgba(21,94,239,.1); }
.phase-card.current::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,var(--blue-700),var(--cyan)); }
.phase-head { display: flex; align-items: center; justify-content: space-between; }
.phase-no { color: var(--blue-700); font: 700 10px "Segoe UI"; letter-spacing: .1em; }
.phase-period { color: #919cab; font: 500 9px "Segoe UI"; }
.phase-card h3 { margin: 15px 0 6px; color: var(--ink); font-size: 15px; }
.phase-card > p { min-height: 48px; margin: 0; color: var(--muted); font-size: 10px; }
.phase-items { display: grid; gap: 8px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #e9edf2; }
.phase-item { display: flex; gap: 7px; color: #536177; font-size: 10px; }
.phase-item svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--green); }
.phase-card:not(.current) .phase-item svg { color: #90a0b5; }
.gate { margin-top: 16px; padding: 9px 10px; border-radius: 8px; color: #627188; background: #f3f6fa; font-size: 9px; }
.gate strong { color: #3b4a61; }

.integration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.integration-card { padding: 20px; }
.integration-icon { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: 14px; border-radius: 11px; color: var(--blue-700); background: var(--blue-50); }
.integration-card h3 { margin: 0; color: var(--ink); font-size: 14px; }
.integration-card > p { min-height: 50px; margin: 8px 0 15px; color: var(--muted); font-size: 10px; }
.spec-list { display: grid; gap: 8px; padding-top: 13px; border-top: 1px solid #e9edf2; }
.spec-row { display: flex; justify-content: space-between; gap: 12px; color: #7d899a; font-size: 9px; }
.spec-row strong { color: #435168; text-align: right; }

/* Existing #bom workbench restored for the material-cost simulation route. */
.simulation-mode { color: var(--text); background: var(--page); }
.simulation-mode .sidebar {
  background:
    radial-gradient(circle at 20% 0, rgba(38,115,255,.22), transparent 31%),
    linear-gradient(165deg, var(--navy-850), var(--navy-950) 58%);
}
.simulation-mode .scope-chip { border-color: rgba(64,148,255,.28); color: #b8d7ff; background: rgba(39,112,230,.1); }
.simulation-mode .workspace { background: var(--page); }
.simulation-mode .topbar { border-color: var(--line); background: rgba(255,255,255,.94); }
.simulation-mode .topbar-left h1 { color: var(--ink); }
.simulation-mode .breadcrumb { color: #8a96a8; }
.simulation-mode .top-search { border-color: var(--line); color: #7f8a9b; background: #f8fafc; }
.simulation-mode .top-search input { color: var(--text); }
.simulation-mode .top-search kbd { border-color: #dfe5ed; color: #8b95a4; background: white; }
.simulation-mode .top-action, .simulation-mode .icon-button { border-color: var(--line); color: #526176; background: white; }
.simulation-mode .user-chip { border-color: var(--line); }
.simulation-mode .user-chip strong { color: var(--ink); }
.simulation-mode .view-root { max-width: none; padding: 25px 24px 42px; }
.simulation-mode .button.secondary { border-color: var(--line-strong); color: #3d4b60; background: white; }
.simulation-mode .button.secondary:hover, .simulation-mode .button.ghost:hover { border-color: #a9c1e6; color: var(--blue-700); background: var(--blue-50); }
.simulation-mode .button.primary { background: linear-gradient(135deg,var(--blue-700),#277eff); box-shadow: 0 6px 15px rgba(21,94,239,.18); }
.simulation-mode .button.primary:hover { background: linear-gradient(135deg,#0f55dd,#2478ff); box-shadow: 0 9px 20px rgba(21,94,239,.25); }
.simulation-mode .button:disabled { color: inherit; background: #dce4ef; }

.legacy-sim-page { min-width: 0; color: #d9dde4; }
.legacy-sim-page .good { color: #19d76e !important; }
.legacy-sim-page .bad { color: #ff5364 !important; }
.legacy-sim-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.legacy-sim-head > div:first-child > span { color: #8991aa; font-size: 10px; }
.legacy-sim-head h2 { margin: 5px 0 3px; color: #fff; font-size: 28px; line-height: 1.25; letter-spacing: -.035em; }
.legacy-sim-head p { margin: 0; color: #9299a6; font-size: 11px; }
.legacy-head-actions { display: flex; gap: 8px; }
.legacy-lock-note { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 11px 13px; border: 1px solid #484357; border-radius: 8px; color: #c9c5da; background: #18151d; font-size: 10px; }
.legacy-lock-note svg { color: #b8a6e7; }
.legacy-lock-note strong, .legacy-lock-note span { display: block; }
.legacy-lock-note span { margin-top: 2px; color: #8f899b; }

.legacy-filter-bar { display: grid; grid-template-columns: 1.1fr .9fr 1fr 34px 1.1fr auto; gap: 9px; align-items: end; padding: 14px; border: 1px solid #2a2e34; border-radius: 8px; background: #111315; }
.legacy-filter-bar label { display: grid; min-width: 0; gap: 5px; }
.legacy-filter-bar label > span { color: #9ba2ad; font-size: 8px; }
.legacy-filter-bar select { width: 100%; height: 36px; padding: 0 30px 0 10px; overflow: hidden; border: 1px solid #383d45; border-radius: 6px; outline: 0; color: #f1f3f5; appearance: none; background: #141619 linear-gradient(45deg,transparent 50%,#9ca3af 50%) calc(100% - 13px) 16px/5px 5px no-repeat; font-size: 10px; text-overflow: ellipsis; }
.legacy-filter-bar select:focus { border-color: #6571e0; }
.legacy-swap { display: grid; width: 30px; height: 30px; margin-bottom: 3px; place-items: center; border: 1px solid #373d48; border-radius: 50%; color: #7180ff; background: #14171b; }
.legacy-swap svg { width: 16px; height: 16px; }

.legacy-basis { display: grid; grid-template-columns: .8fr 1fr 1fr 1fr 1.35fr; margin: 10px 0 12px; overflow: hidden; border: 1px solid #292d33; border-radius: 8px; background: #101214; }
.legacy-basis > div { min-width: 0; padding: 10px 12px; border-right: 1px solid #292d33; }
.legacy-basis > div:last-child { border-right: 0; }
.legacy-basis span, .legacy-basis strong, .legacy-basis small { display: block; }
.legacy-basis span { color: #777f8c; font-size: 8px; }
.legacy-basis strong { margin-top: 3px; overflow: hidden; color: #edf0f5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.legacy-basis small { color: #747c89; font-size: 7px; }
.legacy-basis .rule { background: #102319; }
.legacy-basis .rule strong { color: #56e391; }

.legacy-workbench { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 12px; align-items: start; }
.legacy-compare-area { display: grid; min-width: 0; gap: 10px; }
.legacy-compare-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; min-width: 0; }
.legacy-bom-card, .legacy-change-summary, .legacy-sim-rail { min-width: 0; border: 1px solid #292d33; border-radius: 8px; background: #101214; }
.legacy-bom-card { overflow: hidden; }
.legacy-bom-card > header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid #2a2e34; }
.legacy-bom-card > header span { display: block; color: #697287; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.legacy-bom-card > header h3 { margin: 3px 0 0; color: #fff; font-size: 14px; }
.legacy-bom-card dl { display: flex; gap: 14px; margin: 0; }
.legacy-bom-card dl div { text-align: right; }
.legacy-bom-card dt { color: #727a87; font-size: 7px; }
.legacy-bom-card dd { margin: 2px 0 0; color: #fff; font-size: 9px; font-weight: 700; }
.legacy-table-wrap { width: 100%; max-height: 470px; overflow: auto; scrollbar-color: #3c414a #111315; scrollbar-width: thin; }
.legacy-bom-table { width: 100%; min-width: 500px; border-collapse: collapse; table-layout: fixed; }
.legacy-bom-table th { padding: 8px 7px; color: #7f8793; background: #0d0f11; font-size: 7px; font-weight: 500; text-align: left; }
.legacy-bom-table td { height: 49px; padding: 7px; border-top: 1px solid #272b31; color: #dfe2e7; font-size: 8px; vertical-align: middle; }
.legacy-bom-table tbody tr { cursor: pointer; }
.legacy-bom-table tbody tr:hover td { background: #151820; }
.legacy-bom-table tbody tr.active td { background: #191c2b; }
.legacy-bom-table th:nth-child(1), .legacy-bom-table td:nth-child(1) { width: 35px; }
.legacy-bom-table th:nth-child(4), .legacy-bom-table td:nth-child(4) { width: 54px; }
.legacy-bom-table th:nth-child(5), .legacy-bom-table td:nth-child(5), .legacy-bom-table th:nth-child(6), .legacy-bom-table td:nth-child(6) { width: 74px; }
.legacy-bom-table td button { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.legacy-bom-table td button span, .legacy-bom-table td button strong, .legacy-bom-table td button small, .legacy-bom-table td:nth-child(3) small, .legacy-bom-table td:nth-child(3) strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legacy-bom-table td button span { color: #c8d1ff; font-size: 7px; }
.legacy-bom-table td button strong { margin-top: 2px; color: #fff; font-size: 8px; }
.legacy-bom-table td button small { margin-top: 2px; color: #6ec590; font-size: 6px; }
.legacy-bom-table td:nth-child(3) small { color: #747c89; font-size: 6px; }
.legacy-bom-table td:nth-child(3) strong { margin-top: 2px; color: #ccd2dc; font-size: 7px; }
.legacy-bom-table .num { text-align: right; white-space: nowrap; }
.legacy-bom-table tfoot td { height: 38px; border-top: 1px solid #3b4149; color: #fff; background: #0d0f11; font-weight: 700; text-align: right; }

.legacy-change-summary { overflow: hidden; }
.legacy-change-summary > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #2a2e34; }
.legacy-change-summary > header span { color: #6f7785; font-size: 7px; letter-spacing: .08em; }
.legacy-change-summary > header h3 { margin: 2px 0 0; color: #fff; font-size: 12px; }
.legacy-change-summary > header h3 small { color: #7c8490; font-size: 8px; font-weight: 400; }
.legacy-summary-chips { display: grid; grid-template-columns: repeat(6,1fr); border-bottom: 1px solid #2a2e34; }
.legacy-summary-chips > span { padding: 8px 5px; color: #888f9b; font-size: 7px; text-align: center; }
.legacy-summary-chips strong { margin-left: 4px; color: #fff; }
.legacy-summary-table-wrap { overflow: auto; }
.legacy-summary-table-wrap table { width: 100%; min-width: 700px; border-collapse: collapse; }
.legacy-summary-table-wrap th, .legacy-summary-table-wrap td { padding: 7px 9px; border-top: 1px solid #25292f; color: #c6cbd3; font-size: 7px; text-align: center; }
.legacy-summary-table-wrap th { border-top: 0; color: #858c98; background: #0d0f11; font-weight: 500; }
.legacy-summary-table-wrap tfoot td { color: #fff; background: #0d0f11; font-weight: 700; }

.legacy-sim-rail { max-height: 774px; overflow-y: auto; scrollbar-color: #3c414a #111315; scrollbar-width: thin; }
.legacy-sim-rail > section { padding: 13px; border-bottom: 1px solid #292d33; }
.legacy-sim-rail > section:last-child { border-bottom: 0; }
.legacy-rail-title { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.legacy-rail-title > span { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: white; background: #6470d8; font-size: 8px; font-weight: 700; }
.legacy-rail-title h3 { margin: 0; color: #f2f4f7; font-size: 12px; }
.legacy-rail-search { display: flex; height: 35px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #353941; border-radius: 6px; background: #0d0f11; }
.legacy-rail-search svg { width: 14px; color: #717987; }
.legacy-rail-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #e5e8ed; background: transparent; font-size: 9px; }
.legacy-material-list { display: grid; max-height: 200px; margin-top: 8px; overflow-y: auto; border: 1px solid #292d33; border-radius: 6px; }
.legacy-material-list button { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 0; border-bottom: 1px solid #292d33; color: #cbd0d8; background: #111315; cursor: pointer; text-align: left; }
.legacy-material-list button:last-child { border-bottom: 0; }
.legacy-material-list button:hover, .legacy-material-list button.active { color: #fff; background: #191c29; box-shadow: inset 2px 0 #6571e0; }
.legacy-material-list strong, .legacy-material-list small { display: block; }
.legacy-material-list strong { font-size: 8px; }
.legacy-material-list small { margin-top: 2px; color: #6f7784; font-size: 6px; }
.legacy-material-list em { color: #9299a5; font-size: 7px; font-style: normal; white-space: nowrap; }
.legacy-selected-material { padding: 10px; border: 1px solid #2d3138; border-radius: 6px; background: #0d0f11; }
.legacy-selected-material span, .legacy-selected-material strong, .legacy-selected-material small { display: block; }
.legacy-selected-material span { color: #6f7784; font-size: 7px; }
.legacy-selected-material strong { margin-top: 5px; overflow: hidden; color: #f0f2f5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.legacy-selected-material small { margin-top: 4px; color: #747c89; font-size: 7px; }
.legacy-eligibility { display: flex; justify-content: space-between; margin: 7px 0; color: #858c98; font-size: 7px; }
.legacy-candidate-list { display: grid; gap: 6px; margin-bottom: 8px; }
.legacy-candidate-list label { display: grid; grid-template-columns: 13px minmax(0,1fr) auto; gap: 7px; align-items: center; padding: 9px; border: 1px solid #30343b; border-radius: 6px; background: #111315; cursor: pointer; }
.legacy-candidate-list label.active { border-color: #6875e1; background: #191d2c; box-shadow: inset 0 0 0 1px #6875e1; }
.legacy-candidate-list input { accent-color: #6875e1; }
.legacy-candidate-list span strong, .legacy-candidate-list span small, .legacy-candidate-list em strong, .legacy-candidate-list em small { display: block; }
.legacy-candidate-list span strong { color: #e8ebf0; font-size: 7px; }
.legacy-candidate-list span small { margin-top: 2px; color: #717987; font-size: 6px; }
.legacy-candidate-list em { font-style: normal; text-align: right; }
.legacy-candidate-list em strong { color: #fff; font-size: 8px; }
.legacy-candidate-list em small { margin-top: 2px; color: #858c98; font-size: 6px; }
.legacy-empty { padding: 16px 8px; color: #6f7784; font-size: 8px; text-align: center; }
.legacy-result-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.legacy-result-metrics > div { padding: 9px 5px; border: 1px solid #292d33; border-radius: 6px; background: #0d0f11; text-align: center; }
.legacy-result-metrics span, .legacy-result-metrics strong, .legacy-result-metrics small { display: block; }
.legacy-result-metrics span { color: #727a87; font-size: 6px; }
.legacy-result-metrics strong { margin-top: 5px; color: #fff; font-size: 10px; }
.legacy-result-metrics small { margin-top: 2px; color: #747c89; font-size: 6px; }
.legacy-coverage { margin-top: 10px; padding: 9px; border-radius: 6px; background: #0d0f11; }
.legacy-coverage > div { display: flex; justify-content: space-between; color: #8b929e; font-size: 7px; }
.legacy-coverage > span { display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 5px; background: #242830; }
.legacy-coverage > span i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6571e0,#21c3d3); }
.legacy-approval-note { display: block; margin-top: 7px; color: #747c89; font-size: 7px; text-align: center; }

/* BOM workbench uses the same light enterprise system as the rest of the demo. */
.simulation-mode .legacy-sim-page { color: var(--text); }
.simulation-mode .legacy-sim-page .good { color: #0e9f65 !important; }
.simulation-mode .legacy-sim-page .bad { color: #d9364a !important; }
.simulation-mode .legacy-sim-head > div:first-child > span { color: #6980a0; }
.simulation-mode .legacy-sim-head h2 { color: var(--ink); }
.simulation-mode .legacy-sim-head p { color: var(--muted); }

.legacy-status-strip {
  display: flex;
  align-items: center;
  gap: 0;
  margin: -6px 0 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: 0 5px 18px rgba(17,40,75,.045);
}
.legacy-status-strip > span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-right: 1px solid #edf1f6;
  color: #6f7d91;
  font-size: 9px;
  white-space: nowrap;
}
.legacy-status-strip > span:last-child { margin-left: auto; border-right: 0; }
.legacy-status-strip svg { width: 13px; height: 13px; color: #6680a5; }
.legacy-status-strip strong { color: #35445b; }
.legacy-status-strip .healthy { color: #087d54; font-weight: 700; }
.legacy-status-strip .healthy i { width: 7px; height: 7px; border-radius: 50%; background: #23bf82; box-shadow: 0 0 0 4px #e6f8f1; }
.legacy-status-strip .saved { color: #087d54; background: #effbf6; }
.legacy-status-strip .saved svg, .legacy-status-strip .saved strong { color: #087d54; }
.legacy-status-strip .unsaved { color: #a8640c; background: #fff8ec; }
.legacy-status-strip .unsaved svg, .legacy-status-strip .unsaved strong { color: #a8640c; }

.simulation-mode .legacy-lock-note { border-color: #d8d2f0; color: #524a70; background: #f7f5ff; }
.simulation-mode .legacy-lock-note svg { color: #7357d6; }
.simulation-mode .legacy-lock-note span { color: #7d7596; }
.simulation-mode .legacy-filter-bar,
.simulation-mode .legacy-basis,
.simulation-mode .legacy-bom-card,
.simulation-mode .legacy-change-summary,
.simulation-mode .legacy-sim-rail {
  border-color: var(--line);
  background: white;
  box-shadow: 0 7px 22px rgba(17,40,75,.05);
}
.simulation-mode .legacy-filter-bar label > span { color: #78869a; }
.simulation-mode .legacy-filter-bar select {
  border-color: #d8e0eb;
  color: #26354b;
  background-color: #fbfcfe;
  background-image: linear-gradient(45deg,transparent 50%,#748197 50%);
}
.simulation-mode .legacy-filter-bar select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(64,148,255,.12); }
.simulation-mode .legacy-swap { border-color: #cedcf1; color: var(--blue-700); background: var(--blue-50); }

.simulation-mode .legacy-basis { border-color: var(--line); background: #fbfcfe; }
.simulation-mode .legacy-basis > div { border-color: var(--line); }
.simulation-mode .legacy-basis span { color: #8290a3; }
.simulation-mode .legacy-basis strong { color: #2b3a50; }
.simulation-mode .legacy-basis small { color: #8793a4; }
.simulation-mode .legacy-basis .rule { background: #eefaf5; }
.simulation-mode .legacy-basis .rule strong { color: #087d54; }

.legacy-data-alert {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #f2d6aa;
  border-radius: 9px;
  color: #76511d;
  background: #fff9ef;
}
.legacy-data-alert > svg { width: 17px; color: #d98316; }
.legacy-data-alert strong, .legacy-data-alert span { display: block; }
.legacy-data-alert strong { font-size: 10px; }
.legacy-data-alert span { margin-top: 1px; color: #9a7441; font-size: 8px; }
.legacy-data-alert button { padding: 5px 9px; border: 1px solid #e9c98f; border-radius: 6px; color: #9a5d0a; background: white; cursor: pointer; font-size: 8px; font-weight: 700; }
.legacy-data-alert button:hover { border-color: #d79d40; background: #fff4dd; }

.simulation-mode .legacy-bom-card > header,
.simulation-mode .legacy-change-summary > header { border-color: var(--line); background: #fbfcfe; }
.simulation-mode .legacy-bom-card > header span { color: #6680a5; }
.simulation-mode .legacy-bom-card > header h3,
.simulation-mode .legacy-change-summary > header h3 { color: var(--ink); }
.simulation-mode .legacy-bom-card dt { color: #8390a1; }
.simulation-mode .legacy-bom-card dd { color: #26354a; }
.simulation-mode .legacy-table-wrap { scrollbar-color: #c9d3e0 #f4f7fa; }
.simulation-mode .legacy-bom-table th { color: #6e7d92; background: #f4f7fb; }
.simulation-mode .legacy-bom-table td { border-color: #e8edf3; color: #445168; }
.simulation-mode .legacy-bom-table tbody tr:hover td { background: #f6f9ff; }
.simulation-mode .legacy-bom-table tbody tr.active td { background: #eef4ff; }
.simulation-mode .legacy-bom-table tbody tr.active td:first-child { box-shadow: inset 3px 0 var(--blue-600); }
.simulation-mode .legacy-bom-table tbody tr.applied td { background: #f3fbf7; }
.simulation-mode .legacy-bom-table tbody tr.applied td:first-child { box-shadow: inset 3px 0 #18a66a; }
.simulation-mode .legacy-bom-table tbody tr.missing td { background: #fff9ef; }
.simulation-mode .legacy-bom-table tbody tr.missing td:first-child { box-shadow: inset 3px 0 #e89a2d; }
.simulation-mode .legacy-bom-table td button span { color: #3971cb; }
.simulation-mode .legacy-bom-table td button strong { color: #25344a; }
.simulation-mode .legacy-bom-table td button small { color: #16835a; }
.simulation-mode .legacy-bom-table td:nth-child(3) small { color: #8b97a7; }
.simulation-mode .legacy-bom-table td:nth-child(3) strong { color: #536178; }
.simulation-mode .legacy-bom-table tfoot td { border-color: #dbe3ed; color: #23344b; background: #f7f9fc; }

.simulation-mode .legacy-change-summary > header span { color: #7385a0; }
.simulation-mode .legacy-change-summary > header h3 small { color: #8491a3; }
.simulation-mode .legacy-summary-chips { border-color: var(--line); background: #fbfcfe; }
.simulation-mode .legacy-summary-chips > span { color: #748297; }
.simulation-mode .legacy-summary-chips strong { color: #2d3d54; }
.simulation-mode .legacy-summary-table-wrap th,
.simulation-mode .legacy-summary-table-wrap td { border-color: #e9edf3; color: #536076; }
.simulation-mode .legacy-summary-table-wrap th { color: #75849a; background: #f4f7fb; }
.simulation-mode .legacy-summary-table-wrap tfoot td { color: #26364d; background: #f7f9fc; }

.simulation-mode .legacy-sim-rail { scrollbar-color: #c9d3e0 #f4f7fa; }
.simulation-mode .legacy-sim-rail > section { border-color: var(--line); }
.simulation-mode .legacy-rail-title > span { background: var(--blue-700); box-shadow: 0 4px 10px rgba(21,94,239,.22); }
.simulation-mode .legacy-rail-title h3 { color: var(--ink); }
.legacy-list-meta { display: flex; justify-content: space-between; margin: -4px 0 8px; color: #8693a4; font-size: 7px; }
.legacy-list-meta strong { color: #52709b; font-weight: 600; }
.simulation-mode .legacy-rail-search { border-color: #d8e0eb; background: #fbfcfe; }
.simulation-mode .legacy-rail-search:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(64,148,255,.1); }
.simulation-mode .legacy-rail-search svg { color: #7b89a0; }
.simulation-mode .legacy-rail-search input { color: #2b3a50; }
.simulation-mode .legacy-material-list { border-color: #dfe5ed; }
.simulation-mode .legacy-material-list button { border-color: #e8edf3; color: #536177; background: white; }
.simulation-mode .legacy-material-list button:hover,
.simulation-mode .legacy-material-list button.active { color: #233550; background: #eef4ff; box-shadow: inset 3px 0 var(--blue-600); }
.simulation-mode .legacy-material-list strong { color: #2f3e55; }
.simulation-mode .legacy-material-list small { color: #8a96a7; }
.simulation-mode .legacy-material-list em { color: #596980; }
.simulation-mode .legacy-selected-material,
.simulation-mode .legacy-result-metrics > div,
.simulation-mode .legacy-coverage { border-color: #dfe5ed; background: #f8fafc; }
.simulation-mode .legacy-selected-material span,
.simulation-mode .legacy-selected-material small,
.simulation-mode .legacy-eligibility { color: #8290a3; }
.simulation-mode .legacy-selected-material strong { color: #2b3b52; }
.simulation-mode .legacy-candidate-list label { border-color: #dfe5ed; background: white; }
.simulation-mode .legacy-candidate-list label:hover { border-color: #b8cae6; background: #f8fbff; }
.simulation-mode .legacy-candidate-list label.active { border-color: var(--blue-500); background: #eef4ff; box-shadow: inset 0 0 0 1px var(--blue-500); }
.simulation-mode .legacy-candidate-list span strong { color: #324158; }
.simulation-mode .legacy-candidate-list span small { color: #8692a3; }
.simulation-mode .legacy-candidate-list em strong { color: #2b3a50; }
.simulation-mode .legacy-candidate-list em small { color: #7e8b9d; }
.simulation-mode .legacy-result-metrics span { color: #7c899b; }
.simulation-mode .legacy-result-metrics strong { color: #26364d; }
.simulation-mode .legacy-result-metrics small { color: #8793a4; }
.simulation-mode .legacy-coverage > div { color: #66758a; }
.simulation-mode .legacy-coverage > span { background: #dfe6ef; }
.simulation-mode .legacy-coverage > span i { background: linear-gradient(90deg,var(--blue-600),var(--cyan)); }
.simulation-mode .legacy-approval-note { color: #7d899b; }

.legacy-annual-field {
  display: grid;
  grid-template-columns: 1fr 66px 12px;
  gap: 6px;
  align-items: center;
  margin-top: 9px;
  padding: 8px 9px;
  border: 1px solid #dfe5ed;
  border-radius: 6px;
  color: #6b798e;
  background: #f8fafc;
  font-size: 8px;
}
.legacy-annual-field input { width: 100%; height: 27px; padding: 0 7px; border: 1px solid #d2dbe7; border-radius: 5px; outline: 0; color: #26364d; background: white; font-size: 9px; text-align: right; }
.legacy-annual-field input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(64,148,255,.1); }
.legacy-annual-field em { color: #6c788b; font-style: normal; }
.legacy-confirm-note { margin: 8px 0 -6px; color: #7e8b9d; font-size: 7px; text-align: center; }

.callout { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 19px 21px; border: 1px solid #b9d1f7; border-radius: 14px; background: linear-gradient(100deg,#f0f6ff,#f3fbfc); }
.callout-copy { display: flex; align-items: center; gap: 13px; }
.callout-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: var(--blue-700); background: white; box-shadow: 0 5px 16px rgba(25,79,154,.09); }
.callout h3 { margin: 0; color: #26466e; font-size: 13px; }
.callout p { margin: 4px 0 0; color: #6c819d; font-size: 9px; }

.tabs { display: flex; gap: 3px; margin-bottom: 14px; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: white; }
.tab { min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; color: #798698; background: transparent; cursor: pointer; font-size: 10px; white-space: nowrap; }
.tab.active { color: var(--blue-700); background: var(--blue-50); font-weight: 700; }

.toast-region { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: grid; width: min(390px, calc(100vw - 32px)); gap: 9px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 13px 15px; border: 1px solid #dfe6ef; border-radius: 12px; color: #354259; background: white; box-shadow: var(--shadow-lg); animation: toast-in .22s ease; }
.toast > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-bg); }
.toast.error > span { color: var(--red); background: var(--red-bg); }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 11px; }
.toast small { margin-top: 2px; color: #8a96a8; font-size: 9px; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

.modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.open { display: flex; }
.modal-dim { position: absolute; inset: 0; border: 0; background: rgba(5,16,34,.62); backdrop-filter: blur(4px); }
.modal-panel { position: relative; z-index: 1; display: flex; width: min(620px,100%); max-height: min(780px,calc(100vh - 48px)); flex-direction: column; overflow: hidden; border-radius: 18px; background: white; box-shadow: var(--shadow-lg); animation: modal-in .2s ease; }
@keyframes modal-in { from { transform: translateY(10px) scale(.985); opacity: 0; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.modal-header .eyebrow { margin-bottom: 3px; }
.modal-header h2 { margin: 0; color: var(--ink); font-size: 18px; }
.modal-body { padding: 21px 22px; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); background: #fafbfd; }
.nav-backdrop { display: none; }

@media (max-width: 1220px) {
  :root { --sidebar: 230px; }
  .topbar { padding: 0 24px; }
  .view-root { padding: 24px 24px 45px; }
  .user-chip div { display: none; }
  .user-chip { min-width: auto; }
  .group-grid, .upload-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .roadmap { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .integration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .simulation-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .legacy-workbench { grid-template-columns: 1fr; }
  .legacy-sim-rail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-height: none; overflow: visible; }
  .legacy-sim-rail > section { border-right: 1px solid #292d33; border-bottom: 0; }
  .legacy-sim-rail > section:last-child { border-right: 0; }
}

@media (max-width: 980px) {
  .sidebar { transform: translateX(-100%); width: 268px; transition: transform .24s ease; }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-backdrop { position: fixed; inset: 0; z-index: 45; border: 0; background: rgba(5,16,34,.52); }
  body.nav-open .nav-backdrop { display: block; }
  .workspace { margin-left: 0; }
  .menu-toggle { display: inline-grid; }
  .hero { grid-template-columns: 1fr; }
  .hero-status { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .hero-status .status-top { grid-column: 1/-1; }
  .health-row { display: block; padding: 10px; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 9px; }
  .health-row strong, .health-row small { display: block; margin-top: 3px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .content-grid, .detail-grid { grid-template-columns: 1fr; }
  .approval-card { grid-template-columns: minmax(0,1fr) minmax(220px,.7fr); }
  .approval-card > .button { grid-column: 1/-1; justify-self: end; }
}

@media (max-width: 720px) {
  body { font-size: 13px; }
  .topbar { height: 64px; padding: 0 14px; }
  .topbar-left h1 { font-size: 16px; }
  .breadcrumb, .top-search, .top-action, .user-chip { display: none; }
  .topbar-actions { margin-left: auto; }
  .view-root { padding: 18px 14px 38px; }
  .page-head { align-items: flex-start; flex-direction: column; margin-bottom: 16px; }
  .page-head h2 { font-size: 22px; }
  .page-head p { font-size: 11px; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .page-actions .button { flex: 1; }
  .hero { gap: 22px; padding: 24px 20px; border-radius: 16px; }
  .hero h2 { font-size: 22px; }
  .hero-status { grid-template-columns: 1fr; }
  .hero-status .status-top { grid-column: auto; }
  .metric-grid { gap: 9px; }
  .metric-card { min-height: 116px; padding: 15px; }
  .metric-icon { margin-bottom: 11px; }
  .metric-value { font-size: 21px; }
  .metric-delta { top: 14px; right: 12px; }
  .process-grid { grid-template-columns: 1fr; padding: 13px; }
  .process-card p { min-height: 0; }
  .simulation-control { padding: 15px; }
  .simulation-fields { grid-template-columns: 1fr; }
  .scenario-row { align-items: stretch; flex-direction: column; }
  .scenario-pills { display: grid; grid-template-columns: repeat(3,1fr); }
  .scenario-pill { padding-inline: 6px; }
  .simulation-metric .metric-value { font-size: 16px; }
  .simulation-metric .sim-detail { position: static; display: inline-block; max-width: none; margin-top: 8px; text-align: left; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .search-field { min-width: 0; grid-column: 1/-1; }
  .select { width: 100%; min-width: 0; }
  .group-grid, .upload-grid, .roadmap, .integration-grid, .form-grid, .roadmap-intro { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .upload-card p { min-height: 0; }
  .roadmap-intro .coverage-card { min-height: 155px; }
  .phase-card { min-height: 0; }
  .approval-card { grid-template-columns: 1fr; }
  .approval-card > .button { grid-column: auto; width: 100%; }
  .candidate { grid-template-columns: 17px minmax(0,1fr); }
  .candidate > .align-right { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left !important; }
  .candidate > .align-right small { margin-top: 0; text-align: right; }
  .stepper { padding-inline: 0; }
  .step strong { font-size: 8px; }
  .step small { display: none; }
  .bom-head { align-items: flex-start; flex-direction: column; }
  .callout { align-items: stretch; flex-direction: column; }
  .callout .button { width: 100%; }
  .modal { padding: 10px; align-items: flex-end; }
  .modal-panel { max-height: calc(100vh - 20px); border-radius: 18px 18px 10px 10px; }
  .toast-region { right: 16px; bottom: 16px; }
  .simulation-mode .view-root { padding: 18px 12px 34px; }
  .legacy-sim-head { align-items: flex-start; flex-direction: column; }
  .legacy-sim-head h2 { font-size: 22px; }
  .legacy-head-actions { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .legacy-head-actions .button { width: 100%; min-width: 0; padding-inline: 8px; overflow: hidden; font-size: 10px; }
  .legacy-filter-bar { grid-template-columns: 1fr; }
  .legacy-filter-bar .legacy-swap { margin: 0 auto; transform: rotate(90deg); }
  .legacy-basis { grid-template-columns: 1fr 1fr; }
  .legacy-basis > div { border-bottom: 1px solid #292d33; }
  .legacy-basis .rule { grid-column: 1 / -1; }
  .legacy-compare-grid { grid-template-columns: 1fr; }
  .legacy-sim-rail { grid-template-columns: 1fr; }
  .legacy-sim-rail > section { border-right: 0; border-bottom: 1px solid #292d33; }
  .legacy-summary-chips { grid-template-columns: repeat(3,1fr); }
  .legacy-status-strip > span:last-child { margin-left: 0; }
  .legacy-data-alert { grid-template-columns: 24px minmax(0,1fr); }
  .legacy-data-alert button { grid-column: 2; justify-self: start; }
}

@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 106px; }
  .metric-label { font-size: 10px; }
  .hero-actions .button { flex: 1; }
  .coverage-card { align-items: flex-start; flex-direction: column; }
  .filters { grid-template-columns: 1fr; }
  .search-field { grid-column: auto; }
}

/* Readability scale: presentation and day-to-day viewing. */
.brand small, .nav-caption, .role-switcher label, .sidebar-foot { font-size: 11px; }
.scope-chip, .role-switcher p, .reset-demo { font-size: 12px; }
.nav-link .nav-text { font-size: 14px; }
.nav-count, .nav-tag { font-size: 11px; }
.role-switcher select { font-size: 13px; }

.breadcrumb, .eyebrow { font-size: 11px; }
.top-action, .top-search input, .user-chip strong { font-size: 12px; }
.top-search kbd, .user-chip small, .notice-button i { font-size: 10px; }
.button { min-height: 41px; font-size: 13px; }
.button.small { min-height: 34px; font-size: 12px; }
.page-head p { font-size: 14px; }
.card-title { font-size: 16px; }
.card-desc { font-size: 13px; }

.hero p { font-size: 14px; }
.status-top, .health-row span, .health-row strong { font-size: 12px; }
.health-row small { font-size: 11px; }
.metric-label { font-size: 13px; }
.metric-delta { font-size: 11px; }
.simulation-fields label > span, .scenario-row small, .scenario-pill { font-size: 11px; }
.scenario-row strong { font-size: 12px; }
.sim-detail, .sim-result-cell small { font-size: 10px; }
.saving-hero span, .saving-hero small, .coverage > div { font-size: 11px; }

.process-no, .process-foot { font-size: 11px; }
.process-card h4 { font-size: 14px; }
.process-card p { font-size: 12px; }
.task-item strong { font-size: 13px; }
.task-item small { font-size: 11px; }
.scope-note { font-size: 13px; }

.input, .select, .textarea { min-height: 42px; font-size: 13px; }
.data-table th { font-size: 12px; }
.data-table td, .money { font-size: 13px; }
.data-table td small { font-size: 11px; }
.code { font-size: 12px; }
.badge, .plain-badge, .pagination, .group-code { font-size: 11px; }
.condition { font-size: 10px; }

.group-card h3, .upload-card h3, .bom-title h3, .integration-card h3, .principle-card h3 { font-size: 15px; }
.group-card > p, .group-arrow, .upload-result, .bom-title p, .price-note, .field-help { font-size: 11px; }
.alternative-item strong, .upload-card p, .form-field label { font-size: 12px; }
.alternative-item span { font-size: 10px; }
.summary-row { font-size: 13px; }
.candidate strong { font-size: 12px; }
.candidate small { font-size: 10px; }
.step strong { font-size: 12px; }
.step small, .mini-progress-labels { font-size: 10px; }
.approval-card h3 { font-size: 14px; }
.approval-card p { font-size: 11px; }
.timeline-item h4 { font-size: 13px; }
.timeline-item p { font-size: 11px; }
.coverage-card p, .principle, .phase-card > p, .phase-item, .integration-card > p { font-size: 12px; }
.phase-no, .phase-period, .gate, .spec-row { font-size: 11px; }

.legacy-sim-head > div:first-child > span { font-size: 11px; }
.legacy-sim-head p { font-size: 13px; }
.legacy-lock-note { font-size: 12px; }
.legacy-head-actions .button { font-size: 12px; }
.legacy-filter-bar label > span { font-size: 11px; }
.legacy-filter-bar select { height: 40px; font-size: 13px; }
.legacy-basis span { font-size: 10px; }
.legacy-basis strong { font-size: 11px; }
.legacy-basis small { font-size: 9px; }
.legacy-bom-card > header span { font-size: 10px; }
.legacy-bom-card > header h3 { font-size: 16px; }
.legacy-bom-card dt { font-size: 9px; }
.legacy-bom-card dd { font-size: 11px; }
.legacy-bom-table th { font-size: 10px; }
.legacy-bom-table td { height: 56px; font-size: 11px; }
.legacy-bom-table td button span { font-size: 10px; }
.legacy-bom-table td button strong { font-size: 11px; }
.legacy-bom-table td button small, .legacy-bom-table td:nth-child(3) small { font-size: 9px; }
.legacy-bom-table td:nth-child(3) strong { font-size: 10px; }
.legacy-change-summary > header span { font-size: 9px; }
.legacy-change-summary > header h3 { font-size: 14px; }
.legacy-change-summary > header h3 small { font-size: 10px; }
.legacy-summary-chips > span, .legacy-summary-table-wrap th, .legacy-summary-table-wrap td { font-size: 11px; }
.legacy-rail-title > span { width: 22px; height: 22px; font-size: 10px; }
.legacy-rail-title h3 { font-size: 14px; }
.legacy-rail-search input { font-size: 11px; }
.legacy-material-list strong { font-size: 10px; }
.legacy-material-list small, .legacy-material-list em { font-size: 10px; }
.legacy-selected-material span, .legacy-selected-material small, .legacy-eligibility { font-size: 9px; }
.legacy-selected-material strong { font-size: 11px; }
.legacy-candidate-list span strong { font-size: 10px; }
.legacy-candidate-list span small, .legacy-candidate-list em small { font-size: 9px; }
.legacy-candidate-list em strong { font-size: 10px; }
.legacy-empty { font-size: 10px; }
.legacy-result-metrics span, .legacy-result-metrics small, .legacy-coverage > div, .legacy-approval-note { font-size: 10px; }
.legacy-result-metrics strong { font-size: 13px; }
.legacy-status-strip > span { min-height: 40px; font-size: 11px; }
.legacy-data-alert strong { font-size: 12px; }
.legacy-data-alert span, .legacy-data-alert button { font-size: 10px; }
.legacy-list-meta { font-size: 9px; }
.legacy-annual-field { font-size: 10px; }
.legacy-annual-field input { height: 30px; font-size: 11px; }
.legacy-confirm-note { font-size: 9px; }

.callout p, .toast small { font-size: 11px; }
.tab, .toast strong { font-size: 12px; }

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