/* Design Business — Qeeboo Italy inventory dashboard.
   Forked from /Users/macbook/Projects/design-atlas/web/css/atlas.css. */

:root {
  --bg-0: #0a0a0b;
  --bg-1: #131316;
  --bg-2: #1c1c20;
  --bg-3: #25252b;
  --line: #2c2c33;
  --fg-0: #f4f4f5;
  --fg-1: #b5b5bb;
  --fg-2: #6e6e76;
  --accent: #d4a373;      /* warm wholesale-leather tone */
  --accent-2: #e9c896;
  --warn: #c87f5a;
  --ok: #6ab07a;
  --crit: #d76060;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ─── Stacking hierarchy (single source of truth) ──────────────────────
   * Document layers from bottom to top. Only set z-index when explicitly
   * needed for cross-sibling ordering — never use unscoped numbers.
   * Each layer is +10 so we can wedge ad-hoc levels between them.
   */
  --z-base:        1;   /* in-flow canvas content (#view-stage)            */
  --z-overlay:    10;   /* float-over-canvas chrome (cw-tag, cw-count)     */
  --z-sticky:     20;   /* sticky headers inside scroll containers         */
  --z-panel:      30;   /* slide-in detail panel (above the canvas)        */
  --z-modal:      40;   /* future: full-screen modals / lightboxes         */
  --z-toast:      50;   /* future: transient toasts / notifications        */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-0); color: var(--fg-0); font-family: var(--font-sans); font-size: 14px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--line); }

.biz-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ───────────────── sidebar ───────────────── */
.sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar-head { padding: 20px 18px 16px; border-bottom: 1px solid var(--line); }
.sidebar-head h1 {
  margin: 0 0 4px 0; font-size: 12px; letter-spacing: 0.18em;
  font-weight: 600; color: var(--fg-1);
}
.sidebar-head .brand-tag { font-size: 16px; color: var(--fg-0); margin-bottom: 4px; }
.sidebar-head .brand-tag strong { color: var(--accent); font-weight: 500; }
.sidebar-head .subtitle { font-size: 11px; color: var(--fg-2); font-family: var(--font-mono); }

.filter-block { padding: 10px 18px; border-bottom: 1px solid var(--line); }
.filter-block label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--fg-2); margin-bottom: 6px; text-transform: uppercase;
}
.filter-block label .filter-readout {
  font-family: var(--font-mono); color: var(--accent); letter-spacing: 0;
  font-size: 10px; text-transform: none;
}
.filter-block select, .filter-block input[type="search"] {
  width: 100%; background: var(--bg-2); color: var(--fg-0);
  border: 1px solid var(--line); padding: 7px 9px;
  font-size: 13px; font-family: var(--font-sans); border-radius: 3px; outline: none;
}
.filter-block select:focus, .filter-block input[type="search"]:focus { border-color: var(--accent); }

/* Pill row (view switcher, stock pills) */
.pill-row { display: flex; gap: 4px; flex-wrap: wrap; }
.pill {
  flex: 1; background: var(--bg-2); color: var(--fg-1);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 6px 8px; font-size: 11px; font-family: var(--font-sans);
  cursor: pointer; transition: color 0.1s, background 0.1s, border-color 0.1s;
  letter-spacing: 0.04em;
}
.pill:hover:not(:disabled) { color: var(--fg-0); border-color: var(--accent); }
.pill[data-active="true"] {
  background: var(--accent); color: var(--bg-0);
  border-color: var(--accent); font-weight: 500;
}
.pill:disabled { opacity: 0.4; cursor: not-allowed; }

/* Chip list (color filter) */
.chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 3px 8px 3px 5px; border-radius: 12px;
  font-size: 11px; color: var(--fg-1); cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
.chip:hover { border-color: var(--accent); color: var(--fg-0); }
.chip[data-active="true"] {
  border-color: var(--accent); color: var(--fg-0);
  background: rgba(212, 163, 115, 0.12);
}
.chip .swatch {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.chip .count { color: var(--fg-2); font-family: var(--font-mono); font-size: 10px; }

/* Dual range slider — both inputs occupy the same 100%-wide track. To keep
 * both thumbs reachable when they sit near each other, the min input is
 * lifted above the max input. Track is non-interactive; only thumbs
 * accept pointer events. */
.dual-range {
  position: relative; height: 22px;
  isolation: isolate; /* contain z-index 1/2 below to this stacking context */
}
.dual-range input[type="range"] {
  position: absolute; left: 0; right: 0; width: 100%;
  -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none;
  margin: 0;
}
.dual-range input[type="range"]#price-min { z-index: 2; }
.dual-range input[type="range"]#price-max { z-index: 1; }
.dual-range input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--bg-3); border-radius: 1px;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer; pointer-events: auto;
  margin-top: -6px;
}

/* Result block (right rail SKU list) */
.result-block {
  padding: 0;
  min-height: 280px;
  background: var(--bg-1);
}
.result-count {
  padding: 8px 18px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--fg-2);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.04em;
  background: var(--bg-0);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.result-count span:first-child { color: var(--accent); font-weight: 600; font-size: 12px; }

