/* TradeChefPro Design System — bundled entry point. Regenerate: bash scripts/build/ds-styles.sh */

/* ── tokens/fonts.css ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&display=block');

.tcp-icon,
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.tcp-icon.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── tokens/colors.css ── */
:root {
  --tcp-orange-300: #ffb35c;
  --tcp-orange-400: #ffa033;
  --tcp-orange-500: #fd8917;
  --tcp-orange-600: #e57a0c;
  --tcp-orange-700: #c2660a;
  --tcp-amber-500:  #fdb415;

  --tcp-ink-950: #16130f;
  --tcp-ink-900: #1c1812;
  --tcp-ink-850: #211c15;
  --tcp-ink-800: #2a241c;
  --tcp-ink-700: #3a3226;
  --tcp-ink-600: #4a4031;
  --tcp-ink-500: #7d735f;
  --tcp-ink-300: #b5ab98;
  --tcp-ink-100: #f0ece4;

  --tcp-paper-50:  #fffdf9;
  --tcp-paper-100: #faf6ef;
  --tcp-paper-150: #f7f2ea;
  --tcp-paper-200: #fbf6ee;
  --tcp-paper-300: #ece2d2;
  --tcp-paper-400: #ddd2c0;

  --tcp-profit:  #34d399;
  --tcp-loss:    #fb7185;
  --tcp-warning: #fdb415;
  --tcp-info:    #60a5fa;

  /* Light (default — matches FOUC script fallback for light OS) */
  --bg:            var(--tcp-paper-150);
  --bg-elevated:   var(--tcp-paper-100);
  --surface:       var(--tcp-paper-50);
  --surface-2:     var(--tcp-paper-200);
  --surface-hover: #f3ece0;

  --border:        var(--tcp-paper-300);
  --border-strong: var(--tcp-paper-400);

  --text:        #1c1813;
  --text-muted:  #5d5547;
  --text-subtle: #a89a82;

  --primary:        var(--tcp-orange-500);
  --primary-hover:  var(--tcp-orange-600);
  --primary-press:  var(--tcp-orange-700);
  --primary-soft:   rgba(253, 137, 23, 0.12);
  --on-primary:     #ffffff;
  --focus-ring:     rgba(253, 137, 23, 0.45);

  --profit:      #15a06b;
  --profit-soft: rgba(21, 160, 107, 0.12);
  --loss:        #e0455c;
  --loss-soft:   rgba(224, 69, 92, 0.10);
  --warning:     #c2660a;
  --warning-soft:rgba(253, 180, 21, 0.18);
  --info:        #2563eb;
  --info-soft:   rgba(37, 99, 235, 0.10);

  --overlay:     rgba(40, 32, 22, 0.42);
}

html[data-theme="dark"] {
  --bg:            var(--tcp-ink-950);
  --bg-elevated:   var(--tcp-ink-900);
  --surface:       var(--tcp-ink-850);
  --surface-2:     var(--tcp-ink-800);
  --surface-hover: #2f281e;

  --border:        var(--tcp-ink-700);
  --border-strong: var(--tcp-ink-600);

  --text:        var(--tcp-ink-100);
  --text-muted:  var(--tcp-ink-300);
  --text-subtle: var(--tcp-ink-500);

  --primary:        var(--tcp-orange-500);
  --primary-hover:  var(--tcp-orange-400);
  --primary-press:  var(--tcp-orange-600);
  --primary-soft:   rgba(253, 137, 23, 0.14);
  --on-primary:     var(--tcp-ink-950);
  --focus-ring:     rgba(253, 137, 23, 0.55);

  --profit:      var(--tcp-profit);
  --profit-soft: rgba(52, 211, 153, 0.16);
  --loss:        var(--tcp-loss);
  --loss-soft:   rgba(251, 113, 133, 0.15);
  --warning:     var(--tcp-warning);
  --warning-soft:rgba(253, 180, 21, 0.16);
  --info:        var(--tcp-info);
  --info-soft:   rgba(96, 165, 250, 0.15);

  --overlay:     rgba(10, 8, 5, 0.66);
}

/* ── tokens/typography.css ── */
:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:15px;
  --text-md:  17px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 62px;
  --text-6xl: 80px;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-caps: 0.12em;

  --font-display: var(--weight-extrabold) var(--text-5xl)/var(--leading-tight) var(--font-sans);
  --font-h1: var(--weight-extrabold) var(--text-3xl)/var(--leading-snug) var(--font-sans);
  --font-h2: var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  --font-h3: var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --font-body: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --font-body-sm: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --font-label: var(--weight-bold) var(--text-2xs)/1 var(--font-sans);
  --font-data: var(--weight-medium) var(--text-base)/1.2 var(--font-mono);
}

