/* ============================================================
   ROI Calculator — app.css
   Design-system migration: green-forward dark theme.
   All tokens inlined — no @import required.
   ============================================================ */

/* ── 1. Base design tokens ────────────────────────────────────────────────── */
:root {
  /* ===== Brand green scale ===== */
  --green-50:  #E6FBF1;
  --green-100: #C2F6DE;
  --green-200: #8FEFC4;
  --green-300: #5BE8AA;
  --green-400: #34E5A0;   /* primary accent */
  --green-500: #12CB86;
  --green-600: #0BA56C;
  --green-700: #0A8055;
  --green-800: #0A5C40;

  /* ===== Accent helpers ===== */
  --teal-400: #22D3C5;
  --lime-400: #B6F569;

  /* ===== Semantic ===== */
  --gain:      #34E5A0;
  --gain-soft: rgba(52, 229, 160, 0.14);
  --loss:      #FF5C72;
  --loss-soft: rgba(255, 92, 114, 0.14);
  --warn:      #FFC44D;
  --warn-soft: rgba(255, 196, 77, 0.14);
  --info:      #5BA8FF;

  /* ===== Gradients ===== */
  --grad-brand:      linear-gradient(135deg, #5BE8AA 0%, #34E5A0 45%, #12CB86 100%);
  --grad-brand-deep: linear-gradient(140deg, #34E5A0 0%, #0BA56C 100%);
  --grad-glow:       radial-gradient(120% 120% at 50% 0%, rgba(52,229,160,0.20) 0%, rgba(52,229,160,0) 60%);

  /* ===== Radii ===== */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ===== Spacing (4pt) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ===== Type families ===== */
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ===== Type scale ===== */
  --t-display: 48px;
  --t-h1:      36px;
  --t-h2:      28px;
  --t-h3:      22px;
  --t-lg:      18px;
  --t-base:    16px;
  --t-sm:      14px;
  --t-xs:      12px;
  --t-2xs:     11px;

  /* ===== Motion ===== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;

  /* ===== Chain tints ===== */
  --chain-eth:  #8a92b2;
  --chain-arb:  #28a0f0;
  --chain-base: #0052ff;
  --chain-avax: #e84142;
}

/* ── 2. Dark theme surfaces, text, borders, shadows ──────────────────────── */
:root,
[data-theme="dark"] {
  --bg:          #0A0D0C;
  --bg-elev:     #0F1412;
  --surface:     #141A18;
  --surface-2:   #1B2420;
  --surface-3:   #243029;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --border-accent: rgba(52, 229, 160, 0.35);

  --text:          #ECF1EF;
  --text-muted:    #8E9D97;
  --text-dim:      #5C6B65;
  --text-on-accent: #06231A;

  --glass:   rgba(20, 26, 24, 0.72);
  --overlay: rgba(6, 9, 8, 0.66);

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 8px 30px rgba(52, 229, 160, 0.28);
}

/* ── 3. Legacy aliases — keep old token names wired to new design tokens ──── */
:root {
  --accent:         var(--green-400);
  --bg-canvas:      var(--bg);
  --bg-surface:     var(--surface);
  --bg-surface-2:   var(--surface-2);
  --bg-secondary:   var(--bg-elev);
  --border-default: var(--border);
  --border-subtle:  var(--border);
  --text-primary:   var(--text);
  --text-secondary: var(--text-muted);
  --text-tertiary:  var(--text-dim);
  --font-sans:      var(--font-body);
  --success:        var(--gain);
  --danger:         var(--loss);
  --warning:        var(--warn);
  --success-bg:     var(--gain-soft);
  --danger-bg:      var(--loss-soft);
  --warning-bg:     var(--warn-soft);
  --info-bg:        rgba(91, 168, 255, 0.14);
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-pill: var(--r-pill);
  --space-1: var(--sp-1);
  --space-2: var(--sp-2);
  --space-3: var(--sp-3);
  --space-4: var(--sp-4);
  --space-5: var(--sp-5);
  --space-6: var(--sp-6);
  --space-8: var(--sp-8);
  --text-xs:   var(--t-xs);
  --text-sm:   var(--t-xs);
  --text-base: var(--t-sm);
  --text-md:   var(--t-base);
  --text-lg:   var(--t-lg);
  --text-xl:   var(--t-h3);
  --text-2xl:  var(--t-h2);
  --text-3xl:  var(--t-h1);

  /* Elevation aliases — old app.css used these in .surface / .card */
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --elev-2: var(--shadow-md);

  /* Bootstrap overrides — use green identity */
  --bs-primary:         var(--green-400);
  --bs-primary-rgb:     52, 229, 160;
  --bs-body-bg:         var(--bg);
  --bs-body-color:      var(--text);
  --bs-border-color:    var(--border);
  --bs-secondary-color: var(--text-muted);
  --bs-success:         var(--gain);
  --bs-success-rgb:     52, 229, 160;
  --bs-danger:          var(--loss);
  --bs-danger-rgb:      255, 92, 114;
  --bs-warning:         var(--warn);
  --bs-warning-rgb:     255, 196, 77;
  --bs-info:            var(--info);
  --bs-info-rgb:        91, 168, 255;
}

/* ── 4. Body & base reset ─────────────────────────────────────────────────── */
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: var(--t-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

/* ── 5. Surfaces & cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  padding: var(--sp-6);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-1px);
}
.card--elev  { box-shadow: var(--shadow-md); }
.card--glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--border-strong) !important;
}
.card--accent {
  border-color: var(--border-accent) !important;
  background: linear-gradient(180deg, rgba(52,229,160,0.06), rgba(52,229,160,0) 60%), var(--surface);
}
.card-header {
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  font-size: var(--t-sm);
}

.surface {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.surface-nested {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

/* Card top-accent stripes — green identity */
.card-accent-primary { border-top: 3px solid var(--green-400) !important; }
.card-accent-warning  { border-top: 3px solid var(--warn) !important; }
.card-accent-success  { border-top: 3px solid var(--gain) !important; }
.card-accent-info     { border-top: 3px solid var(--info) !important; }
.card-accent-danger   { border-top: 3px solid var(--loss) !important; }

/* ── 6. Component classes (from design/styles/components.css) ────────────── */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--t-sm);
  line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
  padding: 0 18px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn--primary {
  background: var(--grad-brand-deep);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { box-shadow: 0 10px 36px rgba(52,229,160,0.42); filter: brightness(1.04); }

.btn--secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-3); border-color: var(--border-accent); }

.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.btn--danger {
  background: var(--loss-soft);
  color: var(--loss);
  border-color: rgba(255,92,114,0.35);
}
.btn--danger:hover { background: rgba(255,92,114,0.20); }

.btn--sm   { height: 36px; font-size: var(--t-xs); padding: 0 14px; }
.btn--lg   { height: 52px; font-size: var(--t-base); padding: 0 26px; }
.btn--icon { width: 44px; padding: 0; }
.btn--block { display: flex; width: 100%; }

/* ---------- Fields & inputs ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.input {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-body); font-size: var(--t-base);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.input:focus-within,
.input:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 4px rgba(52,229,160,0.14);
  outline: none;
}
.input input { all: unset; flex: 1; min-width: 0; color: var(--text); font: inherit; }
.input input::placeholder { color: var(--text-dim); }
.input__prefix, .input__suffix {
  color: var(--text-muted);
  font-weight: 600;
  font-family: var(--font-mono);
}
.input__icon { color: var(--text-dim); display: inline-flex; }
.input__icon svg { width: 18px; height: 18px; }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 700; font-family: var(--font-mono);
  padding: 4px 9px; border-radius: var(--r-pill); line-height: 1;
}
.badge svg { width: 13px; height: 13px; }
.badge--gain    { background: var(--gain-soft); color: var(--gain); }
.badge--loss    { background: var(--loss-soft); color: var(--loss); }
.badge--warn    { background: var(--warn-soft); color: var(--warn); }
.badge--neutral { background: var(--surface-3); color: var(--text-muted); }
.badge--token   {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  font-family: var(--font-body); font-weight: 600;
}

/* ---------- Stat / KPI ---------- */
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat__label {
  font-size: var(--t-xs); font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.stat__value {
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1);
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.stat__row { display: flex; align-items: baseline; gap: 10px; }

/* ---------- Token row ---------- */
.token-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: var(--r-lg);
  transition: background var(--dur-base) var(--ease-out);
}
.token-row:hover { background: var(--surface-2); }
.token-id { display: flex; align-items: center; gap: 12px; }
.token-logo {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 700; font-size: 15px; color: var(--text-on-accent);
  background: var(--grad-brand); flex-shrink: 0;
}
.token-name   { font-weight: 700; font-size: var(--t-base); }
.token-ticker { font-size: var(--t-xs); color: var(--text-muted); font-family: var(--font-mono); }
.token-num    {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-weight: 500; text-align: right;
}

/* ---------- Segmented control ---------- */
.segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.segmented button {
  all: unset; cursor: pointer; padding: 7px 16px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-sm);
  color: var(--text-muted); transition: all var(--dur-base) var(--ease-out);
}
.segmented button[aria-selected="true"] {
  background: var(--surface-3); color: var(--text); box-shadow: var(--shadow-sm);
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); }
.tabs button {
  all: unset; cursor: pointer; padding: 12px 2px; font-weight: 600; font-size: var(--t-sm);
  color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--green-400); }