.result-list { padding: 4px 0; }
.sku-card {
  display: block; padding: 9px 18px; cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.08s, border-color 0.08s;
  border-bottom: 1px solid rgba(44, 44, 51, 0.4);
}
.sku-card:hover { background: var(--bg-2); border-left-color: var(--accent); }
.sku-card[data-selected="true"] {
  background: var(--bg-2); border-left-color: var(--accent);
}
.sku-card .sc-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 3px;
}
.sku-card .sc-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.sku-card .sc-thumb {
  width: 28px; height: 28px; border-radius: 3px;
  object-fit: cover; background: #f5f4f0;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.sku-card .sc-name {
  font-size: 13px; color: var(--fg-0); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sku-card .sc-meta {
  font-size: 11px; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.sku-card .sc-stats {
  display: flex; gap: 10px; font-size: 10px; font-family: var(--font-mono);
  color: var(--fg-1);
}
.sku-card .sc-stats .sc-price { color: var(--accent); }
.sku-card .sc-stats .sc-stock { }
.sku-card .sc-stats .sc-days-crit { color: var(--crit); }
.sku-card .sc-stats .sc-days-warn { color: var(--warn); }
.sku-card .sc-stats .sc-days-ok { color: var(--ok); }
.sku-card .sc-stats .sc-days-oos { color: var(--fg-2); }

.sidebar-foot { padding: 8px 18px; font-size: 10px; color: var(--fg-2); border-top: 1px solid var(--line); }

/* ───────────────── canvas / view stage ───────────────── */
.canvas-shell {
  background: var(--bg-0); position: relative; overflow: hidden;
}
#view-stage {
  position: absolute; inset: 0;
  z-index: var(--z-base);
  overflow-y: auto;
  padding: 16px;
}

/* Color Wall view */
.cw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.cw-cell {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.cw-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.cw-cell[data-active="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
/* Block = square 2×2 image mosaic. Badges are slim pills that hug
 * the corners without dominating the picture area. */
.cw-cell .cw-block {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}
.cw-cell .cw-mosaic {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.cw-cell .cw-mosaic-img {
  width: 100%; height: 100%;
  object-fit: cover;
  background: rgba(245, 244, 240, 0.95);
  display: block;
}
.cw-cell .cw-mosaic-empty {
  background: transparent;
}
.cw-cell .cw-count {
  position: absolute; left: 6px; top: 6px;
  z-index: var(--z-overlay);
  font-size: 11px; font-weight: 600; line-height: 1;
  color: white;
  background: rgba(0,0,0,0.78);
  padding: 3px 7px;
  border-radius: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.cw-cell .cw-tag {
  position: absolute; right: 6px; bottom: 6px;
  z-index: var(--z-overlay);
  font-size: 9px; letter-spacing: 0.04em;
  color: white;
  background: rgba(0,0,0,0.7);
  padding: 2px 6px;
  border-radius: 8px;
  font-family: var(--font-mono);
}
.cw-cell .cw-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.cw-cell .cw-foot .cw-label {
  color: var(--fg-0); font-weight: 500;
  margin-bottom: 3px;
}
.cw-cell .cw-foot .cw-stats {
  display: flex; justify-content: space-between;
  color: var(--fg-2); font-family: var(--font-mono); font-size: 10px;
}
.cw-cell .cw-foot .cw-stats .cw-rev { color: var(--accent); }

/* Color Wall — SKU thumbnail grid (when a color is selected) */
.cw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.cw-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.cw-thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.cw-thumb .ct-swatch { position: absolute; inset: 0; }
/* When the thumb has an image, the color swatch only shows as a thin top stripe */
.cw-thumb.has-img .ct-swatch {
  inset: auto 0 0 0; height: 4px;
  border-top: 1px solid rgba(0,0,0,0.2);
}
.cw-thumb .ct-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #f5f4f0;
}
.cw-thumb .ct-name {
  position: absolute; left: 6px; right: 6px; bottom: 8px;
  font-size: 10px; color: white;
  font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-thumb .ct-name {
  /* readable over either color block or photo */
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.cw-thumb.has-img .ct-name {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  padding: 18px 6px 4px;
  left: 0; right: 0; bottom: 0;
}
.cw-thumb .ct-stock {
  position: absolute; right: 6px; top: 6px;
  z-index: var(--z-overlay);
  font-size: 9px; font-family: var(--font-mono);
  background: rgba(0,0,0,0.7); color: white;
  padding: 1px 5px; border-radius: 8px;
}

.cw-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cw-header .cw-title { font-size: 14px; font-weight: 500; color: var(--fg-0); }
.cw-header .cw-back {
  background: transparent; border: 1px solid var(--line);
  color: var(--fg-1); cursor: pointer; padding: 4px 10px;
  font-size: 11px; border-radius: 3px;
}
.cw-header .cw-back:hover { color: var(--accent); border-color: var(--accent); }

/* ───────────────── detail panel ───────────────── */
.detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  z-index: var(--z-panel);
  width: 400px; max-width: 90vw;
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
  overflow-y: auto;
  padding: 0;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}
.detail-panel[data-open="true"] { transform: translateX(0); }
.detail-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: none; color: var(--fg-2);
  font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.detail-close:hover { color: var(--accent); }
.detail-body { padding: 24px 22px; }
.dp-color-block { height: 80px; border-radius: 3px; margin-bottom: 14px; border: 1px solid var(--line); }
.dp-image-wrap { position: relative; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: #f5f4f0; }
.dp-image { display: block; width: 100%; height: 240px; object-fit: contain; }
.dp-color-stripe { height: 6px; border-top: 1px solid rgba(0,0,0,0.1); }
.dp-title { font-size: 17px; color: var(--fg-0); margin-bottom: 4px; font-weight: 500; }
.dp-variant { font-size: 13px; color: var(--fg-1); margin-bottom: 2px; }
.dp-designer { font-size: 12px; color: var(--accent); margin-bottom: 16px; }
.dp-sku { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); margin-bottom: 16px; }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.dp-stat { background: var(--bg-2); border: 1px solid var(--line); padding: 10px; border-radius: 3px; }
.dp-stat .dp-stat-label { font-size: 10px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.dp-stat .dp-stat-value { font-size: 15px; color: var(--fg-0); font-family: var(--font-mono); }
.dp-stat .dp-stat-value.crit { color: var(--crit); }
.dp-stat .dp-stat-value.warn { color: var(--warn); }
.dp-stat .dp-stat-value.ok { color: var(--ok); }

/* ───────────────── Orders / Trends views ───────────────── */
.orders-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 14px 0 24px;
}
.orders-stat {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px;
}
.orders-stat .orders-stat-label {
  font-size: 10px; color: var(--fg-2); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.orders-stat .orders-stat-value {
  font-size: 20px; font-family: var(--font-mono);
  color: var(--fg-0); line-height: 1;
}
.orders-stat-accent .orders-stat-value { color: var(--accent); }

.orders-section { margin: 30px 0 12px; }
.orders-section-title {
  font-size: 13px; color: var(--fg-0); margin: 0 0 4px 0;
  font-weight: 500; letter-spacing: 0.02em;
}
.orders-section-sub { font-size: 11px; color: var(--fg-2); }

/* Calendar heatmap */
.cal-heatmap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 8px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 16px; margin-top: 8px;
}
.cal-row-labels {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 0;
}
.cal-row-label {
  height: 18px; width: 30px;
  font-size: 9px; color: var(--fg-2);
  font-family: var(--font-mono);
  display: flex; align-items: center;
}
.cal-cols { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 4px; }
.cal-col { display: flex; flex-direction: column; gap: 2px; }
.cal-cell {
  width: 18px; height: 18px;
  background: var(--bg-2);
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: default;
}
.cal-cell.has-order { cursor: pointer; }
.cal-cell.has-order:hover { border-color: var(--accent); }
.cal-cell.selected { border-color: white; outline: 1px solid var(--accent); }
.cal-legend {
  grid-column: 2;
  display: flex; align-items: center; gap: 4px;
  margin-top: 12px;
  font-size: 9px; color: var(--fg-2);
  font-family: var(--font-mono);
}
.cal-legend-cell { width: 14px; height: 14px; border-radius: 2px; }

/* Order cards */
.orders-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin-top: 10px;
}
.order-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px; cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  align-items: baseline;
}
.order-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.order-card .oc-rank {
  grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: 18px;
  color: var(--accent); width: 40px;
}
.order-card .oc-date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); }
.order-card .oc-value {
  grid-column: 2; grid-row: 1;
  font-size: 18px; color: var(--fg-0); font-family: var(--font-mono);
  text-align: right; font-weight: 600;
}
.order-card .oc-meta {
  grid-column: 1 / span 2;
  font-size: 11px; color: var(--fg-2); margin-bottom: 8px;
}
.order-card .oc-lines {
  grid-column: 1 / span 2;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px;
}
.order-card .oc-line {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 6px;
  align-items: center;
}
.order-card .oc-line .oc-thumb {
  width: 22px; height: 22px; object-fit: cover;
  border-radius: 2px; background: #f5f4f0; border: 1px solid var(--line);
}
.order-card .oc-line .oc-line-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--fg-1);
}
.order-card .oc-line .oc-line-val {
  font-family: var(--font-mono); color: var(--accent); font-size: 10px;
}
.order-card .oc-line-more {
  font-size: 10px; color: var(--fg-2); padding-left: 28px;
}

