:root {
  --bg: #03050d;
  --panel: rgba(6, 10, 24, 0.58);
  --panel-strong: rgba(8, 13, 32, 0.82);
  --glass: rgba(255,255,255,0.055);
  --text: #edf2ff;
  --muted: #9aa8d6;
  --line: rgba(255,255,255,0.13);
  --accent: #8fb7ff;
  --accent-2: #d5b8ff;
  --good: #9ff0c4;
  --warn: #ffd48f;
  --shadow: 0 22px 110px rgba(0,0,0,.48);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #02040c;
  color: var(--text);
}
button, input { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--muted); }
.immersive-shell { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 48%, #111b46 0%, #070b1b 43%, #02040c 100%); }
.world-stage { position: absolute; inset: 0; overflow: hidden; perspective: 1100px; }
.starfield { position: absolute; inset: -20%; background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px), radial-gradient(rgba(143,183,255,.18) 1px, transparent 1px); background-size: 54px 54px, 19px 19px; opacity: .22; transform: translateZ(-40px) scale(1.05); }
.world-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(143,183,255,.22), transparent 21%), radial-gradient(circle at 70% 60%, rgba(213,184,255,.14), transparent 24%), radial-gradient(circle at center, rgba(159,240,196,.055), transparent 36%); pointer-events: none; }
.world-stage::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(143,183,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(143,183,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 72%); pointer-events: none; }
.world-context { position: absolute; top: 22px; left: 28px; z-index: 24; max-width: 460px; pointer-events: none; text-shadow: 0 8px 42px rgba(0,0,0,.72); }
.eyebrow { color: var(--good); text-transform: uppercase; letter-spacing: .18em; font-size: .63rem; font-weight: 850; margin-bottom: 7px; }
.world-context h1 { font-size: clamp(1.25rem, 2.35vw, 2.9rem); line-height: .96; letter-spacing: -.045em; max-width: 420px; }
.world-context p:not(.eyebrow) { color: #b9c7ff; margin-top: 8px; font-size: .8rem; max-width: 430px; opacity: .82; }
.home-orb { position: absolute; top: 22px; right: 24px; z-index: 42; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(8,12,28,.42); backdrop-filter: blur(16px); cursor: pointer; box-shadow: var(--shadow); opacity: .55; }
.home-orb:hover { border-color: var(--accent); background: rgba(143,183,255,.15); opacity: 1; }
.universe-map { position: absolute; inset: 0; overflow: hidden; transform-style: preserve-3d; }
.universe-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(74vw, 860px); height: min(74vh, 860px); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(143,183,255,.07); box-shadow: inset 0 0 120px rgba(143,183,255,.07), 0 0 160px rgba(143,183,255,.06); pointer-events: none; }
.connection { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(143,183,255,.44), transparent); transform-origin: left center; pointer-events: none; z-index: 3; opacity: .72; box-shadow: 0 0 14px rgba(143,183,255,.18); }
.biome { position: absolute; z-index: 1; transform: translate(-50%, -50%); border-radius: 999px; border: 1px solid rgba(255,255,255,.045); background: radial-gradient(circle at center, rgba(143,183,255,.075), rgba(143,183,255,.022) 52%, transparent 72%); display: grid; place-items: center; pointer-events: none; opacity: .82; }
.biome::after { content: ""; position: absolute; inset: 11%; border-radius: 999px; border: 1px dashed rgba(143,183,255,.08); }
.biome span { color: rgba(220,230,255,.28); text-transform: uppercase; letter-spacing: .18em; font-weight: 900; font-size: clamp(.55rem, .75vw, .72rem); transform: translateY(-5px); }
.biome small { position: absolute; top: calc(50% + 11px); color: rgba(159,240,196,.36); font-size: .62rem; }
.biome-aromatics { background: radial-gradient(circle, rgba(159,240,196,.09), rgba(159,240,196,.02) 54%, transparent 73%); }
.biome-vegetables { background: radial-gradient(circle, rgba(143,255,180,.075), rgba(143,255,180,.018) 54%, transparent 73%); }
.biome-fruits { background: radial-gradient(circle, rgba(255,212,143,.075), rgba(255,212,143,.018) 54%, transparent 73%); }
.biome-proteins { background: radial-gradient(circle, rgba(213,184,255,.08), rgba(213,184,255,.018) 54%, transparent 73%); }
.biome-starches { background: radial-gradient(circle, rgba(255,255,180,.06), rgba(255,255,180,.014) 54%, transparent 73%); }
.node { position: absolute; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,0.18); background: radial-gradient(circle at 35% 22%, rgba(255,255,255,.10), rgba(9, 14, 34, 0.84) 52%, rgba(3,5,13,.92)); color: var(--text); cursor: pointer; display: grid; place-items: center; text-align: center; padding: 12px; box-shadow: 0 0 34px rgba(143,183,255,0.14), inset 0 0 18px rgba(255,255,255,.025); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease; backdrop-filter: blur(14px); z-index: 6; }
.node:hover, .node.active { transform: translate(-50%, -50%) scale(1.08); border-color: rgba(159,240,196,.72); background: radial-gradient(circle at 35% 22%, rgba(255,255,255,.18), rgba(38,54,112,0.84) 52%, rgba(9,14,34,.92)); box-shadow: 0 0 82px rgba(159,240,196,.24), 0 0 30px rgba(143,183,255,.20); filter: saturate(1.14); }
.node .node-title { font-weight: 850; line-height: 1.05; font-size: .86rem; }
.node .node-meta { display: block; color: var(--muted); font-size: .59rem; margin-top: 5px; opacity: .82; }
.node.core { width: 190px; height: 190px; border-radius: 999px; background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.26), rgba(143,183,255,.25) 41%, rgba(10,15,34,.89)); z-index: 8; box-shadow: 0 0 125px rgba(143,183,255,.26), inset 0 0 42px rgba(255,255,255,.035); }
.node.core .node-title { font-size: 1.15rem; }
.node.world { width: 134px; height: 134px; border-radius: 999px; }
.node.region { width: 124px; height: 124px; border-radius: 999px; }
.node.object { width: 92px; height: 92px; border-radius: 999px; padding: 10px; }
.node.object .node-title { font-size: .72rem; }
.node.object .node-meta { font-size: .54rem; }
.node.ingredient { width: 88px; height: 88px; }
.node.mealcraft { box-shadow: 0 0 96px rgba(159,240,196,0.22), inset 0 0 28px rgba(159,240,196,.04); }
.hud-panel { position: absolute; z-index: 30; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); backdrop-filter: blur(24px); box-shadow: var(--shadow); padding: 14px; opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; transition: opacity .18s ease, transform .18s ease, border-color .18s ease; }
.hud-panel.open, .hud-panel.always-on { opacity: 1; transform: none; pointer-events: auto; }
.hud-panel h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; color: #dce5ff; }
.hud-breadcrumbs { top: 94px; left: 28px; max-width: min(620px, calc(100vw - 420px)); padding: 8px 10px; background: rgba(6,10,24,.38); }
.breadcrumbs { list-style: none; padding: 0; margin: 0; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.breadcrumb-item { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .74rem; }
.breadcrumb-item:not(:last-child)::after { content: "›"; color: rgba(255,255,255,0.34); }
.breadcrumb-item button { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,0.035); color: var(--text); border-radius: 999px; padding: 5px 9px; cursor: pointer; }
.breadcrumb-item button:hover { border-color: var(--accent); background: rgba(143,183,255,0.14); }
.breadcrumb-item.current span { border: 1px solid rgba(159,240,196,0.25); color: var(--good); background: rgba(159,240,196,0.06); border-radius: 999px; padding: 5px 9px; }
.hud-search { top: 142px; left: 28px; width: 286px; }
.hud-search label { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin-bottom: 7px; }
input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(3,5,13,.72); color: var(--text); outline: none; font-size: .82rem; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(143,183,255,.10); }
.hud-worlds { left: 28px; bottom: 28px; width: 230px; max-height: 38vh; overflow: auto; }
.world-list { display: grid; gap: 7px; }
.world-button { width: 100%; border: 1px solid rgba(255,255,255,.10); border-radius: 13px; background: rgba(255,255,255,0.04); padding: 9px; text-align: left; cursor: pointer; }
.world-button:hover, .world-button.active { border-color: rgba(143,183,255,0.72); background: rgba(143,183,255,0.13); }
.world-button strong { display: block; font-size: .8rem; }
.world-button span { display: none; }
.hud-inspector { right: 24px; top: 70px; width: 322px; max-height: calc(100vh - 142px); overflow: auto; }
.panel-header { display: flex; justify-content: space-between; gap: 12px; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.panel-header h2 { font-size: .94rem; text-transform: none; letter-spacing: 0; margin: 0; }
.badge { border: 1px solid var(--line); color: var(--good); border-radius: 999px; padding: 3px 7px; font-size: .62rem; white-space: nowrap; }
.metadata { display: grid; grid-template-columns: max-content 1fr; gap: 6px 10px; padding: 4px 0 11px; margin: 0 0 11px; border-bottom: 1px solid var(--line); }
.metadata dt { color: var(--muted); font-size: .55rem; text-transform: uppercase; letter-spacing: .1em; }
.metadata dd { margin: 0; color: #c8d3ff; overflow-wrap: anywhere; font-size: .76rem; }
.preview { white-space: normal; overflow: visible; background: transparent; color: #dce5ff; border: 0; padding: 0; font-family: inherit; font-size: .78rem; line-height: 1.45; }
.hud-timeline { right: 380px; bottom: 28px; width: 300px; max-height: 36vh; overflow: auto; }
.timeline { display: grid; gap: 9px; }
.timeline-item { border-left: 2px solid rgba(143,183,255,0.50); padding: 4px 0 4px 11px; color: var(--muted); font-size: .75rem; }
.timeline-item strong { color: var(--text); display: block; font-size: .82rem; }
.hud-diagnostics { right: 24px; bottom: 92px; width: 330px; max-height: 42vh; overflow: auto; }
.stats, .mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.stat, .mini-stat { border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 10px; background: rgba(255,255,255,.04); }
.stat strong, .mini-stat strong { display: block; font-size: 1rem; }
.stat span, .mini-stat span { display: block; color: var(--muted); font-size: .68rem; }
.hud-nutrition { right: 364px; top: 70px; width: 286px; max-height: 42vh; overflow: auto; }
.hud-palette { position: absolute; right: 24px; bottom: 24px; z-index: 60; width: 72px; height: 72px; }
.hud-toggle { position: absolute; right: 0; bottom: 0; width: 54px; height: 54px; border-radius: 999px; border: 1px solid rgba(159,240,196,.34); background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), rgba(159,240,196,.18) 42%, rgba(8,12,28,.82)); backdrop-filter: blur(18px); cursor: pointer; box-shadow: 0 0 52px rgba(159,240,196,.24); color: var(--good); font-size: 1.12rem; z-index: 2; }
.hud-toggle:hover { box-shadow: 0 0 72px rgba(159,240,196,.35); }
.hud-actions { position: absolute; right: 4px; bottom: 4px; width: 250px; height: 250px; pointer-events: none; transform-origin: bottom right; transition: opacity .16s ease, transform .16s ease; }
.hud-actions.collapsed { opacity: 0; transform: scale(.72); }
.hud-actions button { position: absolute; width: 92px; border: 1px solid rgba(255,255,255,.12); background: rgba(8,12,28,.62); backdrop-filter: blur(18px); border-radius: 999px; padding: 8px 9px; cursor: pointer; font-size: .68rem; color: var(--muted); pointer-events: auto; box-shadow: 0 10px 42px rgba(0,0,0,.32); }
.hud-actions button:hover { border-color: var(--accent); color: var(--text); }
.hud-actions button.active { color: var(--good); border-color: rgba(159,240,196,.34); background: rgba(159,240,196,.08); }
.hud-actions button:nth-child(1) { right: 124px; bottom: 16px; }
.hud-actions button:nth-child(2) { right: 136px; bottom: 66px; }
.hud-actions button:nth-child(3) { right: 112px; bottom: 114px; }
.hud-actions button:nth-child(4) { right: 62px; bottom: 142px; }
.hud-actions button:nth-child(5) { right: 12px; bottom: 126px; }
.hud-actions button:nth-child(6) { right: 0; bottom: 74px; }
.knowledge-card { display: grid; gap: 12px; }
.knowledge-card h3 { margin-top: 3px; color: var(--good); font-size: .78rem; }
.knowledge-card p { color: #dce5ff; line-height: 1.45; }
.knowledge-card pre { white-space: pre-wrap; overflow: auto; background: rgba(0,0,0,0.22); border: 1px solid var(--line); border-radius: 12px; padding: 10px; max-height: 190px; font-size: .7rem; }
.related-list { display: grid; gap: 7px; }
.related-list button { text-align: left; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; padding: 9px 10px; background: rgba(255,255,255,0.045); color: var(--text); cursor: pointer; }
.related-list button:hover { border-color: var(--accent); background: rgba(143,183,255,0.12); }
.related-list span { display: block; color: var(--muted); font-size: .67rem; margin-top: 3px; }
.ingredient-group { margin-top: 4px; }
.nutrition-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.42rem; margin: 0.55rem 0 .78rem; }
.nutrition-grid div { border: 1px solid rgba(141, 160, 255, 0.22); border-radius: 12px; padding: 0.5rem; background: rgba(255, 255, 255, 0.042); }
.nutrition-grid strong { display: block; font-size: .88rem; }
.nutrition-grid span { color: var(--muted); font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.08em; }
.micro-list { columns: 2; padding-left: 1.1rem; color: var(--text); font-size: .72rem; }
@media (max-width: 1100px) {
  .world-context h1 { font-size: 1.65rem; }
  .hud-inspector { width: min(322px, calc(100vw - 48px)); top: 130px; }
  .hud-breadcrumbs { max-width: calc(100vw - 56px); top: 82px; }
  .hud-nutrition, .hud-timeline { left: 24px; right: auto; width: min(286px, calc(100vw - 48px)); }
}

.node.ingredient-group, .node.ingredient-subgroup { border-color: rgba(159,240,196,.32); box-shadow: 0 0 64px rgba(159,240,196,.13), inset 0 0 22px rgba(159,240,196,.035); }
.node.ingredient-subgroup { width: 112px; height: 112px; }
.node.ingredient-group .node-title, .node.ingredient-subgroup .node-title { letter-spacing: .01em; }
.metadata-inline { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .75rem; }
.metadata-inline dt { color: var(--muted); text-transform: uppercase; font-size: .62rem; letter-spacing: .08em; }
.metadata-inline dd { margin: 0; }
code { color: var(--accent); }

.build-badge { position: fixed; left: 16px; bottom: 14px; z-index: 12; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(183, 229, 255, .72); border: 1px solid rgba(145, 202, 255, .22); border-radius: 999px; padding: 6px 10px; background: rgba(4, 8, 20, .52); backdrop-filter: blur(12px); }
.node.ingredient-group { width: 128px; height: 128px; background: radial-gradient(circle at 35% 25%, rgba(171,211,255,.42), rgba(16,27,53,.96) 56%, rgba(5,10,23,.98)); border-color: rgba(135, 255, 204, .45); box-shadow: 0 0 50px rgba(92, 175, 255, .25); }
.node.ingredient-subgroup { width: 112px; height: 112px; border-color: rgba(139, 217, 255, .35); }
.node.ingredient { width: 88px; height: 88px; }
.node.more-node { width: 104px; height: 104px; border-style: dashed; opacity: .86; }
#reset-hud, .reset-hud, button[id*="reset" i] { display: none !important; }

/* v0.0.17 ingredient atlas verification/fix */
.build-badge { position: fixed; left: 18px; bottom: 14px; z-index: 80; color: rgba(159,240,196,.9); border: 1px solid rgba(159,240,196,.24); background: rgba(3,7,18,.58); padding: 7px 10px; border-radius: 999px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(12px); }
.atlas-backplane { position: absolute; left: 50%; top: 50%; width: min(76vw, 920px); height: min(68vh, 620px); transform: translate(-50%, -50%); border-radius: 44px; border: 1px solid rgba(143,183,255,.09); background: radial-gradient(circle at 50% 45%, rgba(93,142,225,.10), rgba(31,49,95,.035) 56%, rgba(0,0,0,0) 75%); box-shadow: inset 0 0 90px rgba(143,183,255,.035), 0 0 160px rgba(58,114,218,.06); pointer-events: none; display: grid; place-items: center; text-align: center; z-index: 1; }
.atlas-backplane span { display: block; color: rgba(221,232,255,.16); font-weight: 950; letter-spacing: .22em; text-transform: uppercase; font-size: clamp(1.1rem, 2.8vw, 2.7rem); }
.atlas-backplane small { margin-top: 12px; display: block; color: rgba(159,240,196,.22); letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; }
.connection { z-index: 2; opacity: .16; }
.node { z-index: 6; }
.node.core { z-index: 10; }
.node.ingredient-group { width: 150px; height: 150px; border-radius: 34px; background: linear-gradient(145deg, rgba(34,52,94,.94), rgba(6,10,24,.98)); border-color: rgba(159,240,196,.46); box-shadow: 0 0 38px rgba(78,156,255,.14), inset 0 0 32px rgba(159,240,196,.045); }
.node.ingredient-group .node-title { font-size: .86rem; }
.node.ingredient-group .node-meta { font-size: .62rem; color: rgba(159,240,196,.72); }
.node.ingredient-subgroup { width: 136px; height: 136px; border-radius: 30px; background: linear-gradient(145deg, rgba(26,43,84,.94), rgba(5,9,22,.98)); border-color: rgba(139,217,255,.35); }
.node.ingredient { width: 104px; height: 104px; border-radius: 999px; }
.micro-list li strong { text-transform: none; }

/* v0.0.18 HUD-safe atlas and inspector cleanup */
body.inspector-open .universe-map {
  right: 390px;
}
body.inspector-open .universe-map::after,
body.inspector-open .atlas-backplane {
  left: 50%;
}
.hud-inspector {
  width: 300px;
  background: rgba(5, 9, 22, 0.72);
}
body.inspector-open .hud-inspector {
  z-index: 55;
}
.hud-nutrition {
  right: 338px;
  width: 250px;
  max-height: 32vh;
  background: rgba(5, 9, 22, 0.60);
}
body:not(.nutrition-open) .hud-nutrition { pointer-events: none; }
.source-details {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.035);
}
.source-details summary {
  cursor: pointer;
  color: var(--good);
  font-weight: 800;
  font-size: .76rem;
}
.source-details .metadata-inline {
  margin-top: 9px;
}
.metadata dt:nth-child(n), .metadata dd:nth-child(n) {}
@media (max-width: 1100px) {
  body.inspector-open .universe-map { right: 0; }
  .hud-nutrition { right: auto; }
}