/* ---------- Toggle switch ---------- */
.switch { position: relative; width: 46px; height: 27px; display: inline-block; cursor: pointer; }
.switch input { display: none; }
.switch__track {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--surface-3);
  transition: background var(--dur-base) var(--ease-out);
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--text);
  transition: transform var(--dur-base) var(--ease-spring);
}
.switch input:checked + .switch__track { background: var(--grad-brand-deep); }
.switch input:checked + .switch__track + .switch__thumb,
.switch input:checked ~ .switch__thumb { transform: translateX(19px); }

/* ---------- Misc helpers ---------- */
.divider   { height: 1px; background: var(--border); border: 0; margin: 0; }
.icon-tile {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
}
.icon-tile svg { width: 20px; height: 20px; }
.sparkline { width: 92px; height: 30px; display: block; }

/* ── 7. Restyled existing classes ────────────────────────────────────────── */

/* Navbar */
.navbar {
  background-color: rgba(10, 13, 12, 0.95) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text) !important;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.navbar-brand span { color: var(--green-400); }
.nav-link {
  color: var(--text-muted) !important;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 0.4rem 0.75rem !important;
  border-radius: var(--r-sm);
  transition: color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.nav-link:hover {
  color: var(--text) !important;
  background-color: var(--surface-2);
}
.nav-link.active {
  color: var(--text) !important;
  font-weight: 700;
  background-color: var(--surface-2);
}

/* Chip / meta-pill */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 0.2rem 0.65rem;
  font-size: var(--t-xs); color: var(--text-muted); white-space: nowrap;
}
.chip[data-tone="success"] { background: var(--gain-soft); color: var(--gain); border-color: rgba(52,229,160,0.3); }
.chip[data-tone="danger"]  { background: var(--loss-soft); color: var(--loss); border-color: rgba(255,92,114,0.3); }
.chip[data-tone="warning"] { background: var(--warn-soft); color: var(--warn); border-color: rgba(255,196,77,0.3); }
.chip[data-tone="info"]    { background: rgba(91,168,255,0.14); color: var(--info); border-color: rgba(91,168,255,0.3); }

