/* ═══════════════════════════════════════════════════════════════
   BETSYNQ DESIGN SYSTEM — "TERMINAL"
   Premium fintech intelligence. Data-first. Dark-native.
   Reference: TradingView · Bloomberg Terminal · Stripe
   Load AFTER styles.css. Additive — remaps legacy tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. FOUNDATION ─────────────────────────────────────────── */
:root {
  /* Canvas ramp — cool neutral, never teal, never pure black */
  --ds-bg:          #0B0E13;
  --ds-surface:     #12161D;
  --ds-surface-2:   #171C25;
  --ds-surface-3:   #1E242F;

  /* Hairlines — solid, sharp. No fuzzy rgba borders. */
  --ds-line:        #1F2733;
  --ds-line-strong: #2B3543;
  --ds-line-accent: rgba(45,127,249,.30);

  /* Text ramp — softened white reads more premium than #fff */
  --ds-text:   #E8EDF5;
  --ds-text-2: #94A3B8;
  --ds-text-3: #64748B;
  --ds-text-4: #475569;

  /* Single accent. One colour carries the brand. */
  --ds-accent:     #2D7FF9;
  --ds-accent-hi:  #5B9DFF;
  --ds-accent-lo:  #1F6BDB;
  --ds-accent-dim: rgba(45,127,249,.12);
  --ds-accent-dim2:rgba(45,127,249,.06);

  /* Semantic — profit/loss. Muted, not gaming-neon. */
  --ds-pos:      #10B981;
  --ds-pos-dim:  rgba(16,185,129,.12);
  --ds-neg:      #F43F5E;
  --ds-neg-dim:  rgba(244,63,94,.12);
  --ds-warn:     #F59E0B;
  --ds-warn-dim: rgba(245,158,11,.12);
  --ds-neutral:  #64748B;

  /* Tier */
  --ds-free:    #10B981;
  --ds-vip:     #2D7FF9;
  --ds-premium: #F59E0B;

  /* Typography */
  --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono',
             'Roboto Mono', Menlo, Consolas, monospace;

  --ds-t-display: 2.75rem;
  --ds-t-h1:      2rem;
  --ds-t-h2:      1.5rem;
  --ds-t-h3:      1.125rem;
  --ds-t-body:    0.9375rem;
  --ds-t-sm:      0.8125rem;
  --ds-t-xs:      0.6875rem;

  /* Spacing — 4px base */
  --ds-1: 4px;   --ds-2: 8px;   --ds-3: 12px;  --ds-4: 16px;
  --ds-5: 24px;  --ds-6: 32px;  --ds-7: 48px;  --ds-8: 64px;  --ds-9: 96px;

  /* Radius — tight. Fintech is not rounded. */
  --ds-r-xs:   3px;
  --ds-r-sm:   5px;
  --ds-r:      7px;
  --ds-r-lg:   10px;
  --ds-r-pill: 999px;

  /* Motion */
  --ds-ease: cubic-bezier(.2,.8,.2,1);
  --ds-fast: 120ms;
  --ds-base: 180ms;
  --ds-slow: 300ms;

  /* Layout */
  --ds-maxw: 1320px;
  --ds-gutter: 24px;

  /* ── LEGACY REMAP — re-skins the existing 116KB stylesheet ── */
  --bg:            var(--ds-bg);
  --bg-panel:      var(--ds-surface);
  --panel:         var(--ds-surface);
  --text:          var(--ds-text);
  --text-light:    var(--ds-text);
  --text-muted:    var(--ds-text-2);
  --muted:         var(--ds-text-2);
  --border:        var(--ds-line);
  --border-dark:   var(--ds-line-strong);
  --hover-bg:      rgba(255,255,255,.045);
  --disabled-bg:   var(--ds-surface-2);
  --disabled-text: var(--ds-text-4);
  --green:         var(--ds-pos);
  --red:           var(--ds-neg);
  --tag-free:      var(--ds-free);
  --tag-vip:       var(--ds-vip);
  --tag-premium:   var(--ds-premium);
  --card-radius:   var(--ds-r-lg);
  --btn-radius:    var(--ds-r-sm);
  --radius-sm:     var(--ds-r-xs);
  --radius-md:     var(--ds-r);
  --radius-lg:     var(--ds-r-lg);
}