/* Cluster cards */
.cluster-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cluster-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px;
}
.cluster-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cluster-name { font-size: 13px; color: var(--fg-0); font-weight: 500; }
.cluster-value { font-family: var(--font-mono); color: var(--accent); font-size: 14px; }
.cluster-meta { font-size: 11px; color: var(--fg-2); margin-bottom: 8px; }
.cluster-designers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.cluster-des-chip {
  font-size: 10px; padding: 2px 6px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--fg-1); font-family: var(--font-mono);
}
.cluster-dates { font-size: 10px; color: var(--fg-2); font-family: var(--font-mono); }

/* Salone / DOM bars */
.salone-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.salone-row, .salone-baseline-row {
  display: grid; grid-template-columns: 180px 1fr 150px;
  align-items: center; gap: 10px;
}
.salone-label { font-size: 12px; color: var(--fg-1); }
.salone-label.highlight { color: var(--accent); font-weight: 600; }
.salone-bar-track { background: var(--bg-2); height: 18px; border-radius: 3px; overflow: hidden; }
.salone-bar { background: var(--accent); height: 100%; border-radius: 3px; }
.salone-bar.below { background: var(--warn); }
.salone-baseline-bar {
  background: transparent; border: 1px dashed var(--fg-2); height: 100%;
  border-radius: 3px;
}
.salone-val { font-family: var(--font-mono); font-size: 11px; color: var(--fg-1); text-align: right; }

/* Charts */
.chart-wrap {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px; margin-top: 8px;
}
.chart-svg { width: 100%; height: auto; display: block; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-bottom: 10px; font-size: 11px; color: var(--fg-1);
}
.chart-legend-item { display: flex; align-items: center; gap: 5px; }
.chart-legend-swatch {
  width: 10px; height: 10px; border-radius: 2px;
}

/* Quarterly card grid */
.quarterly-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px; margin-top: 10px;
}
.quarterly-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
}
.quarterly-card .qc-title {
  font-size: 12px; letter-spacing: 0.08em; color: var(--fg-2);
  margin-bottom: 4px;
}
.quarterly-card .qc-value {
  font-size: 22px; color: var(--accent); font-family: var(--font-mono);
  margin-bottom: 2px;
}
.quarterly-card .qc-meta { font-size: 11px; color: var(--fg-2); margin-bottom: 12px; }
.quarterly-card .qc-row {
  display: grid; grid-template-columns: 110px 1fr 50px;
  align-items: center; gap: 8px; margin-bottom: 4px;
}
.quarterly-card .qc-row-label {
  font-size: 11px; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quarterly-card .qc-row-track { background: var(--bg-2); height: 8px; border-radius: 2px; overflow: hidden; }
.quarterly-card .qc-row-fill { background: var(--accent); height: 100%; }
.quarterly-card .qc-row-val { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); text-align: right; }

/* Detail panel - order lines */
.dp-order-lines { display: flex; flex-direction: column; gap: 4px; }
.dp-order-line {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 8px;
  align-items: center; padding: 4px 0;
  border-bottom: 1px solid rgba(44,44,51,0.4);
}
.dp-line-thumb {
  width: 36px; height: 36px; object-fit: cover;
  border-radius: 3px; background: #f5f4f0; border: 1px solid var(--line);
}
.dp-line-info { min-width: 0; }
.dp-line-name {
  font-size: 12px; color: var(--fg-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-line-meta { font-size: 10px; color: var(--fg-2); }
.dp-line-val {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
}
.dp-line-more { font-size: 11px; color: var(--fg-2); padding-top: 8px; text-align: center; }

/* ───────────────── Overview view ───────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0 24px;
}
.kpi {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 16px;
}
.kpi-label {
  font-size: 10px; color: var(--fg-2); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 8px;
}
.kpi-value {
  font-size: 26px; font-family: var(--font-mono); line-height: 1;
  margin-bottom: 4px; color: var(--fg-0);
}
.kpi-accent .kpi-value { color: var(--accent); }
.kpi-warn .kpi-value   { color: var(--warn); }
.kpi-crit .kpi-value   { color: var(--crit); }
.kpi-sub { font-size: 10px; color: var(--fg-2); }

/* Forecast cards */
.forecast-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-top: 10px;
}
.forecast-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px 16px;
}
.fc-horizon {
  font-size: 18px; color: var(--accent); font-family: var(--font-mono);
  letter-spacing: 0.06em; margin-bottom: 10px; font-weight: 600;
}
.fc-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.fc-label { font-size: 11px; color: var(--fg-2); }
.fc-val   { font-family: var(--font-mono); font-size: 14px; color: var(--fg-0); }
.fc-val.ok    { color: var(--ok); }
.fc-val.warn  { color: var(--warn); }
.fc-val.crit  { color: var(--crit); }
.fc-bar-label { font-size: 10px; color: var(--fg-2); margin: 8px 0 4px; }
.fc-bar {
  width: 100%; height: 6px; background: var(--bg-2);
  border-radius: 3px; overflow: hidden;
}
.fc-bar-fill { height: 100%; transition: width 0.3s; }