.meta-pill {
  display: inline-flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 0.2rem 0.75rem;
  font-size: var(--t-xs); color: var(--text-muted);
}

/* Chain tints via data-chain attribute */
[data-chain="eth"]  { color: var(--chain-eth);  background: rgba(138,146,178,0.12); border-color: rgba(138,146,178,0.25); }
[data-chain="arb"]  { color: var(--chain-arb);  background: rgba(40,160,240,0.12);  border-color: rgba(40,160,240,0.25); }
[data-chain="base"] { color: var(--chain-base); background: rgba(0,82,255,0.12);    border-color: rgba(0,82,255,0.25); }
[data-chain="avax"] { color: var(--chain-avax); background: rgba(232,65,66,0.12);   border-color: rgba(232,65,66,0.25); }

/* Input-dark (green focus ring) */
.input-dark {
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.input-dark:focus {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--gain-soft);
  outline: none;
}

/* Period buttons (active = green) */
.btn-period {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  font-family: var(--font-body);
}
.btn-period:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-period[aria-pressed="true"] {
  background: var(--grad-brand-deep);
  border-color: var(--green-600);
  color: var(--text-on-accent);
  font-weight: 700;
}

/* Soft alerts */
.alert-soft-success {
  background: var(--gain-soft);
  border: 1px solid rgba(52,229,160,0.25);
  border-radius: var(--r-md);
  color: var(--text);
}
.alert-soft-danger {
  background: var(--loss-soft);
  border: 1px solid rgba(255,92,114,0.25);
  border-radius: var(--r-md);
  color: var(--text);
}
.alert-soft-warning {
  background: var(--warn-soft);
  border: 1px solid rgba(255,196,77,0.25);
  border-radius: var(--r-md);
  color: var(--text);
}
.alert-soft-info {
  background: rgba(91,168,255,0.14);
  border: 1px solid rgba(91,168,255,0.25);
  border-radius: var(--r-md);
  color: var(--text);
}