/* ── 2. RESET & BASE ───────────────────────────────────────── */
body {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','ss01';
}

/* Numerals never jitter. This single rule does more for the
   "professional terminal" feel than any other. */
.ds-num, .ds-kpi-value, .ds-table td, .ds-odds, .ds-edge,
.ds-metric, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Kill residual glow/shadow anywhere in the DS scope */
.ds-scope *, .ds-scope *::before, .ds-scope *::after { box-shadow: none !important; }

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────── */
.ds-display {
  font-size: clamp(2rem, 5vw, var(--ds-t-display));
  line-height: 1.04; letter-spacing: -.033em; font-weight: 680;
  color: var(--ds-text); margin: 0;
}
.ds-h1 { font-size: clamp(1.6rem,3.4vw,var(--ds-t-h1)); line-height:1.14; letter-spacing:-.024em; font-weight:660; margin:0; }
.ds-h2 { font-size: var(--ds-t-h2); line-height:1.22; letter-spacing:-.02em; font-weight:640; margin:0; }
.ds-h3 { font-size: var(--ds-t-h3); line-height:1.34; letter-spacing:-.012em; font-weight:620; margin:0; }
.ds-body  { font-size: var(--ds-t-body); line-height:1.62; color: var(--ds-text-2); margin:0; }
.ds-sm    { font-size: var(--ds-t-sm);   line-height:1.5;  color: var(--ds-text-2); }
.ds-label {
  font-size: var(--ds-t-xs); line-height:1.3; font-weight:600;
  letter-spacing:.075em; text-transform:uppercase; color: var(--ds-text-3);
}
.ds-mono { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; }
.ds-pos { color: var(--ds-pos); } .ds-neg { color: var(--ds-neg); }
.ds-dim { color: var(--ds-text-3); }

/* ── 4. LAYOUT PRIMITIVES ──────────────────────────────────── */
.ds-wrap { max-width: var(--ds-maxw); margin-inline:auto; padding-inline: var(--ds-gutter); }
.ds-stack > * + * { margin-top: var(--ds-4); }
.ds-row { display:flex; align-items:center; gap: var(--ds-3); }
.ds-between { display:flex; align-items:center; justify-content:space-between; gap: var(--ds-4); }
.ds-grid { display:grid; gap: var(--ds-4); }

/* Section header: title + meta, hairline beneath. Replaces boxed cards. */
.ds-section-head {
  display:flex; align-items:baseline; justify-content:space-between;
  gap: var(--ds-4); padding-bottom: var(--ds-3);
  border-bottom: 1px solid var(--ds-line); margin-bottom: var(--ds-5);
}
.ds-section-head .ds-meta { font-size:var(--ds-t-sm); color:var(--ds-text-3); font-family:var(--ds-mono); }

/* Surface — used sparingly. Not everything is a card. */
.ds-surface {
  background: var(--ds-surface); border:1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
}
.ds-surface-flush { background: var(--ds-surface); border-radius: var(--ds-r-lg); }
.ds-divider { height:1px; background: var(--ds-line); border:0; margin: var(--ds-5) 0; }

