/* ═══════════════════════════════════════════════════════
   CLIFF · SPARK (SPK) — Design System
   Fahrenheit Research · July 2026
   Palette: Ink #111111 · Blue #3A3AF5 · Lime #D8FE5E · Blush #F9E0EB
═══════════════════════════════════════════════════════ */

:root {
  --ink: #111111;
  --ink-soft: #2a2a2a;
  --ink-muted: #555555;
  --ink-dim: #888888;
  --blue: #3A3AF5;
  --blue-soft: #5a5af7;
  --blue-dim: #1a1a8a;
  --lime: #D8FE5E;
  --lime-dim: #b8d840;
  --blush: #F9E0EB;
  --blush-dim: #e8c0d0;
  --white: #FAFAFA;
  --surface: #F4F4F2;
  --surface-2: #EBEBEA;
  --border: #DDDDD8;
  --border-strong: #BBBBBB;

  --sidebar-w: 220px;
  --font-mono: 'DM Mono', monospace;
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --radius: 4px;
  --radius-lg: 8px;
  --transition: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */

.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
  border-right: 1px solid var(--ink-soft);
}

.sidebar-logo {
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.logo-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--white);
}

.logo-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--lime);
  letter-spacing: 0.05em;
}

.sidebar-company {
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-soft);
}

.company-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--white);
}

.company-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.nav-links {
  list-style: none;
  padding: 12px 0;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  cursor: pointer;
  border-left: 2px solid transparent;
}

.nav-item:hover {
  color: var(--white);
  background: rgba(255,255,255,0.04);
}

.nav-item.active {
  color: var(--lime);
  border-left-color: var(--lime);
  background: rgba(216, 254, 94, 0.06);
}

.nav-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* METERS */
.sidebar-meters {
  padding: 14px 20px;
  border-top: 1px solid var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meter-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 58px;
  flex-shrink: 0;
}

.meter-bar {
  flex: 1;
  height: 3px;
  background: var(--ink-soft);
  border-radius: 2px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

.meter-fill.runway { background: var(--lime); }
.meter-fill.reliability { background: var(--blue); }
.meter-fill.capacity { background: var(--blush); }

.meter-val {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  width: 22px;
  text-align: right;
}

/* SPARK BALANCE */
.sidebar-spark {
  padding: 16px 20px;
  border-top: 1px solid var(--ink-soft);
  text-align: center;
}

.spark-symbol {
  font-size: 22px;
  color: var(--lime);
  animation: sparkPulse 2.4s ease-in-out infinite;
  display: block;
  margin-bottom: 4px;
}

@keyframes sparkPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.92); }
}

.spark-balance {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--lime);
  letter-spacing: -0.02em;
}

.spark-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* STANDING */
.sidebar-standing {
  padding: 12px 20px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.standing-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.standing-pips {
  display: flex;
  gap: 4px;
}

.pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  border: 1px solid var(--ink-muted);
}

.pip.active {
  background: var(--blue);
  border-color: var(--blue);
}

/* ═══════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════ */

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  padding: 0;
}

.screen {
  display: none;
  padding: 32px 36px 48px;
  min-height: 100vh;
  animation: fadeIn 0.22s ease;
}

.screen.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* SCREEN HEADER */
.screen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.screen-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.screen-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ═══════════════════════════════════════════
   CARDS
═══════════════════════════════════════════ */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lime-tag { background: var(--lime); color: var(--ink); }
.blush-tag { background: var(--blush); color: var(--ink); }
.burn-tag { background: #ffe0e0; color: #c00; }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */

.btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-transform: uppercase;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.btn-primary:hover {
  background: var(--blue-soft);
  border-color: var(--blue-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  background: var(--surface-2);
}

.btn.small {
  font-size: 10px;
  padding: 5px 10px;
}

/* ═══════════════════════════════════════════
   SCREEN 1: DASHBOARD
═══════════════════════════════════════════ */

.market-index-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.mi-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mi-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--blue);
  letter-spacing: -0.02em;
}

.mi-state {
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--lime);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}

/* OPEN SEQUENCE */
.open-sequence {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}

