﻿/* TradingSimuLab V63 - dark-mode chart + watchlist surface polish.
   CSS-only. No backend, auth, billing, model math, pricing, SEO, or JS logic changes. */

/* Dark-mode global info/watchlist surfaces: remove remaining pale cards. */
html[data-tsl-theme="dark"] .tsl-risk-watchlist-cta,
html[data-tsl-theme="dark"] #tsl-risk-watchlist-cta,
html[data-tsl-theme="dark"] .tsl-auth-watchlist-promise,
html[data-tsl-theme="dark"] .tsl-watchlist-panel,
html[data-tsl-theme="dark"] .tsl-watchlist-next {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(47,102,246,.18), transparent 20rem),
    linear-gradient(180deg, rgba(13,31,56,.96), rgba(8,20,37,.98)) !important;
  border: 1px solid rgba(128,170,255,.26) !important;
  border-left: 3px solid rgba(47,102,246,.88) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.045) !important;
  color: #eaf2ff !important;
}

html[data-tsl-theme="dark"] .tsl-risk-watchlist-cta h3,
html[data-tsl-theme="dark"] #tsl-risk-watchlist-cta h3,
html[data-tsl-theme="dark"] .tsl-auth-watchlist-promise h2,
html[data-tsl-theme="dark"] .tsl-watchlist-panel h2,
html[data-tsl-theme="dark"] .tsl-watchlist-next h3 {
  color: #f7fbff !important;
  text-shadow: 0 1px 16px rgba(47,102,246,.16);
}

html[data-tsl-theme="dark"] .tsl-risk-watchlist-cta p,
html[data-tsl-theme="dark"] #tsl-risk-watchlist-cta p,
html[data-tsl-theme="dark"] .tsl-auth-watchlist-promise p,
html[data-tsl-theme="dark"] .tsl-watchlist-panel p,
html[data-tsl-theme="dark"] .tsl-watchlist-next p {
  color: #b9c9df !important;
}

html[data-tsl-theme="dark"] .tsl-risk-watchlist-cta a,
html[data-tsl-theme="dark"] #tsl-risk-watchlist-cta a,
html[data-tsl-theme="dark"] .tsl-watchlist-account,
html[data-tsl-theme="dark"] .tsl-watchlist-next a {
  background: linear-gradient(135deg, #2f66f6, #2755d6) !important;
  border: 1px solid rgba(147,197,253,.32) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px rgba(47,102,246,.26) !important;
}

/* Previous-result notice should feel like an information strip, not a light-mode leftover. */
html[data-tsl-theme="dark"] .tsl-risk-previous {
  background:
    linear-gradient(90deg, rgba(47,102,246,.13), rgba(26,214,164,.07)),
    rgba(9,22,40,.88) !important;
  border: 1px solid rgba(128,170,255,.22) !important;
  border-left: 3px solid rgba(96,165,250,.76) !important;
  border-radius: 14px !important;
  color: #cfe0f5 !important;
  display: block;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  padding: 11px 14px !important;
}
html[data-tsl-theme="dark"] .tsl-risk-previous[hidden] { display: none !important; }

/* Risk Simulation outcome envelope: make the inline SVG match the premium dark chart system. */
html[data-tsl-theme="dark"] .tsl-risk-path-fan,
html[data-tsl-theme="dark"] #tsl-risk-path-fan {
  background:
    radial-gradient(circle at 92% 0%, rgba(26,214,164,.10), transparent 20rem),
    linear-gradient(180deg, rgba(13,28,50,.96), rgba(8,20,37,.98)) !important;
  border-color: rgba(132,166,225,.24) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important;
  color: #eaf2ff !important;
}

html[data-tsl-theme="dark"] .tsl-risk-path-fan h3,
html[data-tsl-theme="dark"] #tsl-risk-path-fan h3 {
  color: #f7fbff !important;
}

html[data-tsl-theme="dark"] .tsl-risk-path-fan p,
html[data-tsl-theme="dark"] #tsl-risk-path-fan p {
  color: #c2d1e6 !important;
}