/* ── tokens/spacing.css ── */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --section-y: 96px;
}

/* ── tokens/effects.css ── */
:root {
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-tile: 11px;

  --border-width: 1px;
  --border-hairline: 1px solid var(--border);

  --shadow-sm: 0 1px 2px rgba(60,45,25,0.08);
  --shadow-md: 0 6px 20px -8px rgba(60,45,25,0.16);
  --shadow-lg: 0 18px 40px -16px rgba(60,45,25,0.20);
  --shadow-pop: 0 24px 60px -20px rgba(60,45,25,0.26);
  --shadow-glow: 0 10px 30px -10px rgba(253,137,23,0.40);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}

html[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 14px -4px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 40px -16px rgba(0,0,0,0.55);
  --shadow-pop: 0 24px 60px -20px rgba(0,0,0,0.65);
  --shadow-glow: 0 8px 28px -8px rgba(253,137,23,0.45);
}

/* ── tokens/compat.css ── */
/* Legacy --t-* aliases for CSS not yet migrated off theme.css (live-trades, etc.) */
:root {
  --t-text-strong: var(--text);
  --t-text:        var(--text);
  --t-text-muted:  var(--text-muted);
  --t-text-faint:  var(--text-subtle);
  --t-brand:       var(--primary);
  --t-brand-h:     var(--primary-hover);
  --t-bg-surface:  var(--surface);
  --t-bg-alt:      var(--bg-elevated);
  --t-bg-subtle:   var(--surface-2);
  --t-bg:          var(--bg);
  --t-border:      var(--border);
  --t-border-med:  var(--border-strong);
  --t-accent:      var(--info);
  --t-accent-h:    var(--info);
  --t-green:       var(--profit);
  --t-green-bg:    var(--profit-soft);
  --t-red:         var(--loss);
  --t-red-bg:      var(--loss-soft);
  --t-amber:       var(--warning);
  --t-amber-bg:    var(--warning-soft);
  --t-link:        var(--primary);

  --fs-xs:   var(--text-xs);
  --fs-sm:   var(--text-sm);
  --fs-base: var(--text-base);
  --fs-md:   var(--text-md);
  --fs-lg:   var(--text-lg);
  --fs-xl:   var(--text-xl);

  --prose-width:  36rem;
  --narrow-width: 22rem;
}

/* ── tokens/base.css ── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; }

.tcp-num, .tcp-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.tcp-eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--primary);
}

/* Layout utilities */
.tcp-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tcp-container--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Card */
.tcp-card {
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.tcp-card--elevated {
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
.tcp-card--interactive {
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.tcp-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Buttons */
.tcp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  padding: 10px 18px;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.tcp-btn:active { transform: translateY(1px) scale(0.985); }

.tcp-btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.tcp-btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: var(--shadow-glow);
}

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

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

.tcp-btn--lg { font-size: var(--text-base); padding: 13px 24px; }
.tcp-btn--sm { font-size: var(--text-xs); padding: 7px 14px; border-radius: var(--radius-sm); }
.tcp-btn--full { width: 100%; justify-content: center; }

/* Badge */
.tcp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.tcp-badge--primary  { background: var(--primary-soft); color: var(--primary); }
.tcp-badge--profit   { background: var(--profit-soft);  color: var(--profit); }
.tcp-badge--loss     { background: var(--loss-soft);    color: var(--loss); }
.tcp-badge--warning  { background: var(--warning-soft); color: var(--warning); }
.tcp-badge--info     { background: var(--info-soft);    color: var(--info); }
.tcp-badge--dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Alert row (live feed) */
.tcp-alert-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border);
  background: var(--surface);
}
.tcp-alert-row--entry { border-left-color: var(--primary); }
.tcp-alert-row--exit  { border-left-color: var(--profit); }
.tcp-alert-row--alert { border-left-color: var(--warning); }