/* Pareto list */
.pareto-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pareto-row {
  display: grid;
  grid-template-columns: 30px 40px 1fr 200px 80px;
  gap: 8px;
  align-items: center;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 3px; padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.1s;
}
.pareto-row-des { grid-template-columns: 30px 1fr 200px 80px; }
.pareto-row:hover { border-color: var(--accent); }
.pareto-rank {
  font-family: var(--font-mono); color: var(--accent); font-size: 12px;
}
.pareto-thumb {
  width: 40px; height: 40px; border-radius: 3px;
  object-fit: cover; background: #f5f4f0;
  border: 1px solid var(--line);
}
.pareto-info { min-width: 0; }
.pareto-name {
  font-size: 13px; color: var(--fg-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pareto-meta { font-size: 11px; color: var(--fg-2); }
.pareto-bar-wrap { background: var(--bg-2); height: 8px; border-radius: 2px; overflow: hidden; }
.pareto-bar-fill { height: 100%; background: var(--accent); }
.pareto-val {
  font-family: var(--font-mono); color: var(--accent); font-size: 12px;
  text-align: right;
}

/* DOW (day-of-week) analysis */
.verdict-card {
  background: linear-gradient(180deg, rgba(106,176,122,0.08) 0%, var(--bg-1) 100%);
  border: 1px solid var(--ok);
  border-radius: 4px;
  padding: 14px 16px;
  margin-top: 10px;
}
.verdict-tag {
  display: inline-block;
  padding: 3px 8px; border-radius: 3px;
  font-size: 10px; letter-spacing: 0.12em; font-weight: 600;
  margin-bottom: 8px;
  font-family: var(--font-mono);
}
.verdict-tag-no { background: var(--ok); color: var(--bg-0); }
.verdict-body { font-size: 12px; color: var(--fg-1); line-height: 1.55; }
.verdict-body b { color: var(--fg-0); font-weight: 600; }

.dow-two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 14px;
}
@media (max-width: 1100px) {
  .dow-two-col { grid-template-columns: 1fr; }
}
.dow-col {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
}
.dow-col-title {
  font-size: 12px; color: var(--fg-1); margin: 0 0 10px 0;
  font-weight: 500;
}
.dow-row {
  display: grid; grid-template-columns: 40px 1fr 180px;
  align-items: center; gap: 8px; margin-bottom: 6px;
}
.dow-label { font-size: 11px; font-family: var(--font-mono); color: var(--fg-1); }
.dow-track {
  background: var(--bg-2); height: 18px; border-radius: 3px;
  position: relative; overflow: hidden;
}
.dow-bar {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 3px;
}
.dow-bar-median { background: rgba(180, 180, 200, 0.35); }
.dow-bar-mean   { background: var(--accent); height: 9px; top: 4.5px; border-radius: 2px; }
.dow-bar-big    { background: var(--warn); }
.dow-bar-big.highlight { background: var(--accent); }
.dow-bar-big.fri       { background: var(--crit); opacity: 0.6; }
.dow-val {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-1);
  text-align: right;
}

.dow-evidence {
  margin-top: 14px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px 16px;
}
.dow-fact {
  font-size: 11px; color: var(--fg-1);
  font-family: var(--font-mono); padding: 3px 0;
}

