/* TradingSimuLab V62 - dark-mode loading/progress polish.
   CSS-only. No backend, model, auth, billing, Stripe, pricing, or SEO changes. */

html[data-tsl-theme="dark"] .tsl-risk-run-card.tsl-risk-loading,
html[data-tsl-theme="dark"] .tsl-tool-panel.tsl-risk-loading {
  background:
    radial-gradient(circle at 18% 0%, rgba(47,102,246,.14), transparent 24rem),
    linear-gradient(180deg, rgba(10,24,44,.98), rgba(6,17,31,.99)) !important;
  border-color: rgba(132,166,225,.22) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html[data-tsl-theme="dark"] .tsl-tool-status[data-state="running"],
html[data-tsl-theme="dark"] .tsl-risk-status-running,
html[data-tsl-theme="dark"] #tsl-macro-status[data-state="running"] {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(47,102,246,.16), rgba(26,214,164,.08)),
    rgba(9, 22, 40, .92) !important;
  border: 1px solid rgba(128,170,255,.26) !important;
  border-left: 3px solid #2f66f6 !important;
  border-radius: 16px !important;
  color: #dbeaff !important;
  font-weight: 850 !important;
  letter-spacing: .005em;
  line-height: 1.6 !important;
  padding: 13px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 48px rgba(0,0,0,.20) !important;
}

html[data-tsl-theme="dark"] .tsl-tool-status[data-state="running"]::after,
html[data-tsl-theme="dark"] .tsl-risk-status-running::after,
html[data-tsl-theme="dark"] #tsl-macro-status[data-state="running"]::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -45%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: tslV62StatusSweep 1.85s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tslV62StatusSweep {
  0% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(360%); opacity: 0; }
}

html[data-tsl-theme="dark"] .tsl-risk-progress {
  background:
    linear-gradient(180deg, rgba(8,20,37,.78), rgba(6,17,31,.82)) !important;
  border: 1px solid rgba(132,166,225,.20) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  margin-top: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 56px rgba(0,0,0,.24) !important;
}

html[data-tsl-theme="dark"] .tsl-risk-steps,
html[data-tsl-theme="dark"] .tsl-tool-steps {
  background: transparent !important;
  border: 0 !important;
  gap: 10px !important;
}

html[data-tsl-theme="dark"] .tsl-risk-step,
html[data-tsl-theme="dark"] .tsl-tool-step {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  background:
    linear-gradient(180deg, rgba(15,31,56,.96), rgba(9,22,40,.98)) !important;
  border: 1px solid rgba(132,166,225,.20) !important;
  border-radius: 14px !important;
  color: #eaf2ff !important;
  padding: 14px 14px 13px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(0,0,0,.18) !important;
}

html[data-tsl-theme="dark"] .tsl-risk-step::before,
html[data-tsl-theme="dark"] .tsl-tool-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: rgba(132,166,225,.18);
}

html[data-tsl-theme="dark"] .tsl-risk-step strong,
html[data-tsl-theme="dark"] .tsl-tool-step strong {
  color: #f4f8ff !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
}

html[data-tsl-theme="dark"] .tsl-risk-step span,
html[data-tsl-theme="dark"] .tsl-tool-step span,
html[data-tsl-theme="dark"] .tsl-risk-step-state,
html[data-tsl-theme="dark"] .tsl-tool-step-state {
  color: #8ea6c6 !important;
  font-size: 11.5px !important;
  font-weight: 760 !important;
  margin-top: 8px !important;
}

html[data-tsl-theme="dark"] .tsl-risk-step[data-state="active"],
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="active"] {
  background:
    radial-gradient(circle at 100% 0%, rgba(96,165,250,.16), transparent 14rem),
    linear-gradient(180deg, rgba(22,46,82,.98), rgba(12,29,52,.98)) !important;
  border-color: rgba(96,165,250,.58) !important;
  box-shadow: 0 0 0 1px rgba(96,165,250,.16), 0 18px 44px rgba(47,102,246,.20), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-tsl-theme="dark"] .tsl-risk-step[data-state="active"]::before,
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="active"]::before {
  background: linear-gradient(90deg, #2f66f6, #60a5fa, #1ad6a4) !important;
  height: 3px;
}

html[data-tsl-theme="dark"] .tsl-risk-step[data-state="active"] .tsl-risk-step-state,
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="active"] .tsl-tool-step-state,
html[data-tsl-theme="dark"] .tsl-risk-step[data-state="active"] span,
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="active"] span {
  color: #93c5fd !important;
}

html[data-tsl-theme="dark"] .tsl-risk-step[data-state="complete"],
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="complete"] {
  background:
    linear-gradient(180deg, rgba(15,40,59,.96), rgba(8,27,43,.98)) !important;
  border-color: rgba(26,214,164,.34) !important;
}

html[data-tsl-theme="dark"] .tsl-risk-step[data-state="complete"]::before,
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="complete"]::before {
  background: linear-gradient(90deg, rgba(26,214,164,.95), rgba(96,165,250,.50)) !important;
  height: 3px;
}

html[data-tsl-theme="dark"] .tsl-risk-step[data-state="complete"] .tsl-risk-step-state,
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="complete"] .tsl-tool-step-state,
html[data-tsl-theme="dark"] .tsl-risk-step[data-state="complete"] span,
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="complete"] span {
  color: #86efcf !important;
}

html[data-tsl-theme="dark"] .tsl-risk-step[data-state="error"],
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="error"] {
  border-color: rgba(255,107,122,.52) !important;
  box-shadow: 0 0 0 1px rgba(255,107,122,.14), 0 16px 42px rgba(255,107,122,.10) !important;
}

html[data-tsl-theme="dark"] .tsl-risk-step[data-state="error"]::before,
html[data-tsl-theme="dark"] .tsl-tool-step[data-state="error"]::before {
  background: linear-gradient(90deg, #ff6b7a, #ffb547) !important;
  height: 3px;
}

html[data-tsl-theme="dark"] .tsl-tool-button:disabled,
html[data-tsl-theme="dark"] .tsl-risk-run-button:disabled {
  opacity: .86 !important;
  color: #dce9ff !important;
  background: linear-gradient(135deg, #2f66f6, #315ab8) !important;
  box-shadow: 0 14px 34px rgba(47,102,246,.20) !important;
}

html[data-tsl-theme="dark"] .tsl-risk-result-head::before,
html[data-tsl-theme="dark"] .tsl-tool-result-head::before,
html[data-tsl-theme="dark"] #tsl-macro-result-head::before {
  opacity: .78 !important;
  background: linear-gradient(90deg, #2f66f6, #60a5fa, rgba(26,214,164,.82)) !important;
}

@media (max-width: 820px) {
  html[data-tsl-theme="dark"] .tsl-risk-progress {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  html[data-tsl-theme="dark"] .tsl-risk-steps,
  html[data-tsl-theme="dark"] .tsl-tool-steps {
    grid-template-columns: 1fr !important;
  }

  html[data-tsl-theme="dark"] .tsl-risk-step,
  html[data-tsl-theme="dark"] .tsl-tool-step {
    min-height: 0;
    padding: 12px 13px !important;
  }
}