.tcp-alert-row__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tcp-alert-row__tag {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.tcp-alert-row--entry .tcp-alert-row__tag { color: var(--primary); }
.tcp-alert-row--exit  .tcp-alert-row__tag { color: var(--profit); }
.tcp-alert-row__time { font-size: var(--text-2xs); color: var(--text-subtle); }
.tcp-alert-row__body { font-size: var(--text-sm); color: var(--text); font-family: var(--font-mono); }
.tcp-alert-row__pl   { font-size: var(--text-xs); color: var(--profit); font-family: var(--font-mono); }

/* Stat tile */
.tcp-stat {
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.tcp-stat__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-subtle); letter-spacing: 0.04em; text-transform: uppercase; }
.tcp-stat__value { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text); margin-top: 4px; }
.tcp-stat__value--primary { color: var(--primary); }
.tcp-stat__sub { font-size: var(--text-xs); color: var(--text-subtle); margin-top: 2px; }

/* Theme toggle */
.tcp-theme-toggle {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.tcp-theme-toggle:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface); }

/* Profit / loss text */
.tcp-profit { color: var(--profit); font-family: var(--font-mono); }
.tcp-loss   { color: var(--loss);   font-family: var(--font-mono); }

/* Page header pattern */
.tcp-page-header { padding: var(--space-9) 0 var(--space-6); text-align: center; }
.tcp-page-header__title { font: var(--font-h1); color: var(--text); }
.tcp-page-header__lead  { font-size: var(--text-md); color: var(--text-muted); margin-top: var(--space-3); max-width: 600px; margin-inline: auto; }

/* Disclaimer strip */
.tcp-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  line-height: var(--leading-relaxed);
}
.tcp-disclaimer .tcp-icon { font-size: 16px; color: var(--text-subtle); flex-shrink: 0; margin-top: 1px; }