.seq-step {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid var(--border);
  opacity: 0.5;
  transition: all var(--transition);
}

.seq-step:last-child { border-right: none; }
.seq-step.done { opacity: 1; }
.seq-step.active { opacity: 1; background: rgba(58, 58, 245, 0.04); }

.seq-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.seq-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
}

.seq-desc {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.seq-status {
  margin-left: auto;
  font-size: 14px;
  flex-shrink: 0;
}

.seq-status.pulse {
  color: var(--blue);
  animation: blink 1.2s ease-in-out infinite;
}

.seq-status.dim { color: var(--border-strong); }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* DASHBOARD GRID */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.burn-card { grid-column: 1; }
.comps-card { grid-column: 2; }
.mandates-card { grid-column: 3; grid-row: 1 / 3; }
.acquisition-card { grid-column: 1; }
.valuation-card { grid-column: 2; }
.endings-card { grid-column: 1 / 3; }

/* BURN CARD */
.burn-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.spark-sym {
  font-size: 16px;
  color: var(--lime-dim);
}

.burn-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: #c00;
  letter-spacing: -0.02em;
}

.burn-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.burn-line {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

.burn-note {
  font-size: 11px;
  color: var(--ink-dim);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 4px;
}

/* COMPS CARD */
.comps-list { margin-bottom: 10px; }

.comp-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.comp-row.header {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comp-mult {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--blue);
}

.comp-age {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.comps-median {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  font-size: 11px;
  color: var(--ink-muted);
}

.median-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

/* MANDATES CARD */
.mandate-list { display: flex; flex-direction: column; gap: 10px; }

.mandate-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}

.mandate-item:hover {
  border-color: var(--blue);
  background: rgba(58, 58, 245, 0.03);
}

.mandate-agent {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}

.mandate-thesis {
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.mandate-range {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--blue);
}

.mandate-expiry {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  margin-top: 4px;
}

.mandate-expiry.warning {
  color: #c00;
}

/* ACQUISITION CARD */
.acq-from {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.acq-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.acq-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -0.03em;
}

.acq-note {
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 12px;
  font-family: var(--font-mono);
}

.acq-actions {
  display: flex;
  gap: 8px;
}

/* VALUATION CARD */
.val-formula {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.val-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.val-var {
  font-size: 11px;
  color: var(--ink-muted);
}

.val-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
}

.val-op {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-dim);
  text-align: center;
  padding: 2px 0;
}

.val-divider {
  height: 1px;
  background: var(--border-strong);
  margin: 6px 0;
}

.val-result {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
}

.val-total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--blue);
  letter-spacing: -0.02em;
}

/* ENDINGS CARD */
.endings-list {
  display: flex;
  gap: 0;
}

.ending {
  flex: 1;
  padding: 12px 10px;
  border-right: 1px solid var(--border);
  cursor: default;
}

.ending:last-child { border-right: none; }

.ending-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  display: block;
  margin-bottom: 4px;
}

.ending-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.ending-desc {
  font-size: 10px;
  color: var(--ink-dim);
  display: block;
}

.active-ending {
  background: rgba(216, 254, 94, 0.15);
  border-radius: var(--radius) 0 0 var(--radius);
}

.active-ending .ending-name { color: var(--ink); }

.danger-ending .ending-name { color: #c00; }

/* ═══════════════════════════════════════════
   SCREEN 2: WORKBENCH
═══════════════════════════════════════════ */

.week-split-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ws-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ws-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}

