:root {
  --surface-0: #050713;
  --surface-1: #07111c;
  --surface-2: #0a1522;
  --surface-3: #0e1b2a;
  --surface-elevated: rgba(11, 23, 38, 0.96);
  --surface-interactive: rgba(14, 31, 47, 0.9);
  --border-soft: rgba(125, 198, 224, 0.14);
  --border-medium: rgba(114, 216, 240, 0.28);
  --border-active: rgba(21, 245, 186, 0.58);
  --text-primary: #eef8ff;
  --text-secondary: #abc1cf;
  --text-tertiary: #7893a4;
  --accent-cyan: #15f5ba;
  --accent-blue: #47a7ff;
  --accent-violet: #b794f4;
  --accent-magenta: #ff5bc8;
  --accent-amber: #ffb020;
  --accent-green: #5ee08f;
  --focus-ring: #9fffee;
  --shadow-elevated: 0 28px 72px rgba(0, 0, 0, 0.52);
  --glow-cyan-soft: 0 0 28px rgba(21, 245, 186, 0.18);
  --glow-blue-soft: 0 0 32px rgba(71, 167, 255, 0.16);
  --glow-violet-soft: 0 0 32px rgba(183, 148, 244, 0.16);
  --brand-spectrum: linear-gradient(90deg, #15f5ba 0%, #47a7ff 48%, #b794f4 76%, #ff5bc8 100%);
  --section-space: 104px;
  --content-max: 1500px;
  --reading-max: 720px;
  --map-safe-padding: 96px;
  --bg: #050713;
  --bg-2: #0a1222;
  --panel: rgba(8, 15, 29, 0.84);
  --panel-strong: rgba(10, 18, 34, 0.95);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --border: rgba(130, 237, 255, 0.18);
  --border-strong: rgba(21, 245, 186, 0.42);
  --text: #eaf6ff;
  --muted: #8ea8b8;
  --soft: #668092;
  --accent: #15f5ba;
  --accent-2: #47a7ff;
  --accent-hot: #ff3d9a;
  --accent-violet: #9b7cff;
  --accent-lime: #cdfc4f;
  --warning: #ffb020;
  --danger: #ff4d6d;
  --success: #44e58a;
  --shadow-soft: 0 18px 56px rgba(0, 0, 0, 0.42);
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --sidebar-width-large: 380px;
  --sidebar-width-medium: 350px;
  --detail-rail-width: 360px;
  color-scheme: dark;
  font-family:
    "Segoe UI Variable Text", Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background:
    linear-gradient(135deg, rgba(21, 245, 186, 0.13), transparent 32%),
    linear-gradient(215deg, rgba(255, 61, 154, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(155, 124, 255, 0.08), transparent 26rem),
    var(--bg);
  color: var(--text);
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

body.fullscreen-active {
  overflow: hidden;
}

body.fullscreen-active .site-header {
  display: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(120, 240, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(118deg, transparent 0 28%, rgba(21, 245, 186, 0.055) 28% 29%, transparent 29% 65%, rgba(255, 61, 154, 0.045) 65% 66%, transparent 66%);
  background-size: 46px 46px, 46px 46px, auto;
  mask-image: linear-gradient(180deg, black, transparent 88%);
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 10px clamp(16px, 4vw, 72px);
  border-bottom: 1px solid rgba(120, 240, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(21, 245, 186, 0.1), transparent 32%, rgba(155, 124, 255, 0.08)),
    rgba(5, 9, 18, 0.9);
  backdrop-filter: blur(18px);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 820;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(21, 245, 186, 0.48);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #eaffff 0 7%, transparent 8%),
    conic-gradient(from 210deg, rgba(21, 245, 186, 0.96), rgba(71, 167, 255, 0.82), rgba(255, 61, 154, 0.76), rgba(21, 245, 186, 0.96));
  color: #05101a;
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: 0 0 26px rgba(21, 245, 186, 0.24);
}

.site-nav {
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 30px);
  overflow-x: auto;
  scrollbar-width: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav a,
.site-actions a,
.hero-ctas a,
.axis-card a,
.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-nav a {
  padding: 8px 2px;
  color: rgba(234, 246, 255, 0.88);
  font-size: 0.9rem;
  white-space: nowrap;
}

.site-nav a:hover {
  color: #a7fff0;
}

.site-nav [data-app-view="map"],
.site-nav .navigator-primary-link {
  position: relative;
  color: #dffff8;
  font-weight: 820;
}

.site-nav [data-app-view="map"]::after,
.site-nav .navigator-primary-link::after {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  height: 2px;
  content: "";
  background: #15f5ba;
  box-shadow: 0 0 10px rgba(21, 245, 186, 0.56);
}

.site-actions,
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
}

.primary-cta,
.ghost-cta,
.text-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 740;
  white-space: nowrap;
}

.primary-cta {
  padding: 0 18px;
  border: 1px solid rgba(21, 245, 186, 0.54);
  background:
    linear-gradient(135deg, rgba(0, 184, 255, 0.92), rgba(21, 245, 186, 0.72) 48%, rgba(155, 76, 255, 0.9)),
    rgba(255, 255, 255, 0.08);
  color: #f7ffff;
  box-shadow: 0 0 26px rgba(21, 245, 186, 0.18);
}

.ghost-cta {
  padding: 0 16px;
  border: 1px solid rgba(160, 190, 255, 0.28);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(234, 246, 255, 0.92);
}

.text-cta {
  min-height: 34px;
  color: #a7fff0;
}

.large {
  min-height: 48px;
  padding-inline: 22px;
  font-size: 0.95rem;
}

.landing-main {
  position: relative;
  overflow: hidden;
}

.landing-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 13%, rgba(21, 245, 186, 0.16), transparent 23rem),
    radial-gradient(circle at 78% 10%, rgba(155, 124, 255, 0.16), transparent 24rem),
    radial-gradient(circle at 62% 46%, rgba(255, 61, 154, 0.09), transparent 28rem);
}

.landing-hero,
.landing-section,
.feature-strip,
.badge-band,
.site-footer {
  width: min(1780px, calc(100% - 48px));
  margin-inline: auto;
}

.landing-hero {
  min-height: min(820px, calc(100vh - 150px));
  display: grid;
  grid-template-columns: minmax(320px, 0.88fr) minmax(560px, 1.12fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(34px, 4.5vw, 58px) 0 24px;
}

.hero-kicker,
.section-kicker,
.plan-label {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-copy h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.4rem, 5.8vw, 7.6rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.hero-lead {
  max-width: 720px;
  margin: 22px 0 0;
  color: rgba(234, 246, 255, 0.92);
  font-size: clamp(1.12rem, 1.5vw, 1.42rem);
  line-height: 1.4;
}

.hero-subline {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(0.96rem, 1.2vw, 1.1rem);
  line-height: 1.55;
}

.hero-ctas {
  flex-wrap: wrap;
  margin-top: 24px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.trust-row span,
.badge,
.badge-cloud span,
.chip-cloud span,
.evidence-examples span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(120, 240, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(234, 246, 255, 0.86);
  font-size: 0.78rem;
  line-height: 1.2;
}

.hero-disclaimer {
  width: min(520px, 100%);
  display: grid;
  gap: 4px;
  margin-top: 22px;
  padding: 13px 15px;
  border: 1px solid rgba(120, 240, 255, 0.16);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(21, 245, 186, 0.08), transparent 45%),
    rgba(255, 255, 255, 0.035);
}

.hero-disclaimer strong {
  color: #eafffb;
  font-size: 0.82rem;
}

.hero-disclaimer span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.hero-visual {
  min-width: 0;
}

.preview-shell {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(120, 240, 255, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(21, 245, 186, 0.14), transparent 32%, rgba(155, 124, 255, 0.12)),
    linear-gradient(rgba(120, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 240, 255, 0.045) 1px, transparent 1px),
    rgba(5, 11, 22, 0.92);
  background-size: auto, 36px 36px, 36px 36px, auto;
  box-shadow: 0 0 42px rgba(21, 245, 186, 0.18), 0 0 50px rgba(155, 124, 255, 0.15);
}

.preview-toolbar,
.preview-controls {
  position: absolute;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(234, 246, 255, 0.78);
  font-size: 0.78rem;
}

.preview-toolbar {
  top: 14px;
}

.preview-controls {
  bottom: 14px;
  justify-content: flex-start;
}

.preview-controls span {
  padding: 7px 12px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 6px;
  background: rgba(5, 11, 22, 0.72);
}

.preview-canvas {
  position: absolute;
  inset: 52px 245px 56px 20px;
}

.preview-canvas::before,
.preview-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(21, 245, 186, 0.28) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 19%, rgba(255, 91, 200, 0.3) 0 4px, transparent 5px),
    radial-gradient(circle at 20% 74%, rgba(94, 224, 143, 0.3) 0 4px, transparent 5px),
    radial-gradient(circle at 80% 76%, rgba(155, 124, 255, 0.3) 0 4px, transparent 5px);
  opacity: 0.8;
}

.preview-canvas::after {
  filter: blur(8px);
  opacity: 0.35;
}

.preview-brain {
  position: absolute;
  left: 47%;
  top: 47%;
  z-index: 2;
  width: 128px;
  height: 128px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(21, 245, 186, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 42%, rgba(234, 246, 255, 0.86), transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(21, 245, 186, 0.3), rgba(71, 167, 255, 0.14) 48%, transparent 72%);
  box-shadow: 0 0 34px rgba(21, 245, 186, 0.36);
}

.preview-brain span {
  position: absolute;
  inset: 29px 24px;
  border: 3px solid rgba(122, 230, 255, 0.86);
  border-radius: 52% 48% 50% 44%;
  box-shadow: inset 0 0 20px rgba(21, 245, 186, 0.22), 0 0 18px rgba(71, 167, 255, 0.22);
}

.preview-route {
  position: absolute;
  z-index: 1;
  width: 48%;
  height: 30%;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.75;
  filter: drop-shadow(0 0 9px currentColor);
}

.preview-route.cyan {
  left: 4%;
  top: 18%;
  color: #15f5ba;
  transform: rotate(8deg);
}

.preview-route.pink {
  right: 4%;
  top: 19%;
  color: #ff5bc8;
  transform: rotate(-10deg);
}

.preview-route.amber {
  right: 6%;
  bottom: 18%;
  color: #ff9b4d;
  transform: rotate(14deg);
}

.preview-route.green {
  left: 8%;
  bottom: 17%;
  color: #5ee08f;
  transform: rotate(-16deg);
}

.preview-node {
  position: absolute;
  z-index: 3;
  color: #eafffb;
  font-size: 0.82rem;
  font-weight: 760;
  text-shadow: 0 0 12px currentColor;
}

.preview-node::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-right: 7px;
  vertical-align: -4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}

.preview-node.n1 { left: 3%; top: 14%; color: #15f5ba; }
.preview-node.n2 { right: 0; top: 13%; color: #ff5bc8; }
.preview-node.n3 { left: 1%; top: 45%; color: #70a7ff; }
.preview-node.n4 { right: 2%; top: 52%; color: #ff9b4d; }
.preview-node.n5 { left: 4%; bottom: 15%; color: #5ee08f; }
.preview-node.n6 { right: 5%; bottom: 10%; color: #a879ff; }

.preview-axis-panel {
  position: absolute;
  top: 64px;
  right: 20px;
  bottom: 54px;
  z-index: 4;
  width: 210px;
  padding: 16px;
  border: 1px solid rgba(120, 240, 255, 0.22);
  border-radius: 8px;
  background: rgba(5, 11, 22, 0.78);
}

.preview-axis-panel h2 {
  margin: 0 0 16px;
  font-size: 0.92rem;
}

.preview-axis-panel ul {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-axis-panel li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  color: rgba(234, 246, 255, 0.9);
  font-size: 0.82rem;
  line-height: 1.28;
}

.preview-axis-panel li span {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in oklab, var(--axis) 72%, white 0%);
  border-radius: 50%;
  background: color-mix(in oklab, var(--axis) 18%, transparent);
  box-shadow: 0 0 18px color-mix(in oklab, var(--axis) 34%, transparent);
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.feature-card,
.info-card,
.plan-card,
.stack-card,
.axis-card,
.compare-card {
  border: 1px solid rgba(120, 240, 255, 0.16);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 56%),
    rgba(255, 255, 255, 0.035);
  box-shadow: var(--shadow-soft);
}

.feature-card {
  min-height: 124px;
  padding: 18px;
}

.feature-card h2,
.info-card h3,
.plan-card h3,
.stack-card h3,
.axis-card h3,
.compare-card h3 {
  margin: 0 0 9px;
  font-size: 1rem;
  line-height: 1.25;
}

.feature-card p,
.info-card p,
.plan-card p,
.stack-card p,
.axis-card p,
.compare-card li,
.section-heading p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.52;
}

.feature-card p,
.stack-card p,
.axis-card p,
.info-card p {
  margin: 0;
}

.feature-card.teal { border-color: rgba(21, 245, 186, 0.28); }
.feature-card.pink { border-color: rgba(255, 91, 200, 0.28); }
.feature-card.amber { border-color: rgba(255, 176, 32, 0.28); }
.feature-card.blue { border-color: rgba(112, 167, 255, 0.28); }

.badge-band {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
}

.badge-band > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.badge-band strong {
  margin-right: 6px;
  color: rgba(234, 246, 255, 0.76);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge.clinical { border-color: rgba(21, 245, 186, 0.4); color: #a7fff0; }
.badge.research { border-color: rgba(71, 167, 255, 0.4); color: #b8d8ff; }
.badge.emerging { border-color: rgba(255, 176, 32, 0.44); color: #ffe3a0; }
.badge.hypothesis { border-color: rgba(200, 167, 255, 0.44); color: #dcc8ff; }
.badge.rx { border-color: rgba(255, 91, 120, 0.48); color: #ffc4ce; }
.badge.deficiency { border-color: rgba(255, 176, 32, 0.44); color: #ffe3a0; }
.badge.warning { border-color: rgba(255, 155, 77, 0.48); color: #ffd1a8; }

.landing-section {
  padding: clamp(56px, 7vw, 92px) 0 0;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(220px, 0.33fr) minmax(0, 1fr);
  gap: 28px;
}

.section-heading {
  max-width: 840px;
  margin-bottom: 20px;
}

.landing-section h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.08;
}

.three-card-grid,
.four-card-grid,
.stack-grid,
.axis-grid,
.comparison-grid,
.plan-grid {
  display: grid;
  gap: 14px;
}

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

.four-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-card,
.stack-card,
.compare-card,
.axis-card {
  padding: 18px;
}

.plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.plan-grid .section-heading {
  grid-column: 1 / -1;
}

.plan-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
}

.plan-card p,
.plan-card ul {
  margin: 0;
}

.plan-card ul,
.compare-card ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  color: var(--muted);
}

.plan-note {
  padding: 12px;
  border: 1px solid rgba(255, 176, 32, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 176, 32, 0.055);
}

.free-card {
  border-color: rgba(21, 245, 186, 0.3);
}

.pro-card {
  border-color: rgba(155, 124, 255, 0.32);
}

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

.stack-card {
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.chip-cloud,
.badge-cloud,
.evidence-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-cloud span:nth-child(3n + 1) { border-color: rgba(21, 245, 186, 0.28); }
.chip-cloud span:nth-child(3n + 2) { border-color: rgba(71, 167, 255, 0.28); }
.chip-cloud span:nth-child(3n + 3) { border-color: rgba(255, 176, 32, 0.28); }

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

.axis-card {
  border-color: color-mix(in oklab, var(--axis) 44%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--axis) 12%, transparent), transparent 60%),
    rgba(255, 255, 255, 0.035);
}

.axis-card span {
  display: block;
  margin-top: 12px;
  color: color-mix(in oklab, var(--axis) 76%, white 24%);
  font-size: 0.76rem;
  line-height: 1.35;
}

.axis-card a {
  display: inline-flex;
  margin-top: 14px;
  color: #a7fff0;
  font-size: 0.8rem;
  font-weight: 720;
}

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

.strong-card {
  border-color: rgba(21, 245, 186, 0.28);
}

.muted-card {
  border-color: rgba(142, 168, 184, 0.2);
}

.safety-section,
.evidence-section {
  padding-bottom: 0;
}

.safety-section .section-heading,
.evidence-section .section-heading {
  max-width: 980px;
}

.badge-cloud span {
  border-color: rgba(255, 176, 32, 0.24);
}

.evidence-examples {
  align-items: stretch;
}

.evidence-examples span {
  min-height: 42px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(21, 245, 186, 0.08), rgba(71, 167, 255, 0.055)),
    rgba(255, 255, 255, 0.035);
}

.navigator-section {
  scroll-margin-top: 76px;
  padding-top: 72px;
}

.navigator-section .app-shell {
  height: calc(100vh - 76px);
}

.site-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 72px;
  padding: 24px 0 28px;
  border-top: 1px solid rgba(120, 240, 255, 0.14);
  color: var(--muted);
  font-size: 0.78rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer a {
  color: rgba(234, 246, 255, 0.76);
}

@media (max-width: 1260px) {
  .site-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .site-nav {
    justify-content: flex-start;
    width: 100%;
  }

  .site-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .preview-shell {
    min-height: 480px;
  }

  .feature-strip,
  .four-card-grid,
  .axis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 900px) {
  .landing-hero,
  .landing-section,
  .feature-strip,
  .badge-band,
  .site-footer {
    width: min(100% - 24px, 1780px);
  }

  .site-header {
    padding-inline: 12px;
  }

  .site-actions {
    display: none;
  }

  .hero-copy h1 {
    font-size: clamp(2.8rem, 14vw, 4.6rem);
  }

  .hero-ctas,
  .badge-band,
  .site-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-ctas a,
  .primary-cta,
  .ghost-cta {
    width: 100%;
  }

  .preview-shell {
    min-height: 420px;
  }

  .preview-canvas {
    inset: 52px 16px 150px 16px;
  }

  .preview-axis-panel {
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 52px;
    width: auto;
    padding: 12px;
  }

  .preview-axis-panel ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .two-column,
  .plan-grid,
  .comparison-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .feature-strip,
  .three-card-grid,
  .four-card-grid,
  .stack-grid,
  .axis-grid {
    grid-template-columns: 1fr;
  }

  .navigator-section {
    padding-top: 36px;
  }

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

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(270px, 330px);
  gap: 12px;
  padding: 12px;
  transition: grid-template-columns 180ms ease;
}

.app-shell.right-collapsed {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
}

.app-shell.right-collapsed .right-rail {
  display: none;
}

.left-rail,
.right-rail,
.map-stage {
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 120px),
    var(--panel);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.left-rail,
.right-rail {
  overflow: auto;
  scrollbar-color: rgba(120, 240, 255, 0.22) transparent;
}

.left-rail {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  position: relative;
  z-index: 3;
}

.right-rail {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 10px;
  position: relative;
  z-index: 3;
}

.brand-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(21, 245, 186, 0.2), rgba(71, 167, 255, 0.11) 52%, rgba(255, 61, 154, 0.1)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25, 224, 194, 0.48);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(21, 245, 186, 0.92), rgba(71, 167, 255, 0.68) 54%, rgba(255, 61, 154, 0.72));
  color: #f2fffb;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: 0 0 28px rgba(21, 245, 186, 0.22), 0 0 24px rgba(255, 61, 154, 0.11);
}

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

.brand-kicker,
.eyebrow,
.detail-kicker {
  margin: 0;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.brand-copy h1 {
  margin: 2px 0 4px;
  font-size: 1.05rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.brand-copy p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.search-box {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(21, 245, 186, 0.07), transparent 42%),
    rgba(255, 255, 255, 0.055);
  color: var(--muted);
}

.search-box:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(25, 224, 194, 0.08);
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.search-box input::placeholder {
  color: #6f8798;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.045);
}

.segment,
.icon-button,
.tool-button {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.segment {
  min-height: 34px;
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.79rem;
  white-space: nowrap;
}

.segment.active {
  background: linear-gradient(135deg, rgba(21, 245, 186, 0.22), rgba(71, 167, 255, 0.16));
  color: #e9fffb;
  box-shadow: inset 0 0 0 1px rgba(25, 224, 194, 0.18);
}

.active-summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(255, 61, 154, 0.08), transparent 46%),
    rgba(0, 0, 0, 0.16);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.control-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(21, 245, 186, 0.055), transparent 58%),
    rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.control-section summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 750;
  user-select: none;
}

.control-section summary::-webkit-details-marker {
  display: none;
}

.control-section summary::before {
  content: "▸";
  color: var(--accent);
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.control-section[open] summary::before {
  transform: rotate(90deg);
}

.count-badge,
.tone-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 600;
  white-space: nowrap;
}

.safety-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.safety-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 176, 32, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 176, 32, 0.12), rgba(255, 61, 154, 0.08)),
    rgba(255, 255, 255, 0.04);
  color: #ffe7b8;
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.1;
}