/* Login wall — blur + overlay pattern */
.tcp-login-wall {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.tcp-login-wall__blur {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
.tcp-login-wall__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay, 100);
  background: rgba(22, 19, 15, 0.80);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.tcp-login-wall__msg {
  color: #fff;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
  text-align: center;
}
.tcp-login-wall__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  background: var(--primary);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast, 150ms) ease-out,
              box-shadow var(--dur-fast, 150ms) ease-out,
              transform var(--dur-fast, 150ms) ease-out;
}
.tcp-login-wall__btn:hover {
  background: var(--primary-hover);
  box-shadow: 0 0 0 3px rgba(253,137,23,0.30);
  transform: translateY(-1px);
  color: #fff;
}
.tcp-login-wall__sub {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tcp-login-wall__sub:hover { color: #fff; }

/* Upgrade wall variant — amber tint overlay */
.tcp-upgrade-wall__overlay {
  background: linear-gradient(135deg, rgba(120,53,15,0.88) 0%, rgba(180,83,9,0.82) 100%);
}
.tcp-upgrade-wall__overlay .tcp-login-wall__btn {
  background: var(--warning);
  color: #fff;
}
.tcp-upgrade-wall__overlay .tcp-login-wall__btn:hover {
  filter: brightness(1.1);
  background: var(--warning);
}

/* Upgrade banner — inline notice bar */
.tcp-upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(90deg, rgba(120,53,15,0.08) 0%, rgba(180,83,9,0.06) 100%);
  border: 1px solid rgba(180,83,9,0.22);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.tcp-upgrade-banner__text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.tcp-upgrade-banner__cta {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: #fff;
  background: #b45309;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: filter var(--dur-fast, 150ms);
}
.tcp-upgrade-banner__cta:hover { filter: brightness(1.1); color: #fff; }

::selection { background: var(--primary-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

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

/* ── tokens/trades-ui.css ── */
/* Spreads page (#trades-root) — Tailwind bundle theme bridge for DS light/dark */

#trades-root {
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

#trades-root .bg-white { background-color: var(--surface) !important; }
#trades-root .bg-white\/95 { background-color: color-mix(in srgb, var(--surface) 95%, transparent) !important; }
#trades-root .bg-white\/80 { background-color: color-mix(in srgb, var(--surface) 80%, transparent) !important; }
#trades-root .bg-white\/60 { background-color: color-mix(in srgb, var(--surface) 60%, transparent) !important; }
#trades-root .bg-gray-50,
#trades-root .bg-gray-50\/80,
#trades-root .bg-gray-50\/90,
#trades-root .bg-slate-50,
#trades-root .bg-slate-50\/90 { background-color: var(--bg-elevated) !important; }
#trades-root .bg-gray-100 { background-color: var(--surface-2) !important; }
#trades-root .bg-gray-200,
#trades-root .bg-gray-200\/80 { background-color: var(--surface-hover) !important; }
#trades-root .bg-tcp-surface { background-color: var(--surface) !important; }

#trades-root .text-tcp-ink,
#trades-root .text-slate-800 { color: var(--text) !important; }
#trades-root .text-slate-700 { color: var(--text) !important; }
#trades-root .text-slate-600,
#trades-root .text-slate-500,
#trades-root .text-tcp-muted { color: var(--text-muted) !important; }
#trades-root .text-tcp-blue,
#trades-root .text-blue-700 { color: var(--info) !important; }
#trades-root .decoration-blue-400 { text-decoration-color: var(--info) !important; }

#trades-root .border-gray-100,
#trades-root .border-gray-200,
#trades-root .border-gray-200\/80,
#trades-root .border-gray-200\/90,
#trades-root .border-slate-200,
#trades-root .border-slate-200\/80 { border-color: var(--border) !important; }
#trades-root .border-gray-300 { border-color: var(--border-strong) !important; }
#trades-root .border-l-tcp-blue { border-left-color: var(--info) !important; }

#trades-root .shadow-card { box-shadow: var(--shadow-md) !important; }
#trades-root .hover\:bg-gray-50:hover { background-color: var(--surface-hover) !important; }
#trades-root .hover\:bg-gray-100:hover,
#trades-root .active\:bg-gray-100:active { background-color: var(--surface-2) !important; }
#trades-root .hover\:bg-gray-200:hover { background-color: var(--surface-hover) !important; }
#trades-root .hover\:text-tcp-ink:hover { color: var(--text) !important; }

#trades-root .bg-tcp-ink { background-color: var(--text) !important; }
#trades-root .text-white { color: var(--on-primary) !important; }

html[data-theme="dark"] #trades-root {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] #trades-root p { color: inherit; }

html[data-theme="dark"] #trades-root .bg-tcp-ink { background-color: #1a1d26 !important; }
html[data-theme="dark"] #trades-root .text-white { color: #fff !important; }

html[data-theme="dark"] #trades-root .ring-gray-100\/80,
html[data-theme="dark"] #trades-root .ring-slate-200\/80 {
  --tw-ring-color: color-mix(in srgb, var(--border) 60%, transparent) !important;
}

html[data-theme="dark"] #trades-root .hover\:bg-sky-50:hover {
  background-color: color-mix(in srgb, var(--info) 12%, transparent) !important;
}

html[data-theme="dark"] #trades-root .bg-emerald-50\/60,
html[data-theme="dark"] #trades-root .bg-emerald-50\/85,
html[data-theme="dark"] #trades-root .bg-emerald-50\/95 {
  background-color: color-mix(in srgb, var(--profit) 14%, transparent) !important;
}
html[data-theme="dark"] #trades-root .bg-emerald-50\/50 {
  background-color: var(--surface) !important;
}
html[data-theme="dark"] #trades-root .bg-emerald-100 {
  background-color: color-mix(in srgb, var(--profit) 18%, transparent) !important;
}
html[data-theme="dark"] #trades-root .bg-amber-50,
html[data-theme="dark"] #trades-root .bg-amber-50\/80,
html[data-theme="dark"] #trades-root .bg-amber-50\/95 {
  background-color: var(--warning-soft) !important;
}
html[data-theme="dark"] #trades-root .bg-amber-100 {
  background-color: color-mix(in srgb, var(--warning) 18%, transparent) !important;
}
html[data-theme="dark"] #trades-root .bg-red-50,
html[data-theme="dark"] #trades-root .bg-rose-50\/95 {
  background-color: var(--loss-soft) !important;
}
html[data-theme="dark"] #trades-root .bg-sky-50\/70,
html[data-theme="dark"] #trades-root .bg-sky-50\/80 {
  background-color: var(--info-soft) !important;
}
html[data-theme="dark"] #trades-root .bg-sky-100 {
  background-color: color-mix(in srgb, var(--info) 18%, transparent) !important;
}