.workbench-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.wb-product-panel,
.wb-allocation-panel,
.wb-team-panel,
.wb-catalogue-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.wb-panel-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* PRODUCT PANEL */
.product-name-row {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.product-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.product-tagline {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-style: italic;
}

.product-components {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.component {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
}

.component.built { border-color: var(--border); }
.component.in-progress { border-color: var(--blue); background: rgba(58,58,245,0.03); }
.component.available {
  border-style: dashed;
  cursor: pointer;
  opacity: 0.6;
}
.component.available:hover { opacity: 1; border-color: var(--blue); }

.comp-icon {
  font-size: 16px;
  color: var(--ink-dim);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.comp-name {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
}

.comp-quality {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 1px;
}

.comp-status {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.comp-status.building {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
}

.build-progress {
  width: 60px;
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}

.build-bar {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.6s ease;
}

.comp-status.dim { color: var(--border-strong); }

/* ALLOCATION PANEL */
.allocation-sliders {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.alloc-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alloc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 60px;
  flex-shrink: 0;
}

.alloc-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.alloc-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.build-fill { background: var(--blue); }
.maintain-fill { background: var(--lime-dim); }
.serve-fill { background: var(--blush-dim); }

.alloc-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  width: 32px;
  text-align: right;
}

.alloc-buttons {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.alloc-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.04em;
}

.alloc-btn:hover { border-color: var(--blue); color: var(--blue); }
.alloc-btn.active { background: var(--blue); color: var(--white); border-color: var(--blue); }

.alloc-consequence {
  font-size: 11px;
  color: var(--ink-muted);
  padding: 10px;
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 2px solid var(--blue);
  font-style: italic;
}

/* TEAM PANEL */
.team-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.member-name {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
}

.member-role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 1px;
}

.member-state { margin-left: auto; text-align: right; }

.member-capacity {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
}

.member-capacity.warn { color: #c00; }

.member-task {
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 1px;
}

.capacity-warning {
  font-size: 11px;
  color: #c00;
  padding: 8px 10px;
  background: #fff0f0;
  border-radius: var(--radius);
  border-left: 2px solid #c00;
}

/* CATALOGUE */
.catalogue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cat-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}

.cat-item:hover {
  border-color: var(--blue);
  background: rgba(58,58,245,0.03);
}

.cat-name {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 4px;
}

.cat-cost {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--blue);
  margin-bottom: 2px;
}

.cat-quality {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
}

/* ═══════════════════════════════════════════
   SCREEN 3: FUNDRAISE
═══════════════════════════════════════════ */

.raise-status-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.raise-target {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--blue);
  letter-spacing: -0.02em;
}

.fundraise-layout {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 16px;
  align-items: start;
}

/* INVESTOR ROSTER */
.investor-roster {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.roster-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.investor-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.investor-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}

.investor-card:hover { border-color: var(--blue); }
.investor-card.selected { border-color: var(--blue); background: rgba(58,58,245,0.04); }

.strand-card { border-color: var(--blush-dim); }
.strand-card:hover { border-color: #c00; }

.inv-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 3px;
}

.inv-thesis {
  font-size: 10px;
  color: var(--ink-muted);
  margin-bottom: 3px;
}

.inv-range {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--blue);
  margin-bottom: 4px;
}

.inv-blind-spot {
  font-size: 9px;
  color: var(--ink-dim);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 4px;
  margin-top: 4px;
}

/* NEGOTIATION PANEL */
.negotiation-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.neg-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 14px;
}

.neg-rounds {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.round-indicator {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.round-indicator.active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.computed-offer {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}

.offer-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.offer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

.offer-row:last-of-type { border-bottom: none; }

.offer-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blue);
  font-weight: 500;
}

.offer-note {
  font-size: 10px;
  color: var(--ink-dim);
  font-style: italic;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.neg-terms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.term-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.term-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 80px;
  flex-shrink: 0;
}

.term-options {
  display: flex;
  gap: 6px;
}

.term-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.04em;
}

.term-btn:hover { border-color: var(--blue); color: var(--blue); }
.term-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

.neg-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.neg-warning {
  font-size: 11px;
  color: var(--ink-dim);
  font-style: italic;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 2px solid var(--ink-dim);
}