html[data-tsl-theme="dark"] .tsl-risk-fan-svg {
  background:
    linear-gradient(180deg, rgba(7,18,37,.98), rgba(4,12,26,.99)) !important;
  border: 1px solid rgba(132,166,225,.16) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 14px 36px rgba(0,0,0,.18) !important;
}
html[data-tsl-theme="dark"] .tsl-risk-fan-svg rect { fill: #071225 !important; }
html[data-tsl-theme="dark"] .tsl-risk-fan-svg line { stroke: rgba(148,163,184,.24) !important; }
html[data-tsl-theme="dark"] .tsl-risk-fan-svg polygon {
  fill: rgba(47,102,246,.18) !important;
  stroke: rgba(96,165,250,.30) !important;
}
html[data-tsl-theme="dark"] .tsl-risk-fan-svg polyline { stroke: #60a5fa !important; }
html[data-tsl-theme="dark"] .tsl-risk-fan-svg text { fill: #b9c9df !important; }
html[data-tsl-theme="dark"] .tsl-risk-fan-svg text[fill="#047857"] { fill: #34d399 !important; }
html[data-tsl-theme="dark"] .tsl-risk-fan-svg text[fill="#2563eb"] { fill: #93c5fd !important; }
html[data-tsl-theme="dark"] .tsl-risk-fan-svg text[fill="#b91c1c"] { fill: #fb7185 !important; }

html[data-tsl-theme="dark"] .tsl-risk-fan-note {
  background: rgba(9,22,40,.84) !important;
  border: 1px solid rgba(132,166,225,.18) !important;
  color: #bdd0e7 !important;
}

/* Risk Simulation lower visuals: align mini-cards/bands with the same dark chart language. */
html[data-tsl-theme="dark"] .tsl-risk-visual-card {
  background: linear-gradient(180deg, rgba(13,28,50,.96), rgba(8,20,37,.98)) !important;
  border-color: rgba(132,166,225,.22) !important;
  box-shadow: 0 18px 56px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
  color: #eaf2ff !important;
}
html[data-tsl-theme="dark"] .tsl-risk-visual-card h4,
html[data-tsl-theme="dark"] .tsl-risk-visual-card h3 { color: #f7fbff !important; }
html[data-tsl-theme="dark"] .tsl-risk-visual-card p { color: #c2d1e6 !important; }
html[data-tsl-theme="dark"] .tsl-risk-mini-grid div,
html[data-tsl-theme="dark"] .tsl-risk-band-labels div {
  background: rgba(9,22,40,.72) !important;
  border: 1px solid rgba(132,166,225,.15) !important;
  border-radius: 14px !important;
  padding: 12px !important;
}
html[data-tsl-theme="dark"] .tsl-risk-band {
  background: rgba(148,163,184,.12) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.30) !important;
}
html[data-tsl-theme="dark"] .tsl-risk-band::before {
  background: linear-gradient(90deg, rgba(251,113,133,.70), rgba(96,165,250,.50), rgba(52,211,153,.58)) !important;
}
html[data-tsl-theme="dark"] .tsl-risk-marker {
  background: #071225 !important;
  border-color: rgba(226,232,240,.92) !important;
}
html[data-tsl-theme="dark"] .tsl-risk-marker[data-kind="current"] { background: #2f66f6 !important; }

/* Trend Persistence charts: keep the premium card, but make the chart well less bulky. */
html[data-tsl-theme="dark"] .tsl-tps-premium-card {
  background: linear-gradient(180deg, rgba(13,28,50,.94), rgba(8,20,37,.98)) !important;
  border-color: rgba(132,166,225,.22) !important;
  box-shadow: 0 22px 66px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html[data-tsl-theme="dark"] .tsl-tps-svg-wrap {
  background: linear-gradient(180deg, rgba(7,18,37,.90), rgba(5,15,31,.96)) !important;
  border-color: rgba(132,166,225,.16) !important;
  border-radius: 18px !important;
  padding: 5px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 12px 30px rgba(0,0,0,.16) !important;
}
html[data-tsl-theme="dark"] .tsl-tps-legend-chip {
  background: rgba(247,251,255,.94) !important;
  border-color: rgba(255,255,255,.82) !important;
  color: #0b172a !important;
}
html[data-tsl-theme="dark"] .tsl-tps-premium-value { color: #f7fbff !important; }

@media (max-width: 760px) {
  html[data-tsl-theme="dark"] .tsl-risk-watchlist-cta,
  html[data-tsl-theme="dark"] #tsl-risk-watchlist-cta {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  html[data-tsl-theme="dark"] .tsl-risk-watchlist-cta a,
  html[data-tsl-theme="dark"] #tsl-risk-watchlist-cta a {
    justify-content: center !important;
    width: 100% !important;
  }
  html[data-tsl-theme="dark"] .tsl-risk-fan-svg,
  html[data-tsl-theme="dark"] .tsl-tps-svg-wrap {
    border-radius: 16px !important;
  }
}