html[data-theme="dark"] #trades-root .text-emerald-900,
html[data-theme="dark"] #trades-root .text-emerald-900\/80,
html[data-theme="dark"] #trades-root .text-emerald-950,
html[data-theme="dark"] #trades-root .text-emerald-800,
html[data-theme="dark"] #trades-root .text-emerald-700 {
  color: var(--profit) !important;
}
html[data-theme="dark"] #trades-root .bg-emerald-50\/50 .text-emerald-950 {
  color: var(--text) !important;
}
html[data-theme="dark"] #trades-root .text-amber-900,
html[data-theme="dark"] #trades-root .text-amber-950,
html[data-theme="dark"] #trades-root .text-amber-950\/90,
html[data-theme="dark"] #trades-root .text-amber-800 {
  color: var(--warning) !important;
}
html[data-theme="dark"] #trades-root .text-red-800,
html[data-theme="dark"] #trades-root .text-red-900,
html[data-theme="dark"] #trades-root .text-rose-950,
html[data-theme="dark"] #trades-root .text-red-950\/90 {
  color: var(--loss) !important;
}
html[data-theme="dark"] #trades-root .text-sky-900,
html[data-theme="dark"] #trades-root .text-sky-950 {
  color: var(--info) !important;
}

html[data-theme="dark"] #trades-root .border-emerald-200\/80 {
  border-color: var(--border) !important;
}
html[data-theme="dark"] #trades-root .border-emerald-600,
html[data-theme="dark"] #trades-root .border-emerald-600\/45,
html[data-theme="dark"] #trades-root .border-emerald-600\/50 {
  border-color: color-mix(in srgb, var(--profit) 40%, transparent) !important;
}
html[data-theme="dark"] #trades-root .border-amber-200,
html[data-theme="dark"] #trades-root .border-amber-200\/90,
html[data-theme="dark"] #trades-root .border-amber-300,
html[data-theme="dark"] #trades-root .border-amber-600\/50 {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent) !important;
}
html[data-theme="dark"] #trades-root .border-red-200,
html[data-theme="dark"] #trades-root .border-red-800\/30,
html[data-theme="dark"] #trades-root .border-rose-600\/50 {
  border-color: color-mix(in srgb, var(--loss) 40%, transparent) !important;
}
html[data-theme="dark"] #trades-root .border-sky-200\/80 {
  border-color: color-mix(in srgb, var(--info) 40%, transparent) !important;
}

html[data-theme="dark"] #trades-root .bg-black\/40 {
  background-color: color-mix(in srgb, var(--overlay) 90%, transparent) !important;
}
html[data-theme="dark"] #trades-root .bg-black\/50 {
  background-color: var(--overlay) !important;
}

html[data-theme="dark"] #trades-root .bg-orange-50 {
  background-color: var(--primary-soft) !important;
}
html[data-theme="dark"] #trades-root .text-orange-900 {
  color: var(--primary) !important;
}
html[data-theme="dark"] #trades-root .ring-orange-200 {
  --tw-ring-color: color-mix(in srgb, var(--primary) 40%, transparent) !important;
}

html[data-theme="dark"] #trades-root .bg-violet-100 {
  background-color: rgba(139, 92, 246, 0.15) !important;
}
html[data-theme="dark"] #trades-root .text-violet-900 { color: #c4b5fd !important; }
html[data-theme="dark"] #trades-root .bg-teal-100 {
  background-color: rgba(13, 148, 136, 0.15) !important;
}
html[data-theme="dark"] #trades-root .text-teal-900 { color: #5eead4 !important; }
html[data-theme="dark"] #trades-root .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.15) !important;
}
html[data-theme="dark"] #trades-root .text-indigo-900 { color: #a5b4fc !important; }
html[data-theme="dark"] #trades-root .bg-cyan-100 {
  background-color: rgba(6, 182, 212, 0.15) !important;
}
html[data-theme="dark"] #trades-root .text-cyan-900 { color: #67e8f9 !important; }

html[data-theme="dark"] #trades-root .hover\:bg-emerald-600:hover {
  background-color: color-mix(in srgb, var(--profit) 35%, transparent) !important;
}
html[data-theme="dark"] #trades-root .hover\:bg-red-100:hover {
  background-color: var(--loss-soft) !important;
}
html[data-theme="dark"] #trades-root .hover\:text-blue-900:hover { color: var(--info) !important; }
html[data-theme="dark"] #trades-root .hover\:text-red-600:hover { color: var(--loss) !important; }
html[data-theme="dark"] #trades-root .focus\:ring-tcp-orange:focus,
html[data-theme="dark"] #trades-root .focus-visible\:ring-tcp-orange\/40:focus-visible,
html[data-theme="dark"] #trades-root .ring-tcp-orange {
  --tw-ring-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
}
html[data-theme="dark"] #trades-root .hover\:text-white:hover { color: #fff !important; }