/* DILIGENCE PANEL */
.diligence-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.dd-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.dd-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.dd-q {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dd-q-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.dd-q-val {
  font-size: 11px;
  color: var(--ink-muted);
}

.dd-q-val.warn { color: #c00; }

.flip-alert {
  padding: 12px;
  background: #fff8e0;
  border: 1px solid #e8c800;
  border-radius: var(--radius);
}

.flip-alert-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #8a6800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.flip-alert-body {
  font-size: 11px;
  color: #6a5000;
}

/* ═══════════════════════════════════════════
   SCREEN 4: THE FLOOR
═══════════════════════════════════════════ */

.floor-stats {
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

.floor-layout {
  display: grid;
  grid-template-columns: 280px 1fr 220px;
  gap: 16px;
  align-items: start;
}

.your-listing { }

.listing-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.listing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.own-listing { border-color: var(--blue); }

.listing-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.listing-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.listing-founder {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
}

.listing-tagline {
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
  margin-bottom: 6px;
}

.listing-components {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-bottom: 12px;
}

.listing-metrics {
  display: flex;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.lm-item { text-align: center; }

.lm-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--blue);
  display: block;
}

.lm-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

/* FLOOR LISTINGS */
.floor-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.04em;
}

.filter-btn:hover { border-color: var(--blue); color: var(--blue); }
.filter-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); }

.floor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.floor-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  transition: all var(--transition);
}

.floor-card:hover { border-color: var(--blue); }
.floor-card.adopted { border-color: var(--lime-dim); background: rgba(216,254,94,0.06); }

.floor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.fc-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.fc-founder {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
}

.fc-tagline {
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
  margin-bottom: 4px;
}

.fc-components {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

.fc-metrics {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.fc-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.adopted-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--lime);
  color: var(--ink);
  padding: 3px 7px;
  border-radius: 2px;
  letter-spacing: 0.04em;
}

/* SIGNAL PANEL */
.signal-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.signal-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.signal-row {
  padding: 10px 0;
}

.signal-type {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}

.signal-type.adopt-type { color: var(--blue); }

.signal-desc {
  font-size: 11px;
  color: var(--ink-muted);
}