/* v0.0.22 Dish archetype atlas */
.dish-backplane { background: radial-gradient(circle at 50% 45%, rgba(213,184,255,.10), rgba(80,92,164,.035) 56%, rgba(0,0,0,0) 75%); }
.node.dish-family { border-radius: 34px; width: 146px; height: 146px; background: linear-gradient(145deg, rgba(44,42,92,.94), rgba(7,9,24,.98)); border-color: rgba(213,184,255,.42); box-shadow: 0 0 42px rgba(213,184,255,.13), inset 0 0 30px rgba(255,255,255,.035); }
.node.dish-family .node-meta { color: rgba(213,184,255,.72); }
.node.dish-node { width: 108px; height: 108px; border-color: rgba(213,184,255,.30); }
.node.dish-node .node-title { font-size: .72rem; }

/* v0.0.23 Dish Composer */
.dish-composer-card h3 {
  margin: 1rem 0 .45rem;
}
.composer-title-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.composer-title-row h3 {
  margin: .1rem 0 0;
  font-size: 1.05rem;
}
.composer-kicker {
  margin: 0;
  color: var(--accent, #91ffd2);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  font-weight: 800;
}
.ghost-button {
  border: 1px solid rgba(148, 255, 215, .35);
  background: rgba(5, 12, 28, .55);
  color: #bfffe5;
  border-radius: 999px;
  padding: .35rem .7rem;
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.ghost-button:hover { border-color: rgba(148, 255, 215, .8); }
.composer-serving-row,
.composer-slot,
.composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.composer-serving-row {
  margin: .8rem 0 .65rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(150, 180, 230, .18);
  border-radius: .85rem;
  background: rgba(255,255,255,.03);
}
.composer-serving-row label,
.composer-grams,
.composer-check {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.composer-serving-row input,
.composer-grams input,
.composer-slot select {
  border: 1px solid rgba(150, 180, 230, .25);
  background: rgba(4, 9, 22, .72);
  color: #eaf1ff;
  border-radius: .55rem;
  padding: .35rem .45rem;
}
.composer-serving-row input { width: 4.2rem; }
.composer-grams input { width: 4.8rem; }
.composer-slot select { min-width: 12rem; width: 100%; }
.composer-list {
  display: grid;
  gap: .45rem;
}
.composer-row {
  padding: .55rem .6rem;
  border: 1px solid rgba(150, 180, 230, .16);
  border-radius: .75rem;
  background: rgba(255,255,255,.025);
}
.composer-check {
  min-width: 0;
  color: #eaf1ff;
  font-weight: 700;
}
.composer-check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.micro-list.compact {
  margin-top: .6rem;
}

/* v0.0.24 Focus Stage */
.focus-stage {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  right: clamp(360px, 27vw, 430px);
  top: 118px;
  bottom: 42px;
  z-index: 44;
  pointer-events: auto;
}
.focus-stage.hidden { display: none; }
body.focus-stage-open .universe-map { opacity: .24; filter: blur(.6px) saturate(.82); }
.focus-shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid rgba(151, 190, 255, .18);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(7, 12, 30, .82), rgba(12, 20, 45, .70));
  box-shadow: 0 24px 120px rgba(0,0,0,.38), inset 0 0 80px rgba(143,183,255,.035);
  backdrop-filter: blur(22px);
  overflow: hidden;
}
.focus-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.025);
}
.focus-mode-bar strong { display: block; color: #eef4ff; font-size: 1.05rem; }
.focus-mode-bar nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.focus-mode-bar nav button {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  padding: .42rem .7rem;
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.focus-mode-bar nav button.active,
.focus-mode-bar nav button:hover { color: var(--good); border-color: rgba(159,240,196,.42); background: rgba(159,240,196,.07); }
.focus-body { min-height: 0; overflow: auto; padding: 20px; }
.focus-section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.focus-section-title h2, .focus-learn h2, .focus-relationships h2, .focus-media h2 { margin: .15rem 0 0; font-size: clamp(1.45rem, 2vw, 2.2rem); }
.focus-lead { color: #dfe8ff; max-width: 72ch; line-height: 1.48; margin: .55rem 0 1rem; }
.composer-dashboard { display: grid; grid-template-columns: minmax(360px, 1.25fr) minmax(280px, .85fr); gap: 18px; align-items: start; }
.composer-control-panel, .composer-results-panel, .focus-learn section, .focus-relationships section {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  padding: 14px;
}
.composer-control-panel h3, .composer-results-panel h3 { margin-top: 1rem; color: var(--good); }
.composer-serving-row.big { font-size: 1rem; }
.composer-slot.big select, .composer-add-row select { min-width: 0; width: 100%; }
.composer-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; }
.composer-add-row select {
  border: 1px solid rgba(150, 180, 230, .25);
  background: rgba(4, 9, 22, .72);
  color: #eaf1ff;
  border-radius: .65rem;
  padding: .55rem .65rem;
}
.composer-row.large { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .65rem; align-items: center; }
.composer-role { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.ghost-button.tiny { padding: .25rem .5rem; font-size: .68rem; }
.composer-results-panel { position: sticky; top: 0; }
.composer-micro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin: .8rem 0; padding: 0; list-style: none; }
.composer-micro-grid li { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: .25rem; }
.selected-ingredient-list { display: grid; gap: .4rem; padding: 0; list-style: none; }
.selected-ingredient-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; }
.learn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1rem 0; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.two-col div { border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.028); }
.relationship-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .55rem; }
.relationship-chip-grid button { text-align: left; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; padding: .7rem; background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; }
.relationship-chip-grid button:hover { border-color: rgba(159,240,196,.42); }
.relationship-chip-grid span { display: block; color: var(--muted); font-size: .68rem; margin-top: .25rem; }
.media-search-link { display: inline-block; color: var(--good); border: 1px solid rgba(159,240,196,.28); border-radius: 999px; padding: .75rem 1rem; text-decoration: none; background: rgba(159,240,196,.06); }
.focus-placeholder { display: grid; place-items: center; text-align: center; height: 100%; color: var(--muted); }
.mini-composer-summary .nutrition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .focus-stage { left: 24px; right: 24px; top: 112px; bottom: 32px; }
  .composer-dashboard { grid-template-columns: 1fr; }
  .composer-results-panel { position: static; }
  .hud-inspector.open { display: none; }
}
@media (max-width: 760px) {
  .focus-mode-bar { align-items: flex-start; flex-direction: column; }
  .learn-grid, .two-col { grid-template-columns: 1fr; }
  .composer-row.large { grid-template-columns: 1fr; }
  .composer-add-row { grid-template-columns: 1fr; }
  .focus-body { padding: 14px; }
}