.chip-list,
.agent-list,
.domain-list {
  display: grid;
  gap: 5px;
  max-height: 220px;
  overflow: auto;
  padding: 0 8px 8px;
}

.chip,
.agent-chip,
.domain-row {
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.chip:hover,
.agent-chip:hover,
.domain-row:hover,
.segment:hover,
.icon-button:hover,
.tool-button:hover {
  border-color: var(--border-strong);
  background:
    linear-gradient(135deg, rgba(21, 245, 186, 0.1), rgba(255, 61, 154, 0.055)),
    rgba(120, 240, 255, 0.06);
}

.chip.active,
.agent-chip.active,
.domain-row.active {
  border-color: var(--chip-color, var(--domain-color));
  background: color-mix(in oklab, var(--chip-color, var(--domain-color)) 18%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--chip-color, var(--domain-color)) 28%, transparent),
    0 0 22px color-mix(in oklab, var(--chip-color, var(--domain-color)) 20%, transparent);
}

.domain-row.filtered {
  opacity: 0.45;
}

.chip-dot,
.domain-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chip-color, var(--domain-color));
  box-shadow: 0 0 16px var(--chip-color, var(--domain-color));
}

.domain-dot {
  border-radius: 3px;
}

.chip-name,
.agent-name,
.domain-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.78rem;
}

.chip-meta,
.agent-meta,
.domain-weight {
  color: var(--soft);
  font-size: 0.7rem;
  white-space: nowrap;
}

.agent-chip {
  grid-template-columns: 10px minmax(0, 1fr);
  grid-template-areas:
    "dot name"
    ". meta";
  align-items: start;
}

.agent-chip .chip-dot {
  grid-area: dot;
  margin-top: 4px;
}

.agent-name {
  grid-area: name;
}

.agent-meta {
  grid-area: meta;
  min-width: 0;
  white-space: normal;
  line-height: 1.28;
}

.rx-warning {
  color: #ffd6dd;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 10px 10px;
}

.tool-grid .tool-button:last-child {
  grid-column: 1 / -1;
}

.select-control {
  display: grid;
  gap: 5px;
  padding: 0 10px 10px;
  color: var(--muted);
  font-size: 0.72rem;
}

.select-control span {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.select-control select {
  min-height: 34px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(5, 12, 24, 0.94);
  color: var(--text);
}

.tool-button {
  min-height: 36px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(71, 167, 255, 0.06), rgba(255, 61, 154, 0.035)),
    rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.76rem;
}

.tool-button.active {
  border-color: rgba(21, 245, 186, 0.58);
  color: #eafffb;
  background:
    linear-gradient(135deg, rgba(21, 245, 186, 0.18), rgba(155, 124, 255, 0.12)),
    rgba(255, 255, 255, 0.06);
}

.tool-button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.map-stage {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 18, 34, 0.98), rgba(5, 7, 19, 0.94)),
    linear-gradient(115deg, rgba(21, 245, 186, 0.06), transparent 36%, rgba(255, 61, 154, 0.045)),
    var(--panel-strong);
}

.map-stage:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
}

.map-stage.fallback-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
}

.map-stage:fullscreen #mapSvg,
.map-stage.fallback-fullscreen #mapSvg {
  min-height: 0;
}

.map-toolbar {
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(21, 245, 186, 0.11), transparent 40%, rgba(255, 61, 154, 0.08)),
    rgba(8, 18, 32, 0.78);
}

.map-toolbar h2 {
  margin: 4px 0 0;
  font-size: 1.2rem;
  line-height: 1.18;
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 240, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(21, 245, 186, 0.065), rgba(155, 124, 255, 0.045)),
    rgba(255, 255, 255, 0.045);
  color: var(--text);
  font-size: 1rem;
}

.icon-button.active {
  border-color: rgba(21, 245, 186, 0.56);
  color: #eafffb;
  box-shadow: 0 0 18px rgba(21, 245, 186, 0.18);
}

.map-shell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  background:
    linear-gradient(rgba(120, 240, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(21, 245, 186, 0.06), transparent 28%, rgba(155, 124, 255, 0.04) 64%, rgba(255, 61, 154, 0.045)),
    #08101d;
  background-size: 38px 38px, 38px 38px, auto;
  cursor: grab;
}

.map-shell.panning {
  cursor: grabbing;
}

#mapSvg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 640px;
  touch-action: none;
}

.map-empty {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: min(310px, calc(100% - 36px));
  display: none;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(25, 224, 194, 0.24);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 32, 0.88);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.map-empty.visible {
  display: grid;
}

.map-empty strong {
  font-size: 0.88rem;
}

.map-empty span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.map-footer {
  border-top: 1px solid var(--border);
  background: rgba(8, 18, 32, 0.76);
}

.map-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.stat-pill {
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  white-space: nowrap;
}

.edge-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 14px 12px;
}

.legend-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.7rem;
}

.legend-item span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.legend-line {
  width: 30px;
  height: 0;
  border-top: 2px solid var(--legend-color);
  flex: 0 0 auto;
}

.legend-line.dashed {
  border-top-style: dashed;
}

.domain-band {
  fill: var(--domain-color);
  fill-opacity: 0.07;
  stroke: color-mix(in oklab, var(--domain-color) 34%, rgba(255, 255, 255, 0.12));
  stroke-width: 1;
  transition: fill-opacity 160ms ease, stroke-width 160ms ease, opacity 160ms ease;
}

.domain-band.active {
  fill-opacity: calc(0.1 + var(--domain-weight, 1) * 0.08);
  stroke-width: 2;
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--domain-color) 72%, transparent));
}

.domain-band.filtered {
  opacity: 0.22;
}

.axis-header-overlay {
  pointer-events: none;
}

.domain-label {
  fill: rgba(234, 246, 255, 0.9);
  font-size: 15px;
  font-weight: 780;
  letter-spacing: 0;
  paint-order: stroke;
  stroke: rgba(6, 14, 28, 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.domain-sub {
  fill: rgba(142, 168, 184, 0.82);
  font-size: 10.5px;
  paint-order: stroke;
  stroke: rgba(6, 14, 28, 0.82);
  stroke-width: 3px;
  stroke-linejoin: round;
}

#mapSvg[data-zoom-lod="far"] .domain-label { font-size: 21px; }
#mapSvg[data-zoom-lod="far"] .domain-sub { display: none; }
#mapSvg[data-zoom-lod="medium"] .domain-label { font-size: 17px; }
#mapSvg[data-zoom-lod="medium"] .domain-sub { font-size: 11px; }

.axis-rule {
  stroke: rgba(120, 240, 255, 0.07);
  stroke-width: 1;
}

.edge {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.34;
  pointer-events: stroke;
  cursor: pointer;
  transition: opacity 140ms ease, stroke-width 140ms ease, filter 140ms ease;
}

.edge:focus-visible,
.edge.selected {
  opacity: 1;
  stroke-width: 4;
  filter: drop-shadow(0 0 7px currentColor);
  outline: none;
}

.edge.highlight {
  opacity: 0.92;
  stroke-width: 3.3;
  filter: drop-shadow(0 0 7px currentColor);
  stroke-dasharray: 7 10;
  animation: dashFlow 1.6s linear infinite;
}

.edge.dim,
.edge.domain-filtered {
  opacity: 0.16;
}

.edge.overview-quiet {
  opacity: 0.075;
}

.edge.biochemical_conversion {
  stroke: #e9e1b8;
}

.edge.cofactor_support {
  stroke: #79d893;
  stroke-width: 1.2;
}

.edge.reuptake {
  stroke: #19e0c2;
}

.edge.receptor_binding {
  stroke: #c8a7ff;
}

.edge.enzymatic_breakdown {
  stroke: #ff9b73;
}

.edge.network_modulation {
  stroke: #8dc7ff;
}

.edge.stress_activation {
  stroke: #ff8a00;
  stroke-width: 2;
}

.edge.feedback_inhibition {
  stroke: #ff5b78;
}

.edge.sleep_regulation {
  stroke: #9ca6ff;
}

.edge.inflammation_shift {
  stroke: #ff4fb7;
  stroke-dasharray: 4 5;
}

.edge.energy_support {
  stroke: #4ee5a4;
}

.edge.risk_amplification {
  stroke: #ff4f4f;
  stroke-dasharray: 8 6;
}

.edge.protective_modulation {
  stroke: #72f0d2;
  stroke-dasharray: 3 6;
}

.edge.component_of,
.edge.has_member {
  stroke: #70b7d8;
}

.edge.associated_with {
  stroke: #94a8b8;
}

.edge.has_subunit,
.edge.opens {
  stroke: #b6a3f5;
}

.edge.chloride_extrusion_context {
  stroke: #58e2c2;
}

.edge.chloride_accumulation_context {
  stroke: #ffb15c;
}

.edge.determines_current_direction_of {
  stroke: #ffe06d;
}

.edge.contributes_to {
  stroke: #72f0d2;
}

.edge.line-style-dashed {
  stroke-dasharray: 5 6;
}

.node-group {
  cursor: pointer;
  transition: opacity 140ms ease, filter 140ms ease;
}

.node-hit-area {
  fill: transparent;
  pointer-events: all;
}

.node-group:focus-visible .node-core {
  stroke: #ffffff;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 7px var(--node-fill));
}

.node-group.quick-selected .node-core {
  stroke: #ffffff;
  stroke-width: 2.6;
  filter: drop-shadow(0 0 10px var(--node-fill));
}

.detail-rail-close {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  align-self: start;
  place-items: center;
  border: 1px solid rgba(120, 240, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  z-index: 2;
}

.map-shell[aria-busy="true"] { cursor: progress; }

@media (max-width: 1600px) {
  body.detail-drawer-open .right-rail {
    position: fixed;
    top: 76px;
    right: 12px;
    bottom: 12px;
    z-index: 75;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    width: min(390px, calc(100vw - 24px));
    max-height: calc(100vh - 88px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.58);
  }

  body.detail-drawer-open .detail-rail-close { display: grid; }
}

@media (max-width: 860px) {
  body.detail-drawer-open .right-rail {
    top: 68px;
    right: 0;
    bottom: 0;
    width: min(94vw, 430px);
    max-height: calc(100vh - 68px);
    border-radius: 8px 0 0 0;
  }
}

.node-group:hover .node-core {
  stroke-width: 1.7;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--node-fill) 62%, transparent));
}

.node-group.dim,
.node-group.domain-filtered {
  opacity: 0.56;
}

.node-group.overview-hidden {
  opacity: 0.34;
  pointer-events: auto;
}

.node-group.overview-key {
  opacity: 0.96;
}

.node-group.soft {
  opacity: 0.7;
}

.node-group.evidence-filtered,
.chip.evidence-filtered,
.agent-chip.evidence-filtered {
  opacity: 0.42;
}

.node-group.solo-hidden {
  opacity: 0.08;
}

#mapSvg[data-complexity-mode="overview"] .node-group.focus-member {
  opacity: 0.96;
}

#mapSvg[data-complexity-mode="overview"] .edge.focus-member {
  opacity: 0.58;
}

.node-group.compare-common .node-review-ring { stroke: #f5fbff; stroke-width: 2.4; }
.node-group.compare-only-a .node-review-ring { stroke: #22dce8; stroke-width: 2.2; }
.node-group.compare-only-b .node-review-ring { stroke: #ff4fb7; stroke-width: 2.2; }
.node-group.compare-context .node-review-ring { stroke: #f0b85d; stroke-width: 1.9; }

.edge.evidence-filtered {
  opacity: 0.055;
}

.edge.solo-dim {
  opacity: 0.045;
}

.node-core {
  fill: var(--node-fill);
  stroke: rgba(234, 246, 255, 0.74);
  stroke-width: 1.1;
}

.node-group.overview-key .node-core {
  filter: drop-shadow(0 0 8px var(--node-fill));
}

.node-core.level-2 {
  rx: 6px;
}

.node-core.level-4 {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

.node-ring {
  fill: none;
  stroke: var(--ring-color);
  stroke-width: 2.4;
  opacity: var(--ring-opacity);
  pointer-events: none;
}

.node-ring.pulse {
  animation: ringPulse 1.8s ease-in-out infinite;
}

.node-label,
.node-type {
  paint-order: stroke;
  stroke: rgba(7, 17, 31, 0.94);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.node-label {
  fill: rgba(234, 246, 255, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.node-type {
  fill: rgba(142, 168, 184, 0.78);
  font-size: 8.5px;
}

.node-label.hidden-label,
.node-type.hidden-label {
  opacity: 0;
}

.search-hit .node-core {
  stroke: #ffffff;
  stroke-width: 2.6;
  filter: drop-shadow(0 0 9px #ffffff);
}

.agent-hit .node-ring {
  stroke-dasharray: 5 4;
}

.tooltip {
  position: absolute;
  z-index: 5;
  width: min(360px, calc(100vw - 32px));
  display: none;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 32, 0.96);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.44);
  pointer-events: none;
}

.tooltip.visible {
  display: block;
}

.tooltip h3 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}

.tooltip p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.42;
}

.tooltip dl {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
  font-size: 0.74rem;
}

.tooltip dt {
  color: var(--soft);
}

.tooltip dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
}

.detail-panel,
.safety-card,
.legend-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}

.detail-panel {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.safety-card,
.legend-card {
  padding: 0;
}

.compact-disclosure summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  list-style: none;
}

.compact-disclosure summary::-webkit-details-marker {
  display: none;
}

.compact-disclosure p,
.compact-disclosure .micro-list,
.compact-disclosure .color-legend {
  margin: 0;
  padding: 0 10px 10px;
}

.detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.detail-title-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.compendium-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 240, 255, 0.25);
  border-radius: 6px;
  background: rgba(120, 240, 255, 0.055);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}
.compendium-button:hover { border-color: rgba(21, 245, 186, 0.56); background: rgba(21, 245, 186, 0.1); }
.compendium-button:focus-visible { outline: 2px solid #8fffdc; outline-offset: 2px; }
.compendium-button[data-compendium-state="pro"] { border-color: rgba(155, 124, 255, 0.48); background: rgba(155, 124, 255, 0.1); }
.compendium-button[data-compendium-state="missing"] { opacity: 0.72; }

.compendium-toast {
  position: fixed;
  z-index: 1200;
  right: 18px;
  bottom: 18px;
  width: min(360px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid rgba(120, 240, 255, 0.28);
  border-radius: 6px;
  background: #08101f;
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  font-size: 0.76rem;
  line-height: 1.45;
}
.compendium-toast[data-tone="pro"] { border-color: rgba(155, 124, 255, 0.5); }

.detail-panel h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.detail-panel h3 {
  margin: 14px 0 8px;
  color: #dbefff;
  font-size: 0.86rem;
}

.detail-panel p,
.safety-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.48;
}

.detail-list,
.micro-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-list li,
.micro-list li {
  padding: 8px;
  border: 1px solid rgba(120, 240, 255, 0.10);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.38;
}

.detail-list strong,
.micro-list strong {
  color: var(--text);
  font-weight: 750;
}

.evidence-list a {
  color: #9fffe7;
  text-decoration: none;
}

.evidence-list a:hover {
  text-decoration: underline;
}

.micro-list {
  margin-top: 10px;
}

.weight-meter {
  height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.weight-meter span {
  display: block;
  height: 100%;
  width: var(--weight);
  background: var(--meter-color);
  box-shadow: 0 0 12px var(--meter-color);
}

.color-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.color-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.76rem;
}

.color-legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--legend-dot);
  box-shadow: 0 0 14px var(--legend-dot);
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 9px 2px 0;
  color: var(--soft);
  font-size: 0.7rem;
  line-height: 1.35;
}

.legal-footer a {
  color: #9fffe7;
  text-decoration: none;
}

.legal-footer a:hover {
  text-decoration: underline;
}

.legal-section {
  display: none;
  position: fixed;
  inset: auto 16px 16px auto;
  z-index: 80;
  width: min(520px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 32, 0.97);
  box-shadow: var(--shadow-soft);
}

.legal-section:target {
  display: block;
}

.legal-section h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.legal-section p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

@keyframes ringPulse {
  0%,
  100% {
    opacity: var(--ring-opacity);
    stroke-width: 2.2;
  }

  50% {
    opacity: 0.18;
    stroke-width: 5.5;
  }
}

@keyframes dashFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -34;
  }
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (max-width: 1420px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    grid-template-areas:
      "left map"
      "right right";
  }

  .left-rail {
    grid-area: left;
  }

  .map-stage {
    grid-area: map;
    min-height: 800px;
  }

  .right-rail {
    grid-area: right;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) minmax(260px, 330px);
    grid-template-rows: auto;
  }

  .app-shell.right-collapsed {
    grid-template-areas: "left map";
  }
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
    padding: 8px;
  }

  .left-rail,
  .right-rail,
  .map-stage {
    margin-bottom: 8px;
  }

  .right-rail {
    display: grid;
    grid-template-columns: 1fr;
  }

  .map-stage {
    min-height: 680px;
  }

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

  .map-actions {
    justify-content: flex-start;
  }

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

@media (max-width: 560px) {
  .brand-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .segmented,
  .tool-grid,
  .edge-legend,
  .color-legend {
    grid-template-columns: 1fr;
  }
}