/* ───────────────── Planning view ───────────────── */
.abc-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.abc-tag {
  font-size: 11px; padding: 4px 9px; border-radius: 3px;
  font-family: var(--font-mono); letter-spacing: 0.02em;
}
.abc-a { background: rgba(106, 176, 122, 0.18); color: #6ab07a; border: 1px solid rgba(106, 176, 122, 0.4); }
.abc-b { background: rgba(212, 163, 115, 0.18); color: #d4a373; border: 1px solid rgba(212, 163, 115, 0.4); }
.abc-c { background: rgba(110, 110, 118, 0.18); color: #b5b5bb; border: 1px solid rgba(110, 110, 118, 0.4); }

.salone-label.highlight { color: var(--crit); font-weight: 600; }

.restock-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin-top: 10px;
}
.restock-card {
  display: grid; grid-template-columns: 30px 50px 1fr; gap: 10px;
  align-items: center;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 10px 12px; cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
}
.restock-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.restock-card .rc-rank {
  font-family: var(--font-mono); color: var(--accent); font-size: 14px;
}
.restock-card .rc-thumb {
  width: 50px; height: 50px; border-radius: 3px;
  object-fit: cover; background: #f5f4f0; border: 1px solid var(--line);
}
.restock-card .rc-info { min-width: 0; }
.restock-card .rc-name {
  font-size: 13px; color: var(--fg-0); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.restock-card .rc-meta {
  font-size: 11px; color: var(--fg-2); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.restock-card .rc-stats {
  display: flex; gap: 8px; font-size: 10px; font-family: var(--font-mono);
}
.restock-card .rc-stat.crit   { color: var(--crit); font-weight: 600; }
.restock-card .rc-stat.accent { color: var(--accent); }

/* ───────────────── Designers view ───────────────── */
.heatmap-wrap {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px; margin-top: 10px;
  overflow-x: auto;
}
.heatmap-table {
  border-collapse: separate; border-spacing: 2px;
  font-size: 11px; font-family: var(--font-mono);
  width: 100%;
}
.heatmap-table .hm-corner {
  font-size: 9px; color: var(--fg-2); padding: 6px;
  font-weight: 500; text-align: left;
}
.heatmap-table .hm-fam {
  font-size: 10px; color: var(--fg-1); padding: 6px 4px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.heatmap-table .hm-des {
  font-size: 11px; color: var(--fg-1); padding: 6px 8px;
  white-space: nowrap;
  border-right: 1px solid var(--line);
  text-align: right;
}
.heatmap-table .hm-cell {
  text-align: center;
  font-size: 10px;
  padding: 8px 4px;
  border-radius: 3px;
  min-width: 60px;
}

.small-mult-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px; margin-top: 10px;
}
.small-mult-panel {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 10px;
}
.sm-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-1); margin-bottom: 4px;
  font-family: var(--font-mono);
}
.sm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sm-total { margin-left: auto; color: var(--accent); font-weight: 600; }
.sm-svg { width: 100%; height: auto; display: block; }

.qoq-list {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px; margin-top: 10px;
}
.qoq-row, .qoq-header {
  display: grid;
  grid-template-columns: 180px 130px 60px 130px 60px;
  gap: 10px; align-items: center;
  padding: 4px 0;
  font-family: var(--font-mono); font-size: 11px;
}
.qoq-header {
  border-bottom: 1px solid var(--line);
  color: var(--fg-2); padding-bottom: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.qoq-name { color: var(--fg-1); }
.qoq-col-label { color: var(--fg-2); }
.qoq-share-track {
  background: var(--bg-2); height: 10px; border-radius: 2px; overflow: hidden;
}
.qoq-share-fill { background: var(--accent); height: 100%; }
.qoq-pct {
  font-size: 11px; color: var(--accent); text-align: right;
}
.qoq-delta-track {
  position: relative; background: var(--bg-2);
  height: 10px; border-radius: 2px; overflow: hidden;
}
.qoq-delta-fill {
  position: absolute; top: 0; height: 100%;
}
.qoq-delta-fill.pos { background: var(--ok); }
.qoq-delta-fill.neg { background: var(--crit); }
.qoq-delta-zero {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--fg-2);
}
.qoq-delta-val.pos { color: var(--ok); }
.qoq-delta-val.neg { color: var(--crit); }
.qoq-delta-val {
  font-size: 11px; text-align: right;
}

.portfolio-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 10px; margin-top: 10px;
}
.portfolio-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
}
.pf-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.pf-name {
  font-size: 14px; color: var(--fg-0); font-weight: 500;
}
.pf-total {
  font-family: var(--font-mono); color: var(--accent); font-size: 14px;
}
.pf-meta {
  font-size: 11px; color: var(--fg-2); margin-bottom: 10px;
  font-family: var(--font-mono);
}
.pf-skus { display: flex; flex-direction: column; gap: 4px; }
.pf-sku {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 8px; align-items: center;
  padding: 4px 6px; cursor: pointer; border-radius: 2px;
}
.pf-sku:hover { background: var(--bg-2); }
.pf-thumb {
  width: 36px; height: 36px; border-radius: 2px;
  object-fit: cover; background: #f5f4f0; border: 1px solid var(--line);
}
.pf-sku-info { min-width: 0; }
.pf-sku-name {
  font-size: 12px; color: var(--fg-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-sku-meta {
  font-size: 10px; color: var(--fg-2);
}
.pf-sku-val {
  font-family: var(--font-mono); color: var(--accent); font-size: 11px;
}

/* View switcher needs more pills now (6) */
.pill-row-views { gap: 3px; }
.pill-row-views .pill { font-size: 10px; padding: 6px 4px; }

/* Cumulative revenue summary (above the projection chart) */
.cum-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cum-summary > div {
  display: flex; flex-direction: column; gap: 2px;
}
.cum-summary-label {
  font-size: 10px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cum-summary-val {
  font-family: var(--font-mono); font-size: 15px; color: var(--accent);
}
.cum-summary-proj {
  color: var(--ok);
}

/* QoQ table improvements — 5-col layout with from-to */
.qoq-row, .qoq-header {
  grid-template-columns: 170px 110px 1fr 90px 75px;
}
.qoq-caption {
  font-size: 11px; color: var(--fg-2); line-height: 1.5;
  padding: 4px 0 12px 0; margin-bottom: 4px;
  border-bottom: 1px dashed var(--line);
}
.qoq-caption b { color: var(--fg-0); }
.qoq-fromto {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-1);
}
.qoq-fromto .qoq-prior { color: var(--fg-2); }
.qoq-fromto .qoq-arrow { color: var(--fg-2); margin: 0 2px; }
.qoq-fromto .qoq-latest { color: var(--fg-0); font-weight: 600; }

/* Investment table */
.invest-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px; font-family: var(--font-mono);
  background: var(--bg-1);
}
.invest-table thead th {
  padding: 8px 6px; text-align: left;
  font-size: 10px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}
.invest-table tbody td {
  padding: 6px 6px;
  border-bottom: 1px solid rgba(44, 44, 51, 0.4);
}
.invest-table tbody tr:hover { background: var(--bg-2); cursor: pointer; }
.invest-table .it-rank   { color: var(--accent); width: 28px; }
.invest-table .it-sku    { color: var(--fg-1); white-space: nowrap; }
.invest-table .it-name   { color: var(--fg-0); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invest-table .it-des    { color: var(--fg-2); white-space: nowrap; }
.invest-table .it-num    { text-align: right; color: var(--fg-1); }
.invest-table .it-crit   { color: var(--crit); font-weight: 600; }
.invest-table .it-accent { color: var(--accent); font-weight: 600; }
.invest-table .it-ok     { color: var(--ok); }

/* Acceleration two-column split */
.accel-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px;
}
@media (max-width: 1100px) {
  .accel-split { grid-template-columns: 1fr; }
}
.accel-col {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
}
.accel-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(44, 44, 51, 0.4);
}
.accel-row:last-child { border-bottom: none; }
.accel-row:hover { background: var(--bg-2); }
.accel-thumb {
  width: 36px; height: 36px; border-radius: 2px;
  object-fit: cover; background: #f5f4f0; border: 1px solid var(--line);
}
.accel-info { min-width: 0; }
.accel-name {
  font-size: 12px; color: var(--fg-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.accel-meta { font-size: 10px; color: var(--fg-2); font-family: var(--font-mono); }
.accel-ratio {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.accel-hot  { color: var(--ok); }
.accel-cold { color: var(--crit); }

/* Risk concentration bar (stacked) */
.risk-row {
  display: grid; grid-template-columns: 180px 1fr 240px;
  align-items: center; gap: 10px; margin-bottom: 6px;
}
.risk-row .salone-label {
  font-size: 11px; color: var(--fg-1); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.risk-row .salone-bar-track {
  position: relative; height: 22px;
}
.risk-segment {
  position: absolute; top: 0; bottom: 0;
  border-radius: 0;
}
.risk-at { background: var(--crit); left: 0; }
.risk-safe { background: var(--accent); opacity: 0.7; }
.risk-row .salone-val {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-1); text-align: right;
}

/* Death watch cards */
.death-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; margin-top: 10px;
}
.death-card {
  display: grid; grid-template-columns: 48px 1fr; gap: 10px;
  align-items: center;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 10px 12px; cursor: pointer;
  transition: border-color 0.1s;
}
.death-card:hover { border-color: var(--accent); }
.death-thumb {
  width: 48px; height: 48px; border-radius: 3px;
  object-fit: cover; background: #f5f4f0; border: 1px solid var(--line);
  filter: grayscale(40%);
}
.death-info { min-width: 0; }
.death-name {
  font-size: 12px; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.death-meta {
  font-size: 10px; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.death-stats {
  display: flex; gap: 8px; font-size: 10px; font-family: var(--font-mono);
  margin-top: 4px;
}
.death-stock { color: var(--warn); }
.death-val   { color: var(--accent); margin-left: auto; }

/* ───────────────── Collections view ───────────────── */
.mini-bar { background: var(--bg-2); height: 6px; border-radius: 2px; overflow: hidden; width: 100%; min-width: 60px; }
.mini-bar-fill { background: var(--accent); height: 100%; }

.collection-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 12px; margin-top: 10px;
}
.collection-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
}
.col-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px; margin-bottom: 10px;
}
.col-name { font-size: 16px; color: var(--fg-0); font-weight: 500; }
.col-stats {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-mono);
}
.col-stats span:first-child { font-size: 15px; color: var(--accent); }
.col-stats .col-sub { font-size: 10px; color: var(--fg-2); margin-top: 2px; }

