| :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); } |
|
|
| |
| .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); } |
|
|
| |
| .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); } |
| } |
|
|
| |
| .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; } |
| |
| :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; } |
| } |
|
|
| |
| .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-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; |
| } |
| } |
|
|
| |
| .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-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; } |
| } |
| |
| .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; } |
| } |
| |
| .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; } |
| } |
|
|