/* ── 5. KPI STRIP — dashboard centerpiece ──────────────────── */
/* Hairline-separated metrics, NOT a row of boxes. */
.ds-kpis {
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  background: var(--ds-surface); border:1px solid var(--ds-line);
  border-radius: var(--ds-r-lg); overflow:hidden;
}
.ds-kpis--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ds-kpis--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.ds-kpi {
  padding: var(--ds-5) var(--ds-4); position:relative; min-width:0;
  border-right:1px solid var(--ds-line); border-bottom:1px solid var(--ds-line);
}
/* Sista kolumnen i varje rad, och hela sista raden, saknar kantlinje. */
.ds-kpis > .ds-kpi:nth-child(4n) { border-right:0; }
.ds-kpis--3 > .ds-kpi:nth-child(3n) { border-right:0; }
.ds-kpis--5 > .ds-kpi:nth-child(5n) { border-right:0; }
.ds-kpis > .ds-kpi:nth-last-child(-n+4):nth-child(4n+1),
.ds-kpis > .ds-kpi:nth-last-child(-n+4):nth-child(4n+1) ~ .ds-kpi { border-bottom:0; }
.ds-kpi-label { font-size:var(--ds-t-xs); font-weight:600; letter-spacing:.075em;
  text-transform:uppercase; color:var(--ds-text-3); display:flex; align-items:center; gap:6px; }
.ds-kpi-value {
  font-family: var(--ds-mono); font-size:clamp(1.1875rem, 1.9vw, 1.5rem); font-weight:600;
  letter-spacing:-.04em; color:var(--ds-text); margin-top:10px; line-height:1.05;
  font-variant-numeric: tabular-nums; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ds-kpi-value.is-pos { color: var(--ds-pos); }
.ds-kpi-value.is-neg { color: var(--ds-neg); }
.ds-kpi-delta { margin-top:8px; font-size:var(--ds-t-xs); font-family:var(--ds-mono);
  color:var(--ds-text-4); line-height:1.45; letter-spacing:-.01em; }
.ds-kpi-delta.is-pos { color:var(--ds-pos); } .ds-kpi-delta.is-neg { color:var(--ds-neg); }
.ds-kpi-spark { margin-top:12px; height:28px; display:block; width:100%; }

/* Value-change tick — the Bloomberg pulse */
@keyframes ds-tick-pos { 0%{background:var(--ds-pos-dim)} 100%{background:transparent} }
@keyframes ds-tick-neg { 0%{background:var(--ds-neg-dim)} 100%{background:transparent} }
.ds-tick-up   { animation: ds-tick-pos 700ms var(--ds-ease); }
.ds-tick-down { animation: ds-tick-neg 700ms var(--ds-ease); }

/* ── 6. BUTTONS ────────────────────────────────────────────── */
.ds-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ds-font); font-size:var(--ds-t-sm); font-weight:590;
  letter-spacing:-.005em; padding:9px 16px; border-radius:var(--ds-r-sm);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition: background var(--ds-fast) var(--ds-ease),
              border-color var(--ds-fast) var(--ds-ease),
              color var(--ds-fast) var(--ds-ease);
  white-space:nowrap;
}
.ds-btn--primary { background:var(--ds-accent); color:#fff; }
.ds-btn--primary:hover { background:var(--ds-accent-hi); }
.ds-btn--ghost { background:transparent; color:var(--ds-text); border-color:var(--ds-line-strong); }
.ds-btn--ghost:hover { background:var(--ds-surface-2); border-color:var(--ds-text-4); }
.ds-btn--quiet { background:transparent; color:var(--ds-text-2); padding:6px 10px; }
.ds-btn--quiet:hover { color:var(--ds-text); background:var(--ds-surface-2); }
.ds-btn--sm { padding:6px 11px; font-size:var(--ds-t-xs); }
.ds-btn:focus-visible { outline:2px solid var(--ds-accent); outline-offset:2px; }

/* Text-arrow link — "VIEW ANALYSIS →" */
.ds-link-arrow {
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:var(--ds-t-sm); font-weight:600; color:var(--ds-accent);
  letter-spacing:.01em; transition:gap var(--ds-fast) var(--ds-ease);
}
.ds-link-arrow:hover { gap:10px; color:var(--ds-accent-hi); }

/* ── 7. BADGES & PILLS ─────────────────────────────────────── */
.ds-badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  border-radius:var(--ds-r-xs); font-size:var(--ds-t-xs); font-weight:640;
  letter-spacing:.04em; text-transform:uppercase; font-family:var(--ds-font);
  border:1px solid transparent;
}
.ds-badge--pos     { background:var(--ds-pos-dim);   color:var(--ds-pos);   border-color:rgba(16,185,129,.24); }
.ds-badge--neg     { background:var(--ds-neg-dim);   color:var(--ds-neg);   border-color:rgba(244,63,94,.24); }
.ds-badge--warn    { background:var(--ds-warn-dim);  color:var(--ds-warn);  border-color:rgba(245,158,11,.24); }
.ds-badge--accent  { background:var(--ds-accent-dim);color:var(--ds-accent-hi); border-color:var(--ds-line-accent); }
.ds-badge--neutral { background:var(--ds-surface-2); color:var(--ds-text-2); border-color:var(--ds-line); }