.col-product-row {
  display: grid; grid-template-columns: 130px 1fr 70px;
  align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid rgba(44, 44, 51, 0.4);
}
.col-product-row:last-child { border-bottom: none; }
.col-product-name {
  font-size: 11px; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-color-strip {
  display: flex; gap: 3px; flex-wrap: wrap;
}
.col-color-tile {
  width: 28px; height: 28px; border-radius: 2px;
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.col-color-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-color-tile:hover { border-color: var(--accent); }
.col-color-badge {
  position: absolute; top: 0; right: 0;
  background: var(--crit); color: white;
  font-size: 8px; padding: 1px 3px; border-radius: 0 0 0 2px;
  font-family: var(--font-mono);
}
.col-color-badge.oos { background: var(--fg-2); }
.col-product-val {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); text-align: right;
}
.col-more {
  margin-top: 8px; font-size: 10px; color: var(--fg-2);
  font-style: italic; text-align: center;
}

/* Color × Collection heatmap header swatches */
.hm-color-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
}
.hm-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* Color mix bars (stacked rainbow per collection) */
.color-mix-list { display: flex; flex-direction: column; gap: 6px; }
.color-mix-row {
  display: grid; grid-template-columns: 150px 1fr 100px;
  align-items: center; gap: 10px;
}
.cmr-name {
  font-size: 12px; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmr-track {
  display: flex; height: 22px; border-radius: 3px; overflow: hidden;
  background: var(--bg-2);
}
.cmr-seg {
  height: 100%;
  transition: filter 0.1s;
}
.cmr-seg:hover {
  filter: brightness(1.4);
}
.cmr-stats {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); text-align: right;
}

/* Best-color cards */
.best-color-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-top: 10px;
}
.best-color-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px;
}
.bc-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.bc-rank { color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
.bc-name {
  font-size: 12px; color: var(--fg-0); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-img {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 3px; object-fit: contain;
  background: #f5f4f0; border: 1px solid var(--line);
  margin-bottom: 8px;
}
.bc-winner {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; font-size: 11px;
}
.bc-winner .hm-swatch { width: 12px; height: 12px; }
.bc-winner-label { color: var(--fg-0); flex: 1; }
.bc-winner-val { font-family: var(--font-mono); color: var(--accent); }
.bc-others {
  display: flex; gap: 3px; margin-bottom: 6px;
}
.bc-other-tile {
  width: 20px; height: 20px; border-radius: 2px;
  border: 1px solid var(--line); cursor: pointer;
  flex-shrink: 0;
}
.bc-other-tile.winner {
  border-color: var(--accent); border-width: 2px;
  width: 19px; height: 19px;
}
.bc-other-tile:hover { transform: scale(1.15); }
.bc-margin {
  font-size: 10px; color: var(--fg-2);
  font-family: var(--font-mono);
}

/* Chart insight caption (above chart) */
.chart-insight {
  font-size: 11px; color: var(--fg-1);
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(212, 163, 115, 0.06);
  border-left: 2px solid var(--accent);
  border-radius: 0 3px 3px 0;
  font-family: var(--font-mono);
  line-height: 1.6;
}
.chart-insight b { color: var(--fg-0); font-weight: 600; }
.hhi-key {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; vertical-align: middle;
  margin: 0 4px 0 8px;
}

/* ───────────────── Pricing view ───────────────── */
.anchor-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.anchor-row {
  display: grid; grid-template-columns: 170px 1fr 230px;
  align-items: center; gap: 10px;
}
.anchor-name { font-size: 12px; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anchor-track {
  position: relative; background: var(--bg-2);
  height: 18px; border-radius: 3px;
}
.anchor-range {
  position: absolute; top: 7px; bottom: 7px;
  background: var(--accent); opacity: 0.5; border-radius: 2px;
}
.anchor-median {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: white;
  transform: translateX(-1px);
}
.anchor-dot {
  position: absolute; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translateX(-5px);
  border: 1.5px solid var(--bg-0);
}
.anchor-dot.anchor { background: var(--fg-2); }
.anchor-dot.flagship { background: var(--crit); }
.anchor-stats {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-1); text-align: right;
}

/* ───────────────── Bundles view ───────────────── */
.pair-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px; margin-top: 10px;
}
.pair-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px;
  position: relative;
}
.pair-rank {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--font-mono); color: var(--accent); font-size: 12px;
}
.pair-count {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-mono); color: var(--fg-0); font-size: 14px;
  background: rgba(212, 163, 115, 0.18);
  padding: 2px 8px; border-radius: 3px;
}
.pair-dual {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  margin: 26px 0 10px;
}
.pair-thumb {
  width: 70px; height: 70px; border-radius: 3px;
  background: #f5f4f0; border: 1px solid var(--line);
  overflow: hidden; cursor: pointer;
}
.pair-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pair-thumb:hover { border-color: var(--accent); }
.pair-x { font-size: 18px; color: var(--accent); font-weight: 600; }
.pair-names {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px;
}
.pair-name {
  font-size: 11px; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pair-lift {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
}

.lift-list { display: flex; flex-direction: column; gap: 4px; }
.lift-row {
  display: grid; grid-template-columns: 30px 1fr 160px 130px;
  align-items: center; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(44, 44, 51, 0.4);
  font-size: 11px;
}
.lift-rank { color: var(--accent); font-family: var(--font-mono); }
.lift-pair { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lift-plus { color: var(--accent); }
.lift-bar { background: var(--bg-2); height: 10px; border-radius: 2px; overflow: hidden; }
.lift-bar-fill { background: var(--accent); height: 100%; }
.lift-val { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); text-align: right; }

.rule-list { display: flex; flex-direction: column; gap: 4px; }
.rule-row {
  display: grid; grid-template-columns: 28px 36px 1fr 36px 90px;
  align-items: center; gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(44, 44, 51, 0.4);
}
.rule-thumb {
  width: 36px; height: 36px; border-radius: 2px;
  background: #f5f4f0; border: 1px solid var(--line); overflow: hidden;
}
.rule-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rule-text { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-from { color: var(--fg-1); }
.rule-arrow { color: var(--accent); margin: 0 4px; }
.rule-to { color: var(--fg-0); }
.rule-conf { text-align: right; }
.rule-conf-val { font-family: var(--font-mono); font-size: 14px; color: var(--accent); font-weight: 600; }
.rule-conf-label { font-size: 9px; color: var(--fg-2); font-family: var(--font-mono); }

.triple-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-top: 10px;
}
.triple-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px;
}
.triple-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.triple-count {
  font-family: var(--font-mono); color: var(--fg-0); font-size: 12px;
  background: rgba(212, 163, 115, 0.18);
  padding: 2px 8px; border-radius: 3px;
}
.triple-trio {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  margin-bottom: 8px;
}
.triple-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 2px; overflow: hidden;
  background: #f5f4f0; border: 1px solid var(--line);
  cursor: pointer;
}
.triple-thumb img { width: 100%; height: 100%; object-fit: cover; }
.triple-thumb-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
  color: white; font-size: 8px; padding: 8px 3px 3px;
  font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.triple-foot {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
}

/* Operations view — turnover row with thumb */
.turnover-row {
  display: grid !important;
  grid-template-columns: 40px 1fr 1fr 200px;
}
.turn-thumb {
  width: 40px; height: 40px; border-radius: 3px;
  background: #f5f4f0; border: 1px solid var(--line);
  object-fit: cover;
}

/* Outliers — rc-stat for OK tone (green) */
.restock-card .rc-stat.ok { color: var(--ok); }