/* Section headings & labels */
.section-heading,
.divider-section {
  font-size: var(--t-xs); font-weight: 600; color: var(--text-dim);
  border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4); letter-spacing: 0.04em; text-transform: uppercase;
}
.metric-label {
  font-size: var(--t-xs); font-weight: 600; color: var(--text-dim);
  margin-bottom: 2px; letter-spacing: 0.04em;
}

/* Badge-chain */
.badge-chain {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; font-family: var(--font-mono);
  padding: 0.2em 0.55em; border-radius: var(--r-xs);
}

/* ── 8. Tables ────────────────────────────────────────────────────────────── */
.table-header th {
  font-size: var(--t-2xs);
  font-weight: 600;
  color: var(--text-dim);
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: var(--sp-2);
  letter-spacing: 0.04em;
}
.table td, .table th {
  border-color: var(--border);
}
.table-sm td, .table-sm th {
  padding: 0.35rem 0.6rem;
}

/* Borrow row: left-border accent */
.row-borrow td:first-child {
  border-left: 4px solid var(--loss);
  padding-left: calc(0.6rem - 4px);
}

/* ── 9. Copy button ───────────────────────────────────────────────────────── */
.btn-copy {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
}
.btn-copy:hover { color: var(--text); }

/* ── 10. Misc ─────────────────────────────────────────────────────────────── */
.badge-protocol { font-size: var(--t-2xs); vertical-align: middle; }

code {
  color: var(--info);
  background: rgba(91, 168, 255, 0.10);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.82em;
  font-family: var(--font-mono);
}

/* ── 11. Skeleton loader ─────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: shimmer 1.5s infinite; }
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 12. Toast notifications ─────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.roi-toast {
  pointer-events: all;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t-sm);
  color: var(--text);
  min-width: 240px; max-width: 360px;
  display: flex; align-items: center; gap: var(--sp-2);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.roi-toast[data-tone="success"] { border-left: 3px solid var(--gain); }
.roi-toast[data-tone="danger"]  { border-left: 3px solid var(--loss); }
.roi-toast[data-tone="warning"] { border-left: 3px solid var(--warn); }
.roi-toast[data-tone="info"]    { border-left: 3px solid var(--info); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── 13. Accessibility ───────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--green-400);
  outline-offset: 2px;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 14. Tooltip ─────────────────────────────────────────────────────────── */
.tooltip {
  transition: opacity 120ms ease;
}

/* ── 15. Metric grid ─────────────────────────────────────────────────────── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--sp-4);
}

/* ── 16. Button press micro-interaction ──────────────────────────────────── */
.btn,
.btn-period,
.btn-copy,
button[type="submit"]:not(.navbar-toggler) {
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn:active,
.btn-period:active,
.btn-copy:active,
button[type="submit"]:active:not(.navbar-toggler) {
  transform: scale(0.95);
}

/* ── 17. Mobile (≤ 640px) ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hero scales down */
  .hero-headline { font-size: var(--text-2xl) !important; }

  /* Positions jump-to rail hidden on mobile */
  #positions-jumpnav { display: none !important; }

  /* Table stacking via data-label */
  .table-stacked thead { display: none; }
  .table-stacked tbody tr {
    display: block;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-2) 0;
  }
  .table-stacked td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-1) var(--sp-3);
    border: none !important;
  }
  .table-stacked td::before {
    content: attr(data-label);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    margin-right: var(--sp-2);
  }
}

/* ── 18. Print ────────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .navbar, #positions-jumpnav, #toast-container, .btn, form { display: none !important; }
  .card, .surface {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .table td, .table th { color: #000 !important; border-color: #ccc !important; }
  :root {
    --text-primary: #000;
    --text-secondary: #444;
    --text-tertiary: #666;
  }
}