/* Master product expansion */
.landing-main::before {
  background:
    linear-gradient(115deg, rgba(21, 245, 186, 0.08), transparent 28%),
    linear-gradient(245deg, rgba(255, 61, 154, 0.07), transparent 34%),
    linear-gradient(rgba(120, 240, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 240, 255, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid #9fffee;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(21, 245, 186, 0.14);
}

.hero-copy h1 {
  font-size: 4.8rem;
}

.landing-section h2 {
  font-size: 2.55rem;
}

.text-cta.subtle {
  color: rgba(234, 246, 255, 0.72);
}

.product-stats {
  width: min(100% - 64px, 1780px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(120, 240, 255, 0.16);
  border-bottom: 1px solid rgba(120, 240, 255, 0.16);
  background: rgba(4, 10, 20, 0.52);
}

.product-stats span {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.product-stats span + span {
  border-left: 1px solid rgba(120, 240, 255, 0.12);
}

.product-stats strong {
  color: #dffdfa;
  font-size: 1rem;
}

.section-intro,
.wide-heading > p:last-child {
  max-width: 980px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.68;
}

.wide-heading {
  max-width: 1040px;
}

.compact-card-grid .info-card {
  min-height: 168px;
}

.card-symbol {
  min-width: 34px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--accent);
  color: #9fffee;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 800;
}

.plan-card {
  min-width: 0;
}

.plan-feature-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 4px 0;
}

.plan-feature-group {
  min-width: 0;
  padding-left: 14px;
  border-left: 2px solid rgba(120, 240, 255, 0.18);
}

.free-card .plan-feature-group {
  border-left-color: rgba(21, 245, 186, 0.42);
}

.pro-card .plan-feature-group {
  border-left-color: rgba(155, 124, 255, 0.46);
}

.plan-feature-group h4 {
  margin: 0 0 8px;
  color: rgba(234, 246, 255, 0.92);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.plan-feature-group ul {
  gap: 5px;
  padding-left: 16px;
  font-size: 0.79rem;
}

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

.scenario-card {
  min-width: 0;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid color-mix(in oklab, var(--scenario) 40%, transparent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--scenario) 10%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.scenario-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.scenario-heading > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in oklab, var(--scenario) 56%, transparent);
  border-radius: 50%;
  color: color-mix(in oklab, var(--scenario) 72%, white 28%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.67rem;
  font-weight: 800;
}

.scenario-card h3 {
  margin: 2px 0 0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.scenario-card > p {
  min-height: 68px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.scenario-card .chip-cloud {
  align-content: start;
  margin-bottom: 18px;
}

.scenario-card .chip-cloud span {
  font-size: 0.68rem;
}

.scenario-cta {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 0 12px;
  border-top: 1px solid color-mix(in oklab, var(--scenario) 42%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--scenario) 22%, transparent);
  color: color-mix(in oklab, var(--scenario) 72%, white 28%);
  font-size: 0.8rem;
  font-weight: 760;
  text-decoration: none;
}

.scenario-cta::after {
  content: "→";
  font-size: 1rem;
}

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

.professional-grid .info-card {
  min-height: 230px;
}

.section-cta {
  margin-top: 20px;
}

.myth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(120, 240, 255, 0.16);
  border-left: 1px solid rgba(120, 240, 255, 0.16);
}

.myth-grid span {
  min-height: 82px;
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border-right: 1px solid rgba(120, 240, 255, 0.16);
  border-bottom: 1px solid rgba(120, 240, 255, 0.16);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(234, 246, 255, 0.88);
  font-size: 0.86rem;
  line-height: 1.45;
}

.encoding-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(120, 240, 255, 0.14);
  border-left: 1px solid rgba(120, 240, 255, 0.14);
}

.encoding-grid article {
  min-height: 138px;
  padding: 16px;
  border-right: 1px solid rgba(120, 240, 255, 0.14);
  border-bottom: 1px solid rgba(120, 240, 255, 0.14);
  background: rgba(255, 255, 255, 0.024);
}

.encoding-grid h3,
.encoding-grid p {
  margin: 0;
}

.encoding-grid h3 {
  margin-top: 16px;
  font-size: 0.9rem;
}

.encoding-grid p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.encoding-swatch {
  width: 38px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  position: relative;
  color: #07101b;
  font-size: 0.65rem;
  font-weight: 900;
}

.color-code { background: linear-gradient(90deg, #ff8a00 0 20%, #2f7bff 20% 40%, #9ca6ff 40% 60%, #ff3b6b 60% 80%, #4ee5a4 80%); }
.node-code { width: 22px; border-radius: 50%; background: #7be0ff; box-shadow: 0 0 14px rgba(123, 224, 255, 0.55); }
.line-code::before,
.dashed-code::before,
.red-code::before { content: ""; width: 38px; border-top: 2px solid #79d893; }
.dashed-code::before { border-top-style: dashed; border-top-color: #c8a7ff; }
.red-code::before { border-top-color: #ff4f4f; }
.arrow-code::before { content: "→"; color: #8dc7ff; font-size: 1.55rem; }
.light-code { background: linear-gradient(90deg, rgba(255,255,255,0.12), #eaffff); }
.glow-code { border: 1px solid #15f5ba; background: rgba(21,245,186,0.16); box-shadow: 0 0 16px rgba(21,245,186,0.52); }
.badge-code { border-radius: 999px; background: #ffe06d; }
.gold-code { width: 22px; border-radius: 50%; background: #ffe06d; box-shadow: 0 0 15px rgba(255,224,109,0.62); }

.boundary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 176, 32, 0.22);
  border-bottom: 1px solid rgba(255, 176, 32, 0.22);
}

.boundary-grid article {
  min-height: 190px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255, 176, 32, 0.055), transparent);
}

.boundary-grid article + article {
  border-left: 1px solid rgba(255, 176, 32, 0.18);
}

.boundary-grid h3 {
  margin: 0 0 12px;
  color: #ffe3a0;
  font-size: 0.92rem;
}

.boundary-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.status-badges,
.status-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-badges span,
.status-metrics span,
.b2b-actions > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(120, 240, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(234, 246, 255, 0.82);
  font-size: 0.72rem;
}

.review-roadmap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: review-step;
  border-top: 1px solid rgba(120, 240, 255, 0.14);
  border-left: 1px solid rgba(120, 240, 255, 0.14);
}

.review-roadmap li {
  min-height: 112px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: center;
  column-gap: 10px;
  padding: 16px;
  border-right: 1px solid rgba(120, 240, 255, 0.14);
  border-bottom: 1px solid rgba(120, 240, 255, 0.14);
  counter-increment: review-step;
}

.review-roadmap li::before {
  content: counter(review-step, decimal-leading-zero);
  grid-row: 1 / span 2;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.review-roadmap strong {
  font-size: 0.84rem;
}

.review-roadmap span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

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

.b2b-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(120, 240, 255, 0.18);
  border-bottom: 1px solid rgba(120, 240, 255, 0.18);
}

.roadmap-grid article {
  min-height: 270px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.024);
}

.roadmap-grid article + article {
  border-left: 1px solid rgba(120, 240, 255, 0.14);
}

.roadmap-grid article > span {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.roadmap-grid h3 {
  margin: 12px 0 16px;
  font-size: 1rem;
}

.roadmap-grid ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 17px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.current-status-section {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: 28px;
  padding-bottom: 72px;
}

.status-definition-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(120, 240, 255, 0.15);
}

.status-definition-list div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(120, 240, 255, 0.15);
}

.status-definition-list dt {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.status-definition-list dd {
  margin: 0;
  font-size: 0.82rem;
}

.status-metrics {
  grid-column: 1 / -1;
}

.map-device-note {
  display: none;
  width: min(100% - 24px, 760px);
  margin: 0 auto 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-2);
  background: rgba(71, 167, 255, 0.08);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.map-device-note strong {
  color: #cde4ff;
}

.map-guide {
  border: 1px solid rgba(71, 167, 255, 0.18);
  border-radius: var(--radius-md);
  background: rgba(71, 167, 255, 0.055);
}

.map-guide summary {
  padding: 8px 10px;
  cursor: pointer;
  color: #cde4ff;
  font-size: 0.75rem;
  font-weight: 760;
}

.map-guide p {
  margin: 0;
  padding: 0 10px 10px;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.45;
}

.evidence-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(120, 240, 255, 0.12);
}

.evidence-review-grid > div {
  min-width: 0;
  padding: 9px;
  background: rgba(7, 15, 29, 0.98);
}

.evidence-review-grid dt {
  margin-bottom: 4px;
  color: var(--soft);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.evidence-review-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(234, 246, 255, 0.84);
  font-size: 0.7rem;
  line-height: 1.4;
}

.evidence-review-grid a {
  color: #9fffee;
}

.evidence-review-wide {
  grid-column: 1 / -1;
}

.legal-section a {
  color: #9fffee;
}

@media (max-width: 1260px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }

  .site-actions {
    display: none;
  }

  .site-nav {
    justify-content: flex-start;
    width: 100%;
  }

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

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

  .boundary-grid article + article,
  .boundary-grid article:nth-child(odd) {
    border-left: 1px solid rgba(255, 176, 32, 0.18);
  }

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

  .roadmap-grid article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(120, 240, 255, 0.14);
  }

  .roadmap-grid article:nth-child(4) {
    border-top: 1px solid rgba(120, 240, 255, 0.14);
  }
}

@media (max-width: 900px) {
  .hero-copy h1 {
    font-size: 3.4rem;
  }

  .landing-section h2 {
    font-size: 2rem;
  }

  .product-stats {
    width: min(100% - 24px, 1780px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-stats span:nth-child(odd) {
    border-left: 0;
  }

  .product-stats span:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(120, 240, 255, 0.12);
  }

  .plan-feature-columns,
  .myth-grid,
  .review-roadmap,
  .current-status-section {
    grid-template-columns: 1fr;
  }

  .status-metrics {
    grid-column: auto;
  }

  .map-device-note {
    display: block;
  }
}

@media (max-width: 700px) {
  .site-header {
    padding-inline: 12px;
  }

  .site-brand > span:not(.site-brand-mark) {
    display: none;
  }

  .site-nav {
    padding-right: 28px;
    mask-image: linear-gradient(90deg, #000 0 calc(100% - 28px), transparent);
  }

  .hero-copy h1 {
    font-size: 2.8rem;
    line-height: 1.02;
  }

  .landing-section h2 {
    font-size: 1.75rem;
    line-height: 1.12;
  }

  .preview-shell {
    min-height: 360px;
  }

  .scenario-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px 12px 0;
    scroll-snap-type: x mandatory;
    scrollbar-color: rgba(120, 240, 255, 0.24) transparent;
  }

  .scenario-card {
    flex: 0 0 min(86vw, 360px);
    min-height: 410px;
    scroll-snap-align: start;
  }

  .professional-grid,
  .b2b-grid,
  .encoding-grid,
  .boundary-grid,
  .roadmap-grid {
    grid-template-columns: 1fr;
  }

  .professional-grid .info-card {
    min-height: 0;
  }

  .boundary-grid article {
    min-height: 0;
  }

  .boundary-grid article + article,
  .boundary-grid article:nth-child(odd),
  .roadmap-grid article + article {
    border-left: 0;
    border-top: 1px solid rgba(120, 240, 255, 0.14);
  }

  .roadmap-grid article {
    min-height: 0;
  }

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

  .evidence-review-wide {
    grid-column: auto;
  }
}

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

/* Secure Pro workspace and navigator UX */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nav-link-button {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.nav-link-button:hover,
.nav-link-button.active {
  color: #bffff3;
}

.pro-nav-link span {
  margin-left: 4px;
  color: #c8a7ff;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.header-login-button,
.header-logout-button,
.plan-card button.ghost-cta {
  font: inherit;
  cursor: pointer;
}

.header-account-button {
  min-width: 142px;
  min-height: 42px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(120, 240, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.account-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(21, 245, 186, 0.88), rgba(71, 167, 255, 0.76), rgba(255, 61, 154, 0.72));
  color: #04121a;
  font-weight: 900;
}

.header-account-button > span:last-child {
  min-width: 0;
  display: grid;
}

.header-account-button strong,
.header-account-button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-account-button strong { font-size: 0.76rem; }
.header-account-button small { color: var(--muted); font-size: 0.64rem; }

.header-access-badge,
.access-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid rgba(120, 240, 255, 0.2);
  border-radius: 999px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 800;
}

.header-access-badge.pro,
.access-badge.active {
  border-color: rgba(155, 124, 255, 0.55);
  background: rgba(155, 124, 255, 0.13);
  color: #dccdff;
}

.landing-main {
  display: flex;
  flex-direction: column;
}

.landing-hero { order: 1; }
.product-stats { order: 2; }
#produkt { order: 3; }
#szenarien { order: 4; }
#free-pro { order: 5; }
#safety-system { order: 6; }
#professional { order: 7; }
#grenzen { order: 8; }
#roadmap { order: 9; }

#diagnosen,
#evidence,
#knotenpunkte,
#klarheit,
.landing-main > .evidence-section,
#visual-encoding,
#review,
#b2b,
#status {
  display: none;
}

#szenarien .scenario-card:nth-child(n + 5) {
  display: none;
}

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

#professional .professional-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#professional .info-card:nth-child(n + 4) {
  display: none;
}

#navigator {
  scroll-margin-top: 68px;
}

body.is-authenticated .landing-main {
  display: none;
}

.app-view-panel {
  display: none;
  min-height: calc(100vh - 68px);
  scroll-margin-top: 68px;
  background:
    linear-gradient(115deg, rgba(21, 245, 186, 0.055), transparent 32%),
    linear-gradient(245deg, rgba(155, 124, 255, 0.055), transparent 38%),
    #050713;
}

body.is-authenticated #navigator {
  display: none;
}

body.is-authenticated[data-app-view="map"] #navigator,
body.is-authenticated[data-app-view="stack"] #stackBuilderView,
body.is-authenticated[data-app-view="safety"] #appSafetyView,
body.is-authenticated[data-app-view="info"] #appInfoView,
body.is-authenticated[data-app-view="account"] #accountView {
  display: block;
}

body.is-anonymous[data-app-view="map"] .landing-main {
  display: none;
}

body[data-app-view="map"] .navigator-section {
  padding-top: 0;
}

.app-view-inner {
  width: min(100% - 48px, 1500px);
  margin: 0 auto;
  padding: 54px 0 72px;
}

.compact-app-view {
  width: min(100% - 48px, 1260px);
}

.app-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(120, 240, 255, 0.16);
}

.app-view-header h1 {
  margin: 6px 0 10px;
  font-size: 3.2rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.app-view-header p:last-child {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.access-banner {
  min-height: 60px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(155, 124, 255, 0.32);
  border-radius: 8px;
  background: rgba(155, 124, 255, 0.08);
}

.access-banner strong { color: #dccdff; }
.access-banner span { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.access-banner.is-unlocked { border-color: rgba(21, 245, 186, 0.38); background: rgba(21, 245, 186, 0.07); }
.access-banner.is-unlocked strong { color: #aaffea; }
.access-banner.is-unlocked button { display: none; }

.pro-safety-notice,
.info-boundary-band {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 22px;
  padding: 12px 14px;
  border-left: 3px solid #ffb020;
  background: rgba(255, 176, 32, 0.07);
  color: #f6dfb5;
  font-size: 0.78rem;
  line-height: 1.5;
}

.navigator-bridge-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid rgba(21, 245, 186, 0.25);
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(21, 245, 186, 0.09), rgba(71, 167, 255, 0.045) 56%, rgba(155, 124, 255, 0.08)),
    #091522;
}

.navigator-bridge-band h2 {
  margin: 5px 0 7px;
  font-size: 1.18rem;
}

.navigator-bridge-band p:last-child {
  max-width: 820px;
  margin: 0;
  color: #9bb3bf;
  font-size: 0.78rem;
  line-height: 1.55;
}

.stack-workbench {
  display: grid;
  grid-template-columns: minmax(360px, 0.88fr) minmax(420px, 1.12fr);
  gap: 18px;
  align-items: start;
}

.stack-selection-panel,
.stack-analysis-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(120, 240, 255, 0.16);
  border-radius: 8px;
  background: rgba(9, 18, 34, 0.78);
}

.panel-heading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.panel-heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(21, 245, 186, 0.32);
  border-radius: 50%;
  color: #9fffee;
  font: 800 0.68rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.panel-heading h2 { margin: 1px 0 4px; font-size: 1.15rem; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 0.78rem; }

.stack-pickers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-pickers [data-stack-group="supplements"] { order: 1; }
.stack-pickers [data-stack-group="medications"] { order: 2; }
.stack-pickers [data-stack-group="diagnoses"] { order: 3; }
.stack-pickers [data-stack-group="influences"] { order: 4; }
.stack-pickers [data-stack-group="knowledgePaths"] { order: 5; }
.stack-pickers [data-stack-group="domains"] { order: 6; }
.stack-pickers [data-stack-group="nodes"] { order: 7; }

.stack-picker-group {
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.stack-picker-group summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 760;
}

.stack-picker-group summary::-webkit-details-marker { display: none; }
.stack-picker-group summary small { color: var(--muted); font-weight: 600; }

.stack-filter {
  display: block;
  padding: 0 8px 8px;
}

.stack-filter input {
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 6px;
  background: rgba(2, 8, 18, 0.82);
  color: var(--text);
}

.stack-option-list {
  max-height: 250px;
  overflow: auto;
  padding: 0 8px 8px;
  scrollbar-color: rgba(120, 240, 255, 0.22) transparent;
}
.stack-option-category { display: grid; gap: 5px; }
.stack-option-category + .stack-option-category { margin-top: 7px; padding-top: 8px; border-top: 1px solid rgba(120, 240, 255, 0.1); }
.stack-option-category h4 { margin: 0 4px 2px; color: var(--muted); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0; }
.stack-option-category[hidden] { display: none; }

.stack-option {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-top: 1px solid rgba(120, 240, 255, 0.08);
  cursor: pointer;
}

.stack-option[hidden] { display: none; }
.stack-option:has(input:disabled) { cursor: not-allowed; opacity: 0.62; }
.stack-option input { accent-color: #15f5ba; }
.stack-option-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--option-color); box-shadow: 0 0 10px var(--option-color); }
.stack-option > span:nth-of-type(2) { min-width: 0; display: grid; gap: 2px; }
.stack-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; }
.stack-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.65rem; }

.stack-clear-button,
.sidebar-reset-button {
  min-height: 38px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  cursor: pointer;
}

.stack-clear-button:hover,
.sidebar-reset-button:hover { border-color: rgba(21, 245, 186, 0.38); color: var(--text); }
.stack-clear-button:disabled,
.sidebar-reset-button:disabled { cursor: not-allowed; opacity: 0.45; }

.stack-result-block {
  padding: 15px 0;
  border-top: 1px solid rgba(120, 240, 255, 0.12);
}

.stack-result-block h3 { margin: 0 0 10px; font-size: 0.86rem; }
.stack-result-block h4 { margin: 12px 0 7px; color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0; }
.stack-result-block p { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.5; }

.stack-secondary-contexts {
  margin-top: 10px;
  border-top: 1px solid rgba(120, 240, 255, 0.12);
}

.stack-secondary-contexts > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: #a8c2cc;
  font-size: 0.74rem;
  font-weight: 760;
  list-style: none;
}

.stack-secondary-contexts > summary::after {
  content: "+";
  color: #74e7d6;
  font-size: 1rem;
}

.stack-secondary-contexts[open] > summary::after { content: "−"; }
.stack-secondary-contexts > summary::-webkit-details-marker { display: none; }

.stack-result-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stack-result-chips span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid rgba(21, 245, 186, 0.25);
  border-radius: 999px;
  background: rgba(21, 245, 186, 0.06);
  color: #cffff2;
  font-size: 0.68rem;
}

.stack-result-chips.warning span { border-color: rgba(255, 176, 32, 0.32); background: rgba(255, 176, 32, 0.07); color: #ffe2ac; }
.stack-result-chips.boundary span { border-color: rgba(155, 124, 255, 0.32); background: rgba(155, 124, 255, 0.07); color: #decfff; }
.stack-context-list { margin: 11px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.7rem; line-height: 1.5; }
.stack-context-list li + li { margin-top: 5px; }
.stack-context-note { margin-top: 10px !important; }
.stack-apply-button { width: 100%; margin-top: 16px; }
.stack-apply-button:disabled { cursor: not-allowed; filter: grayscale(0.65); opacity: 0.5; }

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

.app-info-grid article {
  min-width: 0;
  min-height: 190px;
  padding: 18px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.app-info-grid article > span {
  color: #72f0d2;
  font: 800 0.66rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.app-info-grid h2 { margin: 24px 0 8px; font-size: 1rem; line-height: 1.25; }
.app-info-grid p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.55; }
.app-info-grid .pro-preview-tile { border-color: rgba(155, 124, 255, 0.34); background: rgba(155, 124, 255, 0.065); }
.safety-info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }

.account-view-inner { width: min(100% - 48px, 820px); }
.account-details { margin: 0 0 20px; border-top: 1px solid rgba(120, 240, 255, 0.15); }
.account-details > div { min-height: 58px; display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 16px; border-bottom: 1px solid rgba(120, 240, 255, 0.12); }
.account-details dt { color: var(--muted); font-size: 0.76rem; }
.account-details dd { margin: 0; color: var(--text); font-weight: 750; }
.danger-cta { border-color: rgba(255, 91, 120, 0.35) !important; color: #ffd1d9 !important; }

.login-modal {
  width: min(92vw, 480px);
  max-height: min(90vh, 680px);
  padding: 0;
  border: 1px solid rgba(120, 240, 255, 0.25);
  border-radius: 8px;
  background: #08101f;
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), 0 0 42px rgba(21, 245, 186, 0.08);
}

.login-modal::backdrop { background: rgba(1, 4, 10, 0.8); backdrop-filter: blur(7px); }
.login-form { display: grid; gap: 15px; padding: 24px; }
.login-modal-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.login-modal-header h2 { margin: 4px 0 0; font-size: 1.35rem; }
.modal-close-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(120, 240, 255, 0.16); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; font-size: 1.2rem; }
.login-form > p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.login-form label { display: grid; gap: 6px; color: #cde0ec; font-size: 0.73rem; }
.login-form input { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid rgba(120, 240, 255, 0.18); border-radius: 6px; outline: 0; background: rgba(2, 8, 18, 0.85); color: var(--text); }
.login-form input:focus { border-color: rgba(21, 245, 186, 0.62); box-shadow: 0 0 0 3px rgba(21, 245, 186, 0.09); }
.login-error { min-height: 20px; color: #ffb4c2 !important; }
.login-submit { width: 100%; min-height: 44px; border: 0; cursor: pointer; }
.login-submit:disabled { cursor: wait; opacity: 0.7; }
.login-safety-note { padding-top: 12px; border-top: 1px solid rgba(120, 240, 255, 0.12); }

.app-shell {
  grid-template-columns: minmax(340px, 360px) minmax(0, 1fr) minmax(300px, 360px);
}

.app-shell.right-collapsed {
  grid-template-columns: minmax(340px, 360px) minmax(0, 1fr);
}

.left-rail {
  gap: 10px;
  padding: 12px;
}

.sidebar-sticky-search {
  position: sticky;
  top: 0;
  z-index: 12;
  padding: 2px 0 8px;
  background: linear-gradient(180deg, rgba(8, 16, 29, 0.99) 0 82%, rgba(8, 16, 29, 0));
}

.search-box { min-height: 44px; }

.search-results {
  display: none;
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(120, 240, 255, 0.22);
  border-radius: 8px;
  background: rgba(5, 13, 25, 0.985);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.44);
  scrollbar-color: rgba(120, 240, 255, 0.22) transparent;
}

.search-results.visible { display: grid; gap: 9px; }
.search-results section { display: grid; gap: 3px; }
.search-results h3 { margin: 4px 5px; color: var(--accent); font: 800 0.64rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }
.search-results button { min-height: 38px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--text); cursor: pointer; text-align: left; font-size: 0.74rem; }
.search-results button:hover { background: rgba(120, 240, 255, 0.075); }
.search-results button.keyboard-active,
.search-results button:focus-visible { background: rgba(120, 240, 255, 0.12); outline: 1px solid rgba(120, 240, 255, 0.38); }
.search-results button > span { width: 8px; height: 8px; border-radius: 50%; background: var(--result-color); box-shadow: 0 0 9px var(--result-color); }
.search-results button strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 720; }
.search-results small { color: var(--muted); font-size: 0.62rem; white-space: nowrap; }
.search-result-summary { margin: 2px 5px 0; color: var(--muted); font-size: 0.62rem; }
.search-no-results { margin: 5px; color: var(--muted); font-size: 0.74rem; }