/* ───────────────── What-if Simulator ───────────────── */
.whatif-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 14px 0 24px;
  padding: 16px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 4px;
}
.whatif-slider { display: flex; flex-direction: column; gap: 6px; }
.whatif-slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.whatif-slider-label { font-size: 11px; color: var(--fg-1); }
.whatif-slider-value { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.whatif-slider-hint { font-size: 10px; color: var(--fg-2); line-height: 1.4; }
.whatif-range {
  width: 100%; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: var(--bg-3); border-radius: 2px; outline: none;
}
.whatif-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
}
.whatif-select {
  width: 100%; background: var(--bg-2); color: var(--fg-0);
  border: 1px solid var(--line); padding: 6px 8px;
  font-size: 12px; border-radius: 3px; outline: none;
}
.whatif-reset {
  grid-column: 1 / -1;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--fg-1); padding: 8px 14px; cursor: pointer;
  font-size: 11px; font-family: var(--font-sans); border-radius: 3px;
  letter-spacing: 0.04em;
  width: auto; justify-self: end;
}
.whatif-reset:hover { color: var(--accent); border-color: var(--accent); }
.whatif-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 18px;
}

/* Waterfall + split + comparison */
.waterfall-list { display: flex; flex-direction: column; gap: 4px; }
.waterfall-row {
  display: grid; grid-template-columns: 220px 1fr 130px;
  align-items: center; gap: 10px;
  padding: 5px 0;
}
.waterfall-total {
  border-top: 1px solid var(--accent);
  padding-top: 8px; margin-top: 4px;
  font-weight: 600;
}
.waterfall-label { font-size: 11px; color: var(--fg-1); }
.waterfall-track { background: var(--bg-2); height: 14px; border-radius: 2px; overflow: hidden; }
.waterfall-bar { height: 100%; }
.waterfall-val { font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-align: right; }

.split-track {
  display: flex; height: 26px; border-radius: 3px; overflow: hidden;
  background: var(--bg-2); margin-bottom: 10px;
}
.split-seg { height: 100%; }
.split-earned { background: var(--ok); }
.split-lost { background: var(--crit); opacity: 0.85; }
.split-labels {
  display: flex; gap: 24px;
  font-size: 11px; color: var(--fg-1);
}
.split-labels > div { display: flex; align-items: center; gap: 6px; }

