src/client/index.css

:root {
  color-scheme: dark;
  --bg: #0d0f12;
  --bg-2: #13171a;
  --panel: #181d1d;
  --panel-2: #202522;
  --panel-3: #141819;
  --line: #33403c;
  --line-soft: #26312f;
  --text: #f3f5ef;
  --muted: #a7b2ac;
  --green: #8bd36f;
  --green-2: #476b3d;
  --blue: #77b7ef;
  --amber: #e5be66;
  --red: #e47b68;
  --violet: #a88ae8;
  --cyan: #65d2d0;
  --shadow: rgba(0, 0, 0, 0.36);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body {
  background:
    linear-gradient(180deg, rgba(30, 37, 37, 0.92), rgba(13, 15, 18, 1) 360px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 80px),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #202724;
  color: var(--text);
  cursor: pointer;
  padding: 0 11px;
}
button:hover:not(:disabled) { border-color: var(--green); background: #273027; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #101416;
  color: var(--text);
  padding: 8px 10px;
}
textarea { min-height: 104px; resize: vertical; line-height: 1.35; }
code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  padding-bottom: 26px;
}
.hud-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(16, 19, 20, 0.94);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand-lockup { display: flex; gap: 8px; align-items: center; min-width: 0; }
.brand-sprite {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0b0d0e;
}
.brand-lockup h1 { margin: 0; font-size: 14px; line-height: 1.05; letter-spacing: 0; white-space: nowrap; }
.brand-lockup p { display: none; }
.hud-metrics { display: flex; flex-wrap: nowrap; gap: 5px; justify-content: flex-end; overflow-x: auto; scrollbar-width: thin; }
.metric {
  min-width: 84px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #171c1c;
  box-shadow: 0 10px 22px var(--shadow);
}
.metric strong { display: block; font-size: 18px; line-height: 1; }
.metric span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.hud-metrics .metric {
  flex: 0 0 auto;
  min-width: 0;
  padding: 4px 6px;
  border-color: var(--line-soft);
  border-radius: 6px;
  background: #141919;
  box-shadow: none;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.hud-metrics .metric strong { display: inline; font-size: 13px; line-height: 1; }
.hud-metrics .metric span { display: inline; margin: 0; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.hud-detail-toggle { min-height: 28px; padding: 0 8px; font-size: 12px; }
.hud-details {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.hud-details span {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 3px 6px;
  background: #101516;
  overflow-wrap: anywhere;
}
.mode-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #121617;
}
.mode-tabs button { flex: 0 0 auto; }
.mode-tabs button.active { background: var(--green); color: #0b140b; border-color: var(--green); font-weight: 800; }
.error-banner {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border: 1px solid #7c3d35;
  border-radius: 7px;
  background: #341d1a;
  color: #ffd7d0;
}
.viewport { padding: 14px 16px; }
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(24, 29, 29, 0.96);
  box-shadow: 0 12px 30px var(--shadow);
  padding: 12px;
  min-width: 0;
}
.panel-title {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.panel-title h2 { margin: 0; font-size: 16px; line-height: 1.2; letter-spacing: 0; }
.panel-title span { color: var(--muted); font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.primary { background: var(--green); color: #071107; border-color: var(--green); font-weight: 800; }
.danger { background: #3a201c; border-color: #7b3c32; color: #ffe1dc; }
.muted { color: var(--muted); }
.muted-box { color: var(--muted); background: #121717; }
.codebox {
  white-space: pre-wrap;
  overflow: auto;
  max-height: 300px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #0d1012;
  padding: 10px;
  color: #dfe7df;
  font-size: 12px;
}
.empty-state {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
  padding: 16px;
}

.play-layout { display: grid; grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.25fr); gap: 14px; align-items: start; }
.synthesis-panel { display: grid; gap: 12px; }
.synthesis-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.on-deck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.parent-slot {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #14191a;
  padding: 10px;
  min-height: 500px;
}
.parent-slot.empty { min-height: 220px; }
.parent-header { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.parent-header strong { font-size: 14px; }
.parent-header span { color: var(--muted); font-size: 12px; }
.slot-placeholder { display: grid; place-items: center; min-height: 160px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); text-align: center; padding: 14px; }
.parent-body { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: start; }
.parent-img { width: 116px; height: 116px; object-fit: contain; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 8px; background: #0b0e0f; }
.parent-stats h3 { margin: 0; font-size: 17px; line-height: 1.18; overflow-wrap: anywhere; }
.parent-stats p { margin: 4px 0 8px; color: var(--muted); font-size: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stat-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-row { min-width: 0; padding: 7px 8px; border: 1px solid var(--line-soft); border-radius: 6px; background: #101516; }
.stat-row span { display: block; color: var(--muted); font-size: 11px; }
.stat-row strong { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.swatch-line { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; min-width: 0; }
.swatch { display: inline-block; width: 28px; height: 18px; border: 1px solid #090b0c; border-radius: 4px; flex: 0 0 auto; }
.color-pair { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 11px; }
.trait-matrix { display: grid; border: 1px solid var(--line-soft); border-radius: 7px; overflow: hidden; font-size: 12px; }
.matrix-head, .matrix-row { display: grid; grid-template-columns: 92px minmax(90px, 1fr) 86px; gap: 8px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.matrix-head { background: #202725; color: var(--muted); font-weight: 800; }
.matrix-row:last-child { border-bottom: 0; }
.matrix-row code { color: #d6efd0; overflow-wrap: anywhere; }
.meter { height: 8px; border: 1px solid var(--line); border-radius: 999px; background: #0c1011; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--amber), var(--green)); }
.lineage-box { display: grid; gap: 6px; font-size: 12px; }
.lineage-box div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; padding: 6px 8px; background: #101516; border: 1px solid var(--line-soft); border-radius: 6px; }
.lineage-box b { color: var(--muted); }
.lineage-box span { overflow-wrap: anywhere; }
.slot-actions, .card-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prediction-strip { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #151a1b; }
.prediction-strip h3 { margin: 0; font-size: 14px; }
.prediction-strip p { margin: 0; }
.prediction-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.prediction-head span { color: var(--muted); font-size: 12px; text-align: right; }
.distribution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dist-card { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: #0f1314; }
.dist-card strong { color: var(--muted); font-size: 12px; }
.dist-card b { font-size: 18px; }
.dist-card span { color: var(--muted); font-size: 11px; }
.sparkline { display: flex; gap: 1px; align-items: end; height: 64px; overflow: hidden; }
.sparkline i { display: block; flex: 1 1 2px; min-width: 2px; background: var(--cyan); border-radius: 2px 2px 0 0; }
.cloud-row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; align-items: center; }
.cloud-row span { color: var(--muted); font-size: 12px; }
.cloud-row div { display: flex; flex-wrap: wrap; gap: 3px; }
.cloud-row i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.4); }
.registry-panel { min-width: 0; }
.registry-head { display: grid; gap: 6px; margin-bottom: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--green-2); background: #182318; color: #dff5d8; border-radius: 999px; padding: 4px 8px; font-size: 12px; }
.chip.alt { border-color: #315675; background: #15202a; color: #d7ecff; }
.registry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; max-height: calc(100vh - 238px); overflow: auto; padding-right: 2px; }
.seed-card { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #151a1b; padding: 10px; min-height: 288px; }
.seed-card.selected { border-color: var(--green); box-shadow: 0 0 0 1px rgba(139, 211, 111, 0.45); }

/* Rarity ladder edge (9 tiers, ascending heat). common stays edgeless to keep quiet. */
.seed-card.rarity-uncommon { border-left: 3px solid #6f9e5a; }
.seed-card.rarity-notable { border-left: 3px solid var(--blue); }
.seed-card.rarity-rare { border-left: 3px solid var(--cyan); }
.seed-card.rarity-elite { border-left: 3px solid var(--violet); }
.seed-card.rarity-exotic { border-left: 3px solid #e07bc4; }
.seed-card.rarity-legendary { border-left: 3px solid var(--amber); }
.seed-card.rarity-mythic { border-left: 3px solid #f0873f; }
.seed-card.rarity-primordial { border-left: 3px solid #ffd76a; box-shadow: 0 0 0 1px rgba(255, 215, 106, 0.35), 0 0 18px rgba(255, 215, 106, 0.22); }

.rarity-chip { text-transform: capitalize; color: var(--muted); }
.rarity-chip.rarity-uncommon { color: #8fca74; border-color: rgba(111, 158, 90, 0.5); }
.rarity-chip.rarity-notable { color: var(--blue); border-color: rgba(119, 183, 239, 0.5); }
.rarity-chip.rarity-rare { color: var(--cyan); border-color: rgba(101, 210, 208, 0.5); }
.rarity-chip.rarity-elite { color: var(--violet); border-color: rgba(168, 138, 232, 0.5); }
.rarity-chip.rarity-exotic { color: #e07bc4; border-color: rgba(224, 123, 196, 0.5); }
.rarity-chip.rarity-legendary { color: var(--amber); border-color: rgba(229, 190, 102, 0.6); }
.rarity-chip.rarity-mythic { color: #f0873f; border-color: rgba(240, 135, 63, 0.6); }
.rarity-chip.rarity-primordial { color: #ffd76a; border-color: rgba(255, 215, 106, 0.7); }

/* Session-new plants: badge + pulse so fresh breeds are findable in the alphabetized list. */
.new-badge {
  position: absolute;
  top: -7px;
  right: -6px;
  z-index: 3;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0d0f12;
  background: var(--green);
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(139, 211, 111, 0.5);
}
.seed-card.is-new { border-color: var(--green); animation: newPulse 1.4s ease-in-out infinite alternate; }
@keyframes newPulse {
  from { box-shadow: 0 0 0 1px rgba(139, 211, 111, 0.3); }
  to { box-shadow: 0 0 0 1px rgba(139, 211, 111, 0.72), 0 0 16px rgba(139, 211, 111, 0.22); }
}

/* Per-card Expand affordance -> full-window plant view */
.card-expand {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  min-height: 0;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 1.5;
  border-radius: 999px;
  background: rgba(13, 15, 18, 0.72);
  border-color: var(--line-soft);
  color: var(--muted);
  opacity: 0.6;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.seed-card:hover .card-expand, .seed-card:focus-within .card-expand { opacity: 1; }
.card-expand:hover:not(:disabled) { color: var(--text); border-color: var(--green); background: #202724; }

.plant-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 8, 9, 0.78);
  backdrop-filter: blur(3px);
  overflow: auto;
}
.plant-modal {
  width: min(940px, 100%);
  max-height: 92vh;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.plant-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plant-modal-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plant-modal-title h2 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.plant-modal-close { min-height: 30px; }
.plant-modal-body { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.plant-modal-stage { display: grid; gap: 10px; }
.plant-modal-img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 10px; background: #0b0e0f; }
.plant-modal-swatches { display: grid; gap: 6px; }
.plant-modal-info { display: grid; gap: 10px; align-content: start; }
.plant-modal-sub { margin: 0; color: var(--muted); font-size: 13px; }
.plant-modal .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.plant-modal .trait-matrix { max-height: none; }
@media (max-width: 680px) {
  .plant-modal-body { grid-template-columns: 1fr; }
  .plant-modal-img { max-width: 320px; justify-self: center; }
  .plant-modal .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.seed-head { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; }
.seed-img { width: 60px; height: 60px; object-fit: contain; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 7px; background: #0b0e0f; }
.seed-head h3 { margin: 0; font-size: 15px; line-height: 1.18; overflow-wrap: anywhere; }
.seed-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.seed-meta-line { display: flex; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
.seed-meta-line span { padding: 3px 6px; border: 1px solid var(--line-soft); border-radius: 999px; background: #101516; }
.mini-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.seed-description { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }

.lab-layout { display: grid; grid-template-columns: 220px minmax(420px, 1fr) 360px; gap: 14px; align-items: start; }
.facet-panel { position: sticky; top: 136px; }
.facet-panel > button { width: 100%; margin-bottom: 10px; }
.facet-list { display: grid; gap: 12px; }
.facet-list section { display: grid; gap: 6px; }
.facet-list h3 { margin: 0; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.facet-list button { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; background: #101516; }
.facet-list button.active { border-color: var(--green); background: #1c2b1a; }
.lab-center, .lab-right { display: grid; gap: 14px; min-width: 0; }
.parallel-wrap { overflow: auto; }
.parallel { display: block; width: 100%; min-width: 650px; height: auto; }
.parallel line { stroke: #52605d; stroke-width: 1; }
.parallel text { fill: var(--muted); font-size: 11px; }
.parallel polyline { fill: none; stroke-width: 1.5; opacity: 0.58; }
.table-wrap { overflow: auto; max-height: 450px; border: 1px solid var(--line-soft); border-radius: 8px; }
.table-wrap.short { max-height: 300px; }
table { width: 100%; border-collapse: collapse; min-width: 960px; font-size: 12px; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 2; background: #202726; color: var(--muted); font-weight: 800; }
th button { min-height: 24px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
td { background: #121718; }
tr:nth-child(even) td { background: #151a1b; }
tr.selected-row td { background: #1d2b1c; }
td .swatch + .swatch { margin-left: 4px; }
.wheel-wrap { display: grid; gap: 10px; justify-items: center; }
.wheel { position: relative; width: min(100%, 260px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); box-shadow: inset 0 0 0 34px rgba(13, 15, 18, 0.18), inset 0 0 0 72px rgba(13, 15, 18, 0.2); }
.wheel::after { content: ""; position: absolute; inset: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 50%; background: #ffffff; }
.wheel i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; }
.wheel-legend { display: grid; gap: 3px; color: var(--muted); font-size: 11px; text-align: center; }
.predictor { display: grid; gap: 9px; }
.predictor label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.predictor .prediction-strip { max-height: 520px; overflow: auto; }
.newick-box { min-height: 110px; }

.deck-layout { display: grid; gap: 14px; }
.deck-hero { display: grid; gap: 12px; }
.deck-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.gauges { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 10px; }
.gauge { --tone: var(--green); min-height: 132px; display: grid; place-items: center; border-radius: 8px; background: conic-gradient(var(--tone) var(--pct), #111617 0); border: 1px solid var(--line); padding: 10px; }
.gauge > div { width: 100%; aspect-ratio: 1; max-width: 104px; display: grid; place-items: center; align-content: center; text-align: center; border-radius: 50%; background: #101516; border: 1px solid var(--line-soft); }
.gauge b { display: block; font-size: 18px; }
.gauge span { display: block; color: var(--muted); font-size: 12px; }
.gauge.green { --tone: var(--green); }
.gauge.blue { --tone: var(--blue); }
.gauge.amber { --tone: var(--amber); }
.gauge.red { --tone: var(--red); }
.gauge.violet { --tone: var(--violet); }
.deck-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.deck-cols.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.portal { display: grid; gap: 5px; text-align: left; align-content: start; min-height: 84px; padding: 10px; }
.portal b { font-size: 15px; }
.portal span { color: var(--muted); font-size: 12px; }
.tray-list { display: grid; gap: 8px; }
.tray-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 9px; align-items: center; border: 1px solid var(--line-soft); border-radius: 7px; background: #101516; padding: 8px; }
.tray-item img, .tray-item .genetic-sprite { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.tray-item b, .tray-item span { display: block; overflow-wrap: anywhere; }
.tray-item span { color: var(--muted); font-size: 12px; }
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 12px; }
.bar-row span { overflow-wrap: anywhere; }
.bar { height: 10px; border: 1px solid var(--line); border-radius: 999px; background: #0e1213; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--amber); }
.gamut-strip { display: flex; flex-wrap: wrap; gap: 4px; min-height: 52px; align-content: flex-start; }
.gamut-strip i { width: 22px; height: 22px; border: 1px solid #090b0c; border-radius: 5px; }
.list { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: #101516; }
.row b, .row span { display: block; overflow-wrap: anywhere; }
.row span { color: var(--muted); font-size: 12px; }
.compact-list { max-height: 360px; overflow: auto; }
.signal-row, .receipt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: #101516; }
.signal-row.warn { border-color: #7d6536; }
.signal-row.error { border-color: #7c3d35; }
.signal-row b, .signal-row span, .signal-row code, .receipt-row b, .receipt-row span, .receipt-row code { display: block; overflow-wrap: anywhere; }
.signal-row span, .receipt-row span { color: var(--muted); font-size: 12px; }
.signal-row code, .receipt-row code { margin-top: 4px; color: #c7d2cc; font-size: 11px; }
.signal-row small, .receipt-row small { color: var(--muted); white-space: nowrap; }

.bus-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; }
.kv-grid div { padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: #101516; }
.kv-grid span { display: block; color: var(--muted); font-size: 11px; }
.kv-grid b { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.task-list { display: grid; gap: 8px; max-height: 340px; overflow: auto; }
.task-row { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: #101516; }
.task-row b, .task-row span, .task-row code { overflow-wrap: anywhere; }
.task-row span { color: var(--muted); font-size: 12px; }
.task-row code { font-size: 11px; color: #d7e2d8; }
.receipts-panel { grid-column: 1 / -1; }
.receipts-box { max-height: 420px; }

.market-layout { display: grid; gap: 14px; }
.market-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 14px; align-items: start; }
.market-gauges .metric { min-width: 130px; }
.market-listings { display: grid; gap: 10px; max-height: 620px; overflow: auto; }
.market-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: #101516; }
.market-card img, .market-card .genetic-sprite { width: 88px; height: 88px; object-fit: contain; image-rendering: pixelated; align-self: center; }
.market-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.market-card-head b, .market-card p, .market-card code { overflow-wrap: anywhere; }
.market-card-head span { color: var(--cyan); font-size: 12px; text-transform: uppercase; }
.market-card p { margin: 6px 0; color: var(--muted); font-size: 12px; }
.market-card code { display: block; margin-top: 7px; color: #d7e2d8; font-size: 11px; }
.market-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.market-stats span { border: 1px solid var(--line-soft); border-radius: 6px; padding: 4px 6px; color: var(--muted); font-size: 11px; }
.market-selected { grid-template-columns: 42px minmax(0, 1fr) repeat(3, auto); }
.market-selected button { white-space: nowrap; }
.passport-strip { display: grid; gap: 8px; margin-top: 10px; }
.passport-mini { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: #0f1415; }
.passport-mini b, .passport-mini span { display: block; overflow-wrap: anywhere; }
.passport-mini > div:first-child span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.request-board { align-self: stretch; }
.request-list { display: grid; gap: 8px; }
.request-card { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--line-soft); border-radius: 7px; background: #101516; }
.request-head { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.request-head b, .request-head span, .request-card p, .request-card code { overflow-wrap: anywhere; }
.request-head span { color: var(--cyan); font-size: 12px; }
.request-card p { margin: 0; color: var(--muted); font-size: 12px; }
.request-card code { color: #d7e2d8; font-size: 11px; }
.request-matches { display: grid; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.request-matches > b { color: var(--cyan); font-size: 12px; text-transform: uppercase; }
.match-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 5px 8px; align-items: center; padding: 7px; border: 1px solid var(--line-soft); border-radius: 6px; background: #0f1415; }
.match-row span { overflow-wrap: anywhere; }
.match-row strong { color: var(--green); text-align: right; }
.match-row small { grid-column: 1 / -1; color: var(--muted); overflow-wrap: anywhere; }

.agent-overlay { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: grid; justify-items: end; gap: 8px; pointer-events: none; }
.agent-overlay.open { justify-items: stretch; }
.agent-tab { pointer-events: auto; min-width: 148px; justify-self: end; background: var(--blue); border-color: var(--blue); color: #061018; font-weight: 800; box-shadow: 0 12px 24px var(--shadow); }
.agent-panel { pointer-events: auto; max-height: 34vh; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #151a1b; box-shadow: 0 20px 46px rgba(0,0,0,0.56); padding: 10px; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.agent-title { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 10px; }
.agent-title h2 { margin: 0; font-size: 16px; }
.agent-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.agent-link-body { min-height: 0; display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(190px, 0.85fr) minmax(210px, 0.9fr) minmax(260px, 1.25fr); gap: 10px; }
.agent-link-card { min-height: 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 7px; background: #0f1415; padding: 8px; display: grid; gap: 8px; align-content: start; }
.agent-primary-card { border-color: rgba(95, 197, 140, 0.5); background: #101816; }
.agent-link-card > b { font-size: 12px; text-transform: uppercase; color: var(--cyan); }
.agent-handoff-copy { margin: 0; color: #dfe9e2; font-size: 12px; line-height: 1.35; }
.agent-handoff-button { width: 100%; min-height: 40px; font-size: 14px; }
.agent-handoff-state { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; }
.agent-handoff-state code { color: #d7e2d8; font-size: 11px; overflow-wrap: anywhere; }
.scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.scope-grid label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.agent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.compact-actions { margin: 0; }
.agent-message { margin: 0; color: var(--amber); font-size: 12px; overflow-wrap: anywhere; }
.agent-advanced { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 5px 8px; padding-top: 4px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; }
.agent-advanced code { color: #d7e2d8; overflow-wrap: anywhere; }
.agent-tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: auto; }
.agent-tool-list span { border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px; color: #dfe9e2; font-size: 12px; overflow-wrap: anywhere; }
.agent-tool-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.agent-events { grid-template-rows: auto minmax(0, 1fr); }
.agent-log { display: grid; gap: 6px; min-height: 0; max-height: calc(34vh - 86px); overflow: auto; border: 1px solid var(--line-soft); border-radius: 7px; padding: 8px; background: #0e1213; }
.log-line { display: grid; grid-template-columns: 72px 52px minmax(0, 1fr); gap: 6px; align-items: start; padding: 6px; border: 1px solid var(--line-soft); border-radius: 6px; background: #121718; }
.log-line span { color: var(--muted); font-size: 11px; }
.log-line b { color: var(--cyan); font-size: 11px; text-transform: uppercase; }
.log-line p { margin: 0; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.log-line.error b { color: var(--red); }
.log-line.market b { color: var(--amber); }
.log-line.tool b { color: var(--green); }

.splash { min-height: 100vh; display: grid; align-items: center; padding: 16px; }
.splash-inner { max-width: 520px; margin: 0 auto; display: grid; gap: 12px; text-align: center; }
.splash-inner img { width: 92px; height: 92px; object-fit: contain; image-rendering: pixelated; margin: 0 auto; }
.splash-inner h1 { margin: 0; font-size: 30px; letter-spacing: 0; }
.splash-inner p { margin: 0; color: var(--muted); }
.splash-inner button { width: min(100%, 260px); justify-self: center; }

@media (max-width: 1280px) {
  .agent-overlay.open {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    grid-template-rows: auto minmax(0, 1fr);
    justify-items: stretch;
  }
  .agent-overlay.open .agent-tab { justify-self: end; width: auto; }
  .agent-overlay.open .agent-panel { max-height: 46vh; min-height: 0; }
  .agent-overlay.open .agent-link-body { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; align-content: start; padding-right: 2px; }
  .agent-overlay.open .agent-link-card { overflow: visible; }
  .agent-overlay.open .agent-tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 180px; overflow: auto; }
  .agent-overlay.open .agent-log { max-height: 190px; }
}
@media (max-width: 1220px) {
  .play-layout, .lab-layout { grid-template-columns: 1fr; }
  .facet-panel { position: static; }
  .deck-cols.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registry-grid { max-height: none; }
}
@media (max-width: 820px) {
  .deck-cols, .bus-layout, .market-grid { grid-template-columns: 1fr; }
  .market-selected { grid-template-columns: 42px minmax(0, 1fr); }
  .market-selected button { width: 100%; }
  .hud-header { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 6px 8px; }
  .hud-metrics { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; }
  .hud-header .metric { flex: 0 0 auto; }
  .metric { flex: 1 1 95px; }
  .on-deck-grid, .distribution-grid, .gauges, .portal-grid { grid-template-columns: 1fr; }
  .parent-body { grid-template-columns: 92px minmax(0, 1fr); }
  .parent-img { width: 92px; height: 92px; }
  .agent-overlay.open { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; }
  .agent-tab { width: 100%; justify-self: stretch; }
  .agent-panel { max-height: 76vh; min-height: 0; }
  .agent-link-body { grid-template-columns: 1fr; overflow: auto; align-content: start; }
  .agent-link-card { overflow: visible; }
  .agent-tool-list, .scope-grid { grid-template-columns: 1fr; max-height: none; }
  .agent-log { max-height: 220px; }
  .log-line { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .viewport { padding: 10px; }
  .hud-header { padding: 6px 8px; }
  .mode-tabs { padding: 8px 10px; }
  .matrix-head, .matrix-row { grid-template-columns: 86px minmax(0, 1fr); }
  .matrix-head span:nth-child(3), .matrix-row .meter { grid-column: 1 / -1; }
  .slot-actions, .card-buttons { grid-template-columns: 1fr; }
  .cloud-row { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 82px minmax(0, 1fr) 30px; }
}



.matrix-fx { position: fixed; inset: 0; pointer-events: none; overflow: visible; }
.matrix-fx-canvas { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; mix-blend-mode: screen; transition: opacity 180ms ease; }
.app-shell > :not(.matrix-fx) { position: relative; z-index: 1; }
.matrix-fx-dock { position: fixed; left: 12px; bottom: 12px; z-index: 80; pointer-events: none; display: grid; gap: 8px; width: min(360px, calc(100vw - 24px)); }
.matrix-fx-tab { pointer-events: auto; width: 48px; min-width: 48px; justify-self: start; background: #142016; border-color: #345d38; color: #c9ffd2; font-weight: 800; box-shadow: 0 12px 24px var(--shadow); }
.matrix-fx-panel { pointer-events: auto; display: grid; gap: 9px; max-height: 56vh; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(14, 18, 17, 0.94); box-shadow: 0 18px 42px rgba(0,0,0,0.52); }
.matrix-fx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.matrix-fx-head b { color: var(--green); font-size: 13px; text-transform: uppercase; }
.matrix-fx-panel label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.matrix-fx-panel select, .matrix-fx-panel input { min-height: 30px; padding: 5px 7px; }
.matrix-fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.matrix-fx-sliders { display: grid; gap: 6px; }
.matrix-fx-sliders label { grid-template-columns: 64px minmax(0, 1fr); align-items: center; text-transform: none; }
.matrix-fx-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.matrix-fx-pills button.active { background: var(--green); border-color: var(--green); color: #071107; font-weight: 800; }
@media (max-width: 820px) {
  .matrix-fx-dock { left: 8px; right: auto; bottom: 62px; width: min(340px, calc(100vw - 16px)); }
  .matrix-fx-panel { max-height: 52vh; }
  .matrix-fx-grid { grid-template-columns: 1fr; }
}

.matrix-fx-config { display: grid; gap: 12px; max-width: 920px; }
.matrix-fx-config .matrix-fx-head { align-items: start; }
.matrix-fx-config .matrix-fx-head h2 { margin: 0; font-size: 16px; }
.matrix-fx-config .matrix-fx-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.matrix-fx-config label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.matrix-fx-config select, .matrix-fx-config input { min-height: 32px; }
.matrix-fx-config input[type="color"] { padding: 3px; }
/* Compact squared UI pass */
:root { --corner: 2px; }
button, input, select, textarea,
.panel, .metric, .seed-card, .parent-slot, .parent-img, .seed-img, .genetic-sprite,
.stat-row, .trait-matrix, .lineage-box div, .prediction-strip, .dist-card,
.chip, .portal, .tray-item, .row, .signal-row, .receipt-row, .task-row,
.kv-grid div, .market-card, .request-card, .passport-mini, .match-row,
.agent-panel, .agent-link-card, .agent-tool-list span, .agent-log, .log-line,
.matrix-fx-panel, .matrix-fx-card, .swatch, .gamut-strip i, .table-wrap,
.codebox, .empty-state, .listing-detail {
  border-radius: var(--corner) !important;
}

.play-layout { grid-template-columns: minmax(300px, 0.72fr) minmax(620px, 1.55fr); }
.on-deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.parent-slot { min-height: 0; padding: 8px; gap: 8px; }
.parent-body { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
.parent-img { width: 84px; height: 84px; }
.parent-stats h3 { font-size: 15px; }
.parent-stats p { margin-bottom: 6px; }
.stat-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.stat-row { padding: 5px 6px; }
.stat-row span { font-size: 10px; }
.stat-row strong { font-size: 12px; }
.parent-slot .trait-matrix { max-height: 150px; overflow: auto; }
.parent-slot .lineage-box { max-height: 120px; overflow: auto; }
.slot-actions, .card-buttons { gap: 5px; }

.registry-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.seed-card { min-height: 0; padding: 8px; gap: 6px; }
.seed-head { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
.seed-img { width: 48px; height: 48px; }
.seed-head h3 { font-size: 14px; }
.seed-head p, .seed-description { font-size: 11px; }
.seed-meta-line { gap: 4px; }
.seed-meta-line span { padding: 2px 5px; border-radius: var(--corner); }
.mini-traits { gap: 5px; }
.color-pair { gap: 4px; }

.market-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.market-tabs button { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 38px; }
.market-tabs button.active { border-color: var(--green); background: #1d2a1b; }
.market-tabs span, .market-tabs b { overflow-wrap: anywhere; }
.market-browser { display: grid; gap: 10px; }
.market-browser-head { display: grid; gap: 8px; }
.market-controls { display: grid; grid-template-columns: minmax(180px, 1fr) 150px 150px; gap: 8px; }
.market-browser-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr); gap: 10px; align-items: start; }
.friendly-listings { max-height: min(680px, calc(100vh - 260px)); }
.friendly-card { cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.friendly-card:hover, .friendly-card:focus, .friendly-card.focused { border-color: var(--green); background: #151c18; outline: none; }
.friendly-card img, .friendly-card .genetic-sprite { width: 76px; height: 76px; }
.evidence-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.evidence-row span { border: 1px solid var(--line-soft); background: #111817; color: var(--green); padding: 3px 5px; font-size: 11px; }
.listing-actions { margin-top: 8px; display: flex; justify-content: flex-end; }
.listing-actions button { min-height: 28px; padding: 0 8px; }
.listing-detail { position: sticky; top: 128px; display: grid; gap: 9px; padding: 10px; border: 1px solid var(--line-soft); background: #101516; min-height: 180px; }
.listing-detail-head { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 9px; align-items: center; }
.listing-detail-head img, .listing-detail-head .genetic-sprite { width: 78px; height: 78px; object-fit: contain; image-rendering: pixelated; border: 1px solid var(--line-soft); background: #0b0e0f; }
.listing-detail h3 { margin: 0; font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.listing-detail-head span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.listing-detail-block { display: grid; gap: 5px; }
.listing-detail-block b { color: var(--cyan); font-size: 12px; text-transform: uppercase; }
.listing-detail-block p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.listing-detail code { color: #d7e2d8; font-size: 11px; overflow-wrap: anywhere; }
.detail-evidence { margin-top: 0; }

@media (min-width: 1180px) {
  .registry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .market-browser-grid { grid-template-columns: 1fr; }
  .listing-detail { position: static; order: -1; }
  .market-controls { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .on-deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent-body { grid-template-columns: 1fr; }
  .parent-img { width: 64px; height: 64px; }
  .stat-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent-slot .trait-matrix { max-height: 120px; }
  .registry-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
  .market-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .friendly-card { grid-template-columns: 64px minmax(0, 1fr); }
  .friendly-card img, .friendly-card .genetic-sprite { width: 64px; height: 64px; }
}
@media (max-width: 560px) {
  .on-deck-grid { gap: 6px; }
  .parent-slot { padding: 6px; }
  .parent-header { align-items: start; }
  .parent-header strong { font-size: 12px; }
  .parent-header span { font-size: 10px; }
  .parent-stats h3 { font-size: 13px; }
  .parent-stats p, .swatch-line, .lineage-box, .matrix-head, .matrix-row { font-size: 10px; }
  .slot-actions { grid-template-columns: 1fr; }
}

/* Breeding deck full-width correction */
.play-layout {
  grid-template-columns: 1fr !important;
  gap: 10px;
  align-items: stretch;
}
.synthesis-panel,
.registry-panel {
  grid-column: 1 / -1;
  width: 100%;
}
.synthesis-panel {
  gap: 9px;
}
.synthesis-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px;
}
.synthesis-controls button {
  min-height: 30px;
  padding: 0 8px;
}
.on-deck-grid {
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: 8px;
  align-items: stretch;
}
.parent-slot {
  min-height: 0;
  align-content: start;
}
.parent-slot.empty {
  min-height: 156px;
}
.slot-placeholder {
  min-height: 96px;
}
.parent-slot .trait-matrix {
  max-height: 112px;
}
.parent-slot .lineage-box {
  max-height: 86px;
}
.prediction-strip {
  min-height: 0;
}
.registry-grid {
  max-height: none;
}

@media (min-width: 1320px) {
  .parent-body { grid-template-columns: 96px minmax(0, 1fr); }
  .parent-img { width: 96px; height: 96px; }
  .registry-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .on-deck-grid {
    grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .parent-slot {
    min-width: 230px;
    scroll-snap-align: start;
  }
}

.leaderboard-panel { display: grid; gap: 10px; }
.leaderboard-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.leaderboard-tabs button { min-height: 32px; padding: 0 8px; }
.leaderboard-tabs button.active { border-color: var(--green); background: #1d2a1b; color: #eaffdf; font-weight: 800; }
.leaderboard-list { display: grid; gap: 7px; max-height: min(620px, calc(100vh - 300px)); overflow: auto; padding-right: 2px; }
.leaderboard-card { display: grid; grid-template-columns: 48px 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line-soft); border-radius: var(--corner); background: #101516; }
.leaderboard-card strong { color: var(--green); font-size: 14px; }
.leaderboard-card .swatch { width: 24px; height: 24px; }
.leaderboard-card b, .leaderboard-card span { display: block; overflow-wrap: anywhere; }
.leaderboard-card div span { color: var(--muted); font-size: 11px; }
.leaderboard-card em { justify-self: end; color: var(--amber); font-style: normal; font-weight: 800; white-space: nowrap; }
@media (max-width: 560px) {
  .leaderboard-card { grid-template-columns: 42px 26px minmax(0, 1fr); }
  .leaderboard-card em { grid-column: 3; justify-self: start; }
}

/* Agent UI action driver */
.agent-action-strip {
  margin: 8px 16px 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(95, 197, 140, 0.48);
  border-radius: var(--corner);
  background: rgba(11, 17, 17, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
.agent-action-strip span {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.agent-action-strip b {
  color: #eef7ed;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.agent-action-strip small {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.agent-action-strip button {
  min-height: 28px;
  padding: 0 10px;
}
.agent-action-strip.market { border-color: rgba(255, 190, 92, 0.56); }
.agent-action-strip.transfer { border-color: rgba(133, 207, 255, 0.72); }
.agent-action-strip.error { border-color: rgba(255, 113, 104, 0.72); }
.agent-action-strip.syncing b::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-left: 8px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: agentScan 0.9s linear infinite;
}
.app-shell.agent-syncing .viewport {
  box-shadow: inset 0 1px 0 rgba(139, 211, 111, 0.16);
}
.agent-highlight {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 1px rgba(255, 190, 92, 0.45), 0 0 18px rgba(255, 190, 92, 0.18) !important;
  animation: agentPulse 1.25s ease-in-out infinite alternate;
}
.agent-highlight-soft {
  border-color: rgba(139, 211, 111, 0.62) !important;
  box-shadow: 0 0 0 1px rgba(139, 211, 111, 0.2) !important;
}
@keyframes agentPulse {
  from { box-shadow: 0 0 0 1px rgba(255, 190, 92, 0.35), 0 0 10px rgba(255, 190, 92, 0.1); }
  to { box-shadow: 0 0 0 1px rgba(255, 190, 92, 0.72), 0 0 20px rgba(255, 190, 92, 0.25); }
}
@keyframes agentScan {
  from { transform: translateX(-4px); opacity: 0.35; }
  to { transform: translateX(5px); opacity: 1; }
}
@media (max-width: 700px) {
  .agent-action-strip {
    margin: 6px 10px 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .agent-action-strip span,
  .agent-action-strip small {
    grid-column: 1;
  }
  .agent-action-strip button {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
  }
}

/* Solo broker marketplace */
.offer-list { display: grid; gap: 7px; margin-top: 8px; }
.offer-row {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--corner);
  background: #0f1415;
}
.offer-row b, .offer-row span, .offer-row p { overflow-wrap: anywhere; }
.offer-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.offer-row p { margin: 4px 0 0; color: #dbe7db; font-size: 12px; }
.offer-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.offer-actions button { min-height: 28px; padding: 0 6px; }
@media (max-width: 560px) {
  .offer-actions { grid-template-columns: 1fr; }
}
/* Bloom visibility pass */
.bloom-panel { border-color: #476b3d; background: linear-gradient(180deg, rgba(28, 39, 32, 0.98), rgba(18, 23, 24, 0.98)); }
.bloom-leader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.bloom-leader-card, .deck-bloom-card, .bloom-teaser {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line-soft);
  background: #101716;
  padding: 8px;
  min-width: 0;
}
.bloom-leader-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.bloom-rank {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  border: 1px solid var(--green-2);
  background: #172417;
  color: var(--green);
  font-weight: 800;
  font-size: 12px;
}
.bloom-leader-main { display: grid; gap: 5px; min-width: 0; }
.bloom-leader-main b, .deck-bloom-card b { overflow-wrap: anywhere; }
.bloom-leader-main span, .deck-bloom-card span, .bloom-teaser span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.bloom-leader-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.bloom-leader-stats span { border: 1px solid var(--line-soft); padding: 3px 5px; color: #dfe9e2; font-size: 11px; }
.palette-strip { display: grid; grid-template-columns: repeat(6, minmax(12px, 1fr)); gap: 3px; min-height: 14px; }
.palette-strip i { display: block; min-height: 14px; border: 1px solid rgba(0,0,0,0.5); }
.deck-bloom-block { display: grid; gap: 8px; margin-top: 10px; }
.deck-bloom-block > b { color: var(--green); text-transform: uppercase; font-size: 12px; letter-spacing: 0; }
.deck-bloom-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.deck-bloom-card { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.deck-bloom-card .palette-strip { grid-column: 1 / -1; }
.bloom-teaser { border-color: #476b3d; background: #131d16; }
.bloom-teaser b { color: var(--green); }
@media (max-width: 820px) {
  .deck-bloom-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bloom-leader-grid, .deck-bloom-strip { grid-template-columns: 1fr; }
}
/* Genomic registry filter lab */
.inventory-filter-lab {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-soft);
  background: #101617;
  padding: 8px;
}
.filter-lab-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.filter-lab-head b {
  color: var(--green);
  font-size: 12px;
  text-transform: uppercase;
}
.filter-lab-head button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 12px;
}
.filter-lab-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(104px, 1fr));
  gap: 7px;
}
.filter-lab-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}
.filter-lab-grid input,
.filter-lab-grid select {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 12px;
}
.filter-search {
  grid-column: span 2;
}
.inventory-filter-lab,
.bloom-leader-card,
.deck-bloom-card,
.bloom-rank,
.palette-strip i,
.bloom-teaser,
.bloom-leader-stats span {
  border-radius: var(--corner) !important;
}
@media (max-width: 1180px) {
  .filter-lab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-search { grid-column: span 3; }
}
@media (max-width: 720px) {
  .filter-lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-search { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .filter-lab-grid { grid-template-columns: 1fr; }
}
/* First-run Lab Intake */
.lab-intake {
  display: grid;
  gap: 9px;
  border: 1px solid #476b3d;
  background: linear-gradient(180deg, rgba(22, 32, 24, 0.98), rgba(14, 19, 19, 0.98));
  padding: 9px;
}
.lab-intake-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.lab-intake-head b {
  display: block;
  color: var(--green);
  font-size: 13px;
  text-transform: uppercase;
}
.lab-intake-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.lab-intake-head button {
  min-height: 28px;
  padding: 0 8px;
}
.intake-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.intake-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  border: 1px solid var(--line-soft);
  background: #101617;
  padding: 7px;
  min-width: 0;
}
.intake-step.done {
  border-color: var(--green-2);
  background: #132017;
}
.intake-step > strong {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11px;
}
.intake-step.done > strong {
  border-color: var(--green);
  color: var(--green);
}
.intake-step b,
.intake-step span {
  display: block;
  overflow-wrap: anywhere;
}
.intake-step b {
  font-size: 12px;
}
.intake-step span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.intake-step button {
  grid-column: 1 / -1;
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}
.chase-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.chase-picker button {
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}
.chase-picker button.active {
  border-color: var(--green);
  background: var(--green);
  color: #071107;
  font-weight: 800;
}
.intake-objective {
  margin: 0;
  color: #dfe9e2;
  font-size: 12px;
}
.lab-intake,
.intake-step,
.intake-step > strong,
.chase-picker button {
  border-radius: var(--corner) !important;
}
@media (max-width: 1080px) {
  .intake-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chase-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .intake-steps,
  .chase-picker { grid-template-columns: 1fr; }
}