/* Live pulse dot */
.ds-live { display:inline-flex; align-items:center; gap:6px; font-size:var(--ds-t-xs);
  font-weight:640; letter-spacing:.06em; text-transform:uppercase; color:var(--ds-neg); }
.ds-dot { width:6px; height:6px; border-radius:50%; background:currentColor; position:relative; flex:none; }
.ds-dot::after {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid currentColor; opacity:0; animation: ds-ping 2s var(--ds-ease) infinite;
}
@keyframes ds-ping { 0%{transform:scale(.6);opacity:.9} 70%,100%{transform:scale(1.5);opacity:0} }
.ds-dot--pos { background:var(--ds-pos); } .ds-dot--accent { background:var(--ds-accent); }

/* Edge magnitude — colour encodes size */
.ds-edge {
  font-family:var(--ds-mono); font-weight:650; font-size:var(--ds-t-sm);
  padding:3px 8px; border-radius:var(--ds-r-xs); display:inline-block;
  font-variant-numeric:tabular-nums;
}
.ds-edge--s1 { background:var(--ds-surface-2);  color:var(--ds-text-2); }
.ds-edge--s2 { background:var(--ds-accent-dim); color:var(--ds-accent-hi); }
.ds-edge--s3 { background:var(--ds-pos-dim);    color:var(--ds-pos); }
.ds-edge--s4 { background:rgba(245,158,11,.14); color:var(--ds-warn); }

/* ── 8. DATA TABLE ─────────────────────────────────────────── */
.ds-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ds-table { width:100%; border-collapse:collapse; font-size:var(--ds-t-sm); }
.ds-table thead th {
  position:sticky; top:0; z-index:2; background:var(--ds-bg);
  text-align:left; padding:10px var(--ds-3); white-space:nowrap;
  font-size:var(--ds-t-xs); font-weight:640; letter-spacing:.075em;
  text-transform:uppercase; color:var(--ds-text-3);
  border-bottom:1px solid var(--ds-line-strong);
}
.ds-table tbody td {
  padding:13px var(--ds-3); border-bottom:1px solid var(--ds-line);
  color:var(--ds-text-2); vertical-align:middle;
}
.ds-table tbody td:first-child { color:var(--ds-text); font-weight:520; }
.ds-table .num { font-family:var(--ds-mono); text-align:right; font-variant-numeric:tabular-nums; color:var(--ds-text); }
.ds-table tbody tr { transition:background var(--ds-fast) var(--ds-ease); }
.ds-table tbody tr:hover { background:var(--ds-surface); }
.ds-table tbody tr.is-clickable { cursor:pointer; }
.ds-table tbody tr.is-clickable:hover td:first-child { color:var(--ds-accent-hi); }
.ds-table tbody tr:last-child td { border-bottom:0; }