.control-section summary { min-height: 46px; padding: 9px 11px; }
.active-layer-section .active-summary { margin: 0 9px 8px; }
.active-layer-panel { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 9px 9px; }
.active-layer-chip { min-width: 0; min-height: 30px; display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid color-mix(in oklab, var(--layer-color) 44%, transparent); border-radius: 6px; background: color-mix(in oklab, var(--layer-color) 10%, transparent); color: var(--text); cursor: pointer; font-size: 0.68rem; }
.active-layer-chip > span { width: 7px; height: 7px; border-radius: 50%; background: var(--layer-color); }
.active-layer-chip b { color: var(--muted); font-size: 0.9rem; }
.active-layer-empty { margin: 0; color: var(--muted); font-size: 0.7rem; line-height: 1.45; }
.sidebar-reset-button { width: calc(100% - 18px); margin: 0 9px 9px; }

.chip-list,
.agent-list,
.domain-list {
  max-height: 360px;
  gap: 7px;
  padding: 0 9px 10px;
}

.diagnosis-list { max-height: 320px; }
.chip,
.domain-row { min-height: 46px; padding: 8px 9px; }

.agent-list { display: grid; }
.agent-group { display: grid; gap: 6px; }
.agent-group + .agent-group { margin-top: 8px; padding-top: 9px; border-top: 1px solid rgba(120, 240, 255, 0.1); }
.agent-group h4 { margin: 0 2px; color: var(--muted); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0; }
.agent-group-disclosure { display: block; }
.agent-group-disclosure > summary {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 24px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-radius: 6px;
  background: rgba(120, 240, 255, 0.035);
  color: var(--text);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 760;
  position: relative;
}
.agent-group-disclosure > summary::-webkit-details-marker { display: none; }
.agent-group-disclosure > summary::before {
  content: "›";
  position: absolute;
  left: 9px;
  color: var(--accent);
  transform: rotate(0deg);
  transition: transform 160ms ease;
}
.agent-group-disclosure[open] > summary::before { transform: rotate(90deg); }
.agent-group-disclosure > summary small {
  min-width: 24px;
  text-align: right;
  color: var(--muted);
  font-size: 0.62rem;
}
.agent-group-disclosure[open] > summary {
  border-color: rgba(21, 245, 186, 0.24);
  background: rgba(21, 245, 186, 0.055);
}
.agent-group-items { display: grid; gap: 6px; padding-top: 7px; }

.agent-chip {
  min-height: 64px;
  grid-template-columns: 9px minmax(0, 1fr) 28px;
  grid-template-areas: "dot copy toggle";
  align-items: center;
  gap: 9px;
  padding: 9px;
}

.agent-chip .chip-dot { grid-area: dot; margin-top: 0; }
.agent-row-copy {
  grid-area: copy;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
}
.agent-row-copy .agent-name {
  grid-area: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}
.agent-row-copy .agent-meta {
  grid-area: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.agent-row-copy .agent-meta span { min-height: 20px; display: inline-flex; align-items: center; padding: 2px 5px; border: 1px solid rgba(120, 240, 255, 0.12); border-radius: 4px; color: var(--muted); font-size: 0.6rem; line-height: 1.15; }
.agent-toggle { grid-area: toggle; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(120, 240, 255, 0.2); border-radius: 6px; color: var(--muted); font-size: 0.78rem; }
.agent-chip.active .agent-toggle { border-color: var(--chip-color); background: color-mix(in oklab, var(--chip-color) 18%, transparent); color: #fff; }
.pro-mini-badge { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 18px; padding: 1px 4px; border: 1px solid rgba(155, 124, 255, 0.45); border-radius: 4px; background: rgba(155, 124, 255, 0.12); color: #decfff; font-size: 0.56rem; font-weight: 850; }
.view-controls .segmented { margin: 0 9px 9px; }

.pro-detail-notice {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  padding: 10px;
  border-left: 3px solid #9b7cff;
  background: rgba(155, 124, 255, 0.08);
}
.pro-detail-notice strong { color: #decfff; font-size: 0.75rem; }
.pro-detail-notice span { color: var(--muted); font-size: 0.71rem; line-height: 1.45; }

@media (max-width: 1600px) {
  .app-shell,
  .app-shell.right-collapsed {
    grid-template-columns: minmax(300px, 320px) minmax(0, 1fr);
  }

  .app-shell {
    grid-template-areas:
      "left map"
      "right right";
    height: auto;
    min-height: 100vh;
  }

  .left-rail { grid-area: left; }
  .map-stage { grid-area: map; min-height: 800px; }
  .right-rail { grid-area: right; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px) minmax(260px, 330px); grid-template-rows: auto; }
  .app-shell.right-collapsed { grid-template-areas: "left map"; }
}

@media (max-width: 1080px) {
  .stack-workbench,
  .safety-info-grid { grid-template-columns: 1fr; }
  .app-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .safety-info-grid article { min-height: 0; }
  #professional .professional-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .app-shell,
  .app-shell.right-collapsed { display: block; }
  .left-rail { max-height: none; }
  .right-rail { grid-template-columns: 1fr; }
  .app-view-inner,
  .compact-app-view,
  .account-view-inner { width: min(100% - 24px, 1500px); padding: 30px 0 48px; }
  .app-view-header { display: grid; gap: 14px; }
  .app-view-header h1 { font-size: 2.3rem; }
  .access-banner { grid-template-columns: 1fr; }
  #szenarien .scenario-grid { display: flex; }
}

@media (max-width: 620px) {
  .app-info-grid { grid-template-columns: 1fr; }
  .app-info-grid article { min-height: 0; }
  .stack-selection-panel,
  .stack-analysis-panel { padding: 14px; }
  .account-details > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .pro-safety-notice,
  .info-boundary-band { align-items: flex-start; flex-direction: column; }
  .login-form { padding: 18px; }
  .header-access-badge { display: none; }
  #professional .professional-grid { grid-template-columns: 1fr; }
}

/* UX consolidation and Pro Core V1 */
[hidden] { display: none !important; }

.landing-hero { order: 1; }
.product-stats { order: 2; }
#diagnosen { order: 3; display: grid; }
#produkt { order: 4; }
#szenarien { order: 5; }
#free-pro { order: 6; }
#safety-system { order: 7; }
#professional { order: 8; }
#review { order: 9; display: block; }

#grenzen,
#roadmap { display: none; }

.app-shell,
.app-shell.right-collapsed {
  grid-template-columns: minmax(var(--sidebar-width-medium), var(--sidebar-width-large)) minmax(0, 1fr) minmax(320px, var(--detail-rail-width));
}

.app-shell.right-collapsed {
  grid-template-columns: minmax(var(--sidebar-width-medium), var(--sidebar-width-large)) minmax(0, 1fr);
}

.control-section-heading,
.sidebar-pane-heading {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.control-section-heading strong,
.sidebar-pane-heading strong {
  font-size: 0.78rem;
}

.active-layer-section {
  display: grid;
  border: 1px solid rgba(120, 240, 255, 0.15);
  border-radius: 8px;
  background: rgba(2, 9, 20, 0.48);
}

.active-layer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 9px 8px;
}

.sidebar-action-button,
.sidebar-reset-button {
  min-height: 40px;
  border: 1px solid rgba(120, 240, 255, 0.15);
  border-radius: 6px;
  background: rgba(120, 240, 255, 0.045);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.68rem;
}

.sidebar-action-button:hover:not(:disabled),
.sidebar-reset-button:hover:not(:disabled) {
  border-color: rgba(21, 245, 186, 0.42);
  color: var(--text);
}

.sidebar-action-button:disabled,
.sidebar-reset-button:disabled { opacity: 0.44; cursor: default; }
.sidebar-action-button.pro-action { grid-column: 1 / -1; }
.sidebar-action-button.pro-action span { color: #decfff; font-size: 0.56rem; }

.sidebar-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 8px;
  background: rgba(2, 9, 20, 0.62);
}

.sidebar-type-tabs button {
  min-width: 0;
  min-height: 40px;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.65rem;
  line-height: 1.2;
}

.sidebar-type-tabs button[aria-selected="true"] {
  border-color: rgba(21, 245, 186, 0.34);
  background: rgba(21, 245, 186, 0.1);
  color: var(--text);
}

.sidebar-pane {
  min-height: 0;
  display: grid;
  align-content: start;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 8px;
  background: rgba(2, 9, 20, 0.42);
}

.sidebar-pane > .chip-list,
.sidebar-pane > .agent-list,
.sidebar-pane > .domain-list,
.sidebar-pane > .node-filter-list {
  max-height: min(46vh, 560px);
  overflow: auto;
  padding: 0 8px 9px;
  scrollbar-color: rgba(120, 240, 255, 0.24) transparent;
}

.agent-group-disclosure > summary { min-height: 44px; }
.agent-group-items { contain: content; }

.sidebar-entry {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: stretch;
  gap: 5px;
}

.sidebar-entry + .sidebar-entry { margin-top: 6px; }
.sidebar-entry .chip,
.sidebar-entry .agent-chip,
.sidebar-entry .domain-row,
.sidebar-entry .node-filter-row { min-height: 52px; }

.sidebar-info-button {
  width: 40px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 240, 255, 0.15);
  border-radius: 6px;
  background: rgba(120, 240, 255, 0.035);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
}

.sidebar-info-button:hover { border-color: rgba(71, 167, 255, 0.48); color: var(--text); }
.agent-row-copy .agent-meta span:nth-child(n + 3) { display: none; }

.node-filter-list { display: grid; gap: 7px; }
.node-filter-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-radius: 6px;
  background: rgba(120, 240, 255, 0.035);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.node-filter-row > span:first-child { width: 9px; height: 9px; border-radius: 3px; background: var(--node-row-color); }
.node-filter-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; }
.node-filter-row small { color: var(--muted); font-size: 0.6rem; }

.sidebar-drawer-close,
.sidebar-drawer-button,
.sidebar-drawer-backdrop { display: none; }

.map-title-group { display: flex; align-items: center; gap: 9px; }
.complexity-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(120, 240, 255, 0.15);
  border-radius: 7px;
  background: rgba(2, 9, 20, 0.7);
}
.complexity-control button {
  min-height: 34px;
  padding: 4px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.67rem;
}
.complexity-control button[aria-selected="true"] { background: rgba(71, 167, 255, 0.16); color: #dcecff; }

.node-review-ring {
  fill: none;
  stroke: var(--review-color, rgba(142, 168, 184, 0.68));
  stroke-width: 1.5;
  stroke-dasharray: var(--review-dash, none);
  opacity: 0.82;
  pointer-events: none;
}
.node-safety-symbol { fill: #ffcf66; font-size: 13px; font-weight: 900; pointer-events: none; }
.edge.path-primary { stroke-width: 2.2; }
.edge.path-secondary { stroke-width: 1.35; }
.edge.path-indirect { stroke-dasharray: 3 7; }
.edge.path-hypothesis { stroke-dasharray: 7 8; opacity: 0.55; }
.edge.path-safety { stroke-dasharray: 2 6; }

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.detail-actions button {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(120, 240, 255, 0.2);
  border-radius: 5px;
  background: rgba(120, 240, 255, 0.055);
  color: #dcefff;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 720;
}

.detail-actions button:hover,
.detail-actions button:focus-visible {
  border-color: rgba(120, 240, 255, 0.48);
  background: rgba(120, 240, 255, 0.11);
  outline: none;
}

body[data-app-view="catalog"] #catalog,
body.is-authenticated[data-app-view="catalog"] #catalog { display: block; }
body.is-anonymous[data-app-view="catalog"] .landing-main,
body.is-anonymous[data-app-view="catalog"] #navigator { display: none; }

.catalog-view-inner { width: min(100% - 48px, 1560px); }
.coverage-summary-band {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(260px, 1.1fr) auto auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 18px;
  border-block: 1px solid rgba(120, 240, 255, 0.16);
  background: rgba(5, 13, 25, 0.55);
}
.coverage-summary-band h2 { margin: 4px 0 0; font-size: 1.18rem; }
.coverage-summary-band > p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }
.coverage-summary-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.coverage-summary-stats span { min-width: 72px; display: grid; gap: 2px; padding: 7px 8px; border: 1px solid rgba(120, 240, 255, 0.13); border-radius: 6px; color: var(--muted); font-size: 0.58rem; }
.coverage-summary-stats strong { color: var(--text); font-size: 0.9rem; }

.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(5, minmax(130px, 0.7fr));
  gap: 8px;
  margin-bottom: 10px;
}
.catalog-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 0.62rem; }
.catalog-toolbar input,
.catalog-toolbar select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(120, 240, 255, 0.16);
  border-radius: 6px;
  outline: 0;
  background: rgba(2, 9, 20, 0.82);
  color: var(--text);
}
.catalog-toolbar input:focus,
.catalog-toolbar select:focus { border-color: rgba(21, 245, 186, 0.48); box-shadow: 0 0 0 3px rgba(21, 245, 186, 0.08); }

.catalog-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 7px 0 12px;
}
.catalog-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 6px 13px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 6px;
  background: rgba(120, 240, 255, 0.035);
  color: var(--muted);
  cursor: pointer;
}
.catalog-tabs button[aria-selected="true"] { border-color: rgba(21, 245, 186, 0.38); background: rgba(21, 245, 186, 0.09); color: var(--text); }