.compare-header, .compare-row {
  display: grid; grid-template-columns: 180px 1fr 100px 1fr 100px 90px;
  align-items: center; gap: 8px;
  padding: 4px 0;
}
.compare-header {
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  font-size: 10px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.compare-row { font-size: 11px; }
.compare-name { color: var(--fg-1); }
.compare-track { background: var(--bg-2); height: 12px; border-radius: 2px; overflow: hidden; }
.compare-bar { height: 100%; }
.compare-bar.baseline { background: var(--fg-2); }
.compare-bar.scenario { background: var(--accent); }
.compare-val { font-family: var(--font-mono); font-size: 10px; color: var(--fg-1); text-align: right; }
.compare-delta { font-family: var(--font-mono); font-size: 11px; text-align: right; }
.compare-delta.pos { color: var(--ok); }
.compare-delta.neg { color: var(--crit); }
.compare-delta.neutral { color: var(--fg-2); }

/* ───────────────── Compare view ───────────────── */
.cmp-picker {
  display: grid; grid-template-columns: 90px 1fr 30px 1fr 30px 1fr;
  align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 4px;
  margin: 14px 0;
}
.cmp-picker label {
  font-size: 10px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cmp-titlebar {
  display: grid; grid-template-columns: 1fr 50px 1fr;
  align-items: center; gap: 14px;
  margin: 14px 0;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
}
.cmp-side-a, .cmp-side-b {
  display: flex; flex-direction: column; gap: 4px;
}
.cmp-side-a { border-left: 3px solid var(--accent); padding-left: 12px; }
.cmp-side-b { border-right: 3px solid var(--ok); padding-right: 12px; text-align: right; }
.cmp-side-name { font-size: 18px; color: var(--fg-0); font-weight: 500; }
.cmp-side-meta { font-size: 11px; color: var(--fg-2); }
.cmp-side-vs {
  text-align: center; font-family: var(--font-mono);
  color: var(--fg-2); font-size: 14px;
}
.cmp-grid-head {
  display: grid; grid-template-columns: 180px 1fr 1fr 90px;
  gap: 10px; padding: 4px 0;
  border-bottom: 1px solid var(--line); margin-bottom: 6px;
  font-size: 10px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cmp-grid-a { color: var(--accent); }
.cmp-grid-b { color: var(--ok); }
.cmp-metric-row {
  display: grid; grid-template-columns: 180px 1fr 1fr 90px;
  align-items: center; gap: 10px; padding: 4px 0;
  border-bottom: 1px solid rgba(44,44,51,0.4);
}
.cmp-metric-label { font-size: 11px; color: var(--fg-1); }
.cmp-bar-track {
  position: relative; background: var(--bg-2);
  height: 16px; border-radius: 2px;
}
.cmp-bar {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 2px;
}
.cmp-bar.a-side { background: var(--accent); opacity: 0.7; }
.cmp-bar.b-side { background: var(--ok); opacity: 0.7; }
.cmp-bar.winner { opacity: 1; }
.cmp-bar-val {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-0);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.cmp-winner { font-size: 11px; color: var(--fg-2); text-align: right; }
.cmp-winner.a-side { color: var(--accent); font-weight: 600; }
.cmp-winner.b-side { color: var(--ok); font-weight: 600; }

.cmp-bdrow {
  display: grid; grid-template-columns: 180px 1fr 1fr;
  align-items: center; gap: 10px; padding: 4px 0;
}

.cmp-topsku-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 10px;
}
.cmp-topsku-col {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px;
}
.cmp-topsku-col.a-side { border-left: 3px solid var(--accent); }
.cmp-topsku-col.b-side { border-left: 3px solid var(--ok); }
.cmp-topsku-head {
  font-size: 13px; color: var(--fg-0); font-weight: 500;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.cmp-topsku-row {
  display: grid; grid-template-columns: 28px 36px 1fr;
  align-items: center; gap: 8px; padding: 5px 0;
  cursor: pointer;
}
.cmp-topsku-row:hover { background: var(--bg-2); }
.cmp-topsku-rank { color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.cmp-topsku-thumb {
  width: 36px; height: 36px; border-radius: 2px;
  object-fit: cover; background: #f5f4f0; border: 1px solid var(--line);
}
.cmp-topsku-name { font-size: 12px; color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-topsku-meta { font-size: 10px; color: var(--fg-2); font-family: var(--font-mono); }

.verdict-line {
  padding: 3px 0;
  font-size: 12px;
  color: var(--fg-1);
}

/* ───────────────── Story view ───────────────── */
.story-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px; margin-top: 10px;
}
.story-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 16px;
  position: relative;
}
.story-card-ok    { border-left: 3px solid var(--ok); }
.story-card-warn  { border-left: 3px solid var(--warn); }
.story-card-crit  { border-left: 3px solid var(--crit); }
.story-card-accent { border-left: 3px solid var(--accent); }
.story-card-mute  { border-left: 3px solid var(--fg-2); }
.story-tag {
  font-size: 9px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.story-title {
  font-size: 14px; color: var(--fg-0); font-weight: 500;
  margin-bottom: 8px; line-height: 1.4;
}
.story-body {
  font-size: 12px; color: var(--fg-1); line-height: 1.6;
}
.story-body b { color: var(--fg-0); font-weight: 600; }
.story-evidence {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(44,44,51,0.7);
  font-family: var(--font-mono); font-size: 11px;
}
.story-stat {
  display: flex; justify-content: space-between;
  padding: 2px 0;
  color: var(--fg-2);
}
.story-stat-val { color: var(--accent); }

/* Forecasting cards */
.forecast-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-top: 10px;
}
.forecast-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px; cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
}
.forecast-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.forecast-card .fc-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.forecast-card .fc-rank { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }
.forecast-card .fc-name {
  font-size: 12px; color: var(--fg-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forecast-card .fc-mini { width: 100%; height: 60px; margin-bottom: 8px; }
.forecast-card .fc-projections {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  margin-bottom: 8px;
}
.forecast-card .fc-projections > div {
  background: var(--bg-2); border-radius: 2px; padding: 6px;
  text-align: center;
}
.forecast-card .fc-proj-label {
  font-size: 9px; color: var(--fg-2); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 2px;
}
.forecast-card .fc-proj-val {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
}
.forecast-card .fc-meta {
  font-size: 10px; color: var(--fg-2); font-family: var(--font-mono);
}

/* ───────────────── Action Center ───────────────── */
.action-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 10px; margin-top: 10px;
}
.action-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-left: 3px solid var(--fg-2);
  border-radius: 4px; padding: 14px;
}
.action-urgent { border-left-color: var(--crit); }
.action-high   { border-left-color: var(--warn); }
.action-medium { border-left-color: var(--accent); }
.action-low    { border-left-color: var(--fg-2); }
.action-verb {
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--accent); font-weight: 600;
  margin-bottom: 6px; font-family: var(--font-mono);
}
.action-urgent .action-verb { color: var(--crit); }
.action-high .action-verb   { color: var(--warn); }
.action-title {
  font-size: 13px; color: var(--fg-0); font-weight: 500;
  margin-bottom: 6px; line-height: 1.4;
}
.action-body {
  font-size: 11px; color: var(--fg-1); line-height: 1.5;
}
.action-impact {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(44,44,51,0.7);
  display: flex; justify-content: space-between;
  font-size: 10px; font-family: var(--font-mono);
}
.action-impact-label { color: var(--fg-2); letter-spacing: 0.06em; }
.action-impact-val { color: var(--accent); font-weight: 600; }

/* ───────────────── Healthboard ───────────────── */
.healthboard-grand-wrap {
  display: flex; justify-content: center;
  padding: 20px;
}
.health-gauge { width: 340px; }

.subscore-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.subscore-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
  text-align: center;
}
.subscore-name {
  font-size: 11px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.subscore-value {
  font-family: var(--font-mono); font-size: 30px; line-height: 1;
  margin-bottom: 2px;
}
.subscore-label {
  font-size: 9px; letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.subscore-track {
  width: 100%; height: 6px; background: var(--bg-2);
  border-radius: 3px; overflow: hidden;
  margin-bottom: 6px;
}
.subscore-fill { height: 100%; }
.subscore-weight { font-size: 10px; color: var(--fg-2); font-family: var(--font-mono); }

.health-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px; margin-top: 10px;
}
.health-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
}
.hc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.hc-name {
  font-size: 13px; color: var(--fg-0); font-weight: 500;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-score {
  font-family: var(--font-mono); font-size: 24px; line-height: 1;
}
.hc-meta {
  font-size: 11px; color: var(--fg-2);
  margin-bottom: 12px; font-family: var(--font-mono);
}
.hc-subs { display: flex; flex-direction: column; gap: 3px; }
.hc-sub-row {
  display: grid; grid-template-columns: 100px 1fr 30px;
  align-items: center; gap: 6px;
  font-size: 10px; font-family: var(--font-mono);
}
.hc-sub-name { color: var(--fg-1); }
.hc-sub-track { background: var(--bg-2); height: 6px; border-radius: 2px; overflow: hidden; }
.hc-sub-fill { height: 100%; }
.hc-sub-val { color: var(--fg-1); text-align: right; }

.drag-list {
  display: flex; flex-direction: column; gap: 6px;
}
.drag-row {
  display: grid; grid-template-columns: 160px 40px 1fr;
  align-items: center; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(44,44,51,0.4);
  font-size: 11px;
}
.drag-score-name { font-weight: 600; }
.drag-score-val { font-family: var(--font-mono); font-size: 18px; text-align: center; }
.drag-issue { color: var(--fg-1); }

/* ───────────────── DNA ───────────────── */
.dna-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-top: 10px;
}
.dna-card {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 4px; padding: 14px;
}
.dna-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.dna-name {
  font-size: 13px; color: var(--fg-0); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.dna-meta {
  font-size: 10px; color: var(--fg-2);
  font-family: var(--font-mono);
}
.dna-svg { width: 100%; height: auto; display: block; }

/* Cohort granularity selector */
.gran-selector {
  display: flex; gap: 4px;
  margin-left: auto;
}
.gran-selector .pill {
  font-size: 10px; padding: 5px 10px;
  flex: none;
}

/* Filter status banner */
.filter-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 0;
  background: rgba(212, 163, 115, 0.12);
  border-bottom: 1px solid var(--accent);
  font-size: 11px; color: var(--fg-0);
  position: relative; z-index: var(--z-sticky);
}
.filter-banner[data-ignored="true"] {
  background: rgba(110, 110, 118, 0.18);
  border-bottom-color: var(--fg-2);
  color: var(--fg-1);
}
.filter-banner .fb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.filter-banner[data-ignored="true"] .fb-dot {
  background: var(--fg-2);
}
.filter-banner .fb-text {
  flex: 1;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.filter-banner .fb-text b { color: var(--accent); font-weight: 600; }
.filter-banner[data-ignored="true"] .fb-text b { color: var(--fg-0); }
.filter-banner .fb-clear {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 3px 10px; border-radius: 3px;
  font-size: 10px; font-family: var(--font-mono);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.filter-banner .fb-clear:hover {
  background: var(--accent); color: var(--bg-0);
}
.filter-banner[data-ignored="true"] .fb-clear {
  border-color: var(--fg-2); color: var(--fg-2);
}