/* ── 9. EV+ OPPORTUNITY ────────────────────────────────────── */
.ds-opps { display:flex; flex-direction:column; }
.ds-opp {
  display:grid; align-items:center; gap:var(--ds-4);
  grid-template-columns: minmax(0,2.3fr) minmax(0,1.5fr) auto;
  padding:var(--ds-4) var(--ds-5);
  border-bottom:1px solid var(--ds-line);
  transition:background var(--ds-fast) var(--ds-ease);
}
.ds-opp:hover { background:var(--ds-surface); }
.ds-opp:last-child { border-bottom:0; }

.ds-opp-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.ds-opp-league { font-size:var(--ds-t-xs); color:var(--ds-text-3); letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.ds-opp-time { font-size:var(--ds-t-xs); color:var(--ds-text-4); font-family:var(--ds-mono); }
.ds-opp-match { font-size:var(--ds-t-body); font-weight:600; color:var(--ds-text); letter-spacing:-.012em; line-height:1.35; }
.ds-opp-market { margin-top:5px; font-size:var(--ds-t-sm); color:var(--ds-text-2); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ds-opp-book { color:var(--ds-text-3); display:inline-flex; align-items:center; gap:5px; }
.ds-opp-book::before { content:''; width:3px; height:3px; border-radius:50%; background:var(--ds-text-4); }

/* Odds comparison — available vs fair, side by side */
.ds-odds-cmp { display:flex; align-items:stretch; gap:var(--ds-4); }
.ds-odds-cell { display:flex; flex-direction:column; gap:4px; min-width:64px; }
.ds-odds-cell .ds-label { font-size:10px; letter-spacing:.08em; }
.ds-odds { font-family:var(--ds-mono); font-size:1.0625rem; font-weight:640;
  color:var(--ds-text); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.ds-odds--fair { color:var(--ds-text-3); font-weight:520; }
.ds-odds-sep { width:1px; background:var(--ds-line); flex:none; }

.ds-opp-right { display:flex; align-items:center; gap:var(--ds-5); justify-content:flex-end; }
.ds-opp-metrics { display:flex; gap:var(--ds-5); }
.ds-metric { display:flex; flex-direction:column; gap:4px; align-items:flex-end; min-width:52px; }
.ds-metric .ds-label { font-size:10px; letter-spacing:.08em; }
.ds-metric-v { font-family:var(--ds-mono); font-size:var(--ds-t-body); font-weight:620;
  color:var(--ds-text); font-variant-numeric:tabular-nums; }
.ds-metric-v.is-pos { color:var(--ds-pos); } .ds-metric-v.is-neg { color:var(--ds-neg); }

/* ── 10. "WHY IS THIS +EV?" BREAKDOWN ──────────────────────── */
.ds-why { display:flex; flex-direction:column; gap:0; }
.ds-why-row {
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--ds-4);
  padding:13px 0; border-bottom:1px solid var(--ds-line);
}
.ds-why-row:last-child { border-bottom:0; }
.ds-why-k { font-size:var(--ds-t-sm); color:var(--ds-text-2); }
.ds-why-k small { display:block; color:var(--ds-text-4); font-size:var(--ds-t-xs); margin-top:3px; line-height:1.4; }
.ds-why-v { font-family:var(--ds-mono); font-size:var(--ds-t-body); font-weight:620;
  color:var(--ds-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ds-why-row.is-result { border-top:1px solid var(--ds-line-strong); margin-top:4px; padding-top:16px; }
.ds-why-row.is-result .ds-why-k { color:var(--ds-text); font-weight:640; font-size:var(--ds-t-body); }
.ds-why-row.is-result .ds-why-v { font-size:1.25rem; color:var(--ds-pos); }

/* Probability comparison bar */
.ds-probbar { margin:var(--ds-4) 0; }
.ds-probbar-track { height:6px; border-radius:3px; background:var(--ds-surface-3); position:relative; overflow:hidden; }
.ds-probbar-fair { position:absolute; inset-block:0; left:0; background:var(--ds-accent); border-radius:3px; }
.ds-probbar-impl { position:absolute; inset-block:0; left:0; background:var(--ds-text-4); border-radius:3px; }
.ds-probbar-legend { display:flex; gap:var(--ds-4); margin-top:9px; font-size:var(--ds-t-xs); color:var(--ds-text-3); }
.ds-probbar-legend i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px; }

/* Formula display */
.ds-formula {
  font-family:var(--ds-mono); font-size:var(--ds-t-sm); color:var(--ds-text-2);
  background:var(--ds-bg); border:1px solid var(--ds-line); border-radius:var(--ds-r-sm);
  padding:var(--ds-3) var(--ds-4); line-height:1.7; overflow-x:auto; white-space:nowrap;
}
.ds-formula b { color:var(--ds-accent-hi); font-weight:620; }
.ds-formula .r { color:var(--ds-pos); font-weight:640; }

/* ── 11. MODAL ─────────────────────────────────────────────── */
.ds-modal-overlay {
  position:fixed; inset:0; z-index:9000; background:rgba(6,9,13,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:var(--ds-4);
  opacity:0; visibility:hidden; transition:opacity var(--ds-base) var(--ds-ease), visibility var(--ds-base);
}
.ds-modal-overlay.is-open { opacity:1; visibility:visible; }
.ds-modal {
  background:var(--ds-surface); border:1px solid var(--ds-line-strong);
  border-radius:var(--ds-r-lg); width:100%; max-width:560px;
  max-height:88vh; overflow-y:auto; transform:translateY(8px) scale(.99);
  transition:transform var(--ds-base) var(--ds-ease);
}
.ds-modal-overlay.is-open .ds-modal { transform:none; }
.ds-modal-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ds-4);
  padding:var(--ds-5); border-bottom:1px solid var(--ds-line);
  position:sticky; top:0; background:var(--ds-surface); z-index:1;
}
.ds-modal-body { padding:var(--ds-5); }
.ds-modal-foot { padding:var(--ds-4) var(--ds-5); border-top:1px solid var(--ds-line);
  display:flex; gap:var(--ds-3); justify-content:flex-end; }
.ds-modal-x {
  background:transparent; border:0; color:var(--ds-text-3); cursor:pointer;
  padding:4px; line-height:0; border-radius:var(--ds-r-xs); flex:none;
  transition:color var(--ds-fast) var(--ds-ease);
}
.ds-modal-x:hover { color:var(--ds-text); }

/* ── 12. SYSTEM INTELLIGENCE STRIP ─────────────────────────── */
.ds-sysbar {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px; background:var(--ds-line);
  border:1px solid var(--ds-line); border-radius:var(--ds-r-lg); overflow:hidden;
}
.ds-sysbar-item { background:var(--ds-bg); padding:var(--ds-4) var(--ds-5); }
.ds-sysbar-v {
  font-family:var(--ds-mono); font-size:1.375rem; font-weight:620; color:var(--ds-text);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;
}
.ds-sysbar-l { margin-top:7px; font-size:var(--ds-t-xs); color:var(--ds-text-3);
  letter-spacing:.06em; text-transform:uppercase; font-weight:600; }

/* Pipeline: Scanning → Detected → Calculated → Published */
.ds-pipeline { display:flex; align-items:center; gap:var(--ds-2); flex-wrap:wrap; }
.ds-pipe-step {
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border:1px solid var(--ds-line); border-radius:var(--ds-r-pill);
  font-size:var(--ds-t-xs); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ds-text-3); background:var(--ds-surface);
  transition:color var(--ds-base) var(--ds-ease), border-color var(--ds-base) var(--ds-ease);
}
.ds-pipe-step.is-active { color:var(--ds-accent-hi); border-color:var(--ds-line-accent); background:var(--ds-accent-dim2); }
.ds-pipe-step.is-done { color:var(--ds-pos); border-color:rgba(16,185,129,.24); }
.ds-pipe-arrow { color:var(--ds-text-4); font-size:12px; }

/* ── 13. CHART ─────────────────────────────────────────────── */
.ds-chart { position:relative; width:100%; }
.ds-chart svg { display:block; width:100%; overflow:visible; }
.ds-chart-line { fill:none; stroke:var(--ds-accent); stroke-width:1.75;
  stroke-linejoin:round; stroke-linecap:round; }
.ds-chart-area { fill:url(#dsGrad); }
.ds-chart-grid { stroke:var(--ds-line); stroke-width:1; shape-rendering:crispEdges; }
.ds-chart-zero { stroke:var(--ds-line-strong); stroke-width:1; stroke-dasharray:3 3; }
.ds-chart-axis { fill:var(--ds-text-4); font-size:10px; font-family:var(--ds-mono); }
.ds-chart-dot { fill:var(--ds-accent); stroke:var(--ds-bg); stroke-width:2; }
.ds-chart-cross { stroke:var(--ds-text-4); stroke-width:1; stroke-dasharray:2 3; }
.ds-chart-tip {
  position:absolute; pointer-events:none; background:var(--ds-surface-3);
  border:1px solid var(--ds-line-strong); border-radius:var(--ds-r-sm);
  padding:8px 11px; font-size:var(--ds-t-xs); font-family:var(--ds-mono);
  color:var(--ds-text); white-space:nowrap; opacity:0; transform:translate(-50%,-130%);
  transition:opacity var(--ds-fast); z-index:5;
}
.ds-chart-tip.is-on { opacity:1; }
.ds-spark-line { fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }

/* ── 14. FORMS ─────────────────────────────────────────────── */
.ds-field { display:flex; flex-direction:column; gap:7px; }
.ds-input, .ds-select, .ds-textarea {
  width:100%; background:var(--ds-bg); border:1px solid var(--ds-line-strong);
  border-radius:var(--ds-r-sm); padding:10px 13px; color:var(--ds-text);
  font-family:var(--ds-font); font-size:var(--ds-t-body); outline:none;
  transition:border-color var(--ds-fast) var(--ds-ease);
}
.ds-input::placeholder, .ds-textarea::placeholder { color:var(--ds-text-4); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color:var(--ds-accent); }
.ds-textarea { resize:vertical; min-height:96px; line-height:1.6; }

/* Segmented control — replaces chunky tab buttons */
.ds-seg { display:inline-flex; gap:2px; padding:3px; background:var(--ds-surface);
  border:1px solid var(--ds-line); border-radius:var(--ds-r); }
.ds-seg button {
  border:0; background:transparent; color:var(--ds-text-3); cursor:pointer;
  padding:6px 14px; border-radius:var(--ds-r-xs); font-family:var(--ds-font);
  font-size:var(--ds-t-sm); font-weight:580; white-space:nowrap;
  transition:background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}
.ds-seg button:hover { color:var(--ds-text); }
.ds-seg button.is-active { background:var(--ds-surface-3); color:var(--ds-text); }

/* ── 15. SKELETON — never show a zero state ────────────────── */
.ds-skel {
  background:linear-gradient(90deg,var(--ds-surface) 25%,var(--ds-surface-3) 37%,var(--ds-surface) 63%);
  background-size:400% 100%; animation:ds-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--ds-r-xs);
}
@keyframes ds-shimmer { 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.ds-skel--text { height:12px; margin:6px 0; } .ds-skel--line { height:1em; }
.ds-skel--kpi { height:28px; width:72%; margin-top:10px; }

/* ── 16. TOAST ─────────────────────────────────────────────── */
.ds-toasts { position:fixed; bottom:22px; left:22px; z-index:9500;
  display:flex; flex-direction:column; gap:var(--ds-2); pointer-events:none; }
.ds-toast {
  pointer-events:auto; display:flex; align-items:center; gap:11px;
  background:var(--ds-surface-3); border:1px solid var(--ds-line-strong);
  border-left:2px solid var(--ds-accent); border-radius:var(--ds-r-sm);
  padding:12px 16px; font-size:var(--ds-t-sm); color:var(--ds-text);
  animation:ds-toast-in var(--ds-slow) var(--ds-ease); max-width:340px;
}
.ds-toast--pos { border-left-color:var(--ds-pos); }
.ds-toast--neg { border-left-color:var(--ds-neg); }
@keyframes ds-toast-in { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:none} }

/* ── 17. EMPTY / LOADING STATE ─────────────────────────────── */
.ds-empty { padding:var(--ds-8) var(--ds-5); text-align:center; }
.ds-empty-t { font-size:var(--ds-t-body); color:var(--ds-text-2); font-weight:560; }
.ds-empty-s { margin-top:7px; font-size:var(--ds-t-sm); color:var(--ds-text-4); }

/* ── 18. MOBILE — designed, not shrunk ─────────────────────── */
@media (max-width: 860px) {
  :root { --ds-gutter:16px; }

  /* KPIs: 2-up grid, tighter, no wasted vertical space */
  .ds-kpis, .ds-kpis--3, .ds-kpis--5 { grid-template-columns:1fr 1fr; }
  .ds-kpi { padding:var(--ds-4); }
  .ds-kpi-value { font-size:1.1875rem; margin-top:7px; }
  .ds-kpis > .ds-kpi { border-right:1px solid var(--ds-line); border-bottom:1px solid var(--ds-line); }
  .ds-kpis > .ds-kpi:nth-child(2n) { border-right:0; }
  .ds-kpis > .ds-kpi:nth-last-child(-n+2):nth-child(odd),
  .ds-kpis > .ds-kpi:nth-last-child(-n+2):nth-child(odd) ~ .ds-kpi { border-bottom:0; }

  /* Opportunity becomes a vertical brief, odds on one line */
  .ds-opp { grid-template-columns:1fr; gap:var(--ds-3); padding:var(--ds-4) var(--ds-gutter); }
  .ds-opp-right { justify-content:space-between; gap:var(--ds-3); }
  .ds-opp-metrics { gap:var(--ds-4); flex:1; justify-content:space-between; }
  .ds-metric { align-items:flex-start; min-width:0; }
  .ds-odds-cmp { justify-content:space-between; }
  .ds-opp .ds-link-arrow { width:100%; justify-content:center;
    padding:10px; border:1px solid var(--ds-line-strong); border-radius:var(--ds-r-sm); }

  .ds-sysbar { grid-template-columns:1fr 1fr; }
  .ds-sysbar-v { font-size:1.125rem; }
  .ds-modal { max-height:92vh; border-radius:var(--ds-r-lg) var(--ds-r-lg) 0 0; align-self:flex-end; }
  .ds-modal-overlay { align-items:flex-end; padding:0; }
  .ds-toasts { left:12px; right:12px; bottom:12px; }
  .ds-toast { max-width:none; }
  .ds-seg { width:100%; overflow-x:auto; }
  .ds-table thead th, .ds-table tbody td { padding:11px var(--ds-2); }
}
@media (max-width:420px) { .ds-kpi-value { font-size:1.0625rem; } }

/* ── 19. ACCESSIBILITY ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ds-skel { animation:none; }
  .ds-dot::after { animation:none; }
  .ds-tick-up, .ds-tick-down { animation:none; }
  .ds-modal, .ds-btn, .ds-link-arrow, .ds-opp, .ds-table tbody tr { transition:none; }
}
.ds-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/* ── 20. SIDOMENY — linjeikoner ────────────────────────────── */
svg.dash-nav-icon { flex:none; opacity:.62; transition:opacity var(--ds-fast) var(--ds-ease); }
.dash-nav-item:hover svg.dash-nav-icon,
.dash-nav-item.active svg.dash-nav-icon { opacity:1; }
.dash-nav-item.active { color:var(--ds-text); background:var(--ds-surface-2); }