/* v0.0.25 Focus Experience Runtime */
.focus-shell {
  animation: focusLensIn .22s ease-out;
}
@keyframes focusLensIn {
  from { opacity: .76; transform: translateY(8px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.focus-mode-bar nav button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.focus-mode-bar nav button span {
  color: rgba(159,240,196,.86);
  font-size: .82rem;
}
.focus-body[data-focus-body] {
  animation: focusBodySwap .18s ease-out;
}
@keyframes focusBodySwap {
  from { opacity: .35; transform: translateX(10px); filter: blur(2px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.focus-lens-builder {
  border-color: rgba(159,240,196,.24);
  box-shadow: 0 26px 130px rgba(0,0,0,.42), inset 0 0 95px rgba(159,240,196,.045);
}
.focus-lens-learn {
  border-color: rgba(143,183,255,.22);
}
.focus-lens-relationships {
  border-color: rgba(213,184,255,.25);
}
.focus-lens-timeline {
  border-color: rgba(255,212,143,.25);
}
.builder-dashboard {
  grid-template-columns: minmax(420px, 1.08fr) minmax(340px, .92fr);
}
.builder-slot-grid {
  display: grid;
  gap: .6rem;
  margin: .65rem 0 1rem;
}
.builder-slot-card {
  display: grid;
  grid-template-columns: minmax(120px, .42fr) minmax(220px, .58fr);
  gap: .8rem;
  align-items: center;
  padding: .7rem;
  border: 1px solid rgba(159,240,196,.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(159,240,196,.055), rgba(143,183,255,.028));
}
.builder-slot-card h3 { margin: 0; color: #dfffee; }
.builder-slot-card p { font-size: .72rem; }
.builder-impact-grid {
  display: grid;
  gap: .8rem;
  margin: 1rem 0;
}
.builder-impact-grid section {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.028);
  padding: .85rem;
}
.impact-meter {
  display: grid;
  grid-template-columns: 82px 1fr 32px;
  gap: .55rem;
  align-items: center;
  margin: .35rem 0;
  font-size: .75rem;
}
.impact-meter span { color: var(--muted); }
.impact-meter strong { color: var(--good); text-align: right; }
.impact-meter meter {
  width: 100%;
  height: 9px;
  accent-color: var(--good);
}
.alignment-orb {
  width: 132px;
  height: 132px;
  border-radius: 999px;
  border: 1px solid rgba(159,240,196,.3);
  display: grid;
  place-items: center;
  text-align: center;
  margin: .55rem auto .75rem;
  background: radial-gradient(circle, rgba(159,240,196,.12), rgba(143,183,255,.04) 58%, transparent 72%);
  box-shadow: inset 0 0 38px rgba(159,240,196,.06), 0 0 34px rgba(159,240,196,.08);
}
.alignment-orb strong {
  display: block;
  font-size: 1.75rem;
  color: var(--good);
}
.alignment-orb span {
  display: block;
  padding: 0 .7rem;
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.relationship-chip-grid.small {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.focus-nutrition,
.focus-timeline {
  display: grid;
  gap: 1rem;
}
.timeline-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
  counter-reset: temporal;
}
.timeline-ribbon li {
  counter-increment: temporal;
  min-height: 110px;
  border: 1px solid rgba(255,212,143,.18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,212,143,.07), rgba(255,255,255,.026));
  padding: .85rem;
  position: relative;
  overflow: hidden;
}
.timeline-ribbon li::before {
  content: counter(temporal);
  position: absolute;
  right: .75rem;
  top: .45rem;
  color: rgba(255,212,143,.32);
  font-weight: 900;
  font-size: 2.1rem;
}
.timeline-ribbon span {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 85%;
  color: #fff1d6;
  font-weight: 800;
  line-height: 1.25;
}
.lens-placeholder > div {
  max-width: 560px;
  display: grid;
  gap: .75rem;
}
@media (max-width: 1200px) {
  .builder-dashboard { grid-template-columns: 1fr; }
  .builder-slot-card { grid-template-columns: 1fr; }
}

/* v0.0.26 Focus Stage Knowledge Cockpit */
body.focus-stage-open .world-context,
body.focus-stage-open .build-badge,
body.focus-stage-open .hud-inspector.open,
body.focus-stage-open .hud-nutrition.open,
body.focus-stage-open .hud-timeline.open {
  opacity: .18;
  pointer-events: none;
}
body.focus-stage-open .hud-breadcrumbs {
  opacity: .55;
  max-width: min(520px, calc(100vw - 140px));
}
body.focus-stage-open .universe-map {
  opacity: .16;
  filter: blur(1.5px) saturate(.72) brightness(.74);
  transform: scale(.92) translateX(-10vw);
  transform-origin: center;
}
body.focus-stage-open .universe-map .node,
body.focus-stage-open .universe-map button {
  box-shadow: none !important;
}
.focus-stage {
  left: clamp(18px, 3.5vw, 58px);
  right: clamp(18px, 3.5vw, 58px);
  top: 118px;
  bottom: 28px;
  z-index: 50;
}
.focus-cockpit {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.focus-orbit-panel {
  border: 1px solid rgba(143,183,255,.16);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(7,12,30,.62), rgba(7,12,30,.34));
  backdrop-filter: blur(20px);
  box-shadow: inset 0 0 70px rgba(143,183,255,.04), 0 22px 90px rgba(0,0,0,.25);
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}
.orbit-node-core {
  min-height: 172px;
  border-radius: 999px;
  border: 1px solid rgba(159,240,196,.23);
  background: radial-gradient(circle, rgba(159,240,196,.13), rgba(143,183,255,.045) 58%, transparent 74%);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  box-shadow: inset 0 0 42px rgba(159,240,196,.055), 0 0 36px rgba(159,240,196,.07);
}
.orbit-node-core span { color: var(--good); font-size: 1.3rem; }
.orbit-node-core strong { color: #f3f8ff; line-height: 1.15; }
.orbit-node-core small { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; }
.orbit-mode-stack,
.orbit-related-stack {
  display: grid;
  gap: .45rem;
}
.orbit-related-stack {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.orbit-mode-stack button,
.orbit-related-stack button {
  text-align: left;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: #e9f1ff;
  padding: .65rem .72rem;
  cursor: pointer;
}
.orbit-mode-stack button {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
}
.orbit-mode-stack button span { color: rgba(159,240,196,.78); }
.orbit-mode-stack button.active,
.orbit-mode-stack button:hover,
.orbit-related-stack button:hover {
  border-color: rgba(159,240,196,.35);
  background: rgba(159,240,196,.075);
  color: var(--good);
}
.orbit-related-stack button span {
  display: block;
  color: var(--muted);
  font-size: .66rem;
  margin-top: .2rem;
}
.focus-cockpit .focus-shell {
  min-width: 0;
}
.focus-shell {
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(7,12,30,.88), rgba(12,20,45,.76));
}
.focus-mode-bar nav {
  max-width: min(720px, 56vw);
}
.builder-cockpit-grid {
  display: grid;
  grid-template-columns: minmax(430px, 1.02fr) minmax(360px, .98fr);
  gap: 18px;
  align-items: start;
}
.builder-lens-rail {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .8rem 0 1rem;
}
.builder-lens-rail button {
  border: 1px solid rgba(159,240,196,.18);
  border-radius: 999px;
  background: rgba(159,240,196,.055);
  color: #daf8eb;
  padding: .48rem .75rem;
  cursor: pointer;
  font-size: .74rem;
}
.builder-lens-rail button:hover { border-color: rgba(159,240,196,.42); background: rgba(159,240,196,.11); }
.quantity-stepper {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: .32rem;
}
.quantity-stepper button {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: #eaf1ff;
  cursor: pointer;
}
.quantity-stepper button:hover { color: var(--good); border-color: rgba(159,240,196,.34); }
.builder-ingredient-row {
  border-bottom: 1px solid rgba(255,255,255,.055);
  padding: .4rem 0;
}
.builder-delta-card {
  border: 1px solid rgba(255,212,143,.14);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,212,143,.055), rgba(255,255,255,.024));
  padding: .85rem;
  margin: .8rem 0;
}
.builder-delta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: .55rem;
}
.builder-delta-grid div {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .55rem;
  background: rgba(255,255,255,.026);
}
.builder-delta-grid span:first-child {
  display: block;
  color: var(--muted);
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .2rem;
}
.delta { font-weight: 900; }
.delta.up { color: #9ff0c4; }
.delta.down { color: #ffd48f; }
.delta.neutral { color: var(--muted); }
.technique-signal-list {
  padding-left: 1.1rem;
  color: #eaf1ff;
  line-height: 1.45;
  margin: .4rem 0 0;
}
.alignment-orb {
  width: 132px;
  height: 132px;
  border-radius: 999px;
  border: 1px solid rgba(159,240,196,.3);
  display: grid;
  place-items: center;
  text-align: center;
  margin: .55rem auto .75rem;
  background: radial-gradient(circle, rgba(159,240,196,.12), rgba(143,183,255,.04) 58%, transparent 72%);
  box-shadow: inset 0 0 38px rgba(159,240,196,.06), 0 0 34px rgba(159,240,196,.08);
}
@media (max-width: 1180px) {
  .focus-cockpit { grid-template-columns: 1fr; }
  .focus-orbit-panel { display: none; }
  .builder-cockpit-grid { grid-template-columns: 1fr; }
  .focus-mode-bar nav { max-width: none; }
}
@media (max-width: 760px) {
  .focus-stage { left: 12px; right: 12px; top: 102px; bottom: 18px; }
  .builder-cockpit-grid { grid-template-columns: 1fr; }
  .quantity-stepper { justify-content: start; }
}

/* v0.0.27 Dish Builder Visual Depth */
.hud-breadcrumbs {
  top: 18px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  max-width: min(720px, calc(100vw - 420px)) !important;
  z-index: 62;
  justify-content: center;
}
body.focus-stage-open .hud-breadcrumbs {
  opacity: .9;
  max-width: min(760px, calc(100vw - 420px)) !important;
  background: rgba(8, 14, 34, .72);
  border-color: rgba(159,240,196,.16);
  box-shadow: 0 10px 44px rgba(0,0,0,.28), inset 0 0 30px rgba(159,240,196,.035);
}
.focus-stage { top: 86px; }
.focus-section-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 12px;
}
.builder-serving-inline {
  display: inline-grid;
  grid-template-columns: auto 28px 56px 28px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(143,183,255,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.builder-serving-inline span {
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.builder-serving-inline button,
.builder-serving-inline input {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,9,22,.72);
  color: #eef5ff;
  height: 30px;
  text-align: center;
}
.builder-serving-inline button { cursor: pointer; color: var(--good); }
.builder-serving-inline input { width: 56px; }
.builder-slot-card.visual-slot {
  grid-template-columns: 42px minmax(0, 1fr) minmax(280px, .95fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(143,183,255,.14);
}
.builder-slot-card.visual-slot.required { border-color: rgba(159,240,196,.22); }
.slot-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 25%, rgba(159,240,196,.22), rgba(143,183,255,.08));
  font-size: 1.45rem;
  box-shadow: inset 0 0 24px rgba(159,240,196,.05);
}
.slot-copy h3 { margin: 0; color: var(--good); font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; }
.slot-copy p { margin: .16rem 0 0; color: var(--muted); font-size: .78rem; }
.builder-core-grid {
  display: grid;
  gap: 10px;
  margin: 8px 0 18px;
}
.builder-core-card {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px;
  border: 1px solid rgba(143,183,255,.14);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20,31,62,.88), rgba(12,18,40,.66));
}
.builder-core-card.included { border-color: rgba(159,240,196,.18); }
.builder-core-card.muted-card { opacity: .65; }
.core-card-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}
.core-card-check input {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 13px;
  height: 13px;
  accent-color: #8ff0be;
}
.core-card-check span { font-size: 1.6rem; }
.core-card-main { min-width: 0; }
.core-card-main strong {
  display: block;
  color: #f3f7ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.core-card-main small {
  display: block;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .64rem;
  margin-top: .18rem;
}
.quantity-stepper.compact .composer-grams input { width: 68px; }
.builder-add-section {
  border: 1px solid rgba(159,240,196,.13);
  border-radius: 20px;
  padding: 12px;
  background: rgba(159,240,196,.035);
}
.fallback-add { margin-bottom: 10px; }
.ingredient-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.ingredient-filter-row button {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #dfe8ff;
  padding: .42rem .62rem;
  cursor: pointer;
  font-size: .72rem;
}
.ingredient-filter-row button.active,
.ingredient-filter-row button:hover {
  color: var(--good);
  background: rgba(159,240,196,.09);
  border-color: rgba(159,240,196,.28);
}
.ingredient-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px;
  max-height: 250px;
  overflow: auto;
  padding-right: 4px;
}
.ingredient-add-card {
  min-height: 98px;
  border: 1px solid rgba(143,183,255,.13);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  color: #edf4ff;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
}
.ingredient-add-card:hover {
  border-color: rgba(159,240,196,.35);
  background: rgba(159,240,196,.075);
  transform: translateY(-1px);
}
.ingredient-add-card span { font-size: 1.75rem; }
.ingredient-add-card strong {
  font-size: .76rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ingredient-add-card small { color: var(--muted); font-size: .62rem; }
.ingredient-add-card.hidden { display: none; }
.builder-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid rgba(143,183,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}
.builder-summary-strip div {
  border-right: 1px solid rgba(255,255,255,.07);
  padding: 4px 8px;
}
.builder-summary-strip div:last-child { border-right: 0; }
.builder-summary-strip strong { display: block; color: #f4f8ff; font-size: 1rem; }
.builder-summary-strip span { display: block; color: var(--muted); font-size: .66rem; }
.builder-summary-strip .valid {
  border: 1px solid rgba(159,240,196,.18);
  border-radius: 14px;
  background: rgba(159,240,196,.055);
}
.builder-impact-grid section h3::after,
.builder-delta-card h3::after {
  content: "ⓘ";
  color: rgba(159,240,196,.66);
  font-size: .72rem;
  margin-left: .35rem;
}
@media (max-width: 1120px) {
  .hud-breadcrumbs { max-width: calc(100vw - 56px) !important; }
  body.focus-stage-open .hud-breadcrumbs { max-width: calc(100vw - 56px) !important; }
  .focus-section-title { grid-template-columns: 1fr; }
  .builder-slot-card.visual-slot { grid-template-columns: 42px minmax(0, 1fr); }
  .builder-slot-card.visual-slot .composer-slot { grid-column: 1 / -1; }
  .builder-summary-strip { grid-template-columns: repeat(2, 1fr); }
}

/* v0.0.28 Builder Intelligence + Temporal Codex */
.builder-intelligence-card {
  grid-column: 1 / -1;
  border-color: rgba(159,240,196,.18) !important;
  background: linear-gradient(145deg, rgba(159,240,196,.07), rgba(143,183,255,.035)) !important;
}
.intelligence-stack {
  display: grid;
  gap: .55rem;
  margin-top: .45rem;
}
.intel-note {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  padding: .65rem .72rem;
  display: grid;
  gap: .18rem;
}
.intel-note strong { color: #f3f8ff; }
.intel-note span { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.intel-note.critical { border-color: rgba(255,130,130,.34); background: rgba(255,80,80,.055); }
.intel-note.warn { border-color: rgba(255,212,143,.3); background: rgba(255,212,143,.055); }
.intel-note.hint { border-color: rgba(143,183,255,.22); }
.intel-note.good { border-color: rgba(159,240,196,.28); background: rgba(159,240,196,.055); }
.suggestion-chip-row,
.marker-chip-row,
.compromise-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .55rem;
}
.suggestion-chip-row button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .42rem;
  align-items: center;
  min-width: 150px;
  border: 1px solid rgba(159,240,196,.16);
  border-radius: 14px;
  background: rgba(159,240,196,.055);
  color: #edf8ff;
  padding: .55rem .65rem;
  text-align: left;
  cursor: pointer;
}
.suggestion-chip-row button:hover { border-color: rgba(159,240,196,.42); background: rgba(159,240,196,.11); }
.suggestion-chip-row button span { font-size: 1.2rem; grid-row: span 2; }
.suggestion-chip-row button small { color: var(--muted); font-size: .66rem; }
.marker-chip-row span,
.compromise-chip-row span {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #eaf1ff;
  padding: .3rem .55rem;
  font-size: .72rem;
}
.marker-chip-row span { border-color: rgba(159,240,196,.22); color: var(--good); }
.compromise-chip-row span { border-color: rgba(255,168,94,.24); color: #ffd1a3; }
.echo-grid button strong { display: block; }
.echo-why {
  display: block;
  margin-top: .32rem;
  color: var(--muted);
  line-height: 1.25;
  font-size: .67rem;
}
.codex-view {
  display: grid;
  gap: 1rem;
}
.codex-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 1rem;
}
.codex-hero section,
.codex-grid section {
  border: 1px solid rgba(143,183,255,.14);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  padding: 1rem;
}
.codex-hero h3,
.codex-grid h3,
.codex-lists h4 {
  color: var(--good);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}
.codex-grid ul { margin: .35rem 0 0; padding-left: 1.1rem; color: #eaf1ff; line-height: 1.45; }
.codex-lists ul { list-style: none; padding: 0; display: grid; gap: .45rem; }
.codex-lists li {
  display: flex;
  gap: .45rem;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .45rem .55rem;
  background: rgba(255,255,255,.03);
}
.timeline-ribbon.rich {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.timeline-ribbon.rich li {
  min-height: 160px;
  display: grid;
  align-content: start;
  gap: .65rem;
}
.timeline-ribbon.rich li::before { opacity: .28; }
.timeline-ribbon.rich strong {
  position: relative;
  z-index: 1;
  color: #fff1d6;
  line-height: 1.2;
  max-width: 86%;
}
.timeline-ribbon.rich span {
  max-width: none;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.42;
  font-size: .82rem;
}
.node.dish-family .node-meta {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .codex-hero { grid-template-columns: 1fr; }
}

/* v0.0.29 discovery + ingredient deep-dive polish */
.focus-stage-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }
.focus-back-button { border-color: rgba(159, 240, 196, .34); color: rgba(210, 255, 230, .96); }
.discovery-panel {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(133, 193, 255, .18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(18, 27, 56, .88), rgba(9, 15, 34, .88));
  box-shadow: inset 0 0 0 1px rgba(159, 240, 196, .04);
}
.discovery-panel h3 { margin: .15rem 0 .8rem; color: rgba(159, 240, 196, .96); }
.discovery-panel h4 { margin: .75rem 0 .5rem; color: rgba(183, 229, 255, .86); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.discovery-action-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: .6rem 0 1rem; }
.discovery-action-row button {
  border: 1px solid rgba(159, 240, 196, .24);
  border-radius: 999px;
  padding: .55rem .75rem;
  color: rgba(226, 239, 255, .94);
  background: rgba(4, 10, 24, .64);
  cursor: pointer;
}
.discovery-action-row button:hover { border-color: rgba(159, 240, 196, .6); background: rgba(159, 240, 196, .09); }
.discovery-columns { align-items: start; }
.knowledge-link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.knowledge-link-list li { margin: 0; padding: 0; }
.knowledge-link-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 1px solid rgba(133, 193, 255, .16);
  border-radius: 12px;
  background: rgba(12, 20, 42, .82);
  color: rgba(236, 243, 255, .95);
  text-align: left;
  cursor: pointer;
}
.knowledge-link-list button:hover { border-color: rgba(159, 240, 196, .48); transform: translateY(-1px); }
.knowledge-link-list button span { font-size: 1.25rem; text-align: center; }
.knowledge-link-list button small { color: rgba(183, 197, 231, .68); text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; }
.ingredient-deep-dive .deep-dive-grid section {
  min-height: 118px;
  border-color: rgba(159, 240, 196, .16);
}
.rich-micros li { background: rgba(14, 24, 50, .84); }
.codex-lists .knowledge-link-list { margin-top: .5rem; }
@media (max-width: 900px) {
  .focus-stage-actions { justify-content: flex-start; }
  .knowledge-link-list button { grid-template-columns: 1.6rem 1fr; }
  .knowledge-link-list button small { grid-column: 2; }
}