.catalog-results { display: grid; gap: 7px; }
.catalog-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-left: 3px solid var(--catalog-color);
  border-radius: 7px;
  background: rgba(5, 13, 25, 0.62);
}
.catalog-row-main { min-width: 0; display: grid; gap: 8px; }
.catalog-row-title { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; gap: 9px; }
.catalog-row-title > span { width: 9px; height: 9px; border-radius: 3px; background: var(--catalog-color); }
.catalog-row h2 { margin: 0; font-size: 0.92rem; }
.catalog-row-title p { margin: 2px 0 0; color: var(--muted); font-size: 0.65rem; }
.catalog-row-description { max-width: 1040px; margin: 0; color: #b4c8d5; font-size: 0.73rem; line-height: 1.5; }
.catalog-row-meta,
.catalog-safety-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.catalog-row-meta span,
.catalog-safety-badges span { min-height: 22px; display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid rgba(120, 240, 255, 0.11); border-radius: 4px; color: var(--muted); font-size: 0.58rem; }
.catalog-safety-badges span { border-color: rgba(255, 176, 32, 0.26); color: #ffd9a1; }
.catalog-row-actions { display: flex; align-items: center; gap: 6px; }
.catalog-icon-button,
.catalog-map-button,
.catalog-load-more {
  min-height: 40px;
  border: 1px solid rgba(120, 240, 255, 0.16);
  border-radius: 6px;
  background: rgba(120, 240, 255, 0.045);
  color: var(--text);
  cursor: pointer;
}
.catalog-icon-button { width: 40px; padding: 0; }
.catalog-map-button { padding: 0 11px; white-space: nowrap; }
.pro-catalog-action { border-color: rgba(155, 124, 255, 0.34); color: #decfff; }
.catalog-load-more { width: 100%; margin-top: 5px; }
.catalog-empty { padding: 30px; border: 1px dashed rgba(120, 240, 255, 0.18); color: var(--muted); text-align: center; }

.coverage-matrix { display: grid; gap: 7px; margin-top: 22px; }
.coverage-row {
  padding: 13px 14px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-left: 3px solid #47a7ff;
  border-radius: 7px;
  background: rgba(5, 13, 25, 0.62);
}
.coverage-row.status-core { border-left-color: #44e58a; }
.coverage-row.status-extended { border-left-color: #47a7ff; }
.coverage-row.status-partial { border-left-color: #ffb020; }
.coverage-row.status-roadmap { border-left-color: #9b7cff; }
.coverage-row.status-out_of_scope { border-left-color: #668092; }
.coverage-row-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.coverage-row h3 { margin: 0; font-size: 0.88rem; }
.coverage-row-heading span { color: var(--muted); font-size: 0.62rem; }
.coverage-row dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.coverage-row dl > div { display: grid; gap: 3px; }
.coverage-row dt { color: var(--soft); font-size: 0.58rem; text-transform: uppercase; }
.coverage-row dd { margin: 0; color: #b7cbd7; font-size: 0.68rem; line-height: 1.4; }
.coverage-row > p { margin: 10px 0 0; color: var(--muted); font-size: 0.64rem; }

.review-overview { margin: 22px 0; padding: 16px 0; border-block: 1px solid rgba(120, 240, 255, 0.15); }
.review-overview h2 { margin: 4px 0 0; font-size: 1.1rem; }
.review-overview-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.review-overview-stats span { display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(120, 240, 255, 0.13); border-radius: 6px; color: var(--muted); font-size: 0.64rem; }
.review-overview-stats strong { color: var(--text); font-size: 1.1rem; }

body.is-admin .account-view-inner { width: min(100% - 48px, 1500px); }

.admin-panel {
  margin: 26px 0;
  padding: 20px 0;
  border-block: 1px solid rgba(120, 240, 255, 0.18);
}

.admin-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
}

.admin-panel-header h2 { margin: 4px 0 6px; font-size: 1.35rem; }
.admin-panel-header p:last-child { max-width: 760px; margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }
.admin-refresh-button { min-height: 38px; }

.admin-tabs {
  display: flex;
  gap: 2px;
  margin-top: 20px;
  border-bottom: 1px solid rgba(120, 240, 255, 0.16);
}

.admin-tabs button {
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 760;
}

.admin-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); background: rgba(21, 245, 186, 0.05); }
.admin-tabs button:focus-visible { outline: 2px solid rgba(120, 240, 255, 0.6); outline-offset: -2px; }
.admin-status { min-height: 22px; margin: 11px 0 0; color: var(--muted); font-size: 0.72rem; }
.admin-status[data-tone="error"] { color: #ffb4c2; }
.admin-status[data-tone="success"] { color: #8fffdc; }
.admin-pane { padding: 10px 0 0; }

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(120, 240, 255, 0.13);
  border-left: 1px solid rgba(120, 240, 255, 0.13);
}

.admin-metrics > div {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border-right: 1px solid rgba(120, 240, 255, 0.13);
  border-bottom: 1px solid rgba(120, 240, 255, 0.13);
  background: rgba(120, 240, 255, 0.025);
}

.admin-metrics strong { color: var(--text); font-size: 1.3rem; }
.admin-metrics span { color: var(--muted); font-size: 0.66rem; line-height: 1.35; }

.admin-filter-bar {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(6, minmax(110px, 0.75fr)) auto;
  align-items: end;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-filter-bar label,
.admin-user-form label { min-width: 0; display: grid; gap: 5px; color: #cde0ec; font-size: 0.68rem; }
.admin-filter-bar input,
.admin-filter-bar select,
.admin-user-form input,
.admin-user-form select,
.admin-user-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid rgba(120, 240, 255, 0.18);
  border-radius: 5px;
  outline: 0;
  background: rgba(2, 8, 18, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
}

.admin-filter-bar input:focus,
.admin-filter-bar select:focus,
.admin-user-form input:focus,
.admin-user-form select:focus,
.admin-user-form textarea:focus { border-color: rgba(21, 245, 186, 0.62); box-shadow: 0 0 0 3px rgba(21, 245, 186, 0.09); }
.admin-filter-submit { min-height: 40px; padding-inline: 14px; border: 0; cursor: pointer; }

.admin-table-wrap { width: 100%; overflow-x: auto; border: 1px solid rgba(120, 240, 255, 0.15); }
.admin-table { width: 100%; min-width: 940px; border-collapse: collapse; font-size: 0.7rem; }
.admin-table th { padding: 10px; border-bottom: 1px solid rgba(120, 240, 255, 0.18); background: rgba(120, 240, 255, 0.04); color: var(--muted); text-align: left; font-size: 0.62rem; text-transform: uppercase; }
.admin-table td { padding: 10px; border-bottom: 1px solid rgba(120, 240, 255, 0.09); color: #cfe0eb; vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td:first-child { min-width: 180px; }
.admin-table td:first-child strong,
.admin-table td:first-child small { display: block; }
.admin-table td:first-child small { max-width: 220px; margin-top: 4px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.admin-empty-cell { padding: 24px !important; color: var(--muted) !important; text-align: center; }

.admin-badge { min-height: 23px; display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid rgba(120, 240, 255, 0.16); border-radius: 4px; color: var(--muted); white-space: nowrap; }
.admin-badge[data-tone="active"] { border-color: rgba(21, 245, 186, 0.32); color: #8fffdc; }
.admin-badge[data-tone="disabled"] { border-color: rgba(255, 91, 120, 0.32); color: #ffb4c2; }
.admin-badge[data-tone="pending"] { border-color: rgba(255, 195, 91, 0.35); color: #ffd58b; }
.admin-badge[data-tone="admin"],
.admin-badge[data-tone="pro"] { border-color: rgba(155, 124, 255, 0.42); color: #decfff; }
.admin-edit-button { min-height: 32px; padding: 0 10px; border: 1px solid rgba(120, 240, 255, 0.22); border-radius: 5px; background: rgba(120, 240, 255, 0.05); color: var(--text); cursor: pointer; font: inherit; }
.admin-edit-button:hover { border-color: rgba(21, 245, 186, 0.5); background: rgba(21, 245, 186, 0.08); }

.admin-pagination { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; }
.admin-pagination span { color: var(--muted); font-size: 0.7rem; text-align: center; }
.admin-pagination button:disabled { cursor: not-allowed; opacity: 0.42; }

.admin-user-dialog { width: min(94vw, 840px); max-height: 92vh; overflow: auto; }
.admin-user-form { display: grid; gap: 16px; padding: 24px; }
.admin-user-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-user-form textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.admin-checkbox { display: flex !important; grid-template-columns: none; flex-direction: row; align-items: center; gap: 8px !important; }
.admin-checkbox input { width: 18px; min-height: 18px; accent-color: var(--accent); }
.admin-user-metadata { padding-block: 14px; border-block: 1px solid rgba(120, 240, 255, 0.14); }
.admin-user-metadata h3,
.admin-user-metadata h4 { margin: 0 0 10px; font-size: 0.78rem; }
.admin-user-metadata h4 { margin-top: 16px; color: var(--muted); }
.admin-metadata-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: rgba(120, 240, 255, 0.12); }
.admin-metadata-list > div { min-height: 52px; display: grid; align-content: center; gap: 4px; padding: 8px; background: #08101f; }
.admin-metadata-list dt { color: var(--muted); font-size: 0.62rem; }
.admin-metadata-list dd { margin: 0; color: var(--text); font-size: 0.76rem; font-weight: 760; }
.admin-audit-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.admin-audit-list li { display: grid; gap: 3px; padding-left: 10px; border-left: 2px solid rgba(120, 240, 255, 0.18); }
.admin-audit-list strong { color: var(--text); font-size: 0.68rem; }
.admin-audit-list span { color: var(--muted); font-size: 0.62rem; line-height: 1.4; }
.admin-self-demotion { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(255, 91, 120, 0.36); background: rgba(255, 91, 120, 0.06); }
.admin-self-demotion strong { color: #ffd1d9; font-size: 0.78rem; }
.admin-self-demotion p { margin: 0; color: var(--muted); font-size: 0.7rem; line-height: 1.45; }
.admin-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }
.admin-dialog-actions button { min-height: 40px; cursor: pointer; }
.admin-dialog-actions .primary-cta { border: 0; padding-inline: 18px; }
.admin-dialog-actions button:disabled { cursor: wait; opacity: 0.6; }

.compendium-admin-section + .compendium-admin-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(120, 240, 255, 0.14); }
.compendium-admin-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.compendium-admin-heading h3 { margin: 0 0 5px; font-size: 0.92rem; }
.compendium-admin-heading p { max-width: 720px; margin: 0; color: var(--muted); font-size: 0.7rem; line-height: 1.45; }
.compendium-admin-heading > span { flex: 0 0 auto; color: var(--muted); font: 700 0.62rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.compendium-upload-form {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) 90px minmax(170px, 1.2fr) minmax(100px, 0.6fr) minmax(180px, 1fr);
  align-items: end;
  gap: 9px;
}
.compendium-upload-form label,
.compendium-filter-bar label { min-width: 0; display: grid; gap: 5px; color: #cde0ec; font-size: 0.68rem; }
.compendium-upload-form input,
.compendium-upload-form select,
.compendium-filter-bar input,
.compendium-filter-bar select {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid rgba(120, 240, 255, 0.18);
  border-radius: 5px;
  outline: 0;
  background: rgba(2, 8, 18, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 0.7rem;
}
.compendium-upload-form input[type="file"] { padding: 8px; }
.compendium-upload-form input:focus,
.compendium-upload-form select:focus,
.compendium-filter-bar input:focus,
.compendium-filter-bar select:focus { border-color: rgba(21, 245, 186, 0.62); box-shadow: 0 0 0 3px rgba(21, 245, 186, 0.09); }
.compendium-reason-field { grid-column: 1 / span 4; }
.compendium-upload-form > button { min-height: 40px; border: 0; cursor: pointer; }
.compendium-upload-form > button:disabled { cursor: wait; opacity: 0.6; }
.compendium-filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) 150px 120px auto; align-items: end; gap: 9px; margin-bottom: 8px; }
.compendium-filter-bar button { min-height: 40px; }
.compendium-table { min-width: 920px; }
.compendium-table td:first-child strong,
.compendium-table td:first-child small,
.compendium-table td:nth-child(2) strong,
.compendium-table td:nth-child(2) small { display: block; }
.compendium-table small { margin-top: 4px; color: var(--muted); font-size: 0.61rem; }
.compendium-row-actions { min-width: 250px; display: flex; flex-wrap: wrap; gap: 5px; }
.admin-edit-button.danger { border-color: rgba(255, 91, 120, 0.35); color: #ffd1d9; }
.admin-badge[data-tone="published"] { border-color: rgba(21, 245, 186, 0.36); color: #8fffdc; }
.admin-badge[data-tone="draft"] { border-color: rgba(255, 195, 91, 0.35); color: #ffd58b; }
.admin-badge[data-tone="archived"] { color: var(--muted); }
.compendium-action-copy { margin: 0; color: var(--muted); font-size: 0.74rem; line-height: 1.5; }

@media (max-width: 1100px) {
  .compendium-upload-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compendium-reason-field { grid-column: 1 / -1; }
  .compendium-upload-form > button { grid-column: 1 / -1; }
}

@media (max-width: 1200px) {
  .admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-filter-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-filter-search { grid-column: span 2; }
}

@media (max-width: 700px) {
  body.is-admin .account-view-inner { width: min(100% - 24px, 1500px); }
  .admin-panel-header { grid-template-columns: 1fr; }
  .admin-refresh-button { justify-self: start; }
  .admin-tabs { overflow-x: auto; }
  .admin-tabs button { flex: 1 0 auto; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-filter-search { grid-column: 1 / -1; }
  .admin-filter-submit { grid-column: 1 / -1; }
  .admin-user-form { padding: 18px; }
  .admin-user-fields { grid-template-columns: 1fr; }
  .admin-metadata-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compendium-admin-heading { display: grid; }
  .compendium-upload-form,
  .compendium-filter-bar { grid-template-columns: 1fr; }
  .compendium-reason-field,
  .compendium-upload-form > button { grid-column: auto; }
}

@media (max-width: 1600px) {
  .app-shell,
  .app-shell.right-collapsed { grid-template-columns: minmax(350px, var(--sidebar-width-large)) minmax(0, 1fr); }
  .catalog-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-search { grid-column: span 2; }
  .coverage-summary-band { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .catalog-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coverage-row dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-row { grid-template-columns: 1fr; }
  .catalog-row-actions { justify-content: flex-end; }
}

@media (max-width: 860px) {
  .sidebar-drawer-button { display: grid; }
  .sidebar-drawer-close { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(120, 240, 255, 0.16); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: var(--text); }
  .app-shell .left-rail,
  .app-shell.right-collapsed .left-rail {
    position: fixed;
    inset: 68px auto 0 0;
    z-index: 70;
    width: min(92vw, 400px);
    max-height: calc(100vh - 68px);
    margin: 0;
    border-radius: 0 8px 8px 0;
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }
  body.sidebar-drawer-open .app-shell .left-rail { transform: translateX(0); }
  .sidebar-drawer-backdrop {
    position: fixed;
    inset: 68px 0 0;
    z-index: 65;
    width: 100%;
    border: 0;
    background: rgba(1, 4, 10, 0.72);
  }
  body.sidebar-drawer-open .sidebar-drawer-backdrop { display: block; }
  .map-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .map-title-group { justify-content: space-between; }
  .complexity-control { order: 3; }
  .map-actions { justify-content: flex-end; }
  .coverage-summary-band { grid-template-columns: 1fr; }
  .catalog-view-inner { width: min(100% - 20px, 1560px); }
  .review-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  #diagnosen { grid-template-columns: 1fr; }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .catalog-search { grid-column: auto; }
  .catalog-row-actions { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .coverage-row dl { grid-template-columns: 1fr; }
  .coverage-summary-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .complexity-control button { padding-inline: 5px; }
  .review-overview-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .left-rail { transition: none; }
}

/* Master UX and brand pass */
:root { --map-sidebar-width: 380px; }

button { background-image: none !important; }

.primary-cta {
  border-color: #22b9d5;
  background: #087fa8;
  color: #f7ffff;
  box-shadow: 0 8px 22px rgba(0, 126, 168, 0.22);
}
.primary-cta:hover,
.primary-cta:focus-visible { border-color: #72e1ec; background: #0a91bb; }
.ghost-cta { border-color: rgba(151, 183, 205, 0.3); background: #101827; color: #e6f1f7; }
.ghost-cta:hover,
.ghost-cta:focus-visible { border-color: rgba(114, 216, 240, 0.52); background: #162236; }
.pro-cta,
.safety-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 760;
  text-decoration: none;
  white-space: nowrap;
}
.pro-cta { border: 1px solid #967de0; background: #28213f; color: #eee9ff; }
.pro-cta:hover,
.pro-cta:focus-visible { border-color: #bba8f2; background: #352a55; }
.safety-cta { border: 1px solid #d6a64d; background: #3a2c18; color: #ffe2a7; }
.safety-cta:hover,
.safety-cta:focus-visible { border-color: #efc36e; background: #49381e; }
.header-account-button { background: #101d2b; }

.site-brand-logo,
.brand-logo,
.hero-brand-lockup img,
.login-brand img {
  display: block;
  aspect-ratio: 1;
  object-fit: contain;
  flex: 0 0 auto;
}
.site-brand-logo { width: 42px; height: 42px; }
.site-brand-copy { display: grid; gap: 1px; }
.site-brand-copy strong { font-size: 0.96rem; line-height: 1.1; }
.site-brand-copy small { color: var(--muted); font-size: 0.58rem; font-weight: 650; }
.hero-brand-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hero-brand-lockup img { width: clamp(84px, 7vw, 112px); height: auto; }
.hero-brand-lockup > span { display: grid; gap: 3px; }
.hero-brand-lockup strong { font-size: 1.15rem; }
.hero-brand-lockup small { color: #8fc6d8; font-size: 0.74rem; }
.brand-card { grid-template-columns: 62px minmax(0, 1fr) auto; background: rgba(9, 20, 34, 0.84); }
.brand-logo { width: 62px; height: 62px; }
.login-brand { display: flex; align-items: center; gap: 11px; }
.login-brand img { width: 54px; height: 54px; }
.login-brand .section-kicker { margin-bottom: 4px; }

.pro-early-badge,
.feature-available h4 span,
.catalog-pro-preview {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 21px;
  padding: 2px 6px;
  border: 1px solid rgba(166, 139, 232, 0.42);
  border-radius: 4px;
  background: rgba(116, 87, 177, 0.13);
  color: #d8cbf8;
  font-size: 0.56rem;
  font-weight: 760;
}
.plan-label .pro-early-badge { margin-left: 7px; vertical-align: middle; }
.feature-available h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.early-access-note { margin: 2px 0 14px; color: var(--muted); font-size: 0.7rem; }

.app-shell { position: relative; }
.sidebar-collapse-button,
.sidebar-reopen-button {
  min-height: 38px;
  border: 1px solid rgba(120, 240, 255, 0.17);
  border-radius: 6px;
  background: #0d1927;
  color: #b9d0dc;
  cursor: pointer;
  font-size: 0.68rem;
}
.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible,
.sidebar-reopen-button:hover,
.sidebar-reopen-button:focus-visible { border-color: rgba(114, 216, 240, 0.5); color: #effbff; }
.sidebar-reopen-button {
  position: absolute;
  top: 22px;
  left: 16px;
  z-index: 15;
  width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 1rem;
}
.sidebar-resize-handle {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: calc(12px + var(--map-sidebar-width) + 3px);
  z-index: 12;
  width: 8px;
  border-radius: 4px;
  cursor: col-resize;
  touch-action: none;
}
.sidebar-resize-handle::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 2px;
  background: rgba(114, 216, 240, 0.18);
  transition: background 120ms ease;
}
.sidebar-resize-handle:hover::before,
.sidebar-resize-handle:focus-visible::before,
body.sidebar-resizing .sidebar-resize-handle::before { background: rgba(114, 216, 240, 0.7); }
.sidebar-resize-handle:focus-visible { outline: 2px solid #72d8f0; outline-offset: 2px; }
body.sidebar-resizing { cursor: col-resize; user-select: none; }

.influence-chip {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  grid-template-areas: "dot copy toggle";
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-left: 3px solid color-mix(in oklab, var(--chip-color) 70%, #ffffff 8%);
  border-radius: 6px;
  background: rgba(10, 22, 34, 0.76);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.influence-chip.active { border-color: var(--chip-color); background: color-mix(in oklab, var(--chip-color) 12%, #08121f); }
.influence-symbol { grid-area: dot; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--chip-color); border-radius: 4px; color: var(--chip-color); font-size: 0.64rem; font-weight: 850; }
.influence-chip.active .agent-toggle { border-color: var(--chip-color); background: color-mix(in oklab, var(--chip-color) 18%, transparent); color: #fff; }

.map-toolbar { grid-template-columns: minmax(150px, 1fr) auto auto auto; }
.map-visibility-control { position: relative; z-index: 25; }
.map-visibility-control > summary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(120, 240, 255, 0.16);
  border-radius: 6px;
  background: #0d1927;
  color: #c7dbe5;
  cursor: pointer;
  font-size: 0.68rem;
  list-style: none;
}
.map-visibility-control > summary::-webkit-details-marker { display: none; }
.map-visibility-control[open] > summary { border-color: rgba(114, 216, 240, 0.5); color: #f2fbff; }
.map-visibility-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 620px);
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(120, 240, 255, 0.2);
  border-radius: 7px;
  background: #07111e;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.map-visibility-rows { display: grid; gap: 5px; }
.map-visibility-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.visibility-toggle,
.visibility-only,
.map-visibility-actions button {
  min-height: 36px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 5px;
  background: #0c1825;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.64rem;
}
.visibility-toggle { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 5px 8px; text-align: left; }
.visibility-toggle.active { border-color: rgba(77, 200, 218, 0.44); background: #102532; color: #e8faff; }
.visibility-toggle small { color: #8fb2c1; }
.visibility-symbol { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 4px; font-size: 0.58rem; font-weight: 850; }
.visibility-only { padding: 0 9px; }
.visibility-only:hover,
.map-visibility-actions button:hover { border-color: rgba(114, 216, 240, 0.46); color: #effbff; }
.map-visibility-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.map-visibility-actions button:last-child { grid-column: 1 / -1; }
.map-visibility-actions button.active { border-color: #aa8fe9; background: #28213f; color: #eee9ff; }
.map-visibility-status { margin: 9px 2px 0; color: #8da9b8; font-size: 0.61rem; line-height: 1.45; }
.semantic-density-setting {
  display: grid;
  gap: 6px;
  margin-top: 9px;
  padding: 8px;
  border: 1px solid rgba(120, 240, 255, 0.1);
  border-radius: 6px;
  background: rgba(9, 22, 34, 0.78);
}
.semantic-density-setting > span {
  color: #9db6c1;
  font-size: 0.59rem;
  font-weight: 760;
}
.semantic-density-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.semantic-density-control button {
  min-height: 31px;
  padding: 0 7px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 4px;
  background: #0c1825;
  color: #8faab7;
  cursor: pointer;
  font-size: 0.58rem;
}
.semantic-density-control button.active {
  border-color: rgba(84, 216, 232, 0.52);
  background: #12303a;
  color: #effdff;
}

.map-exploration-controls {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(120, 240, 255, 0.12);
}

.map-live-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.map-live-status span {
  min-width: 0;
  padding: 7px 8px;
  border-left: 2px solid #54d8e8;
  background: rgba(84, 216, 232, 0.08);
  color: #d8f8fb;
  font-size: 0.61rem;
  line-height: 1.35;
}

.map-live-status span:last-child {
  border-left-color: #e58ac8;
  background: rgba(229, 138, 200, 0.07);
}

.map-exploration-section,
.node-type-visibility {
  padding: 8px;
  border: 1px solid rgba(120, 240, 255, 0.1);
  border-radius: 6px;
  background: rgba(12, 24, 37, 0.7);
}

.map-exploration-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: #dceff5;
  font-size: 0.65rem;
}

.map-exploration-heading span {
  min-width: 0;
  overflow: hidden;
  color: #8fb2c1;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.map-preset-grid button,
.map-segmented-control button {
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 5px;
  background: #0a1623;
  color: #98b1bf;
  cursor: pointer;
  font-size: 0.6rem;
}

.map-preset-grid button:hover,
.map-segmented-control button:hover {
  border-color: rgba(114, 216, 240, 0.48);
  color: #effbff;
}

.map-preset-grid button.active,
.map-segmented-control button.active {
  border-color: rgba(84, 216, 232, 0.58);
  background: rgba(84, 216, 232, 0.13);
  color: #effdff;
}

.map-segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.map-segmented-control button:disabled {
  cursor: default;
  opacity: 0.38;
}

.map-focus-section {
  border-color: rgba(229, 138, 200, 0.25);
  background: rgba(229, 138, 200, 0.055);
}

.node-type-visibility {
  padding: 0;
  overflow: hidden;
}

.node-type-visibility > summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  color: #dceff5;
  cursor: pointer;
  font-size: 0.65rem;
  list-style: none;
}

.node-type-visibility > summary::-webkit-details-marker { display: none; }
.node-type-visibility > summary small { color: #7fcbd5; }

.node-type-visibility-grid {
  max-height: 276px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  overflow: auto;
  padding: 0 7px 7px;
}

.node-type-visibility-row {
  min-width: 0;
  min-height: 32px;
  display: grid;
  grid-template-columns: auto 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 4px 5px;
  border: 1px solid rgba(120, 240, 255, 0.08);
  border-radius: 4px;
  background: rgba(5, 14, 24, 0.6);
  color: #b9ced8;
  cursor: pointer;
  font-size: 0.57rem;
}

.node-type-visibility-row input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #54d8e8;
}

.node-type-visibility-row > span:nth-of-type(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-type-visibility-row small { color: #7294a3; }

.node-type-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--node-type-color);
  box-shadow: 0 0 7px color-mix(in oklab, var(--node-type-color) 68%, transparent);
}

.map-system-filter {
  display: grid;
  gap: 6px;
  color: #dceff5;
  font-size: 0.65rem;
}

.map-system-filter select {
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 5px;
  background: #071421;
  color: #c9e0e8;
  font-size: 0.61rem;
}

@media (min-width: 700px) {
  .map-visibility-popover {
    width: min(440px, calc(100vw - 32px));
    max-height: min(78vh, 760px);
  }
}

@media (max-width: 420px) {
  .map-preset-grid,
  .node-type-visibility-grid { grid-template-columns: 1fr; }
}

.node-context-menu {
  position: absolute;
  z-index: 90;
  width: min(236px, calc(100% - 24px));
  max-height: min(72vh, 540px);
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(120, 240, 255, 0.28);
  border-radius: 7px;
  background: #07111e;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.58);
}

.node-context-menu[hidden] { display: none; }
.node-context-menu-header { display: grid; gap: 2px; padding: 7px 8px 9px; border-bottom: 1px solid rgba(120, 240, 255, 0.11); }
.node-context-menu-header strong { overflow: hidden; color: #f2fbff; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.node-context-menu-header span { color: #7fcbd5; font-size: 0.57rem; }
.node-context-menu-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding-top: 6px; }
.node-context-menu-actions button {
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-radius: 5px;
  background: #0c1825;
  color: #adc5cf;
  cursor: pointer;
  font-size: 0.59rem;
  line-height: 1.25;
  text-align: left;
}
.node-context-menu-actions button:hover,
.node-context-menu-actions button:focus-visible { border-color: rgba(84, 216, 232, 0.56); color: #f1fdff; outline: none; }
.node-context-menu-actions button.context-danger { border-color: rgba(255, 91, 120, 0.24); color: #ffc5d0; }
.node-context-menu-actions button.context-wide { grid-column: 1 / -1; }

.mechanism-explorer-dock {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 42;
  width: min(470px, calc(100% - 28px));
  max-height: min(68vh, 650px, calc(100% - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(120, 240, 255, 0.24);
  border-radius: 8px;
  background: rgba(5, 13, 24, 0.97);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(16px);
}

.mechanism-explorer-dock[hidden] { display: none; }
.mechanism-dock-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 9px 12px;
  border-bottom: 1px solid rgba(120, 240, 255, 0.12);
  background: linear-gradient(90deg, rgba(21, 245, 186, 0.09), rgba(155, 124, 255, 0.06), rgba(255, 61, 154, 0.055));
}
.mechanism-dock-header > div { min-width: 0; display: grid; gap: 2px; }
.mechanism-dock-header span { color: #58dccc; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.55rem; text-transform: uppercase; }
.mechanism-dock-header strong { overflow: hidden; color: #f2fbff; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.mechanism-dock-header button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 240, 255, 0.15);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: #c9e1e9;
  cursor: pointer;
}
.mechanism-explorer-panel { min-height: 0; overflow: auto; padding: 10px; scrollbar-color: rgba(120, 240, 255, 0.22) transparent; }
.mechanism-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(76px, 1fr));
  gap: 4px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-color: rgba(120, 240, 255, 0.22) transparent;
}
.mechanism-tabs button {
  min-width: 0;
  min-height: 34px;
  padding: 5px 4px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-radius: 5px;
  background: #0b1724;
  color: #8faab7;
  cursor: pointer;
  font-size: 0.57rem;
}
.mechanism-tabs button.active { border-color: rgba(84, 216, 232, 0.54); background: rgba(84, 216, 232, 0.12); color: #effdff; }
.mechanism-pane { display: grid; gap: 9px; }
.mechanism-pane[hidden] { display: none; }
.mechanism-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #dceff5;
  font-size: 0.65rem;
}
.mechanism-summary small { color: #809eab; font-size: 0.56rem; }
.mechanism-chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.mechanism-chip {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(120, 240, 255, 0.15);
  border-radius: 5px;
  background: rgba(18, 35, 51, 0.84);
  color: #d5e9ef;
  font-size: 0.59rem;
}
.mechanism-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mechanism-chip button { border: 0; background: transparent; color: #93b1bd; cursor: pointer; padding: 0 2px; }
.mechanism-empty { margin: 0; padding: 12px; border-left: 2px solid rgba(120, 240, 255, 0.24); background: rgba(120, 240, 255, 0.04); color: #8fa9b6; font-size: 0.62rem; line-height: 1.45; }
.mechanism-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mechanism-action-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mechanism-action-grid button,
.mechanism-form button,
.workspace-row button,
.path-result button {
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 5px;
  background: #0c1825;
  color: #a9c2cc;
  cursor: pointer;
  font-size: 0.58rem;
}
.mechanism-action-grid button:hover,
.mechanism-form button:hover,
.workspace-row button:hover,
.path-result button:hover { border-color: rgba(84, 216, 232, 0.52); color: #effdff; }
.mechanism-action-grid button:disabled,
.mechanism-form button:disabled { cursor: default; opacity: 0.38; }
.mechanism-action-grid button.primary,
.mechanism-form button.primary { border-color: rgba(84, 216, 232, 0.5); background: rgba(84, 216, 232, 0.13); color: #effdff; }
.mechanism-subsection { display: grid; gap: 7px; padding-top: 9px; border-top: 1px solid rgba(120, 240, 255, 0.1); }
.mechanism-subsection-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #cfe4eb; font-size: 0.62rem; }
.mechanism-subsection-title small { color: #7899a7; }
.mechanism-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mechanism-form label { min-width: 0; display: grid; gap: 4px; color: #8da9b7; font-size: 0.55rem; }
.mechanism-form label.wide,
.mechanism-form .wide { grid-column: 1 / -1; }
.mechanism-form select,
.mechanism-form input,
.mechanism-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(120, 240, 255, 0.14);
  border-radius: 5px;
  background: #071421;
  color: #c9e0e8;
  font-size: 0.59rem;
}
.mechanism-form textarea {
  min-height: 58px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}
.mechanism-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 7px !important; }
.mechanism-check input { width: 16px; min-height: 16px; }
.path-results,
.workspace-list,
.compare-columns { display: grid; gap: 6px; }
.path-result {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(120, 240, 255, 0.1);
  border-radius: 6px;
  background: rgba(12, 24, 37, 0.68);
}
.path-result.active { border-color: rgba(229, 138, 200, 0.46); background: rgba(229, 138, 200, 0.07); }
.path-result header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #dceff5; font-size: 0.61rem; }
.path-result p { margin: 0; overflow-wrap: anywhere; color: #91acb8; font-size: 0.56rem; line-height: 1.45; }
.path-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.compare-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compare-column { min-width: 0; padding: 7px; border-left: 2px solid #22dce8; background: rgba(34, 220, 232, 0.05); }
.compare-column.shared { border-left-color: #f5fbff; background: rgba(245, 251, 255, 0.05); }
.compare-column.only-b { border-left-color: #ff4fb7; background: rgba(255, 79, 183, 0.05); }
.compare-column strong { display: block; color: #dceff5; font-size: 0.58rem; }
.compare-column span { display: block; margin-top: 4px; color: #86a3af; font-size: 0.54rem; line-height: 1.35; }
.workspace-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 7px; border: 1px solid rgba(120, 240, 255, 0.1); border-radius: 6px; background: rgba(12, 24, 37, 0.68); }
.workspace-row > div { min-width: 0; display: grid; gap: 2px; }
.workspace-row strong { overflow: hidden; color: #dceff5; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-row small { color: #7899a7; font-size: 0.52rem; }
.workspace-row > textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 52px;
  resize: vertical;
  padding: 7px 8px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 5px;
  background: #071421;
  color: #c9e0e8;
  font: inherit;
  font-size: 0.58rem;
  line-height: 1.45;
}
.workspace-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.workspace-row-actions button { min-height: 29px; padding: 4px 6px; }
.research-pane { min-width: 0; }
.research-storage-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(84, 216, 232, 0.15);
  border-radius: 6px;
  background: rgba(84, 216, 232, 0.05);
}
.research-workspace-pane { align-content: start; }
.research-storage-status > div { min-width: 0; display: grid; gap: 2px; }
.research-storage-status strong { color: #dceff5; font-size: 0.62rem; }
.research-storage-status small,
.research-storage-status > span { color: #7fa1ae; font-size: 0.53rem; }
.research-patient-warning {
  margin: 0;
  padding: 8px;
  border-left: 2px solid #ffb020;
  background: rgba(255, 176, 32, 0.05);
  color: #dbc79c;
  font-size: 0.55rem;
  line-height: 1.45;
}
.mechanism-action-grid button.danger {
  border-color: rgba(255, 91, 120, 0.32);
  color: #ffc5d0;
}
.research-bookmark-list { display: grid; gap: 6px; }
.research-bookmark-row {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-left: 2px solid #54d8e8;
  border-radius: 6px;
  background: rgba(12, 24, 37, 0.72);
}
.research-bookmark-row.stale {
  border-left-color: #ffb020;
  background: rgba(255, 176, 32, 0.045);
}
.research-bookmark-row header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.research-bookmark-row header strong {
  min-width: 0;
  overflow: hidden;
  color: #dceff5;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.research-bookmark-row header span {
  flex: 0 0 auto;
  color: #7fa1ae;
  font-size: 0.52rem;
  text-transform: uppercase;
}
.research-bookmark-row textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  padding: 7px 8px;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 5px;
  background: #071421;
  color: #c9e0e8;
  font: inherit;
  font-size: 0.58rem;
  line-height: 1.45;
}
.research-bookmark-row textarea:focus {
  border-color: rgba(84, 216, 232, 0.52);
  outline: none;
}
.hidden-node-list { max-height: 150px; overflow: auto; }
.mechanism-boundary { margin: 0; padding: 7px 8px; border-left: 2px solid #d6a64d; background: rgba(214, 166, 77, 0.06); color: #d8c8a6; font-size: 0.55rem; line-height: 1.45; }
.claim-source-list { display: grid; gap: 6px; }
.claim-source-record { min-width: 0; display: grid; gap: 3px; padding: 8px; border-left: 2px solid rgba(84, 216, 232, 0.52); background: rgba(84, 216, 232, 0.055); }
.claim-source-record strong { color: #e5f5fa; font-size: 0.68rem; line-height: 1.35; }
.claim-source-record span { color: #9db7c2; font-size: 0.6rem; }
.claim-source-record small { overflow-wrap: anywhere; color: #7795a2; font-size: 0.54rem; }
.claim-source-record a { color: #73e5dc; font-size: 0.58rem; }
.mechanism-toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 96;
  max-width: min(520px, calc(100% - 28px));
  padding: 8px 11px;
  border: 1px solid rgba(120, 240, 255, 0.24);
  border-radius: 6px;
  background: rgba(5, 13, 24, 0.96);
  color: #dceff5;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.48);
  font-size: 0.62rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.mechanism-toast.visible { opacity: 1; transform: translate(-50%, 0); }

.node-group.manual-dimmed { opacity: 0.34; }
.node-group.multi-selected .node-core { stroke: #63f4e1; stroke-width: 2.7; stroke-dasharray: 4 2; filter: drop-shadow(0 0 8px rgba(99, 244, 225, 0.72)); }
.node-group.manually-pinned .node-review-ring { stroke: #ffd96d; stroke-width: 2.6; stroke-dasharray: 2 2; }
.node-group.filter-exception .node-label { fill: #ffd96d; }
.node-pin-symbol { fill: #ffd96d; font-size: 9px; font-weight: 900; paint-order: stroke; stroke: #07111e; stroke-width: 3px; pointer-events: none; }
.node-group.mechanism-path-node .node-core { stroke: #ffffff; stroke-width: 2.8; filter: drop-shadow(0 0 8px rgba(229, 138, 200, 0.85)); }
.edge.mechanism-path-edge { opacity: 1; stroke-width: 4; filter: drop-shadow(0 0 6px currentColor); }
.node-group.directional-exploration-node .node-review-ring { stroke: #7be0ff; stroke-width: 2.5; opacity: 0.95; }
.edge.directional-exploration-edge { opacity: 0.82; stroke-width: 3; }
.node-group.mechanism-compare-a .node-review-ring { stroke: #22dce8; stroke-width: 2.7; }
.node-group.mechanism-compare-shared .node-review-ring { stroke: #f5fbff; stroke-width: 3; }
.node-group.mechanism-compare-b .node-review-ring { stroke: #ff4fb7; stroke-width: 2.7; }

@media (max-width: 700px) {
  .mechanism-explorer-dock {
    right: 6px;
    bottom: 6px;
    width: calc(100% - 12px);
    max-height: min(66vh, 570px, calc(100% - 12px));
  }
  .mechanism-tabs { grid-template-columns: repeat(4, minmax(88px, 1fr)); }
  .mechanism-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-columns { grid-template-columns: 1fr; }
  .node-context-menu { width: min(250px, calc(100% - 16px)); }
  .navigator-bridge-band { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .navigator-bridge-band .primary-cta { width: 100%; }
  .research-bookmark-row header { align-items: flex-start; flex-direction: column; gap: 3px; }
  .workspace-row { grid-template-columns: minmax(0, 1fr); }
  .workspace-row-actions { justify-content: flex-start; }
}

.knowledge-step-list { display: grid; gap: 8px; padding: 0; list-style: none; }
.knowledge-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 9px; border-left: 2px solid rgba(154, 130, 232, 0.65); background: rgba(154, 130, 232, 0.06); }
.knowledge-step > span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(154, 130, 232, 0.5); border-radius: 4px; color: #d8cbf8; font-size: 0.65rem; font-weight: 800; }
.knowledge-step p { margin: 3px 0; color: #aec2cd; font-size: 0.68rem; line-height: 1.45; }
.knowledge-step small { color: var(--muted); font-size: 0.58rem; }
.path-boundary-notice { margin: 12px 0; padding: 10px; border-left: 3px solid #d6a64d; background: rgba(214, 166, 77, 0.07); color: #ead9b7; font-size: 0.68rem; line-height: 1.5; }
.catalog-pro-preview { margin-top: -1px; }

@media (min-width: 1601px) {
  .app-shell,
  .app-shell.right-collapsed {
    grid-template-areas: none;
    grid-template-columns: var(--map-sidebar-width) minmax(0, 1fr) minmax(320px, var(--detail-rail-width));
    height: 100vh;
  }
  .app-shell > .left-rail,
  .app-shell > .map-stage,
  .app-shell > .right-rail { grid-area: auto; }
  .app-shell > .right-rail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .app-shell.right-collapsed { grid-template-columns: var(--map-sidebar-width) minmax(0, 1fr); }
  .app-shell.left-collapsed { grid-template-columns: minmax(0, 1fr) minmax(320px, var(--detail-rail-width)); }
  .app-shell.left-collapsed.right-collapsed { grid-template-columns: minmax(0, 1fr); }
  .app-shell.left-collapsed .left-rail { display: none; }
}

@media (min-width: 1381px) and (max-width: 1600px) {
  .app-shell:not(.right-collapsed) .map-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .app-shell:not(.right-collapsed) .map-title-group { grid-column: 1; grid-row: 1; }
  .app-shell:not(.right-collapsed) .map-actions {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap;
  }
  .app-shell:not(.right-collapsed) .complexity-control {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .app-shell:not(.right-collapsed) .map-visibility-control {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

@media (min-width: 1081px) and (max-width: 1380px) {
  .app-shell,
  .app-shell.right-collapsed { grid-template-columns: minmax(320px, 336px) minmax(0, 1fr); }
  .sidebar-resize-handle { display: none; }
  .app-shell.left-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "right"; }
  .app-shell.left-collapsed.right-collapsed { grid-template-areas: "map"; }
  .app-shell.left-collapsed .left-rail { display: none; }
}

@media (max-width: 1080px) {
  .sidebar-collapse-button,
  .sidebar-reopen-button,
  .sidebar-resize-handle { display: none !important; }
  .map-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .map-visibility-control { justify-self: start; }
  .map-visibility-popover { right: auto; left: 0; }
}

@media (max-width: 620px) {
  .hero-brand-lockup { margin-bottom: 16px; }
  .hero-brand-lockup img { width: 76px; }
  .site-brand-copy small { display: none; }
  .map-visibility-popover { position: fixed; top: 78px; right: 10px; left: 10px; width: auto; }
}

/* Keep every map control reachable when the medium-desktop detail drawer overlays the stage. */
@media (min-width: 1081px) and (max-width: 1600px) {
  body.detail-drawer-open .map-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 116px;
    padding-right: min(414px, 39vw);
  }

  body.detail-drawer-open .map-title-group {
    grid-column: 1;
    grid-row: 1;
  }

  body.detail-drawer-open .map-actions {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  body.detail-drawer-open .complexity-control {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  body.detail-drawer-open .map-visibility-control {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

/* Zustandsnavigator */
body[data-app-view="state"] #stateNavigatorView,
body.is-authenticated[data-app-view="state"] #stateNavigatorView { display: block; }
body.is-anonymous[data-app-view="state"] .landing-main,
body.is-anonymous[data-app-view="state"] #navigator { display: none; }

.state-navigator-view-panel { background: #050713; }
.state-navigator-inner { width: min(100% - 48px, 1500px); }
.state-navigator-header { align-items: center; margin-bottom: 16px; }
.state-navigator-header h1 { margin: 3px 0 5px; font-size: 2.2rem; letter-spacing: 0; }
.state-navigator-header p:last-child { margin: 0; color: #9eb6c5; }
.state-navigator-boundary {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 3px solid #46c8d7;
  background: #091520;
  color: #bdd0da;
  font-size: 0.76rem;
  line-height: 1.55;
}
.state-access-banner { margin-bottom: 14px; }
.state-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 24px;
  border: 1px solid rgba(119, 217, 231, 0.16);
  background: rgba(119, 217, 231, 0.08);
}
.state-tabs button {
  min-width: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 0;
  background: #08111c;
  color: #95adbb;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 760;
  text-align: left;
}
.state-tabs button span { color: #56cad7; font-size: 0.58rem; }
.state-tabs button:hover,
.state-tabs button:focus-visible { background: #0d1b28; color: #eefbff; outline: 2px solid rgba(86, 202, 215, 0.45); outline-offset: -2px; }
.state-tabs button.active { box-shadow: inset 0 -2px #56cad7; background: #102230; color: #f4fbff; }
.state-navigator-content { min-height: 520px; }

.state-message {
  margin-bottom: 14px;
  padding: 11px 14px;
  border-left: 3px solid #56cad7;
  background: #0d1c29;
  color: #d8eaf1;
  font-size: 0.76rem;
}
.state-message.warning { border-color: #e7a94c; background: #211a0e; color: #f1dfbd; }
.state-message.success { border-color: #62d59a; background: #0e211b; color: #d4f3e2; }
.state-message.info { border-color: #9b7cff; background: #19152b; color: #e0d9ff; }

.state-today-intro,
.state-dashboard-band,
.state-compact-profile,
.state-patterns-head,
.state-privacy-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 30px 0;
  border-block: 1px solid rgba(119, 217, 231, 0.16);
}
.state-today-intro h2,
.state-dashboard-band h2,
.state-compact-profile h2,
.state-patterns-head h2,
.state-privacy-intro h2 { margin: 4px 0 8px; font-size: 1.42rem; letter-spacing: 0; }
.state-today-intro p,
.state-dashboard-band p,
.state-compact-profile p,
.state-patterns-head p,
.state-privacy-intro p { max-width: 850px; margin: 0; color: #97afbd; line-height: 1.6; }
.state-empty-profile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(119, 217, 231, 0.13);
}
.state-empty-profile > span { font-size: 2rem; color: #4bc7d5; font-weight: 820; }
.state-empty-profile h2 { margin: 0 0 7px; font-size: 1.1rem; }
.state-empty-profile p { margin: 0; color: #91aab8; line-height: 1.55; }
.state-feature-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0;
  background: rgba(119, 217, 231, 0.14);
  border: 1px solid rgba(119, 217, 231, 0.14);
}
.state-feature-band article { min-width: 0; padding: 18px; background: #09131e; }
.state-feature-band article > span { color: #a68cff; font-size: 0.58rem; font-weight: 840; }
.state-feature-band h3 { margin: 8px 0 5px; font-size: 0.9rem; }
.state-feature-band p { margin: 0; color: #8fa7b5; font-size: 0.7rem; line-height: 1.5; }

.state-dashboard-band { grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.6fr); align-items: stretch; }
.state-dashboard-primary { align-self: center; }
.state-command-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.state-today-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: rgba(119, 217, 231, 0.12); }
.state-today-metrics div { min-width: 0; padding: 13px; background: #091521; }
.state-today-metrics dt { color: #7895a5; font-size: 0.58rem; text-transform: uppercase; }
.state-today-metrics dd { margin: 4px 0 0; color: #eaf8fc; font-size: 0.78rem; font-weight: 700; }
.state-compact-profile { padding: 22px 0; }
.state-recent-band { padding: 28px 0 0; }
.state-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.state-section-heading h2,
.state-section-heading h3 { margin: 3px 0 6px; font-size: 1.12rem; letter-spacing: 0; }
.state-section-heading p { margin: 0; color: #8ea8b6; font-size: 0.72rem; line-height: 1.5; }
.icon-text-button,
.state-entry-actions button,
.map-state-profile-actions button,
.state-close-button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(114, 216, 240, 0.24);
  border-radius: 5px;
  background: #0c1b28;
  color: #cbe7ee;
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 720;
}
.icon-text-button:hover,
.state-entry-actions button:hover,
.map-state-profile-actions button:hover { border-color: rgba(114, 216, 240, 0.56); color: #fff; }
.state-mini-timeline { display: grid; gap: 1px; margin: 14px 0 0; padding: 0; list-style: none; background: rgba(119, 217, 231, 0.12); }
.state-mini-timeline li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 14px; background: #09141f; }
.state-mini-timeline time { color: #60cbd7; font-weight: 760; }
.state-mini-timeline span { display: grid; gap: 2px; }
.state-mini-timeline small { color: #7f9aa9; }
.state-empty-copy { padding: 18px; border-left: 2px solid rgba(119, 217, 231, 0.28); background: #09131d; color: #8fa8b6; }

.state-wizard-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; border-bottom: 1px solid rgba(119, 217, 231, 0.16); }
.state-wizard-progress span { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 4px 13px; color: #728d9c; font-size: 0.65rem; }
.state-wizard-progress b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(119, 217, 231, 0.25); border-radius: 50%; font-size: 0.58rem; }
.state-wizard-progress span.active { color: #effbff; }
.state-wizard-progress span.active b { border-color: #58ceda; background: #13313d; color: #8bf1f7; }
.state-wizard-progress span.complete b { border-color: #62d59a; color: #8de8b6; }
.state-wizard-step { max-width: 1240px; margin: 0 auto; }
.state-scale-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 20px; border: 1px solid rgba(119, 217, 231, 0.13); background: rgba(119, 217, 231, 0.13); }
.state-scale-row { min-width: 0; display: grid; gap: 11px; padding: 16px; background: #09141f; }
.state-scale-title { display: flex; justify-content: space-between; gap: 12px; }
.state-scale-title strong { font-size: 0.76rem; }
.state-scale-title output,
.state-inline-range output,
.state-followup-scale output { min-width: 30px; color: #7ce5ec; font-size: 0.82rem; font-weight: 800; text-align: right; }
.state-scale-row input[type="range"],
.state-inline-range input[type="range"],
.state-followup-scale input[type="range"] { width: 100%; accent-color: #49cbd8; cursor: pointer; }
.state-scale-anchors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; color: #6f8999; font-size: 0.55rem; line-height: 1.35; }
.state-scale-anchors small:nth-child(2) { text-align: center; }
.state-scale-anchors small:last-child { text-align: right; }
.state-clear-optional { justify-self: start; border: 0; background: none; color: #7895a5; cursor: pointer; font-size: 0.58rem; text-decoration: underline; }
.state-optional-scales { margin-top: 14px; border: 1px solid rgba(160, 128, 255, 0.18); background: #0b111f; }
.state-optional-scales summary { padding: 12px 15px; color: #d8d0ef; cursor: pointer; font-size: 0.74rem; font-weight: 760; }
.state-optional-scales summary span { color: #806fa9; font-size: 0.58rem; }
.state-optional-scales .state-scale-grid { margin: 0; border: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.state-wizard-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }

.state-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.state-field { min-width: 0; display: grid; align-content: start; gap: 6px; color: #aac0cb; font-size: 0.66rem; }
.state-field > span { display: flex; justify-content: space-between; gap: 8px; }
.state-field small { color: #708a99; font-size: 0.55rem; }
.state-field input,
.state-field select,
.state-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(119, 217, 231, 0.18);
  border-radius: 5px;
  background: #08131e;
  color: #e5f4f8;
  font: inherit;
  font-size: 0.72rem;
}
.state-field textarea { min-height: 86px; resize: vertical; }
.state-field input:focus,
.state-field select:focus,
.state-field textarea:focus { border-color: #56cad7; outline: 2px solid rgba(86, 202, 215, 0.18); }
.state-field-wide { grid-column: 1 / -1; }
.state-inline-range { padding: 10px; border: 1px solid rgba(119, 217, 231, 0.13); background: #09141f; }
.state-inline-range small { line-height: 1.4; }
.state-number-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.state-number-field small { color: #89a3b1; }

.state-goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.state-goal-option { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 14px; border: 1px solid rgba(119, 217, 231, 0.13); border-radius: 6px; background: #09141f; cursor: pointer; }
.state-goal-option.selected { border-color: rgba(86, 202, 215, 0.58); background: #10232f; }
.state-goal-option input { margin-top: 3px; accent-color: #56cad7; }
.state-goal-option span { min-width: 0; display: grid; gap: 5px; }
.state-goal-option strong { font-size: 0.76rem; }
.state-goal-option small { color: #7893a2; font-size: 0.58rem; line-height: 1.4; }
.state-custom-goal { max-width: 680px; margin-top: 14px; }

.state-model-badge { padding: 6px 9px; border: 1px solid rgba(160, 128, 255, 0.34); border-radius: 4px; color: #d6c8ff; font-size: 0.6rem; }
.state-profile-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr); gap: 18px; margin-top: 20px; }
.state-axis-profile { display: grid; gap: 1px; background: rgba(119, 217, 231, 0.11); }
.state-axis-row { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 14px; padding: 16px; background: #09141f; }
.state-axis-swatch { width: 5px; min-height: 100%; background: var(--state-axis-color); opacity: 0.35; }
.state-axis-row.level-hoch .state-axis-swatch { opacity: 1; box-shadow: 0 0 14px color-mix(in srgb, var(--state-axis-color), transparent 50%); }
.state-axis-row.level-mittel .state-axis-swatch { opacity: 0.65; }
.state-axis-row > div { min-width: 0; display: grid; gap: 5px; }
.state-axis-row strong { font-size: 0.8rem; }
.state-axis-row small { color: #89a2b0; }
.state-axis-row ul { display: grid; gap: 7px; margin: 7px 0 0; padding: 0; list-style: none; }
.state-axis-row li { color: #a8bdc8; font-size: 0.66rem; line-height: 1.45; }
.state-axis-row details { margin-top: 5px; color: #7892a0; }
.state-axis-row details summary { cursor: pointer; }
.state-axis-row details code,
.state-axis-row details span { display: block; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; }
.state-node-reasons { padding: 16px; border: 1px solid rgba(160, 128, 255, 0.18); background: #0b111f; }
.state-node-reasons h3 { margin: 0 0 10px; font-size: 0.82rem; }
.state-node-reasons h3:not(:first-child) { margin-top: 18px; }
.state-node-reasons ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.state-node-reasons button { width: 100%; display: grid; gap: 3px; padding: 9px; border: 1px solid rgba(160, 128, 255, 0.14); border-radius: 5px; background: #101727; color: #e8eff7; cursor: pointer; text-align: left; }
.state-node-reasons button:hover { border-color: rgba(160, 128, 255, 0.5); }
.state-node-reasons button small { color: #8ea4b1; line-height: 1.35; }
.state-uncertainty-list li { padding-left: 12px; border-left: 2px solid #d5a74e; color: #c7b995; font-size: 0.64rem; }
.state-boundary-copy { margin: 14px 0 0; padding: 12px; border-left: 3px solid #56cad7; background: #0b1a25; color: #b7ccd5; font-size: 0.7rem; line-height: 1.5; }
.state-goal-comparison { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(119, 217, 231, 0.14); }
.state-goal-comparison h3 { margin: 0 0 9px; font-size: 0.8rem; }
.state-goal-comparison > div { display: flex; flex-wrap: wrap; gap: 6px; }
.state-goal-comparison span { display: grid; gap: 2px; padding: 7px 9px; border: 1px solid rgba(119, 217, 231, 0.16); border-radius: 5px; background: #09141f; }
.state-goal-comparison span.inside { border-color: rgba(98, 213, 154, 0.38); }
.state-goal-comparison span.below,
.state-goal-comparison span.above { border-color: rgba(231, 169, 76, 0.34); }
.state-goal-comparison small { color: #819ba9; }
.state-consent-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid rgba(160, 128, 255, 0.28); border-radius: 6px; background: #111326; cursor: pointer; }
.state-consent-box input { margin-top: 3px; accent-color: #56cad7; }
.state-consent-box span { display: grid; gap: 5px; }
.state-consent-box small { color: #9bacc0; line-height: 1.5; }
.state-consent-status,
.state-free-result-note { display: grid; gap: 4px; margin-top: 16px; padding: 12px; border-left: 3px solid #62d59a; background: #0b1d18; }
.state-free-result-note { border-color: #d5a74e; background: #1d180d; }
.state-consent-status span,
.state-free-result-note span { color: #9eb6ad; font-size: 0.66rem; }

.state-timeline-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.55fr); gap: 22px; }
.state-timeline { position: relative; display: grid; gap: 1px; margin: 18px 0 0; padding: 0; list-style: none; background: rgba(119, 217, 231, 0.1); }
.state-timeline-entry { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 18px; padding: 18px; background: #09141f; }
.state-timeline-entry time { color: #6fcdd7; font-size: 0.68rem; font-weight: 760; }
.state-timeline-entry > div { min-width: 0; }
.state-timeline-type { color: #869eac; font-size: 0.56rem; text-transform: uppercase; }
.state-timeline-entry h3 { margin: 5px 0; font-size: 0.82rem; }
.state-timeline-entry p { margin: 0; color: #8fa7b5; font-size: 0.68rem; line-height: 1.5; }
.state-timeline-entry.event { box-shadow: inset 3px 0 #a287f1; }
.state-timeline-entry.checkin { box-shadow: inset 3px 0 #56cad7; }
.state-entry-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.state-event-panel { align-self: start; position: sticky; top: 84px; padding: 18px; border: 1px solid rgba(119, 217, 231, 0.17); background: #08121d; }
.state-event-panel > h2 { margin: 4px 0 14px; font-size: 1.05rem; }
.state-event-form { display: grid; gap: 11px; }
.state-form-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.state-form-boundary { margin: 0; color: #8da4b1; font-size: 0.62rem; line-height: 1.45; }
.state-followup-panel { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(160, 128, 255, 0.22); }
.state-followup-panel > p { margin: 0; color: #8da4b1; font-size: 0.64rem; }
.state-close-button { width: 34px; padding: 0; font-size: 1rem; }
.state-followup-scale { display: grid; gap: 5px; }
.state-followup-scale > span { display: flex; justify-content: space-between; color: #a8bdc8; font-size: 0.64rem; }

.state-patterns-head { margin-bottom: 20px; }
.state-pattern-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr); gap: 20px; }
.state-pattern-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.state-pattern-list article { padding: 15px; border: 1px solid rgba(119, 217, 231, 0.14); border-radius: 6px; background: #09141f; }
.state-pattern-list article > span { color: #70d7df; font-size: 0.56rem; font-weight: 760; }
.state-pattern-list h4 { margin: 7px 0; font-size: 0.82rem; }
.state-pattern-list dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: rgba(119, 217, 231, 0.1); }
.state-pattern-list dl div { padding: 7px; background: #0b1823; }
.state-pattern-list dt { color: #718b9a; font-size: 0.5rem; }
.state-pattern-list dd { margin: 2px 0 0; font-weight: 760; }
.state-pattern-list p { color: #8da5b3; font-size: 0.66rem; line-height: 1.45; }
.state-comparison-config { padding: 16px; border: 1px solid rgba(160, 128, 255, 0.2); background: #0e1221; }
.state-comparison-config h3 { margin: 0 0 12px; font-size: 0.84rem; }
.state-comparison-config > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(160, 128, 255, 0.13); color: #9daeb8; font-size: 0.68rem; }
.state-comparison-config strong { color: #d8cfff; }
.state-comparison-config p { color: #8197a4; font-size: 0.62rem; line-height: 1.45; }
.state-safety-context,
.state-nem-contexts { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(119, 217, 231, 0.14); }
.state-safety-context > p { color: #9eb2bc; line-height: 1.55; }
.state-safety-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.state-safety-list span { padding: 6px 8px; border: 1px solid rgba(231, 169, 76, 0.38); border-radius: 4px; background: #1d180e; color: #e9d5ae; font-size: 0.62rem; }
.state-nem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.state-nem-grid article { min-width: 0; padding: 15px; border: 1px solid rgba(119, 217, 231, 0.14); border-radius: 6px; background: #09141f; }
.state-nem-grid article > div:first-child > span { color: #77ccd5; font-size: 0.55rem; }
.state-nem-grid h4 { margin: 5px 0 9px; font-size: 0.86rem; }
.state-nem-grid p { color: #8da6b4; font-size: 0.66rem; line-height: 1.45; }
.state-nem-grid dl { margin: 10px 0 0; }
.state-nem-grid dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(119, 217, 231, 0.08); }
.state-nem-grid dt { color: #708b9a; font-size: 0.55rem; }
.state-nem-grid dd { margin: 0; color: #b5c7d0; font-size: 0.6rem; overflow-wrap: anywhere; }

.state-privacy-intro > span { padding: 8px 11px; border: 1px solid rgba(98, 213, 154, 0.3); border-radius: 5px; color: #a8e3c2; font-size: 0.65rem; }
.state-privacy-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 20px; border: 1px solid rgba(119, 217, 231, 0.13); background: rgba(119, 217, 231, 0.13); }
.state-privacy-actions article { padding: 18px; background: #09141f; }
.state-privacy-actions article.danger { background: #181115; }
.state-privacy-actions h3 { margin: 0 0 7px; font-size: 0.9rem; }
.state-privacy-actions p { min-height: 64px; color: #8ea6b4; font-size: 0.68rem; line-height: 1.5; }
.state-data-inventory { margin-top: 22px; }
.state-data-inventory h3 { font-size: 0.88rem; }
.state-data-inventory dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(119, 217, 231, 0.12); }
.state-data-inventory dl div { padding: 13px; background: #09141f; }
.state-data-inventory dt { color: #7893a1; font-size: 0.56rem; }
.state-data-inventory dd { margin: 5px 0 0; font-weight: 760; }
.state-locked-area { min-height: 460px; display: grid; grid-template-columns: 84px minmax(0, 650px); place-content: center; gap: 24px; }
.state-locked-area > span { color: #9f83ff; font-size: 2rem; font-weight: 850; }
.state-locked-area h2 { margin: 5px 0 8px; font-size: 1.5rem; }
.state-locked-area p { color: #91a9b6; line-height: 1.55; }
.state-delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.map-state-profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(160, 128, 255, 0.18); }
.map-state-profile-actions button { min-height: 32px; padding: 5px 7px; background: #15162a; border-color: rgba(160, 128, 255, 0.23); color: #cec4ec; font-size: 0.58rem; }
.node-group.state-profile-hit .node-ring { stroke-width: 3.1; filter: drop-shadow(0 0 7px var(--ring-color)); }
.node-group.state-profile-hit .node-core { opacity: 0.96; }
.detail-state-profile { margin-top: 16px; padding: 13px; border-left: 3px solid #9f83ff; background: #141526; }
.detail-state-profile h3 { margin: 5px 0 9px; }
.detail-state-profile p:last-child { color: #b8b2cc; font-size: 0.68rem; line-height: 1.5; }

@media (max-width: 1100px) {
  .state-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .state-tabs button:nth-child(n + 4) { min-height: 48px; }
  .state-dashboard-band,
  .state-profile-layout,
  .state-timeline-layout,
  .state-pattern-layout { grid-template-columns: minmax(0, 1fr); }
  .state-event-panel { position: static; }
  .state-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-nem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-optional-scales .state-scale-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .state-navigator-inner { width: min(100% - 24px, 1500px); padding-top: 30px; }
  .state-navigator-header { align-items: flex-start; }
  .state-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-tabs button { min-height: 48px; padding: 8px; }
  .state-tabs button:last-child { grid-column: 1 / -1; }
  .state-today-intro,
  .state-compact-profile,
  .state-patterns-head,
  .state-privacy-intro { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .state-feature-band,
  .state-scale-grid,
  .state-goal-grid,
  .state-pattern-list,
  .state-privacy-actions,
  .state-nem-grid { grid-template-columns: minmax(0, 1fr); }
  .state-wizard-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-wizard-progress span { font-size: 0.58rem; }
  .state-scale-row { padding: 14px 12px; }
  .state-scale-anchors { gap: 5px; font-size: 0.49rem; }
  .state-form-grid { grid-template-columns: minmax(0, 1fr); }
  .state-field-wide { grid-column: auto; }
  .state-profile-actions { flex-direction: column; }
  .state-profile-actions button { width: 100%; }
  .state-timeline-entry { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .state-timeline-entry time { font-size: 0.62rem; }
  .state-data-inventory dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-locked-area { grid-template-columns: minmax(0, 1fr); min-height: 380px; }
  .state-locked-area > span { font-size: 1.4rem; }
}

@media (max-width: 420px) {
  .state-tabs { grid-template-columns: minmax(0, 1fr); }
  .state-tabs button:last-child { grid-column: auto; }
  .state-today-metrics,
  .state-form-split,
  .state-data-inventory dl,
  .map-state-profile-actions { grid-template-columns: minmax(0, 1fr); }
  .state-scale-anchors { grid-template-columns: minmax(0, 1fr); }
  .state-scale-anchors small,
  .state-scale-anchors small:nth-child(2),
  .state-scale-anchors small:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .node-group.state-profile-hit .node-ring { animation: none !important; }
}

/* Sol i18n landing and global language control */
.site-header {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.language-switcher {
  display: inline-grid;
  grid-template-columns: repeat(2, 36px);
  min-width: 72px;
  height: 34px;
  border: 1px solid rgba(142, 168, 184, 0.34);
  border-radius: 6px;
  overflow: hidden;
  background: #08111d;
}

.language-switcher button {
  border: 0;
  border-right: 1px solid rgba(142, 168, 184, 0.22);
  background: transparent;
  color: #8ea8b8;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.language-switcher button:last-child { border-right: 0; }
.language-switcher button:hover { color: #eaf6ff; background: rgba(71, 167, 255, 0.1); }
.language-switcher button.active {
  background: #0f5f70;
  color: #f3ffff;
  box-shadow: inset 0 -2px #15f5ba;
}

.landing-v2 {
  display: block;
  background: #050713;
}

.landing-v2::before { display: none; }

.landing-hero-v2 {
  position: relative;
  min-height: min(650px, calc(100svh - 108px));
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(71, 167, 255, 0.24);
  background: #06101c;
}

.landing-hero-media,
.landing-hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landing-hero-media {
  object-fit: cover;
  object-position: center right;
  opacity: 0.72;
  filter: saturate(1.24) contrast(1.08);
}

.landing-hero-scrim {
  background: rgba(3, 8, 16, 0.66);
}

.landing-hero-copy-v2 {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1500px);
  margin: 0 auto;
  padding: 36px 0 42px;
}

.landing-hero-copy-v2 > * { max-width: 720px; }
.hero-brand-lockup-v2 { margin-bottom: 22px; }
.hero-brand-lockup-v2 img { width: 72px; height: 72px; }
.hero-brand-lockup-v2 strong { font-size: 1.1rem; }

.landing-hero-copy-v2 h1 {
  margin: 10px 0 18px;
  max-width: 760px;
  color: #f4fbff;
  font-size: 4.3rem;
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: 0 3px 28px #02050b;
}

.landing-hero-copy-v2 .hero-lead {
  margin: 0;
  color: #e4f5fc;
  font-size: 1.28rem;
  line-height: 1.5;
}

.landing-hero-copy-v2 .hero-subline {
  margin: 14px 0 0;
  max-width: 680px;
  color: #a9c1ce;
  font-size: 0.98rem;
  line-height: 1.65;
}

.landing-hero-copy-v2 .hero-ctas { margin-top: 28px; }

.hero-boundary-v2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  margin-top: 24px;
  padding: 13px 0 13px 16px;
  border-left: 3px solid #ffb020;
  color: #b9cbd4;
  font-size: 0.78rem;
  line-height: 1.5;
}

.hero-boundary-v2 strong { color: #ffe0a0; white-space: nowrap; }

.product-stats-v2 {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, 1500px);
  margin: -32px auto 0;
  border: 1px solid rgba(71, 167, 255, 0.26);
  background: #091422;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.landing-v2 .landing-section {
  width: min(100% - 48px, 1500px);
  margin: 0 auto;
  padding: 104px 0;
}

.landing-section-heading-v2 {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(360px, 1.22fr);
  gap: 12px 80px;
  align-items: end;
  margin-bottom: 42px;
}

.landing-section-heading-v2 .section-kicker { grid-column: 1 / -1; }
.landing-section-heading-v2 h2 {
  margin: 0;
  max-width: 680px;
  font-size: 2.65rem;
  line-height: 1.12;
  letter-spacing: 0;
}

.landing-section-heading-v2 > p:last-child {
  margin: 0;
  max-width: 680px;
  color: #91aab8;
  line-height: 1.7;
}

.promise-rail-v2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(71, 167, 255, 0.24);
  border-bottom: 1px solid rgba(71, 167, 255, 0.24);
}

.promise-rail-v2 article {
  min-width: 0;
  padding: 28px 24px 30px;
  border-right: 1px solid rgba(71, 167, 255, 0.18);
}

.promise-rail-v2 article:last-child { border-right: 0; }
.promise-rail-v2 article:nth-child(1) { box-shadow: inset 0 3px #15f5ba; }
.promise-rail-v2 article:nth-child(2) { box-shadow: inset 0 3px #47a7ff; }
.promise-rail-v2 article:nth-child(3) { box-shadow: inset 0 3px #b794f4; }
.promise-rail-v2 article:nth-child(4) { box-shadow: inset 0 3px #ffb020; }
.promise-rail-v2 span { color: #6c8595; font-size: 0.62rem; font-weight: 800; }
.promise-rail-v2 h3 { margin: 18px 0 8px; font-size: 1rem; }
.promise-rail-v2 p { margin: 0; color: #8ea8b8; font-size: 0.78rem; line-height: 1.55; }

.landing-modules-v2 {
  border-top: 1px solid rgba(142, 168, 184, 0.1);
  border-bottom: 1px solid rgba(142, 168, 184, 0.1);
}

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

.module-card-v2 {
  min-height: 220px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  border: 1px solid rgba(142, 168, 184, 0.2);
  border-radius: 8px;
  overflow: hidden;
  background: #09131f;
}

.module-card-v2 > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
}

.module-card-v2 small { color: var(--module-color); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }
.module-card-v2 h3 { margin: 12px 0 8px; font-size: 1.22rem; }
.module-card-v2 p { margin: 0 0 20px; color: #8ea8b8; font-size: 0.8rem; line-height: 1.58; }
.module-card-v2.supporting-module { border-color: rgba(128, 160, 176, 0.16); background: rgba(8, 18, 28, 0.72); }
.module-card-v2.supporting-module .module-visual-v2 { opacity: 0.72; }
.module-card-v2 a,
.module-card-v2 button {
  min-height: 38px;
  margin-top: auto;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--module-color), transparent 44%);
  border-radius: 5px;
  background: transparent;
  color: #eaf6ff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}

.module-visual-v2 {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--module-color), transparent 70%);
  background: color-mix(in srgb, var(--module-color) 9%, #06101a);
}

.module-map { --module-color: #15f5ba; }
.module-catalog { --module-color: #47a7ff; }
.module-stack { --module-color: #b794f4; }
.module-state { --module-color: #ff5bc8; }
.module-safety { --module-color: #ffb020; }
.module-paths { --module-color: #5ee08f; }

.module-map .module-visual-v2 span,
.module-stack .module-visual-v2 span,
.module-paths .module-visual-v2 span {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid var(--module-color);
  border-radius: 50%;
  background: #07111c;
  box-shadow: 0 0 14px color-mix(in srgb, var(--module-color), transparent 38%);
}

.module-map .module-visual-v2 span:nth-child(1) { left: 28px; top: 42px; }
.module-map .module-visual-v2 span:nth-child(2) { left: 112px; top: 64px; }
.module-map .module-visual-v2 span:nth-child(3) { left: 58px; top: 142px; }
.module-map .module-visual-v2 span:nth-child(4) { left: 128px; top: 166px; }
.module-map .module-visual-v2::before,
.module-map .module-visual-v2::after {
  content: "";
  position: absolute;
  left: 36px;
  top: 51px;
  width: 100px;
  height: 1px;
  background: var(--module-color);
  transform: rotate(14deg);
  transform-origin: left;
  opacity: 0.58;
}
.module-map .module-visual-v2::after { top: 57px; width: 116px; transform: rotate(64deg); }

.module-catalog .module-visual-v2 { display: grid; align-content: center; gap: 14px; padding: 34px; }
.module-catalog .module-visual-v2 span { height: 12px; border-left: 4px solid var(--module-color); background: rgba(71, 167, 255, 0.12); }

.module-stack .module-visual-v2 span:nth-child(1) { left: 28px; top: 50px; }
.module-stack .module-visual-v2 span:nth-child(2) { left: 76px; top: 102px; }
.module-stack .module-visual-v2 span:nth-child(3) { left: 124px; top: 50px; }
.module-stack .module-visual-v2::before { content: ""; position: absolute; left: 35px; top: 57px; width: 96px; height: 96px; border: 1px solid var(--module-color); transform: rotate(45deg); opacity: 0.48; }

.module-state .module-visual-v2 { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 8px; padding: 32px; }
.module-state .module-visual-v2 span { background: var(--module-color); opacity: 0.62; }
.module-state .module-visual-v2 span:nth-child(1) { height: 38%; }.module-state .module-visual-v2 span:nth-child(2) { height: 70%; }.module-state .module-visual-v2 span:nth-child(3) { height: 54%; }.module-state .module-visual-v2 span:nth-child(4) { height: 84%; }

.module-safety .module-visual-v2 { display: grid; place-items: center; }
.module-safety .module-visual-v2 span { width: 74px; height: 88px; border: 3px solid var(--module-color); border-radius: 40px 40px 28px 28px; box-shadow: inset 0 0 0 12px rgba(255, 176, 32, 0.07); }

.module-paths .module-visual-v2 span:nth-child(1) { left: 18px; top: 115px; }.module-paths .module-visual-v2 span:nth-child(2) { left: 50px; top: 80px; }.module-paths .module-visual-v2 span:nth-child(3) { left: 83px; top: 118px; }.module-paths .module-visual-v2 span:nth-child(4) { left: 116px; top: 72px; }.module-paths .module-visual-v2 span:nth-child(5) { left: 140px; top: 126px; }
.module-paths .module-visual-v2::before { content: ""; position: absolute; left: 25px; top: 122px; width: 124px; height: 1px; background: var(--module-color); transform: rotate(-17deg); opacity: 0.56; }

.landing-why-v2 {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: 90px;
  align-items: center;
}

.landing-why-v2 h2 { margin: 10px 0 16px; font-size: 2.65rem; line-height: 1.12; }
.landing-why-v2 > div > p:last-child { color: #8ea8b8; line-height: 1.7; }
.landing-why-v2 ol { display: grid; gap: 1px; margin: 0; padding: 0; border: 1px solid rgba(71, 167, 255, 0.2); list-style: none; background: rgba(71, 167, 255, 0.18); }
.landing-why-v2 li { padding: 18px 20px 18px 54px; background: #09131f; color: #b9cbd4; counter-increment: why; }
.landing-why-v2 ol { counter-reset: why; }
.landing-why-v2 li::before { content: counter(why, decimal-leading-zero); display: inline-block; width: 38px; margin-left: -38px; color: #15f5ba; font-size: 0.64rem; font-weight: 800; }

.landing-plans-v2 { border-top: 1px solid rgba(142, 168, 184, 0.12); }
.plan-compare-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-card-v2 { display: flex; flex-direction: column; min-height: 450px; padding: 34px; border: 1px solid rgba(142, 168, 184, 0.2); border-radius: 8px; background: #09131f; }
.plan-card-v2.pro { border-color: rgba(183, 148, 244, 0.42); box-shadow: inset 0 3px #b794f4; }
.plan-card-v2.free { box-shadow: inset 0 3px #15f5ba; }
.plan-card-v2 > span { color: #7894a3; font-size: 0.62rem; font-weight: 850; }
.plan-card-v2 h3 { margin: 18px 0 8px; font-size: 1.5rem; }
.plan-card-v2 p { color: #91a8b5; line-height: 1.6; }
.plan-card-v2 ul { display: grid; gap: 12px; margin: 20px 0 30px; padding: 0; list-style: none; }
.plan-card-v2 li { position: relative; padding-left: 22px; color: #bed0d8; font-size: 0.82rem; }
.plan-card-v2 li::before { content: "+"; position: absolute; left: 0; color: #15f5ba; font-weight: 850; }
.plan-card-v2.pro li::before { color: #cbb1ff; }
.plan-card-v2 .primary-cta,
.plan-card-v2 .pro-cta { align-self: flex-start; margin-top: auto; }
.plan-boundary-v2 { max-width: 920px; margin: 22px auto 0; color: #829aa8; font-size: 0.72rem; line-height: 1.6; text-align: center; }

.landing-quality-v2 { border-top: 1px solid rgba(142, 168, 184, 0.12); }
.quality-grid-v2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 176, 32, 0.2); }
.quality-grid-v2 article { min-height: 210px; padding: 28px; background: #0a141f; }
.quality-grid-v2 span { color: #ffbd4d; font-size: 0.62rem; font-weight: 850; }
.quality-grid-v2 h3 { margin: 28px 0 9px; font-size: 1rem; }
.quality-grid-v2 p { margin: 0; color: #91a8b5; font-size: 0.78rem; line-height: 1.58; }

.landing-final-v2 {
  width: 100%;
  min-height: 420px;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 80px 24px;
  border-top: 1px solid rgba(21, 245, 186, 0.22);
  background: #07131d;
  text-align: center;
}

.landing-final-v2 h2 { max-width: 820px; margin: 12px 0; font-size: 2.55rem; line-height: 1.14; }
.landing-final-v2 > p:not(.section-kicker) { max-width: 680px; margin: 0; color: #91a8b5; line-height: 1.65; }
.landing-final-v2 > div { display: flex; gap: 10px; margin-top: 28px; }

@media (max-width: 1380px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-actions { display: none; }
  .language-switcher { grid-column: 3; }
  .landing-hero-copy-v2 h1 { font-size: 3.7rem; }
  .module-card-v2 { grid-template-columns: 135px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .landing-hero-v2 { min-height: min(610px, calc(100svh - 96px)); }
  .landing-hero-copy-v2 { width: min(100% - 32px, 760px); padding-block: 36px 48px; }
  .landing-hero-copy-v2 h1 { font-size: 3.1rem; }
  .landing-v2 .landing-section { width: min(100% - 32px, 760px); padding: 78px 0; }
  .landing-section-heading-v2,
  .landing-why-v2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .promise-rail-v2,
  .quality-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise-rail-v2 article:nth-child(2) { border-right: 0; }
  .promise-rail-v2 article:nth-child(n + 3) { border-top: 1px solid rgba(71, 167, 255, 0.18); }
  .module-grid-v2,
  .plan-compare-v2 { grid-template-columns: minmax(0, 1fr); }
  .landing-why-v2 { gap: 36px; }
  .landing-section-heading-v2 h2,
  .landing-why-v2 h2 { font-size: 2.2rem; }
}

@media (max-width: 700px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .site-brand-copy { display: none; }
  .site-nav { gap: 14px; padding-right: 0; mask-image: none; }
  .site-nav a,
  .site-nav button { font-size: 0.72rem; }
  .language-switcher { grid-template-columns: repeat(2, 32px); min-width: 64px; }
  .landing-hero-v2 { min-height: min(620px, calc(100svh - 88px)); }
  .landing-hero-media { object-position: 62% center; opacity: 0.35; }
  .hero-brand-lockup-v2 img { width: 58px; height: 58px; }
  .landing-hero-copy-v2 h1 { font-size: 2.55rem; }
  .landing-hero-copy-v2 .hero-lead { font-size: 1.05rem; }
  .landing-hero-copy-v2 .hero-ctas,
  .landing-final-v2 > div { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-boundary-v2 { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .product-stats-v2 { width: calc(100% - 24px); }
  .promise-rail-v2,
  .quality-grid-v2 { grid-template-columns: minmax(0, 1fr); }
  .promise-rail-v2 article { border-right: 0; border-top: 1px solid rgba(71, 167, 255, 0.18); }
  .promise-rail-v2 article:first-child { border-top: 0; }
  .module-card-v2 { grid-template-columns: minmax(0, 1fr); }
  .module-visual-v2 { min-height: 130px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--module-color), transparent 70%); }
  .plan-card-v2 { min-height: auto; padding: 26px; }
  .landing-final-v2 h2 { font-size: 2rem; }
}

@media (max-width: 430px) {
  .site-brand-logo { width: 36px; height: 36px; }
  .site-header { min-height: 68px; padding-inline: 8px; }
  .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 8px;
    width: 100%;
    overflow: visible;
  }
  .site-nav a,
  .site-nav button {
    min-height: 26px;
    padding: 1px 0;
    font-size: 0.65rem;
    text-align: left;
  }
  .site-nav [data-i18n="nav.pro"] { display: none; }
  .site-nav [data-i18n="nav.info"] { display: inline-flex; }
  .mechanism-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: hidden;
  }
  .mechanism-tabs button { font-size: 0.6rem; }
  .landing-hero-copy-v2 { width: calc(100% - 24px); }
  .landing-hero-copy-v2 h1 { font-size: 2.2rem; }
  .landing-v2 .landing-section { width: calc(100% - 24px); }
  .landing-section-heading-v2 h2,
  .landing-why-v2 h2 { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-v2 * { scroll-behavior: auto; }
}

/* Wave 07.3: canvas-first navigation and semantic zoom */
.navigator-section .app-shell {
  --map-sidebar-width: 304px;
  --detail-rail-width: 336px;
  height: calc(100dvh - var(--site-header-height, 68px));
}

.app-shell { min-height: calc(100dvh - var(--site-header-height, 68px)); }
.left-rail {
  overflow: hidden;
  padding: 10px;
  align-content: stretch;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.left-rail .brand-card { min-height: 70px; padding: 8px; }
.left-rail .brand-logo { width: 46px; height: 46px; }
.left-rail .brand-copy p:last-child { display: none; }

.navigator-rail-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-radius: 6px;
  background: rgba(4, 13, 23, 0.88);
}

.navigator-rail-tabs button {
  min-width: 0;
  min-height: 34px;
  padding: 5px 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #7897a6;
  cursor: pointer;
  font-size: 0.56rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.navigator-rail-tabs button:hover,
.navigator-rail-tabs button:focus-visible { color: #e7f8fc; outline: none; }
.navigator-rail-tabs button.active {
  border-color: rgba(84, 216, 232, 0.42);
  background: rgba(84, 216, 232, 0.11);
  color: #f2fdff;
}

.navigator-rail-panel {
  min-height: 0;
  overflow: auto;
  padding: 8px 1px 16px;
  scrollbar-color: rgba(120, 240, 255, 0.2) transparent;
}
.navigator-rail-panel[hidden] { display: none; }
.navigator-rail-panel.active { display: block; }

.rail-panel-hint {
  margin: 8px 3px 0;
  padding: 9px 10px;
  border-left: 2px solid rgba(84, 216, 232, 0.46);
  background: rgba(84, 216, 232, 0.045);
  color: #7898a6;
  font-size: 0.61rem;
  line-height: 1.5;
}

.rail-handoff-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(229, 138, 200, 0.18);
  border-left: 3px solid #e58ac8;
  border-radius: 6px;
  background: rgba(229, 138, 200, 0.045);
}
.rail-handoff-panel strong { color: #edf8fb; font-size: 0.76rem; }
.rail-handoff-panel p { margin: 0; color: #8da8b4; font-size: 0.63rem; line-height: 1.5; }
.rail-handoff-panel .primary { border-color: rgba(229, 138, 200, 0.4); color: #f5d9ec; }

.map-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.map-toolbar {
  min-height: 58px;
  grid-template-columns: minmax(130px, 1fr) auto auto auto;
  gap: 8px;
  padding: 8px 10px;
}

.semantic-mode-control {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  min-width: 256px;
}
.semantic-mode-control button { min-width: 0; padding-inline: 7px; }

.map-context-strip {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(120, 240, 255, 0.1);
  background: #06101c;
}

.map-context-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.map-context-bar::-webkit-scrollbar { display: none; }

.context-chip,
.context-clear-button {
  flex: 0 0 auto;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(120, 240, 255, 0.12);
  border-radius: 4px;
  background: rgba(15, 30, 44, 0.78);
  color: #9db6c1;
  font-size: 0.58rem;
}
.context-chip.primary { border-color: rgba(84, 216, 232, 0.38); color: #e7fcff; }
.context-chip.quiet { border-color: transparent; background: transparent; color: #698895; }
.context-clear-button {
  border-color: rgba(255, 176, 32, 0.24);
  background: rgba(255, 176, 32, 0.055);
  color: #d8c89f;
  cursor: pointer;
}

.semantic-level-control { display: flex; align-items: center; gap: 3px; }
.semantic-level-status {
  min-width: 104px;
  color: #d9edf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.57rem;
  text-align: right;
  white-space: nowrap;
}
.semantic-level-control button {
  width: 25px;
  height: 25px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(120, 240, 255, 0.13);
  border-radius: 50%;
  background: #0b1825;
  color: transparent;
  cursor: pointer;
  font-size: 0;
}
.semantic-level-control button::before {
  content: "";
  width: 7px;
  height: 7px;
  display: block;
  margin: auto;
  border-radius: 50%;
  background: #52717f;
}
.semantic-level-control button:nth-of-type(2)::before { width: 9px; height: 9px; background: #54d8e8; }
.semantic-level-control button:nth-of-type(3)::before { width: 11px; height: 11px; background: #83f2a4; }
.semantic-level-control button:nth-of-type(4)::before { width: 13px; height: 13px; background: #e58ac8; }
.semantic-level-control button.active {
  border-color: rgba(255, 255, 255, 0.68);
  box-shadow: 0 0 0 2px rgba(84, 216, 232, 0.12);
}

.map-shell { min-height: 0; }
#mapSvg[data-zoom-lod="atlas"] .node-label,
#mapSvg[data-zoom-lod="systems"] .node-label { font-size: 14px; }
#mapSvg[data-zoom-lod="mechanism"] .node-label { font-size: 12.5px; }
#mapSvg[data-zoom-lod="mechanism"] .node-type { font-size: 9px; }
#mapSvg[data-zoom-lod="atlas"] .domain-label { font-size: 84px; }
#mapSvg[data-zoom-lod="atlas"] .domain-sub { display: none; }
#mapSvg[data-zoom-lod="systems"] .domain-label { font-size: 48px; }
#mapSvg[data-zoom-lod="systems"] .domain-sub { display: none; }
#mapSvg[data-zoom-lod="atlas"] .edge { opacity: 0.24; stroke-width: 2.3; }
#mapSvg[data-zoom-lod="systems"] .edge { opacity: 0.3; stroke-width: 2; }

.map-footer { position: relative; min-height: 42px; padding: 6px 10px; }
.map-legend-drawer {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 8px);
  z-index: 48;
  width: min(720px, calc(100vw - 32px));
  max-height: 42vh;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(120, 240, 255, 0.24);
  border-radius: 7px;
  background: rgba(5, 13, 24, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.map-legend-drawer[hidden] { display: none; }
.map-legend-drawer .edge-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 7px 12px;
}

.mechanism-explorer-dock {
  right: 12px;
  bottom: 12px;
  left: 12px;
  width: auto;
  max-height: min(290px, calc(100% - 24px));
  border-color: rgba(84, 216, 232, 0.28);
}
.mechanism-explorer-dock.expanded { max-height: min(68vh, 720px, calc(100% - 24px)); }
.mechanism-dock-header { min-height: 42px; padding-block: 6px; background: rgba(7, 18, 30, 0.98); }
.mechanism-dock-actions { display: flex; gap: 5px; }
.mechanism-dock-header .mechanism-dock-actions button { width: 30px; height: 30px; }
.mechanism-explorer-panel { padding: 8px 10px 12px; }
.right-rail { min-width: 0; }

.app-shell.canvas-focus { grid-template-columns: minmax(0, 1fr) !important; }
.app-shell.canvas-focus > .left-rail,
.app-shell.canvas-focus > .right-rail,
.app-shell.canvas-focus > .sidebar-resize-handle,
.app-shell.canvas-focus > .sidebar-reopen-button { display: none !important; }
.app-shell.canvas-focus > .map-stage { grid-column: 1; }

@media (min-width: 1601px) {
  .app-shell,
  .app-shell.right-collapsed {
    grid-template-columns: var(--map-sidebar-width) minmax(0, 1fr) minmax(300px, var(--detail-rail-width));
  }
  .app-shell.right-collapsed { grid-template-columns: var(--map-sidebar-width) minmax(0, 1fr); }
}

@media (min-width: 1081px) and (max-width: 1600px) {
  body.detail-drawer-open .right-rail {
    top: 224px;
    max-height: calc(100vh - 236px);
  }
  .navigator-section .app-shell,
  .navigator-section .app-shell.right-collapsed { grid-template-columns: minmax(270px, 292px) minmax(0, 1fr); }
  .map-toolbar,
  body.detail-drawer-open .map-toolbar {
    min-height: 104px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-right: 10px;
  }
  .map-title-group { grid-column: 1; grid-row: 1; }
  .map-actions { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
  .semantic-mode-control { grid-column: 1; grid-row: 2; justify-self: start; }
  .map-visibility-control { grid-column: 2; grid-row: 2; justify-self: end; }
}

@media (max-width: 1080px) {
  .navigator-section .app-shell,
  .navigator-section .app-shell.right-collapsed { display: block; }
  .map-stage { min-height: calc(100dvh - 64px); }
  .map-toolbar { min-height: 104px; grid-template-columns: minmax(0, 1fr) auto; }
  .semantic-mode-control { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; }
  .map-visibility-control { grid-column: 1; grid-row: 3; }
  .map-context-strip { grid-template-columns: minmax(0, 1fr); }
  .semantic-level-control { justify-content: space-between; }
  .semantic-level-status { margin-right: auto; text-align: left; }
}

@media (max-width: 620px) {
  .map-stage { min-height: 100dvh; }
  .map-toolbar {
    min-height: 184px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    padding: 7px;
  }
  .map-title-group { grid-column: 1; grid-row: 1; }
  .map-title-group h2 { font-size: 0.88rem; }
  .map-actions {
    grid-column: 1;
    grid-row: 2;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .semantic-mode-control { grid-column: 1; grid-row: 3; }
  .map-visibility-control { grid-column: 1; grid-row: 4; justify-self: start; }
  .semantic-mode-control button { min-height: 34px; padding-inline: 3px; font-size: 0.56rem; }
  .map-context-strip { min-height: 70px; padding: 5px 7px; }
  .semantic-level-status { min-width: 92px; }
  .mechanism-explorer-dock {
    right: 5px;
    bottom: 5px;
    left: 5px;
    width: auto;
    max-height: min(48vh, 410px);
  }
  .mechanism-explorer-dock.expanded { max-height: calc(100% - 10px); }
  .map-legend-drawer {
    position: fixed;
    top: min(356px, calc(100dvh - 176px));
    right: 5px;
    bottom: auto;
    left: 5px;
    width: auto;
    max-height: min(44dvh, calc(100dvh - 368px));
  }
  .map-legend-drawer .edge-legend { grid-template-columns: 1fr; }
}