.signal-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.signal-note {
  font-size: 10px;
  color: var(--ink-dim);
  font-style: italic;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════
   SCREEN 5: ECONOMY
═══════════════════════════════════════════ */

.economy-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.supply-card { grid-column: 1 / 3; }
.codes-card { grid-column: 3; grid-row: 1 / 3; }
.index-card { grid-column: 1; }
.season-card { grid-column: 2; }
.units-card { grid-column: 1 / 3; }

.supply-formula {
  background: var(--ink);
  color: var(--lime);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

.supply-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}

.supply-stat { flex: 1; }

.ss-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.ss-val.mint-val { color: var(--blue); }
.ss-val.burn-val { color: #c00; }

.ss-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.supply-tolerance {
  font-size: 11px;
  color: var(--ink-muted);
  padding: 8px 10px;
  background: rgba(216,254,94,0.15);
  border-radius: var(--radius);
  border-left: 2px solid var(--lime-dim);
}

/* CODES TABLE */
.codes-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.code-row {
  display: grid;
  grid-template-columns: 1fr 20px 40px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 11px;
}

.code-row.header {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.code-name {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink);
}

.dir-mint { color: var(--blue); font-weight: 700; }
.dir-burn { color: #c00; font-weight: 700; }
.dir-neutral { color: var(--ink-dim); }

.mint-row .code-name { color: var(--blue); }
.burn-row .code-name { color: #c00; }
.neutral-row .code-name { color: var(--ink-dim); }

/* INDEX BANDS */
.index-bands {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.band {
  display: grid;
  grid-template-columns: 50px 70px 1fr 80px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0.5;
}

.band.current-band { opacity: 1; }

.band-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
}

.band-name {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.band-desc {
  font-size: 10px;
  color: var(--ink-muted);
}

.index-note {
  font-size: 10px;
  color: var(--ink-dim);
  font-style: italic;
}

/* SEASON CARD */
.season-progress {
  margin-bottom: 14px;
}

.season-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.season-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
  transition: width 0.6s ease;
}

.season-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.season-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  opacity: 0.4;
}

.ss-step.done, .ss-step.active { opacity: 1; }
.ss-step.active .ss-name { color: var(--blue); }

.ss-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  width: 20px;
}

.ss-name {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
  width: 80px;
}

.ss-desc {
  font-size: 11px;
  color: var(--ink-muted);
}

/* UNITS CARD */
.units-split {
  display: flex;
  gap: 0;
}

.unit-col { flex: 1; padding: 0 16px 0 0; }
.unit-col:last-child { padding: 0 0 0 16px; }

.unit-divider {
  width: 1px;
  background: var(--border);
  margin: 0 8px;
}

.unit-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.spark-unit { color: var(--blue); }
.standing-unit { color: var(--ink); }

.unit-prop {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.unit-prop span:first-child {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.unit-prop span:last-child { color: var(--ink-muted); }

.warn-prop span:last-child { color: #c00; font-weight: 500; }

/* ═══════════════════════════════════════════
   SCREEN 6: LEDGER
═══════════════════════════════════════════ */

.ledger-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  letter-spacing: 0.04em;
}

.ledger-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.behaviours-panel {
  grid-column: 1 / 3;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.beh-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.beh-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.beh-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.beh-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  margin-bottom: 4px;
}

.beh-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--blue);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.beh-desc {
  font-size: 10px;
  color: var(--ink-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}

.beh-event {
  margin-bottom: 6px;
}

.beh-event code {
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--ink);
  color: var(--lime);
  padding: 2px 5px;
  border-radius: 2px;
  display: block;
  word-break: break-all;
}

.beh-reading {
  font-size: 10px;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.4;
}

.beh-reading.dim { color: var(--ink-dim); }
.beh-reading.warn { color: #c00; }

/* LEDGER TABLE */
.ledger-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.ledger-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ledger-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ledger-row {
  display: grid;
  grid-template-columns: 30px 140px 120px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  align-items: start;
}

.ledger-row.header {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lr-day {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.lr-event {
  font-size: 11px;
  color: var(--ink);
}

.lr-code {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--blue);
  letter-spacing: 0.04em;
}

.lr-obs {
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
}

/* REPORT PANEL */
.report-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.report-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}

.report-note {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.report-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.report-section { }

.rs-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 4px;
}

.rs-text {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.rs-cite {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--blue);
  background: rgba(58,58,245,0.08);
  padding: 1px 4px;
  border-radius: 2px;
}

.report-footer {
  font-size: 10px;
  color: var(--ink-dim);
  font-style: italic;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 10px 16px;
  border-radius: var(--radius);
  max-width: 360px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.2s ease;
  pointer-events: none;
  letter-spacing: 0.02em;
  border-left: 3px solid var(--lime);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   RULES CARD
═══════════════════════════════════════════ */

.rules-trigger {
  position: fixed;
  bottom: 24px;
  left: calc(var(--sidebar-w) + 24px);
  width: 36px;
  height: 36px;
  background: var(--ink);
  color: var(--lime);
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  cursor: pointer;
  z-index: 200;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rules-trigger:hover {
  background: var(--blue);
  color: var(--white);
}

.rules-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.7);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
}

.rules-overlay.open { display: flex; }

.rules-card {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 480px;
  width: 90%;
  border: 1px solid var(--ink-soft);
}

.rules-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--lime);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.rules-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-soft);
}

.rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  counter-reset: rules;
}

.rules-list li {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--white);
  line-height: 1.5;
  counter-increment: rules;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-soft);
}

.rules-list li::before {
  content: counter(rules, upper-roman);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--lime);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  padding-top: 2px;
  width: 24px;
}

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width: 1200px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .mandates-card { grid-column: 1 / 3; grid-row: auto; }
  .endings-card { grid-column: 1 / 3; }
  .beh-grid { grid-template-columns: repeat(3, 1fr); }
  .fundraise-layout { grid-template-columns: 1fr 1fr; }
  .diligence-panel { grid-column: 1 / 3; }
  .economy-layout { grid-template-columns: 1fr 1fr; }
  .codes-card { grid-column: 1 / 3; grid-row: auto; }
  .supply-card { grid-column: 1 / 3; }
  .units-card { grid-column: 1 / 3; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 180px; }
  .screen { padding: 20px; }
  .workbench-layout { grid-template-columns: 1fr; }
  .floor-layout { grid-template-columns: 1fr; }
  .floor-grid { grid-template-columns: 1fr; }
  .beh-grid { grid-template-columns: repeat(2, 1fr); }
  .ledger-layout { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 30px 1fr 1fr; }
  .lr-obs { grid-column: 2 / 4; }
}