:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bg-deep: #060810;
  --bg-surface: #0b1120;
  --bg-card: #0f1929;
  --bg-hover: #142035;
  --border: #1a2d47;
  --border-bright: #2a4a6b;
  --cyan: #00d4ff;
  --cyan-dim: #0088aa;
  --cyan-glow: rgba(0,212,255,0.15);
  --green: #00ff88;
  --green-dim: #00aa55;
  --red: #ff3366;
  --red-dim: #aa1133;
  --gold: #ffd700;
  --gold-dim: #aa8800;
  --orange: #ff8c00;
  --purple: #7c3aed;
  --text-primary: #e8f0fe;
  --text-secondary: #7a9bbf;
  --text-muted: #3d5a7a;
  --sans: var(--font-sans);
  --mono: var(--font-sans);
  --display: var(--font-sans);
  --body: var(--font-sans);
}

/* ===== FINAL DARK POPUP ENFORCEMENT ===== */
html[data-theme='dark'] .popup,
html[data-theme='dark'] .run-ultron-popup,
html[data-theme='dark'] .signout-session-popup,
html[data-theme='dark'] .history-day-popup,
html[data-theme='dark'] .trade-day-popup,
html[data-theme='dark'] #tradeEditorPopup .popup,
html[data-theme='dark'] #tradeCompletePopup .popup {
  border-color: color-mix(in srgb, var(--border-bright) 76%, transparent) !important;
  background: linear-gradient(
    162deg,
    color-mix(in srgb, var(--bg-card) 94%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  ) !important;
  box-shadow:
    0 26px 60px color-mix(in srgb, var(--bg-deep) 58%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 9%, transparent) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-day-popup,
html[data-theme='dark'] #tradeDayPopup .trade-day-popup-title-wrap,
html[data-theme='dark'] #tradeDayPopup .trade-day-popup-body,
html[data-theme='dark'] #tradeDayPopup .trade-day-popup-footer,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-header,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-shell,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview-panel,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-card,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-card-head {
  background: var(--bg-card) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-day-popup::before,
html[data-theme='dark'] #tradeDayPopup .trade-day-popup::after {
  display: none !important;
  content: none !important;
}

html[data-theme='dark'] .run-ultron-popup.is-processing,
html[data-theme='dark'] .run-ultron-popup.is-ready,
html[data-theme='dark'] .signout-session-popup.is-confirming,
html[data-theme='dark'] .signout-session-popup.is-success {
  border-color: color-mix(in srgb, var(--session-ui-accent) 56%, var(--border-bright) 44%) !important;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--session-ui-accent) 14%, var(--bg-card) 86%),
    color-mix(in srgb, var(--session-ui-accent-alt) 10%, var(--bg-hover) 90%)
  ) !important;
}

html[data-theme='dark'] #tradeEditorPopup .tracking-form-card,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-popup-body,
html[data-theme='dark'] #tradeCompletePopup .trade-complete-detail,
html[data-theme='dark'] .history-day-popup-summary,
html[data-theme='dark'] .history-popup-filter-bar,
html[data-theme='dark'] .history-day-popup-table .history-table,
html[data-theme='dark'] .trade-day-summary,
html[data-theme='dark'] .trade-day-item,
html[data-theme='dark'] .trade-day-kpi {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent) !important;
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal {
  background: transparent !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-card-shell {
  border-color: color-mix(in srgb, var(--border-bright) 76%, transparent) !important;
  background: linear-gradient(
    164deg,
    color-mix(in srgb, var(--bg-card) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  ) !important;
  box-shadow:
    0 26px 62px color-mix(in srgb, var(--bg-deep) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 9%, transparent) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-tabbar {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent) !important;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-tab-indicator {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--bg-deep) 36%, transparent) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-tab-btn {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-tab-btn.active,
html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-step-title,
html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-title,
html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-subtitle {
  color: var(--text-primary) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-field-label,
html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-step-helper,
html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-note,
html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-message {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-input-field,
html[data-theme='dark'] .auth-modal.simple-auth-modal .input-field,
html[data-theme='dark'] .auth-modal.simple-auth-modal select.auth-input-field {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent) !important;
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent) !important;
  color: var(--text-primary) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-input-icon {
  color: color-mix(in srgb, var(--text-secondary) 86%, transparent) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-modal-close {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent) !important;
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent) !important;
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-modal-close:hover {
  border-color: color-mix(in srgb, var(--session-ui-accent) 52%, var(--border-bright) 48%) !important;
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent) !important;
  color: var(--text-primary) !important;
}

html[data-theme='dark'] .auth-view-recovery {
  border-radius: 20px;
  background: linear-gradient(
    164deg,
    color-mix(in srgb, var(--bg-card) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 92%, transparent)
  );
  padding: 14px;
}

html[data-theme='dark'] .auth-recovery-back {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] .auth-recovery-back:hover {
  border-color: color-mix(in srgb, var(--session-ui-accent) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] .auth-recovery-code-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

html[data-theme='dark'] .auth-recovery-code-value {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  color: var(--text-primary);
}

/* ===== DARK MODE POPUP OPTIMIZATION (GLOBAL) ===== */
html[data-theme='dark'] .popup-overlay,
html[data-theme='dark'] .auth-modal-overlay,
html[data-theme='dark'] .profile-hub-modal-overlay,
html[data-theme='dark'] .welcome-overlay {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--session-ui-accent) 16%, transparent), transparent 56%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 58%),
    rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(12px);
}

html[data-theme='dark'] .popup,
html[data-theme='dark'] .updates-popup,
html[data-theme='dark'] .run-ultron-popup,
html[data-theme='dark'] .signout-session-popup,
html[data-theme='dark'] .history-day-popup,
html[data-theme='dark'] .trade-day-popup,
html[data-theme='dark'] #tradeEditorPopup .popup,
html[data-theme='dark'] #tradeCompletePopup .popup,
html[data-theme='dark'] .welcome-panel {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--bg-card) 93%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
  box-shadow:
    0 24px 56px color-mix(in srgb, var(--bg-deep) 58%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] .popup::before,
html[data-theme='dark'] .run-ultron-popup::before,
html[data-theme='dark'] .signout-session-popup::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--session-ui-accent) 30%, transparent), transparent);
}

html[data-theme='dark'] .popup-title,
html[data-theme='dark'] .welcome-title,
html[data-theme='dark'] .run-ultron-popup .popup-title,
html[data-theme='dark'] .signout-session-popup .popup-title {
  color: var(--text-primary);
}

html[data-theme='dark'] .popup-body,
html[data-theme='dark'] .welcome-body,
html[data-theme='dark'] .run-ultron-popup .popup-body,
html[data-theme='dark'] .signout-session-popup .popup-body {
  color: var(--text-secondary);
}

html[data-theme='dark'] .popup-close-btn {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] .popup-close-btn:hover {
  border-color: color-mix(in srgb, var(--red) 60%, var(--border-bright) 40%);
  background: color-mix(in srgb, var(--red) 16%, var(--bg-hover) 84%);
  color: color-mix(in srgb, #ffffff 12%, var(--red) 88%);
}

html[data-theme='dark'] .popup-close-btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--session-ui-accent) 62%, var(--border-bright) 38%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--session-ui-accent) 22%, transparent),
    0 10px 22px color-mix(in srgb, #000000 24%, transparent);
}

html[data-theme='dark'] .popup .btn.btn-secondary,
html[data-theme='dark'] .welcome-actions .btn.btn-secondary {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] .popup .btn.btn-secondary:hover,
html[data-theme='dark'] .welcome-actions .btn.btn-secondary:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
}

html[data-theme='dark'] .popup .btn.btn-secondary:focus-visible,
html[data-theme='dark'] .welcome-actions .btn.btn-secondary:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--session-ui-accent) 58%, var(--border-bright) 42%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--session-ui-accent) 20%, transparent);
}

html[data-theme='dark'] .updates-popup .platform-updates-pill,
html[data-theme='dark'] .platform-updates-pill {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: color-mix(in srgb, var(--session-ui-accent) 74%, #e2e8f0 26%);
}

html[data-theme='dark'] .updates-popup .platform-update-date,
html[data-theme='dark'] .platform-update-date {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] .updates-popup .platform-update-card,
html[data-theme='dark'] .platform-update-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-card) 92%, transparent),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
  box-shadow: 0 10px 20px color-mix(in srgb, var(--bg-deep) 40%, transparent);
}

html[data-theme='dark'] .updates-popup .platform-update-title,
html[data-theme='dark'] .platform-update-title {
  color: var(--text-primary);
}

html[data-theme='dark'] .updates-popup .platform-update-list,
html[data-theme='dark'] .updates-popup .platform-updates-meta,
html[data-theme='dark'] .platform-update-list,
html[data-theme='dark'] .platform-updates-meta {
  color: var(--text-secondary);
}

html[data-theme='dark'] .updates-popup .platform-update-badge,
html[data-theme='dark'] .platform-update-badge {
  box-shadow: none;
}

html[data-theme='dark'] .updates-popup .platform-update-badge.is-major,
html[data-theme='dark'] .platform-update-badge.is-major {
  border-color: #86198f;
  background: #3b0764;
  color: #f5d0fe;
}

html[data-theme='dark'] .updates-popup .platform-update-badge.is-feature,
html[data-theme='dark'] .platform-update-badge.is-feature {
  border-color: #1d4ed8;
  background: #172554;
  color: #bfdbfe;
}

html[data-theme='dark'] .updates-popup .platform-update-badge.is-enhancement,
html[data-theme='dark'] .platform-update-badge.is-enhancement {
  border-color: #047857;
  background: #022c22;
  color: #a7f3d0;
}

html[data-theme='dark'] .updates-popup .platform-update-badge.is-fix,
html[data-theme='dark'] .platform-update-badge.is-fix {
  border-color: #b45309;
  background: #451a03;
  color: #fde68a;
}

/* ===== FINAL PRECEDENCE: PLATFORM UPDATE POPUP + ACTION COLORS + RUN ULTRON POPUP ===== */
.popup-platform-updates {
  margin-top: 8px;
}

.updates-popup .platform-updates-timeline {
  max-height: min(50vh, 420px);
  overflow: auto;
  padding-right: 4px;
}

.updates-popup .platform-update-card {
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.updates-popup .platform-update-date {
  border-radius: 14px;
  font-weight: 800;
}

.updates-popup .platform-update-title {
  font-size: 15px;
}

/* Action-colored button system */
.btn {
  border-radius: 14px !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* Global pill sizing aligned to Complete 7-Day Correct/Incorrect pills */
.btn,
.sidebar-auth-pill,
.trade-action-btn,
.feedback-choice-btn {
  min-height: 32px !important;
  border-radius: 999px !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

.btn,
.sidebar-auth-pill,
.trade-action-btn {
  padding: 0 12px !important;
}

.history-delete-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
}

.btn-primary {
  background: linear-gradient(90deg, #06b6d4, #0ea5e9) !important;
  border-color: #0891b2 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.26) !important;
}

.btn-primary:hover {
  background: linear-gradient(90deg, #0891b2, #0284c7) !important;
  border-color: #0369a1 !important;
}

.btn-secondary {
  background: linear-gradient(90deg, #64748b, #475569) !important;
  border-color: #334155 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(51, 65, 85, 0.24) !important;
}

.btn-secondary:hover {
  background: linear-gradient(90deg, #475569, #334155) !important;
  border-color: #1e293b !important;
}

.btn-danger {
  background: linear-gradient(90deg, #ef4444, #e11d48) !important;
  border-color: #be123c !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(225, 29, 72, 0.26) !important;
}

.btn-danger:hover {
  background: linear-gradient(90deg, #dc2626, #be123c) !important;
  border-color: #9f1239 !important;
}

.history-delete-btn,
.trade-action-btn.danger {
  background: linear-gradient(90deg, #ef4444, #e11d48) !important;
  border-color: #be123c !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(225, 29, 72, 0.26) !important;
}

.history-delete-btn:hover,
.trade-action-btn.danger:hover {
  background: linear-gradient(90deg, #dc2626, #be123c) !important;
  border-color: #9f1239 !important;
  color: #ffffff !important;
}

/* Keep Run Ultron button visually unique */
.btn-run-forecast.btn-primary.action-btn-run {
  background: linear-gradient(100deg, #22d3ee, #0ea5e9) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.3) !important;
}

/* Run Ultron popup animation */
.run-ultron-popup {
  width: min(500px, 95vw);
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(168deg, #f9fcff, #edf5ff 62%, #ecf7ff);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.92, 0.22, 1),
    box-shadow 0.36s ease,
    border-color 0.3s ease,
    background 0.36s ease;
}

.run-ultron-popup .popup-title,
.run-ultron-popup .popup-body {
  transition: color 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
}

.run-ultron-popup.is-processing {
  transform: translateY(-2px) scale(1.006);
  border-color: #8ec5ff;
  background: linear-gradient(168deg, #f8fbff, #e9f3ff 62%, #e8f7ff);
  box-shadow:
    0 24px 52px rgba(2, 132, 199, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.run-ultron-popup.is-ready {
  border-color: #7ce4b0;
  background: linear-gradient(168deg, #f7fffb, #eafaf2 62%, #edfdf5);
  box-shadow:
    0 22px 50px rgba(22, 163, 74, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.run-ultron-popup.is-ready .popup-title {
  color: #0d7a68;
}

.run-ultron-art {
  width: 128px;
  height: 128px;
  margin: 0 auto 14px;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1), filter 0.32s ease;
}

.run-ultron-art svg {
  width: 100%;
  height: 100%;
}

.ultron-run-glow {
  opacity: 0.44;
  transform-origin: 80px 80px;
}

.ultron-run-track,
.ultron-run-orbit,
.ultron-run-arc,
.ultron-run-scan {
  fill: none;
  stroke-linecap: round;
}

.ultron-run-track {
  stroke: #d7e6f7;
  stroke-width: 3.2;
}

.ultron-run-orbit {
  stroke: #78c8ff;
  opacity: 0.42;
}

.ultron-run-orbit.orbit-a {
  stroke-width: 2.5;
  stroke-dasharray: 10 8;
}

.ultron-run-orbit.orbit-b {
  stroke-width: 2.2;
  stroke-dasharray: 6 8;
  opacity: 0.5;
}

.ultron-run-arc {
  stroke: url(#ultronRunArcGrad);
  stroke-width: 5.1;
  opacity: 0.93;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.ultron-run-arc.arc-b {
  stroke-width: 3.8;
  opacity: 0.74;
  stroke-dasharray: 82;
  stroke-dashoffset: 82;
}

.ultron-run-orb {
  filter: drop-shadow(0 12px 24px rgba(2, 132, 199, 0.28));
  transform-origin: 80px 80px;
}

.ultron-run-orb-core {
  fill: rgba(255, 255, 255, 0.85);
  opacity: 0.94;
  transform-origin: 80px 80px;
}

.ultron-run-scan {
  stroke: #67e8f9;
  stroke-width: 4.7;
  opacity: 0;
}

.ultron-run-particle {
  fill: #dff6ff;
  opacity: 0.24;
  transform-origin: 80px 80px;
}

.ultron-run-success-ring {
  fill: none;
  stroke: #d4f7e7;
  stroke-width: 6;
  opacity: 0;
  transform: scale(0.9);
  transform-origin: 80px 80px;
}

.ultron-run-success-burst {
  fill: none;
  stroke: rgba(16, 185, 129, 0.45);
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.84);
  transform-origin: 80px 80px;
}

.ultron-run-check-glow {
  fill: none;
  stroke: rgba(16, 185, 129, 0.38);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 74;
  stroke-dashoffset: 74;
  opacity: 0;
  filter: blur(1.2px);
}

.ultron-run-check {
  fill: none;
  stroke: #10b981;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 74;
  stroke-dashoffset: 74;
  opacity: 0;
}

.run-ultron-art.running .ultron-run-glow {
  animation: ultronRunGlowBreathe 1.7s ease-in-out infinite;
}

.run-ultron-art.running .ultron-run-orbit.orbit-a {
  animation: ultronRunSpinCW 5.2s linear infinite;
  transform-origin: 80px 80px;
}

.run-ultron-art.running .ultron-run-orbit.orbit-b {
  animation: ultronRunSpinCCW 3.9s linear infinite;
  transform-origin: 80px 80px;
}

.run-ultron-art.running .ultron-run-arc {
  animation: ultronRunArcDraw 0.8s ease forwards;
}

.run-ultron-art.running .ultron-run-arc.arc-b {
  animation: ultronRunArcDraw 0.85s ease forwards 0.12s;
}

.run-ultron-art.running .ultron-run-orb {
  animation: ultronRunOrbPulse 1.25s ease-in-out infinite;
}

.run-ultron-art.running .ultron-run-orb-core {
  animation: ultronRunCorePulse 1.25s ease-in-out infinite;
}

.run-ultron-art.running .ultron-run-scan {
  opacity: 1;
  animation: ultronRunScanSweep 0.95s ease-in-out infinite;
}

.run-ultron-art.running .ultron-run-particle.p1 { animation: ultronRunParticleOrbit 1.8s linear infinite; }
.run-ultron-art.running .ultron-run-particle.p2 { animation: ultronRunParticleOrbit 1.8s linear infinite 0.42s; }
.run-ultron-art.running .ultron-run-particle.p3 { animation: ultronRunParticleOrbit 1.8s linear infinite 0.84s; }

.run-ultron-popup.is-processing .run-ultron-art {
  transform: scale(1.08);
  filter: drop-shadow(0 14px 28px rgba(56, 189, 248, 0.23));
}

.run-ultron-art.done .ultron-run-glow,
.run-ultron-art.done .ultron-run-track,
.run-ultron-art.done .ultron-run-orbit,
.run-ultron-art.done .ultron-run-arc,
.run-ultron-art.done .ultron-run-orb,
.run-ultron-art.done .ultron-run-orb-core,
.run-ultron-art.done .ultron-run-scan,
.run-ultron-art.done .ultron-run-particle {
  animation: none !important;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.24s ease;
}

.run-ultron-art.done .ultron-run-success-ring {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.22s ease, transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.run-ultron-art.done .ultron-run-success-burst {
  animation: ultronRunSuccessBurst 0.56s ease-out forwards;
}

.run-ultron-art.done .ultron-run-check-glow {
  opacity: 1;
  animation: ultronRunDrawCheck 0.46s ease forwards, ultronRunCheckGlowFade 0.7s ease forwards 0.28s;
}

.run-ultron-art.done .ultron-run-check {
  opacity: 1;
  animation: ultronRunDrawCheck 0.46s ease forwards, ultronRunCheckSettle 0.36s ease-out 0.42s;
}

.run-ultron-popup.is-running .run-ultron-art {
  transform: scale(1.05);
  transition: transform 0.24s ease;
}

@keyframes ultronRunGlowBreathe {
  0%, 100% { opacity: 0.3; transform: scale(0.95); }
  50% { opacity: 0.56; transform: scale(1.05); }
}

@keyframes ultronRunSpinCW {
  to { transform: rotate(360deg); }
}

@keyframes ultronRunSpinCCW {
  to { transform: rotate(-360deg); }
}

@keyframes ultronRunArcDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes ultronRunOrbPulse {
  0%, 100% { transform: scale(0.95); }
  50% { transform: scale(1.08); }
}

@keyframes ultronRunCorePulse {
  0%, 100% { transform: scale(0.8); opacity: 0.72; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes ultronRunScanSweep {
  0% { transform: translateY(-20px); opacity: 0.14; }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0.14; }
}

@keyframes ultronRunParticleOrbit {
  0% { transform: rotate(0deg) translateY(-56px) scale(0.72); opacity: 0.12; }
  50% { transform: rotate(180deg) translateY(-56px) scale(1.15); opacity: 0.9; }
  100% { transform: rotate(360deg) translateY(-56px) scale(0.72); opacity: 0.12; }
}

@keyframes ultronRunDrawCheck {
  to { stroke-dashoffset: 0; }
}

@keyframes ultronRunSuccessBurst {
  0% { opacity: 0.52; transform: scale(0.84); }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes ultronRunCheckGlowFade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes ultronRunCheckSettle {
  0% { transform: scale(1); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ===== PLATFORM UPDATES + SIGNOUT FLOW REFINEMENT ===== */
.history-remove-cell {
  text-align: center;
  width: 86px;
}

.history-view-btn {
  min-width: 84px;
}

.history-remove-cell .history-delete-btn {
  margin-inline: auto;
}

.platform-updates-shell {
  display: grid;
  gap: 16px;
}

.platform-updates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.platform-updates-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #cfe0f2;
  background: #ffffff;
  color: #0f766e;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.platform-updates-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: #64748b;
}

.platform-updates-timeline {
  display: grid;
  gap: 14px;
}

.platform-updates-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  border-radius: 22px;
  border: 1px solid #dbe6f3;
  background: linear-gradient(145deg, #ffffff, #eef7ff);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  padding: 16px;
}

.platform-updates-feature:not(.has-image) {
  grid-template-columns: 1fr;
}

.platform-updates-feature-media {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #dbe6f3;
  background: #eaf4ff;
}

.platform-updates-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.platform-updates-feature-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.platform-updates-feature-kicker {
  color: #0f766e;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.platform-updates-feature-title {
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.platform-updates-feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platform-updates-feature-list {
  margin: 0;
  padding-left: 18px;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

.platform-update-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.platform-update-date {
  border-radius: 12px;
  border: 1px solid #dbe6f3;
  background: #f8fbff;
  color: #334155;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
}

.platform-update-card {
  border-radius: 16px;
  border: 1px solid #dbe6f3;
  background: linear-gradient(165deg, #ffffff, #f6faff);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
  padding: 14px 16px;
}

.platform-update-card-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.platform-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.platform-update-badge.is-compact {
  min-height: 24px;
}

.platform-update-badge i {
  font-size: 12px;
}

.platform-update-badge.is-major {
  border-color: #f5d0fe;
  background: #fdf4ff;
  color: #a21caf;
}

.platform-update-badge.is-feature {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.platform-update-badge.is-enhancement {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.platform-update-badge.is-fix {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.platform-update-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #dbe6f3;
  background: #eff6ff;
  margin-bottom: 14px;
}

.platform-update-card-media-image {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
}

.platform-update-card-media-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.platform-update-title {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 7px;
}

.platform-update-list {
  margin: 0;
  padding-left: 18px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.platform-update-attachments {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.platform-update-attachment {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  border: 1px solid #dbe6f3;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.platform-update-attachment-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #f8fafc;
}

.platform-update-attachment-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 20px 10px 10px;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.8));
}

.platform-update-attachment-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signout-session-popup {
  transition:
    transform 0.42s cubic-bezier(0.2, 0.92, 0.22, 1),
    box-shadow 0.35s ease,
    border-color 0.32s ease,
    background 0.32s ease;
}

.signout-session-popup.is-confirming {
  transform: translateY(-1px) scale(1.008);
}

.signout-session-popup.is-confirming .popup-actions {
  opacity: 0.86;
}

.signout-session-popup.is-confirming .signout-session-art {
  transform: scale(1.045);
}

.signout-session-popup.is-confirming .signout-core {
  animation: signoutCoreLift 0.76s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.signout-session-popup.is-confirming .signout-door {
  animation: signoutDoorFade 0.72s ease forwards;
}

.signout-session-popup.is-confirming .signout-arrow {
  animation: signoutArrowExit 0.72s cubic-bezier(0.2, 0.86, 0.32, 1) forwards;
}

.signout-session-popup.is-confirming .signout-ring.front {
  animation: signoutRingDraw 0.66s cubic-bezier(0.22, 0.8, 0.25, 1) forwards, signoutRingPulse 0.34s ease 0.62s forwards;
}

.signout-session-popup.is-success {
  border-color: #9de8bf;
  background: linear-gradient(165deg, #f7fffb, #ecfbf2) !important;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2) !important;
}

.signout-session-popup.is-success .signout-session-copy-track {
  transform: translateX(-50%);
}

.signout-session-popup.is-success .popup-actions {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.signout-session-popup.is-success .signout-ring.front {
  stroke: #22c55e;
  stroke-dashoffset: 0;
  opacity: 0.36;
  animation: none;
}

.signout-session-popup.is-success .signout-core,
.signout-session-popup.is-success .signout-door,
.signout-session-popup.is-success .signout-arrow {
  opacity: 0;
  animation: none;
}

.signout-session-popup.is-success .signout-success-halo {
  animation: signoutSuccessHalo 0.54s ease forwards;
}

.signout-session-popup.is-success .signout-check-glow {
  animation: signoutCheckDraw 0.42s ease forwards 0.08s, signoutCheckGlowFade 0.5s ease forwards 0.5s;
}

.signout-session-popup.is-success .signout-check {
  animation: signoutCheckDraw 0.44s cubic-bezier(0.2, 0.78, 0.28, 1) forwards 0.1s, signoutCheckPop 0.48s cubic-bezier(0.18, 0.88, 0.26, 1) forwards 0.08s;
}

@keyframes signoutCoreLift {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  70% { transform: translateY(-8px) scale(0.95); opacity: 0.3; }
  100% { transform: translateY(-12px) scale(0.9); opacity: 0; }
}

@keyframes signoutDoorFade {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes signoutArrowExit {
  from { transform: translateX(0); opacity: 0.9; }
  to { transform: translateX(14px); opacity: 0; }
}

@keyframes signoutRingPulse {
  0% { stroke-width: 4; opacity: 1; }
  100% { stroke-width: 6.5; opacity: 0.26; }
}

@keyframes signoutSuccessHalo {
  0% { opacity: 0.62; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.22); }
}

@keyframes signoutCheckDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes signoutCheckGlowFade {
  to { opacity: 0; }
}

@keyframes signoutCheckPop {
  0% { opacity: 0; transform: scale(0.72); }
  55% { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
  .platform-updates-feature {
    grid-template-columns: 1fr;
  }

  .platform-update-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .platform-update-date {
    justify-content: flex-start;
  }
}

/* ===== FINAL GLOBAL POLISH (PRECEDENCE) ===== */
.popup-overlay {
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, #38bdf8 16%, transparent), transparent 56%),
    radial-gradient(130% 120% at 100% 100%, color-mix(in srgb, #14b8a6 13%, transparent), transparent 60%),
    rgba(2, 8, 20, 0.52) !important;
  backdrop-filter: blur(10px);
}

.popup {
  position: relative;
  border-radius: 22px !important;
  border: 1px solid #dbe6f3 !important;
  background: linear-gradient(165deg, #ffffff, #f4f8ff) !important;
  box-shadow: 0 30px 64px rgba(15, 23, 42, 0.22) !important;
}

.popup::before {
  display: none !important;
}

.popup-title {
  color: #0f172a !important;
  font-family: var(--body) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.popup-body {
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.popup-actions {
  justify-content: flex-end;
}

.popup-close-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #d4deea;
  background: #ffffff;
  color: #64748b;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  transition: all 0.2s ease;
}

.popup-close-btn:hover {
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(254, 242, 242, 0.95);
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.14);
  transform: translateY(-1px);
}

.btn {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  border-radius: 14px !important;
  border: 0 !important;
  color: #ffffff !important;
  font-family: var(--body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transition: left 0.35s ease;
  pointer-events: none;
}

.btn:hover::after {
  left: 130%;
}

.btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.btn-primary {
  background: linear-gradient(90deg, #f43f5e, #f97316) !important;
  box-shadow: 0 12px 24px rgba(244, 63, 94, 0.28);
}

.btn-secondary {
  background: linear-gradient(90deg, #0ea5e9, #14b8a6) !important;
  box-shadow: 0 12px 24px rgba(14, 165, 233, 0.24);
}

.btn-danger {
  background: linear-gradient(90deg, #ef4444, #e11d48) !important;
  box-shadow: 0 12px 24px rgba(239, 68, 68, 0.24);
}

.updates-popup {
  width: min(1040px, 96vw);
  max-height: min(86vh, 920px);
  overflow: auto;
}

.updates-popup-modern {
  padding: 24px;
}

.updates-popup-hero {
  margin-bottom: 16px;
  padding-right: 44px;
}

.updates-popup-kicker {
  color: #0f766e;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.system-update-image-lightbox {
  z-index: 26000;
}

.system-update-image-lightbox-card {
  position: relative;
  width: min(1120px, 94vw);
  max-height: 90vh;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid #dbe6f3;
  background: linear-gradient(165deg, #ffffff, #f5f9ff);
  box-shadow: 0 30px 64px rgba(15, 23, 42, 0.28);
}

.system-update-image-lightbox-image {
  display: block;
  width: 100%;
  max-height: calc(90vh - 36px);
  border-radius: 18px;
  object-fit: contain;
  background: #e2e8f0;
}

.updates-popup-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .updates-popup-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== FINAL POLISH OVERRIDES ===== */
.popup-overlay {
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, #38bdf8 14%, transparent), transparent 56%),
    radial-gradient(130% 120% at 100% 100%, color-mix(in srgb, #14b8a6 11%, transparent), transparent 62%),
    rgba(3, 10, 22, 0.48);
  backdrop-filter: blur(10px);
}

.popup {
  border-radius: 22px;
  border: 1px solid #dbe6f3;
  background: linear-gradient(165deg, #ffffff, #f5f9ff);
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
  padding: 22px;
}

.popup::before {
  display: none;
}

.popup-title {
  color: #0f172a;
  font-family: var(--body);
  font-size: 19px;
  letter-spacing: 0.01em;
  font-weight: 800;
  margin-bottom: 8px;
}

.popup-body {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.popup-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.btn {
  min-height: 40px;
  border-radius: 12px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #0f172a;
  border: 1px solid #0f172a;
  color: #ffffff;
}

.btn-primary:hover {
  background: #1e293b;
  border-color: #1e293b;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.24);
}

.btn-secondary {
  background: #ffffff;
  border: 1px solid #d3deec;
  color: #475569;
}

.btn-secondary:hover {
  border-color: #94a3b8;
  background: #f8fafc;
  color: #1e293b;
}

.btn-danger {
  background: #f43f5e;
  border: 1px solid #f43f5e;
  color: #ffffff;
}

.btn-danger:hover {
  background: #e11d48;
  border-color: #e11d48;
  box-shadow: 0 10px 20px rgba(225, 29, 72, 0.24);
}

.sidebar-auth-pill.login,
.sidebar-auth-pill.register {
  min-height: 38px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sidebar-auth-pill.login {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.sidebar-auth-pill.login:hover {
  background: #1e293b;
  border-color: #1e293b;
}

.sidebar-auth-pill.register {
  background: #ffffff;
  border-color: #d3deec;
  color: #334155;
}

.sidebar-auth-pill.register:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

#authViewLogin.auth-login-slide-active #authLoginForm {
  display: none;
}

#authViewLogin .auth-login-success-panel {
  margin-top: 0;
}

#authViewLogin.auth-login-slide-active .auth-login-success-panel {
  display: block;
  animation: authViewInRight 0.35s ease both;
}

.auth-login-success-card {
  border-radius: 22px;
  border: 1px solid #dbe6f3;
  background: linear-gradient(165deg, #ffffff, #eef6ff);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
  padding: 18px;
}

.auth-login-success-panel.done #authLoginSuccessActions,
.auth-register-complete-panel.done .auth-reg-complete-actions {
  display: flex;
}

.updates-popup {
  width: min(860px, 95vw);
}

.updates-popup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.updates-card {
  border: 1px solid #dbe6f3;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px 13px;
}

.updates-card-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.updates-list {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: #64748b;
}

.profile-updates-btn {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}

.signout-session-popup {
  width: min(480px, 94vw);
  text-align: center;
  overflow: visible !important;
}

.signout-session-popup.is-opening {
  animation: signoutPopupIn 0.26s cubic-bezier(0.2, 0.88, 0.24, 1) both;
}

.signout-session-popup.is-closing {
  animation: signoutPopupOut 0.2s ease both;
  pointer-events: none;
}

.signout-session-copy {
  overflow: hidden;
  margin-bottom: 16px;
}

.signout-session-copy-track {
  width: 200%;
  display: flex;
  transition: transform 0.44s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.signout-session-copy-screen {
  width: 50%;
  padding: 0 4px;
}

.signout-session-art {
  width: 126px;
  height: 126px;
  margin: 0 auto 10px;
  padding: 5px;
  overflow: visible;
  transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: transform;
}

.signout-session-art svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible !important;
}

.signout-session-art .signout-ring {
  fill: none;
  stroke-width: 4;
}

.signout-session-art .signout-ring.back {
  stroke: #d9e6f5;
}

.signout-session-art .signout-ring.front {
  stroke: #38bdf8;
  stroke-dasharray: 352;
  stroke-dashoffset: 352;
}

@keyframes signoutPopupIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes signoutPopupOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.988);
    filter: blur(1px);
  }
}

.signout-session-art .signout-core {
  transform-origin: 80px 80px;
  filter: drop-shadow(0 8px 18px rgba(14, 165, 233, 0.34));
  transition: opacity 0.25s ease;
}

.signout-session-art .signout-arrow,
.signout-session-art .signout-door {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.24s ease;
}

.signout-session-art .signout-success-halo {
  fill: none;
  stroke: rgba(34, 197, 94, 0.5);
  stroke-width: 6;
  opacity: 0;
  transform-origin: 80px 80px;
}

.signout-session-art .signout-check-glow {
  fill: none;
  stroke: rgba(16, 185, 129, 0.36);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
  opacity: 0;
  filter: blur(1.2px);
}

.signout-session-art .signout-check {
  fill: none;
  stroke: #10b981;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
  opacity: 0;
  transform-origin: 80px 80px;
  transform: scale(0.72);
}

.signout-session-art.running .signout-ring.front {
  animation: signoutRingDraw 0.9s cubic-bezier(0.24, 0.84, 0.26, 1) forwards;
}

.signout-session-art.running .signout-arrow {
  animation: signoutArrowPulse 1.2s ease-in-out infinite;
}

.signout-session-art.running .signout-core {
  animation: signoutCoreBreathe 1.5s ease-in-out infinite;
}

.history-row-actions {
  gap: 7px;
}

.history-action-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #d7e2ef;
  background: #f8fafc;
  color: #64748b;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.history-delete-btn {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--body);
}

.history-delete-btn span {
  display: inline-block;
  transform: translateY(-0.5px);
}

@keyframes signoutRingDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes signoutArrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.86; }
  50% { transform: translateX(2.8px); opacity: 1; }
}

@keyframes signoutCoreBreathe {
  0%, 100% { transform: scale(0.98); }
  50% { transform: scale(1.02); }
}

@media (max-width: 900px) {
  .updates-popup-grid {
    grid-template-columns: 1fr;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--body);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

body.page-shell .app-shell {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body.page-shell.page-entered .app-shell {
  opacity: 1;
  transform: translateY(0);
}

body.page-shell.page-leaving .app-shell {
  opacity: 0;
  transform: translateY(6px);
}

/* Noise texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
}

/* Scanline effect */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,212,255,0.01) 2px, rgba(0,212,255,0.01) 4px);
  pointer-events: none;
  z-index: 9998;
}

/* ===== LAYOUT ===== */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ===== SIDEBAR ===== */
.sidebar {
  width: 220px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 8px;
  position: relative;
  z-index: 100;
  transition: none;
}

.sidebar.expanded { width: 220px; }

.sidebar-nav-scroll {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sidebar-logo {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 900;
  color: var(--cyan);
  letter-spacing: 0.15em;
  text-shadow: 0 0 20px var(--cyan);
  margin-bottom: 12px;
  writing-mode: horizontal-tb;
  transition: none;
}

.sidebar.expanded .sidebar-logo {
  writing-mode: horizontal-tb;
  font-size: 14px;
}

.sidebar-toggle {
  display: none;
}

.sidebar-toggle:hover { background: var(--cyan); color: var(--bg-deep); }

.nav-item {
  width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.nav-item .nav-label { font-size: 12px; font-weight: 500; opacity: 1; transition: none; }
.sidebar.expanded .nav-item .nav-label { opacity: 1; }

.nav-item .nav-icon { font-size: 16px; min-width: 20px; text-align: center; }

.nav-item:hover { color: var(--cyan); background: var(--cyan-glow); }
.nav-item.active { color: var(--cyan); background: var(--cyan-glow); border: 1px solid rgba(0,212,255,0.2); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: white;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  font-family: var(--mono);
}

.sidebar-divider { width: 40px; height: 1px; background: var(--border); margin: 8px 0; }

.sidebar-session-wrap {
  margin-top: auto;
  width: calc(100% - 16px);
  padding-top: 8px;
}

.sidebar-session-wrap .market-status {
  width: 100%;
  min-height: 28px;
  padding: 0 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

body:not(.auth-hydrated) #sidebarAuthArea {
  visibility: hidden;
  pointer-events: none;
}

body.auth-hydrated #sidebarAuthArea {
  visibility: visible;
  pointer-events: auto;
}

/* ===== MAIN CONTENT ===== */
.main-content {
  --main-shell-gutter: clamp(14px, 1.6vw, 22px);
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  display: flex;
  flex-direction: column;
}

/* ===== SHARED PAGE HEADER ===== */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.page-head > div:first-child {
  min-width: min(480px, 100%);
}

.page-title {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-sub {
  color: var(--text-secondary);
  font-size: 12px;
}

.page-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.page-link {
  border: 1px solid var(--border-bright);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-link:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--cyan) 56%, var(--border-bright) 44%);
}

@media (max-width: 760px) {
  .page-head {
    align-items: flex-start;
  }

  .page-links {
    justify-content: flex-start;
    width: 100%;
  }

  .page-title {
    font-size: 20px;
  }
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.top-bar-left { display: flex; align-items: center; gap: 24px; }
.top-bar-title { font-family: var(--display); font-size: 13px; letter-spacing: 0.12em; color: var(--text-secondary); }

.price-live {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  padding: 8px 16px;
}

.price-label { font-family: var(--mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; }
.price-value { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
.price-change { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.price-change.up { color: var(--green); }
.price-change.down { color: var(--red); }
.price-change.neutral { color: var(--orange); }

.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.top-bar-right { display: flex; align-items: center; gap: 16px; }
.session-box {
  min-width: 230px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
}
.session-box .session-title {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.session-box .session-main {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-primary);
}
.session-box .session-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.market-status {
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.1em;
}

.market-status.open { background: rgba(0,255,136,0.1); color: var(--green); border: 1px solid rgba(0,255,136,0.3); }
.market-status.closed { background: rgba(255,51,102,0.1); color: var(--red); border: 1px solid rgba(255,51,102,0.3); }
.market-status.premarket { background: rgba(255,215,0,0.1); color: var(--gold); border: 1px solid rgba(255,215,0,0.3); }
.market-status.aftermarket { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); border: 1px solid color-mix(in srgb, var(--purple) 44%, var(--border-bright) 56%); }

.btn-refresh {
  background: none;
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  transition: all 0.2s;
}
.btn-refresh:not(.action-btn-refresh):hover { border-color: var(--cyan); color: var(--cyan); }

/* ===== PAGES ===== */
.page { display: none; padding: 28px; flex: 1; }
.page.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== CARDS ===== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent);
}

.card-title {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.card-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ===== GRID LAYOUTS ===== */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.dashboard-main-pair {
  align-items: stretch;
}

.dashboard-main-pair > .card {
  height: 100%;
}

/* ===== STAT CARDS ===== */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  position: relative;
}

.stat-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; font-family: var(--mono); margin-bottom: 8px; }
.stat-value { font-family: var(--mono); font-size: 24px; font-weight: 700; }
.stat-value.cyan { color: var(--cyan); }
.stat-value.green { color: var(--green); }
.stat-value.red { color: var(--red); }
.stat-value.gold { color: var(--gold); }
.stat-sub { font-size: 10px; color: var(--text-secondary); margin-top: 4px; font-family: var(--mono); }

/* ===== FORECAST CARDS ===== */
.forecast-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 16px; }

.day-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.day-card:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,212,255,0.1); }
.day-card.selected { border-color: var(--cyan); background: rgba(0,212,255,0.05); }
.day-card.bullish { border-top: 2px solid var(--green); }
.day-card.bearish { border-top: 2px solid var(--red); }
.day-card.neutral { border-top: 2px solid var(--gold); }

.day-label { font-family: var(--mono); font-size: 9px; color: var(--text-muted); letter-spacing: 0.15em; }
.day-date { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); margin: 4px 0; }
.day-price { font-family: var(--mono); font-size: 15px; font-weight: 700; margin: 6px 0; }
.day-change { font-family: var(--mono); font-size: 10px; }
.day-direction { font-size: 18px; margin: 4px 0; }
.day-confidence {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 10px;
}

.confidence-bar {
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.confidence-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }

.day-card.hintable {
  padding-bottom: 26px;
}

.day-card.hintable::after {
  content: 'CLICK FOR DETAILS';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--cyan);
  opacity: 0.88;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.day-card.hintable.selected::after { opacity: 0.88; }

.day-card.hintable:hover::after { opacity: 1; }

.dash-forecast-detail {
  margin-top: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.dash-forecast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dash-forecast-title {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.dash-forecast-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.dash-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 10px;
}

.dash-kpi {
  background: rgba(11,17,32,0.7);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

.dash-kpi-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.dash-kpi-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text-primary);
}

.prob-split {
  height: 8px;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 8px;
}

.prob-seg-bull { background: rgba(0,255,136,0.8); }
.prob-seg-bear { background: rgba(255,51,102,0.8); }
.prob-seg-neutral { background: rgba(255,215,0,0.8); }

.dash-reason-list {
  margin-top: 10px;
  border-top: 1px solid rgba(26,45,71,0.5);
  padding-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dash-reason {
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(10,17,32,0.55);
  border: 1px solid rgba(26,45,71,0.5);
  border-radius: 6px;
  padding: 7px 8px;
}

/* ===== OPTIONS ADVICE ===== */
.options-advice {
  background: linear-gradient(135deg, rgba(15,25,41,0.9), rgba(10,15,25,0.9));
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}

.advice-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.advice-type {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 6px 14px;
  border-radius: 6px;
}
.advice-type.call { background: rgba(0,255,136,0.15); color: var(--green); border: 1px solid rgba(0,255,136,0.3); }
.advice-type.put { background: rgba(255,51,102,0.15); color: var(--red); border: 1px solid rgba(255,51,102,0.3); }

.advice-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.advice-item { text-align: center; }
.advice-item-label { font-size: 9px; color: var(--text-muted); letter-spacing: 0.1em; font-family: var(--mono); margin-bottom: 6px; }
.advice-item-value { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--gold); }

/* ===== MINI CHART ===== */
.mini-chart-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  position: relative;
}

.mini-chart { width: 100%; height: 120px; position: relative; }

/* ===== SIMULATION PANEL ===== */
.sim-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.sim-label { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); width: 100px; }
.sim-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.sim-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
.sim-pct { font-family: var(--mono); font-size: 11px; width: 40px; text-align: right; }
.sim-fill.live { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }
.sim-fill.health { background: linear-gradient(90deg, var(--red-dim), var(--green)); }

.sim-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.sim-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sim-summary-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.sim-summary-card .label {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.sim-summary-card .value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sim-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.sim-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sim-dot {
  width: 12px;
  height: 2px;
  display: inline-block;
}

.sim-chart-shell {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 12px;
  padding: 8px 10px 10px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--bg-surface) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 92%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 10px 22px color-mix(in srgb, var(--bg-deep) 18%, transparent);
  overflow: hidden;
}

.sim-path-svg {
  display: block;
}

.sim-path-svg .sim-grid-line {
  stroke: color-mix(in srgb, var(--border) 72%, transparent);
  stroke-width: 1;
}

.sim-path-svg .sim-grid-vline {
  stroke: color-mix(in srgb, var(--border-bright) 34%, transparent);
  stroke-width: 1;
}

.sim-path-svg .sim-cone.outer {
  opacity: 0.56;
  animation: simConeBreathe 3.8s ease-in-out infinite;
}

.sim-path-svg .sim-cone.inner {
  opacity: 0.82;
  animation: simConeBreathe 3.1s ease-in-out infinite;
  animation-delay: 0.28s;
}

.sim-path-svg .sim-path-shadow {
  fill: none;
  stroke: color-mix(in srgb, var(--sim-line) 32%, transparent);
  stroke-width: 7.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
  filter: blur(1.8px);
}

.sim-path-svg .sim-path {
  fill: none;
  stroke: var(--sim-line);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--sim-len);
  stroke-dashoffset: var(--sim-len);
  animation: simPathDraw 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--sim-delay, 0s);
}

.sim-path-svg .sim-path-median {
  stroke-width: 2.7;
}

.sim-path-svg .sim-path-flat {
  stroke-width: 1.9;
  opacity: 0.92;
}

.sim-path-svg .sim-path-rider {
  fill: none;
  stroke: color-mix(in srgb, var(--sim-line) 76%, #ffffff 24%);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 12;
  stroke-dashoffset: 0;
  opacity: 0.9;
  animation: simRiderFlow 2.8s linear infinite;
  animation-delay: calc(var(--sim-delay, 0s) + 1.05s);
}

.sim-path-svg .sim-path-flat-rider {
  stroke-dasharray: 8 9;
  opacity: 0.76;
}

.sim-path-svg .sim-focus-line {
  stroke: color-mix(in srgb, var(--cyan) 60%, #ffffff 40%);
  stroke-width: 1.1;
  stroke-dasharray: 4 4;
  animation: simFocusLineBlink 1.9s ease-in-out infinite;
}

.sim-path-svg .sim-focus-point {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sim-pulse-color) 40%, transparent));
}

.sim-path-svg .sim-focus-point.sim-point-hit {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.2s ease;
}

.sim-path-svg .sim-focus-point.sim-point-hit:hover {
  transform: scale(1.18);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sim-pulse-color) 56%, transparent));
}

.sim-path-svg .sim-focus-point.selected {
  stroke: color-mix(in srgb, #ffffff 72%, var(--sim-pulse-color) 28%);
  stroke-width: 1.1;
}

.sim-path-svg .sim-focus-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--sim-pulse-color) 74%, #ffffff 26%);
  stroke-width: 1.3;
  opacity: 0;
  pointer-events: none;
}

.sim-path-svg .sim-focus-ring.active {
  opacity: 0.86;
}

.sim-path-svg .sim-focus-pulse {
  fill: none;
  stroke: var(--sim-pulse-color);
  stroke-width: 1.4;
  opacity: 0.64;
  transform-box: fill-box;
  transform-origin: center;
  animation: simFocusPulse 1.85s ease-out infinite;
  animation-delay: var(--sim-pulse-delay, 0s);
  pointer-events: none;
}

.sim-dot-detail {
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  padding: 9px 10px;
}

.sim-dot-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sim-dot-detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  color: var(--sim-dot-tone, var(--text-secondary));
}

.sim-dot-detail-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sim-dot-tone, var(--text-secondary));
  box-shadow: 0 0 8px color-mix(in srgb, var(--sim-dot-tone, var(--text-secondary)) 45%, transparent);
}

.sim-dot-detail-price {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sim-dot-detail-meta {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}

@keyframes simPathDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes simRiderFlow {
  to { stroke-dashoffset: -96; }
}

@keyframes simConeBreathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.84; }
}

@keyframes simFocusPulse {
  0% { transform: scale(0.72); opacity: 0.62; }
  72% { transform: scale(1.26); opacity: 0; }
  100% { transform: scale(1.26); opacity: 0; }
}

@keyframes simFocusLineBlink {
  0%, 100% { opacity: 0.44; }
  50% { opacity: 0.88; }
}

.sim-focus-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.sim-focus-btn {
  border: 1px solid var(--border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), color-mix(in srgb, var(--bg-hover) 92%, transparent));
  border-radius: 10px;
  padding: 8px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: grid;
  gap: 2px;
  text-align: left;
  min-height: 56px;
}

.sim-focus-btn-day {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

.sim-focus-btn-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.sim-focus-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-1px);
}

.sim-focus-btn:hover .sim-focus-btn-day,
.sim-focus-btn:hover .sim-focus-btn-meta {
  color: color-mix(in srgb, var(--cyan) 80%, #ffffff 20%);
}

.sim-focus-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--cyan) 20%, var(--bg-hover) 80%));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--cyan) 18%, transparent);
}

.sim-focus-btn.active .sim-focus-btn-day,
.sim-focus-btn.active .sim-focus-btn-meta {
  color: color-mix(in srgb, var(--cyan) 84%, #ffffff 16%);
}

.sim-focus-detail {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.sim-focus-detail-head {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cyan);
  margin-bottom: 10px;
}

.sim-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sim-focus-cell {
  border: 1px solid color-mix(in srgb, var(--border-bright) 56%, transparent);
  border-radius: 10px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg-hover) 86%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent));
  padding: 10px;
}

.sim-focus-cell:last-child {
  border-right: 1px solid color-mix(in srgb, var(--border-bright) 56%, transparent);
  padding-right: 10px;
}

.sim-focus-line {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.sim-focus-line.tone-bull { color: var(--green); }
.sim-focus-line.tone-neutral { color: var(--gold); }
.sim-focus-line.tone-bear { color: var(--red); }
.sim-focus-line.tone-primary { color: var(--text-primary); }
.sim-focus-line.tone-secondary { color: var(--text-secondary); }

/* ===== SIMULATIONS MODERN REFRESH ===== */
#page-simulations {
  --sim-shell-bg: #ffffff;
  --sim-shell-border: #e2e8f0;
  --sim-shell-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-simulations .simv2-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-simulations .simv2-section-head {
  border-bottom: 1px solid #e2e8f0;
  padding: 0 2px 10px;
}

#page-simulations .simv2-section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

#page-simulations .simv2-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-simulations .simv2-prob-card {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--sim-shell-shadow);
  padding: 18px 16px;
  text-align: center;
}

#page-simulations .simv2-prob-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-simulations .simv2-prob-value {
  display: block;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#page-simulations .simv2-prob-sub {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

#page-simulations .simv2-prob-bull .simv2-prob-value {
  color: #16a34a;
}

#page-simulations .simv2-prob-flat .simv2-prob-value {
  color: #f59e0b;
}

#page-simulations .simv2-prob-bear .simv2-prob-value {
  color: #e11d48;
}

#page-simulations .simv2-card {
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: var(--sim-shell-shadow);
  padding: 18px;
}

#page-simulations .simv2-card-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

#page-simulations .simv2-dist-card,
#page-simulations .simv2-situation-card {
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: var(--sim-shell-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

#page-simulations .simv2-dist-card-title,
#page-simulations .simv2-situation-card-title {
  display: block;
  margin: 0 0 20px;
  padding-left: 2px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6b7280;
}

#page-simulations .simv2-dist-card-title::after,
#page-simulations .simv2-situation-card-title::after {
  display: none;
  content: none;
}

#page-simulations #simLiveLearningPanel,
#page-simulations #scenarioDistPanel,
#page-simulations #situationPanel,
#page-simulations #multiScenarioPanel {
  margin-top: 10px;
}

#page-simulations .simv2-dist-card #scenarioDistPanel,
#page-simulations .simv2-situation-card #situationPanel {
  margin-top: 0;
  flex: 1;
  display: flex;
  min-height: 0;
}

#page-simulations .simv2-learning-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#page-simulations .simv2-learning-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#page-simulations .simv2-learning-label {
  width: 156px;
  min-width: 156px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #64748b;
}

#page-simulations .simv2-learning-track {
  flex: 1;
  height: 10px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

#page-simulations .simv2-learning-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.9s ease;
}

#page-simulations .simv2-learning-fill.fit {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
}

#page-simulations .simv2-learning-fill.pace {
  background: #38bdf8;
}

#page-simulations .simv2-learning-fill.freshness {
  background: #38bdf8;
}

#page-simulations .simv2-learning-pct {
  width: 34px;
  min-width: 34px;
  text-align: right;
  font-size: 10px;
  font-weight: 900;
  color: #0f172a;
}

#page-simulations .simv2-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-simulations .simv2-dist-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
}

#page-simulations .simv2-dist-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 2px;
}

#page-simulations .simv2-dist-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

#page-simulations .simv2-dist-label {
  width: 98px;
  min-width: 98px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-simulations .simv2-dist-label.bull,
#page-simulations .simv2-dist-pct.bull {
  color: #059669;
}

#page-simulations .simv2-dist-label.flat,
#page-simulations .simv2-dist-pct.flat {
  color: #ea580c;
}

#page-simulations .simv2-dist-label.bear,
#page-simulations .simv2-dist-pct.bear {
  color: #e11d48;
}

#page-simulations .simv2-dist-track {
  flex: 1;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  background: rgba(241, 245, 249, 0.92);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

#page-simulations .simv2-dist-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 1s ease;
}

#page-simulations .simv2-dist-fill.bull {
  background: linear-gradient(90deg, #34d399, #10b981);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.34);
}

#page-simulations .simv2-dist-fill.flat {
  background: linear-gradient(90deg, #fb923c, #f97316);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.3);
}

#page-simulations .simv2-dist-fill.bear {
  background: linear-gradient(90deg, #fb7185, #f43f5e);
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.32);
}

#page-simulations .simv2-dist-pct {
  width: 40px;
  min-width: 40px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
}

#page-simulations .simv2-dist-divider {
  width: 100%;
  height: 1px;
  margin: 18px 0 16px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(226, 232, 240, 0.98), rgba(148, 163, 184, 0));
}

#page-simulations .simv2-dist-metrics {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  flex: 1;
  display: flex;
  min-height: 0;
}

#page-simulations .simv2-dist-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 0;
  align-content: stretch;
}

#page-simulations .simv2-dist-metric-card {
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.54);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
}

#page-simulations .simv2-dist-metric-card span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}

#page-simulations .simv2-dist-metric-card strong {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #0f172a;
}

#page-simulations .simv2-dist-metric-card strong.bull {
  color: #059669;
}

#page-simulations .simv2-dist-metric-card strong.flat {
  color: #ea580c;
}

#page-simulations .simv2-dist-metric-card strong.bear {
  color: #e11d48;
}

#page-simulations .simv2-dist-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

#page-simulations .simv2-dist-badge.bull {
  border-color: rgba(16, 185, 129, 0.14);
  background: #ecfdf5;
  color: #059669;
}

#page-simulations .simv2-dist-badge.flat {
  border-color: rgba(249, 115, 22, 0.16);
  background: #fff7ed;
  color: #ea580c;
}

#page-simulations .simv2-dist-badge.bear {
  border-color: rgba(244, 63, 94, 0.14);
  background: #fff1f2;
  color: #e11d48;
}

#page-simulations .simv2-situation-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 12px;
}

#page-simulations .simv2-situation-row {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  min-height: 92px;
  padding: 17px 18px;
  background: linear-gradient(90deg, rgba(248, 250, 252, 0.88), rgba(255, 255, 255, 0.44));
}

#page-simulations .simv2-situation-row.is-up {
  background: linear-gradient(90deg, rgba(236, 253, 245, 0.82), rgba(255, 255, 255, 0.42));
  border-color: rgba(16, 185, 129, 0.24);
}

#page-simulations .simv2-situation-row.is-neutral {
  background: linear-gradient(90deg, rgba(255, 247, 237, 0.82), rgba(255, 255, 255, 0.42));
  border-color: rgba(249, 115, 22, 0.22);
}

#page-simulations .simv2-situation-row.is-down {
  background: linear-gradient(90deg, rgba(255, 241, 242, 0.82), rgba(255, 255, 255, 0.42));
  border-color: rgba(244, 63, 94, 0.22);
}

#page-simulations .simv2-situation-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}

#page-simulations .simv2-situation-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

#page-simulations .simv2-situation-icon.is-up {
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

#page-simulations .simv2-situation-icon.is-neutral {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

#page-simulations .simv2-situation-icon.is-down {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.38);
}

#page-simulations .simv2-situation-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#page-simulations .simv2-situation-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #111827;
}

#page-simulations .simv2-situation-title.is-up {
  color: #022c22;
}

#page-simulations .simv2-situation-title.is-neutral {
  color: #7c2d12;
}

#page-simulations .simv2-situation-title.is-down {
  color: #4c0519;
}

#page-simulations .simv2-situation-desc {
  font-size: 15px;
  line-height: 1.35;
  color: #6b7280;
}

#page-simulations .sim-chart-shell {
  border-radius: 16px;
  padding: 10px 12px 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

#page-simulations .sim-dot-detail,
#page-simulations .sim-focus-detail,
#page-simulations .report-card,
#page-simulations .report-row {
  border-color: #e2e8f0;
}

#page-simulations .sim-focus-days {
  gap: 8px;
}

#page-simulations .sim-focus-btn {
  border-radius: 12px;
  min-height: 58px;
}

#page-simulations .sim-focus-btn.active {
  box-shadow: none;
}

#page-simulations .sim-focus-cell {
  border-radius: 12px;
}

/* ===== SIMULATION PATHS (1:1 refresh) ===== */
#page-simulations .simv2p-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-simulations .simv2p-topstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#page-simulations .simv2p-stat-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  min-height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#page-simulations .simv2p-stat-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 4px;
}

#page-simulations .simv2p-stat-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
}

#page-simulations .simv2p-stat-value.is-bull { color: #10b981; }
#page-simulations .simv2p-stat-value.is-bear { color: #f43f5e; }
#page-simulations .simv2p-stat-value.is-flat { color: #f59e0b; }
#page-simulations .simv2p-stat-value.is-neutral { color: #0f172a; }

#page-simulations .simv2p-graph-card {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-simulations .simv2p-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}

#page-simulations .simv2p-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

#page-simulations .simv2p-legend .dot {
  width: 12px;
  height: 4px;
  border-radius: 999px;
  display: inline-block;
}

#page-simulations .simv2p-legend .dot.median { background: #0ea5e9; }
#page-simulations .simv2p-legend .dot.bull { background: #10b981; }
#page-simulations .simv2p-legend .dot.bear { background: #f43f5e; }
#page-simulations .simv2p-legend .dot.flat { background: #f59e0b; }
#page-simulations .simv2p-legend .dot.cone {
  background: #bae6fd;
  border: 1px solid #bae6fd;
}

#page-simulations .simv2p-cone-pill {
  margin-left: auto;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 10px;
  background: #ffffff;
}

#page-simulations .simv2p-chart-wrap {
  position: relative;
  height: 360px;
  background: #ffffff;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

#page-simulations .simv2p-svg {
  position: absolute;
  inset: 0;
  display: block;
}

#page-simulations .simv2p-tooltip {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -120%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#page-simulations .simv2p-tooltip.show {
  opacity: 1;
  transform: translate(-50%, -120%) scale(1);
}

#page-simulations .simv2p-tooltip-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 8px 10px;
}

#page-simulations .simv2p-tooltip-inner span {
  font-size: 10px;
  font-weight: 800;
  color: #cbd5e1;
  letter-spacing: 0.08em;
}

#page-simulations .simv2p-tooltip-inner strong {
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
}

#page-simulations .simv2p-tooltip-arrow {
  display: block;
  width: 10px;
  height: 10px;
  margin: -5px auto 0;
  background: rgba(15, 23, 42, 0.95);
  border-right: 1px solid #334155;
  border-bottom: 1px solid #334155;
  transform: rotate(45deg);
}

#page-simulations .simv2p-axis-y text,
#page-simulations .simv2p-axis-x text {
  font-family: var(--font-sans);
  font-size: 10px;
  fill: #94a3b8;
}

#page-simulations .simv2p-axis-y text {
  text-anchor: end;
  font-weight: 600;
}

#page-simulations .simv2p-axis-x text {
  text-anchor: middle;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#page-simulations .simv2p-axis-x text.active {
  fill: #0ea5e9;
}

#page-simulations .simv2p-active-zone {
  fill: #f8fafc;
  opacity: 0.72;
}

#page-simulations .simv2p-crosshair line {
  stroke: #94a3b8;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

#page-simulations .simv2p-crosshair {
  opacity: 0;
  transition: opacity 0.2s ease;
}

#page-simulations .simv2p-crosshair.show {
  opacity: 1;
}

#page-simulations .simv2p-y-pill {
  opacity: 0;
  transition: opacity 0.2s ease;
}

#page-simulations .simv2p-y-pill.show {
  opacity: 1;
}

#page-simulations .simv2p-y-pill rect,
#page-simulations .simv2p-y-pill polygon {
  fill: #0ea5e9;
}

#page-simulations .simv2p-y-pill text {
  fill: #ffffff;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
}

#page-simulations .simv2p-base-line {
  stroke: #e2e8f0;
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

#page-simulations .simv2p-cone {
  animation: simv2pConeFade 1.2s ease-out both;
}

#page-simulations .simv2p-median-area {
  animation: simv2pAreaFade 1.2s ease-out both;
}

#page-simulations .simv2p-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--simv2p-len);
  stroke-dashoffset: var(--simv2p-len);
  animation: simv2pPathDraw 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#page-simulations .simv2p-line.flat {
  stroke: #f59e0b;
  stroke-width: 2;
  stroke-dasharray: 8 8;
  opacity: 0.75;
}

#page-simulations .simv2p-line.bear {
  stroke: #f43f5e;
}

#page-simulations .simv2p-line.bull {
  stroke: #10b981;
}

#page-simulations .simv2p-line.median {
  stroke: #0ea5e9;
  stroke-width: 3;
}

#page-simulations .simv2p-node {
  fill: #ffffff;
  stroke-width: 2.5;
}

#page-simulations .simv2p-node.bull { stroke: #10b981; }
#page-simulations .simv2p-node.bear { stroke: #f43f5e; }
#page-simulations .simv2p-node.median {
  fill: #0ea5e9;
  stroke: #ffffff;
}

#page-simulations .simv2p-node-glow {
  fill: #0ea5e9;
  opacity: 0.15;
}

#page-simulations .simv2p-info-bar {
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  padding: 10px 14px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

#page-simulations .simv2p-info-bar strong {
  color: #334155;
  font-weight: 800;
}

#page-simulations .simv2p-info-bar span {
  color: #cbd5e1;
  margin: 0 8px;
}

#page-simulations .simv2p-day-pills {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  overflow: hidden;
  padding-bottom: 2px;
}

#page-simulations .simv2p-day-pills::-webkit-scrollbar {
  display: none;
}

#page-simulations .simv2p-day-pill {
  min-width: 0;
  width: 100%;
  border: 2px solid #f1f5f9;
  border-radius: 16px;
  background: #ffffff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

#page-simulations .simv2p-day-pill:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
}

#page-simulations .simv2p-day-pill.active {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.06);
}

#page-simulations .simv2p-day-pill-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f172a;
}

#page-simulations .simv2p-day-pill.active .simv2p-day-pill-label {
  color: #0ea5e9;
}

#page-simulations .simv2p-day-pill-date {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
}

#page-simulations .simv2p-day-pill.active .simv2p-day-pill-date {
  color: #0284c7;
}

#page-simulations .simv2p-focus-card {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-simulations .simv2p-focus-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #88c0eb;
  margin-bottom: 12px;
}

#page-simulations .simv2p-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#page-simulations .simv2p-focus-col {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: 12px;
}

#page-simulations .simv2p-focus-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}

#page-simulations .simv2p-mini-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid #e2e8f0;
  gap: 10px;
}

#page-simulations .simv2p-mini-row.is-last {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

#page-simulations .simv2p-mini-row span {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

#page-simulations .simv2p-mini-row strong {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  text-align: right;
}

#page-simulations .simv2p-mini-row strong.is-bull { color: #10b981; }
#page-simulations .simv2p-mini-row strong.is-bear { color: #f43f5e; }
#page-simulations .simv2p-mini-row strong.is-flat { color: #f59e0b; }

@keyframes simv2pPathDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes simv2pConeFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes simv2pAreaFade {
  from { opacity: 0; transform: scaleY(0.96); transform-origin: bottom; }
  to { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
}

html[data-theme='light'] #page-simulations .simv2-prob-card,
html[data-theme='light'] #page-simulations .simv2-card {
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent);
}

html[data-theme='light'] #page-simulations .simv2-dist-card,
html[data-theme='light'] #page-simulations .simv2-situation-card {
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent);
}

@media (max-width: 1024px) {
  #page-simulations .simv2-top-grid,
  #page-simulations .simv2-bottom-grid {
    grid-template-columns: 1fr;
  }

  #page-simulations .simv2-learning-label {
    width: 132px;
    min-width: 132px;
  }

  #page-simulations .simv2p-topstats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-simulations .simv2p-day-pills {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #page-simulations .simv2p-day-pill {
    min-width: 122px;
    width: auto;
  }

  #page-simulations .simv2p-focus-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  #page-simulations .simv2-prob-card {
    padding: 16px 14px;
  }

  #page-simulations .simv2-prob-value {
    font-size: 28px;
  }

  #page-simulations .simv2-learning-row,
  #page-simulations .simv2-dist-row {
    gap: 8px;
  }

  #page-simulations .simv2-learning-label,
  #page-simulations .simv2-dist-label {
    width: 84px;
    min-width: 84px;
    font-size: 9px;
  }

  #page-simulations .simv2-dist-track {
    height: 12px;
  }

  #page-simulations .simv2-dist-pct {
    width: 36px;
    min-width: 36px;
    font-size: 13px;
  }

  #page-simulations .simv2-dist-metric-card {
    min-height: 64px;
    padding: 11px 12px;
    border-radius: 16px;
  }

  #page-simulations .simv2-dist-metric-card strong {
    font-size: 15px;
  }

  #page-simulations .simv2-dist-card,
  #page-simulations .simv2-situation-card {
    border-radius: 20px;
    padding: 20px 18px;
  }

  #page-simulations .simv2-situation-row {
    align-items: flex-start;
    gap: 12px;
    min-height: 0;
    padding: 16px;
  }

  #page-simulations .simv2-situation-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  #page-simulations .simv2-situation-title {
    font-size: 16px;
  }

  #page-simulations .simv2-situation-desc {
    font-size: 14px;
  }

  #page-simulations .simv2p-topstats {
    grid-template-columns: 1fr;
  }

  #page-simulations .simv2p-chart-wrap {
    height: 320px;
  }

  #page-simulations .simv2p-info-bar {
    font-size: 10px;
    line-height: 1.45;
  }
}

@media (max-width: 420px) {
  #page-simulations .simv2-dist-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== SIMULATIONS: MULTI-SCENARIO PATHS UI REFRESH ===== */
#page-simulations .simv3p-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#page-simulations .simv3p-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#page-simulations .simv3p-stat-card,
#page-simulations .simv3p-chart-card,
#page-simulations .simv3p-focus-shell,
#page-simulations .simv3p-day-pill,
#page-simulations .simv3p-panel {
  border: 1px solid #dbe5f0;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

#page-simulations .simv3p-stat-card {
  border-radius: 18px;
  padding: 18px 20px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#page-simulations .simv3p-stat-label {
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#page-simulations .simv3p-stat-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

#page-simulations .simv3p-stat-icon {
  width: 20px;
  height: 20px;
}

#page-simulations .simv3p-stat-value.is-bull { color: #10b981; }
#page-simulations .simv3p-stat-value.is-bear { color: #f43f5e; }
#page-simulations .simv3p-stat-value.is-flat { color: #f59e0b; }
#page-simulations .simv3p-stat-value.is-neutral { color: #0f172a; }

#page-simulations .simv3p-chart-card {
  border-radius: 28px;
  overflow: hidden;
}

#page-simulations .simv3p-chart-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid #edf2f7;
  background: linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

#page-simulations .simv3p-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

#page-simulations .simv3p-legend span,
#page-simulations .simv3p-cone-pill,
#page-simulations .simv3p-tooltip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page-simulations .simv3p-legend span,
#page-simulations .simv3p-cone-pill {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#page-simulations .simv3p-legend-swatch {
  width: 14px;
  height: 4px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
}

#page-simulations .simv3p-legend-swatch.tone-median { background: #1d9bf0; }
#page-simulations .simv3p-legend-swatch.tone-bull { background: #10b981; }
#page-simulations .simv3p-legend-swatch.tone-bear { background: #f43f5e; }
#page-simulations .simv3p-legend-swatch.tone-flat { background: #f59e0b; }
#page-simulations .simv3p-legend-swatch.tone-cone { background: #bae6fd; }

#page-simulations .simv3p-cone-pill {
  margin-left: auto;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid #dbe5f0;
  background: #ffffff;
}

#page-simulations .simv3p-chart-section {
  display: flex;
  flex-direction: column;
}

#page-simulations .simv3p-chart-wrapper {
  --simv3p-axis-width: 88px;
  --simv3p-pad-x: 22px;
  --simv3p-pad-top: 24px;
  --simv3p-pad-bottom: 60px;
  position: relative;
  height: 400px;
  background: #ffffff;
}

#page-simulations .simv3p-y-axis {
  position: absolute;
  left: var(--simv3p-pad-x);
  top: var(--simv3p-pad-top);
  bottom: var(--simv3p-pad-bottom);
  width: var(--simv3p-axis-width);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 12px;
  z-index: 3;
}

#page-simulations .simv3p-y-axis span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

#page-simulations .simv3p-grid-lines,
#page-simulations .simv3p-plot-overlay {
  position: absolute;
  left: calc(var(--simv3p-pad-x) + var(--simv3p-axis-width));
  right: var(--simv3p-pad-x);
  top: var(--simv3p-pad-top);
  bottom: var(--simv3p-pad-bottom);
}

#page-simulations .simv3p-grid-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  pointer-events: none;
}

#page-simulations .simv3p-grid-line {
  width: 100%;
  border-top: 1px dashed #e8eef7;
}

#page-simulations .simv3p-x-axis {
  position: absolute;
  left: calc(var(--simv3p-pad-x) + var(--simv3p-axis-width));
  right: var(--simv3p-pad-x);
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  z-index: 3;
}

#page-simulations .simv3p-x-label {
  flex: 1 1 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

#page-simulations .simv3p-x-label.active {
  color: #1d9bf0;
}

#page-simulations .simv3p-plot-overlay {
  z-index: 2;
}

#page-simulations .simv3p-chart-svg-container,
#page-simulations .simv3p-interaction-overlay {
  position: absolute;
  inset: 0;
}

#page-simulations .simv3p-chart-svg {
  display: block;
}

#page-simulations .simv3p-interaction-overlay {
  z-index: 7;
  cursor: crosshair;
  touch-action: none;
}

#page-simulations .simv3p-crosshair-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--simv3p-band-width, 14.285%);
  z-index: 6;
  pointer-events: none;
  transform: translateX(-50%);
  transition: left 0.1s ease-out;
}

#page-simulations .simv3p-crosshair-band {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.1) 0%, rgba(226, 232, 240, 0.78) 100%);
}

#page-simulations .simv3p-crosshair-line {
  position: absolute;
  left: calc(50% - 1px);
  top: -8px;
  bottom: -8px;
  width: 2px;
  border-radius: 999px;
  background: #1d9bf0;
  box-shadow: 0 0 14px rgba(29, 155, 240, 0.36);
}

@keyframes simv3pPulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(var(--simv3p-dot-rgb), 0.42); }
  70% { box-shadow: 0 0 0 10px rgba(var(--simv3p-dot-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--simv3p-dot-rgb), 0); }
}

#page-simulations .simv3p-data-dot {
  position: absolute;
  left: calc(50% - 6.5px);
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid;
  transition: top 0.1s ease-out;
  animation: simv3pPulseGlow 2s infinite;
}

#page-simulations .simv3p-data-dot.tone-bull {
  border-color: #10b981;
  --simv3p-dot-rgb: 16, 185, 129;
}

#page-simulations .simv3p-data-dot.tone-median {
  border-color: #1d9bf0;
  --simv3p-dot-rgb: 29, 155, 240;
  z-index: 2;
}

#page-simulations .simv3p-data-dot.tone-bear {
  border-color: #f43f5e;
  --simv3p-dot-rgb: 244, 63, 94;
}

#page-simulations .simv3p-tooltip {
  position: absolute;
  top: 14%;
  width: 164px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.28), 0 10px 22px -12px rgba(15, 23, 42, 0.12);
}

#page-simulations .simv3p-crosshair-container.align-left .simv3p-tooltip {
  left: calc(50% + 18px);
}

#page-simulations .simv3p-crosshair-container.align-right .simv3p-tooltip {
  right: calc(50% + 18px);
}

#page-simulations .simv3p-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

#page-simulations .simv3p-tooltip-day {
  color: #1d9bf0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-simulations .simv3p-tooltip-date {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

#page-simulations .simv3p-tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}

#page-simulations .simv3p-tooltip-row:last-child {
  margin-bottom: 0;
}

#page-simulations .simv3p-tooltip-label {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

#page-simulations .simv3p-tooltip-value {
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

#page-simulations .simv3p-tooltip-value.tone-bull { color: #10b981; }
#page-simulations .simv3p-tooltip-value.tone-median { color: #1d9bf0; }
#page-simulations .simv3p-tooltip-value.tone-bear { color: #f43f5e; }

#page-simulations .simv3p-info-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px 16px;
  border-top: 1px solid #edf2f7;
  background: #f8fafc;
}

#page-simulations .simv3p-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

#page-simulations .simv3p-info-pill strong {
  color: #334155;
  font-weight: 800;
}

#page-simulations .simv3p-info-icon {
  width: 14px;
  height: 14px;
  color: #3b82f6;
}

#page-simulations .simv3p-info-divider {
  width: 1px;
  height: 16px;
  background: #e2e8f0;
}

#page-simulations .simv3p-day-pills {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}

#page-simulations .simv3p-day-pill {
  border-radius: 22px;
  padding: 17px 12px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#page-simulations .simv3p-day-pill:hover {
  transform: translateY(-1px);
  border-color: #c6d5e6;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

#page-simulations .simv3p-day-pill.active {
  border-color: #1d9bf0;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.08), rgba(14, 165, 233, 0.04));
  box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.14), 0 10px 28px rgba(29, 155, 240, 0.14);
}

#page-simulations .simv3p-day-pill-label {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#page-simulations .simv3p-day-pill.active .simv3p-day-pill-label {
  color: #1d9bf0;
}

#page-simulations .simv3p-day-pill-date {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

#page-simulations .simv3p-day-pill.active .simv3p-day-pill-date {
  color: #0284c7;
}

#page-simulations .simv3p-focus-shell {
  border-radius: 28px;
  padding: 24px 22px 26px;
}

#page-simulations .simv3p-focus-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#page-simulations .simv3p-focus-state,
#page-simulations .simv3p-focus-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#page-simulations .simv3p-focus-state.tone-preview {
  color: #1d9bf0;
}

#page-simulations .simv3p-focus-state.tone-locked {
  color: #10b981;
}

#page-simulations .simv3p-focus-date {
  color: #0f172a;
}

#page-simulations .simv3p-focus-icon,
#page-simulations .simv3p-focus-sep-icon {
  width: 16px;
  height: 16px;
}

#page-simulations .simv3p-focus-sep {
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
}

#page-simulations .simv3p-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#page-simulations .simv3p-panel {
  border-radius: 20px;
  overflow: hidden;
}

#page-simulations .simv3p-panel-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid #edf2f7;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-simulations .simv3p-panel-body {
  padding: 10px 18px 14px;
}

#page-simulations .simv3p-panel--probability .simv3p-panel-body {
  padding-top: 8px;
  padding-bottom: 12px;
}

#page-simulations .simv3p-prob-row {
  padding: 14px 0;
  border-bottom: 1px solid #edf2f7;
}

#page-simulations .simv3p-prob-row.is-last {
  border-bottom: 0;
}

#page-simulations .simv3p-prob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

#page-simulations .simv3p-prob-head strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#page-simulations .simv3p-prob-head strong.tone-bull { color: #10b981; }
#page-simulations .simv3p-prob-head strong.tone-bear { color: #f43f5e; }
#page-simulations .simv3p-prob-head strong.tone-flat { color: #f59e0b; }

#page-simulations .simv3p-prob-track {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0, #f8fafc);
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.18);
}

#page-simulations .simv3p-prob-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  transform-origin: left center;
}

#page-simulations .simv3p-shell.is-animate-in .simv3p-prob-fill {
  animation: simv3pProbReveal 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#page-simulations .simv3p-prob-fill.tone-bull {
  background: linear-gradient(90deg, #6ee7b7 0%, #10b981 58%, #059669 100%);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.24);
}

#page-simulations .simv3p-prob-fill.tone-flat {
  background: linear-gradient(90deg, #fde68a 0%, #f59e0b 58%, #d97706 100%);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.22);
}

#page-simulations .simv3p-prob-fill.tone-bear {
  background: linear-gradient(90deg, #fda4af 0%, #f43f5e 58%, #e11d48 100%);
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.22);
}

#page-simulations .simv3p-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f7;
}

#page-simulations .simv3p-panel-row.is-last {
  border-bottom: 0;
}

#page-simulations .simv3p-panel-label {
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

#page-simulations .simv3p-panel-row strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#page-simulations .simv3p-panel-row strong.tone-bull { color: #10b981; }
#page-simulations .simv3p-panel-row strong.tone-bear { color: #f43f5e; }
#page-simulations .simv3p-panel-row strong.tone-flat { color: #f59e0b; }
#page-simulations .simv3p-panel-row strong.tone-indigo { color: #4f46e5; }

@keyframes simv3pProbReveal {
  from {
    transform: scaleX(0);
    opacity: 0.35;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes simv3pProbFlow {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

#page-simulations .simv3p-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

#page-simulations .simv3p-badge.tone-bull {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

#page-simulations .simv3p-badge.tone-bear {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #e11d48;
}

@media (max-width: 1024px) {
  #page-simulations .simv3p-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-simulations .simv3p-focus-grid {
    grid-template-columns: 1fr;
  }

  #page-simulations .simv3p-day-pills {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  #page-simulations .simv3p-day-pills::-webkit-scrollbar {
    display: none;
  }

  #page-simulations .simv3p-day-pill {
    min-width: 170px;
    flex: 0 0 auto;
  }
}

@media (max-width: 720px) {
  #page-simulations .simv3p-stats-row {
    grid-template-columns: 1fr;
  }

  #page-simulations .simv3p-chart-topbar,
  #page-simulations .simv3p-info-bar,
  #page-simulations .simv3p-focus-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #page-simulations .simv3p-cone-pill {
    margin-left: 0;
  }

  #page-simulations .simv3p-chart-wrapper {
    --simv3p-axis-width: 62px;
    height: 360px;
  }

  #page-simulations .simv3p-tooltip {
    width: 148px;
  }

  #page-simulations .simv3p-info-divider {
    display: none;
  }

  #page-simulations .simv3p-panel-row {
    align-items: flex-start;
    flex-direction: column;
  }

  #page-simulations .simv3p-prob-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  #page-simulations .simv3p-chart-wrapper {
    --simv3p-axis-width: 52px;
    --simv3p-pad-x: 14px;
    --simv3p-pad-top: 18px;
    --simv3p-pad-bottom: 54px;
    height: 328px;
  }

  #page-simulations .simv3p-y-axis span,
  #page-simulations .simv3p-x-label {
    font-size: 10px;
  }

  #page-simulations .simv3p-tooltip {
    width: 136px;
    padding: 12px;
  }

  #page-simulations .simv3p-tooltip-header,
  #page-simulations .simv3p-tooltip-row {
    gap: 6px;
  }

  #page-simulations .simv3p-focus-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
}

html[data-theme='dark'] #page-simulations .simv3p-stat-card,
html[data-theme='dark'] #page-simulations .simv3p-chart-card,
html[data-theme='dark'] #page-simulations .simv3p-day-pill,
html[data-theme='dark'] #page-simulations .simv3p-focus-shell,
html[data-theme='dark'] #page-simulations .simv3p-panel,
html[data-theme='dark'] #page-simulations .simv3p-cone-pill,
html[data-theme='dark'] #page-simulations .simv3p-tooltip {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
  box-shadow:
    0 18px 34px color-mix(in srgb, #000000 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-chart-topbar,
html[data-theme='dark'] #page-simulations .simv3p-panel-header,
html[data-theme='dark'] #page-simulations .simv3p-info-bar {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-chart-wrapper {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.92));
}

html[data-theme='dark'] #page-simulations .simv3p-stat-label,
html[data-theme='dark'] #page-simulations .simv3p-legend span,
html[data-theme='dark'] #page-simulations .simv3p-cone-pill,
html[data-theme='dark'] #page-simulations .simv3p-y-axis span,
html[data-theme='dark'] #page-simulations .simv3p-x-label,
html[data-theme='dark'] #page-simulations .simv3p-panel-header,
html[data-theme='dark'] #page-simulations .simv3p-panel-label,
html[data-theme='dark'] #page-simulations .simv3p-info-pill,
html[data-theme='dark'] #page-simulations .simv3p-tooltip-date {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-simulations .simv3p-stat-value.is-neutral,
html[data-theme='dark'] #page-simulations .simv3p-day-pill-label,
html[data-theme='dark'] #page-simulations .simv3p-focus-date,
html[data-theme='dark'] #page-simulations .simv3p-panel-row strong,
html[data-theme='dark'] #page-simulations .simv3p-info-pill strong {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-simulations .simv3p-grid-line {
  border-color: color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-crosshair-band {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.02) 0%, rgba(56, 189, 248, 0.16) 100%);
}

html[data-theme='dark'] #page-simulations .simv3p-crosshair-line {
  background: color-mix(in srgb, var(--cyan) 72%, #ffffff 28%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 26%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-day-pill:hover {
  border-color: color-mix(in srgb, var(--border-bright) 76%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-day-pill.active {
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-card) 88%);
  border-color: color-mix(in srgb, var(--cyan) 54%, var(--border-bright) 46%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 20%, transparent),
    0 18px 36px color-mix(in srgb, #000000 24%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-day-pill.active .simv3p-day-pill-date {
  color: color-mix(in srgb, var(--cyan) 72%, #ffffff 28%);
}

html[data-theme='dark'] #page-simulations .simv3p-info-divider,
html[data-theme='dark'] #page-simulations .simv3p-panel-row,
html[data-theme='dark'] #page-simulations .simv3p-prob-row,
html[data-theme='dark'] #page-simulations .simv3p-tooltip-header {
  border-color: color-mix(in srgb, var(--border-bright) 60%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-info-divider {
  background: color-mix(in srgb, var(--border-bright) 60%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-prob-track {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.94));
  box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.56);
}

@media (prefers-reduced-motion: reduce) {
  #page-simulations .simv3p-prob-fill,
  #page-simulations .simv3p-prob-fill::after {
    animation: none;
  }
}

html[data-theme='dark'] #page-simulations .simv3p-tooltip {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
}

html[data-theme='dark'] #page-simulations .simv3p-tooltip-day {
  color: color-mix(in srgb, var(--cyan) 72%, #ffffff 28%);
}

html[data-theme='dark'] #page-simulations .simv3p-tooltip-label {
  color: #cbd5e1;
}

html[data-theme='dark'] #page-simulations .simv3p-badge.tone-bull {
  background: color-mix(in srgb, #10b981 18%, var(--bg-card) 82%);
  border-color: color-mix(in srgb, #10b981 48%, transparent);
}

html[data-theme='dark'] #page-simulations .simv3p-badge.tone-bear {
  background: color-mix(in srgb, #f43f5e 18%, var(--bg-card) 82%);
  border-color: color-mix(in srgb, #f43f5e 48%, transparent);
}

/* ===== PREDICTION HISTORY (1:1 refresh) ===== */
#page-history .historyv2-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#page-history .historyv2-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 2px 0;
}

#page-history .historyv2-topbar-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#page-history .historyv2-topbar-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

#page-history .historyv2-topbar-count {
  min-width: 34px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #0ea5e9;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(14, 165, 233, 0.12);
}

#page-history .historyv2-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#page-history .historyv2-pill-action {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  padding: 0 18px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.16s ease;
}

#page-history .historyv2-pill-action:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
  transform: translateY(-1px);
}

#page-history .historyv2-pill-action.is-clear:hover {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

#page-history .historyv2-info-banner {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#page-history .historyv2-info-banner-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
  color: #64748b;
}

#page-history .historyv2-window-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#page-history .historyv2-window-card {
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-history .historyv2-window-head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-bottom: 1px solid #f1f5f9;
  background: rgba(248, 250, 252, 0.62);
  cursor: pointer;
}

#page-history .historyv2-window-head-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

#page-history .historyv2-ticker-pill {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #d1fae5;
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-history .historyv2-ticker-pill.is-orange {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #ea580c;
}

#page-history .historyv2-meta-block {
  display: grid;
  gap: 2px;
}

#page-history .historyv2-meta-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-history .historyv2-meta-value {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}

#page-history .historyv2-window-metrics {
  display: inline-flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

#page-history .historyv2-metric-col {
  display: grid;
  gap: 3px;
  min-width: 150px;
}

#page-history .historyv2-metric-col.is-inline {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 200px;
}

#page-history .historyv2-meta-strong {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}

#page-history .historyv2-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  width: fit-content;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #e11d48;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#page-history .historyv2-status-pill.is-open {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #059669;
}

#page-history .historyv2-status-pill.is-after {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #e11d48;
}

#page-history .historyv2-status-pill.is-pre {
  border-color: #fde68a;
  background: #fffbeb;
  color: #d97706;
}

#page-history .historyv2-base-price {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
  color: #0ea5e9;
}

#page-history .historyv2-feedback-value {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f59e0b;
}

#page-history .historyv2-window-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page-history .historyv2-view-action {
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

#page-history .historyv2-view-action:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

#page-history .historyv2-view-action.is-active {
  border-color: transparent;
  background: #f1f5f9;
  color: #475569;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

#page-history .historyv2-trash-action {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #f43f5e;
  background: #f43f5e;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.24);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

#page-history .historyv2-trash-action:hover {
  background: #e11d48;
  border-color: #e11d48;
}

#page-history .historyv2-trash-action i {
  font-size: 15px;
}

#page-history .historyv2-expand {
  padding: 18px 20px 20px;
}

#page-history .historyv2-expand-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-left: 2px;
}

#page-history .historyv2-expand-head h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f172a;
}

#page-history .historyv2-expand-head span {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

#page-history .historyv2-day-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 4px;
}

#page-history .historyv2-day-scroll::-webkit-scrollbar {
  display: none;
}

#page-history .historyv2-day-card {
  min-width: 196px;
  flex: 0 0 196px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  padding: 14px 14px 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#page-history .historyv2-day-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

#page-history .historyv2-day-head-left {
  display: grid;
  gap: 2px;
}

#page-history .historyv2-day-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-history .historyv2-day-date {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}

#page-history .historyv2-day-symbol {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#page-history .historyv2-day-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
}

#page-history .historyv2-day-price {
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

#page-history .historyv2-day-price.is-pos,
#page-history .historyv2-day-move.is-pos {
  color: #10b981;
}

#page-history .historyv2-day-price.is-neg,
#page-history .historyv2-day-move.is-neg {
  color: #f43f5e;
}

#page-history .historyv2-day-move {
  font-size: 12px;
  font-weight: 800;
}

#page-history .historyv2-day-setup {
  border-top: 1px solid #f1f5f9;
  padding-top: 9px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

#page-history .historyv2-day-setup strong.is-bull { color: #10b981; }
#page-history .historyv2-day-setup strong.is-bear { color: #f43f5e; }

#page-history .historyv2-day-status {
  min-height: 34px;
  border-radius: 12px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #d97706;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-history .historyv2-day-status.correct {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #059669;
}

#page-history .historyv2-day-status.incorrect {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #e11d48;
}

#page-history .historyv2-day-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

#page-history .historyv2-day-action {
  flex: 1 1 0;
  min-height: 34px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#page-history .historyv2-day-action i {
  font-size: 11px;
}

#page-history .historyv2-day-action.is-correct {
  border-color: #bbf7d0;
  color: #059669;
}

#page-history .historyv2-day-action.is-correct:hover {
  background: #ecfdf5;
}

#page-history .historyv2-day-action.is-incorrect {
  border-color: #fecdd3;
  color: #e11d48;
}

#page-history .historyv2-day-action.is-incorrect:hover {
  background: #fff1f2;
}

#page-history .historyv2-day-action.is-neutral:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

#page-history .historyv2-feedback-table {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}

@media (max-width: 1100px) {
  #page-history .historyv2-window-head {
    align-items: flex-start;
  }

  #page-history .historyv2-window-actions {
    margin-left: 0;
  }
}

@media (max-width: 800px) {
  #page-history .historyv2-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  #page-history .historyv2-topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #page-history .historyv2-window-metrics {
    width: 100%;
  }

  #page-history .historyv2-metric-col,
  #page-history .historyv2-metric-col.is-inline {
    min-width: 0;
    width: 100%;
  }

  #page-history .historyv2-metric-col.is-inline {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ===== PREDICTION ARCHIVE REHAUL ===== */
#page-history .historyv3-shell {
  display: grid;
  gap: 16px;
}

#page-history .historyv3-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-history .historyv3-summary-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #dbe7f4;
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(120% 110% at 0% 0%, rgba(14, 165, 233, 0.12), transparent 56%),
    linear-gradient(160deg, #ffffff, #f8fbff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

#page-history .historyv3-summary-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-history .historyv3-summary-value {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}

#page-history .historyv3-summary-sub {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

#page-history .historyv3-window-head {
  align-items: stretch;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(14, 165, 233, 0.1), transparent 54%),
    linear-gradient(160deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.98));
}

#page-history .historyv3-meta-block {
  max-width: 560px;
}

#page-history .historyv3-window-copy {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: #64748b;
}

#page-history .historyv3-window-metrics {
  flex: 1 1 420px;
}

#page-history .historyv3-expand {
  display: grid;
  gap: 16px;
}

#page-history .historyv3-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
}

#page-history .historyv3-context-card {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(160deg, #ffffff, #f8fafc);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

#page-history .historyv3-context-card.is-story {
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(16, 185, 129, 0.12), transparent 58%),
    linear-gradient(155deg, #ffffff, #f8fbff);
}

#page-history .historyv3-context-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-history .historyv3-context-title {
  margin: 10px 0 8px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 900;
  color: #0f172a;
}

#page-history .historyv3-context-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #475569;
}

#page-history .historyv3-context-chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-history .historyv3-context-chip {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #dbe7f4;
  background: #f8fbff;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#page-history .historyv3-context-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

#page-history .historyv3-context-list > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #f1f5f9;
  font-size: 12px;
}

#page-history .historyv3-context-list > div:first-child {
  border-top: 0;
  padding-top: 0;
}

#page-history .historyv3-context-list span {
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}

#page-history .historyv3-context-list strong {
  color: #0f172a;
  font-weight: 800;
  text-align: right;
}

#page-history .historyv3-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0;
}

#page-history .historyv3-day-card {
  min-width: 0;
  flex: initial;
  gap: 12px;
  border-radius: 22px;
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(14, 165, 233, 0.07), transparent 55%),
    linear-gradient(165deg, #ffffff, #fbfdff);
}

#page-history .historyv3-day-setup {
  border-top-style: dashed;
}

#page-history .historyv3-day-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#page-history .historyv3-day-stats > div {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px;
  background: #f8fafc;
  display: grid;
  gap: 4px;
}

#page-history .historyv3-day-stats span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-history .historyv3-day-stats strong {
  font-size: 11px;
  line-height: 1.4;
  color: #0f172a;
  font-weight: 800;
}

#page-history .historyv3-day-probs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#page-history .historyv3-day-probs span {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#page-history .historyv3-day-probs .bull {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #bbf7d0;
}

#page-history .historyv3-day-probs .neutral {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
}

#page-history .historyv3-day-probs .bear {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

#page-history .historyv3-day-status {
  min-height: 0;
  padding: 11px 12px;
  display: grid;
  gap: 4px;
  justify-content: flex-start;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 16px;
}

#page-history .historyv3-day-status .historyv3-day-status-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#page-history .historyv3-day-status .historyv3-day-status-sub {
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

#page-history .historyv3-day-status.tone-correct {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

#page-history .historyv3-day-status.tone-incorrect {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#page-history .historyv3-day-status.tone-review {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

#page-history .historyv3-day-status.tone-live {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

#page-history .historyv3-day-status.tone-upcoming {
  border-color: #dbe7f4;
  background: #f8fafc;
  color: #475569;
}

#page-history .historyv3-day-note {
  margin-top: -2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

#page-history .historyv3-day-actions,
#allForecastDaysPopup .historyv3-day-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

#page-history .historyv3-day-action,
#allForecastDaysPopup .historyv3-day-action {
  width: 100%;
  min-height: 36px;
  border-radius: 12px;
  border: 1px solid #dbe7f4;
  background: #ffffff;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#page-history .historyv3-day-action i,
#allForecastDaysPopup .historyv3-day-action i {
  font-size: 13px;
}

#page-history .historyv3-day-action.is-primary,
#allForecastDaysPopup .historyv3-day-action.is-primary {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-color: #0f172a;
  color: #ffffff;
}

#page-history .historyv3-day-link,
#allForecastDaysPopup .historyv3-day-link {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: #b45309;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 1100px) {
  #page-history .historyv3-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-history .historyv3-context-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #page-history .historyv3-summary-grid {
    grid-template-columns: 1fr;
  }

  #page-history .historyv3-day-grid {
    grid-template-columns: 1fr;
  }

  #page-history .historyv3-day-stats {
    grid-template-columns: 1fr;
  }
}

/* ===== PREDICTION TAB MODERN REFRESH ===== */
#page-history {
  --pred-shell-bg: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 92%, transparent)
  );
  --pred-shell-border: color-mix(in srgb, var(--border-bright) 72%, transparent);
}

#page-history .section-header {
  border: 1px solid var(--pred-shell-border);
  border-radius: 14px;
  padding: 16px;
  background: var(--pred-shell-bg);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--bg-deep) 16%, transparent);
  margin-bottom: 18px;
}

#page-history .section-title {
  letter-spacing: 0.08em;
}

#page-price-history {
  --price-shell-bg: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 92%, transparent)
  );
  --price-shell-border: color-mix(in srgb, var(--border-bright) 72%, transparent);
}

#page-price-history .section-header {
  border: 1px solid var(--price-shell-border);
  border-radius: 14px;
  padding: 16px;
  background: var(--price-shell-bg);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--bg-deep) 16%, transparent);
  margin-bottom: 18px;
}

#page-price-history .card {
  border-radius: 14px;
  border-color: var(--price-shell-border);
  background: var(--price-shell-bg);
}

#page-history .card {
  border-radius: 14px;
  border-color: var(--pred-shell-border);
  background: var(--pred-shell-bg);
}

#page-history .card > div:first-child {
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 14px !important;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

#page-history #predictionsTableWrap {
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 12px;
  overflow: visible;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  padding: 10px;
}

#page-history .history-layout-shell {
  display: grid;
  gap: 12px;
}

#page-history .history-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  padding: 12px 14px;
}

#page-history .history-top-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  white-space: nowrap;
}

#page-history .history-top-count span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--border-bright) 68%);
  background: color-mix(in srgb, var(--cyan) 11%, var(--bg-surface) 89%);
  color: var(--cyan);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
}

#page-history .history-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#page-history .history-info-box {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  padding: 12px 14px;
}

#page-history .history-info-text {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

#page-history .pred-layout-list {
  display: grid;
  gap: 12px;
}

#page-history .pred-layout-card {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 20px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-surface) 98%, transparent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--bg-deep) 8%, transparent);
}

#page-history .pred-layout-card.is-open {
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--border-bright) 64%);
  box-shadow: 0 12px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent);
}

#page-history .pred-layout-head {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#page-history .pred-layout-card.is-open .pred-layout-head {
  background: color-mix(in srgb, var(--cyan) 7%, var(--bg-surface) 93%);
}

#page-history .pred-layout-card:not(.is-open) .pred-layout-head:hover {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

#page-history .pred-layout-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 250px;
}

#page-history .pred-layout-window .label,
#page-history .pred-layout-metric .label {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

#page-history .pred-layout-window .value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

#page-history .pred-layout-window .arrow {
  color: var(--text-muted);
  margin: 0 4px;
}

#page-history .pred-layout-metrics {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-history .pred-layout-metric .value {
  margin-top: 4px;
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-history .pred-layout-metric .sub {
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--red) 26%, var(--border-bright) 74%);
  background: color-mix(in srgb, var(--red) 8%, var(--bg-surface) 92%);
  color: color-mix(in srgb, var(--red) 78%, var(--text-primary) 22%);
  font-size: 8px;
  letter-spacing: 0.06em;
  font-family: var(--mono);
  font-weight: 700;
}

#page-history .pred-layout-metric .value.pred-accent {
  color: var(--cyan);
  font-size: 18px;
}

#page-history .pred-layout-feedback .value .tag {
  margin-top: 1px;
}

#page-history .pred-layout-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#page-history .pred-layout-view-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#page-history .pred-layout-card.is-open .pred-layout-view-btn {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-surface) 88%);
  color: var(--cyan);
}

#page-history .pred-layout-trash {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#page-history .pred-layout-trash:hover {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--red) 10%, var(--bg-surface) 90%);
}

#page-history .pred-layout-trash i {
  font-size: 18px;
}

#page-history .pred-layout-expand {
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
  padding: 14px;
}

#page-history .pred-layout-expand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

#page-history .pred-layout-expand-head h3 {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.08em;
}

#page-history .pred-layout-expand-head h3 span {
  color: var(--text-muted);
  margin: 0 6px;
}

#page-history .pred-layout-expand-head h3 em {
  font-style: normal;
  color: var(--text-secondary);
  font-weight: 600;
}

#page-history .pred-layout-edit-btn {
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--border-bright) 70%);
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 10px;
}

#page-history .pred-daily-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

#page-history .pred-day-card {
  min-width: 208px;
  width: 208px;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-surface) 97%, transparent);
  overflow: hidden;
}

#page-history .pred-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

#page-history .pred-day-head .left {
  display: flex;
  flex-direction: column;
}

#page-history .pred-day-head .day {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

#page-history .pred-day-head .date {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
}

#page-history .pred-day-head .icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
}

#page-history .pred-day-main {
  padding: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  text-align: center;
}

#page-history .pred-day-main .price {
  display: block;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
}

#page-history .pred-day-main .delta {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}

#page-history .pred-day-main .price.pos,
#page-history .pred-day-main .delta.pos {
  color: var(--green);
}

#page-history .pred-day-main .price.neg,
#page-history .pred-day-main .delta.neg {
  color: var(--red);
}

#page-history .pred-day-main .meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

#page-history .pred-day-main .meta span {
  margin: 0 4px;
  color: var(--text-muted);
}

#page-history .pred-day-main .meta strong {
  color: var(--cyan);
}

#page-history .pred-day-foot {
  padding: 10px;
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  display: grid;
  gap: 8px;
}

#page-history .pred-day-status {
  min-height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
}

#page-history .pred-day-status i {
  font-size: 14px;
}

#page-history .pred-day-status.pending {
  color: #d97706;
  background: color-mix(in srgb, var(--gold) 16%, var(--bg-surface) 84%);
  border-color: color-mix(in srgb, var(--gold) 36%, var(--border-bright) 64%);
}

#page-history .pred-day-status.correct {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, var(--bg-surface) 86%);
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-bright) 66%);
}

#page-history .pred-day-status.incorrect {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, var(--bg-surface) 86%);
  border-color: color-mix(in srgb, var(--red) 34%, var(--border-bright) 66%);
}

#page-history .pred-day-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#page-history .pred-day-actions .feedback-btn {
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  padding: 6px 8px !important;
  line-height: 1.1;
}

@media (max-width: 1120px) {
  #page-history .pred-layout-head {
    flex-direction: column;
    align-items: stretch;
  }

  #page-history .pred-layout-left {
    min-width: 0;
  }

  #page-history .pred-layout-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-history .pred-layout-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  #page-history .history-top-controls {
    flex-direction: column;
    align-items: stretch;
  }

  #page-history .history-top-actions {
    width: 100%;
  }

  #page-history .history-top-actions > * {
    flex: 1;
  }

  #page-history .pred-layout-metrics {
    grid-template-columns: 1fr;
  }
}

#page-history .pred-modern-list {
  display: grid;
  gap: 12px;
}

#page-history .pred-modern-card {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--bg-deep) 10%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#page-history .pred-modern-card.is-open {
  border-color: color-mix(in srgb, var(--cyan) 36%, var(--border-bright) 64%);
  box-shadow: 0 12px 22px color-mix(in srgb, var(--bg-deep) 12%, transparent);
}

#page-history .pred-modern-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  cursor: pointer;
  transition: background 0.18s ease;
}

#page-history .pred-modern-card:not(.is-open) .pred-modern-head:hover {
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

#page-history .pred-modern-card.is-open .pred-modern-head {
  background: color-mix(in srgb, var(--cyan) 8%, var(--bg-surface) 92%);
}

#page-history .pred-modern-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

#page-history .pred-modern-window .label,
#page-history .pred-modern-metric .label {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

#page-history .pred-modern-window .value {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

#page-history .pred-modern-window .arrow {
  color: var(--text-muted);
  margin: 0 4px;
}

#page-history .pred-modern-metrics {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-history .pred-modern-metric {
  min-width: 0;
}

#page-history .pred-modern-metric .value {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-history .pred-modern-metric .sub {
  margin-top: 5px;
}

#page-history .pred-modern-metric .value.pred-accent {
  font-size: 16px;
  color: var(--cyan);
}

#page-history .pred-modern-feedback .value .tag {
  margin-top: 1px;
}

#page-history .pred-modern-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#page-history .pred-modern-delete {
  position: relative;
  background: color-mix(in srgb, var(--red) 16%, var(--bg-surface) 84%) !important;
  border-color: color-mix(in srgb, var(--red) 42%, var(--border-bright) 58%) !important;
}

#page-history .pred-modern-delete::before,
#page-history .pred-modern-delete::after {
  background: var(--red) !important;
}

#page-history .pred-modern-expand {
  border-top: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 80%, transparent);
  padding: 12px;
}

@media (max-width: 1200px) {
  #page-history .pred-modern-head {
    flex-direction: column;
    align-items: stretch;
  }

  #page-history .pred-modern-head-left {
    min-width: 0;
  }

  #page-history .pred-modern-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-history .pred-modern-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  #page-history #predictionsTableWrap {
    padding: 8px;
  }

  #page-history .pred-modern-head {
    padding: 11px;
  }

  #page-history .pred-modern-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #page-history .pred-modern-window .value {
    white-space: normal;
  }

  #page-history .pred-modern-actions {
    width: 100%;
  }

  #page-history .pred-modern-actions .history-view-btn {
    flex: 1;
  }
}
}

#page-history #predictionsTableWrap .history-delete-btn {
  position: relative;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

#page-history #predictionsTableWrap .history-delete-btn span {
  display: none !important;
}

#page-history #predictionsTableWrap .history-delete-btn::before,
#page-history #predictionsTableWrap .history-delete-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.8px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: center;
}

#page-history #predictionsTableWrap .history-delete-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#page-history #predictionsTableWrap .history-delete-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#page-history .history-table th {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  color: var(--text-secondary);
  border-bottom-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
}

#page-history .history-table td {
  border-bottom-color: color-mix(in srgb, var(--border) 86%, transparent);
}

#page-history .history-table tr.history-main-row td:first-child {
  color: var(--text-primary);
}

#page-history .history-expand-cell {
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
}

#page-history .history-expand-wrap {
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 62%),
    radial-gradient(130% 130% at 100% 100%, color-mix(in srgb, var(--green) 6%, transparent), transparent 64%),
    color-mix(in srgb, var(--bg-surface) 96%, transparent);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--bg-deep) 12%, transparent);
}

#page-history .history-expand-head {
  margin-bottom: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 76%, var(--bg-surface) 24%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

#page-history .history-expand-head .left {
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

#page-history .history-expand-head .right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  color: var(--text-secondary);
  letter-spacing: 0.1em;
}

#page-history .history-days-grid {
  gap: 10px;
}

#page-history .history-day-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-surface) 97%, transparent),
    color-mix(in srgb, var(--bg-hover) 93%, transparent)
  );
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent);
  padding: 14px 14px 13px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#page-history .history-day-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 26%, transparent), transparent);
  opacity: 0.9;
}

#page-history .history-day-card::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cyan) 86%, #ffffff 14%),
    color-mix(in srgb, var(--green) 80%, #ffffff 20%)
  );
  opacity: 0;
  transition: opacity 0.18s ease;
}

#page-history .history-day-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--bg-deep) 14%, transparent);
}

#page-history .history-day-card:hover::after {
  opacity: 1;
}

#page-history .history-day-add-btn {
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-hover) 88%);
  box-shadow: 0 6px 12px color-mix(in srgb, var(--cyan) 12%, transparent);
}

#page-history .history-day-card .hd-label,
#page-history .history-day-card .hd-price,
#page-history .history-day-card .hd-meta,
#page-history .history-day-card .history-day-actions {
  position: relative;
  z-index: 1;
}

#page-history .history-day-card .hd-label {
  padding: 0 30px;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-align: center;
}

#page-history .history-day-card .hd-price {
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}

#page-history .history-day-card .hd-meta {
  margin-bottom: 10px;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

#page-history .history-day-card > div[style*="margin-bottom:8px"] {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px !important;
}

#page-history .history-day-card .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

#page-history .history-day-card .tag.correct {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border-bright) 64%);
  background: color-mix(in srgb, var(--green) 10%, var(--bg-surface) 90%);
}

#page-history .history-day-card .tag.incorrect {
  border-color: color-mix(in srgb, var(--red) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--red) 9%, var(--bg-surface) 91%);
}

#page-history .history-day-card .tag.pending {
  border-color: color-mix(in srgb, var(--gold) 36%, var(--border-bright) 64%);
  background: color-mix(in srgb, var(--gold) 9%, var(--bg-surface) 91%);
}

#page-history .history-day-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

#page-history .history-day-actions .feedback-btn {
  border-radius: 999px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 8px 10px;
  white-space: normal;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

#page-history .history-day-card .feedback-note.reverted {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}

#page-history .history-view-btn {
  border-radius: 999px;
  letter-spacing: 0.08em;
}

#page-history .history-session-note {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: var(--text-secondary);
}

#page-history .history-session-open {
  border-color: color-mix(in srgb, var(--green) 60%, transparent);
  background: color-mix(in srgb, var(--green) 16%, var(--bg-hover) 84%);
  color: var(--green);
}

#page-history .history-session-aftermarket {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  background: color-mix(in srgb, var(--gold) 18%, var(--bg-hover) 82%);
  color: var(--gold);
}

#page-history .history-session-premarket {
  border-color: color-mix(in srgb, var(--cyan) 58%, transparent);
  background: color-mix(in srgb, var(--cyan) 16%, var(--bg-hover) 84%);
  color: var(--cyan);
}

#page-history .history-session-closed {
  border-color: color-mix(in srgb, var(--red) 56%, transparent);
  background: color-mix(in srgb, var(--red) 14%, var(--bg-hover) 86%);
  color: var(--red);
}

html[data-theme='light'] #page-history .section-header,
html[data-theme='light'] #page-history .card,
html[data-theme='light'] #page-history .history-day-card {
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent);
}

html[data-theme='light'] #page-history .history-expand-wrap {
  border-color: rgba(219, 234, 254, 0.9);
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(59, 130, 246, 0.06), transparent 60%),
    radial-gradient(130% 130% at 100% 100%, rgba(20, 184, 166, 0.06), transparent 62%),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

html[data-theme='light'] #page-history .history-expand-head {
  border-color: rgba(226, 232, 240, 0.92);
  background: rgba(255, 255, 255, 0.9);
}

html[data-theme='light'] #page-history .history-expand-head .left {
  color: #0f172a;
}

html[data-theme='light'] #page-history .history-expand-head .right {
  border-color: rgba(226, 232, 240, 0.92);
  background: rgba(248, 250, 252, 0.92);
  color: #64748b;
}

html[data-theme='light'] #page-history .history-day-card {
  border-color: rgba(226, 232, 240, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.93));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

html[data-theme='light'] #page-history .history-day-card:hover {
  border-color: rgba(147, 197, 253, 0.78);
  box-shadow: 0 14px 22px rgba(15, 23, 42, 0.08);
}

html[data-theme='light'] #page-history .history-day-card .hd-label,
html[data-theme='light'] #page-history .history-day-card .hd-meta {
  color: #64748b;
}

html[data-theme='dark'] #page-history .history-day-card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 90%, transparent),
    color-mix(in srgb, var(--bg-hover) 84%, transparent)
  );
}

html[data-theme='dark'] #page-history .history-day-card::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cyan) 76%, #ffffff 24%),
    color-mix(in srgb, var(--green) 70%, #ffffff 30%)
  );
}

/* ===== LEARNING CENTER MODERN REFRESH ===== */
#page-learning {
  --learn-shell-bg: color-mix(in srgb, var(--bg-card) 96%, transparent);
  --learn-shell-border: color-mix(in srgb, var(--border-bright) 72%, transparent);
}

#page-learning .section-header {
  border: 1px solid var(--learn-shell-border);
  border-radius: 16px;
  padding: 16px;
  background: var(--learn-shell-bg);
  box-shadow: none;
  margin-bottom: 18px;
}

#page-learning .section-title {
  letter-spacing: 0.08em;
}

#page-learning .stat-card,
#page-learning .card {
  border-radius: 16px;
  border-color: var(--learn-shell-border);
  background: var(--learn-shell-bg);
  box-shadow: none;
}

#page-learning > .grid-4 .stat-card {
  text-align: center;
}

#page-learning > .grid-4 .stat-card .stat-label,
#page-learning > .grid-4 .stat-card .stat-value,
#page-learning > .grid-4 .stat-card .stat-sub {
  text-align: center;
}

#page-learning .stat-card {
  position: relative;
  overflow: hidden;
}

#page-learning .stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none;
  opacity: 0;
}

#page-learning .card-title,
#page-learning .stat-label {
  letter-spacing: 0.08em;
}

#page-learning #weightsPanel,
#page-learning #learningHistoryPanel,
#page-learning #learningLivePanel,
#page-learning #autoLearningLogPanel,
#page-learning #finnhubIntelPanel,
#page-learning #riskGuardrailPanel,
#page-learning #accuracyOverTime {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

#page-learning #weightsPanel,
#page-learning #learningLivePanel,
#page-learning #finnhubIntelPanel,
#page-learning #riskGuardrailPanel,
#page-learning #accuracyOverTime {
  padding: 12px;
}

#page-learning #learningHistoryPanel,
#page-learning #autoLearningLogPanel {
  padding: 10px;
}

#page-learning .learning-live-main-card,
#page-learning .learning-log-card {
  border-radius: 16px;
}

#page-learning .learning-status-on {
  color: var(--green);
  font-weight: 700;
}

#page-learning .learning-status-off {
  color: var(--red);
  font-weight: 700;
}

#page-learning .learning-reset-pill {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
}

#page-learning .learning-log-card #autoLearningLogPanel.learning-log-scroll .alert-item {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 60%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
}

#page-learning .input-field,
#page-learning select.input-field {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

#page-learning .btn.btn-primary,
#page-learning .btn.btn-secondary {
  border-radius: 12px;
}

html[data-theme='light'] #page-learning .section-header,
html[data-theme='light'] #page-learning .stat-card,
html[data-theme='light'] #page-learning .card {
  box-shadow: none;
}

/* ===== HISTORY TABLE ===== */
.history-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.history-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  font-family: var(--display);
}
.history-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(26,45,71,0.5);
  color: var(--text-secondary);
  transition: all 0.2s;
}
.history-table tr:hover td { background: var(--bg-hover); color: var(--text-primary); }
.history-table tr.history-main-row { cursor: pointer; }
.history-table tr.history-main-row td:first-child { font-weight: 600; }
.history-expand-cell {
  background: rgba(10, 17, 32, 0.75);
  border-bottom: 1px solid var(--border-bright);
}
.history-expand-wrap {
  padding: 12px 0;
}
.history-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.history-day-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}
.history-day-add-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cyan) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.history-day-add-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cyan) 78%, #ffffff 22%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 14%, transparent);
  color: color-mix(in srgb, var(--cyan) 84%, #ffffff 16%);
}
.history-day-card .hd-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 4px;
  padding-right: 26px;
}
.history-day-card .hd-pill-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6px;
}
.history-day-card .hd-pill-row .stock-symbol-pill {
  min-height: 16px;
  padding: 0 7px;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.history-day-card .hd-price {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.history-day-card .hd-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.history-day-actions {
  display: flex;
  gap: 6px;
}
.history-day-actions .feedback-btn {
  padding: 4px 8px;
  font-size: 9px;
}
.history-view-btn {
  min-width: 68px;
  padding: 4px 10px;
  font-size: 9px;
  border-radius: 999px;
}
.history-window-range {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}
.history-window-sub {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
}
.history-expand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.history-expand-head .left {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}
.history-expand-head .right {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.history-table .tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.tag.correct { background: rgba(0,255,136,0.15); color: var(--green); }
.tag.incorrect { background: rgba(255,51,102,0.15); color: var(--red); }
.tag.pending { background: rgba(255,215,0,0.15); color: var(--gold); }
.tag.call { background: rgba(0,255,136,0.1); color: var(--green); }
.tag.put { background: rgba(255,51,102,0.1); color: var(--red); }

/* ===== LEARNING INDICATORS ===== */
.weight-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}

.weight-name { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); width: 160px; }
.weight-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.weight-bar-fill { height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); border-radius: 3px; transition: width 0.8s ease; }
.weight-value { font-family: var(--mono); font-size: 11px; color: var(--cyan); width: 40px; text-align: right; }

.weight-indicator.rise { border-color: rgba(0,255,136,0.35); }
.weight-indicator.fall { border-color: rgba(255,140,0,0.35); }

.weight-name-wrap {
  width: 170px;
}

.weight-target {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 3px;
}

.weight-bar-track {
  height: 8px;
  border-radius: 4px;
  position: relative;
}

.weight-bar-target {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(255,215,0,0.5);
}

.weight-bar-fill {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: width 0.7s ease;
}

.weight-bar-fill.live::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  animation: weightSweep 2.4s linear infinite;
}

@keyframes weightSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.weight-delta {
  width: 52px;
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
}

.weight-delta.up { color: var(--green); }
.weight-delta.down { color: var(--orange); }
.weight-delta.flat { color: var(--text-muted); }

.weight-meta {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--bg-surface);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.weight-meta-box {
  border-right: 1px solid rgba(26,45,71,0.5);
  padding-right: 8px;
}

.weight-meta-box:last-child {
  border-right: none;
  padding-right: 0;
}

.weight-meta-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.weight-meta-val {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-primary);
}

.weight-meta-val.highlight { color: var(--cyan); }

/* ===== POPUP / MODAL ===== */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,8,16,0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}

.popup-overlay.visible { display: flex; animation: fadeIn 0.2s ease; }

.popup {
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 16px;
  padding: 32px;
  max-width: 520px;
  width: 90%;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 60px rgba(0,212,255,0.05);
}

.popup::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}

.popup-icon { font-size: 40px; margin-bottom: 16px; }
.popup-title { font-family: var(--display); font-size: 16px; letter-spacing: 0.15em; color: var(--orange); margin-bottom: 8px; }
.popup-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; }
.popup-actions { display: flex; gap: 12px; }

.btn {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: all 0.2s;
}

.btn-primary { background: var(--cyan); color: var(--bg-deep); }
.btn-primary:hover { background: white; box-shadow: 0 0 20px var(--cyan); }
.btn-secondary { background: transparent; border: 1px solid var(--border-bright); color: var(--text-secondary); }
.btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-danger { background: var(--red); color: white; }
.btn-danger:hover { box-shadow: 0 0 20px var(--red); }

/* ===== FEEDBACK BUTTONS ===== */
.feedback-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: all 0.2s;
}

.fb-correct { background: rgba(0,255,136,0.1); color: var(--green); border: 1px solid rgba(0,255,136,0.3); }
.fb-correct:hover { background: var(--green); color: var(--bg-deep); }
.fb-incorrect { background: rgba(255,51,102,0.1); color: var(--red); border: 1px solid rgba(255,51,102,0.3); }
.fb-incorrect:hover { background: var(--red); color: white; }

/* ===== ALERTS LIST ===== */
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.alert-item:hover { border-color: var(--border-bright); }
.alert-icon { font-size: 20px; margin-top: 1px; }
.alert-time { font-family: var(--mono); font-size: 9px; color: var(--text-muted); }
.alert-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.alert-body { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.alert-item.critical { border-left: 3px solid var(--red); }
.alert-item.warning { border-left: 3px solid var(--orange); }
.alert-item.info { border-left: 3px solid var(--cyan); }

/* ===== SECTION HEADER ===== */
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 20px;
}

.section-header > div:first-child {
  min-width: 0;
}

.section-title {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--text-primary);
}

.section-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ===== TABS ===== */
.tabs { display: flex; gap: 2px; background: var(--bg-surface); border-radius: 8px; padding: 3px; }

.section-header .tabs {
  margin-left: auto;
  align-self: flex-start;
}
.tab-btn {
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  transition: all 0.2s;
}
.tab-btn.active { background: var(--bg-card); color: var(--cyan); }
.tab-btn:hover:not(.active) { color: var(--text-secondary); }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.2s ease; }

/* ===== SIGNAL METER ===== */
.signal-meter {
  position: relative;
  height: 10px;
  background: linear-gradient(90deg, var(--red-dim), var(--gold-dim), var(--green-dim));
  border-radius: 5px;
  overflow: hidden;
}

.signal-needle {
  position: absolute;
  top: -2px;
  width: 4px;
  height: 14px;
  background: white;
  border-radius: 2px;
  box-shadow: 0 0 6px white;
  transform: translateX(-50%);
  transition: left 1s ease;
}

.signal-extra-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.signal-extra-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

.signal-extra-label {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.signal-extra-value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 700;
}

.signal-contrib-list {
  margin-top: 10px;
  border-top: 1px solid rgba(26,45,71,0.5);
  padding-top: 10px;
}

.signal-contrib-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.signal-contrib-name {
  width: 115px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.signal-contrib-track {
  flex: 1;
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.signal-contrib-fill {
  height: 100%;
  border-radius: 4px;
}

.signal-contrib-val {
  width: 62px;
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
}

.signal-action-box {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(11,17,32,0.7);
}

.signal-action-title {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.signal-action-body {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.options-day-chooser {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.options-day-btn {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 7px 6px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  transition: all 0.2s ease;
}

.options-day-btn:hover { border-color: var(--cyan); color: var(--cyan); }

.options-day-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0,212,255,0.08);
}

.options-playbook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.options-playbook-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  padding: 10px;
}

.options-playbook-card .title {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.options-playbook-card .main {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 700;
}

.options-playbook-card .sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.options-checklist {
  margin-top: 10px;
  border-top: 1px solid rgba(26,45,71,0.5);
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.options-check-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(11,17,32,0.72);
}

.options-check-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.options-check-text {
  font-size: 11px;
  color: var(--text-secondary);
}

.options-check-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 999px;
}

.options-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.options-check-item.ok {
  border-color: rgba(0,255,136,0.35);
  background: rgba(0,255,136,0.06);
}

.options-check-item.ok .options-check-state {
  color: var(--green);
  border: 1px solid rgba(0,255,136,0.4);
  background: rgba(0,255,136,0.1);
}

.options-check-item.ok .options-check-icon {
  color: var(--green);
  background: rgba(0,255,136,0.12);
  border: 1px solid rgba(0,255,136,0.3);
}

.options-check-item.warn {
  border-color: rgba(255,140,0,0.35);
  background: rgba(255,140,0,0.07);
}

.options-check-item.warn .options-check-state {
  color: var(--orange);
  border: 1px solid rgba(255,140,0,0.35);
  background: rgba(255,140,0,0.1);
}

.options-check-item.warn .options-check-icon {
  color: var(--orange);
  background: rgba(255,140,0,0.14);
  border: 1px solid rgba(255,140,0,0.3);
}

.options-check-item.block {
  border-color: rgba(255,51,102,0.35);
  background: rgba(255,51,102,0.08);
}

.options-check-item.block .options-check-state {
  color: var(--red);
  border: 1px solid rgba(255,51,102,0.35);
  background: rgba(255,51,102,0.1);
}

.options-check-item.block .options-check-icon {
  color: var(--red);
  background: rgba(255,51,102,0.14);
  border: 1px solid rgba(255,51,102,0.3);
}

.options-exposure-row {
  margin-bottom: 8px;
}

.options-exposure-help {
  margin-bottom: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.options-exposure-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  margin-bottom: 4px;
}

.options-exposure-bar {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: var(--border);
  overflow: hidden;
}

.options-exposure-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width 0.35s ease;
}

.options-exposure-pct {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.acc-plus-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 10px;
}

.acc-plus-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.acc-line-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.acc-line-dot {
  width: 12px;
  height: 2px;
  display: inline-block;
}

.acc-graph-shell {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 12px;
  padding: 8px 10px 10px;
  background: linear-gradient(
    162deg,
    color-mix(in srgb, var(--bg-surface) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 10px 22px color-mix(in srgb, var(--bg-deep) 18%, transparent);
  overflow: hidden;
}

.acc-svg {
  display: block;
}

.acc-svg .acc-grid-line {
  stroke: color-mix(in srgb, var(--border) 72%, transparent);
  stroke-width: 1;
}

.acc-svg .acc-grid-vline {
  stroke: color-mix(in srgb, var(--border-bright) 36%, transparent);
  stroke-width: 1;
}

.acc-svg .acc-zone {
  opacity: 0.64;
  animation: accZoneBreathe 3.4s ease-in-out infinite;
}

.acc-svg .acc-line-shadow {
  fill: none;
  stroke: color-mix(in srgb, var(--acc-line) 34%, transparent);
  stroke-width: 6.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.38;
  filter: blur(1.6px);
}

.acc-svg .acc-line-path {
  fill: none;
  stroke: var(--acc-line);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--acc-len);
  stroke-dashoffset: var(--acc-len);
  animation: accLineDraw 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--acc-delay, 0s);
}

.acc-svg .acc-line-path.acc-roll {
  stroke-width: 2;
}

.acc-svg .acc-line-path.acc-cal {
  stroke-width: 1.9;
  stroke-dasharray: 6 4;
  stroke-dashoffset: 0;
  animation: accCalFlow 2.8s linear infinite;
  opacity: 0.92;
}

.acc-svg .acc-line-rider {
  fill: none;
  stroke: color-mix(in srgb, var(--acc-line) 74%, #ffffff 26%);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 12;
  opacity: 0.92;
  animation: accRiderFlow 2.6s linear infinite;
  animation-delay: calc(var(--acc-delay, 0s) + 1.05s);
}

.acc-svg .acc-last-pulse {
  fill: none;
  stroke: var(--acc-line);
  stroke-width: 1.35;
  opacity: 0.64;
  transform-box: fill-box;
  transform-origin: center;
  animation: accPointPulse 1.8s ease-out infinite;
}

.acc-svg .acc-last-dot {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acc-line) 45%, transparent));
}

.acc-svg .acc-miss-dot {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--red) 45%, transparent));
  animation: accMissBlink 2.1s ease-in-out infinite;
}

@keyframes accLineDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes accRiderFlow {
  to { stroke-dashoffset: -92; }
}

@keyframes accCalFlow {
  to { stroke-dashoffset: -38; }
}

@keyframes accZoneBreathe {
  0%, 100% { opacity: 0.46; }
  50% { opacity: 0.8; }
}

@keyframes accPointPulse {
  0% { transform: scale(0.74); opacity: 0.58; }
  72% { transform: scale(1.24); opacity: 0; }
  100% { transform: scale(1.24); opacity: 0; }
}

@keyframes accMissBlink {
  0%, 100% { opacity: 0.56; }
  50% { opacity: 1; }
}

.acc-plus-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.acc-metric {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(11,17,32,0.7);
  padding: 8px;
}

.acc-metric .label {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.acc-metric .value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.acc-plus-note {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.learning-live-shell {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.history-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.history-delete-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 51, 102, 0.35);
  background: rgba(255, 51, 102, 0.08);
  color: var(--red);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.history-delete-btn:hover {
  background: rgba(255, 51, 102, 0.2);
  border-color: rgba(255, 51, 102, 0.65);
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.2);
}
.learning-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.learning-live-head-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.learning-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
}

.learning-live-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px color-mix(in srgb, currentColor 40%, transparent);
}

@keyframes learningLivePulseDot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.28); opacity: 1; }
}

.learning-live-pill.on {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 42%, var(--border-bright) 58%);
}

.learning-live-pill.on::before {
  animation: learningLivePulseDot 1.2s ease-in-out infinite;
}

.learning-live-pill.off {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 42%, var(--border-bright) 58%);
}

.learning-live-regime {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.learning-live-updated {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-left: auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.learning-live-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.learning-live-kpi {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  padding: 8px;
  min-width: 0;
  overflow: hidden;
}

.learning-live-kpi .label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.learning-live-kpi .value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.learning-live-kpi .sub {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
}

.learning-live-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.learning-live-card {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  padding: 11px;
  min-width: 0;
  overflow: hidden;
}

.learning-live-card-feed {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.learning-live-card-title {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.learning-live-shift-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.learning-live-shift-chip {
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 8px;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--bg-hover) 90%, transparent),
    color-mix(in srgb, var(--bg-surface) 92%, transparent)
  );
  padding: 6px 7px;
}

.learning-live-shift-chip .chip-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.learning-live-shift-chip .chip-value {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.learning-live-shift-chip .chip-value.up {
  color: var(--green);
}

.learning-live-shift-chip .chip-value.down {
  color: var(--red);
}

.learning-live-shift-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  padding: 7px;
  min-width: 0;
  overflow: hidden;
}

.learning-live-shift-row:last-child {
  margin-bottom: 0;
}

.learning-live-shift-name-wrap {
  min-width: 0;
}

.learning-live-shift-name {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-primary);
}

.learning-live-shift-meta {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.learning-live-shift-delta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.learning-live-shift-delta.up {
  color: var(--green);
}

.learning-live-shift-delta.down {
  color: var(--red);
}

.learning-live-shift-current {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-secondary);
  text-align: right;
  letter-spacing: 0.08em;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.learning-live-shift-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  min-width: 0;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.learning-live-shift-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.learning-live-shift-bar > span.up {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 78%, transparent), color-mix(in srgb, var(--green) 42%, transparent));
}

.learning-live-shift-bar > span.down {
  background: linear-gradient(90deg, color-mix(in srgb, var(--red) 78%, transparent), color-mix(in srgb, var(--red) 42%, transparent));
}

.learning-live-mini-log {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.learning-live-feed-scroll {
  max-height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 6px 2px 0;
  align-content: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.learning-live-feed-scroll::-webkit-scrollbar {
  width: 8px;
}

.learning-live-feed-scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  border-radius: 999px;
}

.learning-live-feed-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-bright) 74%, transparent);
  border-radius: 999px;
}

.learning-live-mini-item {
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
  padding: 10px 11px;
  min-width: 0;
  overflow: visible;
  position: relative;
  isolation: isolate;
}

.learning-live-mini-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin-bottom: 3px;
  min-width: 0;
}

.learning-live-mini-title {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-primary);
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.learning-live-mini-time {
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.2;
  color: var(--text-muted);
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 6px;
}

.learning-live-mini-body {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.45;
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.learning-live-mini-meta-time {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.3;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.learning-live-mini-meta {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 8px;
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-muted) 12%);
  line-height: 1.45;
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.learning-live-note {
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  border-radius: 8px;
  padding: 8px 9px;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.learning-live-grid {
  align-items: stretch;
}

.learning-live-main-card,
.learning-log-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  height: auto;
  max-height: none;
}

.learning-live-main-card #learningLivePanel {
  min-width: 0;
  flex: 0 0 auto;
  width: 100%;
  overflow: visible;
}

.learning-log-card #autoLearningLogPanel.learning-log-scroll {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.learning-log-card #autoLearningLogPanel.learning-log-scroll .alert-title,
.learning-log-card #autoLearningLogPanel.learning-log-scroll .alert-body {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.learning-log-card #autoLearningLogPanel.learning-log-scroll .alert-item {
  min-width: 0;
}

.learning-log-card #autoLearningLogPanel.learning-log-scroll .alert-item > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}

.learning-status-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.1em;
  line-height: 1;
}

.learning-status-badge.correct {
  background: rgba(0,255,136,0.15);
  color: var(--green);
}

.learning-status-badge.incorrect {
  background: rgba(255,51,102,0.15);
  color: var(--red);
}

.learning-status-badge.pending {
  background: rgba(255,215,0,0.15);
  color: var(--gold);
}

/* ===== LOADING ===== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--text-muted);
}

.loader {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

.loading-state--spinner-only .loader {
  margin-bottom: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; }

/* ===== FORECAST DETAIL PANEL ===== */
.forecast-detail {
  background: var(--bg-surface);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  animation: fadeIn 0.3s ease;
}

.detail-day-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.detail-day-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-bright);
  background: color-mix(in srgb, var(--bg-elevated) 75%, var(--cyan) 25%);
  line-height: 1;
}

.detail-day-pill-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.detail-day-pill-value {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-primary);
}

.forecast-day-grid {
  max-width: 1300px;
  margin: 0 auto;
}

.forecast-day-metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 20px 24px;
  text-align: center;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.forecast-day-metric-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}

.forecast-day-metric-value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
}

/* ===== RISK BADGE ===== */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.risk-low { background: rgba(0,255,136,0.1); color: var(--green); border: 1px solid rgba(0,255,136,0.2); }
.risk-medium { background: rgba(255,215,0,0.1); color: var(--gold); border: 1px solid rgba(255,215,0,0.2); }
.risk-high { background: rgba(255,51,102,0.1); color: var(--red); border: 1px solid rgba(255,51,102,0.2); }

/* ===== SETTINGS ===== */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.setting-label { font-size: 13px; color: var(--text-primary); }
.setting-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.setting-status-pill {
  min-height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.setting-status-pill.is-alpha {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-surface) 88%);
  color: color-mix(in srgb, #b45309 78%, var(--text-primary) 22%);
}
.setting-status-pill.is-pro {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-surface) 88%);
  color: color-mix(in srgb, var(--cyan) 74%, var(--text-primary) 26%);
}
.settings-card-hint {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.setting-row select.input-field {
  width: 240px;
  min-width: 240px;
}
.forecast-setting-picker-wrap {
  position: relative;
  width: 240px;
  min-width: 240px;
}
.forecast-setting-native-select {
  display: none;
}
.forecast-setting-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}
.forecast-setting-picker-trigger-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
.forecast-setting-picker-trigger-row,
.forecast-settings-picker-option-row,
.forecast-setting-picker-trigger-badges,
.forecast-settings-picker-option-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.forecast-setting-picker-trigger-label,
.forecast-settings-picker-option-label {
  min-width: 0;
}
.forecast-setting-picker-trigger-detail {
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: normal;
}
.forecast-setting-picker-trigger-icon {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.forecast-setting-picker-trigger.is-locked {
  border-color: color-mix(in srgb, var(--cyan) 24%, var(--border-bright) 76%);
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
}
.profile-hub-modal .forecast-setting-picker-trigger:focus {
  box-shadow: none;
}
.forecast-settings-picker-overlay {
  position: absolute;
  inset: 0;
  z-index: 10145;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.2vw, 28px);
}
.forecast-settings-picker-overlay.visible {
  display: flex;
}
.forecast-settings-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.22);
}
.forecast-settings-picker-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid #d3deeb;
  background: #f8fbff;
  box-shadow: none;
}
.forecast-settings-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.forecast-settings-picker-head-copy {
  display: grid;
  gap: 6px;
}
.forecast-settings-picker-current {
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-surface) 98%, transparent);
  display: grid;
  gap: 6px;
}
.forecast-settings-picker-current-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
}
.forecast-settings-picker-current-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.forecast-settings-picker-current-value {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  color: #0f172a;
}
.forecast-settings-picker-current-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.forecast-settings-picker-current-meta {
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}
.forecast-settings-picker-note {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--cyan) 16%, var(--border-bright) 84%);
  background: color-mix(in srgb, var(--cyan) 8%, var(--bg-surface) 92%);
  font-size: 12px;
  line-height: 1.55;
  color: #475569;
}
.forecast-settings-picker-note[data-tone='admin'] {
  border-color: color-mix(in srgb, #2563eb 22%, var(--border-bright) 78%);
  background: color-mix(in srgb, #2563eb 8%, var(--bg-surface) 92%);
  color: #1d4ed8;
}
.forecast-settings-picker-note[data-tone='locked'] {
  border-color: color-mix(in srgb, #0f766e 24%, var(--border-bright) 76%);
  background: color-mix(in srgb, #14b8a6 10%, var(--bg-surface) 90%);
  color: #0f766e;
}
.forecast-settings-picker-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2563eb;
}
.forecast-settings-picker-title {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  color: #0f172a;
}
.forecast-settings-picker-subtitle {
  max-width: 480px;
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
}
.forecast-settings-picker-close {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.forecast-settings-picker-close:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
}
.forecast-settings-picker-options {
  display: grid;
  gap: 10px;
}
.forecast-settings-picker-option {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  color: var(--text-primary);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.forecast-settings-picker-option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--cyan) 8%, var(--bg-surface) 92%);
}
.forecast-settings-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-surface) 88%);
}
.forecast-settings-picker-option.is-disabled,
.forecast-settings-picker-option:disabled,
.forecast-settings-picker-option[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}
.forecast-settings-picker-option-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.forecast-settings-picker-option-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 76%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
  color: color-mix(in srgb, var(--cyan) 78%, var(--text-primary) 22%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.forecast-settings-picker-option-detail {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.forecast-settings-picker-option-check {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: all 0.18s ease;
}
.forecast-settings-picker-option.is-selected .forecast-settings-picker-option-check {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--border-bright) 62%);
  background: color-mix(in srgb, var(--cyan) 82%, #ffffff 18%);
  color: #ffffff;
}
.forecast-settings-picker-option.is-selected .forecast-settings-picker-option-icon {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%);
}
.forecast-short-shares-control {
  width: 240px;
  min-width: 240px;
}
.forecast-short-shares-trigger {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.forecast-short-shares-trigger:hover {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
}
.forecast-short-shares-trigger[data-state='on'] {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(22, 163, 74, 0.08);
}
.forecast-short-shares-trigger[data-state='off'] {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.07);
}
.forecast-short-shares-trigger-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.forecast-short-shares-trigger-state,
.forecast-short-shares-popup-current-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 48px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.forecast-short-shares-trigger-state[data-state='on'],
.forecast-short-shares-popup-current-state[data-state='on'] {
  background: rgba(22, 163, 74, 0.16);
  color: #15803d;
}
.forecast-short-shares-trigger-state[data-state='off'],
.forecast-short-shares-popup-current-state[data-state='off'] {
  background: rgba(220, 38, 38, 0.14);
  color: #dc2626;
}
.forecast-short-shares-trigger-detail {
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: normal;
}
.forecast-short-shares-trigger-icon {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--text-secondary);
}
.forecast-short-shares-popup-overlay {
  position: absolute;
  inset: 0;
  z-index: 10146;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.2vw, 28px);
}
.forecast-short-shares-popup-overlay.visible {
  display: flex;
}
.forecast-short-shares-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.18);
}
.forecast-short-shares-popup {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  padding: 20px;
  border-radius: 22px;
  border: 1px solid #d3deeb;
  background: #f8fbff;
  display: grid;
  gap: 14px;
  box-shadow: none;
}
.forecast-short-shares-popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.forecast-short-shares-popup-head-copy {
  display: grid;
  gap: 6px;
}
.forecast-short-shares-popup-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2563eb;
}
.forecast-short-shares-popup-title {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  color: #0f172a;
}
.forecast-short-shares-popup-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}
.forecast-short-shares-popup-close {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.forecast-short-shares-popup-close:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
}
.forecast-short-shares-popup-current {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-surface) 98%, transparent);
  display: grid;
  gap: 8px;
}
.forecast-short-shares-popup-current-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
}
.forecast-short-shares-popup-current-row {
  display: grid;
  gap: 8px;
}
.forecast-short-shares-popup-current-detail {
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}
.forecast-short-shares-popup-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.forecast-short-shares-popup-option {
  min-height: 132px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  display: grid;
  align-content: start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.forecast-short-shares-popup-option:hover {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
}
.forecast-short-shares-popup-option[data-tone='on'].is-active {
  border-color: rgba(22, 163, 74, 0.32);
  background: rgba(22, 163, 74, 0.1);
}
.forecast-short-shares-popup-option[data-tone='off'].is-active {
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.1);
}
.forecast-short-shares-popup-option-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.forecast-short-shares-popup-option[data-tone='on'] .forecast-short-shares-popup-option-label {
  color: #15803d;
}
.forecast-short-shares-popup-option[data-tone='off'] .forecast-short-shares-popup-option-label {
  color: #dc2626;
}
.forecast-short-shares-popup-option-detail {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.setting-row .input-field.is-locked,
.setting-row select.input-field.is-locked {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  color: var(--text-secondary);
  cursor: not-allowed;
  box-shadow: none;
}

.profile-hub-modal:is(.has-forecast-picker, .has-short-shares-picker) .profile-hub-content-scroll {
  overflow: hidden;
}

@media (max-width: 640px) {
  .forecast-short-shares-control {
    width: 100%;
    min-width: 0;
  }

  .forecast-short-shares-popup-options {
    grid-template-columns: 1fr;
  }

  .forecast-short-shares-popup-option {
    min-height: 0;
  }
}

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
}

.toggle input { display: none; }

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle input:checked + .toggle-track { background: var(--cyan); }

.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle input:checked + .toggle-track::after { transform: translateX(20px); }

/* Artistic day/night switch for Settings > Dark Mode only */
.toggle.toggle-dark-art {
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

#setDarkMode + .toggle-track {
  background: linear-gradient(180deg, #60a5fa 0%, #93c5fd 100%);
  border-radius: 999px;
  border: 0;
  box-shadow:
    inset 0 1px 4px rgba(255, 255, 255, 0.32),
    inset 0 -2px 4px rgba(37, 99, 235, 0.18),
    0 1px 3px rgba(15, 23, 42, 0.24);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.8s ease;
}

#setDarkMode + .toggle-track::before,
#setDarkMode + .toggle-track::after {
  content: none;
}

#setDarkMode + .toggle-track .theme-toggle-clouds,
#setDarkMode + .toggle-track .theme-toggle-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

#setDarkMode + .toggle-track .theme-toggle-clouds {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

#setDarkMode + .toggle-track .theme-toggle-stars {
  opacity: 0;
  transform: translateY(-10px);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
}

#setDarkMode + .toggle-track .theme-toggle-cloud-drifter {
  position: absolute;
  inset: 0;
  animation: darkToggleCloudDrift 8s infinite alternate ease-in-out;
}

#setDarkMode + .toggle-track .theme-toggle-cloud {
  position: absolute;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#setDarkMode + .toggle-track .theme-toggle-cloud-main {
  width: 20px;
  height: 7px;
  right: 4px;
  bottom: 3px;
}

#setDarkMode + .toggle-track .theme-toggle-cloud-puff-a {
  width: 8px;
  height: 8px;
  right: 12px;
  bottom: 6px;
}

#setDarkMode + .toggle-track .theme-toggle-cloud-puff-b {
  width: 6px;
  height: 6px;
  right: 5px;
  bottom: 7px;
}

#setDarkMode + .toggle-track .theme-toggle-star {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  transform-origin: center;
  animation: darkToggleStarTwinkle 3s ease-in-out infinite;
}

#setDarkMode + .toggle-track .theme-toggle-star.star-1 {
  width: 1.5px;
  height: 1.5px;
  top: 5px;
  left: 8px;
}

#setDarkMode + .toggle-track .theme-toggle-star.star-2 {
  width: 2px;
  height: 2px;
  top: 10px;
  left: 14px;
  animation-duration: 4s;
  animation-delay: 0.7s;
}

#setDarkMode + .toggle-track .theme-toggle-star.star-3 {
  width: 1.25px;
  height: 1.25px;
  top: 14px;
  left: 6px;
  animation-duration: 2.6s;
  animation-delay: 0.35s;
}

#setDarkMode + .toggle-track .theme-toggle-star.star-4 {
  width: 1.25px;
  height: 1.25px;
  top: 7px;
  left: 20px;
  animation-duration: 3.4s;
  animation-delay: 1.1s;
}

#setDarkMode + .toggle-track .theme-toggle-star.star-5 {
  width: 1px;
  height: 1px;
  top: 13px;
  left: 23px;
  animation-delay: 0.2s;
}

#setDarkMode + .toggle-track .theme-toggle-shooting-star {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85));
  transform: rotate(-45deg);
  opacity: 0;
  animation: darkToggleShooting 5s infinite;
}

#setDarkMode + .toggle-track .theme-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(180deg, #fef08a 0%, #facc15 100%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 -1px 3px rgba(202, 138, 4, 0.45),
    0 0 8px rgba(250, 204, 21, 0.45);
  transition:
    transform 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6),
    background 0.8s ease,
    box-shadow 0.8s ease;
}

#setDarkMode + .toggle-track .theme-toggle-sun-flare {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(250, 204, 21, 0.5);
  opacity: 1;
  transition: opacity 0.4s ease;
  animation: darkToggleFlarePulse 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

#setDarkMode + .toggle-track .theme-toggle-crater {
  position: absolute;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  z-index: 1;
}

#setDarkMode + .toggle-track .theme-toggle-crater.crater-1 {
  width: 5px;
  height: 5px;
  top: 8px;
  left: 3px;
}

#setDarkMode + .toggle-track .theme-toggle-crater.crater-2 {
  width: 3px;
  height: 3px;
  top: 3px;
  left: 10px;
}

#setDarkMode + .toggle-track .theme-toggle-crater.crater-3 {
  width: 4px;
  height: 4px;
  top: 12px;
  left: 11px;
}

#setDarkMode:checked + .toggle-track {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  box-shadow:
    inset 0 1px 4px rgba(255, 255, 255, 0.06),
    inset 0 -2px 5px rgba(0, 0, 0, 0.48),
    0 1px 3px rgba(0, 0, 0, 0.38);
}

#setDarkMode:checked + .toggle-track .theme-toggle-clouds {
  opacity: 0;
  transform: translateY(10px);
}

#setDarkMode:checked + .toggle-track .theme-toggle-stars {
  opacity: 1;
  transform: translateY(0);
}

#setDarkMode:checked + .toggle-track .theme-toggle-knob {
  transform: translateX(20px);
  background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 -1px 3px rgba(100, 116, 139, 0.5),
    0 0 8px rgba(255, 255, 255, 0.16);
}

#setDarkMode:checked + .toggle-track .theme-toggle-sun-flare {
  opacity: 0;
}

#setDarkMode:checked + .toggle-track .theme-toggle-crater {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.16s;
}

@keyframes darkToggleCloudDrift {
  0% { transform: translateX(-1.5px); }
  100% { transform: translateX(2px); }
}

@keyframes darkToggleStarTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.82); }
  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.85);
  }
}

@keyframes darkToggleFlarePulse {
  0% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes darkToggleShooting {
  0% {
    transform: translate(0, 0) rotate(-45deg) scaleX(0);
    opacity: 0;
  }
  12% {
    transform: translate(-4px, 4px) rotate(-45deg) scaleX(1);
    opacity: 0.95;
  }
  24% {
    transform: translate(-14px, 14px) rotate(-45deg) scaleX(0);
    opacity: 0;
  }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #setDarkMode + .toggle-track,
  #setDarkMode + .toggle-track .theme-toggle-clouds,
  #setDarkMode + .toggle-track .theme-toggle-stars,
  #setDarkMode + .toggle-track .theme-toggle-knob,
  #setDarkMode + .toggle-track .theme-toggle-sun-flare,
  #setDarkMode + .toggle-track .theme-toggle-crater {
    transition-duration: 0.01ms;
  }

  #setDarkMode + .toggle-track .theme-toggle-cloud-drifter,
  #setDarkMode + .toggle-track .theme-toggle-star,
  #setDarkMode + .toggle-track .theme-toggle-sun-flare,
  #setDarkMode + .toggle-track .theme-toggle-shooting-star {
    animation: none;
  }
}

/* ===== INPUT ===== */
.input-field {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 12px;
  width: 100%;
  transition: border-color 0.2s;
}

.input-field:focus { outline: none; border-color: var(--cyan); }

/* ===== ACCURACY RING ===== */
.accuracy-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ring-svg { transform: rotate(-90deg); }
.ring-text { font-family: var(--mono); font-size: 20px; font-weight: 700; }

/* ===== LOG ENTRY ===== */
.log-entry {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(26,45,71,0.4);
  font-family: var(--mono);
  font-size: 11px;
}

.log-time { color: var(--text-muted); min-width: 70px; }
.log-level { min-width: 50px; }
.log-level.info { color: var(--cyan); }
.log-level.warn { color: var(--gold); }
.log-level.err { color: var(--red); }
.log-level.ok { color: var(--green); }
.log-msg { color: var(--text-secondary); }

.history-day-list {
  display: grid;
  gap: 10px;
}

.history-day-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.history-day-row:hover {
  border-color: var(--border-bright);
  transform: translateY(-1px);
}

.history-day-main {
  min-width: 0;
}

.history-day-title {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

.history-day-meta {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.history-day-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
}

.price-history-day-row {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
}

.price-history-day-boundaries,
.price-history-boundary-legend,
.price-history-popup-boundaries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.price-history-day-boundaries {
  margin-top: 8px;
}

.price-history-boundary-legend {
  margin-bottom: 12px;
}

.price-history-popup-boundaries {
  margin-top: 2px;
}

.price-history-boundary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-bright);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 4px 10px;
}

.price-history-boundary-pill.is-hit {
  border-color: color-mix(in srgb, #ffffff 66%, transparent);
  color: var(--text-primary);
}

.price-history-boundary-pill.is-missing {
  opacity: 0.48;
}

.price-history-boundary-pill.is-compact {
  font-size: 8px;
  letter-spacing: 0.07em;
  padding: 3px 8px;
}

.price-history-boundary-pill.is-premarket {
  border-color: color-mix(in srgb, var(--gold) 60%, var(--border) 40%);
  background: color-mix(in srgb, var(--gold) 18%, var(--bg-surface) 82%);
}

.price-history-boundary-pill.is-open {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border) 42%);
  background: color-mix(in srgb, var(--green) 16%, var(--bg-surface) 84%);
}

.price-history-boundary-pill.is-close {
  border-color: color-mix(in srgb, var(--red) 55%, var(--border) 45%);
  background: color-mix(in srgb, var(--red) 14%, var(--bg-surface) 86%);
}

.price-history-boundary-pill.is-aftermarket {
  border-color: color-mix(in srgb, var(--cyan) 60%, var(--border) 40%);
  background: color-mix(in srgb, var(--cyan) 16%, var(--bg-surface) 84%);
}

.price-history-boundary-pill.is-unscheduled {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

.history-log-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.history-day-popup {
  max-width: 920px;
}

.history-day-popup-body {
  display: grid;
  gap: 10px;
}

.history-day-popup-summary {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.history-popup-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-popup-filter-btn {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.history-popup-filter-btn:hover {
  border-color: var(--border-bright);
  color: var(--text-primary);
}

.history-popup-filter-btn.active {
  border-color: var(--cyan);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
}

.history-popup-filter-btn .count {
  font-weight: 700;
  margin-left: 4px;
}

.history-popup-empty-cell {
  text-align: center;
  color: var(--text-muted) !important;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.history-day-popup-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
  max-height: 420px;
}

.history-day-popup-table .history-table {
  margin: 0;
}

.history-price-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.history-price-snapshot-card {
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.history-price-snapshot-card .label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.history-price-snapshot-card .value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ===== PRICE HISTORY V2 ===== */
#page-price-history {
  padding: 8px 0 72px;
}

.price-history-v2-shell {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.price-history-v2-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 24px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.price-history-v2-header-copy {
  display: grid;
  gap: 8px;
}

.price-history-v2-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
}

.price-history-v2-header-text {
  max-width: 580px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: #64748b;
}

.price-history-v2-header-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.price-history-v2-header-btn,
.price-history-v2-view-btn,
.price-history-v2-modal-btn {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  min-height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.price-history-v2-header-btn:hover,
.price-history-v2-view-btn:hover,
.price-history-v2-modal-btn:hover {
  transform: translateY(-1px);
  background: #f8fafc;
  color: #334155;
  border-color: rgba(203, 213, 225, 1);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.price-history-v2-header-btn.is-clear:hover {
  background: #fff1f2;
  color: #e11d48;
  border-color: rgba(253, 205, 211, 0.95);
}

.price-history-v2-header-btn svg,
.price-history-v2-modal-btn svg {
  flex: 0 0 auto;
}

.price-history-v2-session-row,
.price-history-v2-modal-session-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.price-history-v2-list {
  min-height: 120px;
}

.price-history-v2-card-stack {
  display: grid;
  gap: 16px;
}

.price-history-v2-empty-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 24px;
  padding: 24px 26px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.price-history-v2-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(224, 242, 254, 0.95);
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0ea5e9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.price-history-v2-empty-copy {
  display: grid;
  gap: 6px;
}

.price-history-v2-empty-title {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.price-history-v2-empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
}

.price-history-v2-day-card {
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 24px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  cursor: pointer;
}

.price-history-v2-day-card:hover {
  transform: translateY(-2px);
  border-color: rgba(203, 213, 225, 1);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.price-history-v2-day-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.price-history-v2-day-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 12px;
}

.price-history-v2-day-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: #1e293b;
}

.price-history-v2-day-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: 13px;
  color: #64748b;
}

.price-history-v2-symbol-pill,
.price-history-v2-modal-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(224, 242, 254, 0.95);
  background: #f0f9ff;
  color: #38bdf8;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.08);
}

.price-history-v2-boundary-count {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}

.price-history-v2-meta-divider {
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 1);
}

.price-history-v2-open-close {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.price-history-v2-open-close strong {
  color: #0f172a;
  font-weight: 800;
}

.price-history-v2-open-close-arrow {
  color: #94a3b8;
}

.price-history-v2-net-move,
.price-history-v2-inline-tone,
.price-history-v2-tone {
  font-weight: 800;
}

.price-history-v2-net-move.is-up,
.price-history-v2-inline-tone.is-up,
.price-history-v2-tone.is-up,
.price-history-v2-metric-value.is-up {
  color: #10b981;
}

.price-history-v2-net-move.is-down,
.price-history-v2-inline-tone.is-down,
.price-history-v2-tone.is-down,
.price-history-v2-metric-value.is-down {
  color: #f43f5e;
}

.price-history-v2-net-move.is-flat,
.price-history-v2-inline-tone.is-flat,
.price-history-v2-tone.is-flat {
  color: #64748b;
}

.price-history-v2-day-actions {
  flex: 0 0 auto;
  display: grid;
  gap: 12px;
  justify-items: end;
}

.price-history-v2-latest-check {
  display: grid;
  gap: 2px;
  text-align: right;
}

.price-history-v2-latest-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.price-history-v2-latest-value {
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}

.price-history-v2-action-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.price-history-v2-view-btn {
  padding: 0 24px;
}

.price-history-v2-delete-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: #f43f5e;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(244, 63, 94, 0.24);
  transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.price-history-v2-delete-btn:hover {
  transform: translateY(-1px);
  background: #e11d48;
  box-shadow: 0 14px 24px rgba(225, 29, 72, 0.28);
}

.price-history-v2-delete-btn i {
  font-size: 16px;
}

.price-history-v2-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
}

.price-history-v2-mini-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.price-history-v2-mini-pill.is-inactive {
  border-color: rgba(241, 245, 249, 1);
  color: #cbd5e1;
  background: #ffffff;
}

.price-history-v2-session-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 1);
  background: #ffffff;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.price-history-v2-session-pill.is-inactive {
  border-color: rgba(241, 245, 249, 1);
  color: #cbd5e1;
  background: #ffffff;
}

.price-history-v2-session-pill.is-active.is-amber,
.price-history-v2-mini-pill.is-active.is-amber,
.price-history-v2-table-boundary.is-amber {
  border-color: rgba(253, 230, 138, 0.95);
  background: #fffbeb;
  color: #d97706;
}

.price-history-v2-session-pill.is-active.is-emerald,
.price-history-v2-mini-pill.is-active.is-emerald,
.price-history-v2-table-boundary.is-emerald {
  border-color: rgba(167, 243, 208, 0.95);
  background: #ecfdf5;
  color: #059669;
}

.price-history-v2-session-pill.is-active.is-rose,
.price-history-v2-mini-pill.is-active.is-rose,
.price-history-v2-table-boundary.is-rose {
  border-color: rgba(254, 205, 211, 0.95);
  background: #fff1f2;
  color: #e11d48;
}

.price-history-v2-session-pill.is-active.is-sky,
.price-history-v2-mini-pill.is-active.is-sky,
.price-history-v2-table-boundary.is-sky {
  border-color: rgba(186, 230, 253, 0.95);
  background: #f0f9ff;
  color: #0284c7;
}

.price-history-v2-session-pill.is-active.is-slate,
.price-history-v2-mini-pill.is-active.is-slate,
.price-history-v2-table-boundary.is-slate {
  border-color: rgba(226, 232, 240, 1);
  background: #f8fafc;
  color: #475569;
}

.price-history-v2-session-pill-time {
  opacity: 0.62;
  font-weight: 800;
}

.popup.price-history-v2-modal {
  width: min(1000px, 96vw);
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  background-image: none !important;
  box-shadow: 0 14px 44px rgba(0,0,0,0.1) !important;
  overflow: hidden;
}

.popup.price-history-v2-modal::before,
.popup.price-history-v2-modal::after {
  display: none !important;
  background: none !important;
  content: none !important;
}

.price-history-v2-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 32px 24px;
  border-bottom: 1px solid rgba(241, 245, 249, 1);
}

.price-history-v2-modal-header-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 12px;
}

.price-history-v2-modal .price-history-v2-modal-title {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
  text-transform: uppercase;
}

.price-history-v2-modal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.price-history-v2-modal-summary {
  max-width: 720px;
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 500;
  color: #64748b;
}

.price-history-v2-modal-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #f8fafc;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease;
  cursor: pointer;
}

.price-history-v2-modal-close:hover {
  transform: translateY(-1px);
  background: #f1f5f9;
  color: #64748b;
}

.price-history-v2-modal-body {
  flex: 1 1 auto;
  overflow: auto;
  margin-bottom: 0;
  padding: 24px 32px 32px;
}

.price-history-v2-modal-content {
  display: grid;
  gap: 24px;
}

.price-history-v2-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.price-history-v2-metric-card {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  padding: 18px 16px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.price-history-v2-metric-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}

.price-history-v2-metric-value {
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.price-history-v2-table-shell {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.price-history-v2-table-wrap {
  overflow: auto;
}

.price-history-v2-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 13px;
  color: #475569;
}

.price-history-v2-table thead th {
  padding: 16px 24px;
  background: rgba(248, 250, 252, 0.75);
  border-bottom: 1px solid rgba(241, 245, 249, 1);
  text-align: left;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}

.price-history-v2-table tbody td {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(241, 245, 249, 1);
  font-weight: 600;
  white-space: nowrap;
}

.price-history-v2-table tbody tr:last-child td {
  border-bottom: none;
}

.price-history-v2-table tbody tr:hover td {
  background: rgba(248, 250, 252, 0.55);
}

.price-history-v2-table-time {
  color: #0f172a;
  font-weight: 800;
}

.price-history-v2-table-boundary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03);
}

.price-history-v2-table-price {
  color: #38bdf8;
  font-weight: 950;
}

.price-history-v2-table-session {
  color: #94a3b8;
  font-weight: 800;
}

.price-history-v2-empty-cell {
  text-align: center;
  color: #94a3b8;
  padding: 28px 24px !important;
}

.price-history-v2-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 32px;
  background: rgba(248, 250, 252, 0.72);
  border-top: 1px solid rgba(241, 245, 249, 1);
}

.price-history-v2-modal-btn {
  min-height: 48px;
  padding: 0 24px;
  font-size: 12px;
}

.price-history-v2-modal-btn.is-danger {
  border-color: rgba(244, 63, 94, 0.18);
  background: #e11d48;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(225, 29, 72, 0.26);
}

.price-history-v2-modal-btn.is-danger:hover {
  background: #be123c;
  border-color: rgba(190, 18, 60, 0.35);
  color: #ffffff;
}

.price-history-v2-modal-btn.is-primary {
  border-color: rgba(15, 23, 42, 0.92);
  background: #1e293b;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.price-history-v2-modal-btn.is-primary:hover {
  background: #0f172a;
  border-color: rgba(15, 23, 42, 1);
  color: #ffffff;
}

@media (max-width: 1024px) {
  .price-history-v2-day-head {
    flex-direction: column;
    gap: 18px;
  }

  .price-history-v2-day-actions {
    width: 100%;
    justify-items: stretch;
  }

  .price-history-v2-latest-check {
    text-align: left;
  }

  .price-history-v2-action-row {
    justify-content: flex-start;
  }

  .price-history-v2-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  #page-price-history {
    width: calc(100% + 12px);
    margin-left: -6px;
    margin-right: -6px;
    border-radius: 22px;
    padding-bottom: 56px;
  }

  .price-history-v2-shell {
    width: min(100%, calc(100% - 20px));
    gap: 18px;
  }

  .price-history-v2-header-card,
  .price-history-v2-day-card,
  .price-history-v2-empty-card {
    padding: 20px;
    border-radius: 22px;
  }

  .price-history-v2-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .price-history-v2-header-actions {
    width: 100%;
  }

  .price-history-v2-header-btn,
  .price-history-v2-view-btn,
  .price-history-v2-modal-btn {
    flex: 1 1 180px;
  }

  .price-history-v2-day-title {
    font-size: 18px;
  }

  .price-history-v2-modal {
    width: min(100vw - 16px, 1000px);
    max-height: calc(100vh - 24px);
    border-radius: 28px;
  }

  .price-history-v2-modal-header,
  .price-history-v2-modal-body,
  .price-history-v2-modal-actions {
    padding-left: 20px;
    padding-right: 20px;
  }

  .price-history-v2-modal-header {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .price-history-v2-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .price-history-v2-header-actions,
  .price-history-v2-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .price-history-v2-day-meta {
    gap: 10px;
  }

  .price-history-v2-meta-divider {
    display: none;
  }

  .price-history-v2-action-row {
    width: 100%;
  }

  .price-history-v2-view-btn {
    flex: 1 1 auto;
  }

  .price-history-v2-delete-btn {
    flex: 0 0 42px;
  }

  .price-history-v2-modal-header {
    flex-direction: column;
  }

  .price-history-v2-modal-close {
    align-self: flex-end;
    margin-top: -8px;
  }
}

/* ===== PRICE HISTORY V3 ===== */
.price-history-v3-header-copy,
.price-history-v3-search-block,
.price-history-v3-side-stack,
.price-history-v3-main-stack,
.price-history-v3-popup-stack {
  display: grid;
  gap: 16px;
}

.price-history-v3-brand-row,
.price-history-v3-quick-head,
.price-history-v3-side-symbol-row,
.price-history-v3-chart-head,
.price-history-v3-popup-focus-head,
.price-history-v3-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.price-history-v3-brand-row {
  justify-content: flex-start;
}

.price-history-v3-brand-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(199, 210, 254, 0.9);
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.12);
}

.price-history-v3-brand-kicker,
.price-history-v3-section-kicker,
.price-history-v3-side-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6366f1;
}

.price-history-v3-brand-title {
  margin: 4px 0 0;
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.05em;
  color: #0f172a;
}

.price-history-v3-brand-text {
  max-width: 640px;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #64748b;
}

.price-history-v3-search-block {
  min-width: min(100%, 560px);
  flex: 1 1 520px;
}

.price-history-v3-search-control {
  width: 100%;
}

.price-history-v3-search-row,
.price-history-v3-filter-group,
.price-history-v3-chart-actions,
.price-history-v3-popup-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.price-history-v3-search-stack {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.price-history-v3-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.price-history-v3-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #818cf8;
}

.price-history-v3-search-input {
  width: 100%;
  min-height: 52px;
  padding: 0 52px 0 44px;
  border-radius: 20px;
  border: 2px solid rgba(226, 232, 240, 0.95);
  background: #f8fafc;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.price-history-v3-search-input::placeholder {
  color: #94a3b8;
  text-transform: none;
  font-weight: 600;
}

.price-history-v3-search-input:focus {
  background: #ffffff;
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.12);
}

.price-history-v3-search-clear,
.price-history-v3-search-submit,
.price-history-v3-reset-btn,
.price-history-v3-save-btn,
.price-history-v3-inline-btn,
.price-history-v3-export-btn,
.price-history-v3-open-btn {
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  color: #475569;
  border-radius: 18px;
  min-height: 48px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.price-history-v3-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  box-shadow: none;
}

.price-history-v3-search-submit,
.price-history-v3-open-btn,
.price-history-v3-inline-btn.is-primary {
  background: #4f46e5;
  border-color: rgba(79, 70, 229, 0.96);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22);
}

.price-history-v3-search-submit {
  min-height: 52px;
  min-width: 142px;
}

.price-history-v3-search-clear:hover,
.price-history-v3-search-submit:hover,
.price-history-v3-reset-btn:hover,
.price-history-v3-save-btn:hover,
.price-history-v3-inline-btn:hover,
.price-history-v3-export-btn:hover,
.price-history-v3-open-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.95);
  background: #f8fafc;
  color: #334155;
}

.price-history-v3-search-submit:hover,
.price-history-v3-open-btn:hover,
.price-history-v3-inline-btn.is-primary:hover {
  background: #4338ca;
  color: #ffffff;
  border-color: rgba(67, 56, 202, 0.96);
}

.price-history-v3-save-btn.is-active {
  background: #eef2ff;
  color: #4338ca;
  border-color: rgba(165, 180, 252, 0.9);
}

.price-history-v3-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 10px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease,
    max-height 0.18s ease,
    padding 0.18s ease,
    border-color 0.18s ease;
}

.price-history-v3-search-results.is-open {
  padding: 12px;
  border-color: rgba(226, 232, 240, 0.9);
  max-height: 320px;
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.price-history-v3-search-hint {
  min-height: 48px;
  border-radius: 18px;
  border: 1px dashed rgba(203, 213, 225, 0.95);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  color: #64748b;
  background: rgba(248, 250, 252, 0.84);
  font-size: 13px;
  font-weight: 600;
}

.price-history-v3-search-hint.is-error {
  color: #dc2626;
  border-color: rgba(252, 165, 165, 0.95);
  background: rgba(254, 242, 242, 0.94);
}

.price-history-v3-search-item,
.price-history-v3-chip,
.price-history-v3-recent-item {
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.price-history-v3-search-item {
  min-height: 62px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.price-history-v3-search-item:hover,
.price-history-v3-chip:hover,
.price-history-v3-recent-item:hover {
  transform: translateY(-1px);
  border-color: rgba(165, 180, 252, 0.95);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.price-history-v3-search-symbol,
.price-history-v3-symbol-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  background: #eef2ff;
  border: 1px solid rgba(199, 210, 254, 0.95);
  color: #4338ca;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.price-history-v3-search-meta {
  display: grid;
  gap: 4px;
  text-align: left;
}

.price-history-v3-search-meta strong {
  font-size: 13px;
  color: #0f172a;
}

.price-history-v3-search-meta span,
.price-history-v3-quick-note,
.price-history-v3-chart-subtitle {
  font-size: 12px;
  color: #64748b;
}

.price-history-v3-status-badge,
.price-history-v3-chart-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.78);
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.price-history-v3-quick-row,
.price-history-v3-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.price-history-v3-quick-card,
.price-history-v3-toolbar-card,
.price-history-v3-side-card,
.price-history-v3-chart-card,
.price-history-v3-metrics-shell,
.price-history-v3-table-shell,
.price-history-v3-loading-card,
.price-history-v3-popup-focus,
.price-history-v3-popup-table-shell {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}

.price-history-v3-quick-card,
.price-history-v3-toolbar-card,
.price-history-v3-side-card,
.price-history-v3-loading-card {
  padding: 24px;
}

.price-history-v3-side-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.price-history-v3-quick-card.is-expanded {
  padding: 28px;
}

.price-history-v3-quick-card.is-full-width {
  grid-column: 1 / -1;
}

.price-history-v3-toolbar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.price-history-v3-quick-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #334155;
}

.price-history-v3-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.price-history-v3-chip {
  min-height: 38px;
  padding: 0 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #475569;
}

.price-history-v3-chip.is-favorite {
  background: #eef2ff;
  color: #4338ca;
}

.price-history-v3-chip.is-muted {
  background: #f8fafc;
  color: #94a3b8;
  cursor: default;
}

.price-history-v3-timeframe-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.price-history-v3-timeframe-pill {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.price-history-v3-timeframe-pill.is-active {
  background: #eef2ff;
  color: #4338ca;
  border-color: rgba(165, 180, 252, 0.95);
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.12);
}

.price-history-v3-date-field,
.price-history-v3-popup-date {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price-history-v3-date-field input,
.price-history-v3-popup-date input {
  border: none;
  outline: none;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.price-history-v3-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.price-history-v3-main,
.price-history-v3-side {
  display: grid;
  gap: 18px;
}

.price-history-v3-side-head {
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(241, 245, 249, 1);
}

.price-history-v3-pulse-card {
  margin-top: 18px;
}

.price-history-v3-side-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}

.price-history-v3-side-body {
  padding-top: 16px;
}

.price-history-v3-pulse-body {
  padding-top: 18px;
}

#priceHistoryDetailRail {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

#priceHistoryRecentRows {
  display: flex;
  width: 100%;
}

.price-history-v3-side-empty,
.price-history-v3-chart-empty {
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
}

.price-history-v3-side-stat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(241, 245, 249, 1);
}

.price-history-v3-side-stat span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.price-history-v3-side-stat strong,
.price-history-v3-popup-metric strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.price-history-v3-side-note {
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.price-history-v3-side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-height: 100%;
}

.price-history-v3-side-stack .price-history-v3-side-widget-wrap {
  margin-top: auto;
  flex: 1 1 auto;
}

.price-history-v3-side-widget-wrap {
  min-height: 220px;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow: hidden;
}

.price-history-v3-side-widget-wrap.is-pulse {
  min-height: 380px;
}

.price-history-v3-side-widget-wrap.is-horizontal {
  min-height: 380px;
}

.price-history-v3-pulse-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
}

.price-history-v3-pulse-copy {
  display: grid;
  gap: 16px;
  min-width: 0;
  align-content: start;
}

.price-history-v3-pulse-stats {
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 4px 18px;
}

.price-history-v3-pulse-stats .price-history-v3-side-stat:last-child {
  border-bottom: none;
}

.price-history-v3-empty-card,
.price-history-v3-loading-card {
  display: flex;
  align-items: center;
  gap: 18px;
}

.price-history-v3-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid rgba(199, 210, 254, 0.95);
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.price-history-v3-empty-title,
.price-history-v3-loading-title {
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.price-history-v3-empty-text,
.price-history-v3-loading-text {
  margin: 4px 0 0;
  color: #64748b;
  line-height: 1.65;
  font-size: 14px;
}

.price-history-v3-chart-card,
.price-history-v3-metrics-shell,
.price-history-v3-table-shell,
.price-history-v3-popup-focus,
.price-history-v3-popup-table-shell {
  padding: 24px;
}

.price-history-v3-chart-copy {
  display: grid;
  gap: 10px;
}

.price-history-v3-chart-tag-row,
.price-history-v3-chart-value-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.price-history-v3-chart-value-row strong {
  font-size: 38px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.05em;
  color: #0f172a;
}

.price-history-v3-chart-change,
.price-history-v3-recent-tone,
.price-history-v3-table-tone.is-up,
.price-history-v3-popup-metric strong.is-up,
.price-history-v3-side-stat strong.is-up {
  color: #10b981;
}

.price-history-v3-chart-change.is-down,
.price-history-v3-table-tone.is-down,
.price-history-v3-popup-metric strong.is-down,
.price-history-v3-side-stat strong.is-down {
  color: #f43f5e;
}

.price-history-v3-chart-wrap {
  position: relative;
  min-height: 360px;
  margin-top: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.92);
  overflow: hidden;
}

.price-history-v3-chart-wrap.is-popup {
  min-height: 520px;
}

.price-history-v3-widget-host {
  width: 100%;
  min-height: 220px;
  height: 100%;
}

.price-history-v3-widget-host.is-main {
  min-height: 560px;
  height: 560px;
}

.price-history-v3-widget-host.is-detail {
  min-height: 100%;
  height: 100%;
}

.price-history-v3-widget-host.is-pulse {
  min-height: 380px;
  height: 380px;
}

.price-history-v3-widget-host.is-popup {
  min-height: 520px;
  height: 520px;
}

.price-history-v3-widget-shell,
.price-history-v3-widget-frame,
.price-history-v3-widget-shell iframe,
.price-history-v3-widget-host .tradingview-widget-container,
.price-history-v3-widget-host .tradingview-widget-container__widget {
  width: 100%;
  height: 100%;
}

.price-history-v3-provider-note {
  margin: 16px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.7;
}

.price-history-v3-tv-empty {
  min-height: inherit;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
}

.price-history-v3-chart-svg {
  width: 100%;
  height: 360px;
}

.price-history-v3-chart-axis text {
  fill: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-sans, inherit);
}

.price-history-v3-metric-grid,
.price-history-v3-popup-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.price-history-v3-metric-card,
.price-history-v3-popup-metric {
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  padding: 16px 14px;
  display: grid;
  gap: 8px;
}

.price-history-v3-metric-label,
.price-history-v3-popup-metric span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.price-history-v3-metric-value {
  font-size: 21px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.price-history-v3-table-head {
  margin-bottom: 16px;
}

.price-history-v3-table-wrap,
.price-history-v3-popup-table-shell {
  overflow: auto;
}

.price-history-v3-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: #475569;
  font-size: 13px;
}

.price-history-v3-table th {
  text-align: left;
  padding: 14px 16px;
  background: rgba(248, 250, 252, 0.84);
  border-bottom: 1px solid rgba(241, 245, 249, 1);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}

.price-history-v3-table td {
  padding: 16px;
  border-bottom: 1px solid rgba(241, 245, 249, 1);
  font-weight: 700;
  white-space: nowrap;
}

.price-history-v3-table tbody tr.is-active td,
.price-history-v3-table tbody tr:hover td {
  background: rgba(238, 242, 255, 0.58);
}

.price-history-v3-table-date {
  color: #0f172a;
  font-weight: 900;
}

.price-history-v3-table-price {
  color: #4338ca;
  font-weight: 950;
}

.price-history-v3-table-empty {
  text-align: center;
  color: #94a3b8;
}

.price-history-v3-recent-item {
  width: 100%;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  margin-bottom: 10px;
}

.price-history-v3-recent-copy {
  display: grid;
  gap: 4px;
}

.price-history-v3-recent-copy strong,
.price-history-v3-popup-focus h4 {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  margin: 0;
}

.price-history-v3-recent-copy span {
  color: #64748b;
  font-size: 12px;
}

.price-history-v3-floating-action {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.price-history-v3-export-btn {
  background: #ffffff;
}

.price-history-v3-popup-toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.price-history-v3-popup-focus-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.price-history-v3-popup-focus-head h4 {
  margin-top: 6px;
}

html[data-theme='dark'] #page-price-history {
  background: linear-gradient(180deg, #09111f 0%, #0f172a 100%);
}

html[data-theme='dark'] .price-history-v3-quick-card,
html[data-theme='dark'] .price-history-v3-toolbar-card,
html[data-theme='dark'] .price-history-v3-side-card,
html[data-theme='dark'] .price-history-v3-chart-card,
html[data-theme='dark'] .price-history-v3-metrics-shell,
html[data-theme='dark'] .price-history-v3-table-shell,
html[data-theme='dark'] .price-history-v3-loading-card,
html[data-theme='dark'] .price-history-v3-popup-focus,
html[data-theme='dark'] .price-history-v3-popup-table-shell,
html[data-theme='dark'] .price-history-v2-header-card,
html[data-theme='dark'] .price-history-v2-modal {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(51, 65, 85, 0.95);
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.42);
}

html[data-theme='dark'] .price-history-v3-brand-title,
html[data-theme='dark'] .price-history-v3-side-title,
html[data-theme='dark'] .price-history-v3-empty-title,
html[data-theme='dark'] .price-history-v3-loading-title,
html[data-theme='dark'] .price-history-v3-chart-value-row strong,
html[data-theme='dark'] .price-history-v3-search-meta strong,
html[data-theme='dark'] .price-history-v3-table-date,
html[data-theme='dark'] .price-history-v3-recent-copy strong,
html[data-theme='dark'] .price-history-v3-popup-focus h4,
html[data-theme='dark'] .price-history-v3-side-stat strong,
html[data-theme='dark'] .price-history-v3-popup-metric strong,
html[data-theme='dark'] .price-history-v3-metric-value {
  color: #e5eefc;
}

html[data-theme='dark'] .price-history-v3-brand-text,
html[data-theme='dark'] .price-history-v3-quick-note,
html[data-theme='dark'] .price-history-v3-chart-subtitle,
html[data-theme='dark'] .price-history-v3-side-empty,
html[data-theme='dark'] .price-history-v3-empty-text,
html[data-theme='dark'] .price-history-v3-loading-text,
html[data-theme='dark'] .price-history-v3-recent-copy span,
html[data-theme='dark'] .price-history-v3-side-stat span,
html[data-theme='dark'] .price-history-v3-side-note,
html[data-theme='dark'] .price-history-v3-search-hint,
html[data-theme='dark'] .price-history-v3-table,
html[data-theme='dark'] .price-history-v3-popup-metric span,
html[data-theme='dark'] .price-history-v3-metric-label,
html[data-theme='dark'] .price-history-v3-provider-note,
html[data-theme='dark'] .price-history-v3-tv-empty {
  color: #94a3b8;
}

html[data-theme='dark'] .price-history-v3-brand-icon,
html[data-theme='dark'] .price-history-v3-empty-icon {
  background: linear-gradient(180deg, rgba(67, 56, 202, 0.24) 0%, rgba(49, 46, 129, 0.4) 100%);
  border-color: rgba(99, 102, 241, 0.34);
  color: #c7d2fe;
}

html[data-theme='dark'] .price-history-v3-search-input,
html[data-theme='dark'] .price-history-v3-search-item,
html[data-theme='dark'] .price-history-v3-chip,
html[data-theme='dark'] .price-history-v3-search-clear,
html[data-theme='dark'] .price-history-v3-reset-btn,
html[data-theme='dark'] .price-history-v3-save-btn,
html[data-theme='dark'] .price-history-v3-inline-btn,
html[data-theme='dark'] .price-history-v3-date-field,
html[data-theme='dark'] .price-history-v3-popup-date,
html[data-theme='dark'] .price-history-v3-timeframe-pill,
html[data-theme='dark'] .price-history-v3-recent-item,
html[data-theme='dark'] .price-history-v3-metric-card,
html[data-theme='dark'] .price-history-v3-popup-metric,
html[data-theme='dark'] .price-history-v3-chart-wrap,
html[data-theme='dark'] .price-history-v3-status-badge,
html[data-theme='dark'] .price-history-v3-chart-meta,
html[data-theme='dark'] .price-history-v3-side-widget-wrap {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(51, 65, 85, 0.95);
  color: #cbd5e1;
}

html[data-theme='dark'] .price-history-v3-search-input {
  color: #e5eefc;
}

html[data-theme='dark'] .price-history-v3-search-input::placeholder {
  color: #64748b;
}

html[data-theme='dark'] .price-history-v3-timeframe-pill.is-active,
html[data-theme='dark'] .price-history-v3-save-btn.is-active,
html[data-theme='dark'] .price-history-v3-chip.is-favorite,
html[data-theme='dark'] .price-history-v3-symbol-pill,
html[data-theme='dark'] .price-history-v3-search-symbol {
  background: rgba(79, 70, 229, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
}

html[data-theme='dark'] .price-history-v3-search-submit,
html[data-theme='dark'] .price-history-v3-open-btn,
html[data-theme='dark'] .price-history-v3-inline-btn.is-primary {
  background: #4f46e5;
  border-color: rgba(99, 102, 241, 0.9);
  color: #ffffff;
}

html[data-theme='dark'] .price-history-v3-table th,
html[data-theme='dark'] .price-history-v3-table tbody tr:hover td,
html[data-theme='dark'] .price-history-v3-table tbody tr.is-active td {
  background: rgba(15, 23, 42, 0.78);
}

html[data-theme='dark'] .price-history-v3-table td,
html[data-theme='dark'] .price-history-v3-side-head,
html[data-theme='dark'] .price-history-v3-side-stat {
  border-color: rgba(30, 41, 59, 0.9);
}

html[data-theme='dark'] .price-history-v3-date-field input,
html[data-theme='dark'] .price-history-v3-popup-date input {
  color: #e5eefc;
}

html[data-theme='dark'] .price-history-v3-search-hint {
  background: rgba(15, 23, 42, 0.76);
  border-color: rgba(51, 65, 85, 0.95);
}

html[data-theme='dark'] .price-history-v3-search-results {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(51, 65, 85, 0.95);
  box-shadow: 0 22px 42px rgba(2, 6, 23, 0.5);
}

html[data-theme='dark'] .price-history-v3-search-hint.is-error {
  background: rgba(69, 10, 10, 0.34);
  border-color: rgba(127, 29, 29, 0.9);
  color: #fca5a5;
}

@media (max-width: 1024px) {
  .price-history-v3-layout,
  .price-history-v3-quick-row,
  .price-history-v3-bottom-grid {
    grid-template-columns: 1fr;
  }

  .price-history-v3-pulse-row {
    grid-template-columns: 1fr;
  }

  .price-history-v3-chart-head,
  .price-history-v3-search-row,
  .price-history-v3-filter-group {
    flex-wrap: wrap;
  }

  .price-history-v3-metric-grid,
  .price-history-v3-popup-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-history-v3-widget-host.is-main {
    min-height: 500px;
    height: 500px;
  }
}

@media (max-width: 640px) {
  .price-history-v3-search-submit,
  .price-history-v3-reset-btn,
  .price-history-v3-export-btn,
  .price-history-v3-open-btn,
  .price-history-v3-inline-btn,
  .price-history-v3-save-btn {
    width: 100%;
  }

  .price-history-v3-floating-action,
  .price-history-v3-chart-actions,
  .price-history-v3-popup-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .price-history-v3-metric-grid,
  .price-history-v3-popup-metric-grid {
    grid-template-columns: 1fr;
  }

  .price-history-v3-search-results {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: translateY(0);
  }

  .price-history-v3-chart-value-row strong {
    font-size: 30px;
  }

  .price-history-v3-status-badge,
  .price-history-v3-chart-meta {
    width: 100%;
  }

  .price-history-v3-widget-host.is-main {
    min-height: 420px;
    height: 420px;
  }

  .price-history-v3-widget-host.is-pulse,
  .price-history-v3-widget-host.is-popup,
  .price-history-v3-side-widget-wrap.is-pulse {
    min-height: 300px;
    height: 300px;
  }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-dim); }

/* ===== GLOW EFFECTS ===== */
.glow-cyan { box-shadow: 0 0 20px rgba(0,212,255,0.15); }
.glow-green { box-shadow: 0 0 20px rgba(0,255,136,0.15); }
.glow-red { box-shadow: 0 0 20px rgba(255,51,102,0.15); }

/* ===== TICKER TAPE ===== */
.ticker-wrapper {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  padding: 6px 0;
  margin-bottom: 24px;
}

.ticker-content {
  display: flex;
  gap: 40px;
  animation: ticker 20s linear infinite;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
}

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker-item { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.ticker-item .sym { color: var(--cyan); font-weight: 700; }

/* ===== FORECAST MINI CHART ===== */
.mini-sparkline { display: block; }

/* ===== SCROLLABLE AREAS ===== */
.scroll-area { max-height: 400px; overflow-y: auto; }
.scroll-area.tall { max-height: 520px; }

.engine-live-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.engine-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.engine-live-label {
  width: 180px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
}
.engine-live-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.engine-live-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width 0.8s ease;
}
.engine-live-val {
  width: 52px;
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cyan);
}
.trajectory-point-detail {
  margin-top: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 12px;
}

.empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }

/* ===== NUMBER ANIMATION ===== */
@keyframes countUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.num-animate { animation: countUp 0.5s ease forwards; }

/* ===== FLASH ===== */
@keyframes flashGreen { 0%,100% { background: transparent; } 50% { background: rgba(0,255,136,0.1); } }
@keyframes flashRed { 0%,100% { background: transparent; } 50% { background: rgba(255,51,102,0.1); } }
.flash-green { animation: flashGreen 0.5s ease; }
.flash-red { animation: flashRed 0.5s ease; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .forecast-grid { grid-template-columns: repeat(4, 1fr); }
  .advice-grid { grid-template-columns: repeat(3, 1fr); }
  .history-days-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sim-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-reason-list { grid-template-columns: 1fr; }
  .weight-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weight-meta-box { border-right: none; padding-right: 0; }
  .signal-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signal-bottom-grid { grid-template-columns: 1fr; }
  .options-playbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-plus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .learning-live-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-live-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .forecast-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .advice-grid { grid-template-columns: repeat(2, 1fr); }
  .sidebar { width: 180px; }
  .top-bar { flex-wrap: wrap; gap: 10px; }
  .top-bar-left, .top-bar-right { width: 100%; flex-wrap: wrap; }
  .price-live, .session-box { width: 100%; }
  .setting-row { align-items: flex-start; gap: 10px; }
  .setting-row select.input-field { width: 170px; min-width: 170px; }
  .history-days-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-summary-grid,
  .sim-focus-grid,
  .weight-meta,
  .dash-detail-grid { grid-template-columns: 1fr; }
  .sim-focus-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .signal-extra-grid { grid-template-columns: 1fr; }
  .signal-bottom-grid { grid-template-columns: 1fr; }
  .options-day-chooser { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .options-playbook-grid,
  .acc-plus-grid,
  .learning-live-kpis,
  .learning-live-split { grid-template-columns: 1fr; }
}

/* ===== REPORT PANEL ===== */
.report-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.report-day-card {
  --report-day-hover-accent: var(--cyan);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.report-day-card.bullish { --report-day-hover-accent: var(--green); }
.report-day-card.bearish { --report-day-hover-accent: var(--red); }
.report-day-card.neutral { --report-day-hover-accent: var(--gold); }

.report-day-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--report-day-hover-accent) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--report-day-hover-accent) 8%, var(--bg-surface) 92%);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--report-day-hover-accent) 13%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent);
}

html[data-market-session='open'] .report-day-card:hover {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--green) 10%, var(--bg-surface) 90%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--green) 16%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

html[data-market-session='premarket'] .report-day-card:hover {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--gold) 10%, var(--bg-surface) 90%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--gold) 15%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

html[data-market-session='aftermarket'] .report-day-card:hover {
  border-color: color-mix(in srgb, var(--purple) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--purple) 10%, var(--bg-surface) 90%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--purple) 15%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

html[data-market-session='closed'] .report-day-card:hover {
  border-color: color-mix(in srgb, var(--red) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--red) 10%, var(--bg-surface) 90%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--red) 15%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

html[data-market-session] .report-day-card.bullish:hover {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--green) 10%, var(--bg-surface) 90%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--green) 16%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

html[data-market-session] .report-day-card.bearish:hover {
  border-color: color-mix(in srgb, var(--red) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--red) 10%, var(--bg-surface) 90%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--red) 16%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

html[data-market-session] .report-day-card.neutral:hover {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--gold) 10%, var(--bg-surface) 90%);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--gold) 15%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

.report-section-title {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(26,45,71,0.3);
}

.report-row:last-child { border-bottom: none; }
.report-key { color: var(--text-secondary); }
.report-val { color: var(--text-primary); font-family: var(--mono); }

.forecast-params-modern {
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, #ffffff 72%, var(--border) 28%);
  background:
    linear-gradient(160deg, color-mix(in srgb, #ffffff 90%, transparent), color-mix(in srgb, var(--cyan) 5%, var(--bg-surface) 95%));
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--cyan) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
  padding: 18px;
}

.forecast-params-modern .report-section-title {
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--cyan) 82%, var(--text-primary) 18%);
}

.forecast-params-modern .report-row {
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  padding: 9px 12px;
  margin-bottom: 8px;
  align-items: flex-start;
  gap: 12px;
}

.forecast-params-modern .report-row:last-child {
  margin-bottom: 0;
}

.forecast-params-modern .report-key {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary) 12%);
}

.forecast-params-modern .report-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.forecast-report-day-modern {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, #ffffff 70%, var(--border) 30%);
  background:
    linear-gradient(165deg, color-mix(in srgb, #ffffff 94%, transparent), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--bg-deep) 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.forecast-report-day-modern .report-section-title {
  border-bottom: none;
  padding-bottom: 2px;
  margin-bottom: 10px;
  letter-spacing: 0.13em;
}

.forecast-report-day-modern .report-row {
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  padding: 8px 10px;
  margin-bottom: 7px;
  align-items: flex-start;
  gap: 10px;
}

.forecast-report-day-modern .report-row:last-child {
  margin-bottom: 0;
}

.forecast-report-day-modern .report-key {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.forecast-report-day-modern .report-val {
  font-size: 12px;
  font-weight: 600;
}

/* ===== INDICATOR DOTS ===== */
.ind-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.ind-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ind-dot.bull { background: var(--green); box-shadow: 0 0 6px var(--green); }
.ind-dot.bear { background: var(--red); box-shadow: 0 0 6px var(--red); }
.ind-dot.neutral { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.ind-name { color: var(--text-secondary); width: 140px; }
.ind-val { color: var(--text-primary); font-family: var(--mono); margin-left: auto; }

/* ===== PROGRESS RING MINI ===== */
.progress-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bg-gradient-bull { background: linear-gradient(135deg, rgba(0,255,136,0.05), transparent); }
.bg-gradient-bear { background: linear-gradient(135deg, rgba(255,51,102,0.05), transparent); }

:root {
  color-scheme: light;
  --bg-deep: #eef3f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f8fafc;
  --border: #e2e8f0;
  --border-bright: #cbd5e1;
  --cyan: #0284c7;
  --cyan-dim: #0369a1;
  --cyan-glow: rgba(2, 132, 199, 0.12);
  --green: #16a34a;
  --green-dim: #15803d;
  --red: #d90429;
  --red-dim: #9f1239;
  --gold: #d97706;
  --gold-dim: #b45309;
  --orange: #ea580c;
  --purple: #7c3aed;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --display: 'Plus Jakarta Sans', sans-serif;
  --body: 'Plus Jakarta Sans', sans-serif;
  --glass: rgba(255, 255, 255, 0.82);
  --surface-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --sidebar-grad-a: #eff6ff;
  --sidebar-grad-b: #e0f2fe;
  --insight-bg: #f8fafc;
  --insight-border: #dbe5f0;
  --session-ui-accent: var(--cyan);
  --session-ui-accent-alt: var(--cyan-dim);
}

html[data-theme='dark'] {
  color-scheme: dark;
}

html[data-theme='dark'] {
  --bg-deep: #050a13;
  --bg-surface: #0c1424;
  --bg-card: #101a2d;
  --bg-hover: #15213a;
  --border: #1f304d;
  --border-bright: #324b71;
  --cyan: #38bdf8;
  --cyan-dim: #0ea5e9;
  --cyan-glow: rgba(56, 189, 248, 0.2);
  --green: #22c55e;
  --green-dim: #16a34a;
  --red: #f43f5e;
  --red-dim: #e11d48;
  --gold: #f59e0b;
  --gold-dim: #d97706;
  --orange: #fb923c;
  --purple: #a78bfa;
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --glass: rgba(10, 18, 34, 0.82);
  --surface-shadow: 0 20px 50px rgba(2, 6, 23, 0.62);
  --sidebar-grad-a: #0f1a2f;
  --sidebar-grad-b: #11263c;
  --insight-bg: #131f35;
  --insight-border: #243958;
  --session-ui-accent: var(--cyan);
  --session-ui-accent-alt: var(--cyan-dim);
}

body {
  font-family: var(--body);
  background:
    radial-gradient(circle at 0% 0%, #dbeafe 0%, transparent 38%),
    radial-gradient(circle at 100% 0%, #fee2e2 0%, transparent 30%),
    linear-gradient(180deg, #f8fafc 0%, #eff6ff 46%, #f8fafc 100%);
}

html[data-theme='dark'] body {
  background:
    radial-gradient(circle at 0% 0%, rgba(30, 58, 138, 0.4) 0%, transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(136, 19, 55, 0.25) 0%, transparent 28%),
    linear-gradient(180deg, #050a13 0%, #081224 52%, #050a13 100%);
}

html[data-market-session='open'] {
  --session-ui-accent: var(--green);
  --session-ui-accent-alt: var(--green-dim);
}

html[data-market-session='premarket'] {
  --session-ui-accent: var(--gold);
  --session-ui-accent-alt: var(--orange);
}

html[data-market-session='aftermarket'] {
  --session-ui-accent: var(--purple);
  --session-ui-accent-alt: var(--purple);
}

html[data-market-session='closed'] {
  --session-ui-accent: var(--red);
  --session-ui-accent-alt: var(--red-dim);
}

html[data-market-session='open'] body {
  background:
    radial-gradient(circle at 0% 0%, #d9fbe6 0%, transparent 40%),
    radial-gradient(circle at 100% 0%, #bbf7d0 0%, transparent 32%),
    linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 48%, #f7fee7 100%);
}

html[data-market-session='aftermarket'] body {
  background:
    radial-gradient(circle at 0% 0%, #ede9fe 0%, transparent 40%),
    radial-gradient(circle at 100% 0%, #ddd6fe 0%, transparent 34%),
    linear-gradient(180deg, #f5f3ff 0%, #eef2ff 46%, #f8f7ff 100%);
}

html[data-market-session='closed'] body {
  background:
    radial-gradient(circle at 0% 0%, #dbeafe 0%, transparent 38%),
    radial-gradient(circle at 100% 0%, #c7d2fe 0%, transparent 32%),
    linear-gradient(180deg, #eaf1ff 0%, #e0ebff 48%, #edf3ff 100%);
}

html[data-theme='dark'][data-market-session='open'] body {
  background:
    radial-gradient(circle at 0% 0%, rgba(22, 163, 74, 0.32) 0%, transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(30, 58, 138, 0.22) 0%, transparent 30%),
    linear-gradient(180deg, #04140c 0%, #052014 52%, #04120d 100%);
}

html[data-theme='dark'][data-market-session='aftermarket'] body {
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.34) 0%, transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(76, 29, 149, 0.3) 0%, transparent 32%),
    linear-gradient(180deg, #0e0a19 0%, #151028 52%, #0d0918 100%);
}

html[data-theme='dark'][data-market-session='closed'] body {
  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.34) 0%, transparent 36%),
    radial-gradient(circle at 100% 0%, rgba(30, 58, 138, 0.32) 0%, transparent 30%),
    linear-gradient(180deg, #040d1f 0%, #08142b 52%, #040b1a 100%);
}

body::before {
  z-index: 0;
  opacity: 0.28;
  background-image: radial-gradient(rgba(100, 116, 139, 0.6) 1px, transparent 1px);
  background-size: 18px 18px;
}

html[data-theme='dark'] body::before {
  opacity: 0.2;
  background-image: radial-gradient(rgba(148, 163, 184, 0.5) 1px, transparent 1px);
}

body::after {
  z-index: 0;
  background: none;
}

html[data-theme='dark'] body::after {
  background: none;
}

.app-shell,
.sidebar,
.main-content,
.top-bar {
  position: relative;
  z-index: 1;
}

.app-shell {
  padding: 16px;
  gap: 18px;
}

.sidebar {
  position: relative;
  overflow: visible;
  isolation: isolate;
  z-index: 12;
  width: 262px;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 42%, transparent);
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--bg-surface) 97%, #ffffff 3%),
    color-mix(in srgb, var(--bg-hover) 12%, var(--bg-surface) 88%)
  );
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--bg-deep) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
  padding: 16px 12px 14px;
  gap: 6px;
  align-items: stretch;
}

.sidebar::before {
  content: none;
}

.sidebar::after {
  content: none;
}

html[data-theme='dark'] .sidebar {
  background: linear-gradient(
    170deg,
    rgba(11, 17, 31, 0.97),
    rgba(8, 14, 28, 0.96)
  );
  border-color: color-mix(in srgb, var(--cyan) 18%, var(--border-bright) 82%);
  box-shadow:
    0 18px 44px rgba(2, 6, 23, 0.6),
    inset 0 1px 0 rgba(148, 163, 184, 0.12);
}

html[data-theme='dark'] .sidebar .nav-item {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-surface) 90%, #020617 10%),
    color-mix(in srgb, var(--bg-hover) 90%, #020617 10%)
  );
  border-color: color-mix(in srgb, var(--border-bright) 82%, transparent);
}

html[data-theme='dark'] .sidebar .nav-item .nav-icon {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-hover) 94%, #020617 6%),
    color-mix(in srgb, var(--bg-surface) 92%, transparent)
  );
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.15);
}

html[data-theme='dark'] .sidebar .nav-item:hover {
  border-color: color-mix(in srgb, var(--session-ui-accent) 62%, var(--border-bright) 38%);
  box-shadow:
    0 12px 22px rgba(2, 6, 23, 0.5),
    inset 0 1px 0 rgba(148, 163, 184, 0.16);
}

html[data-theme='dark'] .sidebar .nav-item.active {
  border-color: color-mix(in srgb, var(--session-ui-accent) 74%, var(--border-bright) 26%);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--session-ui-accent) 24%, rgba(2, 6, 23, 0.45)),
    inset 0 1px 0 rgba(148, 163, 184, 0.18);
}

.sidebar-logo {
  position: relative;
  margin-bottom: 8px;
  color: var(--text-primary);
  text-shadow: none;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 700;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 4px 8px;
  border: none;
  background: transparent;
  box-shadow: none;
}

.sidebar-logo-text {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.sidebar-logo::before {
  content: none;
}

.sidebar-divider {
  width: calc(100% - 6px);
  margin: 4px 3px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-bright) 85%, transparent), transparent);
}

.nav-item {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  color: var(--text-secondary);
  padding: 10px 38px 10px 12px;
  min-height: 46px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-surface) 90%, transparent),
    color-mix(in srgb, var(--bg-hover) 80%, transparent)
  );
  transition: color 0.24s ease, background 0.24s ease, border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
  justify-content: flex-start;
}

.nav-item::before {
  content: none;
}

.nav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 42%, color-mix(in srgb, var(--session-ui-accent) 22%, transparent) 52%, transparent 66%);
  opacity: 0;
  transform: translateX(-140%);
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.nav-item .nav-label {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  justify-self: stretch;
}

.nav-item .nav-icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--bg-hover) 92%, white 8%),
    color-mix(in srgb, var(--bg-surface) 88%, transparent)
  );
  color: color-mix(in srgb, var(--text-secondary) 84%, var(--cyan) 16%);
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border-bright) 54%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
  transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.nav-icon .nav-icon-svg {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon .nav-icon-base {
  opacity: 0.88;
}

.nav-icon .nav-icon-accent {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  opacity: 0.35;
  transition: stroke-dashoffset 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease;
}

.nav-item:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  border-color: color-mix(in srgb, var(--session-ui-accent) 56%, var(--border) 44%);
  transform: translateY(-1px);
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--bg-deep) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 20%, transparent);
}

.nav-item:hover::after {
  opacity: 0.58;
  animation: navItemSweep 1.1s ease;
}

.nav-item:hover .nav-icon {
  transform: translateY(-1px) scale(1.02);
  color: var(--session-ui-accent);
  border-color: color-mix(in srgb, var(--session-ui-accent) 54%, var(--border) 46%);
}

.nav-item:hover .nav-icon .nav-icon-accent {
  stroke-dashoffset: 0;
  opacity: 0.88;
}

.nav-item.active {
  color: var(--text-primary);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--session-ui-accent) 18%, transparent),
    color-mix(in srgb, var(--session-ui-accent-alt) 16%, transparent)
  );
  border-color: color-mix(in srgb, var(--session-ui-accent) 64%, var(--border) 36%);
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--session-ui-accent) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
}

.nav-item.active::after {
  content: none;
  opacity: 0;
  animation: none;
}

.nav-item.active:hover::after {
  content: none;
  opacity: 0;
  animation: none;
}

.nav-item.active::before {
  content: none;
}

.nav-item.active .nav-icon {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--session-ui-accent) 24%, transparent),
    color-mix(in srgb, var(--session-ui-accent-alt) 14%, transparent)
  );
  color: var(--session-ui-accent);
  border-color: color-mix(in srgb, var(--session-ui-accent) 76%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent),
    0 8px 16px color-mix(in srgb, var(--session-ui-accent) 24%, transparent);
}

.nav-item.active .nav-icon .nav-icon-svg {
  animation: navIconFloat 2.9s ease-in-out infinite;
  transform-origin: 12px 12px;
}

.nav-item.active .nav-icon .nav-icon-base {
  animation: navIconLinePulse 2.4s ease-in-out infinite;
}

.nav-item.active .nav-icon .nav-icon-accent {
  stroke-dashoffset: 0;
  opacity: 1;
  animation: navIconAccentLoop 2.6s linear infinite;
}

.nav-item.active .nav-icon .nav-icon-core {
  animation: navIconCorePulse 2.4s ease-in-out infinite;
  transform-origin: 12px 12px;
}

.nav-item[data-page="learning"].active .nav-icon .nav-icon-node {
  animation: navNodeBlink 2.1s ease-in-out infinite;
}

.nav-item[data-page="learning"].active .nav-icon .nav-icon-node:nth-of-type(2) {
  animation-delay: 0.35s;
}

.nav-item[data-page="learning"].active .nav-icon .nav-icon-node:nth-of-type(3) {
  animation-delay: 0.7s;
}

.nav-item[data-page="alerts"].active .nav-icon .nav-icon-core {
  animation-duration: 1.4s;
}

.nav-item[data-page="forecast"].active .nav-icon .nav-icon-orbit {
  animation: navOrbitPulse 2.8s ease-in-out infinite;
  transform-origin: 18px 8.8px;
}

.nav-badge {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 92%, white 8%), color-mix(in srgb, var(--orange) 80%, var(--red) 20%));
  color: #ffffff;
  width: 10px;
  min-width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
  box-shadow: 0 5px 10px color-mix(in srgb, var(--red) 36%, transparent);
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.nav-badge.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sidebar-session-wrap {
  margin-top: auto;
  width: 100%;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--border-bright) 55%, transparent);
}

.sidebar-session-wrap .market-status {
  width: 100%;
  justify-content: flex-start;
  min-height: 46px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 9px;
  letter-spacing: 0.08em;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 2px;
  align-content: center;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--session-ui-accent) 11%, var(--bg-surface) 89%),
    color-mix(in srgb, var(--session-ui-accent-alt) 8%, var(--bg-hover) 92%)
  );
  border-color: color-mix(in srgb, var(--session-ui-accent) 48%, var(--border-bright) 52%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 8px 14px color-mix(in srgb, var(--session-ui-accent) 13%, transparent);
}

.sidebar-session-wrap .market-status .market-status-icon-wrap {
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 36%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent),
    0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}

.sidebar-session-wrap .market-status .market-status-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.sidebar-session-wrap .market-status .market-status-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: center;
}

.sidebar-session-wrap .market-status .market-status-label {
  font-size: 9.8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-session-wrap .market-status .market-status-meta {
  font-family: var(--display);
  font-size: 9.8px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-session-wrap .market-status.has-svg {
  gap: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sidebar-session-wrap .market-status.has-svg::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, currentColor 18%, transparent) 22%,
    color-mix(in srgb, currentColor 72%, transparent) 50%,
    color-mix(in srgb, currentColor 18%, transparent) 78%,
    transparent 100%
  );
  opacity: 0.46;
  background-size: 190% 100%;
  animation: sidebarSessionSweep 3.2s linear infinite;
}

.sidebar-session-wrap .market-status.open {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background: linear-gradient(
    142deg,
    color-mix(in srgb, var(--green) 19%, var(--bg-surface) 81%),
    color-mix(in srgb, var(--green) 12%, var(--bg-hover) 88%)
  );
}

.sidebar-session-wrap .market-status.premarket {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 56%, var(--border-bright) 44%);
  background: linear-gradient(
    142deg,
    color-mix(in srgb, var(--gold) 18%, var(--bg-surface) 82%),
    color-mix(in srgb, var(--gold) 12%, var(--bg-hover) 88%)
  );
}

.sidebar-session-wrap .market-status.aftermarket {
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 58%, var(--border-bright) 42%);
  background: linear-gradient(
    142deg,
    color-mix(in srgb, var(--purple) 18%, var(--bg-surface) 82%),
    color-mix(in srgb, var(--purple) 12%, var(--bg-hover) 88%)
  );
}

.sidebar-session-wrap .market-status.closed {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 56%, var(--border-bright) 44%);
  background: linear-gradient(
    142deg,
    color-mix(in srgb, var(--red) 18%, var(--bg-surface) 82%),
    color-mix(in srgb, var(--red) 12%, var(--bg-hover) 88%)
  );
}

.sidebar-session-wrap .sidebar-auto-pill {
  width: 100%;
  margin-top: 8px;
  min-height: 32px;
  justify-content: center;
  border-radius: 10px;
  font-size: 8px;
  letter-spacing: 0.11em;
}

.sidebar-session-wrap.sidebar-session-top {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  width: calc(100% - 16px);
}

.sidebar-auth-wrap {
  position: relative;
  width: calc(100% - 16px);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border-bright) 55%, transparent);
  display: grid;
  gap: 8px;
}

.sidebar-auth-quick-menu {
  position: absolute;
  bottom: calc(100% - 10px);
  left: 0;
  display: grid;
  gap: 7px;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: max-height 0.24s ease, opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}

.sidebar-auth-wrap.sidebar-user-menu-open .sidebar-auth-quick-menu {
  max-height: calc(100vh - 100px);
  opacity: 1;
  overflow: hidden;
  pointer-events: auto;
  transform: translateY(0);
  margin-bottom: 0;
  border-radius: 24px;
}

.sidebar-quick-item,
.sidebar-quick-item-btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: linear-gradient(
    136deg,
    color-mix(in srgb, var(--bg-surface) 92%, transparent),
    color-mix(in srgb, var(--bg-hover) 92%, transparent)
  );
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.09em;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.sidebar-quick-item:hover,
.sidebar-quick-item-btn:hover,
.sidebar-quick-item.learn-more.open .sidebar-quick-item-btn {
  color: var(--text-primary);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cyan) 58%, var(--border-bright) 42%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cyan) 16%, transparent);
}

.sidebar-quick-icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.sidebar-quick-icon.kind-profile {
  border-color: #dbeafe;
  background: #f0f9ff;
  color: var(--cyan);
}

.sidebar-quick-icon.kind-learn {
  border-color: #fde68a;
  background: #fffbeb;
  color: var(--gold);
}

.sidebar-quick-icon.kind-feedback {
  border-color: #ede9fe;
  background: #faf5ff;
  color: var(--purple);
}

.sidebar-quick-icon.kind-ticket-replyed {
  border-color: #fecdd3;
  background: #fff1f2;
  color: var(--red);
}

.sidebar-quick-icon.kind-admin,
.sidebar-quick-icon.kind-settings {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

.learn-more-btn {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--border-bright) 52%);
}

.learn-more-btn:hover,
.sidebar-quick-item.learn-more.open .learn-more-btn {
  border-color: color-mix(in srgb, var(--gold) 62%, var(--border-bright) 38%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--gold) 16%, transparent);
}

.feedback-link {
  border-color: color-mix(in srgb, var(--purple) 44%, var(--border-bright) 56%);
}

.feedback-link:hover {
  border-color: color-mix(in srgb, var(--purple) 62%, var(--border-bright) 38%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--purple) 16%, transparent);
}

.ticket-replyed-link {
  border-color: color-mix(in srgb, var(--red) 56%, var(--border-bright) 44%);
}

.ticket-replyed-link:hover {
  border-color: color-mix(in srgb, var(--red) 70%, var(--border-bright) 30%);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--red) 24%, transparent);
}

.ticket-replyed-link.is-flash {
  animation: sidebarTicketReplyPulse 1.05s ease-in-out infinite;
}

@keyframes sidebarTicketReplyPulse {
  0%,
  100% {
    box-shadow: 0 0 0 color-mix(in srgb, var(--red) 0%, transparent);
    border-color: color-mix(in srgb, var(--red) 56%, var(--border-bright) 44%);
  }
  50% {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 24%, transparent), 0 12px 24px color-mix(in srgb, var(--red) 20%, transparent);
    border-color: color-mix(in srgb, var(--red) 74%, var(--border-bright) 26%);
  }
}

.sidebar-quick-label {
  flex: 1;
  text-align: left;
  font-weight: 700;
  color: inherit;
}

.sidebar-quick-caret {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.2s ease;
}

.sidebar-quick-item.learn-more {
  position: relative;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  display: block;
}

.sidebar-quick-item.learn-more.open .sidebar-quick-caret {
  transform: rotate(90deg);
}

.sidebar-quick-submenu {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: min(352px, calc(100vw - 16px));
  max-height: min(78vh, 640px);
  overflow-y: auto;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
  padding: 12px;
  display: none;
  z-index: 10140;
}


.sidebar-quick-submenu-floating {
  position: fixed;
  z-index: 20000;
}

.sidebar-quick-item.learn-more.open .sidebar-quick-submenu {
  display: grid;
  gap: 12px;
}

.sidebar-learn-more-group {
  display: grid;
  gap: 10px;
}

.sidebar-learn-more-group + .sidebar-learn-more-group {
  padding-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.sidebar-learn-more-group-title {
  padding: 0 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sidebar-learn-more-group-grid {
  display: grid;
  gap: 8px;
}

.sidebar-learn-more-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.sidebar-learn-more-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.sidebar-learn-more-card.is-active {
  border-color: #7dd3fc;
}

.sidebar-learn-more-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-learn-more-card-top .ultron-learn-more-nav-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.sidebar-learn-more-card-top .ultron-learn-more-nav-icon .ultron-learn-more-nav-icon-svg {
  width: 22px;
  height: 22px;
}

/* Color rules for data-tone on .ultron-learn-more-nav-icon (used in hover menus) */
.ultron-learn-more-nav-icon[data-tone="sky"] {
  border-color: #dbeafe;
  background: #f0f9ff;
  color: #0ea5e9;
}
.ultron-learn-more-nav-icon[data-tone="indigo"] {
  border-color: #e0e7ff;
  background: #eef2ff;
  color: #6366f1;
}
.ultron-learn-more-nav-icon[data-tone="emerald"] {
  border-color: #d1fae5;
  background: #ecfdf5;
  color: #10b981;
}
.ultron-learn-more-nav-icon[data-tone="amber"] {
  border-color: #fde68a;
  background: #fffbeb;
  color: #f59e0b;
}
.ultron-learn-more-nav-icon[data-tone="purple"] {
  border-color: #ede9fe;
  background: #faf5ff;
  color: #a855f7;
}
.ultron-learn-more-nav-icon[data-tone="rose"] {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #f43f5e;
}
.ultron-learn-more-nav-icon[data-tone="slate"] {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

.sidebar-learn-more-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #0ea5e9;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s ease;
}

.sidebar-learn-more-card-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #0ea5e9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sidebar-learn-more-card:hover .sidebar-learn-more-card-icon {
  transform: scale(1.08);
}

.sidebar-learn-more-card:hover .sidebar-learn-more-card-open {
  opacity: 1;
}

.sidebar-learn-more-card-label {
  color: #1e293b;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.sidebar-learn-more-card-desc {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.sidebar-learn-more-card[data-tone="sky"] .sidebar-learn-more-card-icon {
  border-color: #dbeafe;
  background: #f0f9ff;
  color: #0ea5e9;
}

.sidebar-learn-more-card[data-tone="sky"]:hover,
.sidebar-learn-more-card[data-tone="sky"].is-active {
  border-color: #bae6fd;
}

.sidebar-learn-more-card[data-tone="sky"] .sidebar-learn-more-card-open {
  color: #0ea5e9;
}

.sidebar-learn-more-card[data-tone="indigo"] .sidebar-learn-more-card-icon {
  border-color: #e0e7ff;
  background: #eef2ff;
  color: #6366f1;
}

.sidebar-learn-more-card[data-tone="indigo"]:hover,
.sidebar-learn-more-card[data-tone="indigo"].is-active {
  border-color: #c7d2fe;
}

.sidebar-learn-more-card[data-tone="indigo"] .sidebar-learn-more-card-open {
  color: #6366f1;
}

.sidebar-learn-more-card[data-tone="emerald"] .sidebar-learn-more-card-icon {
  border-color: #d1fae5;
  background: #ecfdf5;
  color: #10b981;
}

.sidebar-learn-more-card[data-tone="emerald"]:hover,
.sidebar-learn-more-card[data-tone="emerald"].is-active {
  border-color: #a7f3d0;
}

.sidebar-learn-more-card[data-tone="emerald"] .sidebar-learn-more-card-open {
  color: #10b981;
}

.sidebar-learn-more-card[data-tone="amber"] .sidebar-learn-more-card-icon {
  border-color: #fde68a;
  background: #fffbeb;
  color: #f59e0b;
}

.sidebar-learn-more-card[data-tone="amber"]:hover,
.sidebar-learn-more-card[data-tone="amber"].is-active {
  border-color: #fcd34d;
}

.sidebar-learn-more-card[data-tone="amber"] .sidebar-learn-more-card-open {
  color: #f59e0b;
}

.sidebar-learn-more-card[data-tone="purple"] .sidebar-learn-more-card-icon {
  border-color: #ede9fe;
  background: #faf5ff;
  color: #a855f7;
}

.sidebar-learn-more-card[data-tone="purple"]:hover,
.sidebar-learn-more-card[data-tone="purple"].is-active {
  border-color: #ddd6fe;
}

.sidebar-learn-more-card[data-tone="purple"] .sidebar-learn-more-card-open {
  color: #a855f7;
}

.sidebar-learn-more-card[data-tone="rose"] .sidebar-learn-more-card-icon {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #f43f5e;
}

.sidebar-learn-more-card[data-tone="rose"]:hover,
.sidebar-learn-more-card[data-tone="rose"].is-active {
  border-color: #fda4af;
}

.sidebar-learn-more-card[data-tone="rose"] .sidebar-learn-more-card-open {
  color: #f43f5e;
}

.sidebar-learn-more-card[data-tone="slate"] .sidebar-learn-more-card-icon {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

.sidebar-learn-more-card[data-tone="slate"]:hover,
.sidebar-learn-more-card[data-tone="slate"].is-active {
  border-color: #94a3b8;
}

.sidebar-learn-more-card[data-tone="slate"] .sidebar-learn-more-card-open {
  color: #475569;
}

.sidebar-quick-subitem {
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.sidebar-quick-subitem i {
  font-size: 13px;
  color: var(--cyan);
}

.sidebar-quick-subitem:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--cyan) 11%, transparent);
}

.sidebar-quick-subitem.kind-updates i { color: var(--cyan); }
.sidebar-quick-subitem.kind-help i { color: var(--green); }
.sidebar-quick-subitem.kind-terms i { color: var(--gold); }
.sidebar-quick-subitem.kind-bug i { color: var(--red); }

.sidebar-quick-subitem.kind-updates:hover {
  border-color: color-mix(in srgb, var(--cyan) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--cyan) 11%, transparent);
}

.sidebar-quick-subitem.kind-help:hover {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.sidebar-quick-subitem.kind-terms:hover {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.sidebar-quick-subitem.kind-bug:hover {
  border-color: color-mix(in srgb, var(--red) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.sidebar-auth-pill {
  width: 100%;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 78%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-auth-pill:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--cyan) 60%, var(--border-bright) 40%);
}

.sidebar-auth-pill.login {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
}

.sidebar-auth-pill.register {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-bright) 52%);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--cyan) 14%, var(--bg-surface) 86%),
    color-mix(in srgb, var(--cyan) 9%, var(--bg-hover) 91%)
  );
  color: color-mix(in srgb, var(--cyan) 76%, #eaf4ff 24%);
}

.sidebar-auth-user {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  padding: 10px;
  display: grid;
  gap: 5px;
}

.sidebar-auth-user-pill {
  width: 100%;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 75%, transparent);
  background: linear-gradient(
    138deg,
    color-mix(in srgb, var(--bg-card) 88%, transparent),
    color-mix(in srgb, var(--bg-surface) 92%, transparent)
  );
  min-height: 46px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-auth-user-pill:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cyan) 58%, var(--border-bright) 42%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cyan) 15%, transparent);
}

.sidebar-auth-wrap.sidebar-user-menu-open .sidebar-auth-user-pill {
  border-color: color-mix(in srgb, var(--cyan) 62%, var(--border-bright) 38%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cyan) 16%, transparent);
}

.sidebar-auth-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--border-bright) 52%, transparent);
  background: color-mix(in srgb, var(--cyan) 18%, var(--bg-surface) 82%);
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.sidebar-auth-avatar.has-image,
.sidebar-profile-menu-avatar.has-image {
  color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sidebar-auth-user-text {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.sidebar-auth-user-name {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-auth-user-email {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes navItemSweep {
  from { transform: translateX(-138%); }
  to { transform: translateX(148%); }
}

@keyframes sidebarSessionSweep {
  0% { opacity: 0.24; background-position: 165% 0; }
  50% { opacity: 0.6; }
  100% { opacity: 0.24; background-position: -65% 0; }
}

@keyframes navIconCorePulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.22); opacity: 1; }
}

@keyframes navIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes navIconLinePulse {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@keyframes navIconAccentLoop {
  0% { stroke-dashoffset: 34; opacity: 0.55; }
  50% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -34; opacity: 0.55; }
}

@keyframes navGearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes navNodeBlink {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.35; }
}

@keyframes navOrbitPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.3); opacity: 0.55; }
}

.main-content {
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 36%, transparent);
  background: color-mix(in srgb, var(--glass) 78%, transparent);
  box-shadow: var(--surface-shadow);
}

.top-bar {
  margin: 12px;
  margin-bottom: 0;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(16px);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(270px, 0.95fr) minmax(0, 1.85fr);
  gap: 10px;
  align-items: stretch;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.top-system-meta {
  min-width: 150px;
}

.top-bar-right {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: start;
  gap: 9px;
  min-width: 0;
}

.top-bar-right > * {
  min-width: 0;
}

.top-bar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  line-height: 1.2;
}

.price-live {
  border-radius: 14px;
  border: 1px solid var(--border-bright);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bg-hover) 88%, transparent),
    color-mix(in srgb, var(--cyan) 8%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 74%, transparent);
  min-width: 150px;
  gap: 10px;
  padding: 7px 10px;
  justify-content: space-between;
}

.price-live:not(.top-price-card) > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.price-live-main {
  flex: 1;
  align-items: center;
  text-align: center;
}

.price-live-change {
  min-width: 78px;
  align-items: flex-end;
  text-align: right;
}

.price-cluster {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
}

.price-value {
  color: var(--text-primary);
  text-shadow: none;
  font-size: 17px;
}

.price-label {
  font-size: 9px;
}

.price-change {
  font-size: 10px;
}

.price-change.up { color: var(--green); }
.price-change.down { color: var(--red); }

@keyframes pulseGreenSoft {
  0% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

@keyframes pulseGoldSoft {
  0% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.42); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
  100% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

@keyframes pulsePurpleSoft {
  0% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.42); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
  100% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}

.live-dot {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45);
  animation: pulseGreenSoft 2s infinite;
}

.live-dot.open {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45);
  animation: pulseGreenSoft 2s infinite;
}

.live-dot.premarket {
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4);
  animation: pulseGoldSoft 2s infinite;
}

.live-dot.aftermarket {
  background: var(--purple);
  box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45);
  animation: pulsePurpleSoft 2s infinite;
}

.live-dot.closed {
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(217, 4, 41, 0.25);
  animation: none;
}

.ohl-box,
.session-box {
  min-width: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 52%, transparent);
  background: linear-gradient(
    158deg,
    color-mix(in srgb, var(--bg-surface) 94%, transparent),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--bg-deep) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
  padding: 12px 10px 7px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(9px);
}

.ohl-box::before,
.session-box::before {
  content: none;
}

.ohl-box::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 92%, transparent), color-mix(in srgb, var(--cyan) 78%, transparent));
}

.session-box.afterhours-card::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 90%, transparent), color-mix(in srgb, var(--cyan-dim) 78%, transparent));
}

.session-box.engine-card::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 90%, transparent), color-mix(in srgb, var(--gold) 78%, transparent));
}

.session-box.afterhours-card {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--purple) 16%, var(--bg-surface) 84%),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
  border-color: color-mix(in srgb, var(--purple) 32%, var(--border-bright) 68%);
}

.session-box.engine-card {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--cyan) 14%, var(--bg-surface) 86%),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
  border-color: color-mix(in srgb, var(--cyan) 30%, var(--border-bright) 70%);
}

.ohl-box .session-title,
.session-box .session-title {
  color: color-mix(in srgb, var(--text-secondary) 82%, var(--text-muted) 18%);
  font-family: var(--mono);
  font-size: 8.2px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.session-box.afterhours-card .session-title,
.session-box.engine-card .session-title {
  text-align: center;
}

.session-card-stack {
  display: grid;
  gap: 8px;
}

.session-mini-box {
  border: 1px solid color-mix(in srgb, var(--border-bright) 50%, transparent);
  border-radius: 11px;
  padding: 9px 10px;
  background: linear-gradient(
    154deg,
    color-mix(in srgb, var(--bg-surface) 90%, transparent),
    color-mix(in srgb, var(--bg-hover) 84%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
    0 6px 14px color-mix(in srgb, var(--bg-deep) 16%, transparent);
  min-height: 42px;
  display: flex;
  align-items: center;
}

.session-mini-box.is-sub {
  background: linear-gradient(
    154deg,
    color-mix(in srgb, var(--bg-hover) 86%, transparent),
    color-mix(in srgb, var(--bg-surface) 78%, transparent)
  );
}

.session-box .session-main {
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 10.4px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  letter-spacing: 0.01em;
}

.session-box .session-sub {
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary) 12%);
  font-family: var(--mono);
  font-size: 8.9px;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin-top: 0;
}

.ohl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ohl-item {
  border: 1px solid color-mix(in srgb, var(--border-bright) 52%, transparent);
  border-radius: 11px;
  padding: 6px 6px;
  background: linear-gradient(
    152deg,
    color-mix(in srgb, var(--bg-surface) 92%, transparent),
    color-mix(in srgb, var(--bg-hover) 84%, transparent)
  );
  min-width: 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent);
}

.ohl-item::before {
  content: none;
}

.ohl-item.open::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 90%, transparent), color-mix(in srgb, var(--cyan-dim) 74%, transparent));
}

.ohl-item.high::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 90%, transparent), color-mix(in srgb, var(--cyan) 72%, transparent));
}

.ohl-item.low::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--red) 90%, transparent), color-mix(in srgb, var(--orange) 70%, transparent));
}

.ohl-key {
  display: block;
  font-family: var(--mono);
  font-size: 6.9px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.ohl-val {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9.6px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ohl-item.open .ohl-val { color: var(--cyan); }
.ohl-item.high .ohl-val { color: var(--green); }
.ohl-item.low .ohl-val { color: var(--red); }

.ohl-meta {
  display: block;
  font-family: var(--mono);
  font-size: 8.8px;
  color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary) 12%);
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 50%, transparent);
  border-radius: 11px;
  padding: 8px 10px;
  text-align: center;
  background: linear-gradient(
    156deg,
    color-mix(in srgb, var(--bg-hover) 86%, transparent),
    color-mix(in srgb, var(--bg-surface) 90%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 15%, transparent),
    0 6px 14px color-mix(in srgb, var(--bg-deep) 14%, transparent);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  position: relative;
}

.ohl-meta::before {
  content: none;
}

.ohl-extra {
  margin-top: 7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.ohl-chip {
  border: 1px solid color-mix(in srgb, var(--border-bright) 50%, transparent);
  border-radius: 11px;
  padding: 6px 6px;
  background: linear-gradient(
    154deg,
    color-mix(in srgb, var(--bg-hover) 86%, transparent),
    color-mix(in srgb, var(--bg-surface) 90%, transparent)
  );
  min-width: 0;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent);
}

.ohl-chip::before {
  content: none;
}

.ohl-chip-label {
  display: block;
  font-family: var(--mono);
  font-size: 6.7px;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.ohl-chip-val {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9.1px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ohl-chip.mid .ohl-chip-val { color: var(--cyan); }
.ohl-chip.daypos .ohl-chip-val { color: var(--gold); }
.ohl-chip.spread .ohl-chip-val { color: var(--purple); }

.ohl-chip.mid::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 92%, transparent), color-mix(in srgb, var(--cyan-dim) 74%, transparent));
}

.ohl-chip.daypos::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 90%, transparent), color-mix(in srgb, var(--orange) 72%, transparent));
}

.ohl-chip.spread::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 90%, transparent), color-mix(in srgb, var(--cyan) 70%, transparent));
}

.market-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  min-height: 36px;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  border: 1px solid color-mix(in srgb, var(--border-bright) 85%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 85%, transparent);
  white-space: nowrap;
  width: auto;
}

.market-status.has-svg {
  gap: 8px;
}

.market-status .market-status-icon-wrap {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

.market-status .market-status-icon {
  width: 16px;
  height: 16px;
  display: block;
  overflow: visible;
}

.market-status .market-status-icon .ms-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 26 18;
  opacity: 0.32;
  transform-origin: 12px 12px;
  animation: marketStatusRingSpin 6s linear infinite;
}

.market-status.has-svg::before,
.market-status.market-inline.has-svg::before,
.sidebar-session-wrap .market-status.has-svg::before {
  content: none;
  display: none;
}

.market-status .market-status-label {
  line-height: 1;
}

.market-status.market-inline {
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 12px;
  font-size: 9px;
  border-radius: 999px;
  letter-spacing: 0.12em;
  color: #cbd5e1;
  border-color: color-mix(in srgb, #cbd5e1 45%, transparent);
  background: color-mix(in srgb, #cbd5e1 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
}

.market-status.open .market-status-icon .ms-sun-rays {
  transform-origin: 12px 12px;
  animation: marketStatusSunSpin 10s linear infinite;
}

.market-status.open .market-status-icon .ms-core {
  animation: marketStatusSunPulse 2.8s ease-in-out infinite;
}

.market-status.premarket .market-status-icon .ms-dawn-core {
  animation: marketStatusDawnLift 3.3s ease-in-out infinite;
}

.market-status.premarket .market-status-icon .ms-ring {
  stroke-width: 1.9;
  animation-duration: 5.8s;
}

.market-status.aftermarket .market-status-icon .ms-moon {
  animation: marketStatusMoonFloat 4.2s ease-in-out infinite;
}

.market-status.aftermarket .market-status-icon .ms-ring {
  animation-duration: 7.2s;
  animation-direction: reverse;
}

.market-status.aftermarket .market-status-icon .ms-star {
  animation: marketStatusStarTwinkle 2.5s ease-in-out infinite;
}

.market-status.aftermarket .market-status-icon .ms-star.s2 {
  animation-delay: 0.9s;
}

.market-status.closed .market-status-icon .ms-closed-dot {
  animation: marketStatusClosedBlink 2.6s ease-in-out infinite;
}

.market-status.closed .market-status-icon .ms-ring {
  opacity: 0.24;
  animation-duration: 8.4s;
}

.sidebar-session-wrap .market-status .market-status-icon .ms-ring {
  stroke-width: 1.28;
  stroke-dasharray: 22 14;
  opacity: 0.38;
  animation-duration: 5.4s;
}

.sidebar-session-wrap .market-status.open .market-status-icon .ms-sun-rays {
  animation-duration: 8s;
}

.sidebar-session-wrap .market-status.open .market-status-icon .ms-core {
  animation-duration: 2.2s;
}

.sidebar-session-wrap .market-status.premarket .market-status-icon .ms-dawn-core {
  animation-duration: 2.8s;
}

.sidebar-session-wrap .market-status.premarket .market-status-icon .ms-ring {
  stroke-width: 1.9;
}

.sidebar-session-wrap .market-status.aftermarket .market-status-icon .ms-moon {
  animation-duration: 3.6s;
}

.sidebar-session-wrap .market-status.aftermarket .market-status-icon .ms-star {
  animation-duration: 2s;
}

.sidebar-session-wrap .market-status.aftermarket .market-status-icon .ms-star.s2 {
  animation-delay: 0.7s;
}

.sidebar-session-wrap .market-status.closed .market-status-icon .ms-closed-dot {
  animation-duration: 1.9s;
}

.sidebar-session-wrap .market-status.closed .market-status-icon .ms-ring {
  opacity: 0.28;
  animation-duration: 7.4s;
}

.market-status.market-inline:not(.has-svg)::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  background: currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 45%, transparent);
}

.market-status.market-inline.open,
.market-status.market-inline.premarket,
.market-status.market-inline.closed {
  color: #cbd5e1;
  border-color: color-mix(in srgb, #cbd5e1 45%, transparent);
  background: color-mix(in srgb, #cbd5e1 16%, transparent);
  animation: none;
}

@keyframes marketInlineDotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45); }
  65% { transform: scale(1.16); box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
}

.market-status.market-inline.aftermarket {
  color: color-mix(in srgb, var(--purple) 92%, white 8%);
  border-color: color-mix(in srgb, var(--purple) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--purple) 16%, transparent);
  animation: none;
}

.market-status.market-inline.aftermarket:not(.has-svg)::before {
  background: var(--purple);
  animation: none;
}

@keyframes marketStatusSunSpin {
  to { transform: rotate(360deg); }
}

@keyframes marketStatusRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes marketStatusSunPulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.12); opacity: 0.72; }
}

@keyframes marketStatusMoonFloat {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(-0.6px); opacity: 1; }
}

@keyframes marketStatusStarTwinkle {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.14); }
}

@keyframes marketStatusClosedBlink {
  0%, 100% { opacity: 0.52; }
  50% { opacity: 0.95; }
}

@keyframes marketStatusDawnLift {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(-0.8px); opacity: 1; }
}

.market-status.open {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 46%, var(--border-bright) 54%);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

.market-status.premarket {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 44%, var(--border-bright) 56%);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.market-status.aftermarket {
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 44%, var(--border-bright) 56%);
  background: color-mix(in srgb, var(--purple) 14%, transparent);
}

.sidebar-session-wrap .market-status.aftermarket:not(.has-svg)::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  background: var(--purple);
  box-shadow: 0 0 8px color-mix(in srgb, var(--purple) 55%, transparent);
  animation: none;
}

/* ===== SIDEBAR UI REFRESH ===== */
.sidebar,
.sidebar.expanded {
  width: 286px;
  border-right: 0;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82));
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    0 18px 46px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  padding: 14px 10px 12px;
  gap: 4px;
  align-items: stretch;
  overflow: hidden;
}

.sidebar::before,
.sidebar::after {
  content: none;
}

.sidebar-logo {
  margin: 2px 8px 10px;
  padding: 8px 6px 6px;
  background: none;
  border: 0;
  box-shadow: none;
}

.sidebar-logo-text {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.22em;
  color: #0f172a;
  text-shadow: none;
}

.sidebar-divider {
  width: calc(100% - 10px);
  margin: 6px 5px;
  height: 1px;
  background: linear-gradient(90deg, rgba(203, 213, 225, 0), rgba(203, 213, 225, 0.78), rgba(203, 213, 225, 0));
}

.nav-item {
  width: calc(100% - 4px);
  margin: 0 2px;
  min-height: 50px;
  padding: 8px 18px 8px 14px;
  border-radius: 18px;
  border: 1px solid transparent;
  color: #64748b;
  background: transparent;
  box-shadow: none;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 14px;
  transform: none;
}

.nav-item::before,
.nav-item::after {
  content: none;
}

.nav-item .nav-label {
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: inherit;
}

.nav-item .nav-icon {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  box-shadow: none;
  transition: transform 0.24s ease, color 0.24s ease, background 0.24s ease, border-color 0.24s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item .nav-icon i {
  font-size: 18px;
  line-height: 1;
}

.nav-item .nav-icon .nav-icon-svg {
  width: 18px;
  height: 18px;
}

/* Sidebar colored box styling matching Learn More icons */
.nav-item .ultron-learn-more-nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.nav-item .nav-icon {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  box-shadow: none;
  transition: transform 0.24s ease, color 0.24s ease, background 0.24s ease, border-color 0.24s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item[data-tone="sky"] .ultron-learn-more-nav-icon {
  border-color: #dbeafe;
  background: #f0f9ff;
  color: #0ea5e9;
}

.nav-item[data-tone="indigo"] .ultron-learn-more-nav-icon {
  border-color: #e0e7ff;
  background: #eef2ff;
  color: #6366f1;
}

.nav-item[data-tone="emerald"] .ultron-learn-more-nav-icon {
  border-color: #d1fae5;
  background: #ecfdf5;
  color: #10b981;
}

.nav-item[data-tone="amber"] .ultron-learn-more-nav-icon {
  border-color: #fde68a;
  background: #fffbeb;
  color: #f59e0b;
}

.nav-item[data-tone="purple"] .ultron-learn-more-nav-icon {
  border-color: #ede9fe;
  background: #faf5ff;
  color: #a855f7;
}

.nav-item[data-tone="rose"] .ultron-learn-more-nav-icon {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #f43f5e;
}

.nav-item[data-tone="slate"] .ultron-learn-more-nav-icon {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

.nav-item:hover[data-tone="sky"] .ultron-learn-more-nav-icon,
.nav-item.active[data-tone="sky"] .ultron-learn-more-nav-icon {
  border-color: #bae6fd;
}

.nav-item:hover[data-tone="indigo"] .ultron-learn-more-nav-icon,
.nav-item.active[data-tone="indigo"] .ultron-learn-more-nav-icon {
  border-color: #c7d2fe;
}

.nav-item:hover[data-tone="emerald"] .ultron-learn-more-nav-icon,
.nav-item.active[data-tone="emerald"] .ultron-learn-more-nav-icon {
  border-color: #a7f3d0;
}

.nav-item:hover[data-tone="amber"] .ultron-learn-more-nav-icon,
.nav-item.active[data-tone="amber"] .ultron-learn-more-nav-icon {
  border-color: #fcd34d;
}

.nav-item:hover[data-tone="purple"] .ultron-learn-more-nav-icon,
.nav-item.active[data-tone="purple"] .ultron-learn-more-nav-icon {
  border-color: #ddd6fe;
}

.nav-item:hover[data-tone="rose"] .ultron-learn-more-nav-icon,
.nav-item.active[data-tone="rose"] .ultron-learn-more-nav-icon {
  border-color: #fda4af;
}

.nav-item:hover[data-tone="slate"] .ultron-learn-more-nav-icon,
.nav-item.active[data-tone="slate"] .ultron-learn-more-nav-icon {
  border-color: #94a3b8;
}

.ultron-learn-more-nav-icon-svg {
  width: 18px;
  height: 18px;
}

.nav-item .nav-icon .nav-icon-accent {
  stroke-dashoffset: 0;
  opacity: 0.78;
}

.nav-item:hover {
  border-color: #e2e8f0;
  background: rgba(255, 255, 255, 0.72);
  color: #334155;
  transform: none;
  box-shadow: none;
}

.nav-item:hover .nav-icon {
  background: transparent;
  border-color: transparent;
  transform: scale(1.02);
}

.nav-item:hover .ultron-learn-more-nav-icon {
  transform: scale(1.05);
}

.nav-item.active {
  color: color-mix(in srgb, var(--session-ui-accent) 90%, #0f172a 10%);
  border-color: color-mix(in srgb, var(--session-ui-accent) 34%, #cbd5e1 66%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--session-ui-accent) 16%, #ffffff 84%),
    color-mix(in srgb, var(--session-ui-accent-alt) 12%, #f8fafc 88%)
  );
  box-shadow: 0 10px 20px color-mix(in srgb, var(--session-ui-accent) 14%, transparent);
}

.nav-item.active .nav-icon {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.nav-item.active .nav-icon .nav-icon-svg,
.nav-item.active .nav-icon .nav-icon-base,
.nav-item.active .nav-icon .nav-icon-accent,
.nav-item.active .nav-icon .nav-icon-core {
  animation: none;
}

.sidebar-session-wrap.sidebar-session-top {
  width: calc(100% - 6px);
  margin: 0 3px 8px;
  padding-top: 0;
}

.sidebar-session-wrap .market-status {
  width: 100%;
  min-height: 74px;
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.95), rgba(243, 244, 255, 0.9));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.sidebar-session-wrap .market-status.has-svg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.35) 42%, transparent 62%);
  transform: translateX(-135%);
  animation: sidebarSessionSweep 3.2s ease-in-out infinite;
  opacity: 0.34;
  pointer-events: none;
}

.sidebar-session-wrap .market-status .market-status-icon-wrap {
  width: 40px;
  height: 40px;
  margin-right: 0;
  flex: 0 0 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 4px 10px rgba(15, 23, 42, 0.06);
}

.sidebar-session-wrap .market-status .market-status-icon {
  width: 18px;
  height: 18px;
}

.sidebar-session-wrap .market-status .market-status-text {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding-left: 2px;
  white-space: normal;
}

.sidebar-session-wrap .market-status .market-status-label {
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1;
  color: currentColor;
}

.sidebar-session-wrap .market-status .market-status-meta {
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #334155;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.sidebar-session-wrap .market-status.open {
  color: #0f766e;
  border-color: rgba(20, 184, 166, 0.24);
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.94), rgba(240, 253, 244, 0.98));
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.08);
}

.sidebar-session-wrap .market-status.open .market-status-icon-wrap {
  border-color: rgba(16, 185, 129, 0.18);
  background: rgba(255, 255, 255, 0.8);
}

.sidebar-session-wrap .market-status.premarket {
  color: #a16207;
  border-color: rgba(245, 158, 11, 0.26);
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.94), rgba(255, 251, 235, 0.98));
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.08);
}

.sidebar-session-wrap .market-status.premarket .market-status-icon-wrap {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(255, 255, 255, 0.8);
}

.sidebar-session-wrap .market-status.aftermarket {
  color: #4f46e5;
  border-color: rgba(99, 102, 241, 0.24);
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.96), rgba(243, 232, 255, 0.98));
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.08);
}

.sidebar-session-wrap .market-status.aftermarket .market-status-icon-wrap {
  border-color: rgba(99, 102, 241, 0.18);
  background: rgba(255, 255, 255, 0.8);
}

.sidebar-session-wrap .market-status.closed {
  color: #be123c;
  border-color: rgba(244, 63, 94, 0.24);
  background: linear-gradient(135deg, rgba(255, 228, 230, 0.98), rgba(255, 241, 242, 0.99));
  box-shadow: 0 8px 18px rgba(244, 63, 94, 0.08);
}

.sidebar-session-wrap .market-status.closed .market-status-icon-wrap {
  border-color: rgba(244, 63, 94, 0.18);
  background: rgba(255, 255, 255, 0.84);
}

/* Keep session icons static for a cleaner look (Pre-Market remains the newer icon) */
.sidebar-session-wrap .market-status.has-svg::after,
.market-status .market-status-icon .ms-ring,
.market-status.open .market-status-icon .ms-sun-rays,
.market-status.open .market-status-icon .ms-core,
.market-status.premarket .market-status-icon .ms-dawn-core,
.market-status.aftermarket .market-status-icon .ms-moon,
.market-status.aftermarket .market-status-icon .ms-star,
.market-status.closed .market-status-icon .ms-closed-dot {
  animation: none !important;
}

.nav-badge {
  margin-left: auto;
  width: 10px;
  min-width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #f43f5e;
  border: 0;
  box-shadow: 0 0 0 6px rgba(244, 63, 94, 0.16), 0 0 10px rgba(244, 63, 94, 0.45);
}

.sidebar-auth-wrap {
  width: calc(100% - 6px);
  margin: auto 3px 0;
  padding: 14px 8px 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(248, 250, 252, 0.72));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.sidebar-auth-wrap.sidebar-auth-signed-in {
  grid-template-columns: 1fr;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-auth-quick-menu {
  grid-column: 1 / -1;
  width: 100%;
}

.sidebar-profile-menu-card {
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 54px -12px rgba(15, 23, 42, 0.18);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: inherit;
  overflow-y: auto;
}

.sidebar-profile-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  border: 1px solid rgba(241, 245, 249, 0.92);
  background: rgba(248, 250, 252, 0.9);
  padding: 12px;
}

.sidebar-profile-menu-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.sidebar-profile-menu-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #ffffff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.sidebar-profile-menu-avatar.has-image {
  color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sidebar-profile-menu-status {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #10b981;
}

.sidebar-profile-menu-user-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sidebar-profile-menu-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-profile-menu-name {
  min-width: 0;
  flex: 1 1 auto;
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-menu-email {
  display: block;
  max-width: 100%;
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-menu-section {
  display: grid;
  gap: 1px;
}

.sidebar-profile-menu-utility-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.sidebar-profile-menu-divider {
  height: 1px;
  background: rgba(226, 232, 240, 0.92);
  margin: 0 4px;
}

.sidebar-profile-menu-footer {
  padding-top: 10px;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-item.learn-more,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .sidebar-quick-item-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 46px;
  padding: 7px 9px;
  border-radius: 16px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 13px;
  letter-spacing: 0;
  gap: 10px;
  transform: none;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-utility-grid .sidebar-profile-menu-row {
  grid-column: auto;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 14px;
  justify-content: flex-start;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-utility-grid .sidebar-profile-menu-row .sidebar-quick-label {
  font-size: 11px;
  line-height: 1.2;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row:hover,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .sidebar-quick-item-btn:hover,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap.open .sidebar-quick-item-btn {
  border: 0;
  background: rgba(248, 250, 252, 0.96);
  box-shadow: none;
  transform: none;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-sky:hover,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-sky:hover .sidebar-quick-label {
  color: #0ea5e9;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-amber:hover,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-amber:hover .sidebar-quick-label,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap.open .sidebar-quick-item-btn {
  color: #d97706;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-purple:hover,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-purple:hover .sidebar-quick-label {
  color: #8b5cf6;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-slate:hover,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-slate:hover .sidebar-quick-label {
  color: #334155;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row .sidebar-quick-icon,
.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .sidebar-quick-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #ffffff;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-utility-grid .sidebar-profile-menu-row .sidebar-quick-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 13px;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-profile {
  border-color: #e0f2fe;
  background: #eff6ff;
  color: #0ea5e9;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-learn {
  border-color: #fef3c7;
  background: #fef3c7;
  color: #d97706;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-feedback {
  border-color: #f3e8ff;
  background: #f3e8ff;
  color: #8b5cf6;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-ticket-replyed {
  border-color: #ffe4e6;
  background: #ffe4e6;
  color: #e11d48;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-admin {
  border-color: #e2e8f0;
  background: #e2e8f0;
  color: #64748b;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-settings {
  border-color: #bfdbfe;
  background: #dbeafe;
  color: #2563eb;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row .sidebar-quick-label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.sidebar-profile-signout-btn {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(251, 113, 133, 0.26);
  background: linear-gradient(135deg, rgba(255, 248, 250, 0.98), rgba(255, 241, 242, 0.96));
  color: #e11d48;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  outline: none;
  box-shadow: 0 10px 20px rgba(244, 63, 94, 0.06);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sidebar-profile-signout-btn:hover {
  background: linear-gradient(135deg, rgba(255, 241, 242, 1), rgba(255, 228, 230, 0.98));
  border-color: rgba(251, 113, 133, 0.26);
  color: #be123c;
  box-shadow: 0 12px 22px rgba(244, 63, 94, 0.08);
  transform: none;
}

.sidebar-profile-signout-btn:focus,
.sidebar-profile-signout-btn:focus-visible {
  outline: none;
  border-color: rgba(251, 113, 133, 0.26);
  box-shadow: 0 10px 20px rgba(244, 63, 94, 0.06);
}

.sidebar-profile-signout-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.08);
  transition: transform 0.18s ease, background 0.18s ease;
}

.sidebar-profile-signout-btn:hover .sidebar-profile-signout-icon {
  transform: translateX(-2px);
  background: rgba(255, 255, 255, 0.96);
}

.sidebar-auth-user {
  grid-column: 1 / -1;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.86);
  padding: 10px 11px;
  gap: 4px;
}

.sidebar-auth-user-pill {
  grid-column: 1 / -1;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  min-height: 54px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-auth-user-pill:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.sidebar-auth-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #dbeafe;
  background: #dbeafe;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.sidebar-auth-avatar.has-image {
  color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sidebar-auth-user-text {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
  flex: 1 1 auto;
}

.sidebar-auth-user-name {
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: #0f172a;
}

.sidebar-auth-user-email {
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 11px;
  color: #64748b;
}

.sidebar-auth-user-caret {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.78);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.sidebar-auth-wrap.sidebar-auth-signed-in .ticket-replyed-link {
  min-height: 42px;
  border-radius: 14px;
}

.sidebar-auth-wrap.sidebar-user-menu-open .sidebar-auth-user-caret {
  transform: rotate(180deg);
  color: #475569;
  background: rgba(219, 234, 254, 0.92);
}

.sidebar-auth-pill {
  min-height: 46px;
  border-radius: 16px;
  font-family: 'Plus Jakarta Sans', var(--body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid #d8e2ef;
  padding: 0 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sidebar-auth-pill:hover {
  transform: translateY(-1px);
}

.sidebar-auth-pill.login {
  background: linear-gradient(180deg, #ffffff, #f6f9fc);
  border-color: #d4deec;
  color: #1e293b;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
}

.sidebar-auth-pill.login:hover {
  border-color: #b6c7de;
  background: linear-gradient(180deg, #ffffff, #f1f6fb);
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.14);
}

.sidebar-auth-pill.register {
  color: #ffffff;
  border-color: #9f1239;
  background: linear-gradient(112deg, #f43f5e, #f97316);
  box-shadow: 0 8px 18px rgba(244, 63, 94, 0.34);
}

.sidebar-auth-pill.register:hover {
  color: #ffffff;
  border-color: #9f1239;
  box-shadow: 0 12px 24px rgba(244, 63, 94, 0.42);
}

.nav-badge {
  right: 18px;
  width: 8px;
  min-width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: #f43f5e;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.58);
  overflow: visible;
}

.nav-badge:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
}

.nav-badge:not(.is-hidden)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(244, 63, 94, 0.38);
  animation: sidebarAlertPing 1.65s ease-out infinite;
}

@keyframes sidebarAlertPing {
  0% {
    transform: scale(1);
    opacity: 0.78;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

html[data-theme='dark'] .nav-item {
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--text-primary) 76%, var(--text-secondary) 24%);
}

html[data-theme='dark'] .nav-item .nav-icon {
  color: color-mix(in srgb, var(--text-primary) 66%, var(--session-ui-accent) 34%);
  border-color: transparent;
  background: transparent;
}

html[data-theme='dark'] .nav-item:hover {
  border-color: color-mix(in srgb, var(--session-ui-accent) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] .nav-item:hover .nav-icon {
  color: color-mix(in srgb, var(--text-primary) 84%, var(--session-ui-accent) 16%);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  border-color: color-mix(in srgb, var(--session-ui-accent) 48%, var(--border-bright) 52%);
}

html[data-theme='dark'] .sidebar-session-wrap .market-status .market-status-meta {
  color: color-mix(in srgb, var(--text-secondary) 92%, #ffffff 8%);
}

html[data-theme='dark'] .sidebar-session-wrap .market-status {
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.24);
}

html[data-theme='dark'] .sidebar-auth-wrap {
  border-top-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-hover) 84%, transparent), color-mix(in srgb, var(--bg-surface) 90%, transparent));
}

html[data-theme='dark'] .sidebar-auth-user,
html[data-theme='dark'] .sidebar-auth-user-pill,
html[data-theme='dark'] .sidebar-auth-pill.login {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

html[data-theme='dark'] .sidebar-auth-user-name {
  color: var(--text-primary);
}

html[data-theme='dark'] .sidebar-auth-user-email,
html[data-theme='dark'] .sidebar-auth-pill.login {
  color: var(--text-secondary);
}

html[data-theme='dark'] .sidebar-auth-avatar {
  border-color: color-mix(in srgb, var(--session-ui-accent) 52%, var(--border-bright) 48%);
  background-color: color-mix(in srgb, var(--session-ui-accent) 22%, var(--bg-surface) 78%);
  color: var(--session-ui-accent);
}

html[data-theme='dark'] .sidebar-auth-pill.login:hover,
html[data-theme='dark'] .sidebar-auth-user-pill:hover {
  border-color: color-mix(in srgb, var(--session-ui-accent) 54%, var(--border-bright) 46%);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  color: var(--text-primary);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--bg-deep) 42%, transparent);
}

html[data-theme='dark'] .sidebar-profile-menu-card,
html[data-theme='dark'] .sidebar-profile-menu-header {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
}

html[data-theme='dark'] .sidebar-quick-icon,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row .sidebar-quick-icon,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .sidebar-quick-icon,
html[data-theme='dark'] .sidebar-learn-more-card-icon {
  border-color: #334155;
  background: #0f172a;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.26);
}

html[data-theme='dark'] .sidebar-profile-menu-name {
  color: var(--text-primary);
}

html[data-theme='dark'] .sidebar-profile-menu-email,
html[data-theme='dark'] .sidebar-auth-user-caret,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row .sidebar-quick-label {
  color: var(--text-secondary);
}

html[data-theme='dark'] .sidebar-profile-menu-avatar {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background-color: color-mix(in srgb, var(--session-ui-accent) 18%, var(--bg-surface) 82%);
  color: var(--session-ui-accent);
}

html[data-theme='dark'] .sidebar-profile-menu-status {
  border-color: color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

html[data-theme='dark'] .sidebar-quick-icon.kind-profile,
html[data-theme='dark'] .sidebar-learn-more-card[data-tone="sky"] .sidebar-learn-more-card-icon {
  border-color: rgba(14, 165, 233, 0.28);
  background: rgba(14, 165, 233, 0.12);
}

html[data-theme='dark'] .sidebar-quick-icon.kind-learn,
html[data-theme='dark'] .sidebar-learn-more-card[data-tone="amber"] .sidebar-learn-more-card-icon {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
}

html[data-theme='dark'] .sidebar-quick-icon.kind-feedback,
html[data-theme='dark'] .sidebar-learn-more-card[data-tone="purple"] .sidebar-learn-more-card-icon {
  border-color: rgba(168, 85, 247, 0.28);
  background: rgba(168, 85, 247, 0.12);
}

html[data-theme='dark'] .sidebar-quick-icon.kind-ticket-replyed,
html[data-theme='dark'] .sidebar-learn-more-card[data-tone="rose"] .sidebar-learn-more-card-icon {
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(244, 63, 94, 0.12);
}

html[data-theme='dark'] .sidebar-quick-icon.kind-admin,
html[data-theme='dark'] .sidebar-learn-more-card[data-tone="slate"] .sidebar-learn-more-card-icon {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.12);
}

html[data-theme='dark'] .sidebar-quick-icon.kind-settings {
  border-color: rgba(59, 130, 246, 0.32);
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
}

html[data-theme='dark'] .sidebar-profile-menu-divider {
  background: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] .sidebar-profile-signout-btn {
  border-color: color-mix(in srgb, var(--red) 42%, var(--border-bright) 58%);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--red) 12%, var(--bg-surface) 88%),
    color-mix(in srgb, var(--red) 18%, var(--bg-hover) 82%)
  );
  color: color-mix(in srgb, var(--red) 74%, #ffffff 26%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--red) 14%, transparent);
}

html[data-theme='dark'] .sidebar-profile-signout-icon {
  background: color-mix(in srgb, #ffffff 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 22%, transparent);
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row:hover,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .sidebar-quick-item-btn:hover,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap.open .sidebar-quick-item-btn {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
}

html[data-theme='dark'] .sidebar-profile-signout-btn:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--red) 20%, var(--bg-surface) 80%),
    color-mix(in srgb, var(--red) 28%, var(--bg-hover) 72%)
  );
  border-color: color-mix(in srgb, var(--red) 42%, var(--border-bright) 58%);
  color: #fff1f2;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--red) 16%, transparent);
}

html[data-theme='dark'] .sidebar-profile-signout-btn:focus,
html[data-theme='dark'] .sidebar-profile-signout-btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--red) 42%, var(--border-bright) 58%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--red) 14%, transparent);
}

html[data-theme='dark'] .sidebar-auth-user-caret {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-user-menu-open .sidebar-auth-user-caret {
  background: color-mix(in srgb, var(--session-ui-accent) 20%, var(--bg-surface) 80%);
  color: var(--text-primary);
}

/* ===== TOP BAR REDESIGN ===== */
.top-bar.top-bar-redesign {
  --top-session-accent: var(--cyan);
  --top-bar-uniform-height: 164px;
  position: sticky;
  top: 10px;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.65fr);
  grid-auto-rows: minmax(0, auto);
  gap: 10px;
  padding: 12px;
  margin: 12px var(--main-shell-gutter) 12px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--top-session-accent) 34%, var(--border-bright) 66%);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--top-session-accent) 19%, var(--bg-surface) 81%),
    color-mix(in srgb, var(--top-session-accent) 13%, var(--bg-hover) 87%)
  );
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--bg-deep) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent);
  min-height: var(--top-bar-uniform-height);
  height: var(--top-bar-uniform-height);
  max-height: var(--top-bar-uniform-height);
  align-items: stretch;
  overflow: visible;
  isolation: isolate;
  box-sizing: border-box;
}

.main-content > .top-bar.top-bar-redesign {
  min-height: var(--top-bar-uniform-height) !important;
  height: var(--top-bar-uniform-height) !important;
  max-height: var(--top-bar-uniform-height) !important;
}

.top-bar.top-bar-redesign::before {
  content: none;
}

.top-bar.top-bar-redesign::after {
  content: none;
}

@keyframes topBarGlowFloat {
  0% { transform: translateX(-2%); }
  100% { transform: translateX(2%); }
}

@keyframes topBarScanMove {
  0% { transform: translateX(-70%); }
  100% { transform: translateX(70%); }
}

.top-bar.top-bar-redesign[data-session='open'] {
  --top-session-accent: var(--green);
}

.top-bar.top-bar-redesign[data-session='premarket'] {
  --top-session-accent: var(--gold);
}

.top-bar.top-bar-redesign[data-session='aftermarket'] {
  --top-session-accent: var(--purple);
}

.top-bar.top-bar-redesign[data-session='closed'] {
  --top-session-accent: var(--red);
}

.top-bar.top-bar-redesign > * {
  position: relative;
  z-index: 1;
}

.top-bar.top-bar-redesign .top-bar-left {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
}

.top-bar.top-bar-redesign .top-system-meta {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--bg-surface) 94%, transparent),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
  min-width: 0;
}

.top-system-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(214px, 252px);
  gap: 12px;
  align-items: center;
}

.top-system-content {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: center;
}

.top-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-bar.top-bar-redesign > .top-header-lock-btn {
  position: absolute;
  right: 12px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 5px 12px color-mix(in srgb, var(--bg-deep) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.top-header-lock-btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--top-session-accent) 52%, transparent);
  opacity: 0;
  transform: scale(0.62);
  pointer-events: none;
}

.top-header-lock-btn.is-toggling::after {
  animation: topHeaderLockPulse 0.46s ease;
}

@keyframes topHeaderLockPulse {
  0% { opacity: 0.58; transform: scale(0.62); }
  100% { opacity: 0; transform: scale(1.26); }
}

.top-header-lock-btn:hover {
  color: var(--top-session-accent);
  border-color: color-mix(in srgb, var(--top-session-accent) 54%, var(--border-bright) 46%);
  background: color-mix(in srgb, var(--top-session-accent) 14%, transparent);
  box-shadow:
    0 7px 16px color-mix(in srgb, var(--top-session-accent) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
  transform: translateY(-1px);
}

.top-header-lock-btn:not(.is-locked) {
  color: color-mix(in srgb, var(--orange) 72%, var(--text-secondary) 28%);
}

.top-header-lock-btn.is-locked {
  color: color-mix(in srgb, var(--cyan) 78%, var(--text-primary) 22%);
  border-color: color-mix(in srgb, var(--cyan) 46%, var(--border-bright) 54%);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}

.top-header-lock-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--top-session-accent) 28%, transparent);
}

.top-header-lock-btn .icon-lock-toggle {
  width: 12px;
  height: 12px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1), filter 0.24s ease;
  filter: drop-shadow(0 0 0 color-mix(in srgb, var(--top-session-accent) 0%, transparent));
}

.top-header-lock-btn .lock-body {
  fill: color-mix(in srgb, currentColor 11%, transparent);
  transition: fill 0.22s ease, stroke 0.22s ease;
}

.top-header-lock-btn .lock-core {
  fill: currentColor;
  stroke: none;
  opacity: 0.86;
  transform-origin: 8px 10.2px;
  transition: transform 0.26s ease, opacity 0.22s ease;
}

.top-header-lock-btn .lock-shackle-closed,
.top-header-lock-btn .lock-shackle-open {
  transform-origin: 8px 6.8px;
  transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.top-header-lock-btn .lock-shackle-closed {
  opacity: 0;
  transform: translate(-0.3px, -0.08px) scale(0.82) rotate(-18deg);
}

.top-header-lock-btn .lock-shackle-open {
  opacity: 1;
  transform: translate(0.55px, -0.06px) scale(1.02) rotate(12deg);
}

.top-header-lock-btn:not(.is-locked) .icon-lock-toggle {
  transform: rotate(-6deg);
}

.top-header-lock-btn:not(.is-locked) .lock-core {
  transform: translateY(0.42px);
  opacity: 0.66;
}

.top-header-lock-btn.is-locked .icon-lock-toggle {
  transform: rotate(0deg);
}

.top-header-lock-btn.is-locked .lock-shackle-closed {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
}

.top-header-lock-btn.is-locked .lock-shackle-open {
  opacity: 0;
  transform: translate(0.5px, 0.02px) scale(0.82) rotate(16deg);
}

.top-header-lock-btn.is-toggling .icon-lock-toggle {
  animation: topHeaderLockIconPop 0.36s ease;
}

@keyframes topHeaderLockIconPop {
  0% { transform: scale(0.92); filter: drop-shadow(0 0 0 color-mix(in srgb, var(--top-session-accent) 0%, transparent)); }
  55% { transform: scale(1.08); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--top-session-accent) 54%, transparent)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 color-mix(in srgb, var(--top-session-accent) 0%, transparent)); }
}

.top-bar.top-bar-redesign:not(.is-scroll-locked) {
  position: relative;
  top: 0;
}

.top-bar.top-bar-redesign.is-scroll-locked {
  position: sticky;
  top: 10px;
}

.top-brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  border: 1px solid color-mix(in srgb, var(--cyan) 58%, var(--border) 42%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--cyan) 18%, transparent),
    color-mix(in srgb, var(--red) 12%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 6px 14px color-mix(in srgb, var(--cyan) 24%, transparent);
}

.top-brand-mark svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-brand-mark svg path:first-child {
  transform-origin: 12px 12px;
  animation: topBrandSpin 11s linear infinite;
}

.top-brand-mark svg path:last-child {
  animation: topBrandCheckPulse 2.8s ease-in-out infinite;
}

@keyframes topBrandSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes topBrandCheckPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.top-bar.top-bar-redesign .top-bar-title {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  white-space: nowrap;
  margin-left: 0;
}

.top-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  align-items: stretch;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  min-width: 0;
}

.top-meta-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  min-height: 21px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 20%, transparent);
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  letter-spacing: 0.01em;
  gap: 6px;
}

.top-meta-key {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
}

.top-meta-value {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-meta-sep {
  display: none;
}

.top-session-clock {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  color: var(--text-secondary);
}

.top-session-clock.open {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

.top-session-clock.premarket {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--gold) 13%, transparent);
}

.top-session-clock.aftermarket {
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--purple) 13%, transparent);
}

.top-session-clock.closed {
  color: #1d4ed8;
  border-color: color-mix(in srgb, #1d4ed8 54%, var(--border-bright) 46%);
  background: color-mix(in srgb, #1d4ed8 12%, transparent);
}

.top-live-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.top-live-strip .market-status.market-inline {
  min-height: 24px;
  padding: 0 12px;
  font-size: 8px;
}

.top-auto-pill {
  min-height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.top-auto-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 55%, transparent);
}

.top-auto-pill.on {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.top-auto-pill.on::before {
  animation: topAutoPillPulse 1.7s ease-in-out infinite;
}

.top-auto-pill.off {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

@keyframes topAutoPillPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

.top-bar.top-bar-redesign .price-cluster {
  min-width: 0;
  max-width: 252px;
  min-width: 214px;
  width: 100%;
  justify-self: center;
  align-self: center;
  display: flex;
  justify-content: center;
}

.top-bar.top-bar-redesign .top-price-card {
  --ticker-trend-color: var(--cyan);
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: flex-start;
  position: relative;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ticker-trend-color) 44%, var(--border-bright) 56%);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--ticker-trend-color) 13%, var(--bg-surface) 87%),
    color-mix(in srgb, var(--bg-hover) 92%, transparent)
  );
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--ticker-trend-color) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 25%, transparent);
  padding: 8px 9px;
  gap: 6px;
  min-height: 94px;
  overflow: visible;
  animation: none;
  margin-top: 4px;
}

.top-bar.top-bar-redesign .top-price-card .top-price-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.92;
  color: var(--ticker-trend-color);
}

.top-bar.top-bar-redesign .top-price-card .top-price-bg-svg .spy-grid {
  stroke: color-mix(in srgb, var(--ticker-trend-color) 18%, white 82%);
  stroke-width: 0.8;
  stroke-dasharray: 2 8;
  opacity: 0.24;
  animation: spyGridDrift 5.4s linear infinite;
}

.top-bar.top-bar-redesign .top-price-card .top-price-bg-svg .spy-wave {
  fill: none;
  stroke: url(#spyCardWaveGradient);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ticker-trend-color) 28%, transparent));
  transition: opacity 0.28s ease;
}

.top-bar.top-bar-redesign .top-price-card .top-price-bg-svg .spy-glow {
  fill: color-mix(in srgb, var(--ticker-trend-color) 36%, transparent);
  opacity: 0.32;
  animation: spyGlowPulse 2.2s ease-in-out infinite;
}

.top-bar.top-bar-redesign .top-price-card.trend-up .top-price-bg-svg .spy-wave-up {
  opacity: 0.88;
}

.top-bar.top-bar-redesign .top-price-card.trend-down .top-price-bg-svg .spy-wave-down {
  opacity: 0.88;
}

.top-bar.top-bar-redesign .top-price-card.trend-neutral .top-price-bg-svg .spy-wave-neutral {
  opacity: 0.74;
}

.top-bar.top-bar-redesign .top-price-card.trend-up .top-price-bg-svg .spy-glow {
  fill: color-mix(in srgb, var(--green) 30%, transparent);
}

.top-bar.top-bar-redesign .top-price-card.trend-down .top-price-bg-svg .spy-glow {
  fill: color-mix(in srgb, var(--red) 32%, transparent);
}

.top-bar.top-bar-redesign .top-price-card.trend-neutral .top-price-bg-svg .spy-glow {
  fill: color-mix(in srgb, var(--orange) 28%, transparent);
}

.top-bar.top-bar-redesign .top-price-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(86% 84% at 12% 16%, color-mix(in srgb, var(--ticker-trend-color) 18%, transparent), transparent 60%),
    linear-gradient(162deg, color-mix(in srgb, var(--ticker-trend-color) 8%, transparent), transparent 64%);
  pointer-events: none;
}

.top-bar.top-bar-redesign .top-price-card.trend-up { --ticker-trend-color: var(--green); }
.top-bar.top-bar-redesign .top-price-card.trend-down { --ticker-trend-color: var(--red); }
.top-bar.top-bar-redesign .top-price-card.trend-neutral { --ticker-trend-color: var(--orange); }

.top-price-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.top-price-tag {
  border: 1px solid color-mix(in srgb, var(--ticker-trend-color) 56%, var(--border-bright) 44%);
  border-radius: 999px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--ticker-trend-color) 14%, var(--bg-surface) 86%),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
  color: var(--ticker-trend-color);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.13em;
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.top-price-tag.is-clickable {
  cursor: pointer;
  user-select: none;
}

.top-price-tag.is-clickable:hover {
  border-color: color-mix(in srgb, var(--ticker-trend-color) 72%, var(--border-bright) 28%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--ticker-trend-color) 20%, var(--bg-surface) 80%),
    color-mix(in srgb, var(--ticker-trend-color) 10%, var(--bg-hover) 90%)
  );
}

.top-price-tag.is-clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ticker-trend-color) 24%, transparent);
}

.stock-symbol-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
}

.stock-symbol-pill.is-compact {
  min-height: 16px;
  padding: 0 7px;
  font-size: 8px;
  letter-spacing: 0.08em;
}

.stock-symbol-pill-spy {
  color: var(--cyan);
  border-color: color-mix(in srgb, var(--cyan) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}

.stock-symbol-pill-aapl {
  color: #22c55e;
  border-color: color-mix(in srgb, #22c55e 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, #22c55e 12%, transparent);
}

.stock-symbol-pill.stock-symbol-pill-tone-up {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.stock-symbol-pill.stock-symbol-pill-tone-down {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--red) 14%, transparent);
}

.stock-symbol-pill.stock-symbol-pill-tone-neutral {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--orange) 14%, transparent);
}

.top-ticker-expand {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 75%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.top-ticker-expand {
  display: none !important;
}

.top-ticker-expand svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.top-ticker-expand:hover {
  color: var(--ticker-trend-color);
  border-color: color-mix(in srgb, var(--ticker-trend-color) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--ticker-trend-color) 16%, transparent);
}

.top-ticker-expand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ticker-trend-color) 24%, transparent);
}

.top-ticker-expand.is-open svg {
  transform: rotate(180deg);
}

.top-ticker-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  z-index: 1400;
  width: min(1100px, calc(100vw - 24px));
  max-height: min(96vh, 900px);
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  background: #ffffff;
  box-shadow:
    0 0 0 100vmax rgba(15, 23, 42, 0.18),
    0 28px 70px rgba(15, 23, 42, 0.16),
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  opacity: 0;
  transform: translate(-50%, calc(-50% - 8px)) scale(0.98);
  pointer-events: none;
  color: #0f172a;
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  isolation: isolate;
  will-change: opacity, transform;
  transition:
    opacity 0.28s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.top-ticker-hint::before,
.top-ticker-hint::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.top-ticker-hint::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.35) 42%, rgba(255, 255, 255, 0));
  opacity: 0.72;
  z-index: 0;
}

.top-ticker-hint::after {
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  opacity: 0.85;
  z-index: 0;
}

.top-ticker-hint > * {
  position: relative;
  z-index: 1;
}

.top-ticker-hint.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.top-ticker-hint::-webkit-scrollbar {
  width: 12px;
}

.top-ticker-hint::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ticker-trend-color) 22%, rgba(148, 163, 184, 0.9));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.top-ticker-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.top-ticker-modal-header-copy {
  min-width: 0;
  width: min(760px, 100%);
  margin-inline: auto;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.top-ticker-search-row {
  width: min(760px, 100%);
  margin: 8px auto 0;
}

.top-ticker-search-input {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, white 12%);
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 0 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.top-ticker-search-input::placeholder {
  color: var(--text-muted);
}

.top-ticker-search-input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--ticker-trend-color) 54%, var(--border-bright) 46%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ticker-trend-color) 18%, transparent);
}

.top-ticker-search-status {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

.top-ticker-search-status.is-error {
  color: var(--red);
}

.top-ticker-popup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-inline: auto;
}

.top-ticker-popup-subtitle {
  color: var(--text-secondary);
}

.top-ticker-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(760px, 100%);
  margin: 8px auto 0;
  gap: 12px;
}

.top-ticker-summary-card {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 16px;
  min-height: 74px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  display: grid;
  gap: 4px;
  align-content: center;
}

.top-ticker-summary-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.top-ticker-summary-value {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.top-ticker-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.top-ticker-kpi-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.top-ticker-sections {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.top-ticker-popup-content {
  margin-top: 14px;
}

.top-ticker-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  border-radius: 18px;
  padding: 10px;
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--ticker-trend-color) 7%, transparent), transparent 64%),
    radial-gradient(130% 120% at 100% 100%, color-mix(in srgb, var(--session-ui-accent) 6%, transparent), transparent 66%),
    color-mix(in srgb, var(--bg-surface) 94%, transparent);
  box-shadow:
    0 14px 26px color-mix(in srgb, var(--bg-deep) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
  min-height: 300px;
}

.top-ticker-section::before,
.top-ticker-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.top-ticker-section::before {
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, color-mix(in srgb, #ffffff 28%, transparent) 46%, transparent 72%);
  opacity: 0.18;
  transform: translateX(-58%);
  animation: topTickerSectionSweep 7.6s ease-in-out infinite;
  z-index: 0;
}

.top-ticker-section::after {
  inset: 1px;
  border: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
  opacity: 0.72;
  z-index: 0;
}

.top-ticker-section > * {
  position: relative;
  z-index: 1;
}

@keyframes topTickerSectionSweep {
  0%, 100% {
    transform: translateX(-58%);
    opacity: 0.14;
  }
  50% {
    transform: translateX(58%);
    opacity: 0.24;
  }
}

.top-ticker-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.top-ticker-section-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.top-ticker-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.top-ticker-empty {
  border: 1px dashed color-mix(in srgb, var(--border-bright) 60%, transparent);
  border-radius: 12px;
  min-height: 58px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 12px;
}

.top-ticker-modal-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98));
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 10px rgba(15, 23, 42, 0.05);
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.top-ticker-modal-close svg {
  width: 18px;
  height: 18px;
  display: block;
}

.top-ticker-modal-close svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-ticker-modal-close:hover {
  color: color-mix(in srgb, var(--ticker-trend-color) 74%, #0f172a 26%);
  border-color: color-mix(in srgb, var(--ticker-trend-color) 34%, rgba(203, 213, 225, 0.95));
  background: color-mix(in srgb, var(--ticker-trend-color) 6%, #ffffff 94%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 8px 16px rgba(15, 23, 42, 0.08);
}

.top-ticker-modal-close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ticker-trend-color) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 4px 10px rgba(15, 23, 42, 0.05);
}

.top-ticker-hint-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0f172a;
}

.top-ticker-hint-body {
  font-family: var(--mono);
  margin-top: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  max-width: 46ch;
  margin-inline: auto;
}

.top-ticker-current-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.top-ticker-current-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.top-ticker-current-chip {
  --current-chip-accent: rgba(100, 116, 139, 0.5);
  --current-chip-bg: rgba(248, 250, 252, 0.96);
  --current-chip-text: #334155;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--current-chip-accent) 62%, rgba(203, 213, 225, 0.95));
  background: var(--current-chip-bg);
  color: var(--current-chip-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.top-ticker-current-chip.trend-up {
  --current-chip-accent: rgba(34, 197, 94, 0.72);
  --current-chip-bg: rgba(240, 253, 244, 0.98);
  --current-chip-text: #166534;
}

.top-ticker-current-chip.trend-down {
  --current-chip-accent: rgba(239, 68, 68, 0.72);
  --current-chip-bg: rgba(254, 242, 242, 0.98);
  --current-chip-text: #b91c1c;
}

.top-ticker-current-chip.trend-neutral {
  --current-chip-accent: rgba(59, 130, 246, 0.58);
  --current-chip-bg: rgba(239, 246, 255, 0.98);
  --current-chip-text: #1d4ed8;
}

.top-ticker-current-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--current-chip-text);
  background: color-mix(in srgb, var(--current-chip-accent) 16%, #ffffff 84%);
  border: 1px solid color-mix(in srgb, var(--current-chip-accent) 54%, rgba(203, 213, 225, 0.9));
}

.top-ticker-current-state {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--current-chip-text);
}

.top-ticker-hint .stock-symbol-pill {
  min-height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: rgba(255, 255, 255, 0.95);
  color: #334155;
  font-size: 10px;
  letter-spacing: 0.08em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  vertical-align: middle;
}

.top-ticker-current-chip .stock-symbol-pill {
  min-height: 18px;
  padding: 0 8px;
  border-color: color-mix(in srgb, var(--current-chip-accent) 54%, rgba(203, 213, 225, 0.95));
  background: rgba(255, 255, 255, 0.96);
  color: var(--current-chip-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.top-ticker-current-chip .stock-symbol-pill.stock-symbol-pill-aapl,
.top-ticker-current-chip .stock-symbol-pill.stock-symbol-pill-spy {
  color: var(--current-chip-text);
  border-color: color-mix(in srgb, var(--current-chip-accent) 54%, rgba(203, 213, 225, 0.95));
  background: rgba(255, 255, 255, 0.96);
}

.top-ticker-hint-note {
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  width: fit-content;
  max-width: 100%;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 20px rgba(15, 23, 42, 0.06);
  color: #475569;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;
}

.top-ticker-options {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-height: min(38vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 2px 2px 6px 0;
}

.top-ticker-options::-webkit-scrollbar {
  width: 9px;
}

.top-ticker-options::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ticker-trend-color) 14%, rgba(148, 163, 184, 0.9));
  border-radius: 999px;
}

.top-ticker-option {
  --top-ticker-option-accent: rgba(59, 130, 246, 0.56);
  --top-ticker-option-accent-soft: rgba(239, 246, 255, 0.7);
  position: relative;
  width: 100%;
  min-height: 96px;
  border: 1px solid color-mix(in srgb, var(--top-ticker-option-accent) 34%, rgba(203, 213, 225, 0.78));
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97),
      color-mix(in srgb, var(--top-ticker-option-accent-soft) 16%, rgba(248, 250, 252, 0.95))
    );
  padding: 12px 12px;
  display: block;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 6px 14px rgba(15, 23, 42, 0.04);
  will-change: transform, box-shadow;
  transition:
    border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.top-ticker-option[data-trend="up"] {
  --top-ticker-option-accent: rgba(34, 197, 94, 0.62);
  --top-ticker-option-accent-soft: rgba(240, 253, 244, 0.74);
}

.top-ticker-option[data-trend="down"] {
  --top-ticker-option-accent: rgba(239, 68, 68, 0.62);
  --top-ticker-option-accent-soft: rgba(254, 242, 242, 0.76);
}

.top-ticker-option[data-trend="neutral"] {
  --top-ticker-option-accent: rgba(59, 130, 246, 0.54);
  --top-ticker-option-accent-soft: rgba(239, 246, 255, 0.72);
}

.top-ticker-option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--top-ticker-option-accent) 58%, rgba(148, 163, 184, 0.76));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--top-ticker-option-accent-soft) 28%, rgba(255, 255, 255, 0.98)),
      color-mix(in srgb, var(--top-ticker-option-accent-soft) 20%, rgba(248, 250, 252, 0.94))
    );
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 10px 20px rgba(15, 23, 42, 0.07);
}

.top-ticker-option:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ticker-trend-color) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.top-ticker-option[aria-disabled="true"] {
  opacity: 0.68;
  cursor: not-allowed;
}

.top-ticker-option.is-active {
  border-color: color-mix(in srgb, var(--top-ticker-option-accent) 74%, rgba(30, 41, 59, 0.62));
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--top-ticker-option-accent) 14%, transparent), transparent 46%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      color-mix(in srgb, var(--top-ticker-option-accent-soft) 24%, rgba(248, 250, 252, 0.92))
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--top-ticker-option-accent) 20%, transparent),
    0 12px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.top-ticker-option-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  gap: 12px;
  align-items: center;
}

.top-ticker-option-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  color: var(--cyan);
  opacity: 0.22;
  mix-blend-mode: normal;
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.top-ticker-option-bg-svg.trend-up { color: var(--green); }
.top-ticker-option-bg-svg.trend-down { color: var(--red); }
.top-ticker-option-bg-svg.trend-neutral { color: var(--orange); }

.top-ticker-option-bg-svg .opt-grid {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.55;
  stroke-dasharray: 2 6;
  opacity: 0.1;
  animation: topTickerOptionGridDrift 7.8s ease-in-out infinite alternate;
}

.top-ticker-option-bg-svg .opt-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-ticker-option-bg-svg .opt-line-main {
  stroke-width: 1.7;
  opacity: 0.6;
  transition: opacity 0.32s ease;
}

.top-ticker-option-bg-svg .opt-line-glow {
  stroke-width: 4.2;
  opacity: 0.1;
  filter: blur(1.6px);
  transition: opacity 0.32s ease;
}

.top-ticker-option-bg-svg .opt-scan {
  fill: none;
  stroke-width: 1.2;
  opacity: 0.24;
  transition: opacity 0.32s ease;
}

.top-ticker-option.is-active .top-ticker-option-bg-svg .opt-line-main {
  opacity: 0.85;
}

.top-ticker-option.is-active .top-ticker-option-bg-svg .opt-line-glow {
  opacity: 0.16;
}

.top-ticker-option:hover:not(:disabled) .top-ticker-option-bg-svg {
  opacity: 0.32;
  transform: scale(1.01);
}

.top-ticker-option.is-active .top-ticker-option-bg-svg {
  opacity: 0.38;
}

@keyframes topTickerOptionGridDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-6px); }
}

.top-ticker-option-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.top-ticker-option-main-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.top-ticker-favorite-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 76%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.top-ticker-favorite-btn:hover {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 54%, var(--border-bright) 46%);
}

.top-ticker-favorite-btn.is-favorite {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 62%, var(--border-bright) 38%);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}

.top-ticker-favorite-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 24%, transparent);
}

[data-theme="dark"] .top-ticker-hint {
  border-color: color-mix(in srgb, var(--border-bright) 82%, transparent);
  background: color-mix(in srgb, var(--bg-card) 84%, black 16%);
  color: var(--text-primary);
  box-shadow:
    0 0 0 100vmax rgba(2, 6, 23, 0.6),
    0 28px 70px rgba(2, 6, 23, 0.66),
    0 10px 24px rgba(2, 6, 23, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .top-ticker-hint::before {
  background:
    linear-gradient(180deg, rgba(71, 85, 105, 0.2), rgba(15, 23, 42, 0.32) 42%, rgba(15, 23, 42, 0));
}

[data-theme="dark"] .top-ticker-hint::after {
  border-color: rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .top-ticker-modal-header {
  border-bottom-color: color-mix(in srgb, var(--border-bright) 56%, transparent);
}

[data-theme="dark"] .top-ticker-hint-title,
[data-theme="dark"] .top-ticker-option-symbol,
[data-theme="dark"] .top-ticker-option-price {
  color: var(--text-primary);
}

[data-theme="dark"] .top-ticker-hint-body,
[data-theme="dark"] .top-ticker-option-name,
[data-theme="dark"] .top-ticker-current-label,
[data-theme="dark"] .top-ticker-hint-note {
  color: var(--text-secondary);
}

[data-theme="dark"] .top-ticker-option {
  border-color: color-mix(in srgb, var(--top-ticker-option-accent) 42%, var(--border-bright) 58%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-card) 82%, black 18%),
      color-mix(in srgb, var(--top-ticker-option-accent-soft) 16%, var(--bg-card) 84%)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 18px rgba(2, 6, 23, 0.45),
    0 0 0 1px color-mix(in srgb, var(--top-ticker-option-accent) 12%, transparent);
}

[data-theme="dark"] .top-ticker-option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--top-ticker-option-accent) 68%, var(--border-bright) 32%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--top-ticker-option-accent-soft) 24%, var(--bg-card) 76%),
      color-mix(in srgb, var(--top-ticker-option-accent-soft) 18%, var(--bg-surface) 82%)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(2, 6, 23, 0.52),
    0 0 0 1px color-mix(in srgb, var(--top-ticker-option-accent) 18%, transparent);
}

[data-theme="dark"] .top-ticker-option:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--top-ticker-option-accent) 30%, transparent),
    0 12px 26px rgba(2, 6, 23, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .top-ticker-option[aria-disabled="true"] {
  opacity: 0.62;
  border-color: color-mix(in srgb, var(--border-bright) 52%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 78%, black 22%);
}

[data-theme="dark"] .top-ticker-option[aria-disabled="true"] .top-ticker-option-symbol,
[data-theme="dark"] .top-ticker-option[aria-disabled="true"] .top-ticker-option-name,
[data-theme="dark"] .top-ticker-option[aria-disabled="true"] .top-ticker-option-price,
[data-theme="dark"] .top-ticker-option[aria-disabled="true"] .top-ticker-option-change {
  color: color-mix(in srgb, var(--text-secondary) 76%, transparent);
}

[data-theme="dark"] .top-ticker-option:hover:not(:disabled) .top-ticker-option-badge {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--top-ticker-option-accent) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--top-ticker-option-accent-soft) 18%, var(--bg-hover) 82%);
}

[data-theme="dark"] .top-ticker-option-badge {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

[data-theme="dark"] .top-ticker-modal-close {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
}

[data-theme="dark"] .top-ticker-modal-close:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--ticker-trend-color) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--ticker-trend-color) 16%, var(--bg-surface) 84%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 18px rgba(2, 6, 23, 0.48);
}

[data-theme="dark"] .top-ticker-modal-close:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ticker-trend-color) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 18px rgba(2, 6, 23, 0.48);
}

[data-theme="dark"] .top-ticker-search-input {
  border-color: color-mix(in srgb, var(--border-bright) 82%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 82%, black 18%);
  color: var(--text-primary);
}

[data-theme="dark"] .top-ticker-search-input:focus-visible {
  border-color: color-mix(in srgb, var(--ticker-trend-color) 66%, var(--border-bright) 34%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ticker-trend-color) 24%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, black 12%);
}

[data-theme="dark"] .top-ticker-search-input::placeholder {
  color: color-mix(in srgb, var(--text-secondary) 82%, transparent);
}

[data-theme="dark"] .top-ticker-search-status {
  color: var(--text-secondary);
}

[data-theme="dark"] .top-ticker-popup-kicker,
[data-theme="dark"] .top-ticker-summary-card {
  border-color: color-mix(in srgb, var(--border-bright) 76%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 86%, black 14%);
}

[data-theme="dark"] .top-ticker-summary-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .top-ticker-summary-value {
  color: var(--text-primary);
}

[data-theme="dark"] .top-ticker-kpi-chip {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 86%, black 14%);
  color: var(--text-primary);
}

[data-theme="dark"] .top-ticker-section {
  border-color: color-mix(in srgb, var(--border-bright) 76%, transparent);
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--session-ui-accent) 10%, transparent), transparent 64%),
    radial-gradient(130% 120% at 100% 100%, color-mix(in srgb, var(--ticker-trend-color) 8%, transparent), transparent 66%),
    color-mix(in srgb, var(--bg-surface) 82%, black 18%);
  box-shadow:
    0 16px 30px rgba(2, 6, 23, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .top-ticker-section::before {
  background:
    linear-gradient(120deg, transparent 0%, color-mix(in srgb, #e2e8f0 20%, transparent) 48%, transparent 74%);
  opacity: 0.16;
}

[data-theme="dark"] .top-ticker-section::after {
  border-color: color-mix(in srgb, #cbd5e1 18%, transparent);
}

[data-theme="dark"] .top-ticker-section-title {
  color: var(--text-primary);
}

[data-theme="dark"] .top-ticker-section-count {
  border-color: color-mix(in srgb, var(--border-bright) 76%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, black 12%);
  color: var(--text-primary);
}

[data-theme="dark"] .top-ticker-empty {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-card) 84%, black 16%);
}

[data-theme="dark"] .top-ticker-option-name {
  color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary) 28%);
}

[data-theme="dark"] .top-ticker-favorite-btn {
  border-color: color-mix(in srgb, var(--border-bright) 78%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
  color: var(--text-secondary);
}

[data-theme="dark"] .top-ticker-favorite-btn:hover {
  color: color-mix(in srgb, var(--gold) 90%, #f8fafc 10%);
  border-color: color-mix(in srgb, var(--gold) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--gold) 18%, var(--bg-surface) 82%);
}

[data-theme="dark"] .top-ticker-favorite-btn:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent);
}

[data-theme="dark"] .top-ticker-option-bg-svg {
  opacity: 0.3;
}

[data-theme="dark"] .top-ticker-option:hover:not(:disabled) .top-ticker-option-bg-svg {
  opacity: 0.42;
}

[data-theme="dark"] .top-ticker-option.is-active .top-ticker-option-bg-svg {
  opacity: 0.48;
}

.top-ticker-option-symbol {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0f172a;
  line-height: 1.1;
}

.top-ticker-option-name {
  font-family: var(--mono);
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-ticker-option-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: max-content;
}

.top-ticker-option-price {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  transition: color 0.35s ease, transform 0.35s ease;
}

.top-ticker-option-change {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.1;
  transition: color 0.35s ease, transform 0.35s ease;
}

.top-ticker-option-change.up { color: var(--green); }
.top-ticker-option-change.down { color: var(--red); }
.top-ticker-option-change.flat { color: #64748b; }

.top-ticker-option[data-trend="up"] .top-ticker-option-price {
  animation: topTickerPriceUpPulse 2.6s ease-in-out infinite;
}

.top-ticker-option[data-trend="down"] .top-ticker-option-price {
  animation: topTickerPriceDownPulse 2.6s ease-in-out infinite;
}

.top-ticker-option[data-trend="up"] .top-ticker-option-change,
.top-ticker-option[data-trend="down"] .top-ticker-option-change {
  animation: topTickerChangeFloat 1.8s ease-in-out infinite;
}

.top-ticker-option[data-trend="up"] .top-ticker-option-symbol {
  animation: topTickerSymbolLift 2.2s ease-in-out infinite;
}

.top-ticker-option[data-trend="down"] .top-ticker-option-symbol {
  animation: topTickerSymbolDip 2.2s ease-in-out infinite;
}

.top-ticker-option[data-trend="up"] .top-ticker-option-badge {
  animation: topTickerBadgeUpGlow 2s ease-in-out infinite;
}

.top-ticker-option[data-trend="down"] .top-ticker-option-badge {
  animation: topTickerBadgeDownGlow 2s ease-in-out infinite;
}

@keyframes topTickerPriceUpPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes topTickerPriceDownPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

@keyframes topTickerChangeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5px); }
}

@keyframes topTickerSymbolLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes topTickerSymbolDip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

@keyframes topTickerBadgeUpGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 0 10px rgba(34, 197, 94, 0.24); }
}

@keyframes topTickerBadgeDownGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 0 10px rgba(239, 68, 68, 0.24); }
}

@media (max-width: 900px) {
  .top-ticker-hint {
    width: min(720px, calc(100vw - 20px));
    max-height: min(94vh, 760px);
    padding: 18px;
  }

  .top-ticker-sections {
    grid-template-columns: 1fr;
  }

  .top-ticker-section {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .top-ticker-hint {
    width: calc(100vw - 14px);
    padding: 14px;
    border-radius: 16px;
    max-height: 95vh;
  }

  .top-ticker-summary-grid {
    grid-template-columns: 1fr;
  }

  .top-ticker-summary-card {
    min-height: 80px;
    border-radius: 14px;
    padding: 10px 12px;
  }

  .top-ticker-summary-value {
    font-size: 26px;
  }

  .top-ticker-search-input {
    min-height: 46px;
    font-size: 14px;
  }

  .top-ticker-sections {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .top-ticker-option-content {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .top-ticker-option-side {
    justify-items: start;
  }
}

.top-ticker-option-badge {
  margin-top: 3px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #475569;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.top-ticker-option.is-active .top-ticker-option-badge {
  color: color-mix(in srgb, var(--top-ticker-option-accent) 74%, #0f172a 26%);
  border-color: color-mix(in srgb, var(--top-ticker-option-accent) 62%, rgba(148, 163, 184, 0.35));
  background: color-mix(in srgb, var(--top-ticker-option-accent-soft) 22%, rgba(255, 255, 255, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 6px 12px rgba(15, 23, 42, 0.06);
}

@media (max-width: 640px) {
  .top-ticker-hint {
    width: calc(100vw - 14px);
    max-height: min(95vh, 780px);
    padding: 12px;
    border-radius: 20px;
  }

  .top-ticker-modal-header {
    gap: 10px;
    padding: 2px 2px 12px;
  }

  .top-ticker-hint-title {
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .top-ticker-hint-body {
    font-size: 12px;
    line-height: 1.4;
  }

  .top-ticker-current-row {
    gap: 6px;
    margin-top: 0;
  }

  .top-ticker-current-label {
    font-size: 10px;
  }

  .top-ticker-current-chip {
    min-height: 22px;
    gap: 5px;
    padding: 1px 7px 1px 5px;
  }

  .top-ticker-current-icon {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }

  .top-ticker-current-state {
    font-size: 9px;
  }

  .top-ticker-hint .stock-symbol-pill {
    min-height: 18px;
    padding: 0 8px;
    font-size: 9px;
  }

  .top-ticker-modal-close {
    width: 34px;
    height: 34px;
  }

  .top-ticker-modal-close svg {
    width: 16px;
    height: 16px;
  }

  .top-ticker-options {
    margin-top: 10px;
    gap: 8px;
    padding-right: 2px;
  }

  .top-ticker-option {
    min-height: 92px;
    border-radius: 16px;
    padding: 12px 12px;
    gap: 10px;
  }

  .top-ticker-option-content {
    gap: 10px;
  }

  .top-ticker-option-main {
    gap: 3px;
  }

  .top-ticker-option-symbol {
    font-size: 16px;
  }

  .top-ticker-option-name {
    font-size: 12px;
  }

  .top-ticker-option-price {
    font-size: 15px;
  }

  .top-ticker-option-change {
    font-size: 11px;
  }

  .top-ticker-option-badge {
    margin-top: 2px;
    padding: 2px 8px;
    font-size: 10px;
  }

  .top-ticker-hint-note {
    margin-top: 12px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-ticker-hint,
  .top-ticker-modal-close,
  .top-ticker-option {
    transition: none;
  }

  .top-ticker-option:hover:not(:disabled) {
    transform: none;
  }

  .top-ticker-option-bg-svg .opt-grid {
    animation: none;
  }

  .top-ticker-option-bg-svg animateTransform {
    display: none;
  }
}

.top-price-signal {
  --signal-pos: 50%;
  --signal-start: 49.2%;
  --signal-width: 1.6%;
  --signal-intensity: 0;
  position: relative;
  width: 92px;
  height: 20px;
  display: block;
  justify-self: end;
  align-self: end;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ticker-trend-color) 46%, var(--border-bright) 54%);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--bg-surface) 94%, transparent),
    color-mix(in srgb, var(--ticker-trend-color) 8%, var(--bg-hover) 92%)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent),
    inset 0 -8px 14px color-mix(in srgb, var(--bg-deep) 10%, transparent),
    0 6px 14px color-mix(in srgb, var(--ticker-trend-color) 16%, transparent);
  backdrop-filter: blur(6px);
  overflow: hidden;
  isolation: isolate;
}

.top-price-signal::before,
.top-price-signal::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.65px solid color-mix(in srgb, var(--ticker-trend-color) 86%, #ffffff 14%);
  border-right: 1.65px solid color-mix(in srgb, var(--ticker-trend-color) 86%, #ffffff 14%);
  transform-origin: center;
  opacity: calc(0.58 + var(--signal-intensity) * 0.32);
  z-index: 4;
  transition: opacity 0.26s ease, border-color 0.26s ease;
}

.top-price-signal::before {
  left: 4px;
  transform: translateY(-50%) rotate(-135deg);
}

.top-price-signal::after {
  right: 4px;
  transform: translateY(-50%) rotate(45deg);
}

.top-price-signal .signal-track,
.top-price-signal .signal-fill,
.top-price-signal .signal-node {
  position: absolute;
  display: block;
}

.top-price-signal .signal-track {
  left: 12px;
  right: 12px;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--border-bright) 52%, transparent),
    color-mix(in srgb, var(--border-bright) 74%, transparent),
    color-mix(in srgb, var(--border-bright) 52%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--border-bright) 56%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
  z-index: 0;
}

.top-price-signal .signal-track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  bottom: -5px;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-muted) 14%, transparent),
    color-mix(in srgb, var(--text-muted) 54%, transparent),
    color-mix(in srgb, var(--text-muted) 14%, transparent)
  );
}

.top-price-signal .signal-track::after {
  content: '';
  position: absolute;
  left: -24%;
  top: 0;
  bottom: 0;
  width: 24%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--ticker-trend-color) 44%, #ffffff 56%),
    transparent
  );
  opacity: calc(0.16 + var(--signal-intensity) * 0.24);
  animation: topSignalTrackFlow 2.6s linear infinite;
}

.top-price-signal .signal-fill {
  left: var(--signal-start);
  width: var(--signal-width);
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ticker-trend-color) 20%, transparent),
    color-mix(in srgb, var(--ticker-trend-color) 98%, #ffffff 2%),
    color-mix(in srgb, var(--ticker-trend-color) 64%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--ticker-trend-color) 68%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--ticker-trend-color) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
  opacity: calc(0.58 + var(--signal-intensity) * 0.3);
  transition:
    left 0.42s cubic-bezier(0.25, 0.9, 0.28, 1),
    width 0.42s cubic-bezier(0.25, 0.9, 0.28, 1),
    opacity 0.25s ease,
    border-color 0.26s ease,
    box-shadow 0.26s ease;
  z-index: 2;
}

.top-price-signal .signal-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    color-mix(in srgb, #ffffff 72%, transparent) 50%,
    transparent 100%
  );
  opacity: calc(0.3 + var(--signal-intensity) * 0.25);
  animation: topSignalFillShimmer 2s ease-in-out infinite;
}

.top-price-signal .signal-node {
  left: var(--signal-pos);
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #ffffff 28%, var(--ticker-trend-color) 72%),
    color-mix(in srgb, var(--ticker-trend-color) 90%, #000000 10%)
  );
  border: 1px solid color-mix(in srgb, var(--ticker-trend-color) 82%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--ticker-trend-color) 20%, transparent),
    0 0 12px color-mix(in srgb, var(--ticker-trend-color) 48%, transparent);
  transition:
    left 0.42s cubic-bezier(0.25, 0.9, 0.28, 1),
    transform 0.3s ease,
    background 0.2s ease,
    border-color 0.24s ease;
  z-index: 3;
}

.top-price-signal .signal-node::before,
.top-price-signal .signal-node::after {
  content: '';
  position: absolute;
  border-radius: inherit;
}

.top-price-signal .signal-node::before {
  inset: -3px;
  border: 1px solid color-mix(in srgb, var(--ticker-trend-color) 58%, transparent);
  opacity: calc(0.24 + var(--signal-intensity) * 0.36);
  animation: topSignalNodePulse 1.8s ease-out infinite;
}

.top-price-signal .signal-node::after {
  inset: 2px;
  background: color-mix(in srgb, #ffffff 56%, transparent);
  opacity: 0.78;
}

.top-price-signal.trend-neutral .signal-track::after,
.top-price-signal.trend-neutral .signal-fill::after,
.top-price-signal.trend-neutral .signal-node::before {
  animation-duration: 3.3s;
}

@keyframes topSignalTrackFlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(520%); }
}

@keyframes topSignalFillShimmer {
  0%, 100% { transform: translateX(-62%); opacity: 0.18; }
  50% { transform: translateX(62%); opacity: 0.46; }
}

@keyframes topSignalNodePulse {
  0% { transform: scale(0.76); opacity: 0.56; }
  100% { transform: scale(1.42); opacity: 0; }
}

@keyframes topValueTick {
  0% { opacity: 0.62; transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}

.top-value-tick {
  animation: topValueTick 0.34s ease;
}

.top-price-main-row {
  display: block;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.top-bar.top-bar-redesign .price-value {
  font-size: clamp(19px, 1.36vw, 24px);
  line-height: 0.98;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.2s ease, font-size 0.2s ease;
}

.top-bar.top-bar-redesign .price-value.top-trend-up {
  color: color-mix(in srgb, var(--green) 44%, var(--text-primary) 56%);
  font-size: clamp(20px, 1.4vw, 25px);
}

.top-bar.top-bar-redesign .price-value.top-trend-down {
  color: color-mix(in srgb, var(--red) 44%, var(--text-primary) 56%);
  font-size: clamp(20px, 1.4vw, 25px);
}

.top-bar.top-bar-redesign .price-value.top-trend-neutral {
  color: color-mix(in srgb, var(--orange) 42%, var(--text-primary) 58%);
  font-size: clamp(19px, 1.34vw, 24px);
}

.top-price-lower-row {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

@keyframes spyGridDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-14px); }
}

@keyframes spyGlowPulse {
  0%, 100% { transform: translateY(0); opacity: 0.24; }
  50% { transform: translateY(-1.2px); opacity: 0.42; }
}

.top-price-change-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.top-bar.top-bar-redesign .top-price-card .price-change {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.2s ease, font-size 0.2s ease;
}

.top-bar.top-bar-redesign .top-price-card .price-change.top-trend-up {
  color: var(--green);
  font-size: 12px;
}

.top-bar.top-bar-redesign .top-price-card .price-change.top-trend-down {
  color: var(--red);
  font-size: 12px;
}

.top-bar.top-bar-redesign .top-price-card .price-change.top-trend-neutral {
  color: var(--orange);
  font-size: 11px;
}

.top-price-pct {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.2s ease, font-size 0.2s ease;
}

.top-price-pct.top-trend-up {
  color: color-mix(in srgb, var(--green) 86%, var(--text-secondary) 14%);
  font-size: 10.5px;
}

.top-price-pct.top-trend-down {
  color: color-mix(in srgb, var(--red) 86%, var(--text-secondary) 14%);
  font-size: 10.5px;
}

.top-price-pct.top-trend-neutral {
  color: color-mix(in srgb, var(--orange) 88%, var(--text-secondary) 12%);
  font-size: 10px;
}

.top-price-meta {
  display: none;
}

.top-price-meta span {
  border: 1px solid color-mix(in srgb, var(--border-bright) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 7.2px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-align: center;
  min-width: 58px;
}

.top-bar.top-bar-redesign .top-bar-right {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 9px;
  align-items: stretch;
  align-self: stretch;
}

.top-bar.top-bar-redesign .ohl-box,
.top-bar.top-bar-redesign .session-box {
  min-height: 108px;
  padding: 10px 9px 10px;
}

.top-bar.top-bar-redesign .session-card-stack {
  gap: 7px;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.top-bar.top-bar-redesign .session-mini-box {
  min-height: 40px;
  max-height: 44px;
}

.top-bar.top-bar-redesign .session-box .session-main,
.top-bar.top-bar-redesign .session-box .session-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-bar.top-bar-redesign .session-box .session-main {
  -webkit-line-clamp: 2;
}

.top-bar.top-bar-redesign .session-box .session-sub {
  -webkit-line-clamp: 2;
}

.top-bar.top-bar-redesign .top-actions {
  display: grid;
  gap: 6px;
  min-width: 138px;
  align-content: stretch;
}

.top-bar.top-bar-redesign .top-actions .btn,
.top-bar.top-bar-redesign .top-actions .action-btn {
  min-height: 38px;
  padding: 0 13px;
  gap: 8px;
  font-size: 10px;
}

.top-bar.top-bar-redesign .top-actions .action-btn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.top-bar.top-bar-redesign .top-actions .action-btn-icon svg {
  width: 13px;
  height: 13px;
}

html[data-theme='dark'] .top-bar.top-bar-redesign {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--top-session-accent) 26%, var(--bg-surface) 74%),
    color-mix(in srgb, var(--top-session-accent) 16%, var(--bg-hover) 84%)
  );
  box-shadow:
    0 18px 40px rgba(2, 6, 23, 0.62),
    inset 0 1px 0 rgba(148, 163, 184, 0.14);
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-system-meta,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card {
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.14);
}

@media (max-width: 1400px) {
  .top-bar.top-bar-redesign {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1.45fr);
  }

  .top-system-layout {
    grid-template-columns: minmax(0, 1fr) minmax(196px, 228px);
  }

  .top-bar.top-bar-redesign .price-cluster {
    min-width: 196px;
    max-width: 228px;
  }

  .top-bar.top-bar-redesign .top-bar-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-bar.top-bar-redesign .top-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

@media (max-width: 980px) {
  .main-content > .top-bar.top-bar-redesign {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .top-bar.top-bar-redesign {
    top: 0;
    margin: 0 var(--main-shell-gutter) 12px;
    padding: 10px;
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .top-bar.top-bar-redesign .ohl-box,
  .top-bar.top-bar-redesign .session-box,
  .top-bar.top-bar-redesign .session-mini-box {
    min-height: 0;
    max-height: none;
    height: auto;
  }

  .top-system-layout {
    grid-template-columns: 1fr;
  }

  .top-bar.top-bar-redesign .price-cluster {
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
  }

  .top-bar.top-bar-redesign .top-bar-right {
    grid-template-columns: 1fr;
  }

  .top-bar.top-bar-redesign .top-actions {
    grid-template-columns: 1fr;
  }

  .top-bar.top-bar-redesign > .top-header-lock-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-header-lock-btn,
  .top-header-lock-btn .icon-lock-toggle,
  .top-header-lock-btn .lock-shackle-closed,
  .top-header-lock-btn .lock-shackle-open,
  .top-header-lock-btn::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .top-brand-row {
    gap: 8px;
  }

  .top-bar.top-bar-redesign .top-bar-title {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .top-meta-row {
    font-size: 8px;
    gap: 4px;
  }

  .top-meta-item {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 19px;
    padding: 0 7px;
  }

  .top-live-strip .market-status.market-inline,
  .top-auto-pill {
    min-height: 22px;
    padding: 0 9px;
    font-size: 7px;
  }

  .top-price-signal {
    width: 100%;
  }

  .top-bar.top-bar-redesign .price-value {
    font-size: 18px;
  }
}

.market-status.closed {
  color: #1d4ed8;
  border-color: color-mix(in srgb, #1d4ed8 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, #1d4ed8 12%, transparent);
}

.action-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 42px;
  border-radius: 999px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  color: var(--text-secondary);
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--bg-deep) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease,
    background 0.24s ease;
}

.action-btn::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, color-mix(in srgb, #ffffff 30%, transparent) 48%, transparent 80%);
  transform: translateX(-132%);
  opacity: 0;
  pointer-events: none;
}

.action-btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 22% 38%, color-mix(in srgb, #ffffff 22%, transparent) 0%, transparent 54%),
    radial-gradient(circle at 82% 74%, color-mix(in srgb, #38bdf8 14%, transparent) 0%, transparent 48%);
  opacity: 0.34;
  animation: actionBtnAmbient 8.4s ease-in-out infinite;
  pointer-events: none;
}

.action-btn:hover {
  transform: translateY(-1px);
}

.action-btn:hover::before {
  opacity: 0.85;
  animation: actionBtnSweep 1.1s ease;
}

.action-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--cyan) 34%, transparent),
    0 0 0 5px color-mix(in srgb, var(--cyan) 12%, transparent);
}

.action-btn:active {
  transform: translateY(0);
}

.action-btn-icon {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 56%, transparent);
  background: color-mix(in srgb, #ffffff 70%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent),
    0 2px 8px color-mix(in srgb, var(--bg-deep) 16%, transparent);
}

.action-btn-icon svg {
  width: 15px;
  height: 15px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-btn-label {
  position: relative;
  z-index: 1;
}

.btn-run-forecast.btn-primary.action-btn-run {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #ffffff 80%, var(--bg-surface) 20%),
    color-mix(in srgb, #dbeafe 32%, var(--bg-hover) 68%)
  );
  color: color-mix(in srgb, var(--text-secondary) 86%, #3b82f6 14%);
  box-shadow:
    0 8px 16px color-mix(in srgb, var(--bg-deep) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 34%, transparent);
}

.btn-run-forecast.btn-primary.action-btn-run .action-btn-icon {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, #ffffff 76%, transparent),
    color-mix(in srgb, #a5f3fc 40%, transparent)
  );
}

.btn-run-forecast.btn-primary.action-btn-run .ultron-core {
  fill: color-mix(in srgb, #ffffff 70%, transparent);
  stroke: color-mix(in srgb, var(--cyan) 34%, transparent);
  stroke-width: 0.9;
  opacity: 0.7;
  animation: ultronCorePulse 2.2s ease-in-out infinite;
}

.btn-run-forecast.btn-primary.action-btn-run .ultron-ring {
  transform-origin: 12px 12px;
  stroke-dasharray: 15 8;
  stroke-width: 1.4;
  opacity: 0.88;
  animation: ultronRingSpin 3.9s linear infinite;
}

.btn-run-forecast.btn-primary.action-btn-run .ultron-scan {
  transform-origin: 12px 12px;
  stroke-width: 1.35;
  opacity: 0.84;
  stroke-dasharray: 8 13;
  animation: ultronScanSweep 1.7s ease-in-out infinite;
}

.btn-run-forecast.btn-primary.action-btn-run .ultron-eye {
  fill: color-mix(in srgb, var(--cyan) 78%, #ffffff 22%);
  stroke: color-mix(in srgb, #ffffff 46%, transparent);
  stroke-width: 0.5;
  opacity: 0.94;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cyan) 56%, transparent));
  animation: ultronEyeBlink 2.15s ease-in-out infinite;
}

.btn-run-forecast.btn-primary.action-btn-run .ultron-pulse {
  fill: none;
  stroke: color-mix(in srgb, var(--cyan) 56%, transparent);
  stroke-width: 1;
  opacity: 0;
  transform-origin: 12px 12px;
  animation: ultronPulseRing 2.15s ease-out infinite;
}

.btn-run-forecast.btn-primary.action-btn-run:hover {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-bright) 52%);
  color: color-mix(in srgb, var(--cyan) 74%, var(--text-primary) 26%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #ffffff 92%, var(--bg-surface) 8%),
    color-mix(in srgb, var(--cyan) 10%, var(--bg-hover) 90%)
  );
  box-shadow:
    0 11px 20px color-mix(in srgb, var(--cyan) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent);
}

.btn-run-forecast.btn-primary.action-btn-run:hover .ultron-scan {
  animation-duration: 1.15s;
}

.btn-run-forecast.btn-primary.action-btn-run:hover .ultron-ring {
  animation-duration: 2.65s;
}

.btn-run-forecast.btn-primary.action-btn-run:hover .ultron-eye {
  animation-duration: 1.35s;
}

.btn-run-forecast.btn-primary.action-btn-run:active {
  box-shadow:
    0 6px 12px color-mix(in srgb, var(--cyan) 15%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
}

.btn-run-forecast.btn-primary.action-btn-run.is-guarded {
  cursor: not-allowed;
  opacity: 0.72;
  filter: saturate(0.62) contrast(0.92);
  box-shadow:
    0 6px 12px color-mix(in srgb, var(--bg-deep) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
}

.btn-run-forecast.btn-primary.action-btn-run.is-guarded:hover {
  transform: translateY(0);
  box-shadow:
    0 6px 12px color-mix(in srgb, var(--bg-deep) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
}

.btn-run-forecast.btn-primary.action-btn-run.is-guarded::before {
  opacity: 0;
}

.btn-run-forecast.btn-primary.action-btn-run.is-guarded,
.btn-run-forecast.btn-primary.action-btn-run.is-guarded .ultron-core,
.btn-run-forecast.btn-primary.action-btn-run.is-guarded .ultron-ring,
.btn-run-forecast.btn-primary.action-btn-run.is-guarded .ultron-scan,
.btn-run-forecast.btn-primary.action-btn-run.is-guarded .ultron-eye,
.btn-run-forecast.btn-primary.action-btn-run.is-guarded .ultron-pulse {
  animation-play-state: paused;
}

html[data-theme='dark'] .btn-run-forecast.btn-primary.action-btn-run {
  border-color: color-mix(in srgb, var(--border-bright) 82%, transparent);
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--bg-hover) 92%, #020617 8%),
    color-mix(in srgb, #1e3a8a 18%, var(--bg-surface) 82%)
  );
  color: color-mix(in srgb, var(--text-secondary) 84%, #60a5fa 16%);
  box-shadow:
    0 9px 18px color-mix(in srgb, #020617 56%, transparent),
    inset 0 1px 0 color-mix(in srgb, #cbd5e1 12%, transparent);
}

html[data-theme='dark'] .btn-run-forecast.btn-primary.action-btn-run .action-btn-icon {
  border-color: color-mix(in srgb, #60a5fa 42%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #0f172a 78%, #1d4ed8 22%),
    color-mix(in srgb, #0b1324 86%, transparent)
  );
}

html[data-theme='dark'] .btn-run-forecast.btn-primary.action-btn-run:hover {
  background: linear-gradient(
    148deg,
    color-mix(in srgb, var(--cyan) 20%, #0b1324 80%),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
}

@keyframes actionBtnSweep {
  from { transform: translateX(-132%); }
  to { transform: translateX(132%); }
}

@keyframes actionBtnAmbient {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.28; }
  50% { transform: translate3d(3%, -4%, 0) scale(1.06); opacity: 0.42; }
}

@keyframes ultronRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes runButtonBgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes ultronCorePulse {
  0%, 100% { transform: scale(0.96); opacity: 0.56; }
  50% { transform: scale(1.05); opacity: 0.78; }
}

@keyframes ultronScanSweep {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.72; }
  50% { stroke-dashoffset: -16; opacity: 1; }
}

@keyframes ultronEyeBlink {
  0%, 100% { transform: scale(1, 1); opacity: 0.92; }
  46% { transform: scale(1, 1); opacity: 1; }
  50% { transform: scale(1.02, 0.3); opacity: 0.82; }
  56% { transform: scale(1, 1); opacity: 0.98; }
}

@keyframes ultronPulseRing {
  0% { transform: scale(0.62); opacity: 0.78; }
  100% { transform: scale(1.34); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .action-btn::before,
  .action-btn::after,
  .btn-run-forecast.btn-primary.action-btn-run,
  .btn-run-forecast.btn-primary.action-btn-run .ultron-core,
  .btn-run-forecast.btn-primary.action-btn-run .ultron-ring,
  .btn-run-forecast.btn-primary.action-btn-run .ultron-scan,
  .btn-run-forecast.btn-primary.action-btn-run .ultron-eye,
  .btn-run-forecast.btn-primary.action-btn-run .ultron-pulse,
  .sidebar-session-wrap .market-status.has-svg::after,
  .market-status .market-status-icon .ms-ring,
  .market-status.open .market-status-icon .ms-sun-rays,
  .market-status.open .market-status-icon .ms-core,
  .market-status.premarket .market-status-icon .ms-dawn-core,
  .market-status.aftermarket .market-status-icon .ms-moon,
  .market-status.aftermarket .market-status-icon .ms-star,
  .market-status.closed .market-status-icon .ms-closed-dot {
    animation: none;
  }
}

.top-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  gap: 6px;
  min-width: 134px;
}

.top-actions .btn-run-forecast {
  min-width: 134px;
  width: 100%;
}

.btn-refresh:not(.action-btn-refresh):hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%);
}

.trajx-shell {
  display: grid;
  gap: 12px;
}

.trajx-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.trajx-kpi {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 12px;
  padding: 9px 10px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
}

.trajx-kpi-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.trajx-kpi-value {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}

.trajx-kpi-sub {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.2;
  color: var(--text-secondary);
}

.trajx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trajx-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
}

.trajx-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tone, var(--cyan));
  box-shadow: 0 0 8px color-mix(in srgb, var(--tone, var(--cyan)) 38%, transparent);
}

.trajx-chart-shell {
  position: relative;
  padding: 10px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 14px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 10px 18px color-mix(in srgb, var(--bg-deep) 18%, transparent);
}

.trajx-svg {
  display: block;
  width: 100%;
}

.trajx-svg .trajx-grid-line {
  stroke: color-mix(in srgb, var(--border) 72%, transparent);
  stroke-width: 1;
}

.trajx-svg .trajx-grid-vline {
  stroke: color-mix(in srgb, var(--border-bright) 28%, transparent);
  stroke-width: 1;
}

.trajx-svg .trajx-base-line {
  stroke: color-mix(in srgb, var(--cyan) 64%, transparent);
  stroke-width: 1.3;
  stroke-dasharray: 4 4;
  opacity: 0.7;
}

.trajx-svg .trajx-band-outer {
  opacity: 0.6;
  animation: trajxBandPulse 3.4s ease-in-out infinite;
}

.trajx-svg .trajx-band-core {
  opacity: 0.82;
}

.trajx-svg .trajx-actual {
  fill: none;
  stroke: color-mix(in srgb, var(--cyan) 86%, #ffffff 14%);
  stroke-width: 1.9;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  animation: trajxActualFlow 2.4s linear infinite;
}

.trajx-svg .trajx-median-shadow {
  fill: none;
  stroke: color-mix(in srgb, var(--traj-tone) 38%, transparent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.42;
  filter: blur(1.5px);
}

.trajx-svg .trajx-median {
  fill: none;
  stroke: var(--traj-tone);
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--traj-len);
  stroke-dashoffset: var(--traj-len);
  animation: trajxPathDraw 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.trajx-svg .trajx-median-flow {
  fill: none;
  stroke: color-mix(in srgb, var(--traj-tone) 74%, #ffffff 26%);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 11 13;
  animation: trajxFlowSlide 2.8s linear infinite;
  opacity: 0.94;
}

.trajx-svg .trajx-range-stem {
  stroke: color-mix(in srgb, var(--tone) 64%, var(--border-bright) 36%);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.82;
}

.trajx-svg .trajx-range-cap {
  stroke: color-mix(in srgb, var(--tone) 84%, #ffffff 16%);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.trajx-svg .trajx-focus-line {
  stroke: color-mix(in srgb, var(--traj-tone) 58%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  opacity: 0.85;
}

.trajx-svg .trajx-node {
  cursor: pointer;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.trajx-svg .trajx-node:hover {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tone) 36%, transparent));
}

.trajx-svg .trajx-node-core {
  stroke: color-mix(in srgb, #ffffff 74%, transparent);
  stroke-width: 1.5;
  transition: stroke-width 0.18s ease, filter 0.18s ease;
}

.trajx-svg .trajx-node.active .trajx-node-core {
  stroke-width: 2.3;
  transform-box: fill-box;
  transform-origin: center;
  animation: trajxSelectedDotPulse 1.15s ease-in-out infinite;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--tone) 54%, transparent));
}

.trajx-axis-label {
  fill: var(--text-secondary);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
}

.trajx-note-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
}

.trajx-day-rail {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.trajx-day-btn {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--text-muted) 10%, var(--bg-surface) 90%),
    color-mix(in srgb, var(--text-muted) 7%, var(--bg-hover) 93%)
  );
  padding: 6px 6px 7px;
  min-height: 46px;
  color: var(--text-secondary);
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.trajx-day-btn.active {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #ffffff 92%, var(--bg-surface) 8%),
    color-mix(in srgb, #ffffff 78%, var(--bg-hover) 22%)
  );
  border-color: color-mix(in srgb, #ffffff 54%, var(--border-bright) 46%);
  box-shadow:
    0 8px 16px color-mix(in srgb, #ffffff 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 84%, transparent);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.trajx-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.trajx-day-id {
  font-size: 9px;
  color: var(--text-primary);
  letter-spacing: 0.09em;
}

.trajx-day-name {
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.09em;
}

.trajx-day-move {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.trajectory-point-detail {
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--bg-surface) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 86%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
}

.trajx-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: 10px;
}

.trajx-detail-head {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--cyan);
}

.trajx-detail-main-val {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
}

.trajx-detail-main-sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.trajx-chip-row {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trajx-chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-secondary);
}

.trajx-detail-side {
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  border-radius: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
}

.trajx-detail-side-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.trajx-detail-side-val {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold);
  font-weight: 700;
}

.trajx-detail-side-sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.3;
}

.trajx-flow-grid {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 12px;
  padding: 9px;
  background: color-mix(in srgb, var(--bg-hover) 65%, transparent);
}

.trajx-flow-head {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.09em;
  margin-bottom: 7px;
}

.trajx-flow-row {
  display: grid;
  grid-template-columns: minmax(56px, auto) minmax(0, 1fr) minmax(92px, auto);
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.trajx-flow-row:last-child {
  margin-bottom: 0;
}

.trajx-flow-left {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.trajx-flow-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-bright) 48%, transparent);
  overflow: hidden;
}

.trajx-flow-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: var(--tone, var(--cyan));
}

.trajx-flow-right {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
  text-align: right;
}

@keyframes trajxPathDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes trajxFlowSlide {
  to { stroke-dashoffset: -96; }
}

@keyframes trajxActualFlow {
  to { stroke-dashoffset: -36; }
}

@keyframes trajxBandPulse {
  0%, 100% { opacity: 0.46; }
  50% { opacity: 0.72; }
}

@keyframes trajxSelectedDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.28); opacity: 0.9; }
}

/* ===== TRAJECTORY REDESIGN ===== */
.trajneo-shell {
  display: grid;
  gap: 12px;
}

.trajneo-headline {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 20%, transparent),
    0 10px 20px color-mix(in srgb, var(--bg-deep) 16%, transparent);
}

.trajneo-head-kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.trajneo-head-title {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.trajneo-head-sub {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.trajneo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.trajneo-kpi-card {
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 12px;
  padding: 9px 10px;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--bg-surface) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
}

.trajneo-kpi-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.trajneo-kpi-value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.trajneo-kpi-sub {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
}

.trajneo-stage {
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  border-radius: 15px;
  padding: 10px;
  background: linear-gradient(
    158deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent),
    0 10px 20px color-mix(in srgb, var(--bg-deep) 17%, transparent);
}

.trajneo-stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.trajneo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trajneo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 999px;
  padding: 0 8px;
  min-height: 20px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
}

.trajneo-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tone, var(--cyan));
  box-shadow: 0 0 8px color-mix(in srgb, var(--tone, var(--cyan)) 36%, transparent);
}

.trajneo-focus-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.trajneo-chart-wrap {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 14px;
  padding: 8px;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-surface) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
  overflow: hidden;
}

.trajneo-svg {
  display: block;
  width: 100%;
}

.trajneo-svg .trajneo-grid-h {
  stroke: color-mix(in srgb, var(--border) 72%, transparent);
  stroke-width: 1;
}

.trajneo-svg .trajneo-grid-v {
  stroke: color-mix(in srgb, var(--border-bright) 32%, transparent);
  stroke-width: 1;
}

.trajneo-svg .trajneo-axis-text {
  fill: var(--text-secondary);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
}

.trajneo-svg .trajneo-base-line {
  stroke: color-mix(in srgb, var(--cyan) 58%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
  opacity: 0.72;
}

.trajneo-svg .trajneo-band.outer {
  opacity: 0.54;
  animation: trajneoBandBreathe 4s ease-in-out infinite;
}

.trajneo-svg .trajneo-band.core {
  opacity: 0.82;
}

.trajneo-svg .trajneo-live-path {
  fill: none;
  stroke: color-mix(in srgb, var(--cyan) 86%, #ffffff 14%);
  stroke-width: 1.8;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: trajneoLiveFlow 2.4s linear infinite;
}

.trajneo-svg .trajneo-mid-shadow {
  fill: none;
  stroke: color-mix(in srgb, var(--neo-tone) 40%, transparent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.42;
  filter: blur(1.4px);
}

.trajneo-svg .trajneo-mid-path {
  fill: none;
  stroke: var(--neo-tone);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--neo-line-len);
  stroke-dashoffset: var(--neo-line-len);
  animation: trajneoPathDraw 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.trajneo-svg .trajneo-mid-rider {
  fill: none;
  stroke: color-mix(in srgb, var(--neo-tone) 70%, #ffffff 30%);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 12;
  animation: trajneoDashFlow 2.6s linear infinite;
  opacity: 0.92;
}

.trajneo-svg .trajneo-scan-beam {
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
}

.trajneo-svg .trajneo-focus-line {
  stroke: color-mix(in srgb, var(--neo-tone) 58%, transparent);
  stroke-width: 1.1;
  stroke-dasharray: 4 5;
}

.trajneo-svg .trajneo-focus-range {
  stroke: color-mix(in srgb, var(--tone, var(--neo-tone)) 62%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}

.trajneo-svg .trajneo-focus-halo {
  fill: color-mix(in srgb, var(--tone, var(--neo-tone)) 22%, transparent);
  stroke: color-mix(in srgb, var(--tone, var(--neo-tone)) 74%, #ffffff 26%);
  stroke-width: 1.3;
}

.trajneo-svg .trajneo-focus-dot {
  stroke: color-mix(in srgb, #ffffff 78%, transparent);
  stroke-width: 1.7;
}

.trajneo-svg .trajneo-node {
  cursor: pointer;
}

.trajneo-svg .trajneo-node .core {
  stroke: color-mix(in srgb, #ffffff 74%, transparent);
  stroke-width: 1.5;
  transition: transform 0.2s ease, filter 0.2s ease, stroke-width 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.trajneo-svg .trajneo-node .range-stem {
  stroke: color-mix(in srgb, var(--tone) 66%, var(--border-bright) 34%);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.82;
}

.trajneo-svg .trajneo-node .range-cap {
  stroke: color-mix(in srgb, var(--tone) 84%, #ffffff 16%);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.trajneo-svg .trajneo-node .halo {
  fill: color-mix(in srgb, var(--tone) 15%, transparent);
  stroke: color-mix(in srgb, var(--tone) 56%, transparent);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.trajneo-svg .trajneo-node:hover .core {
  transform: scale(1.12);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tone) 44%, transparent));
}

.trajneo-svg .trajneo-node:hover .halo {
  opacity: 0.52;
}

.trajneo-svg .trajneo-node.is-active .core {
  transform: scale(1.18);
  stroke-width: 2.1;
  animation: trajneoNodePulse 1.25s ease-in-out infinite;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tone) 54%, transparent));
}

.trajneo-svg .trajneo-node.is-active .halo {
  opacity: 0.8;
}

.trajneo-stage-note {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
}

.trajneo-day-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.trajneo-day-btn {
  --trajneo-day-tone: var(--gold);
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(120% 110% at 10% 0%, color-mix(in srgb, var(--trajneo-day-tone) 10%, transparent), transparent 64%),
    linear-gradient(165deg, color-mix(in srgb, #ffffff 96%, transparent), color-mix(in srgb, var(--bg-surface) 98%, transparent));
  min-height: 220px;
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transform: scale(0.96);
  opacity: 0.86;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent);
  transition: transform 260ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.trajneo-day-btn.bull { --trajneo-day-tone: var(--green); }
.trajneo-day-btn.bear { --trajneo-day-tone: var(--red); }
.trajneo-day-btn.neutral { --trajneo-day-tone: var(--gold); }

.trajneo-day-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-muted);
}

.trajneo-day-date {
  margin-top: 3px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-secondary);
}

.trajneo-day-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--trajneo-day-tone) 30%, var(--border-bright) 70%);
  background: color-mix(in srgb, var(--trajneo-day-tone) 10%, var(--bg-surface) 90%);
  color: color-mix(in srgb, var(--trajneo-day-tone) 90%, var(--text-secondary) 10%);
}

.trajneo-day-icon span {
  line-height: 1;
}

.trajneo-day-btn.is-active {
  transform: scale(1);
  opacity: 1;
  border-color: color-mix(in srgb, var(--trajneo-day-tone) 56%, var(--border-bright) 44%);
  box-shadow:
    0 16px 28px color-mix(in srgb, var(--trajneo-day-tone) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 74%, transparent);
}

.trajneo-day-top {
  display: none;
}

.trajneo-day-divider {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, #d7dfeb 90%, transparent);
}

.trajneo-day-id {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--text-primary) 90%, #293347 10%);
}

.trajneo-day-name {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-secondary) 72%, #8b9db6 28%);
}

.trajneo-day-price {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.trajneo-day-price.bull,
.trajneo-day-move.bull {
  color: var(--green);
}

.trajneo-day-price.bear,
.trajneo-day-move.bear {
  color: var(--red);
}

.trajneo-day-price.neutral,
.trajneo-day-move.neutral {
  color: var(--gold);
}

.trajneo-day-move {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
}

.trajneo-day-conf-track {
  width: 100%;
  margin-top: 10px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
}

.trajneo-day-conf-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 520ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.trajneo-day-conf-fill.bull {
  background-color: var(--green);
}

.trajneo-day-conf-fill.bear {
  background-color: var(--red);
}

.trajneo-day-conf-fill.neutral {
  background-color: var(--gold);
}

.trajneo-day-conf {
  margin-top: 7px;
  margin-bottom: 11px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-muted);
}

.trajneo-day-rec {
  margin-top: auto;
  min-height: 22px;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
}

.trajneo-day-selected-ring {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 2px solid color-mix(in srgb, var(--trajneo-day-tone) 28%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.trajneo-day-btn.is-active .trajneo-day-selected-ring {
  opacity: 1;
}

.trajectory-point-detail.trajneo-detail-card {
  margin-top: 0;
  border: 1px solid color-mix(in srgb, #c8d3e3 56%, var(--border-bright) 44%);
  border-radius: 24px;
  padding: 18px 20px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
}

.trajneo-focusday-shell,
.trajneo-focusday-shell * {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.trajneo-focusday-shell {
  display: grid;
  gap: 18px;
}

.trajneo-focusday-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.trajneo-focusday-kicker {
  grid-column: 2;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--cyan) 56%, #6f8aa8 44%);
}

.trajneo-focusday-lean {
  grid-column: 3;
  justify-self: end;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}

.trajneo-focusday-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.92fr);
  gap: 22px;
  align-items: stretch;
}

.trajneo-focusday-main {
  display: grid;
  gap: 20px;
  padding: clamp(18px, 2.4vw, 30px) clamp(12px, 2.2vw, 30px);
  align-content: center;
  justify-items: center;
  text-align: center;
}

.trajneo-focusday-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 24px);
  width: min(100%, 980px);
  margin-inline: auto;
  justify-items: center;
}

.trajneo-focusday-metric {
  width: 100%;
  max-width: 210px;
}

.trajneo-focusday-metric .label {
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-secondary) 72%, #8192ab 28%);
}

.trajneo-focusday-metric .value {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: color-mix(in srgb, var(--text-primary) 88%, #273246 12%);
}

.trajneo-focusday-prob {
  display: grid;
  gap: 9px;
  width: min(100%, 980px);
  margin-inline: auto;
}

.trajneo-focusday-prob-head {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-secondary) 74%, #8799b0 26%);
}

.trajneo-focusday-prob-track {
  width: 100%;
  margin-inline: auto;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: color-mix(in srgb, #c8d3e4 74%, transparent);
}

.trajneo-focusday-prob-seg.bull {
  background: color-mix(in srgb, var(--green) 82%, #0ea56f 18%);
}

.trajneo-focusday-prob-seg.neutral {
  background: color-mix(in srgb, var(--text-muted) 70%, #a4b4c9 30%);
}

.trajneo-focusday-prob-seg.bear {
  background: color-mix(in srgb, var(--red) 82%, #f43f5e 18%);
}

.trajneo-focusday-prob-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
  margin-inline: auto;
}

.trajneo-focusday-prob-left,
.trajneo-focusday-prob-right {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text-secondary) 84%, #5d6d84 16%);
}

.trajneo-focusday-prob-left strong,
.trajneo-focusday-prob-right strong {
  font-weight: 800;
  color: color-mix(in srgb, var(--text-primary) 90%, #2a3448 10%);
}

.trajneo-focusday-option {
  border: 1px solid color-mix(in srgb, #d1dae8 70%, var(--border-bright) 30%);
  border-radius: 18px;
  padding: 14px 16px;
  background: color-mix(in srgb, #edf2f8 85%, var(--bg-hover) 15%);
  display: grid;
  gap: 12px;
}

.trajneo-focusday-option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, #d0dae9 72%, transparent);
}

.trajneo-focusday-option-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-secondary) 74%, #8192ab 26%);
}

.trajneo-focusday-option-main {
  font-size: 17px;
  font-weight: 800;
  color: color-mix(in srgb, var(--text-primary) 90%, #212b3d 10%);
}

.trajneo-focusday-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.trajneo-focusday-option-item .label {
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-secondary) 74%, #8294ad 26%);
}

.trajneo-focusday-option-item .value {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  color: color-mix(in srgb, var(--text-primary) 90%, #273246 10%);
}

@media (max-width: 1100px) {
  .trajneo-focusday-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .trajneo-focusday-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .trajneo-focusday-kicker,
  .trajneo-focusday-lean {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }
  .trajneo-focusday-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .trajneo-focusday-option-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.trajneo-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.trajneo-detail-kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.trajneo-detail-direction {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.trajneo-detail-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: 10px;
}

.trajneo-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.trajneo-metric {
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  border-radius: 10px;
  padding: 7px;
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
}

.trajneo-metric .label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}

.trajneo-metric .value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 700;
}

.trajneo-prob-block {
  margin-top: 9px;
}

.trajneo-prob-head {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.trajneo-prob-track {
  margin-top: 5px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: color-mix(in srgb, var(--border-bright) 46%, transparent);
}

.trajneo-prob-seg.bull {
  background: color-mix(in srgb, var(--green) 82%, transparent);
}

.trajneo-prob-seg.neutral {
  background: color-mix(in srgb, var(--gold) 76%, transparent);
}

.trajneo-prob-seg.bear {
  background: color-mix(in srgb, var(--red) 82%, transparent);
}

.trajneo-prob-labels {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
}

.trajneo-option-card {
  border: 1px solid color-mix(in srgb, var(--border-bright) 65%, transparent);
  border-radius: 11px;
  padding: 8px;
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
}

.trajneo-option-head {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.trajneo-option-value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold);
  font-weight: 700;
}

.trajneo-option-grid {
  margin-top: 7px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trajneo-option-cell {
  border: 1px solid color-mix(in srgb, var(--border-bright) 55%, transparent);
  border-radius: 9px;
  padding: 6px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.trajneo-option-cell .label {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-muted);
}

.trajneo-option-cell .value {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-primary);
}

.trajneo-flow-card {
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 32px;
  padding: 24px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.trajneo-flow-card,
.trajneo-flow-card * {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.trajneo-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.trajneo-flow-head-copy {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.trajneo-flow-title-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #4f46e5;
  flex-shrink: 0;
}

.trajneo-flow-title-icon svg,
.trajneo-flow-columns-icon svg,
.trajneo-flow-dir-icon svg,
.trajneo-flow-metric-mobile-icon svg {
  display: block;
}

.trajneo-flow-title-icon svg {
  width: 18px;
  height: 18px;
}

.trajneo-flow-title {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  color: #1e293b;
}

.trajneo-flow-legend {
  display: inline-flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.trajneo-flow-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.trajneo-flow-legend-item i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--tone, var(--cyan));
  display: block;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.trajneo-flow-columns {
  display: none;
}

.trajneo-flow-columns-label {
  width: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}

.trajneo-flow-columns-label.is-right {
  width: auto;
}

.trajneo-flow-columns-metrics {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.trajneo-flow-metric-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trajneo-flow-columns-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
}

.trajneo-flow-columns-icon svg {
  width: 14px;
  height: 14px;
}

.trajneo-flow-list {
  display: grid;
  gap: 12px;
}

.trajneo-flow-row {
  display: grid;
  grid-template-columns: minmax(168px, auto) minmax(0, 1fr) minmax(116px, auto);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 24px;
  background: rgba(248, 250, 252, 0.72);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.trajneo-flow-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.trajneo-flow-dayline {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.trajneo-flow-date {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #0f172a;
}

.trajneo-flow-day {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
}

.trajneo-flow-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.trajneo-flow-dir-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trajneo-flow-dir-icon svg {
  width: 14px;
  height: 14px;
}

.trajneo-flow-dir.is-bull {
  background: rgba(236, 253, 245, 0.88);
  border-color: rgba(16, 185, 129, 0.18);
  color: #059669;
}

.trajneo-flow-dir.is-bear {
  background: rgba(255, 241, 242, 0.88);
  border-color: rgba(244, 63, 94, 0.16);
  color: #e11d48;
}

.trajneo-flow-dir.is-neutral {
  background: rgba(255, 251, 235, 0.9);
  border-color: rgba(245, 158, 11, 0.2);
  color: #d97706;
}

.trajneo-flow-meters {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.trajneo-flow-metric {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.trajneo-flow-metric-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.trajneo-flow-metric-mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  flex: 0 0 auto;
}

.trajneo-flow-metric-mobile-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
}

.trajneo-flow-metric-mobile-icon svg {
  width: 16px;
  height: 16px;
}

.trajneo-flow-metric-mobile-label {
  width: 72px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.trajneo-flow-metric-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.trajneo-flow-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.64);
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(148, 163, 184, 0.18);
}

.trajneo-flow-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tone, var(--cyan));
  width: var(--w, 50%);
  transition: width 0.7s ease;
}

.trajneo-risk-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.64);
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(148, 163, 184, 0.18);
}

.trajneo-risk-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  width: var(--w, 35%);
  transition: width 0.7s ease;
}

.trajneo-risk-fill.is-calm {
  background: #34d399;
}

.trajneo-risk-fill.is-high {
  background: #f43f5e;
}

.trajneo-flow-metric-value {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  min-width: 56px;
  text-align: right;
  color: #475569;
}

.trajneo-flow-metric-value.is-slate {
  color: #475569;
}

.trajneo-flow-right {
  position: relative;
  display: grid;
  gap: 8px;
}

.trajneo-flow-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trajneo-flow-stat-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
}

.trajneo-flow-stat-value {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

@keyframes trajneoPathDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes trajneoDashFlow {
  to { stroke-dashoffset: -92; }
}

@keyframes trajneoLiveFlow {
  to { stroke-dashoffset: -36; }
}

@keyframes trajneoBandBreathe {
  0%, 100% { opacity: 0.52; }
  50% { opacity: 0.74; }
}

@keyframes trajneoNodePulse {
  0%, 100% { transform: scale(1.18); }
  50% { transform: scale(1.32); }
}

@media (max-width: 1280px) {
  .trajneo-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .trajneo-stage-top { flex-direction: column; align-items: flex-start; }
  .trajneo-focus-meta { white-space: normal; }
  .trajneo-detail-grid { grid-template-columns: 1fr; }
  .trajneo-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .trajneo-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trajneo-day-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .trajneo-day-btn {
    min-width: 168px;
    min-height: 220px;
    padding: 16px 14px 18px;
    flex: 0 0 auto;
  }
  .trajneo-day-price {
    font-size: 22px;
  }
  .trajneo-flow-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }
  .trajneo-flow-card {
    padding: 18px 16px;
    border-radius: 24px;
  }
  .trajneo-flow-head {
    margin-bottom: 16px;
    gap: 14px;
  }
  .trajneo-flow-title {
    font-size: 13px;
  }
  .trajneo-flow-legend {
    gap: 12px 18px;
  }
  .trajneo-flow-legend-item {
    font-size: 10px;
  }
  .trajneo-flow-left {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .trajneo-flow-metric {
    padding: 9px 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
  }
  .trajneo-flow-date {
    font-size: 14px;
  }
  .trajneo-flow-day {
    font-size: 10px;
  }
  .trajneo-flow-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border-top: 1px solid rgba(226, 232, 240, 0.85);
    padding-top: 12px;
  }
  .trajneo-flow-stat {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
  }
}

@media (min-width: 761px) {
  .trajneo-flow-columns {
    display: grid;
    grid-template-columns: minmax(168px, auto) minmax(0, 1fr) minmax(116px, auto);
    gap: 18px;
    align-items: start;
    margin-bottom: 12px;
    padding: 0 20px;
  }

  .trajneo-flow-columns-metrics {
    gap: 18px;
  }

  .trajneo-flow-columns-label,
  .trajneo-flow-metric-head {
    min-width: 0;
  }

  .trajneo-flow-columns-label.is-right {
    justify-self: start;
  }

  .trajneo-flow-metric-mobile {
    display: none;
  }

  .trajneo-flow-right {
    padding-left: 18px;
    border-left: 1px solid rgba(226, 232, 240, 0.88);
  }
}

/* ===== TRAJECTORY REFINEMENT (dashboard 7-day price trajectory) ===== */
.trajneo-shell {
  gap: 14px;
}

.trajneo-headline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
  gap: 12px;
  border-radius: 16px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    radial-gradient(120% 140% at 5% 5%, color-mix(in srgb, var(--cyan) 14%, transparent), transparent 58%),
    radial-gradient(120% 140% at 95% 0%, color-mix(in srgb, var(--trajneo-tone, var(--cyan)) 15%, transparent), transparent 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--bg-surface) 97%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  overflow: hidden;
}

.trajneo-headline::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
  pointer-events: none;
}

.trajneo-headline-main {
  min-width: 0;
}

.trajneo-headline-side {
  display: grid;
  gap: 10px;
  align-content: start;
}

.trajneo-signal-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--tone, var(--cyan)) 36%, var(--border-bright) 64%);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tone, var(--cyan)) 11%, var(--bg-surface) 89%),
    color-mix(in srgb, var(--tone, var(--cyan)) 6%, var(--bg-hover) 94%)
  );
  box-shadow: 0 8px 18px color-mix(in srgb, var(--tone, var(--cyan)) 12%, transparent);
}

.trajneo-signal-pill span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.trajneo-signal-pill strong {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
}

.trajneo-head-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.trajneo-head-stat {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
}

.trajneo-head-stat.trajneo-priority-stat {
  border-color: color-mix(in srgb, var(--tone, var(--border-bright)) 34%, var(--border-bright) 66%);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tone, var(--cyan)) 8%, var(--bg-surface) 92%),
    color-mix(in srgb, var(--tone, var(--cyan)) 4%, var(--bg-hover) 96%)
  );
}

.trajneo-head-stat span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.trajneo-head-stat strong {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-primary);
  line-height: 1.35;
}

.trajneo-priority-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #000 !important;
}

.trajneo-priority-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--tone, #000) !important;
}

.trajneo-head-title {
  font-size: 15px;
  letter-spacing: 0.035em;
}

.trajneo-head-sub {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.45;
  max-width: 72ch;
}

.trajneo-kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
    0 8px 18px color-mix(in srgb, var(--bg-deep) 10%, transparent);
}

.trajneo-kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--trajneo-tone, var(--cyan)) 14%, transparent), color-mix(in srgb, var(--trajneo-tone, var(--cyan)) 74%, transparent), color-mix(in srgb, var(--cyan) 22%, transparent));
  opacity: 0.9;
}

.trajneo-stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 60%),
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--trend-tone, var(--cyan)) 12%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 97%, transparent), color-mix(in srgb, var(--bg-hover) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent),
    0 14px 28px color-mix(in srgb, var(--bg-deep) 16%, transparent);
}

.trajneo-stage-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.trajneo-aura {
  position: absolute;
  border-radius: 999px;
  filter: blur(16px);
  opacity: 0.18;
  animation: trajneoAuraFloat 12s ease-in-out infinite;
}

.trajneo-aura.orb-a {
  width: 180px;
  height: 180px;
  top: -36px;
  left: -24px;
  background: color-mix(in srgb, var(--cyan) 65%, transparent);
}

.trajneo-aura.orb-b {
  width: 220px;
  height: 220px;
  top: 14%;
  right: -58px;
  background: color-mix(in srgb, var(--focus-tone, var(--cyan)) 50%, transparent);
  animation-delay: -4s;
}

.trajneo-aura.orb-c {
  width: 160px;
  height: 160px;
  bottom: -54px;
  left: 30%;
  background: color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 42%, transparent);
  animation-delay: -8s;
}

.trajneo-stage-top,
.trajneo-focus-card,
.trajneo-chart-wrap,
.trajneo-stage-note {
  position: relative;
  z-index: 1;
}

.trajneo-legend-item {
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
  backdrop-filter: blur(3px);
}

.trajneo-focus-meta {
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
}

.trajneo-focus-card {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--tone, var(--cyan)) 28%, var(--border-bright) 72%);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tone, var(--cyan)) 7%, var(--bg-surface) 93%), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 20%, transparent),
    0 12px 22px color-mix(in srgb, var(--tone, var(--cyan)) 10%, transparent);
}

.trajneo-focus-card-main {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.trajneo-focus-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.trajneo-focus-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.trajneo-focus-title {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 700;
}

.trajneo-focus-direction-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone, var(--cyan)) 38%, transparent);
  background: color-mix(in srgb, var(--tone, var(--cyan)) 10%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.09em;
  font-weight: 700;
}

.trajneo-focus-price {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 0 14px color-mix(in srgb, var(--tone, var(--cyan)) 16%, transparent);
}

.trajneo-focus-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.trajneo-focus-stat {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 60%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  min-height: 44px;
}

.trajneo-focus-stat span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.trajneo-focus-stat strong {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-primary);
}

.trajneo-chart-wrap {
  position: relative;
  padding: 8px;
  border-radius: 15px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-surface) 97%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 12px 26px color-mix(in srgb, var(--bg-deep) 16%, transparent);
}

.trajneo-chart-ambient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.trajneo-chart-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.2;
}

.trajneo-chart-glow.is-primary {
  width: 220px;
  height: 120px;
  top: 38px;
  left: 16%;
  background: color-mix(in srgb, var(--trajneo-tone, var(--cyan)) 48%, transparent);
  animation: trajneoAuraFloat 10s ease-in-out infinite;
}

.trajneo-chart-glow.is-secondary {
  width: 180px;
  height: 100px;
  top: 76px;
  right: 14%;
  background: color-mix(in srgb, var(--cyan) 42%, transparent);
  animation: trajneoAuraFloat 11s ease-in-out infinite reverse;
}

.trajneo-chart-grid-sheen {
  position: absolute;
  inset: 44px 0 10px;
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-120%);
  animation: trajneoSheenSweep 8.8s ease-in-out infinite;
}

.trajneo-chart-toolbar {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  padding: 4px 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.trajneo-chart-toolbar-left,
.trajneo-chart-toolbar-right {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.trajneo-chart-chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 56%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
}

.trajneo-chart-chip.is-live {
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, var(--cyan) 8%, var(--bg-hover) 92%);
  color: color-mix(in srgb, var(--cyan) 76%, var(--text-secondary) 24%);
}

.trajneo-chart-toolbar-label {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.trajneo-svg {
  position: relative;
  z-index: 1;
}

.trajneo-svg .trajneo-grid-h {
  stroke: color-mix(in srgb, var(--border) 62%, transparent);
  stroke-dasharray: 2 6;
}

.trajneo-svg .trajneo-grid-v {
  stroke: color-mix(in srgb, var(--border-bright) 26%, transparent);
  stroke-dasharray: 2 7;
}

.trajneo-svg .trajneo-axis-text {
  font-size: 7.5px;
  opacity: 0.95;
}

.trajneo-svg .trajneo-base-line {
  stroke-width: 1.3;
  stroke-dasharray: 5 6;
}

.trajneo-svg .trajneo-now-line {
  stroke: color-mix(in srgb, var(--text-primary) 24%, transparent);
  stroke-width: 1.1;
  stroke-dasharray: 3 6;
  opacity: 0.7;
}

.trajneo-svg .trajneo-plot-backdrop {
  opacity: 0.95;
}

.trajneo-svg .trajneo-history-zone {
  fill: color-mix(in srgb, var(--cyan) 4%, transparent);
  opacity: 0.85;
}

.trajneo-svg .trajneo-forecast-zone {
  opacity: 0.95;
}

.trajneo-svg .trajneo-forecast-zone-edge {
  stroke: color-mix(in srgb, var(--cyan) 30%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  opacity: 0.9;
}

.trajneo-svg .trajneo-plot-frame {
  fill: none;
  stroke: color-mix(in srgb, #ffffff 28%, var(--border-bright) 72%);
  stroke-width: 1;
  opacity: 0.95;
}

.trajneo-svg .trajneo-band.outer {
  opacity: 0.58;
}

.trajneo-svg .trajneo-band.core {
  opacity: 0.9;
}

.trajneo-svg .trajneo-live-path-shadow {
  fill: none;
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.22;
  filter: blur(2.4px);
}

.trajneo-svg .trajneo-live-path {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cyan) 20%, transparent));
}

.trajneo-svg .trajneo-mid-shadow {
  stroke-width: 10px;
  opacity: 0.36;
  filter: blur(2px);
}

.trajneo-svg .trajneo-mid-underglow {
  fill: none;
  stroke: color-mix(in srgb, var(--neo-tone) 18%, transparent);
  stroke-width: 15px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(4px);
  opacity: 0.8;
}

.trajneo-svg .trajneo-mid-path {
  stroke-width: 3.2;
}

.trajneo-svg .trajneo-mid-hotline {
  fill: none;
  stroke: color-mix(in srgb, #ffffff 72%, transparent);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.78;
}

.trajneo-svg .trajneo-mid-rider {
  stroke-width: 1.15;
  stroke-dasharray: 9 12;
}

.trajneo-svg .trajneo-scan-beam {
  opacity: 0.25;
}

.trajneo-svg .trajneo-focus-line {
  stroke-dasharray: 4 6;
  animation: trajneoFocusLineDrift 2.8s linear infinite;
}

.trajneo-svg .trajneo-focus-spot {
  fill: color-mix(in srgb, var(--tone, var(--neo-tone)) 12%, transparent);
  stroke: color-mix(in srgb, var(--tone, var(--neo-tone)) 12%, transparent);
  stroke-width: 1;
  opacity: 0.9;
  filter: blur(5px);
  pointer-events: none;
}

.trajneo-svg .trajneo-focus-range {
  stroke-width: 2.2;
}

.trajneo-svg .trajneo-focus-halo {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tone, var(--neo-tone)) 22%, transparent));
}

.trajneo-svg .trajneo-end-halo {
  fill: color-mix(in srgb, var(--tone, var(--neo-tone)) 12%, transparent);
  stroke: color-mix(in srgb, var(--tone, var(--neo-tone)) 32%, transparent);
  stroke-width: 1;
  opacity: 0.8;
  transform-origin: center;
  transform-box: fill-box;
  animation: trajneoEndpointPulse 1.8s ease-in-out infinite;
}

.trajneo-svg .trajneo-end-core {
  fill: color-mix(in srgb, var(--tone, var(--neo-tone)) 88%, #ffffff 12%);
  stroke: color-mix(in srgb, #ffffff 66%, transparent);
  stroke-width: 1.4;
}

.trajneo-svg .trajneo-node .range-stem {
  stroke-width: 1.5;
  opacity: 0.9;
}

.trajneo-svg .trajneo-node .halo {
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform-origin: center;
  transform-box: fill-box;
}

.trajneo-svg .trajneo-node:hover .halo {
  transform: scale(1.12);
}

.trajneo-stage-note {
  margin-top: 9px;
  gap: 7px;
  justify-content: flex-start;
}

.trajneo-stage-note-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 75%, transparent);
}

.trajneo-day-strip {
  gap: 12px;
}

.trajneo-day-btn {
  position: relative;
  overflow: visible;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    box-shadow 0.24s ease;
}

.trajneo-day-btn::before {
  display: none;
}

.trajneo-day-btn::after {
  display: none;
}

.trajneo-day-btn.is-active {
  transform: scale(1);
  opacity: 1;
  border-color: color-mix(in srgb, var(--trajneo-day-tone) 56%, var(--border-bright) 44%);
  box-shadow:
    0 16px 28px color-mix(in srgb, var(--trajneo-day-tone) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 74%, transparent);
}

.trajectory-point-detail.trajneo-detail-card,
.trajneo-flow-card {
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 8px 16px color-mix(in srgb, var(--bg-deep) 8%, transparent);
}

.trajneo-flow-row {
  transition: none;
}

.trajneo-flow-row:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme='dark'] .trajneo-chart-wrap {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--bg-surface) 91%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 14px 28px color-mix(in srgb, #000000 30%, transparent);
}

html[data-theme='dark'] .trajneo-chart-grid-sheen {
  background:
    linear-gradient(
      112deg,
      rgba(255,255,255,0) 38%,
      color-mix(in srgb, var(--cyan) 14%, transparent) 50%,
      rgba(255,255,255,0) 62%
    );
  opacity: 0.75;
}

html[data-theme='dark'] .trajneo-chart-chip {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] .trajneo-chart-chip.is-live {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-bright) 52%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-hover) 88%);
  color: color-mix(in srgb, var(--cyan) 84%, var(--text-primary) 16%);
}

html[data-theme='dark'] .trajneo-chart-toolbar-label {
  color: color-mix(in srgb, var(--text-muted) 72%, #cbd5e1 28%);
}

html[data-theme='dark'] .trajneo-svg .trajneo-axis-text {
  fill: color-mix(in srgb, var(--text-muted) 68%, #dbeafe 32%);
  opacity: 0.95;
}

html[data-theme='dark'] .trajneo-svg .trajneo-grid-h {
  stroke: color-mix(in srgb, var(--border-bright) 24%, transparent);
}

html[data-theme='dark'] .trajneo-svg .trajneo-grid-v {
  stroke: color-mix(in srgb, var(--border-bright) 18%, transparent);
}

html[data-theme='dark'] .trajneo-svg .trajneo-base-line {
  stroke: color-mix(in srgb, var(--text-primary) 20%, transparent);
  opacity: 0.62;
}

html[data-theme='dark'] .trajneo-svg .trajneo-now-line {
  stroke: color-mix(in srgb, var(--cyan) 34%, transparent);
  opacity: 0.78;
}

html[data-theme='dark'] .trajneo-svg .trajneo-plot-backdrop {
  fill: rgba(12, 23, 42, 0.88);
  opacity: 0.96;
}

html[data-theme='dark'] .trajneo-svg .trajneo-history-zone {
  fill: color-mix(in srgb, var(--cyan) 8%, transparent);
  opacity: 0.5;
}

html[data-theme='dark'] .trajneo-svg .trajneo-forecast-zone {
  opacity: 0.68;
}

html[data-theme='dark'] .trajneo-svg .trajneo-forecast-zone-edge {
  stroke: color-mix(in srgb, var(--cyan) 44%, transparent);
  opacity: 0.82;
}

html[data-theme='dark'] .trajneo-svg .trajneo-plot-frame {
  stroke: color-mix(in srgb, var(--border-bright) 54%, transparent);
  opacity: 0.9;
}

html[data-theme='dark'] .trajneo-svg .trajneo-band.outer {
  opacity: 0.42;
}

html[data-theme='dark'] .trajneo-svg .trajneo-band.core {
  opacity: 0.74;
}

html[data-theme='dark'] .trajneo-svg .trajneo-live-path-shadow {
  opacity: 0.32;
}

html[data-theme='dark'] .trajneo-svg .trajneo-live-path {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cyan) 38%, transparent));
}

html[data-theme='dark'] .trajneo-svg .trajneo-mid-hotline {
  stroke: color-mix(in srgb, #ffffff 52%, transparent);
  opacity: 0.58;
}

html[data-theme='dark'] .trajneo-stage-note-pill {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  color: var(--text-secondary);
}

@keyframes trajneoAuraFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.16; }
  50% { transform: translate3d(0, -8px, 0) scale(1.06); opacity: 0.22; }
}

@keyframes trajneoSheenSweep {
  0% { transform: translateX(-120%); opacity: 0; }
  12% { opacity: 0.28; }
  48% { opacity: 0.18; }
  70%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes trajneoEndpointPulse {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.18); opacity: 0.94; }
}

@keyframes trajneoFocusLineDrift {
  to { stroke-dashoffset: -20; }
}

@media (max-width: 1180px) {
  .trajneo-headline {
    grid-template-columns: minmax(0, 1fr);
  }

  .trajneo-head-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .trajneo-focus-card {
    grid-template-columns: 1fr;
  }

  .trajneo-chart-toolbar {
    align-items: flex-start;
  }

  .trajneo-chart-toolbar-right {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .trajneo-head-stats {
    grid-template-columns: 1fr;
  }

  .trajneo-focus-stats {
    grid-template-columns: 1fr;
  }

  .trajneo-chart-toolbar {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trajneo-svg .trajneo-band.outer,
  .trajneo-svg .trajneo-mid-path,
  .trajneo-svg .trajneo-mid-rider,
  .trajneo-svg .trajneo-live-path,
  .trajneo-svg .trajneo-node.is-active .core,
  .trajneo-svg .trajneo-focus-line,
  .trajneo-svg .trajneo-end-halo,
  .trajneo-aura,
  .trajneo-chart-glow.is-primary,
  .trajneo-chart-glow.is-secondary,
  .trajneo-chart-grid-sheen {
    animation: none;
  }
}

.position-plan-table tr.selected-row td,
.history-table tr.history-main-row.is-selected td {
  background: color-mix(in srgb, var(--cyan) 14%, var(--bg-hover) 86%);
  color: var(--text-primary);
}

.position-plan-table tr.selected-row td {
  border-bottom-color: color-mix(in srgb, var(--cyan) 45%, var(--border) 55%);
}

.history-table tr.history-main-row.is-selected td:last-child {
  color: var(--cyan);
}

.page {
  padding: 22px var(--main-shell-gutter);
}

.page.active > :first-child {
  margin-top: 10px;
}

.card,
.stat-card,
.report-section,
.history-day-card,
.engine-live-block,
.trajectory-point-detail {
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  border-radius: 16px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--bg-deep) 22%, transparent);
}

.card {
  padding: 22px;
}

.card::before {
  display: none;
}

.card-title {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.card-title::after {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.2), rgba(148, 163, 184, 0.65), rgba(148, 163, 184, 0.2));
}

.stat-label {
  color: var(--text-muted);
}

.stat-value {
  color: var(--text-primary);
}

.stat-sub {
  color: var(--text-secondary);
}

.grid-4 .stat-card .stat-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  font-size: 10px;
  line-height: 1.25;
}

#page-dashboard .grid-4 .stat-card,
#page-dashboard .grid-4 .stat-label,
#page-dashboard .grid-4 .stat-value,
#page-dashboard .grid-4 .stat-sub {
  text-align: center;
}

#dashPriceChange {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
}

#dashPriceChange.tone-bull {
  color: color-mix(in srgb, var(--green) 88%, #ffffff 12%);
  border-color: color-mix(in srgb, var(--green) 44%, var(--border-bright) 56%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--green) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--green) 8%, var(--bg-hover) 92%));
}

#dashPriceChange.tone-neutral {
  color: color-mix(in srgb, var(--gold) 90%, #ffffff 10%);
  border-color: color-mix(in srgb, var(--gold) 44%, var(--border-bright) 56%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--gold) 8%, var(--bg-hover) 92%));
}

#dashPriceChange.tone-bear {
  color: color-mix(in srgb, var(--red) 88%, #ffffff 12%);
  border-color: color-mix(in srgb, var(--red) 44%, var(--border-bright) 56%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--red) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--red) 8%, var(--bg-hover) 92%));
}

#dashSignalConf {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
}

#dashAccuracySub,
#dashVIXSub {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
}

.dash-metric-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dash-metric-pill .dash-metric-segment {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.dash-metric-pill .dash-metric-label {
  color: var(--text-primary);
  font-weight: 700;
}

.dash-metric-pill .dash-metric-sep {
  color: var(--text-secondary);
  opacity: 0.8;
}

.dash-metric-pill .dash-metric-value {
  font-weight: 700;
  transition: color 0.2s ease;
}

.dash-metric-pill.tone-bull {
  border-color: color-mix(in srgb, var(--green) 44%, var(--border-bright) 56%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--green) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--green) 8%, var(--bg-hover) 92%));
}

.dash-metric-pill.tone-bull .dash-metric-value {
  color: color-mix(in srgb, var(--green) 88%, #ffffff 12%);
}

.dash-metric-pill.tone-neutral {
  border-color: color-mix(in srgb, var(--gold) 44%, var(--border-bright) 56%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--gold) 8%, var(--bg-hover) 92%));
}

.dash-metric-pill.tone-neutral .dash-metric-value {
  color: color-mix(in srgb, var(--gold) 90%, #ffffff 10%);
}

.dash-metric-pill.tone-bear {
  border-color: color-mix(in srgb, var(--red) 44%, var(--border-bright) 56%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--red) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--red) 8%, var(--bg-hover) 92%));
}

.dash-metric-pill.tone-bear .dash-metric-value {
  color: color-mix(in srgb, var(--red) 88%, #ffffff 12%);
}

.stat-value.cyan { color: var(--cyan); }
.stat-value.green { color: var(--green); }
.stat-value.red { color: var(--red); }
.stat-value.gold { color: var(--gold); }

.forecast-grid {
  gap: 12px;
}

/* ===== ALERTS PAGE MODERN FLOW ===== */
#page-alerts > .section-header {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 20px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: none;
}

#page-alerts #alertsTabs {
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  padding: 4px;
  border-radius: 999px;
  box-shadow: none;
}

#page-alerts #alertsTabs .tab-btn {
  min-height: 34px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

#page-alerts #alertsTabs .tab-btn.active {
  color: var(--text-primary);
  background:
    linear-gradient(118deg, color-mix(in srgb, #ffffff 78%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent));
  border: 1px solid color-mix(in srgb, #ffffff 72%, var(--border-bright) 28%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
  transform: translateY(-1px);
}

#page-alerts #alertsTabs .tab-btn.active::before {
  content: '';
  position: absolute;
  inset: -38% -22%;
  background: linear-gradient(
    110deg,
    transparent 18%,
    color-mix(in srgb, #ffffff 52%, transparent) 36%,
    color-mix(in srgb, var(--bg-surface) 66%, transparent) 52%,
    transparent 70%
  );
  transform: translateX(-42%);
  animation: alertsLiquidShift 3.1s ease-in-out infinite;
  pointer-events: none;
}

#page-alerts .tab-content.active {
  animation: fadeIn 0.22s ease;
}

#page-alerts .card {
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, #ffffff 72%, var(--border) 28%);
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: none;
}

#page-alerts .scroll-area {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  padding: 8px;
}

#page-alerts .history-day-row {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  box-shadow: none;
}

#page-alerts .history-day-row:hover {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  box-shadow: none;
}

#page-alerts .history-day-chip {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 80%, transparent);
}

html[data-theme='dark'] #page-alerts > .section-header {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] #page-alerts #alertsTabs {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] #page-alerts #alertsTabs .tab-btn.active {
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--bg-hover) 94%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent));
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}

html[data-theme='dark'] #page-alerts #alertsTabs .tab-btn.active::before {
  background: linear-gradient(
    112deg,
    transparent 20%,
    color-mix(in srgb, #ffffff 14%, transparent) 38%,
    color-mix(in srgb, var(--bg-hover) 62%, transparent) 55%,
    transparent 74%
  );
}

@keyframes alertsLiquidShift {
  0% {
    transform: translateX(-44%);
    opacity: 0.38;
  }
  50% {
    transform: translateX(34%);
    opacity: 0.62;
  }
  100% {
    transform: translateX(108%);
    opacity: 0.36;
  }
}

html[data-theme='dark'] #page-alerts .card {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] #page-alerts .scroll-area {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}

html[data-theme='dark'] #page-alerts .history-day-row {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] #page-alerts .history-day-row:hover {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  box-shadow: none;
}

.day-card {
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 12px;
}

.day-card:hover {
  border-color: color-mix(in srgb, var(--cyan) 55%, var(--border) 45%);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(2, 132, 199, 0.15);
}

.day-card.selected {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cyan) 12%, var(--bg-surface) 88%),
    color-mix(in srgb, var(--bg-surface) 98%, transparent)
  );
  border-color: color-mix(in srgb, var(--cyan) 80%, var(--border) 20%);
}

.day-card.bullish { border-top: 3px solid var(--green); }
.day-card.bearish { border-top: 3px solid var(--red); }
.day-card.neutral { border-top: 3px solid var(--gold); }

.day-label { color: var(--text-muted); }
.day-date { color: var(--text-secondary); }

#page-forecast > .section-header {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 18px;
  padding: 14px 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-forecast > .section-header .section-title {
  font-size: 14px;
  letter-spacing: 0.08em;
}

#page-forecast > .section-header .section-subtitle {
  margin-top: 4px;
}

#fullForecastGrid .day-card {
  --forecast-card-hover-accent: var(--cyan);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #ffffff 72%, var(--border) 28%);
  background:
    linear-gradient(165deg, color-mix(in srgb, #ffffff 94%, transparent), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--bg-deep) 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
  padding: 15px 12px;
}

#fullForecastGrid .day-card.bullish { --forecast-card-hover-accent: var(--green); }
#fullForecastGrid .day-card.bearish { --forecast-card-hover-accent: var(--red); }
#fullForecastGrid .day-card.neutral { --forecast-card-hover-accent: var(--gold); }

#fullForecastGrid .day-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--forecast-card-hover-accent) 60%, var(--border-bright) 40%);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--forecast-card-hover-accent) 10%, #ffffff 90%),
    color-mix(in srgb, var(--bg-surface) 96%, transparent)
  );
  box-shadow: 0 18px 32px color-mix(in srgb, var(--forecast-card-hover-accent) 16%, transparent);
}

html[data-market-session='open'] #fullForecastGrid .day-card:hover {
  border-color: color-mix(in srgb, var(--green) 60%, var(--border-bright) 40%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--green) 10%, #ffffff 90%), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow: 0 18px 32px color-mix(in srgb, var(--green) 18%, transparent);
}

html[data-market-session='premarket'] #fullForecastGrid .day-card:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, var(--border-bright) 40%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 10%, #ffffff 90%), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow: 0 18px 32px color-mix(in srgb, var(--gold) 16%, transparent);
}

html[data-market-session='aftermarket'] #fullForecastGrid .day-card:hover {
  border-color: color-mix(in srgb, var(--purple) 60%, var(--border-bright) 40%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--purple) 10%, #ffffff 90%), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow: 0 18px 32px color-mix(in srgb, var(--purple) 16%, transparent);
}

html[data-market-session='closed'] #fullForecastGrid .day-card:hover {
  border-color: color-mix(in srgb, var(--red) 60%, var(--border-bright) 40%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--red) 10%, #ffffff 90%), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow: 0 18px 32px color-mix(in srgb, var(--red) 16%, transparent);
}

html #fullForecastGrid .day-card.bullish:hover {
  border-color: color-mix(in srgb, var(--green) 60%, var(--border-bright) 40%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--green) 10%, #ffffff 90%), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow: 0 18px 32px color-mix(in srgb, var(--green) 18%, transparent);
}

html #fullForecastGrid .day-card.bearish:hover {
  border-color: color-mix(in srgb, var(--red) 60%, var(--border-bright) 40%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--red) 10%, #ffffff 90%), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow: 0 18px 32px color-mix(in srgb, var(--red) 18%, transparent);
}

html #fullForecastGrid .day-card.neutral:hover {
  border-color: color-mix(in srgb, var(--gold) 60%, var(--border-bright) 40%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 10%, #ffffff 90%), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow: 0 18px 32px color-mix(in srgb, var(--gold) 18%, transparent);
}

#fullForecastGrid .day-card.selected {
  border-color: color-mix(in srgb, var(--forecast-card-hover-accent) 72%, var(--border) 28%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--forecast-card-hover-accent) 14%, var(--bg-surface) 86%),
      color-mix(in srgb, var(--bg-surface) 98%, transparent)
    );
  box-shadow:
    0 14px 26px color-mix(in srgb, var(--forecast-card-hover-accent) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

#fullForecastGrid .day-label {
  font-size: 10px;
  letter-spacing: 0.14em;
}

#fullForecastGrid .day-price {
  font-size: 16px;
}

#fullForecastGrid .day-confidence {
  font-size: 9px;
  letter-spacing: 0.07em;
}

#fullForecastGrid .confidence-bar {
  height: 5px;
  border-radius: 999px;
}

#fullForecastGrid .day-card.hintable::after {
  bottom: 9px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  font-size: 7px;
  letter-spacing: 0.08em;
}

#fullForecastGrid .day-card.hintable {
  padding-bottom: 34px;
}

#fullForecastGrid .dash-day-widget {
  --dash-card-tone: #f43f5e;
  min-width: 0;
  min-height: 220px;
  border-radius: 28px;
  padding: 16px 14px 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transform: none;
  opacity: 1;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  cursor: pointer;
}

#fullForecastGrid .dash-day-widget.rose { --dash-card-tone: #f43f5e; }
#fullForecastGrid .dash-day-widget.bull { --dash-card-tone: #10b981; }
#fullForecastGrid .dash-day-widget.amber { --dash-card-tone: #f59e0b; }

#fullForecastGrid .dash-day-widget:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

#fullForecastGrid .dash-day-widget.selected {
  background: #ffffff;
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

#fullForecastGrid .dash-day-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #94a3b8;
}

#fullForecastGrid .dash-day-date {
  margin-top: 2px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

#fullForecastGrid .dash-day-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--dash-card-tone) 12%, #ffffff 88%);
  color: var(--dash-card-tone);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#fullForecastGrid .dash-day-icon span {
  line-height: 1;
}

#fullForecastGrid .dash-day-price {
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#fullForecastGrid .dash-day-move {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 12px;
}

#fullForecastGrid .dash-day-price.rose,
#fullForecastGrid .dash-day-move.rose { color: #f43f5e; }

#fullForecastGrid .dash-day-price.bull,
#fullForecastGrid .dash-day-move.bull { color: #10b981; }

#fullForecastGrid .dash-day-price.amber,
#fullForecastGrid .dash-day-move.amber { color: #f59e0b; }

#fullForecastGrid .dash-day-prob-mini {
  width: 100%;
  margin: 4px 0 14px;
}

#fullForecastGrid .dash-day-prob-mini-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: #e2e8f0;
  box-shadow: inset 0 1px 1px rgba(148, 163, 184, 0.18);
}

#fullForecastGrid .dash-day-prob-mini-seg {
  height: 100%;
  transition: width 520ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

#fullForecastGrid .dash-day-prob-mini-seg.bull { background: #10b981; }

#fullForecastGrid .dash-day-prob-mini-seg.neutral { background: #f59e0b; }

#fullForecastGrid .dash-day-prob-mini-seg.bear { background: #f43f5e; }

#fullForecastGrid .dash-day-rec {
  margin-top: auto;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: #f1f5f9;
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
}

#fullForecastGrid .dash-day-selected-ring {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 2px solid color-mix(in srgb, var(--dash-card-tone) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

#fullForecastGrid .dash-day-widget.selected .dash-day-selected-ring {
  opacity: 1;
}

#fullForecastGrid .dash-day-widget.hintable::after {
  content: '';
}

#page-forecast #fullForecastGrid {
  overflow: visible;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
  padding: 14px;
  margin: 0 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 28px;
  background: #ffffff;
  margin-top: 0;
}

@media (max-width: 900px) {
  #fullForecastGrid .dash-day-widget {
    min-height: 200px;
  }
}

@media (max-width: 640px) {
  #fullForecastGrid .dash-day-widget {
    min-height: 188px;
    padding: 14px 12px 16px;
  }

  #fullForecastGrid .dash-day-price {
    font-size: 21px;
  }
}

.confidence-bar {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--red) 20%, transparent) 0%,
      color-mix(in srgb, var(--red) 20%, transparent) 33%,
      color-mix(in srgb, var(--gold) 22%, transparent) 33%,
      color-mix(in srgb, var(--gold) 22%, transparent) 66%,
      color-mix(in srgb, var(--green) 22%, transparent) 66%,
      color-mix(in srgb, var(--green) 22%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  position: relative;
  overflow: visible;
}

.confidence-fill {
  height: 100%;
  border-radius: inherit;
  position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--conf-fill, var(--cyan)) 84%, #ffffff 16%), var(--conf-fill, var(--cyan)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--conf-fill, var(--cyan)) 36%, transparent), 0 4px 10px color-mix(in srgb, var(--conf-fill, var(--cyan)) 24%, transparent);
}

.confidence-low {
  border-color: color-mix(in srgb, var(--red) 40%, var(--border-bright) 60%);
}

.confidence-mid {
  border-color: color-mix(in srgb, var(--gold) 44%, var(--border-bright) 56%);
}

.confidence-high {
  border-color: color-mix(in srgb, var(--green) 44%, var(--border-bright) 56%);
}

.signal-meter {
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--border-bright);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--red) 24%, transparent),
    color-mix(in srgb, var(--gold) 28%, transparent),
    color-mix(in srgb, var(--green) 30%, transparent)
  );
}

.signal-needle {
  width: 6px;
  height: 18px;
  top: -3px;
  border-radius: 999px;
  background: var(--text-primary);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--bg-deep) 36%, transparent);
}

.options-advice {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-hover) 86%, transparent), color-mix(in srgb, var(--bg-surface) 94%, transparent));
  border: 1px solid var(--border-bright);
}

/* ===== OPTIONS LAB MODERN REFRESH ===== */
#page-options > .section-header {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 18px;
  padding: 14px 16px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-surface) 94%, transparent), color-mix(in srgb, var(--cyan) 5%, var(--bg-hover) 95%));
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--cyan) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
}

#page-options > .section-header .section-title {
  font-size: 14px;
  letter-spacing: 0.08em;
}

#page-options .card {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #ffffff 72%, var(--border) 28%);
  background:
    linear-gradient(165deg, color-mix(in srgb, #ffffff 93%, transparent), color-mix(in srgb, var(--cyan) 4%, var(--bg-surface) 96%));
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--cyan) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

#page-options .card-title {
  letter-spacing: 0.12em;
  font-size: 11px;
}

#page-options .card-title::after {
  width: 36px;
}

#page-options .options-panel-stack .report-row,
#page-options #optionsExposurePanel .report-row {
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  padding: 9px 11px;
  margin-bottom: 8px;
  align-items: flex-start;
  gap: 10px;
}

#page-options .options-panel-stack .report-row:last-child,
#page-options #optionsExposurePanel .report-row:last-child {
  margin-bottom: 0;
}

#page-options .options-panel-stack .report-key,
#page-options #optionsExposurePanel .report-key {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#page-options .options-panel-stack .report-val,
#page-options #optionsExposurePanel .report-val {
  font-size: 12px;
  font-weight: 600;
}

#page-options .options-day-chooser {
  gap: 8px;
  margin-bottom: 12px;
}

#page-options .options-day-btn {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  padding: 8px 8px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
}

#page-options .options-day-btn.active {
  border-color: color-mix(in srgb, var(--cyan) 68%, var(--border) 32%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--bg-surface) 98%, transparent));
}

#page-options .options-playbook-card {
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--cyan) 8%, transparent);
}

#page-options .options-playbook-card .title {
  font-size: 8px;
  letter-spacing: 0.12em;
}

#page-options .options-playbook-card .main {
  font-size: 14px;
}

#page-options .options-readiness-box {
  margin-top: 12px;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 91%, transparent);
}

#page-options .options-checklist {
  border-top: none;
  padding-top: 12px;
  gap: 9px;
}

#page-options .options-check-item {
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
}

#page-options .options-exposure-help {
  border-radius: 12px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--bg-surface) 94%, transparent), color-mix(in srgb, var(--cyan) 4%, var(--bg-hover) 96%));
}

#page-options .options-exposure-row {
  margin-bottom: 10px;
}

#page-options .options-exposure-bar {
  height: 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
}

#page-options .options-exposure-fill {
  border-radius: inherit;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 28%, transparent), 0 5px 12px color-mix(in srgb, var(--cyan) 16%, transparent);
}

#page-options .options-exposure-summary {
  margin-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  padding-top: 12px;
}

#page-options .options-table-wrap {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-surface) 93%, transparent);
  overflow: hidden;
}

/* ===== OPTIONS LAB (Weekly + Risk + Day Table v2) ===== */
#page-options .options-v2-panel {
  border-radius: 24px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08) !important;
  padding: 20px 22px !important;
}

#page-options .options-v2-overview-panel,
#page-options .options-v2-risk-panel {
  align-self: stretch;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#page-options .options-v2-risk-panel {
  border-radius: 24px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#page-options .options-v2-table-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

#page-options .options-v2-box-heading {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#page-options .options-v2-card-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#page-options .options-v2-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.85), rgba(248, 250, 252, 0.55));
}

#page-options .options-v2-card-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 14px;
  border: 1px solid #dbeafe;
  background: linear-gradient(160deg, rgba(219, 234, 254, 0.95), rgba(239, 246, 255, 0.8));
  color: #3b82f6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#page-options .options-v2-card-icon {
  width: 18px;
  height: 18px;
}

#page-options .options-v2-card-head-copy {
  min-width: 0;
  flex: 1 1 auto;
}

#page-options .options-v2-card-subcopy {
  margin-top: 5px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

#page-options .options-v2-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#page-options .options-v2-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid #f8fafc;
  transition: background 0.18s ease;
}

#page-options .options-v2-data-row:hover {
  background: rgba(248, 250, 252, 0.8);
}

#page-options .options-v2-data-row.is-last {
  border-bottom: 0;
}

#page-options .options-v2-data-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-v2-data-value-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: 62%;
  text-align: right;
}

#page-options .options-v2-data-value {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: right;
}

#page-options .options-v2-data-subvalue {
  color: #94a3b8;
  font-size: 12px;
}

#page-options .options-v2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#page-options .options-v2-badge-mode {
  background: #f1f5f9;
  color: #334155;
}

#page-options .options-v2-badge.tone-green {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #059669;
}

#page-options .options-v2-badge.tone-rose {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #e11d48;
}

#page-options .options-v2-tone-primary { color: #0f172a; }
#page-options .options-v2-tone-slate { color: #334155; }
#page-options .options-v2-tone-green { color: #059669; }
#page-options .options-v2-tone-rose { color: #e11d48; }
#page-options .options-v2-tone-amber { color: #f59e0b; }

#page-options .options-v2-inline-icon-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#page-options .options-v2-inline-icon {
  width: 16px;
  height: 16px;
}

#page-options .options-v2-inline-icon.tone-amber { color: #f59e0b; }
#page-options .options-v2-inline-icon.tone-blue { color: #3b82f6; }

#page-options .options-v2-info-block {
  padding: 16px 22px;
  border-bottom: 1px solid #f8fafc;
}

#page-options .options-v2-info-block.tone-info {
  background: rgba(239, 246, 255, 0.7);
  border-color: #dbeafe;
  color: #1d4ed8;
}

#page-options .options-v2-info-block.tone-warning {
  background: rgba(255, 251, 235, 0.8);
  border-color: #fde68a;
  color: #92400e;
}

#page-options .options-v2-info-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#page-options .options-v2-info-icon {
  width: 16px;
  height: 16px;
}

#page-options .options-v2-info-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.82;
}

#page-options .options-v2-info-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: inherit;
  opacity: 0.94;
}

#page-options .options-v2-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid #f8fafc;
}

#page-options .options-v2-setup-cell {
  padding: 16px 22px;
}

#page-options .options-v2-setup-cell.is-divider {
  border-right: 1px solid #f8fafc;
}

#page-options .options-v2-setup-label {
  margin-bottom: 6px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-v2-setup-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#page-options .options-v2-setup-value.tone-green { color: #059669; }
#page-options .options-v2-setup-value.tone-rose { color: #e11d48; }

#page-options .options-v2-setup-icon {
  width: 16px;
  height: 16px;
}

#page-options .options-v2-readiness-score {
  color: #0f172a;
}

#page-options .options-v2-readiness-footer {
  margin-top: auto;
  padding: 18px 22px 20px;
  border-top: 1px solid #f1f5f9;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.72), rgba(241, 245, 249, 0.88));
}

#page-options .options-v2-readiness-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}

#page-options .options-v2-readiness-title {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#page-options .options-v2-readiness-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#page-options .options-v2-readiness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-options .options-v2-readiness-badge-icon {
  width: 12px;
  height: 12px;
}

#page-options .options-v2-readiness-bar-wrap {
  height: 8px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: #dbe3ee;
}

#page-options .options-v2-readiness-bar-fill {
  height: 100%;
  border-radius: inherit;
}

#page-options .options-v2-readiness-bar-fill.tone-ready {
  background: linear-gradient(90deg, #10b981, #34d399);
}

#page-options .options-v2-readiness-bar-fill.tone-selective {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

#page-options .options-v2-readiness-bar-fill.tone-defensive {
  background: linear-gradient(90deg, #f43f5e, #fb7185);
}

#page-options .options-v2-readiness-bar-fill.tone-neutral {
  background: linear-gradient(90deg, #94a3b8, #cbd5e1);
}

#page-options #optionsStrategyOverview {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

#page-options #riskRewardPanel,
#page-options #optionsTableArea,
#page-options #optionsExecutionPanel {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#page-options #optionsStrategyOverview > *,
#page-options #riskRewardPanel > *,
#page-options #optionsTableArea > *,
#page-options #optionsExecutionPanel > * {
  width: 100%;
}

#page-options #optionsStrategyOverview > .loading-state,
#page-options #riskRewardPanel > .loading-state,
#page-options #optionsTableArea > .loading-state,
#page-options #optionsExecutionPanel > .loading-state {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  align-items: center;
  justify-content: center;
}

#page-options #optionsStrategyOverview > .loading-state,
#page-options #riskRewardPanel > .loading-state {
  min-height: 360px;
}

#page-options #optionsTableArea > .loading-state {
  min-height: 320px;
}

#page-options #optionsExecutionPanel > .loading-state {
  min-height: 280px;
}

#page-options .options-v2-overview-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

#page-options .options-v2-card-shell-overview {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 0;
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  overflow: hidden;
}

#page-options .options-v2-overview-frame {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  color: #111827;
  background: #ffffff;
}

#page-options .options-v2-overview-header {
  padding: 20px 22px 18px;
  border-bottom: 1px solid #f1f5f9;
}

#page-options .options-v2-overview-title {
  margin: 0;
  color: #111827;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

#page-options .options-v2-overview-subtitle {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.55;
}

#page-options .options-v2-overview-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 18px;
}

#page-options .options-v2-overview-group {
  overflow: hidden;
  border: 1px solid rgba(243, 244, 246, 0.95);
  border-radius: 18px;
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

#page-options .options-v2-overview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
}

#page-options .options-v2-overview-row.is-divider {
  border-bottom: 1px solid rgba(243, 244, 246, 0.9);
}

#page-options .options-v2-overview-row-label {
  flex: 0 0 auto;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-v2-overview-row-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 66%;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
}

#page-options .options-v2-overview-row-value.tone-primary {
  color: #111827;
}

#page-options .options-v2-overview-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid rgba(229, 231, 235, 0.72);
  border-radius: 10px;
  background: rgba(243, 244, 246, 0.78);
  color: #374151;
  font-size: 13px;
  font-weight: 600;
}

#page-options .options-v2-overview-info {
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 18px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.18s ease;
}

#page-options .options-v2-overview-info.tone-info {
  border-color: rgba(191, 219, 254, 0.8);
  background: rgba(239, 246, 255, 0.72);
  color: #2563eb;
}

#page-options .options-v2-overview-info.tone-info:hover {
  background: rgba(239, 246, 255, 0.86);
}

#page-options .options-v2-overview-info.tone-warning {
  border-color: rgba(253, 230, 138, 0.82);
  background: rgba(255, 251, 235, 0.76);
  color: #d97706;
}

#page-options .options-v2-overview-info.tone-warning:hover {
  background: rgba(255, 251, 235, 0.88);
}

#page-options .options-v2-overview-info-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#page-options .options-v2-overview-info-icon {
  width: 16px;
  height: 16px;
}

#page-options .options-v2-overview-info-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-options .options-v2-overview-info-text {
  margin: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  opacity: 0.92;
}

#page-options .options-v2-overview-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-options .options-v2-overview-setup-card {
  padding: 14px 16px;
  border: 1px solid rgba(229, 231, 235, 0.72);
  border-radius: 18px;
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#page-options .options-v2-overview-setup-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

#page-options .options-v2-overview-setup-card.tone-green {
  border-color: rgba(167, 243, 208, 0.76);
}

#page-options .options-v2-overview-setup-card.tone-rose {
  border-color: rgba(254, 205, 211, 0.76);
}

#page-options .options-v2-overview-setup-label {
  display: block;
  margin-bottom: 8px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-v2-overview-setup-value {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

#page-options .options-v2-overview-setup-value.tone-green {
  color: #059669;
}

#page-options .options-v2-overview-setup-value.tone-rose {
  color: #e11d48;
}

#page-options .options-v2-overview-setup-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

#page-options .options-v2-overview-setup-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

#page-options .options-v2-overview-setup-unit {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.72;
}

#page-options .options-v2-overview-inline-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#page-options .options-v2-overview-inline-value.tone-amber {
  color: #d97706;
}

#page-options .options-v2-overview-inline-icon {
  width: 16px;
  height: 16px;
}

#page-options .options-v2-overview-readiness {
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

#page-options .options-v2-overview-readiness-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#page-options .options-v2-overview-readiness-label {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-v2-overview-readiness-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

#page-options .options-v2-overview-readiness-score {
  color: #111827;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

#page-options .options-v2-overview-readiness-score-unit {
  color: #9ca3af;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

#page-options .options-v2-overview-readiness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#page-options .options-v2-overview-readiness-badge-icon {
  width: 12px;
  height: 12px;
}

#page-options .options-v2-overview-readiness-badge.tone-ready {
  border-color: rgba(167, 243, 208, 0.84);
  background: rgba(236, 253, 245, 0.92);
  color: #047857;
}

#page-options .options-v2-overview-readiness-badge.tone-selective {
  border-color: rgba(253, 230, 138, 0.86);
  background: rgba(255, 251, 235, 0.92);
  color: #b45309;
}

#page-options .options-v2-overview-readiness-badge.tone-defensive {
  border-color: rgba(254, 205, 211, 0.86);
  background: rgba(255, 241, 242, 0.94);
  color: #e11d48;
}

#page-options .options-v2-overview-readiness-badge.tone-neutral {
  border-color: rgba(209, 213, 219, 0.9);
  background: rgba(249, 250, 251, 0.92);
  color: #6b7280;
}

#page-options .options-v2-overview-readiness-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(229, 231, 235, 0.82);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .options-v2-overview-readiness-fill {
  height: 100%;
  border-radius: inherit;
}

#page-options .options-v2-overview-readiness-fill.tone-ready {
  background: linear-gradient(90deg, #34d399, #10b981);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.28);
}

#page-options .options-v2-overview-readiness-fill.tone-selective {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.28);
}

#page-options .options-v2-overview-readiness-fill.tone-defensive {
  background: linear-gradient(90deg, #fb7185, #f43f5e);
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.32);
}

#page-options .options-v2-overview-readiness-fill.tone-neutral {
  background: linear-gradient(90deg, #cbd5e1, #94a3b8);
  box-shadow: 0 0 12px rgba(148, 163, 184, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  #page-options .options-v2-overview-info,
  #page-options .options-v2-overview-setup-card {
    transition: none;
  }

  #page-options .options-v2-overview-setup-card:hover {
    transform: none;
  }
}

#page-options .options-v2-card-shell-risk {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #ffffff;
}

#page-options .options-v2-risk-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

#page-options .options-v2-risk-title {
  color: #111827;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.08;
}

#page-options .options-v2-risk-subtitle {
  margin-top: 6px;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.55;
}

#page-options .options-v2-risk-body {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 18px;
}

#page-options .options-v2-ratio-hero {
  padding: 0;
  border: 0;
  background: transparent;
}

#page-options .options-v2-ratio-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 0;
}

#page-options .options-v2-ratio-kicker {
  display: block;
  margin-bottom: 8px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#page-options .options-v2-ratio-score {
  margin-bottom: 14px;
  color: #111827;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

#page-options .options-v2-ratio-score-unit {
  color: #9ca3af;
  font-size: 24px;
  font-weight: 800;
}

#page-options .options-v2-ratio-bar {
  display: flex;
  height: 14px;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(226, 232, 240, 0.9);
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.55);
}

#page-options .options-v2-ratio-fill.is-downside {
  background: linear-gradient(90deg, #fb7185, #f43f5e);
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.28);
}

#page-options .options-v2-ratio-fill.is-upside {
  background: linear-gradient(90deg, #34d399, #10b981);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.26);
}

#page-options .options-v2-ratio-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

#page-options .options-v2-ratio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#page-options .options-v2-ratio-label.tone-rose { color: #e11d48; }
#page-options .options-v2-ratio-label.tone-green { color: #059669; }

#page-options .options-v2-risk-metrics {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(243, 244, 246, 0.96);
  border-radius: 20px;
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

#page-options .options-v2-risk-metric-row {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(243, 244, 246, 0.88);
  background: transparent;
}

#page-options .options-v2-risk-metric-row:last-child {
  border-bottom: 0;
}

#page-options .options-v2-risk-metric-row:hover {
  background: rgba(255, 255, 255, 0.46);
}

#page-options .options-v2-risk-metric-row .options-v2-data-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-v2-risk-label-note {
  color: rgba(156, 163, 175, 0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

#page-options .options-v2-risk-metric-row .options-v2-data-value-wrap {
  gap: 0;
}

#page-options .options-v2-risk-metric-row .options-v2-data-value {
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}

#page-options .options-v2-risk-metric-row.is-move .options-v2-data-value {
  color: #2563eb;
}

#page-options .options-v2-risk-metric-row .options-v2-inline-icon-value {
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
}

#page-options .options-v2-risk-metrics .options-v2-badge {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .options-v2-risk-context {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(243, 244, 246, 0.96);
  border-radius: 20px;
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

#page-options .options-v2-risk-context-title {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#page-options .options-v2-risk-context-grid {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-options .options-v2-risk-context-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.82), rgba(255, 255, 255, 0.98));
}

#page-options .options-v2-risk-context-label {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-v2-risk-context-value {
  color: #111827;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#page-options .options-v2-risk-context-card.is-compact .options-v2-risk-context-value {
  font-size: 16px;
}

#page-options .options-v2-risk-context-subvalue {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

#page-options .options-v2-risk-context-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

#page-options .options-v2-risk-context-note-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 2px;
  color: #94a3b8;
}

#page-options .options-v2-readiness-status {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

#page-options .options-v2-table-shell {
  display: flex;
  flex-direction: column;
}

#page-options .options-v2-table-head {
  padding: 18px 22px 16px;
  border-bottom: 1px solid #f1f5f9;
}

#page-options .options-v2-table-head .options-v2-box-heading {
  margin-bottom: 0;
}

#page-options .options-v2-table-scroll {
  width: 100%;
  overflow-x: auto;
  padding: 8px 22px 18px;
}

#page-options .options-v2-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

#page-options .options-v2-table th {
  padding: 0 14px 14px;
  border-bottom: 1px solid #e2e8f0;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: left;
}

#page-options .options-v2-table td {
  padding: 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

#page-options .options-v2-table tbody tr:last-child td {
  border-bottom: 0;
}

#page-options .options-v2-table tbody tr:hover td {
  background: rgba(248, 250, 252, 0.7);
}

#page-options .options-v2-table .col-day {
  color: #64748b;
  font-weight: 600;
}

#page-options .options-v2-table .col-entry {
  color: #38bdf8;
}

#page-options .options-v2-table .col-target {
  color: #10b981;
}

#page-options .options-v2-table .col-stop {
  color: #f43f5e;
}

#page-options .options-v2-direction {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-v2-direction.is-bull { color: #10b981; }
#page-options .options-v2-direction.is-bear { color: #f43f5e; }
#page-options .options-v2-direction.is-neutral { color: #f59e0b; }

#page-options .options-v2-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#page-options .options-v2-type-pill.is-put {
  background: #fff1f2;
  color: #f43f5e;
  border-color: #fecdd3;
}

#page-options .options-v2-type-pill.is-call {
  background: #ecfdf5;
  color: #10b981;
  border-color: #bbf7d0;
}

#page-options .options-v2-conf-main {
  color: #334155;
  font-weight: 700;
}

#page-options .options-v2-conf-dot {
  margin: 0 5px;
  color: #94a3b8;
}

#page-options .options-v2-conf-rr {
  color: #f43f5e;
  font-weight: 700;
}

/* ===== OPTIONS LAB: EXECUTION PLAYBOOK v2 ===== */
#page-options .options-exec-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#page-options .options-exec-v2-heading-row {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
  padding-left: 2px;
}

#page-options .options-exec-v2-heading {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#page-options .options-exec-v2-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  overflow: hidden;
  padding: 2px 0;
}

#page-options .options-exec-v2-tab {
  min-width: 0;
  width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

#page-options .options-exec-v2-tab:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

#page-options .options-exec-v2-tab.active {
  border-color: #88c0eb;
  color: #88c0eb;
  background: rgba(136, 192, 235, 0.14);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .options-exec-v2-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#page-options .options-exec-v2-metric {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .options-exec-v2-metric-label {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

#page-options .options-exec-v2-metric-value {
  color: #1e293b;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#page-options .options-exec-v2-metric-value.is-positive {
  color: #10b981;
}

#page-options .options-exec-v2-metric-value.is-negative {
  color: #f43f5e;
}

#page-options .options-exec-v2-focus-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

#page-options .options-exec-v2-focus-pill.is-put {
  background: #fffbeb;
  color: #f59e0b;
  border-color: #fde68a;
}

#page-options .options-exec-v2-focus-pill.is-call {
  background: #ecfdf5;
  color: #10b981;
  border-color: #bbf7d0;
}

#page-options .options-exec-v2-focus-pill.is-neutral {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

#page-options .options-exec-v2-metric-sub {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
}

#page-options .options-exec-v2-readiness {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 11px 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .options-exec-v2-readiness-label {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#page-options .options-exec-v2-readiness-text {
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

#page-options .options-exec-v2-readiness-status {
  font-weight: 800;
  margin-right: 6px;
}

#page-options .options-exec-v2-readiness-status.is-ready {
  color: #10b981;
}

#page-options .options-exec-v2-readiness-status.is-selective {
  color: #f59e0b;
}

#page-options .options-exec-v2-readiness-status.is-defensive {
  color: #f43f5e;
}

#page-options .options-exec-v2-checklist {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

#page-options .options-exec-v2-check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

#page-options .options-exec-v2-check-item + .options-exec-v2-check-item {
  border-top: 1px solid #f1f5f9;
}

#page-options .options-exec-v2-check-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#page-options .options-exec-v2-check-state {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#page-options .options-exec-v2-check-text {
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

#page-options .options-exec-v2-check-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid transparent;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

#page-options .options-exec-v2-check-item.pass .options-exec-v2-check-state {
  background: #ecfdf5;
  color: #059669;
  border-color: #bbf7d0;
}

#page-options .options-exec-v2-check-item.pass .options-exec-v2-check-icon {
  color: #10b981;
  border-color: #bbf7d0;
}

#page-options .options-exec-v2-check-item.caution .options-exec-v2-check-state {
  background: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}

#page-options .options-exec-v2-check-item.caution .options-exec-v2-check-icon {
  color: #f59e0b;
  border-color: #fde68a;
}

#page-options .options-exec-v2-check-item.block .options-exec-v2-check-state {
  background: #fff1f2;
  color: #e11d48;
  border-color: #fecdd3;
}

#page-options .options-exec-v2-check-item.block .options-exec-v2-check-icon {
  color: #f43f5e;
  border-color: #fecdd3;
}

@media (max-width: 900px) {
  #page-options .options-v2-panel {
    padding: 16px 16px !important;
  }

  #page-options .options-v2-overview-panel {
    padding: 0 !important;
  }

  #page-options .options-v2-risk-panel {
    padding: 0 !important;
  }

  #page-options .options-v2-risk-header {
    padding: 20px 18px 16px;
  }

  #page-options .options-v2-risk-body {
    gap: 18px;
    padding: 18px;
  }

  #page-options .options-v2-risk-context {
    padding: 14px;
  }

  #page-options .options-v2-risk-context-grid {
    gap: 10px;
  }

  #page-options .options-v2-risk-context-card {
    padding: 12px 14px;
  }

  #page-options .options-v2-card-header,
  #page-options .options-v2-data-row,
  #page-options .options-v2-info-block,
  #page-options .options-v2-setup-cell,
  #page-options .options-v2-readiness-footer,
  #page-options .options-v2-ratio-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  #page-options .options-v2-data-value-wrap {
    max-width: 66%;
  }

  #page-options .options-v2-ratio-score {
    font-size: 38px;
  }

  #page-options .options-v2-ratio-score-unit {
    font-size: 20px;
  }

  #page-options .options-v2-overview-header {
    padding: 20px 18px 16px;
  }

  #page-options .options-v2-overview-body {
    padding: 16px 18px 18px;
  }

  #page-options #optionsStrategyOverview > .loading-state,
  #page-options #riskRewardPanel > .loading-state {
    min-height: 300px;
  }

  #page-options #optionsTableArea > .loading-state {
    min-height: 280px;
  }

  #page-options #optionsExecutionPanel > .loading-state {
    min-height: 240px;
  }

  #page-options .options-v2-readiness-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #page-options .options-v2-readiness-stats {
    justify-content: flex-start;
  }

  #page-options .options-v2-table-head {
    padding: 14px 16px;
  }

  #page-options .options-v2-table-scroll {
    padding: 6px 16px 14px;
  }

  #page-options .options-v2-table td,
  #page-options .options-v2-table th {
    padding-left: 10px;
    padding-right: 10px;
  }

  #page-options .options-exec-v2-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-options .options-exec-v2-metric-value {
    font-size: 18px;
  }

  #page-options .options-exec-v2-tabs {
    display: flex;
    overflow-x: auto;
    padding: 2px 1px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  #page-options .options-exec-v2-tabs::-webkit-scrollbar {
    display: none;
  }

  #page-options .options-exec-v2-tab {
    min-width: 108px;
    width: auto;
  }
}

@media (max-width: 700px) {
  #page-options .options-v2-risk-title {
    font-size: 21px;
  }

  #page-options .options-v2-risk-subtitle {
    font-size: 14px;
  }

  #page-options .options-v2-risk-context-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  #page-options .options-v2-card-header,
  #page-options .options-v2-data-row,
  #page-options .options-v2-ratio-labels {
    flex-direction: column;
    align-items: flex-start;
  }

  #page-options .options-v2-data-value-wrap,
  #page-options .options-v2-readiness-stats {
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
    text-align: left;
  }

  #page-options .options-v2-inline-icon-value {
    justify-content: flex-start;
  }

  #page-options .options-v2-overview-row,
  #page-options .options-v2-overview-readiness-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #page-options .options-v2-overview-row-value,
  #page-options .options-v2-overview-readiness-stats {
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
    text-align: left;
  }

  #page-options .options-v2-setup-grid {
    grid-template-columns: 1fr;
  }

  #page-options .options-v2-overview-setup-grid {
    grid-template-columns: 1fr;
  }

  #page-options #optionsStrategyOverview > .loading-state,
  #page-options #riskRewardPanel > .loading-state,
  #page-options #optionsTableArea > .loading-state,
  #page-options #optionsExecutionPanel > .loading-state {
    min-height: 220px;
  }

  #page-options .options-v2-setup-cell.is-divider {
    border-right: 0;
    border-bottom: 1px solid #f8fafc;
  }

  #page-options .options-exec-v2-metrics {
    grid-template-columns: 1fr;
  }

  #page-options .options-exec-v2-check-item {
    align-items: flex-start;
  }
}

/* ===== OPTIONS LAB: EXECUTION PLAYBOOK v3 ===== */
#page-options .options-exec-v3 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-options .options-exec-v3-heading-row {
  padding: 2px 2px 2px;
}

#page-options .options-exec-v3-heading {
  color: #334155;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .options-exec-v3-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 20px;
  background: #edf3fa;
  border: 1px solid #e4edf6;
}

#page-options .options-exec-v3-tab {
  min-width: 0;
  width: 100%;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

#page-options .options-exec-v3-tab:hover {
  background: rgba(255, 255, 255, 0.55);
  color: #475569;
}

#page-options .options-exec-v3-tab.active {
  border-color: #e1e8f0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

#page-options .options-exec-v3-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-options .options-exec-v3-metric-card,
#page-options .options-exec-v3-readiness,
#page-options .options-exec-v3-checklist {
  border: 1px solid #dbe5f0;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

#page-options .options-exec-v3-metric-card {
  border-radius: 28px;
  padding: 18px 20px;
  min-height: 116px;
}

#page-options .options-exec-v3-metric-label {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#page-options .options-exec-v3-metric-value {
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}

#page-options .options-exec-v3-metric-value.tone-bull {
  color: #0f172a;
}

#page-options .options-exec-v3-metric-value.tone-bear {
  color: #0f172a;
}

#page-options .options-exec-v3-metric-sub {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

#page-options .options-exec-v3-metric-sub-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 1px;
  color: #94a3b8;
}

#page-options .options-exec-v3-focus-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-options .options-exec-v3-focus-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-options .options-exec-v3-focus-pill.tone-bull {
  background: #ecfdf5;
  color: #059669;
  border-color: #86efac;
}

#page-options .options-exec-v3-focus-pill.tone-bear {
  background: #fff1f2;
  color: #e11d48;
  border-color: #fda4af;
}

#page-options .options-exec-v3-focus-pill.tone-neutral {
  background: #f8fafc;
  color: #64748b;
  border-color: #dbe5f0;
}

#page-options .options-exec-v3-focus-strike {
  color: #0f172a;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

#page-options .options-exec-v3-readiness {
  border-radius: 28px;
  padding: 14px 16px;
}

#page-options .options-exec-v3-readiness.tone-ready {
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
  border-color: #86efac;
}

#page-options .options-exec-v3-readiness.tone-selective {
  background: linear-gradient(180deg, #fff9e8, #ffffff);
  border-color: #f5cf62;
}

#page-options .options-exec-v3-readiness.tone-defensive {
  background: linear-gradient(180deg, #fff5f5, #ffffff);
  border-color: #fda4af;
}

#page-options .options-exec-v3-readiness-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#page-options .options-exec-v3-readiness-copy {
  min-width: 0;
  flex: 1 1 480px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-options .options-exec-v3-readiness-copy-block {
  min-width: 0;
}

#page-options .options-exec-v3-readiness-icon-wrap {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#page-options .options-exec-v3-readiness-icon {
  width: 18px;
  height: 18px;
}

#page-options .options-exec-v3-readiness.tone-ready .options-exec-v3-readiness-icon-wrap {
  background: #dcfce7;
  color: #059669;
}

#page-options .options-exec-v3-readiness.tone-selective .options-exec-v3-readiness-icon-wrap {
  background: #fef3c7;
  color: #d97706;
}

#page-options .options-exec-v3-readiness.tone-defensive .options-exec-v3-readiness-icon-wrap {
  background: #ffe4e6;
  color: #e11d48;
}

#page-options .options-exec-v3-readiness-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

#page-options .options-exec-v3-readiness-note {
  color: #b45309;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

#page-options .options-exec-v3-readiness-title.tone-ready,
#page-options .options-exec-v3-readiness.tone-ready .options-exec-v3-readiness-note {
  color: #059669;
}

#page-options .options-exec-v3-readiness-title.tone-selective,
#page-options .options-exec-v3-readiness.tone-selective .options-exec-v3-readiness-note {
  color: #b45309;
}

#page-options .options-exec-v3-readiness-title.tone-defensive,
#page-options .options-exec-v3-readiness.tone-defensive .options-exec-v3-readiness-note {
  color: #be123c;
}

#page-options .options-exec-v3-readiness-scorebox {
  width: 170px;
  max-width: 100%;
  flex: 0 0 auto;
}

#page-options .options-exec-v3-readiness-scorehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
}

#page-options .options-exec-v3-readiness-track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(245, 158, 11, 0.18);
}

#page-options .options-exec-v3-readiness-fill {
  height: 100%;
  border-radius: inherit;
}

#page-options .options-exec-v3-readiness-fill.tone-ready {
  background: linear-gradient(90deg, #10b981, #34d399);
}

#page-options .options-exec-v3-readiness-fill.tone-selective {
  background: linear-gradient(90deg, #d97706, #f59e0b);
}

#page-options .options-exec-v3-readiness-fill.tone-defensive {
  background: linear-gradient(90deg, #e11d48, #fb7185);
}

#page-options .options-exec-v3-checklist {
  border: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#page-options .options-exec-v3-check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

#page-options .options-exec-v3-check-item.pass {
  background: #ffffff;
}

#page-options .options-exec-v3-check-item.caution {
  background: #fffdf7;
  border-color: #fcd34d;
}

#page-options .options-exec-v3-check-item.block {
  background: #fff5f6;
  border-color: #fda4af;
}

#page-options .options-exec-v3-check-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-options .options-exec-v3-check-state {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  flex: 0 0 auto;
}

#page-options .options-exec-v3-check-text {
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

#page-options .options-exec-v3-check-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#page-options .options-exec-v3-check-icon-glyph {
  width: 13px;
  height: 13px;
}

#page-options .options-exec-v3-check-item.pass .options-exec-v3-check-state {
  background: #ecfdf5;
  color: #059669;
  border-color: #86efac;
}

#page-options .options-exec-v3-check-item.pass .options-exec-v3-check-icon {
  color: #10b981;
  border-color: #86efac;
  background: #ffffff;
}

#page-options .options-exec-v3-check-item.caution .options-exec-v3-check-state {
  background: #fff7ed;
  color: #d97706;
  border-color: #fdba74;
}

#page-options .options-exec-v3-check-item.caution .options-exec-v3-check-icon {
  color: #f59e0b;
  border-color: #fdba74;
  background: #ffffff;
}

#page-options .options-exec-v3-check-item.block .options-exec-v3-check-state {
  background: #fff1f2;
  color: #e11d48;
  border-color: #fda4af;
}

#page-options .options-exec-v3-check-item.block .options-exec-v3-check-icon {
  color: #e11d48;
  border-color: #fda4af;
  background: #ffffff;
}

@media (max-width: 1100px) {
  #page-options .options-exec-v3-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-options .options-exec-v3-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #page-options .options-exec-v3-tabs::-webkit-scrollbar {
    display: none;
  }

  #page-options .options-exec-v3-tab {
    min-width: 118px;
    width: auto;
    flex: 0 0 auto;
  }
}

@media (max-width: 720px) {
  #page-options .options-exec-v3-metrics {
    grid-template-columns: 1fr;
  }

  #page-options .options-exec-v3-metric-card {
    min-height: auto;
    padding: 16px 14px;
  }

  #page-options .options-exec-v3-metric-value {
    font-size: 24px;
  }

  #page-options .options-exec-v3-focus-strike {
    font-size: 26px;
  }

  #page-options .options-exec-v3-readiness-main,
  #page-options .options-exec-v3-check-item {
    align-items: flex-start;
  }

  #page-options .options-exec-v3-readiness {
    padding: 14px;
  }

  #page-options .options-exec-v3-readiness-copy {
    align-items: flex-start;
  }

  #page-options .options-exec-v3-readiness-icon-wrap {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  #page-options .options-exec-v3-readiness-icon {
    width: 16px;
    height: 16px;
  }

  #page-options .options-exec-v3-readiness-title {
    font-size: 12px;
  }

  #page-options .options-exec-v3-readiness-note {
    font-size: 11px;
  }

  #page-options .options-exec-v3-check-item {
    padding: 12px;
  }

  #page-options .options-exec-v3-check-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  #page-options .options-exec-v3-check-text {
    font-size: 12px;
  }
}

/* ===== OPTIONS LAB: POSITION SIZING v2 ===== */
#page-options .position-v2-card {
  border-radius: 24px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

#page-options .position-v2-head {
  border-bottom: 1px solid rgba(226, 232, 240, 0.65);
  padding: 2px 2px 10px;
  margin-bottom: 14px;
}

#page-options .position-v2-head-title {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .position-v2-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#page-options .position-v2-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#page-options .position-v2-input-label {
  margin-left: 4px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .position-v2-input {
  width: 100%;
  min-height: 50px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  font-size: 14px;
  font-weight: 600;
  padding: 0 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .position-v2-input:focus {
  border-color: #88c0eb;
  box-shadow: 0 0 0 3px rgba(136, 192, 235, 0.2);
}

#page-options .position-v2-output {
  margin-top: 14px;
}

#page-options #positionCalcOutput.position-v2-output {
  display: grid;
  gap: 14px;
}

#page-options .position-v2-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-options .position-v2-summary-card {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  padding: 14px 14px 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .position-v2-summary-label {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .position-v2-summary-value {
  margin-top: 7px;
  color: #1e293b;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

#page-options .position-v2-summary-sub {
  margin-top: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

#page-options .position-v2-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

#page-options .position-v2-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .position-v2-pill-value {
  color: #1e293b;
}

#page-options .position-v2-pill-value.is-amber {
  color: #f59e0b;
}

#page-options .position-v2-pill-value.is-cyan {
  color: #38bdf8;
}

#page-options .position-v2-matrix-shell {
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

#page-options .position-v2-matrix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid #f1f5f9;
  background: rgba(248, 250, 252, 0.45);
}

#page-options .position-v2-matrix-title {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

#page-options .position-v2-matrix-caption {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}

#page-options .position-v2-table-scroll {
  width: 100%;
  overflow-x: auto;
}

#page-options .position-v2-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
}

#page-options .position-v2-table thead tr {
  border-bottom: 1px solid #f1f5f9;
}

#page-options .position-v2-table thead th {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 14px 14px;
}

#page-options .position-v2-table thead th:first-child {
  padding-left: 24px;
}

#page-options .position-v2-table thead th:last-child {
  padding-right: 24px;
}

#page-options .position-v2-table th.is-right,
#page-options .position-v2-table td.is-right {
  text-align: right;
}

#page-options .position-v2-main-row {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#page-options .position-v2-main-row:hover {
  background: rgba(248, 250, 252, 0.55);
}

#page-options .position-v2-main-row.is-open {
  background: rgba(248, 250, 252, 0.4);
}

#page-options .position-v2-main-row td {
  padding: 16px 14px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}

#page-options .position-v2-main-row td:first-child {
  padding-left: 24px;
}

#page-options .position-v2-main-row td:last-child {
  padding-right: 24px;
}

#page-options .position-v2-main-row .position-v2-day {
  color: #1e293b;
  font-weight: 700;
}

#page-options .position-v2-main-row .is-risk {
  color: #f43f5e;
  font-weight: 700;
}

#page-options .position-v2-main-row .is-reward {
  color: #10b981;
  font-weight: 700;
}

#page-options .position-v2-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#page-options .position-v2-type-pill.is-put {
  background: #fff1f2;
  color: #f43f5e;
  border-color: #fecdd3;
}

#page-options .position-v2-type-pill.is-call {
  background: #ecfdf5;
  color: #10b981;
  border-color: #bbf7d0;
}

#page-options .position-v2-detail-btn {
  min-height: 34px;
  min-width: 74px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
}

#page-options .position-v2-detail-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

#page-options .position-v2-detail-btn.is-open {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.12);
}

#page-options .position-v2-expand-row td {
  padding: 0;
  border-bottom: 1px solid #f1f5f9;
}

#page-options .position-v2-expand-cell {
  background: rgba(248, 250, 252, 0.52);
}

#page-options .position-v2-expand-wrap {
  margin: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: rgba(248, 250, 252, 0.8);
  padding: 22px;
}

#page-options .position-v2-detail-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#page-options .position-v2-detail-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#page-options .position-v2-detail-kicker {
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-options .position-v2-detail-date {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#page-options .position-v2-detail-grid {
  display: grid;
  gap: 10px;
}

#page-options .position-v2-detail-grid.position-v2-detail-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#page-options .position-v2-detail-grid.position-v2-detail-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#page-options .position-v2-detail-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 13px 10px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#page-options .position-v2-detail-label {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

#page-options .position-v2-detail-value {
  color: #1e293b;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

#page-options .position-v2-detail-value.is-risk {
  color: #f43f5e;
}

#page-options .position-v2-detail-value.is-reward {
  color: #10b981;
}

#page-options .position-v2-detail-value.is-amber {
  color: #f59e0b;
}

#page-options .position-v2-detail-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-options .position-v2-detail-pill.is-put {
  color: #f43f5e;
  background: #fff1f2;
  border-color: #fecdd3;
}

#page-options .position-v2-detail-pill.is-call {
  color: #10b981;
  background: #ecfdf5;
  border-color: #bbf7d0;
}

#page-options .position-v2-detail-pill.is-low {
  color: #10b981;
  background: #ecfdf5;
  border-color: #bbf7d0;
}

#page-options .position-v2-detail-pill.is-medium {
  color: #f59e0b;
  background: #fffbeb;
  border-color: #fde68a;
}

#page-options .position-v2-detail-pill.is-high {
  color: #f43f5e;
  background: #fff1f2;
  border-color: #fecdd3;
}

#page-options .position-v2-detail-strategy-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

#page-options .position-v2-detail-line-label {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#page-options .position-v2-detail-line-value {
  color: #334155;
  font-size: 14px;
  font-weight: 700;
}

#page-options .position-v2-detail-actions {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

#page-options .position-v2-track-btn {
  min-height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid #38bdf8;
  background: #38bdf8;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.28);
  transition: all 0.2s ease;
}

#page-options .position-v2-track-btn:hover {
  background: #0ea5e9;
  border-color: #0ea5e9;
}

#page-options .position-v2-track-btn:active {
  transform: scale(0.98);
}

@media (max-width: 1200px) {
  #page-options .position-v2-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-options .position-v2-detail-grid.position-v2-detail-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #page-options .position-v2-input-grid {
    grid-template-columns: 1fr;
  }

  #page-options .position-v2-matrix-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #page-options .position-v2-matrix-caption {
    text-align: left;
  }

  #page-options .position-v2-expand-wrap {
    margin: 12px;
    padding: 16px;
    border-radius: 18px;
  }
}

@media (max-width: 700px) {
  #page-options .position-v2-summary-grid {
    grid-template-columns: 1fr;
  }

  #page-options .position-v2-detail-grid.position-v2-detail-grid-3,
  #page-options .position-v2-detail-grid.position-v2-detail-grid-4 {
    grid-template-columns: 1fr;
  }

  #page-options .position-v2-detail-head {
    flex-direction: column;
    align-items: center;
  }
}

#page-options .options-history-table th {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  font-size: 9px;
  letter-spacing: 0.09em;
}

#page-options .options-history-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

#page-options .options-history-table tr:hover td {
  background: color-mix(in srgb, var(--cyan) 6%, var(--bg-hover) 94%);
}

#page-options .position-plan-meta {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-options .position-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  padding: 5px 10px;
}

#page-options .position-plan-toggle-btn {
  font-size: 9px;
  padding: 6px 10px;
  border-radius: 999px;
}

#page-options .position-sizing-controls {
  align-items: end;
}

#page-options .position-sizing-update-wrap {
  display: flex;
  flex-direction: column;
}

#page-options .position-sizing-update-wrap .stat-label {
  text-align: center;
}

#page-options .position-sizing-update-btn {
  width: 100%;
  min-height: 36px;
  letter-spacing: 0.1em;
  font-size: 10px;
}

#page-options .position-sizing-update-btn.is-updated {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 84%, #ffffff 16%), var(--green));
  border-color: color-mix(in srgb, var(--green) 72%, var(--border) 28%);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--green) 24%, transparent);
}

#page-options .position-sizing-update-btn:disabled {
  opacity: 1;
  cursor: default;
}

/* ===== OPTIONS LAB: POSITION SIZING CALCULATOR REDESIGN ===== */
#page-options .position-sizing-shell {
  display: grid;
  gap: 14px;
}

#page-options .position-sizing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 16px;
  padding: 12px 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 58%),
    radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--session-ui-accent) 5%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-surface) 95%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent),
    0 10px 22px color-mix(in srgb, var(--bg-deep) 8%, transparent);
}

#page-options .position-sizing-head-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

#page-options .position-sizing-kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  color: color-mix(in srgb, var(--cyan) 84%, #0f172a 16%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: uppercase;
}

#page-options .position-sizing-headline {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.5;
  max-width: 760px;
}

#page-options .position-sizing-head-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#page-options .position-sizing-head-status.is-preview {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--cyan) 7%, var(--bg-surface) 93%);
  color: color-mix(in srgb, var(--cyan) 74%, var(--text-primary) 26%);
}

#page-options .position-sizing-head-status.is-saved {
  border-color: color-mix(in srgb, var(--green) 30%, var(--border-bright) 70%);
  background: color-mix(in srgb, var(--green) 8%, var(--bg-surface) 92%);
  color: color-mix(in srgb, var(--green) 82%, var(--text-primary) 18%);
}

#page-options .position-sizing-controls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

#page-options .position-sizing-input-card {
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 95%, transparent), color-mix(in srgb, var(--bg-hover) 89%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent),
    0 8px 18px color-mix(in srgb, var(--bg-deep) 6%, transparent);
}

#page-options .position-sizing-input-card .stat-label {
  margin-bottom: 0 !important;
  font-size: 8px;
  letter-spacing: 0.13em;
}

#page-options .position-sizing-input-card .input-field {
  min-height: 42px;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 65%, transparent);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

#page-options #accountSize,
#page-options #riskPct,
#page-options #positionSizingHardCap {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

#page-options .position-sizing-input-card .input-field::placeholder {
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
  opacity: 1;
}

#page-options #accountSize::placeholder,
#page-options #riskPct::placeholder,
#page-options #positionSizingHardCap::placeholder {
  color: color-mix(in srgb, var(--text-muted) 86%, transparent);
  opacity: 1;
}

#page-options .position-sizing-input-card .input-field:focus {
  border-color: color-mix(in srgb, var(--cyan) 54%, var(--border-bright) 46%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cyan) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

#page-options .position-sizing-input-help {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.35;
  color: var(--text-muted);
}

#page-options .position-sizing-update-wrap {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 8px;
}

#page-options .position-sizing-update-wrap .stat-label {
  text-align: left;
}

#page-options .position-sizing-hardcap-wrap {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 8px;
}

#page-options .position-sizing-warning-pill {
  display: inline-flex;
  align-items: center;
  align-self: start;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--border-bright) 74%);
  background: color-mix(in srgb, var(--gold) 8%, var(--bg-surface) 92%);
  color: color-mix(in srgb, #8a4b0f 72%, var(--text-primary) 28%);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.35;
}

#page-options .position-sizing-warning-pill.is-safe {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border-bright) 76%);
  background: color-mix(in srgb, var(--green) 8%, var(--bg-surface) 92%);
  color: color-mix(in srgb, var(--green) 82%, var(--text-primary) 18%);
}

#page-options .position-sizing-warning-pill.is-warn {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--orange) 10%, var(--bg-surface) 90%);
  color: color-mix(in srgb, #b45309 76%, var(--text-primary) 24%);
}

#page-options .position-sizing-warning-pill.is-danger {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--red) 8%, var(--bg-surface) 92%);
  color: color-mix(in srgb, var(--red) 78%, var(--text-primary) 22%);
}

#page-options .position-sizing-update-btn,
#page-options #positionSizingUpdateBtn {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  letter-spacing: 0.12em;
  font-size: 10px;
  font-weight: 800;
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--border-bright) 58%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cyan) 88%, #ffffff 12%), color-mix(in srgb, var(--session-ui-accent) 84%, #ffffff 16%));
  box-shadow:
    0 12px 22px color-mix(in srgb, var(--cyan) 22%, transparent),
    0 2px 0 color-mix(in srgb, #ffffff 30%, transparent) inset,
    inset 0 1px 0 color-mix(in srgb, #ffffff 34%, transparent);
}

#page-options .position-sizing-update-btn:not(:disabled):hover,
#page-options #positionSizingUpdateBtn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 24px color-mix(in srgb, var(--cyan) 26%, transparent),
    0 2px 0 color-mix(in srgb, #ffffff 34%, transparent) inset,
    inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent);
}

#page-options .position-sizing-update-btn:not(:disabled):active,
#page-options #positionSizingUpdateBtn:not(:disabled):active {
  transform: translateY(0);
}

#page-options .position-sizing-update-btn.is-updated,
#page-options #positionSizingUpdateBtn.is-updated {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 84%, #ffffff 16%), var(--green));
  border-color: color-mix(in srgb, var(--green) 72%, var(--border) 28%);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--green) 24%, transparent);
}

#page-options .position-sizing-output-shell {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 5%, transparent), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--session-ui-accent) 4%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 95%, transparent), color-mix(in srgb, var(--bg-hover) 92%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
    0 12px 26px color-mix(in srgb, var(--bg-deep) 8%, transparent);
  padding: 14px;
}

#page-options #positionCalcOutput {
  display: grid;
  gap: 12px;
}

#page-options .position-sizing-empty-shell {
  display: grid;
  gap: 12px;
}

#page-options .position-sizing-empty-shell .empty-state {
  border: 1px dashed color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  padding: 20px;
}

#page-options .position-sizing-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#page-options .position-sizing-summary-card {
  min-width: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), color-mix(in srgb, var(--bg-hover) 88%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 66%, transparent),
    0 8px 18px color-mix(in srgb, var(--bg-deep) 6%, transparent);
  padding: 12px;
}

#page-options .position-sizing-summary-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.13em;
  color: var(--text-muted);
  text-transform: uppercase;
}

#page-options .position-sizing-summary-value {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#page-options .position-sizing-summary-meta {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-secondary);
}

#page-options .position-plan-meta {
  margin-bottom: 0;
  gap: 8px;
}

#page-options .position-plan-chip {
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent);
  padding: 0 10px;
}

#page-options .position-plan-table-shell {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 94%, transparent), color-mix(in srgb, var(--bg-hover) 91%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent),
    0 10px 22px color-mix(in srgb, var(--bg-deep) 7%, transparent);
}

#page-options .position-plan-table-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), color-mix(in srgb, var(--bg-hover) 89%, transparent));
}

#page-options .position-plan-table-title {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

#page-options .position-plan-table-caption {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-secondary);
}

#page-options .position-plan-table-scroll {
  overflow: auto;
}

#page-options .position-plan-table {
  min-width: 980px;
}

#page-options .position-plan-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  padding: 12px 14px;
  font-size: 9px;
  letter-spacing: 0.12em;
}

#page-options .position-plan-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  vertical-align: middle;
}

#page-options .position-plan-table tbody tr.history-main-row td {
  background: color-mix(in srgb, #dbeafe 26%, var(--bg-surface) 74%);
}

#page-options .position-plan-table tbody tr.history-main-row:nth-child(odd) td {
  background: color-mix(in srgb, #eff6ff 32%, var(--bg-surface) 68%);
}

#page-options .position-plan-table tbody tr.history-main-row:hover td {
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-hover) 90%);
}

#page-options .position-plan-table tr.selected-row td {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 14%, var(--bg-hover) 86%), color-mix(in srgb, var(--cyan) 8%, var(--bg-hover) 92%));
}

#page-options .position-plan-toggle-btn {
  min-height: 30px;
  min-width: 74px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 0 10px;
}

#page-options .position-plan-expand-cell {
  padding: 0 14px 14px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
}

#page-options .position-plan-expand-wrap {
  padding-top: 8px;
}

#page-options .position-plan-table tr.plan-detail-row td {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

#page-options .position-plan-table tr.plan-detail-row:hover td {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: var(--text-secondary);
}

#page-options .position-plan-detail {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 58%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent),
    0 10px 20px color-mix(in srgb, var(--bg-deep) 7%, transparent);
  padding: 14px;
}

#page-options .position-plan-head {
  margin-bottom: 12px;
  gap: 10px;
}

#page-options .position-plan-title {
  font-size: 10px;
  letter-spacing: 0.15em;
}

#page-options .position-plan-date-chip {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

#page-options .position-plan-kpis {
  gap: 10px;
}

#page-options .position-plan-kpi {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 95%, transparent), color-mix(in srgb, var(--bg-hover) 89%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 58%, transparent);
  padding: 10px;
}

#page-options .position-plan-kpi .label {
  font-size: 8px;
  letter-spacing: 0.1em;
}

#page-options .position-plan-kpi .value {
  margin-top: 5px;
  font-size: 13px;
}

#page-options .position-plan-kpis.position-plan-kpis-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#page-options .position-plan-cta {
  margin-top: 12px !important;
}

#page-options .position-plan-track-btn {
  min-height: 36px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  padding: 0 14px !important;
  box-shadow: 0 12px 20px color-mix(in srgb, var(--cyan) 18%, transparent);
}

html[data-theme='dark'] #page-options .position-sizing-head,
html[data-theme='dark'] #page-options .position-sizing-output-shell,
html[data-theme='dark'] #page-options .position-plan-table-shell,
html[data-theme='dark'] #page-options .position-plan-detail {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
    0 12px 26px color-mix(in srgb, #000000 24%, transparent);
}

html[data-theme='dark'] #page-options .position-sizing-input-card,
html[data-theme='dark'] #page-options .position-sizing-summary-card,
html[data-theme='dark'] #page-options .position-plan-kpi,
html[data-theme='dark'] #page-options .position-plan-chip {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-options .position-sizing-input-card .input-field,
html[data-theme='dark'] #page-options .position-sizing-head-status {
  background: color-mix(in srgb, var(--bg-card) 86%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
}

html[data-theme='dark'] #page-options .position-sizing-warning-pill {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

html[data-theme='dark'] #page-options .position-sizing-warning-pill.is-safe {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border-bright) 76%);
  background: color-mix(in srgb, var(--green) 8%, var(--bg-card) 92%);
}

html[data-theme='dark'] #page-options .position-sizing-warning-pill.is-warn {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--orange) 9%, var(--bg-card) 91%);
}

html[data-theme='dark'] #page-options .position-sizing-warning-pill.is-danger {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--red) 8%, var(--bg-card) 92%);
}

html[data-theme='dark'] #page-options .position-plan-table-headline,
html[data-theme='dark'] #page-options .position-plan-table thead th {
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

html[data-theme='dark'] #page-options .position-plan-table tbody tr.history-main-row td {
  background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
}

html[data-theme='dark'] #page-options .position-plan-table tbody tr.history-main-row:nth-child(odd) td {
  background: color-mix(in srgb, var(--bg-card) 72%, transparent);
}

html[data-theme='dark'] #page-options .position-plan-table tbody tr.history-main-row:hover td {
  background: color-mix(in srgb, var(--session-ui-accent) 10%, var(--bg-hover) 90%);
}

html[data-theme='dark'] #page-options .position-plan-expand-cell,
html[data-theme='dark'] #page-options .position-plan-table tr.plan-detail-row td {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
}

@media (max-width: 1280px) {
  #page-options .position-sizing-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-options .position-sizing-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #page-options .position-sizing-head {
    border-radius: 14px;
    padding: 12px;
  }

  #page-options .position-sizing-output-shell {
    border-radius: 14px;
    padding: 12px;
  }

  #page-options .position-plan-table-shell {
    border-radius: 14px;
  }
}

@media (max-width: 768px) {
  #page-options .position-sizing-controls,
  #page-options .position-sizing-summary-grid {
    grid-template-columns: 1fr;
  }

  #page-options .position-sizing-head-status {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    min-height: 34px;
  }

  #page-options .position-sizing-warning-pill {
    white-space: normal;
  }

  #page-options .position-plan-kpis.position-plan-kpis-3 {
    grid-template-columns: 1fr !important;
  }
}

.advice-type.call {
  background: rgba(22, 163, 74, 0.1);
  color: #166534;
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.advice-type.put {
  background: rgba(217, 4, 41, 0.1);
  color: #9f1239;
  border: 1px solid rgba(217, 4, 41, 0.3);
}

.advice-item-label {
  color: var(--text-muted);
}

.advice-item-value {
  color: var(--text-primary);
}

.ai-commentary-block {
  margin-top: 12px;
  padding: 12px 14px;
  margin-top: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.action-feedback {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -24px) scale(0.98);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 250px;
  max-width: min(94vw, 620px);
  padding: 10px 16px 10px 12px;
  border-radius: 22px;
  border: 1px solid var(--feedback-border, color-mix(in srgb, var(--green) 34%, var(--border-bright) 66%));
  background:
    radial-gradient(120% 140% at 0% 0%, var(--feedback-glow, color-mix(in srgb, var(--green) 12%, transparent)), transparent 60%),
    linear-gradient(
      135deg,
      var(--feedback-surface-top, color-mix(in srgb, #ffffff 18%, var(--bg-surface) 82%)),
      var(--feedback-surface-bottom, color-mix(in srgb, var(--bg-hover) 88%, transparent))
    );
  color: var(--feedback-text, var(--text-primary));
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: left;
  line-height: 1.35;
  box-shadow:
    0 22px 48px color-mix(in srgb, var(--bg-deep) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  z-index: 26080 !important;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
  overflow: hidden;
  isolation: isolate;
}

.action-feedback::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--feedback-accent, var(--green)) 20%, transparent),
    transparent 32%,
    transparent 68%,
    color-mix(in srgb, var(--feedback-accent, var(--green)) 12%, transparent)
  );
  opacity: 0.8;
  z-index: -1;
}

.action-feedback[data-tone='success'] {
  --feedback-accent: var(--green);
  --feedback-border: color-mix(in srgb, var(--green) 36%, #ffffff 14%);
  --feedback-glow: color-mix(in srgb, var(--green) 18%, transparent);
  --feedback-surface-top: color-mix(in srgb, #0f172a 74%, var(--green) 26%);
  --feedback-surface-bottom: color-mix(in srgb, #111827 82%, var(--green) 18%);
  --feedback-text: #eafff5;
}

.action-feedback[data-tone='removed'] {
  --feedback-accent: #f43f5e;
  --feedback-border: color-mix(in srgb, #f43f5e 38%, #ffffff 12%);
  --feedback-glow: color-mix(in srgb, #f43f5e 20%, transparent);
  --feedback-surface-top: color-mix(in srgb, #0f172a 74%, #f43f5e 26%);
  --feedback-surface-bottom: color-mix(in srgb, #111827 82%, #be123c 18%);
  --feedback-text: #ffeef2;
}

.action-feedback[data-tone='info'],
.action-feedback[data-tone='neutral'] {
  --feedback-accent: #60a5fa;
  --feedback-border: color-mix(in srgb, #60a5fa 34%, #ffffff 12%);
  --feedback-glow: color-mix(in srgb, #60a5fa 16%, transparent);
  --feedback-surface-top: color-mix(in srgb, #0f172a 80%, #60a5fa 20%);
  --feedback-surface-bottom: color-mix(in srgb, #111827 88%, #0f172a 12%);
  --feedback-text: #eff6ff;
}

.action-feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--feedback-accent, var(--green)) 38%, #ffffff 12%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--feedback-accent, var(--green)) 20%, rgba(255, 255, 255, 0.12)),
      color-mix(in srgb, var(--feedback-accent, var(--green)) 14%, rgba(15, 23, 42, 0.58))
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 10px 22px color-mix(in srgb, var(--feedback-accent, var(--green)) 18%, transparent);
  color: color-mix(in srgb, var(--feedback-accent, var(--green)) 82%, #ffffff 18%);
}

.action-feedback-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-0.5px);
}

.action-feedback-icon[data-icon='info'] .action-feedback-icon-glyph {
  font-size: 14px;
  font-weight: 800;
}

.action-feedback-message {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-feedback.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (max-width: 640px) {
  .action-feedback {
    min-width: 0;
    width: min(94vw, 420px);
    padding: 10px 14px 10px 12px;
    gap: 10px;
  }

  .action-feedback-message {
    white-space: normal;
  }
}

.ticker-wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(140% 160% at 0% 0%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 62%),
    radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--green) 5%, transparent), transparent 66%),
    color-mix(in srgb, var(--bg-surface) 95%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
    0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent);
  padding: 7px 0;
  margin-bottom: 22px;
}

.ticker-wrapper::before,
.ticker-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 2;
  pointer-events: none;
}

.ticker-wrapper::before {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), transparent);
}

.ticker-wrapper::after {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), transparent);
}

.ticker-content {
  --ticker-gap: 10px;
  --ticker-cycle: 1200px;
  display: flex;
  align-items: center;
  gap: var(--ticker-gap);
  width: max-content;
  padding: 0;
  font-size: 12px;
  will-change: transform;
  animation: tickerFluid 26s linear infinite;
}

@keyframes tickerFluid {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--ticker-cycle)), 0, 0); }
}

.ticker-item {
  --ticker-item-tone: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ticker-item-tone) 26%, var(--border-bright) 74%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ticker-item-tone) 5%, var(--bg-surface) 95%), color-mix(in srgb, var(--ticker-item-tone) 2%, var(--bg-hover) 98%));
  color: var(--text-secondary);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
    0 4px 10px color-mix(in srgb, var(--ticker-item-tone) 5%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#tickerContent .ticker-item[data-kind="price"] { --ticker-item-tone: var(--cyan); }
#tickerContent .ticker-item[data-kind="reference"] { --ticker-item-tone: color-mix(in srgb, var(--text-secondary) 45%, var(--cyan) 55%); }
#tickerContent .ticker-item[data-kind="high"] { --ticker-item-tone: var(--green); }
#tickerContent .ticker-item[data-kind="low"] { --ticker-item-tone: var(--red); }
#tickerContent .ticker-item[data-kind="open"] { --ticker-item-tone: var(--gold); }
#tickerContent .ticker-item[data-kind="forecast"] { --ticker-item-tone: var(--orange); }
#tickerContent .ticker-item[data-kind="accuracy"] { --ticker-item-tone: var(--cyan); }
#tickerContent .ticker-item[data-kind="signal"] { --ticker-item-tone: var(--gold); }

#tickerContent .ticker-item.tone-bull {
  --ticker-item-tone: var(--green);
  border-color: color-mix(in srgb, var(--green) 48%, var(--border-bright) 52%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--green) 10%, var(--bg-surface) 90%), color-mix(in srgb, var(--green) 4%, var(--bg-hover) 96%));
}

#tickerContent .ticker-item.tone-bear {
  --ticker-item-tone: var(--red);
  border-color: color-mix(in srgb, var(--red) 48%, var(--border-bright) 52%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--red) 9%, var(--bg-surface) 91%), color-mix(in srgb, var(--red) 4%, var(--bg-hover) 96%));
}

#tickerContent .ticker-item.tone-neutral {
  --ticker-item-tone: var(--gold);
}

#tickerContent .ticker-item.tone-info {
  --ticker-item-tone: var(--cyan);
}

.ticker-bullet {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ticker-item-tone) 86%, #ffffff 14%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ticker-item-tone) 28%, transparent);
  flex: 0 0 auto;
}

.ticker-item .sym {
  color: color-mix(in srgb, var(--ticker-item-tone) 74%, var(--text-secondary) 26%);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker-item .ticker-value {
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
}

.ticker-item .ticker-value.tone-bull {
  color: var(--green);
  text-shadow: 0 0 10px color-mix(in srgb, var(--green) 18%, transparent);
}

.ticker-item .ticker-value.tone-bear {
  color: var(--red);
  text-shadow: 0 0 10px color-mix(in srgb, var(--red) 16%, transparent);
}

.ticker-item .ticker-value.tone-neutral {
  color: var(--gold);
}

.ticker-item .ticker-value.tone-info {
  color: color-mix(in srgb, var(--cyan) 78%, var(--text-primary) 22%);
}

.ticker-item .ticker-value.ticker-value-flash {
  animation: tickerValuePop 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tickerValuePop {
  0% { transform: translateY(0) scale(1); opacity: 0.92; }
  35% { transform: translateY(-1px) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-item .ticker-value.ticker-value-flash {
    animation: none;
  }
}

.tabs {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}

.tab-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tab-btn.active {
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  color: var(--text-primary);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--bg-deep) 20%, transparent);
}

.tab-btn:hover:not(.active) {
  color: var(--text-primary);
}

.btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 18px;
}

.btn-primary {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.25);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0369a1, #075985);
  box-shadow: 0 14px 26px rgba(2, 132, 199, 0.28);
}

.btn-secondary {
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

.btn-danger {
  background: linear-gradient(135deg, #d90429, #be123c);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(217, 4, 41, 0.24);
}

.btn-danger:hover {
  box-shadow: 0 14px 26px rgba(217, 4, 41, 0.3);
}

.feedback-btn {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 10px;
}

.fb-correct {
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.25);
  color: #166534;
}

.fb-correct:hover {
  background: #16a34a;
  color: #ffffff;
}

.fb-incorrect {
  background: rgba(217, 4, 41, 0.1);
  border: 1px solid rgba(217, 4, 41, 0.25);
  color: #9f1239;
}

.fb-incorrect:hover {
  background: #d90429;
  color: #ffffff;
}

.fb-change {
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.25);
  color: #0369a1;
}

.fb-change:hover {
  background: #0284c7;
  color: #ffffff;
}

.fb-revert {
  background: rgba(234, 88, 12, 0.1);
  border: 1px solid rgba(234, 88, 12, 0.28);
  color: #c2410c;
}

.fb-revert:hover {
  background: #ea580c;
  color: #ffffff;
}

.feedback-note.reverted {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(234, 88, 12, 0.28);
  background: rgba(234, 88, 12, 0.09);
  color: #c2410c;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.feedback-editor {
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
}

.feedback-editor-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.feedback-editor-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.feedback-choice-btn {
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border-bright);
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.feedback-choice-btn.is-correct.active {
  border-color: color-mix(in srgb, var(--green) 64%, var(--border-bright) 36%);
  background: color-mix(in srgb, var(--green) 12%, var(--bg-surface) 88%);
  color: var(--green);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 12%, transparent);
}

.feedback-choice-btn.is-incorrect.active {
  border-color: color-mix(in srgb, var(--red) 64%, var(--border-bright) 36%);
  background: color-mix(in srgb, var(--red) 12%, var(--bg-surface) 88%);
  color: var(--red);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 12%, transparent);
}

.feedback-editor-hint {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
}

.trade-action-btn {
  background: none;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  padding: 5px 8px;
}

.trade-action-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.trade-action-btn + .trade-action-btn {
  margin-left: 4px;
}

.trade-action-btn.danger {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 46%, var(--border-bright) 54%);
}

.input-field {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-bright);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  color: var(--text-primary);
  font-family: var(--body);
}

.input-field:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12);
}

.toggle-track {
  background: #cbd5e1;
}

.toggle input:checked + .toggle-track {
  background: linear-gradient(90deg, #0284c7, #0ea5e9);
}

.popup-overlay {
  background: rgba(15, 23, 42, 0.45);
  padding: clamp(8px, 2.2vh, 22px);
}

.popup {
  width: min(720px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 30px 70px color-mix(in srgb, var(--bg-deep) 52%, transparent);
  overflow: clip;
}

.popup::before {
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0284c7, #d90429);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.popup-title {
  color: var(--text-primary);
  letter-spacing: 0.08em;
}

.popup-body {
  color: var(--text-secondary);
}

#allForecastDaysPopup {
  z-index: 12000;
}

#actionConfirmPopup {
  z-index: 25050 !important;
}

#signoutSessionPopupOverlay {
  z-index: 25060 !important;
}

#allForecastDaysPopup .popup {
  width: min(1240px, 96vw);
  max-width: 1240px;
  min-height: min(860px, 94vh);
  border-radius: 28px;
  padding: 12px;
  overflow: hidden;
}

#allForecastDaysPopup .all-forecast-popup-panel {
  flex-direction: column;
  height: 100%;
  min-height: min(836px, calc(94vh - 24px));
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, 0.72);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(59, 130, 246, 0.07), transparent 58%),
    radial-gradient(120% 120% at 100% 100%, rgba(20, 184, 166, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

#allForecastDaysPopup .all-forecast-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42));
}

#allForecastDaysPopup .all-forecast-popup-header-copy {
  min-width: 0;
}

#allForecastDaysPopup .all-forecast-popup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(191, 219, 254, 0.95);
  background: rgba(239, 246, 255, 0.86);
  color: #0f766e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#allForecastDaysPopup .all-forecast-popup-kicker i {
  font-size: 14px;
}

#allForecastDaysPopup .popup-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #0f172a;
}

#allForecastDaysPopup .all-forecast-popup-subtitle {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

#allForecastDaysPopup .all-forecast-popup-close {
  position: static;
  flex-shrink: 0;
  margin-top: 1px;
}

#allForecastDaysPopup .all-forecast-session-legend {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .all-forecast-session-legend.is-inline {
  margin-top: 0;
  justify-content: flex-end;
}

#allForecastDaysPopup .all-forecast-popup-body {
  flex: 1;
  padding: 14px 20px;
  overflow: auto;
  background: transparent;
}

#allForecastDaysPopup .all-forecast-popup-footer {
  margin: 0;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(226, 232, 240, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.58));
}

#actionConfirmPopup .popup {
  width: min(520px, 92vw);
}

#actionConfirmPopup .action-confirm-content {
  display: flex;
  flex-direction: column;
}

#actionConfirmPopup .action-confirm-add-icon {
  display: none;
}

#actionConfirmPopup .action-confirm-play-icon {
  display: none;
}

#actionConfirmPopup .action-confirm-hero[hidden],
#actionConfirmPopup .action-confirm-warning-hero[hidden],
#actionConfirmPopup .action-confirm-market-card[hidden],
#actionConfirmPopup .action-confirm-trade-card[hidden] {
  display: none !important;
}

@keyframes actionConfirmModalEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes actionConfirmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#actionConfirmPopup.is-add-trade {
  background: rgba(148, 163, 184, 0.16) !important;
  backdrop-filter: blur(10px);
}

#actionConfirmPopup.is-add-trade.visible {
  animation: actionConfirmFadeIn 0.16s ease-out;
}

#actionConfirmPopup.is-market-warning {
  background: rgba(226, 232, 240, 0.28) !important;
  backdrop-filter: blur(10px);
}

#actionConfirmPopup.is-market-warning.visible {
  animation: actionConfirmFadeIn 0.16s ease-out;
}

#actionConfirmPopup.is-market-warning .popup.action-confirm-shell {
  width: min(416px, calc(100vw - 32px));
  max-width: min(416px, calc(100vw - 32px));
  padding: 0;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: actionConfirmModalEnter 0.18s ease-out;
}

#actionConfirmPopup.is-market-warning .popup.action-confirm-shell::before {
  content: none !important;
}

#actionConfirmPopup.is-market-warning .action-confirm-content {
  padding: 32px 24px 24px;
  align-items: stretch;
  text-align: center;
}

#actionConfirmPopup.is-market-warning .action-confirm-warning-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#actionConfirmPopup.is-market-warning .action-confirm-warning-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(253, 230, 138, 0.5);
  background: rgba(255, 251, 235, 0.8);
  color: #d97706;
  box-shadow: 0 0 0 8px rgba(255, 251, 235, 0.4), 0 1px 2px rgba(15, 23, 42, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#actionConfirmPopup.is-market-warning .action-confirm-title {
  margin: 0 0 8px;
  font-family: var(--font-sans) !important;
  color: #111827 !important;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}

#actionConfirmPopup.is-market-warning .action-confirm-body {
  margin: 0 auto 24px;
  max-width: 34ch;
  padding: 0 8px;
  font-family: var(--font-sans) !important;
  color: #6b7280 !important;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

#actionConfirmPopup.is-market-warning .action-confirm-market-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(243, 244, 246, 0.8);
  background: rgba(249, 250, 251, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  text-align: left;
}

#actionConfirmPopup.is-market-warning .action-confirm-market-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(243, 244, 246, 1);
  background: #ffffff;
  color: #6366f1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#actionConfirmPopup.is-market-warning .action-confirm-market-card-copy {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

#actionConfirmPopup.is-market-warning .action-confirm-market-card-title {
  color: #111827;
  font-family: var(--font-sans) !important;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#actionConfirmPopup.is-market-warning .action-confirm-market-card-meta {
  margin-top: 2px;
  color: #d97706;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#actionConfirmPopup.is-market-warning .action-confirm-actions {
  margin-top: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid rgba(229, 231, 235, 0.5);
  background: rgba(249, 250, 251, 0.5);
  backdrop-filter: blur(16px);
}

#actionConfirmPopup.is-market-warning .action-confirm-actions .btn {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-family: var(--font-sans) !important;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#actionConfirmPopup.is-market-warning .action-confirm-actions .btn::after {
  display: none;
}

#actionConfirmPopup.is-market-warning .action-confirm-actions .btn:hover {
  transform: none;
  filter: none;
}

#actionConfirmPopup.is-market-warning .action-confirm-cancel-btn {
  order: 2;
  background: #ffffff !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
  color: #4b5563 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

#actionConfirmPopup.is-market-warning .action-confirm-cancel-btn:hover {
  background: #f9fafb !important;
  border-color: rgba(209, 213, 219, 0.9) !important;
  color: #374151 !important;
}

#actionConfirmPopup.is-market-warning #actionConfirmBtn.action-confirm-primary-btn {
  order: 1;
  background: #e11d48 !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25) !important;
}

#actionConfirmPopup.is-market-warning #actionConfirmBtn.action-confirm-primary-btn:hover {
  background: #be123c !important;
  border-color: #be123c !important;
}

#actionConfirmPopup.is-market-warning .action-confirm-play-icon {
  display: inline-flex !important;
  line-height: 1;
}

#actionConfirmPopup.is-market-warning .action-confirm-play-icon svg {
  display: block;
}

#actionConfirmPopup.is-add-trade .popup.action-confirm-shell {
  width: min(416px, calc(100vw - 32px));
  max-width: min(416px, calc(100vw - 32px));
  padding: 0;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(24px);
  box-shadow: 0 32px 64px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: actionConfirmModalEnter 0.18s ease-out;
}

#actionConfirmPopup.is-add-trade .popup.action-confirm-shell::before {
  content: none !important;
}

#actionConfirmPopup.is-add-trade .action-confirm-content {
  padding: 32px 24px 24px;
  align-items: stretch;
  text-align: center;
}

#actionConfirmPopup.is-add-trade .action-confirm-hero {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#actionConfirmPopup.is-add-trade .action-confirm-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(219, 234, 254, 0.92);
  background: rgba(239, 246, 255, 0.86);
  color: #2563eb;
  box-shadow: 0 0 0 8px rgba(239, 246, 255, 0.52);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#actionConfirmPopup.is-add-trade .action-confirm-hero-icon i {
  font-size: 28px;
  line-height: 1;
}

#actionConfirmPopup.is-add-trade .action-confirm-title {
  margin: 0 0 8px;
  font-family: var(--font-sans) !important;
  color: #111827 !important;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
}

#actionConfirmPopup.is-add-trade .action-confirm-body {
  margin: 0 auto 24px;
  max-width: 32ch;
  padding: 0 8px;
  font-family: var(--font-sans) !important;
  color: #6b7280 !important;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

#actionConfirmPopup.is-add-trade .action-confirm-trade-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(241, 245, 249, 0.96);
  background: rgba(248, 250, 252, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  text-align: left;
}

#actionConfirmPopup.is-add-trade .action-confirm-trade-card-icon-wrap {
  flex-shrink: 0;
}

#actionConfirmPopup.is-add-trade .action-confirm-trade-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(241, 245, 249, 0.98);
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#actionConfirmPopup.is-add-trade .action-confirm-trade-card-icon i {
  font-size: 20px;
  line-height: 1;
}

#actionConfirmPopup.is-add-trade[data-trade-tone='bull'] .action-confirm-trade-card-icon {
  color: #059669;
}

#actionConfirmPopup.is-add-trade[data-trade-tone='bear'] .action-confirm-trade-card-icon {
  color: #f43f5e;
}

#actionConfirmPopup.is-add-trade .action-confirm-trade-card-copy {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

#actionConfirmPopup.is-add-trade .action-confirm-trade-card-title {
  color: #111827;
  font-family: var(--font-sans) !important;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#actionConfirmPopup.is-add-trade .action-confirm-trade-card-meta {
  margin-top: 4px;
  color: #6b7280;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#actionConfirmPopup.is-add-trade .action-confirm-actions {
  margin-top: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid rgba(229, 231, 235, 0.62);
  background: rgba(249, 250, 251, 0.72);
  backdrop-filter: blur(16px);
}

#actionConfirmPopup.is-add-trade .action-confirm-actions .btn {
  flex: 1 1 0;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-family: var(--font-sans) !important;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

#actionConfirmPopup.is-add-trade .action-confirm-actions .btn::after {
  display: none;
}

#actionConfirmPopup.is-add-trade .action-confirm-actions .btn:hover {
  transform: none;
  filter: none;
}

#actionConfirmPopup.is-add-trade .action-confirm-cancel-btn {
  order: 2;
  background: #ffffff !important;
  border: 1px solid rgba(229, 231, 235, 0.92) !important;
  color: #4b5563 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

#actionConfirmPopup.is-add-trade .action-confirm-cancel-btn:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #0f172a !important;
}

#actionConfirmPopup.is-add-trade #actionConfirmBtn.action-confirm-primary-btn {
  order: 1;
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
}

#actionConfirmPopup.is-add-trade #actionConfirmBtn.action-confirm-primary-btn:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

#actionConfirmPopup.is-add-trade .action-confirm-add-icon {
  display: inline-flex !important;
  font-size: 18px;
  line-height: 1;
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade {
  background: rgba(2, 6, 23, 0.62) !important;
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .popup.action-confirm-shell {
  border-color: rgba(71, 85, 105, 0.76);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 32px 72px rgba(2, 6, 23, 0.58);
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-hero-icon {
  border-color: rgba(59, 130, 246, 0.36);
  background: rgba(30, 41, 59, 0.92);
  color: #60a5fa;
  box-shadow: 0 0 0 8px rgba(30, 41, 59, 0.54);
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-title {
  color: #f8fafc !important;
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-body {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-trade-card {
  border-color: rgba(51, 65, 85, 0.92);
  background: rgba(15, 23, 42, 0.76);
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-trade-card-icon {
  border-color: rgba(71, 85, 105, 0.82);
  background: rgba(15, 23, 42, 0.98);
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-trade-card-title {
  color: #f8fafc;
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-trade-card-meta {
  color: #94a3b8;
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-actions {
  border-top-color: rgba(71, 85, 105, 0.58);
  background: rgba(15, 23, 42, 0.78);
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-cancel-btn {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(71, 85, 105, 0.82) !important;
  color: #e2e8f0 !important;
}

html[data-theme='dark'] #actionConfirmPopup.is-add-trade .action-confirm-cancel-btn:hover {
  background: rgba(30, 41, 59, 0.94) !important;
  border-color: rgba(100, 116, 139, 0.9) !important;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  #actionConfirmPopup.is-market-warning .popup.action-confirm-shell {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  #actionConfirmPopup.is-market-warning .action-confirm-content {
    padding: 28px 20px 20px;
  }

  #actionConfirmPopup.is-market-warning .action-confirm-warning-hero {
    margin-bottom: 18px;
  }

  #actionConfirmPopup.is-market-warning .action-confirm-body {
    font-size: 13px;
  }

  #actionConfirmPopup.is-market-warning .action-confirm-actions {
    padding: 18px;
  }

  #actionConfirmPopup.is-market-warning .action-confirm-actions .btn {
    min-height: 46px;
    font-size: 14px;
  }

  #actionConfirmPopup.is-add-trade .popup.action-confirm-shell {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    border-radius: 28px;
  }

  #actionConfirmPopup.is-add-trade .action-confirm-content {
    padding: 28px 20px 20px;
  }

  #actionConfirmPopup.is-add-trade .action-confirm-hero {
    margin-bottom: 18px;
  }

  #actionConfirmPopup.is-add-trade .action-confirm-body {
    font-size: 13px;
  }

  #actionConfirmPopup.is-add-trade .action-confirm-actions {
    padding: 18px;
  }

  #actionConfirmPopup.is-add-trade .action-confirm-actions .btn {
    min-height: 46px;
    font-size: 14px;
  }
}

#allForecastDaysPopup .all-forecast-popup-content {
  display: grid;
  gap: 14px;
}

#allForecastDaysPopup .all-forecast-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#allForecastDaysPopup .all-forecast-summary-card {
  border-radius: 16px;
  border: 1px solid rgba(219, 234, 254, 0.9);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.86));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  padding: 12px 14px;
  min-width: 0;
}

#allForecastDaysPopup .all-forecast-summary-label {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 800;
}

#allForecastDaysPopup .all-forecast-summary-value {
  margin-top: 8px;
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1.1;
  font-weight: 800;
  overflow-wrap: anywhere;
}

#allForecastDaysPopup .all-forecast-summary-meta {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
}

#allForecastDaysPopup .all-forecast-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid rgba(219, 234, 254, 0.92);
  background: rgba(255, 255, 255, 0.72);
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

#allForecastDaysPopup .all-forecast-toolbar-copy {
  min-width: 0;
}

#allForecastDaysPopup .all-forecast-toolbar-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #0f172a;
}

#allForecastDaysPopup .all-forecast-toolbar-subtitle {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

#allForecastDaysPopup .all-forecast-table-shell {
  border-radius: 18px;
  border: 1px solid rgba(219, 234, 254, 0.92);
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

#allForecastDaysPopup .all-forecast-table-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.84);
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.65), rgba(255, 255, 255, 0.42));
}

#allForecastDaysPopup .all-forecast-table-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f172a;
}

#allForecastDaysPopup .all-forecast-table-caption {
  font-size: 11px;
  color: #64748b;
}

.all-forecast-popup-table {
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 2px;
}

#allForecastDaysPopup .all-forecast-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248, 250, 252, 0.95);
  border-bottom: 1px solid rgba(226, 232, 240, 0.86);
}

#allForecastDaysPopup .all-forecast-history-table tbody td {
  vertical-align: middle;
}

#allForecastDaysPopup .all-forecast-history-table tbody tr:not(.history-main-row):nth-child(even) td {
  background: rgba(248, 250, 252, 0.34);
}

#allForecastDaysPopup .all-forecast-history-table .history-main-row td {
  background: transparent;
}

#allForecastDaysPopup .all-forecast-history-table .history-main-row:hover td {
  background: rgba(239, 246, 255, 0.52);
}

#allForecastDaysPopup .all-forecast-row-title {
  color: #0f172a;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  font-family: var(--mono);
}

#allForecastDaysPopup .all-forecast-row-sub {
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.2;
}

#allForecastDaysPopup .all-forecast-range-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .all-forecast-range-arrow {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(248, 250, 252, 0.9);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.all-forecast-session-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

.all-forecast-session-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid var(--border-bright);
  background: rgba(248, 250, 252, 0.95);
  color: #475569;
  white-space: nowrap;
}

.all-forecast-session-open {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(236, 253, 245, 0.96);
  color: #047857;
}

.all-forecast-session-after {
  border-color: rgba(139, 92, 246, 0.24);
  background: rgba(245, 243, 255, 0.96);
  color: #6d28d9;
}

.all-forecast-session-closed {
  border-color: rgba(244, 63, 94, 0.24);
  background: rgba(255, 241, 242, 0.96);
  color: #be123c;
}

.all-forecast-session-pre {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.96);
  color: #b45309;
}

.all-forecast-session-unknown {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(248, 250, 252, 0.95);
  color: #64748b;
}

.all-forecast-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.all-forecast-actions .history-view-btn {
  min-width: 128px;
  padding: 6px 10px;
  font-size: 10px;
}

#allForecastDaysPopup .all-forecast-view-btn {
  min-height: 36px;
  min-width: 132px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#allForecastDaysPopup .all-forecast-history-table .history-main-row.is-selected .all-forecast-view-btn {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-surface) 88%);
  color: var(--cyan);
}

#allForecastDaysPopup .all-forecast-trash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}

#allForecastDaysPopup .all-forecast-trash-btn i {
  font-size: 16px;
  color: inherit;
}

#allForecastDaysPopup .all-forecast-trash-btn:hover {
  color: var(--red) !important;
  border-color: color-mix(in srgb, var(--red) 34%, var(--border-bright) 66%) !important;
  background: color-mix(in srgb, var(--red) 10%, var(--bg-surface) 90%) !important;
}

#allForecastDaysPopup .all-forecast-expand-wrap {
  border-radius: 16px;
  border: 1px solid rgba(219, 234, 254, 0.8);
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(59, 130, 246, 0.07), transparent 60%),
    radial-gradient(130% 130% at 100% 100%, rgba(20, 184, 166, 0.06), transparent 62%),
    rgba(248, 250, 252, 0.62);
  padding: 12px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

#allForecastDaysPopup .all-forecast-expand-head {
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86));
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#allForecastDaysPopup .all-forecast-expand-head .left {
  display: grid;
  gap: 4px;
}

#allForecastDaysPopup .all-forecast-expand-title {
  color: #0f172a;
  font-weight: 800;
  font-size: 12px;
}

#allForecastDaysPopup .all-forecast-expand-sub {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

#allForecastDaysPopup .all-forecast-session-card {
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(226, 232, 240, 0.84);
  background:
    radial-gradient(150% 100% at 0% 0%, rgba(56, 189, 248, 0.06), transparent 58%),
    radial-gradient(130% 100% at 100% 100%, rgba(99, 102, 241, 0.05), transparent 60%),
    rgba(255, 255, 255, 0.9);
  padding: 11px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

#allForecastDaysPopup .all-forecast-session-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent);
}

#allForecastDaysPopup .all-forecast-session-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#allForecastDaysPopup .all-forecast-session-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

#allForecastDaysPopup .all-forecast-stock-pill {
  margin-top: 0;
}

#allForecastDaysPopup .all-forecast-session-card-meta {
  display: grid;
  gap: 2px;
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}

#allForecastDaysPopup .all-forecast-session-card-key {
  font-family: var(--mono);
  font-size: 10px;
  overflow-wrap: anywhere;
}

#allForecastDaysPopup .all-forecast-session-card-right {
  font-size: 11px;
  color: #334155;
  text-align: right;
  line-height: 1.35;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  background: rgba(248, 250, 252, 0.82);
  padding: 6px 8px;
}

#allForecastDaysPopup .all-forecast-day-grid {
  gap: 12px;
}

#allForecastDaysPopup .all-forecast-day-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.93));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  padding: 14px 14px 13px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#allForecastDaysPopup .all-forecast-day-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent);
}

#allForecastDaysPopup .all-forecast-day-card::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.85), rgba(20, 184, 166, 0.85));
  opacity: 0;
  transition: opacity 0.18s ease;
}

#allForecastDaysPopup .all-forecast-day-card:hover {
  transform: translateY(-2px);
  border-color: rgba(147, 197, 253, 0.72);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

#allForecastDaysPopup .all-forecast-day-card:hover::after {
  opacity: 1;
}

#allForecastDaysPopup .all-forecast-day-card .hd-label,
#allForecastDaysPopup .all-forecast-day-card .hd-price,
#allForecastDaysPopup .all-forecast-day-card .hd-meta,
#allForecastDaysPopup .all-forecast-day-card .history-day-actions,
#allForecastDaysPopup .all-forecast-day-card .hd-pill-row {
  position: relative;
  z-index: 1;
}

#allForecastDaysPopup .all-forecast-day-card .hd-pill-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

#allForecastDaysPopup .all-forecast-day-card .hd-label {
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: #64748b;
  text-align: center;
}

#allForecastDaysPopup .all-forecast-day-card .hd-price {
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}

#allForecastDaysPopup .all-forecast-day-card .hd-meta {
  margin-bottom: 10px;
  font-size: 10px;
  line-height: 1.35;
  color: #64748b;
  text-align: center;
}

#allForecastDaysPopup .all-forecast-day-card > div[style*="margin-bottom:8px"] {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px !important;
}

#allForecastDaysPopup .all-forecast-day-card .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: rgba(248, 250, 252, 0.92);
  font-weight: 800;
  letter-spacing: 0.08em;
}

#allForecastDaysPopup .all-forecast-day-card .tag.correct {
  border-color: rgba(34, 197, 94, 0.26);
  background: rgba(240, 253, 244, 0.94);
  color: #15803d;
}

#allForecastDaysPopup .all-forecast-day-card .tag.incorrect {
  border-color: rgba(244, 63, 94, 0.22);
  background: rgba(255, 241, 242, 0.94);
  color: #be123c;
}

#allForecastDaysPopup .all-forecast-day-card .tag.pending {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.94);
  color: #b45309;
}

#allForecastDaysPopup .all-forecast-day-card .history-day-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

#allForecastDaysPopup .all-forecast-day-card .history-day-actions .feedback-btn {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 999px;
  white-space: normal;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.08em;
}

#allForecastDaysPopup .all-forecast-day-card .feedback-note.reverted {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}

#allForecastDaysPopup .all-forecast-empty-state {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.all-forecast-history-table th:nth-child(6),
.all-forecast-history-table td:nth-child(6),
.all-forecast-history-table th:nth-child(7),
.all-forecast-history-table td:nth-child(7) {
  text-align: center;
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-popup-panel {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 58%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--purple) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-popup-header,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-popup-footer {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-card) 68%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-popup-kicker {
  border-color: color-mix(in srgb, var(--cyan) 26%, var(--border-bright) 74%);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: color-mix(in srgb, var(--cyan) 76%, #ffffff 24%);
}

html[data-theme='dark'] #allForecastDaysPopup .popup-title,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-summary-value,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-toolbar-title,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-table-title,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-row-title,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-expand-title {
  color: var(--text-primary);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-popup-subtitle,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-summary-label,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-summary-meta,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-toolbar-subtitle,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-table-caption,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-row-sub,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-expand-sub,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-card-meta,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-history-table thead th {
  color: var(--text-secondary);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-summary-card,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-toolbar,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-table-shell,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-expand-wrap,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-expand-head,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-card,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-deep) 35%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-expand-wrap {
  background:
    radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 60%),
    radial-gradient(130% 130% at 100% 100%, color-mix(in srgb, var(--purple) 8%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg-card) 80%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-expand-head {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-surface) 86%, transparent),
      color-mix(in srgb, var(--bg-hover) 78%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-card {
  background:
    radial-gradient(150% 100% at 0% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 58%),
    radial-gradient(130% 100% at 100% 100%, color-mix(in srgb, var(--purple) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg-card) 82%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-card-right {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 74%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 90%, transparent),
    color-mix(in srgb, var(--bg-hover) 84%, transparent)
  );
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card:hover {
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--border-bright) 58%);
  box-shadow: 0 14px 24px color-mix(in srgb, var(--bg-deep) 40%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cyan) 76%, #ffffff 24%),
    color-mix(in srgb, var(--green) 70%, #ffffff 30%)
  );
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card .hd-label,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card .hd-meta {
  color: var(--text-secondary);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card .tag {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 80%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card .tag.correct {
  border-color: color-mix(in srgb, var(--green) 38%, var(--border-bright) 62%);
  background: color-mix(in srgb, var(--green) 14%, var(--bg-hover) 86%);
  color: color-mix(in srgb, var(--green) 82%, #ffffff 18%);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card .tag.incorrect {
  border-color: color-mix(in srgb, var(--red) 36%, var(--border-bright) 64%);
  background: color-mix(in srgb, var(--red) 14%, var(--bg-hover) 86%);
  color: color-mix(in srgb, var(--red) 82%, #ffffff 18%);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-day-card .tag.pending {
  border-color: color-mix(in srgb, var(--gold) 36%, var(--border-bright) 64%);
  background: color-mix(in srgb, var(--gold) 14%, var(--bg-hover) 86%);
  color: color-mix(in srgb, var(--gold) 82%, #ffffff 18%);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-table-headline {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 74%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-history-table thead th {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-history-table .history-main-row:hover td {
  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-range-arrow {
  border-color: color-mix(in srgb, var(--border-bright) 52%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-pill {
  border-color: color-mix(in srgb, var(--border-bright) 56%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-open {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, var(--green) 18%, var(--bg-hover) 82%);
  color: color-mix(in srgb, var(--green) 76%, #ffffff 24%);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-pre {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, var(--gold) 18%, var(--bg-hover) 82%);
  color: color-mix(in srgb, var(--gold) 82%, #ffffff 18%);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-after {
  border-color: color-mix(in srgb, var(--purple) 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, var(--purple) 18%, var(--bg-hover) 82%);
  color: color-mix(in srgb, var(--purple) 78%, #ffffff 22%);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-session-closed {
  border-color: color-mix(in srgb, var(--red) 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, var(--red) 18%, var(--bg-hover) 82%);
  color: color-mix(in srgb, var(--red) 78%, #ffffff 22%);
}

@media (max-width: 980px) {
  #allForecastDaysPopup .popup {
    width: min(1180px, 97vw);
    min-height: min(820px, 94vh);
    padding: 10px;
  }

  #allForecastDaysPopup .all-forecast-popup-panel {
    min-height: min(800px, calc(94vh - 20px));
  }

  #allForecastDaysPopup .all-forecast-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #allForecastDaysPopup .all-forecast-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #allForecastDaysPopup .all-forecast-session-legend.is-inline {
    justify-content: flex-start;
  }

  .all-forecast-popup-table {
    max-height: min(54vh, 520px);
  }

  #allForecastDaysPopup .all-forecast-session-card-head {
    flex-direction: column;
  }

  #allForecastDaysPopup .all-forecast-session-card-right {
    text-align: left;
  }
}

@media (max-width: 760px) {
  #allForecastDaysPopup .popup {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    padding: 0;
  }

  #allForecastDaysPopup .all-forecast-popup-panel {
    min-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  #allForecastDaysPopup .all-forecast-popup-header {
    padding: 14px 14px 12px;
    gap: 12px;
  }

  #allForecastDaysPopup .popup-title {
    font-size: 1.08rem;
  }

  #allForecastDaysPopup .all-forecast-popup-body {
    padding: 10px 12px;
  }

  #allForecastDaysPopup .all-forecast-popup-footer {
    padding: 12px 12px 16px;
    flex-wrap: wrap;
  }

  #allForecastDaysPopup .all-forecast-popup-footer .btn {
    flex: 1 1 140px;
    justify-content: center;
  }

  #allForecastDaysPopup .all-forecast-summary-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #allForecastDaysPopup .all-forecast-table-headline {
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  #allForecastDaysPopup .all-forecast-session-legend {
    gap: 6px;
  }

  #allForecastDaysPopup .all-forecast-session-pill {
    font-size: 9px;
    min-height: 24px;
    padding: 0 8px;
  }

  #allForecastDaysPopup .all-forecast-history-table {
    min-width: 940px;
  }
}

/* ===== All Stored Forecast Days (Modern Refresh) ===== */
#allForecastDaysPopup {
  z-index: 12000;
}

#allForecastDaysPopup.popup-overlay {
  overflow-y: auto;
}

#allForecastDaysPopup .popup.all-forecast-modern-shell {
  width: min(1400px, 96vw);
  max-width: 1400px;
  min-height: min(860px, 94vh);
  max-height: calc(100vh - 24px);
  border-radius: 24px;
  padding: 0;
  border: 1px solid #ffffff;
  background: #ffffff;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

#allForecastDaysPopup .popup.all-forecast-modern-shell::before {
  content: none !important;
}

#allForecastDaysPopup .all-forecast-modern-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: min(860px, 94vh);
  background: #ffffff;
}

#allForecastDaysPopup .all-forecast-modern-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 16px;
  background: #ffffff;
}

#allForecastDaysPopup .all-forecast-modern-header-copy {
  min-width: 0;
}

#allForecastDaysPopup .all-forecast-modern-title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0f172a;
}

#allForecastDaysPopup .all-forecast-modern-subtitle {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}

#allForecastDaysPopup .all-forecast-modern-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#allForecastDaysPopup .all-forecast-modern-close i {
  font-size: 18px;
}

#allForecastDaysPopup .all-forecast-modern-close:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

#allForecastDaysPopup .all-forecast-modern-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(248, 250, 252, 0.5);
  border-top: 1px solid #f1f5f9;
  padding-bottom: 12px;
}

#allForecastDaysPopup .all-forecast-modern-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px 20px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
}

#allForecastDaysPopup .all-forecast-modern-export {
  min-height: 46px;
  padding: 0 28px;
  border-radius: 12px;
  border: 2px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#allForecastDaysPopup .all-forecast-modern-export:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

#allForecastDaysPopup .afw-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 12px;
}

#allForecastDaysPopup .afw-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#allForecastDaysPopup .afw-metric-card {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  padding: 16px;
}

#allForecastDaysPopup .afw-metric-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#allForecastDaysPopup .afw-metric-value {
  margin-top: 8px;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#allForecastDaysPopup .afw-metric-value-session {
  font-size: 20px;
}

#allForecastDaysPopup .afw-metric-sub {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
}

#allForecastDaysPopup .afw-library-shell {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#allForecastDaysPopup .afw-library-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

#allForecastDaysPopup .afw-library-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0f172a;
}

#allForecastDaysPopup .afw-library-caption {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

#allForecastDaysPopup .afw-grid-head,
#allForecastDaysPopup .afw-row-main {
  display: grid;
  grid-template-columns: minmax(220px, 3fr) minmax(220px, 3fr) minmax(180px, 2fr) 72px 80px 140px 70px;
  gap: 12px;
  align-items: center;
}

#allForecastDaysPopup .afw-grid-head {
  padding: 10px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#allForecastDaysPopup .afw-grid-head .is-center {
  text-align: center;
}

#allForecastDaysPopup .afw-grid-head .is-right {
  text-align: right;
}

#allForecastDaysPopup .afw-grid-body {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  max-height: min(58vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#allForecastDaysPopup .afw-row {
  border-bottom: 1px solid #f1f5f9;
}

#allForecastDaysPopup .afw-row:last-child {
  border-bottom: 0;
}

#allForecastDaysPopup .afw-row-main {
  min-height: 72px;
  padding: 12px 18px;
  transition: background 0.18s ease;
  cursor: pointer;
}

#allForecastDaysPopup .afw-row-main:hover {
  background: #f8fafc;
}

#allForecastDaysPopup .afw-row.is-open .afw-row-main {
  background: rgba(248, 250, 252, 0.7);
}

#allForecastDaysPopup .afw-cell {
  min-width: 0;
}

#allForecastDaysPopup .afw-row-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

#allForecastDaysPopup .afw-row-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

#allForecastDaysPopup .afw-cell-range {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

#allForecastDaysPopup .afw-cell-count {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

#allForecastDaysPopup .afw-cell.is-center {
  text-align: center;
}

#allForecastDaysPopup .afw-cell.is-right {
  text-align: right;
}

#allForecastDaysPopup .afw-session-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#allForecastDaysPopup .afw-session-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#allForecastDaysPopup .afw-session-open {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #059669;
}

#allForecastDaysPopup .afw-session-after {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

#allForecastDaysPopup .afw-session-closed {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#allForecastDaysPopup .afw-session-pre {
  border-color: #fde68a;
  background: #fefce8;
  color: #b45309;
}

#allForecastDaysPopup .afw-session-unknown {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

#allForecastDaysPopup .afw-action-btn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#allForecastDaysPopup .afw-row.is-open .afw-action-btn {
  background: #f1f5f9;
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

#allForecastDaysPopup .afw-remove-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

#allForecastDaysPopup .afw-remove-btn i {
  font-size: 15px;
}

#allForecastDaysPopup .afw-remove-btn:hover {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #e11d48;
}

#allForecastDaysPopup .afw-expand-wrap {
  margin: 8px 18px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  padding: 16px;
}

#allForecastDaysPopup .afw-expand-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#allForecastDaysPopup .afw-expand-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

#allForecastDaysPopup .afw-expand-sub {
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
}

#allForecastDaysPopup .afw-expand-variant {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}

#allForecastDaysPopup .afw-session-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  padding: 14px;
}

#allForecastDaysPopup .afw-session-card + .afw-session-card {
  margin-top: 12px;
}

#allForecastDaysPopup .afw-session-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#allForecastDaysPopup .afw-session-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .afw-session-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: #64748b;
}

#allForecastDaysPopup .afw-session-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #475569;
}

#allForecastDaysPopup .afw-session-divider {
  color: #94a3b8;
}

#allForecastDaysPopup .afw-session-feedback .tag {
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fefce8;
  color: #a16207;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#allForecastDaysPopup .afw-session-feedback .tag.correct {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

#allForecastDaysPopup .afw-session-feedback .tag.incorrect {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#allForecastDaysPopup .afw-day-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}

#allForecastDaysPopup .afw-day-card {
  min-width: 170px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

#allForecastDaysPopup .afw-day-pill {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

#allForecastDaysPopup .afw-ticker-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
  background: #ecfdf5;
  color: #059669;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#allForecastDaysPopup .afw-day-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
}

#allForecastDaysPopup .afw-day-price {
  text-align: center;
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #f59e0b;
}

#allForecastDaysPopup .afw-day-price.is-bull {
  color: #10b981;
}

#allForecastDaysPopup .afw-day-price.is-bear {
  color: #f43f5e;
}

#allForecastDaysPopup .afw-day-price.is-neutral {
  color: #f59e0b;
}

#allForecastDaysPopup .afw-day-move {
  text-align: center;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

#allForecastDaysPopup .afw-day-move.is-bull {
  color: #10b981;
}

#allForecastDaysPopup .afw-day-move.is-bear {
  color: #f43f5e;
}

#allForecastDaysPopup .afw-day-meta {
  margin-top: 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
}

#allForecastDaysPopup .afw-day-status {
  margin-top: 10px;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}

#allForecastDaysPopup .afw-day-status .tag {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #fde68a;
  background: #fefce8;
  color: #b45309;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#allForecastDaysPopup .afw-day-status .tag.correct {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

#allForecastDaysPopup .afw-day-status .tag.incorrect {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#allForecastDaysPopup .afw-day-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#allForecastDaysPopup .afw-day-actions .feedback-btn {
  width: 100%;
  min-height: 30px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 8px;
}

#allForecastDaysPopup .afw-day-actions .fb-correct {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

#allForecastDaysPopup .afw-day-actions .fb-incorrect {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#allForecastDaysPopup .afw-day-actions .fb-change {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
}

#allForecastDaysPopup .afw-day-actions .fb-revert {
  border-color: #fcd34d;
  background: #fefce8;
  color: #a16207;
}

#allForecastDaysPopup .afw-day-card .feedback-note.reverted {
  text-align: center;
  margin: 4px 0 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

@media (max-width: 1100px) {
  #allForecastDaysPopup .popup.all-forecast-modern-shell {
    width: min(1400px, 98vw);
  }

  #allForecastDaysPopup .afw-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #allForecastDaysPopup .afw-grid-head,
  #allForecastDaysPopup .afw-row-main {
    min-width: 980px;
  }

  #allForecastDaysPopup .afw-library-shell {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 760px) {
  #allForecastDaysPopup .popup.all-forecast-modern-shell {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    min-height: calc(100vh - 12px);
    border-radius: 20px;
  }

  #allForecastDaysPopup .all-forecast-modern-header {
    padding: 18px 14px 14px;
  }

  #allForecastDaysPopup .all-forecast-modern-title {
    font-size: 20px;
  }

  #allForecastDaysPopup .all-forecast-modern-subtitle {
    font-size: 12px;
  }

  #allForecastDaysPopup .afw-content {
    padding: 0 12px 10px;
  }

  #allForecastDaysPopup .afw-metrics-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #allForecastDaysPopup .afw-library-head {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
  }

  #allForecastDaysPopup .all-forecast-modern-footer {
    padding: 12px 12px 14px;
  }

  #allForecastDaysPopup .all-forecast-modern-export {
    width: 100%;
  }

  #allForecastDaysPopup .afw-expand-wrap {
    margin: 8px 12px 12px;
    padding: 12px;
  }

  #allForecastDaysPopup .afw-grid-body {
    max-height: min(52vh, 500px);
  }

  #allForecastDaysPopup .afw-expand-head {
    flex-direction: column;
  }

  #allForecastDaysPopup .afw-session-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== ALL FORECAST DAYS POPUP REHAUL ===== */
#allForecastDaysPopup .afw-session-feedback .tag.review {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

#allForecastDaysPopup .afw-session-feedback .tag.live {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

#allForecastDaysPopup .afw-session-feedback .tag.upcoming {
  border-color: #dbe7f4;
  background: #f8fafc;
  color: #475569;
}

#allForecastDaysPopup .afw-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

#allForecastDaysPopup .afw-day-band,
#allForecastDaysPopup .afw-day-plan {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
}

#allForecastDaysPopup .afw-day-probs {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

#allForecastDaysPopup .afw-day-probs span {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#allForecastDaysPopup .afw-day-probs .bull {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #bbf7d0;
}

#allForecastDaysPopup .afw-day-probs .neutral {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
}

#allForecastDaysPopup .afw-day-probs .bear {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

#allForecastDaysPopup .afw-day-status {
  margin-top: 10px;
  margin-bottom: 8px;
  display: grid;
  gap: 4px;
  justify-content: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #dbe7f4;
  background: #f8fbff;
}

#allForecastDaysPopup .afw-day-status.tone-correct {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

#allForecastDaysPopup .afw-day-status.tone-incorrect {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#allForecastDaysPopup .afw-day-status.tone-review {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}

#allForecastDaysPopup .afw-day-status.tone-live {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

#allForecastDaysPopup .afw-day-status.tone-upcoming {
  border-color: #dbe7f4;
  background: #f8fafc;
  color: #475569;
}

#allForecastDaysPopup .afw-day-status-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#allForecastDaysPopup .afw-day-status-sub {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
}

#allForecastDaysPopup .afw-history-actions {
  margin-top: auto;
}

@media (max-width: 760px) {
  #allForecastDaysPopup .afw-day-grid {
    grid-template-columns: 1fr;
  }
}

/* Learning History popup modern layout */
#learningHistoryPopup {
  z-index: 12500;
}

#learningHistoryPopup .popup {
  width: min(1180px, 96vw);
  max-width: 1180px;
  min-height: min(820px, 92vh);
  border-radius: 28px;
  padding: 12px;
  overflow: hidden;
}

#learningHistoryPopup .learning-history-popup-panel {
  flex-direction: column;
  height: 100%;
  min-height: min(796px, calc(92vh - 24px));
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, 0.72);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(45, 212, 191, 0.08), transparent 58%),
    radial-gradient(120% 120% at 100% 100%, rgba(59, 130, 246, 0.07), transparent 60%),
    rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

#learningHistoryPopup .learning-history-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42));
}

#learningHistoryPopup .learning-history-popup-header-copy {
  min-width: 0;
}

#learningHistoryPopup .learning-history-popup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(191, 219, 254, 0.95);
  background: rgba(239, 246, 255, 0.86);
  color: #0f766e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#learningHistoryPopup .learning-history-popup-kicker i {
  font-size: 14px;
}

#learningHistoryPopup .popup-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #0f172a;
}

#learningHistoryPopup .learning-history-popup-subtitle {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

#learningHistoryPopup .learning-history-popup-close {
  position: static;
  flex-shrink: 0;
  margin-top: 1px;
}

#learningHistoryPopup .learning-history-popup-body {
  flex: 1;
  padding: 14px 20px;
  overflow: auto;
  background: transparent;
}

#learningHistoryPopup .learning-history-popup-footer {
  margin: 0;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(226, 232, 240, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.58));
}

#learningHistoryPopup .learning-history-popup-content {
  display: grid;
  gap: 14px;
}

#learningHistoryPopup .learning-history-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#learningHistoryPopup .learning-history-summary-card {
  border-radius: 16px;
  border: 1px solid rgba(219, 234, 254, 0.9);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.86));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  padding: 12px 14px;
  min-width: 0;
}

#learningHistoryPopup .learning-history-summary-label {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 800;
}

#learningHistoryPopup .learning-history-summary-value {
  margin-top: 8px;
  color: #0f172a;
  font-size: 1.35rem;
  line-height: 1.1;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

#learningHistoryPopup .learning-history-summary-split {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 700;
}

#learningHistoryPopup .learning-history-summary-meta {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#learningHistoryPopup .learning-history-table-shell {
  border-radius: 18px;
  border: 1px solid rgba(219, 234, 254, 0.92);
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

#learningHistoryPopup .learning-history-table-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.84);
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.65), rgba(255, 255, 255, 0.42));
}

#learningHistoryPopup .learning-history-table-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f172a;
}

#learningHistoryPopup .learning-history-table-caption {
  font-size: 11px;
  color: #64748b;
}

#learningHistoryPopup .learning-history-table-scroll {
  max-height: min(54vh, 520px);
  overflow: auto;
}

#learningHistoryPopup .learning-history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--body);
  font-size: 12px;
  background: transparent;
}

#learningHistoryPopup .learning-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248, 250, 252, 0.94);
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.86);
  text-align: left;
  white-space: nowrap;
}

#learningHistoryPopup .learning-history-table tbody td {
  padding: 11px 12px;
  vertical-align: top;
  border-bottom: 1px solid rgba(226, 232, 240, 0.58);
  background: transparent;
}

#learningHistoryPopup .learning-history-table tbody tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.42);
}

#learningHistoryPopup .learning-history-table tbody tr:hover td {
  background: rgba(239, 246, 255, 0.62);
}

#learningHistoryPopup .learning-history-table th:nth-child(1),
#learningHistoryPopup .learning-history-table td:nth-child(1) { width: 18%; min-width: 150px; }
#learningHistoryPopup .learning-history-table th:nth-child(2),
#learningHistoryPopup .learning-history-table td:nth-child(2) { width: 20%; min-width: 160px; }
#learningHistoryPopup .learning-history-table th:nth-child(3),
#learningHistoryPopup .learning-history-table td:nth-child(3) { width: 19%; min-width: 150px; }
#learningHistoryPopup .learning-history-table th:nth-child(4),
#learningHistoryPopup .learning-history-table td:nth-child(4) { width: 13%; min-width: 110px; }
#learningHistoryPopup .learning-history-table th:nth-child(5),
#learningHistoryPopup .learning-history-table td:nth-child(5) { width: 14%; min-width: 120px; }
#learningHistoryPopup .learning-history-table th:nth-child(6),
#learningHistoryPopup .learning-history-table td:nth-child(6) { width: 16%; min-width: 150px; }

#learningHistoryPopup .learning-history-table th:nth-child(4),
#learningHistoryPopup .learning-history-table td:nth-child(4),
#learningHistoryPopup .learning-history-table th:nth-child(5),
#learningHistoryPopup .learning-history-table td:nth-child(5) {
  text-align: center;
}

#learningHistoryPopup .learning-history-cell-main {
  color: #0f172a;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#learningHistoryPopup .learning-history-cell-sub {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#learningHistoryPopup .learning-history-cell-sub-pnl {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

#learningHistoryPopup .learning-history-forecast-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.95);
  color: #0f172a;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#learningHistoryPopup .learning-dir-pill,
#learningHistoryPopup .learning-source-badge,
#learningHistoryPopup .learning-result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

#learningHistoryPopup .learning-dir-pill {
  color: #475569;
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(148, 163, 184, 0.3);
}

#learningHistoryPopup .learning-dir-pill.bull {
  color: #047857;
  background: rgba(236, 253, 245, 0.96);
  border-color: rgba(16, 185, 129, 0.28);
}

#learningHistoryPopup .learning-dir-pill.bear {
  color: #be123c;
  background: rgba(255, 241, 242, 0.96);
  border-color: rgba(244, 63, 94, 0.24);
}

#learningHistoryPopup .learning-dir-pill.neutral {
  color: #7c3aed;
  background: rgba(245, 243, 255, 0.96);
  border-color: rgba(139, 92, 246, 0.24);
}

#learningHistoryPopup .learning-dir-pill.na {
  color: #64748b;
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(148, 163, 184, 0.22);
}

#learningHistoryPopup .learning-result-badge {
  color: #475569;
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(148, 163, 184, 0.3);
}

#learningHistoryPopup .learning-result-badge.pass {
  background: rgba(236, 253, 245, 0.96);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.28);
}

#learningHistoryPopup .learning-result-badge.fail {
  background: rgba(255, 241, 242, 0.96);
  color: #be123c;
  border-color: rgba(244, 63, 94, 0.24);
}

#learningHistoryPopup .learning-result-badge.auto {
  background: rgba(236, 254, 255, 0.96);
  color: #0f766e;
  border-color: rgba(20, 184, 166, 0.24);
}

#learningHistoryPopup .learning-source-badge {
  background: rgba(241, 245, 249, 0.95);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.25);
}

#learningHistoryPopup .learning-source-badge.feedback {
  background: rgba(239, 246, 255, 0.95);
  color: #0c4a6e;
  border-color: rgba(14, 165, 233, 0.24);
}

#learningHistoryPopup .learning-source-badge.learning {
  background: rgba(240, 253, 250, 0.95);
  color: #0f766e;
  border-color: rgba(20, 184, 166, 0.25);
}

#learningHistoryPopup .learning-source-badge.system {
  background: rgba(248, 250, 252, 0.95);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.25);
}

#learningHistoryPopup .learning-history-source-stack {
  display: grid;
  gap: 5px;
  justify-items: start;
}

#learningHistoryPopup .learning-history-type-label {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#learningHistoryPopup .learning-history-empty-state {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-popup-panel {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 58%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--purple) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-popup-header,
html[data-theme='dark'] #learningHistoryPopup .learning-history-popup-footer {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-card) 68%, transparent);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-popup-kicker {
  border-color: color-mix(in srgb, var(--cyan) 26%, var(--border-bright) 74%);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: color-mix(in srgb, var(--cyan) 76%, #ffffff 24%);
}

html[data-theme='dark'] #learningHistoryPopup .popup-title,
html[data-theme='dark'] #learningHistoryPopup .learning-history-cell-main,
html[data-theme='dark'] #learningHistoryPopup .learning-history-table-title,
html[data-theme='dark'] #learningHistoryPopup .learning-history-summary-value {
  color: var(--text-primary);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-popup-subtitle,
html[data-theme='dark'] #learningHistoryPopup .learning-history-summary-label,
html[data-theme='dark'] #learningHistoryPopup .learning-history-summary-meta,
html[data-theme='dark'] #learningHistoryPopup .learning-history-table-caption,
html[data-theme='dark'] #learningHistoryPopup .learning-history-cell-sub,
html[data-theme='dark'] #learningHistoryPopup .learning-history-type-label,
html[data-theme='dark'] #learningHistoryPopup .learning-history-table thead th {
  color: var(--text-secondary);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-summary-card,
html[data-theme='dark'] #learningHistoryPopup .learning-history-table-shell {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-deep) 35%, transparent);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-table-headline {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 74%, transparent);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-table thead th {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-table tbody td {
  border-color: color-mix(in srgb, var(--border-bright) 44%, transparent);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bg-hover) 46%, transparent);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-table tbody tr:hover td {
  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
}

html[data-theme='dark'] #learningHistoryPopup .learning-history-forecast-pill {
  border-color: color-mix(in srgb, var(--border-bright) 56%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  color: var(--text-primary);
}

@media (max-width: 980px) {
  #learningHistoryPopup .popup {
    width: min(1120px, 97vw);
    min-height: min(780px, 94vh);
    padding: 10px;
  }

  #learningHistoryPopup .learning-history-popup-panel {
    min-height: min(760px, calc(94vh - 20px));
  }

  #learningHistoryPopup .learning-history-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #learningHistoryPopup .learning-history-table-scroll {
    max-height: min(52vh, 500px);
  }
}

@media (max-width: 760px) {
  #learningHistoryPopup .popup {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    padding: 0;
  }

  #learningHistoryPopup .learning-history-popup-panel {
    min-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  #learningHistoryPopup .learning-history-popup-header {
    padding: 14px 14px 12px;
    gap: 12px;
  }

  #learningHistoryPopup .popup-title {
    font-size: 1.08rem;
  }

  #learningHistoryPopup .learning-history-popup-body {
    padding: 10px 12px;
  }

  #learningHistoryPopup .learning-history-popup-footer {
    padding: 12px 12px 16px;
    flex-wrap: wrap;
  }

  #learningHistoryPopup .learning-history-popup-footer .btn {
    flex: 1 1 140px;
    justify-content: center;
  }

  #learningHistoryPopup .learning-history-summary-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #learningHistoryPopup .learning-history-table-headline {
    padding: 10px 12px;
  }

  #learningHistoryPopup .learning-history-table {
    min-width: 860px;
  }
}

/* ===== FIRST-TIME WELCOME TOUR ===== */
body.welcome-lock {
  overflow: hidden;
}

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.2vw, 28px);
  background:
    radial-gradient(120% 120% at 8% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 55%),
    radial-gradient(110% 100% at 100% 100%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 58%),
    rgba(10, 18, 34, 0.56);
  backdrop-filter: blur(10px);
}

.welcome-overlay.visible {
  display: flex;
  animation: fadeIn 0.24s ease;
}

.welcome-panel {
  --welcome-accent: var(--cyan);
  width: min(960px, 96vw);
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--welcome-accent) 30%, var(--border-bright) 70%);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--bg-surface) 95%, transparent),
      color-mix(in srgb, var(--bg-hover) 90%, transparent)
    );
  box-shadow:
    0 36px 90px color-mix(in srgb, var(--bg-deep) 54%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
  padding: clamp(16px, 2.2vw, 30px);
  position: relative;
  overflow: hidden;
}

.welcome-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--welcome-accent), color-mix(in srgb, var(--welcome-accent) 38%, #ffffff 62%));
}

.welcome-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.welcome-kicker {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.17em;
  color: color-mix(in srgb, var(--welcome-accent) 74%, var(--text-secondary) 26%);
}

.welcome-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.welcome-progress {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.welcome-progress-seg {
  --seg-accent: var(--cyan);
  position: relative;
  height: 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 65%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  overflow: hidden;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}

.welcome-progress-seg.is-filled {
  border-color: color-mix(in srgb, var(--seg-accent) 40%, var(--border-bright) 60%);
}

.welcome-progress-seg.is-active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--seg-accent) 22%, transparent);
}

.welcome-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--seg-accent) 86%, #ffffff 14%), var(--seg-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--seg-accent) 34%, transparent);
  transition: width 0.34s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.welcome-layout {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

.welcome-visual {
  position: relative;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--welcome-accent) 24%, var(--border-bright) 76%);
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--welcome-accent) 16%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-hover) 88%, transparent);
  min-height: 220px;
  padding: 14px;
  overflow: hidden;
}

.welcome-visual::before {
  content: '';
  position: absolute;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--welcome-accent) 40%, transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

.welcome-visual::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--welcome-accent) 14%, transparent) 0%, transparent 66%);
  pointer-events: none;
}

.welcome-orb {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #ffffff;
  background: radial-gradient(circle at 50% 24%, color-mix(in srgb, #ffffff 33%, var(--welcome-accent) 67%), color-mix(in srgb, var(--welcome-accent) 88%, #0b66a2 12%));
  box-shadow:
    0 16px 30px color-mix(in srgb, var(--welcome-accent) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.welcome-orb::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
  pointer-events: none;
}

.welcome-orb > span {
  position: static;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  pointer-events: none;
}

.welcome-orb-scene {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.welcome-orb-scene .s-stroke {
  fill: none;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.welcome-orb-scene .s-fill {
  fill: rgba(255, 255, 255, 0.96);
}

.welcome-orb-scene .s-soft {
  fill: rgba(255, 255, 255, 0.24);
}

/* Dashboard: radar pulse */
.scene-dashboard .dash-ring-a,
.scene-dashboard .dash-ring-b {
  transform-origin: 50px 50px;
  animation: sceneRadarPulse 1.9s ease-out infinite;
}

.scene-dashboard .dash-ring-b {
  animation-delay: 0.9s;
}

.scene-dashboard .dash-core {
  transform-origin: 50px 50px;
  animation: sceneDiamondSpin 7s linear infinite;
}

.scene-dashboard .dash-dot-a,
.scene-dashboard .dash-dot-b {
  animation: sceneBlink 1.6s ease-in-out infinite;
}

.scene-dashboard .dash-dot-b {
  animation-delay: 0.8s;
}

/* Forecast: live path + marker */
.scene-forecast .forecast-line {
  stroke-dasharray: 116;
  stroke-dashoffset: 116;
  animation: scenePathDraw 1.8s ease-in-out infinite;
}

.scene-forecast .forecast-marker {
  animation: sceneMarkerTravel 1.8s ease-in-out infinite;
}

.scene-forecast .forecast-bar-a,
.scene-forecast .forecast-bar-b,
.scene-forecast .forecast-bar-c {
  transform-origin: center bottom;
  animation: sceneBarsRise 1.5s ease-in-out infinite;
}

.scene-forecast .forecast-bar-b {
  animation-delay: 0.2s;
}

.scene-forecast .forecast-bar-c {
  animation-delay: 0.4s;
}

/* Options: cards + directional pressure */
.scene-options .opt-card-a,
.scene-options .opt-card-b {
  transform-origin: center;
  animation: sceneCardFloat 2.1s ease-in-out infinite;
}

.scene-options .opt-card-b {
  animation-delay: 1.05s;
}

.scene-options .opt-arrow-up {
  animation: sceneArrowUp 1.4s ease-in-out infinite;
}

.scene-options .opt-arrow-down {
  animation: sceneArrowDown 1.4s ease-in-out infinite;
}

/* Tracking: timeline + check draw */
.scene-tracking .track-dot {
  animation: sceneTrackDot 1.8s ease-in-out infinite;
}

.scene-tracking .track-dot-2 {
  animation-delay: 0.45s;
}

.scene-tracking .track-dot-3 {
  animation-delay: 0.9s;
}

.scene-tracking .track-check {
  stroke-dasharray: 62;
  stroke-dashoffset: 62;
  animation: sceneCheckDraw 1.9s ease-in-out infinite;
}

/* Settings: gear + toggle sweep */
.scene-settings .set-gear {
  transform-origin: 34px 50px;
  animation: sceneGearSpin 3.2s linear infinite;
}

.scene-settings .set-toggle-dot {
  animation: sceneToggleSlide 1.7s ease-in-out infinite;
}

@keyframes sceneRadarPulse {
  0% { transform: scale(0.72); opacity: 0; }
  30% { opacity: 0.95; }
  100% { transform: scale(1.22); opacity: 0; }
}

@keyframes sceneDiamondSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sceneBlink {
  0%, 100% { opacity: 0.2; }
  45% { opacity: 1; }
}

@keyframes scenePathDraw {
  0% { stroke-dashoffset: 116; }
  55% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

@keyframes sceneMarkerTravel {
  0%, 100% { transform: translate(0px, 0px); }
  25% { transform: translate(14px, -14px); }
  50% { transform: translate(28px, -8px); }
  75% { transform: translate(43px, -25px); }
}

@keyframes sceneBarsRise {
  0%, 100% { transform: scaleY(0.72); opacity: 0.68; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes sceneCardFloat {
  0%, 100% { transform: translateY(0px); opacity: 0.88; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes sceneArrowUp {
  0%, 100% { transform: translateY(2px); opacity: 0.45; }
  50% { transform: translateY(-2px); opacity: 1; }
}

@keyframes sceneArrowDown {
  0%, 100% { transform: translateY(-2px); opacity: 0.45; }
  50% { transform: translateY(2px); opacity: 1; }
}

@keyframes sceneTrackDot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes sceneCheckDraw {
  0%, 20% { stroke-dashoffset: 62; opacity: 0; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.72; }
}

@keyframes sceneGearSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sceneToggleSlide {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(16px); }
}

.welcome-visual-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.welcome-copy {
  display: flex;
  flex-direction: column;
}

.welcome-step-tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  color: color-mix(in srgb, var(--welcome-accent) 66%, var(--text-secondary) 34%);
  background: color-mix(in srgb, var(--welcome-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--welcome-accent) 26%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
}

.welcome-title {
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(20px, 2.35vw, 30px);
  line-height: 1.16;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.welcome-body {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.68;
}

.welcome-points {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.welcome-point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.55;
}

.welcome-point-dot {
  margin-top: 1px;
  font-size: 11px;
  color: var(--welcome-accent);
}

.welcome-tip {
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--welcome-accent) 24%, transparent);
  background: color-mix(in srgb, var(--welcome-accent) 8%, transparent);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  line-height: 1.5;
}

.welcome-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#welcomeBackBtn[disabled] {
  opacity: 0.42;
  pointer-events: none;
}

#welcomeNextBtn {
  min-width: 176px;
}

@media (max-width: 980px) {
  .welcome-layout {
    grid-template-columns: 1fr;
  }

  .welcome-visual {
    min-height: 178px;
  }

  .welcome-actions {
    justify-content: stretch;
  }

  .welcome-actions .btn {
    flex: 1 1 calc(50% - 5px);
  }

  #welcomeNextBtn {
    flex-basis: 100%;
  }
}

@media (max-width: 640px) {
  .welcome-topline {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .welcome-progress {
    gap: 6px;
  }

  .welcome-orb {
    width: 78px;
    height: 78px;
  }

  .welcome-orb > span {
    width: 44px;
    height: 44px;
  }
}

.history-table th {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.history-table td {
  color: var(--text-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.history-table tr:hover td {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  color: var(--text-primary);
}

.history-expand-cell {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
}

.history-day-card .hd-meta {
  color: var(--text-muted);
}

.tag.correct {
  background: rgba(22, 163, 74, 0.14);
  color: #166534;
}

.tag.incorrect {
  background: rgba(217, 4, 41, 0.14);
  color: #9f1239;
}

.tag.pending {
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}

.tag.call {
  background: rgba(22, 163, 74, 0.1);
  color: #166534;
}

.tag.put {
  background: rgba(217, 4, 41, 0.1);
  color: #9f1239;
}

.alert-item {
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.alert-title {
  color: var(--text-primary);
}

.alert-body {
  color: #475569;
}

.weight-indicator {
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  border-color: var(--border);
}

.weight-bar-track {
  background: color-mix(in srgb, var(--border) 88%, transparent);
}

.weight-bar-fill {
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
}

.weight-value {
  color: var(--cyan-dim);
}

.sim-label,
.engine-live-label,
.log-msg,
.ind-name,
.report-key,
.setting-desc,
.section-subtitle {
  color: var(--text-secondary);
}

.sim-track,
.engine-live-track {
  background: color-mix(in srgb, var(--border) 88%, transparent);
}

.sim-fill.live {
  background: linear-gradient(90deg, #60a5fa, #0284c7);
}

.sim-fill.health {
  background: linear-gradient(90deg, #ef4444, #22c55e);
}

.engine-live-fill {
  background: linear-gradient(90deg, #93c5fd, #0284c7);
}

.engine-live-val,
.ind-val,
.report-val {
  color: var(--text-primary);
}

.risk-badge {
  border-radius: 999px;
}

.risk-low {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.24);
  color: #166534;
}

.risk-medium {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.24);
  color: #92400e;
}

.risk-high {
  background: rgba(217, 4, 41, 0.1);
  border-color: rgba(217, 4, 41, 0.24);
  color: #9f1239;
}

.loading-text,
.log-time,
.alert-time,
.setting-label {
  color: var(--text-secondary);
}

.section-title {
  color: var(--text-primary);
}

.history-favorites-notice {
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 16px;
  padding: 11px 16px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.58;
  min-height: 42px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
  overflow-wrap: anywhere;
}

html[data-theme='dark'] .history-favorites-notice {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-card) 84%, transparent);
  color: color-mix(in srgb, var(--text-primary) 82%, var(--text-secondary) 18%);
}

html[data-theme='dark'] #page-history {
  --pred-shell-bg: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-card) 95%, transparent),
    color-mix(in srgb, var(--bg-surface) 90%, transparent)
  );
  --pred-shell-border: color-mix(in srgb, var(--border-bright) 78%, transparent);
}

html[data-theme='dark'] #page-price-history {
  --price-shell-bg: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-card) 95%, transparent),
    color-mix(in srgb, var(--bg-surface) 90%, transparent)
  );
  --price-shell-border: color-mix(in srgb, var(--border-bright) 78%, transparent);
}

html[data-theme='dark'] #page-history .section-header,
html[data-theme='dark'] #page-price-history .section-header,
html[data-theme='dark'] #page-history .card,
html[data-theme='dark'] #page-price-history .card {
  box-shadow:
    0 14px 30px color-mix(in srgb, #000000 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 9%, transparent);
}

html[data-theme='dark'] #page-history #predictionsTableWrap,
html[data-theme='dark'] #page-price-history #predictionsTableWrap {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

html[data-theme='dark'] #page-history .history-table th,
html[data-theme='dark'] #page-price-history .history-table th {
  background: color-mix(in srgb, var(--bg-hover) 86%, var(--bg-card) 14%);
  color: color-mix(in srgb, var(--text-primary) 78%, var(--text-secondary) 22%);
  border-bottom-color: color-mix(in srgb, var(--border-bright) 76%, transparent);
}

html[data-theme='dark'] #page-history .history-table td,
html[data-theme='dark'] #page-price-history .history-table td {
  color: color-mix(in srgb, var(--text-primary) 90%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] #page-history .history-table tr.history-main-row:hover td,
html[data-theme='dark'] #page-price-history .history-table tr.history-main-row:hover td {
  background: color-mix(in srgb, var(--session-ui-accent) 9%, var(--bg-hover) 91%);
}

html[data-theme='dark'] #page-history .historyv3-summary-card,
html[data-theme='dark'] #page-history .historyv3-context-card,
html[data-theme='dark'] #page-history .historyv3-day-card,
html[data-theme='dark'] #page-history .historyv3-day-stats > div,
html[data-theme='dark'] #allForecastDaysPopup .afw-day-band,
html[data-theme='dark'] #allForecastDaysPopup .afw-day-plan {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--bg-card) 94%, transparent),
      color-mix(in srgb, var(--bg-surface) 90%, transparent)
    );
  box-shadow:
    0 14px 28px color-mix(in srgb, #000000 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent);
}

html[data-theme='dark'] #page-history .historyv3-summary-label,
html[data-theme='dark'] #page-history .historyv3-context-label,
html[data-theme='dark'] #page-history .historyv3-day-stats span,
html[data-theme='dark'] #feedbackPopup .feedback-brief-label,
html[data-theme='dark'] #feedbackPopup .feedback-detail-item-label {
  color: color-mix(in srgb, var(--text-primary) 52%, var(--text-secondary) 48%);
}

html[data-theme='dark'] #page-history .historyv3-summary-value,
html[data-theme='dark'] #page-history .historyv3-context-title,
html[data-theme='dark'] #page-history .historyv3-context-list strong,
html[data-theme='dark'] #page-history .historyv3-day-stats strong,
html[data-theme='dark'] #feedbackPopup .feedback-detail-title,
html[data-theme='dark'] #feedbackPopup .feedback-brief-value,
html[data-theme='dark'] #feedbackPopup .feedback-detail-item-value {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-history .historyv3-summary-sub,
html[data-theme='dark'] #page-history .historyv3-window-copy,
html[data-theme='dark'] #page-history .historyv3-context-copy,
html[data-theme='dark'] #page-history .historyv3-context-list span,
html[data-theme='dark'] #feedbackPopup .feedback-detail-sub,
html[data-theme='dark'] #feedbackPopup .feedback-brief-meta {
  color: color-mix(in srgb, var(--text-primary) 70%, var(--text-secondary) 30%);
}

.page .section-header .section-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.page .section-header .section-subtitle {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-top: 4px;
  max-width: 72ch;
}

html[data-theme='dark'] .page .section-header .section-subtitle {
  color: color-mix(in srgb, var(--text-primary) 68%, var(--text-secondary) 32%);
}

.loader {
  border: 2px solid color-mix(in srgb, var(--border) 95%, transparent);
  border-top-color: var(--cyan);
}

.signal-insight-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.signal-insight {
  background: var(--insight-bg);
  border: 1px solid var(--insight-border);
  border-radius: 12px;
  padding: 10px 11px;
}

.signal-insight-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.signal-insight-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 700;
}

.signal-indicators {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.signal-meter-footer {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.signal-meter-chip {
  border: 1px solid var(--insight-border);
  border-radius: 10px;
  background: var(--insight-bg);
  padding: 8px;
}
.signal-meter-chip-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.signal-meter-chip-value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.signal-tone-bull,
.signal-tone-low {
  color: var(--green);
}

.signal-tone-flat,
.signal-tone-med {
  color: var(--gold);
}

.signal-tone-bear,
.signal-tone-high {
  color: var(--red);
}

.signal-tone-sep {
  color: var(--text-muted);
}

.signal-extra-sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.3;
}

.signal-prob-panel {
  margin-top: 10px;
  border: 1px solid var(--insight-border);
  border-radius: 12px;
  padding: 10px;
  background: var(--insight-bg);
}

.signal-prob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.signal-prob-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.signal-prob-row:last-child {
  margin-bottom: 0;
}

.signal-prob-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.03em;
}

.signal-prob-label.bull { color: var(--green); }
.signal-prob-label.flat { color: var(--gold); }
.signal-prob-label.bear { color: var(--red); }

.signal-prob-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 88%, transparent);
  overflow: hidden;
}

.signal-prob-fill {
  height: 100%;
  border-radius: 999px;
  width: 0%;
}

.signal-prob-fill.bull {
  background: linear-gradient(90deg, var(--green-dim), var(--green));
}

.signal-prob-fill.flat {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}

.signal-prob-fill.bear {
  background: linear-gradient(90deg, var(--red-dim), var(--red));
}

.signal-prob-val {
  text-align: right;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-primary);
}

.signal-prob-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--insight-border) 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
}

.signal-mode-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.signal-mode-card {
  border: 1px solid var(--insight-border);
  border-radius: 10px;
  padding: 8px;
  background: var(--insight-bg);
}

.signal-mode-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.signal-mode-value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-primary);
  font-weight: 700;
}

.signal-bottom-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.signal-bottom-card {
  border: 1px solid var(--insight-border);
  border-radius: 10px;
  background: var(--insight-bg);
  padding: 9px;
}

.signal-bottom-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.signal-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  padding: 5px 0;
  border-top: 1px solid color-mix(in srgb, var(--insight-border) 82%, transparent);
}

.signal-bottom-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.signal-bottom-row strong {
  color: var(--text-primary);
  font-weight: 700;
}

.signal-action-meta {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.4;
}

.dash-forecast-detail,
.sim-focus-detail,
.options-playbook-card,
.acc-plus-wrap,
.acc-graph-shell,
.learning-live-card,
.weight-meta,
.signal-action-box {
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
}

.dash-kpi,
.dash-reason,
.acc-metric,
.learning-live-kpi,
.learning-live-mini-item,
.options-check-item {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent);
}

.options-check-item.ok {
  background: color-mix(in srgb, var(--green) 9%, var(--bg-surface) 91%);
}

.options-check-item.warn {
  background: color-mix(in srgb, var(--orange) 11%, var(--bg-surface) 89%);
}

.options-check-item.block {
  background: color-mix(in srgb, var(--red) 10%, var(--bg-surface) 90%);
}

.ind-row {
  background: var(--insight-bg);
  border: 1px solid var(--insight-border);
  border-radius: 12px;
  padding: 9px 10px;
  display: block;
}

.ind-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ind-name {
  color: var(--text-secondary);
  width: auto;
}

.ind-val {
  margin-left: auto;
  font-size: 10px;
}

.ind-bar-track {
  margin-top: 7px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 88%, transparent);
  overflow: hidden;
}

.ind-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width 0.35s ease, background 0.35s ease;
}

.ind-meta {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.35;
}

#signalMeterContainer :is(#i1dot, #i2dot, #i3dot, #i4dot, #i5dot, #i6dot, #i7dot) {
  margin-left: 10px !important;
  flex: 0 0 auto;
}

#signalMeterContainer :is(#i1val, #i2val, #i3val, #i4val, #i5val, #i6val, #i7val) {
  display: inline-block;
  padding-right: 12px !important;
}

#signalMeterContainer :is(#i1meta, #i2meta, #i3meta, #i4meta, #i5meta, #i6meta, #i7meta) {
  display: block;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ===== COMPOSITE SIGNAL METER REFINEMENT ===== */
#signalMeterContainer.signal-meter-shell {
  --signal-tone: var(--cyan);
  --signal-tone-dim: var(--cyan-dim, var(--cyan));
  --signal-intensity: 0.35;
  --signal-glow-alpha: calc(0.12 + (var(--signal-intensity) * 0.16));
  margin-top: 2px;
  display: grid;
  gap: 12px;
}

#signalMeterContainer.signal-meter-shell .signal-meter-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--insight-border) 84%, transparent);
  background:
    radial-gradient(130% 110% at 10% 0%, color-mix(in srgb, var(--signal-tone) 10%, transparent), transparent 58%),
    radial-gradient(130% 120% at 100% 10%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--insight-bg) 96%, transparent), color-mix(in srgb, var(--bg-surface) 95%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent),
    0 12px 22px color-mix(in srgb, var(--bg-deep) 14%, transparent);
  padding: 11px;
}

#signalMeterContainer.signal-meter-shell .signal-meter-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#signalMeterContainer.signal-meter-shell .signal-meter-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(14px);
  opacity: calc(0.12 + var(--signal-intensity) * 0.1);
  animation: signalMeterOrbFloat 11s ease-in-out infinite;
}

#signalMeterContainer.signal-meter-shell .signal-meter-orb.orb-a {
  width: 140px;
  height: 140px;
  top: -34px;
  left: -18px;
  background: color-mix(in srgb, var(--signal-tone) 58%, transparent);
}

#signalMeterContainer.signal-meter-shell .signal-meter-orb.orb-b {
  width: 160px;
  height: 160px;
  top: 12px;
  right: -44px;
  background: color-mix(in srgb, var(--cyan) 46%, transparent);
  animation-delay: -3.4s;
}

#signalMeterContainer.signal-meter-shell .signal-meter-orb.orb-c {
  width: 120px;
  height: 120px;
  bottom: -42px;
  left: 38%;
  background: color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 40%, transparent);
  animation-delay: -6.6s;
}

#signalMeterContainer.signal-meter-shell .signal-meter-headline,
#signalMeterContainer.signal-meter-shell .signal-meter-scale-top,
#signalMeterContainer.signal-meter-shell .signal-meter-band-shell,
#signalMeterContainer.signal-meter-shell .signal-meter-axis {
  position: relative;
  z-index: 1;
}

#signalMeterContainer.signal-meter-shell .signal-meter-headline {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

#signalMeterContainer.signal-meter-shell .signal-meter-kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--signal-tone) 70%, var(--text-secondary) 30%);
  text-transform: uppercase;
}

#signalMeterContainer.signal-meter-shell .signal-meter-sub {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.42;
  color: var(--text-secondary);
}

#signalMeterContainer.signal-meter-shell .signal-meter-scale-top,
#signalMeterContainer.signal-meter-shell .signal-meter-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  color: var(--text-muted);
}

#signalMeterContainer.signal-meter-shell .signal-meter-scale-top {
  font-size: 9px;
  letter-spacing: 0.12em;
  margin-bottom: 7px;
}

#signalMeterContainer.signal-meter-shell .signal-meter-axis {
  font-size: 8px;
  margin-top: 7px;
}

#signalMeterContainer.signal-meter-shell .signal-meter-band-shell {
  position: relative;
}

#signalMeterContainer.signal-meter-shell .signal-meter-band-grid {
  position: absolute;
  inset: 0 6px;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0;
  pointer-events: none;
}

#signalMeterContainer.signal-meter-shell .signal-meter-band-grid > span {
  border-right: 1px dashed color-mix(in srgb, var(--border-bright) 24%, transparent);
  opacity: 0.9;
}

#signalMeterContainer.signal-meter-shell .signal-meter-band-grid > span:last-child {
  border-right: none;
}

#signalMeterContainer.signal-meter-shell .signal-meter-band-centerline {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--text-primary) 8%, transparent),
    color-mix(in srgb, var(--text-primary) 28%, transparent) 18%,
    color-mix(in srgb, var(--text-primary) 16%, transparent) 82%,
    color-mix(in srgb, var(--text-primary) 5%, transparent)
  );
  pointer-events: none;
}

#signalMeterContainer.signal-meter-shell .signal-meter {
  position: relative;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--insight-border) 76%, transparent);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--red) 56%, var(--bg-hover) 44%) 0%,
      color-mix(in srgb, var(--red-dim) 72%, var(--bg-hover) 28%) 14%,
      color-mix(in srgb, var(--gold) 56%, var(--bg-hover) 44%) 50%,
      color-mix(in srgb, var(--green-dim) 72%, var(--bg-hover) 28%) 86%,
      color-mix(in srgb, var(--green) 58%, var(--bg-hover) 42%) 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000000 8%, transparent),
    0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent);
}

#signalMeterContainer.signal-meter-shell .signal-meter::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.01) 42%, rgba(255,255,255,0.04));
  pointer-events: none;
}

#signalMeterContainer.signal-meter-shell .signal-meter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--signal-needle-left, 50%);
  width: clamp(44px, calc(32px + 38px * var(--signal-intensity)), 88px);
  height: clamp(20px, calc(16px + 16px * var(--signal-intensity)), 34px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal-tone) 34%, transparent);
  filter: blur(7px);
  opacity: calc(0.72 + var(--signal-intensity) * 0.2);
  pointer-events: none;
}

#signalMeterContainer.signal-meter-shell .signal-meter-sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(108deg, rgba(255,255,255,0) 36%, rgba(255,255,255,0.24) 47%, rgba(255,255,255,0) 58%);
  transform: translateX(-120%);
  animation: signalMeterSheen 6.5s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.85;
}

#signalMeterContainer.signal-meter-shell .signal-needle {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: transparent;
  border: none;
  box-shadow: none;
  transition:
    left 720ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease,
    background 240ms ease;
  will-change: left;
  z-index: 2;
}

#signalMeterContainer.signal-meter-shell .signal-needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--signal-tone) 84%, #ffffff 16%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ffffff 44%, transparent),
    0 0 12px color-mix(in srgb, var(--signal-tone) 44%, transparent),
    0 3px 8px rgba(0,0,0,0.14);
  opacity: 0.98;
}

#signalMeterContainer.signal-meter-shell .signal-needle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal-tone) 92%, #ffffff 8%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ffffff 50%, transparent),
    0 0 14px color-mix(in srgb, var(--signal-tone) 52%, transparent);
}

html[data-theme='dark'] #signalMeterContainer.signal-meter-shell .signal-meter {
  border-color: color-mix(in srgb, var(--insight-border) 86%, transparent);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--red) 72%, var(--bg-surface) 28%) 0%,
      color-mix(in srgb, var(--red-dim) 84%, var(--bg-surface) 16%) 14%,
      color-mix(in srgb, var(--gold) 72%, var(--bg-surface) 28%) 50%,
      color-mix(in srgb, var(--green-dim) 84%, var(--bg-surface) 16%) 86%,
      color-mix(in srgb, var(--green) 74%, var(--bg-surface) 26%) 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000000 24%, transparent),
    0 0 0 1px color-mix(in srgb, #000000 14%, transparent);
}

html[data-theme='dark'] #signalMeterContainer.signal-meter-shell .signal-meter::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01) 44%, rgba(255,255,255,0.02));
}

html[data-theme='dark'] #signalMeterContainer.signal-meter-shell .signal-meter::after {
  background: color-mix(in srgb, var(--signal-tone) 42%, transparent);
  filter: blur(8px);
  opacity: calc(0.78 + var(--signal-intensity) * 0.18);
}

html[data-theme='dark'] #signalMeterContainer.signal-meter-shell .signal-needle::before {
  border-color: color-mix(in srgb, var(--signal-tone) 88%, #ffffff 12%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #0b1220 84%, transparent),
    0 0 0 2px color-mix(in srgb, var(--signal-tone) 24%, transparent),
    0 0 16px color-mix(in srgb, var(--signal-tone) 54%, transparent),
    0 4px 10px rgba(0,0,0,0.35);
}

html[data-theme='dark'] #signalMeterContainer.signal-meter-shell .signal-needle::after {
  background: color-mix(in srgb, var(--signal-tone) 94%, #ffffff 6%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #0b1220 70%, transparent),
    0 0 16px color-mix(in srgb, var(--signal-tone) 62%, transparent);
}

#signalMeterContainer.signal-meter-shell .signal-insight-grid {
  margin-top: 2px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#signalMeterContainer.signal-meter-shell .signal-insight {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--insight-bg) 98%, transparent), color-mix(in srgb, var(--bg-surface) 95%, transparent));
  border: 1px solid color-mix(in srgb, var(--insight-border) 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 8px 16px color-mix(in srgb, var(--bg-deep) 9%, transparent);
}

#signalMeterContainer.signal-meter-shell .signal-insight::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal-tone) 18%, transparent), color-mix(in srgb, var(--signal-tone) 62%, transparent), color-mix(in srgb, var(--cyan) 20%, transparent));
  opacity: 0.8;
}

#signalMeterContainer.signal-meter-shell .signal-insight-label {
  font-size: 8px;
  letter-spacing: 0.12em;
  margin-bottom: 5px;
}

#signalMeterContainer.signal-meter-shell .signal-insight-value {
  font-size: 11px;
  line-height: 1.35;
}

#signalMeterContainer.signal-meter-shell .signal-indicators {
  margin-top: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#signalMeterContainer.signal-meter-shell .ind-row {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--insight-border) 86%, transparent);
  background:
    radial-gradient(140% 100% at 0% 0%, color-mix(in srgb, var(--signal-tone) 4%, transparent), transparent 55%),
    linear-gradient(155deg, color-mix(in srgb, var(--insight-bg) 97%, transparent), color-mix(in srgb, var(--bg-surface) 95%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 8px 16px color-mix(in srgb, var(--bg-deep) 8%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

#signalMeterContainer.signal-meter-shell .ind-row::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal-tone) 10%, transparent), color-mix(in srgb, var(--signal-tone) 34%, transparent), color-mix(in srgb, var(--cyan) 14%, transparent));
  opacity: 0.8;
}

#signalMeterContainer.signal-meter-shell .ind-row:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #ffffff 22%, var(--insight-border) 78%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 10px 20px color-mix(in srgb, var(--bg-deep) 11%, transparent);
}

#signalMeterContainer.signal-meter-shell .ind-top {
  gap: 7px;
}

#signalMeterContainer.signal-meter-shell .ind-dot {
  width: 9px;
  height: 9px;
}

#signalMeterContainer.signal-meter-shell .ind-name {
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-primary);
}

#signalMeterContainer.signal-meter-shell .ind-val {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

#signalMeterContainer.signal-meter-shell .ind-bar-track {
  margin-top: 8px;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--border) 90%, transparent), color-mix(in srgb, var(--border-bright) 78%, transparent));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.08),
    inset 0 -1px 1px rgba(0,0,0,0.04);
}

#signalMeterContainer.signal-meter-shell .ind-bar-fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  transition: width 650ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease;
  box-shadow: 0 0 12px rgba(0,0,0,0.04);
}

#signalMeterContainer.signal-meter-shell .ind-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 65%);
  pointer-events: none;
}

#signalMeterContainer.signal-meter-shell .ind-meta {
  margin-top: 7px;
  font-size: 8px;
  line-height: 1.4;
}

#signalMeterContainer.signal-meter-shell #signalInsightPanel {
  margin-top: 0 !important;
}

#signalMeterContainer.signal-meter-shell .signal-extra-card,
#signalMeterContainer.signal-meter-shell .signal-prob-panel,
#signalMeterContainer.signal-meter-shell .signal-mode-card,
#signalMeterContainer.signal-meter-shell .signal-bottom-card {
  border-color: color-mix(in srgb, var(--insight-border) 86%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--insight-bg) 98%, transparent), color-mix(in srgb, var(--bg-surface) 94%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
    0 8px 16px color-mix(in srgb, var(--bg-deep) 7%, transparent);
}

#signalMeterContainer.signal-meter-shell .signal-prob-track {
  height: 9px;
}

#signalMeterContainer.signal-meter-shell .signal-prob-fill {
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 10px color-mix(in srgb, currentColor 14%, transparent);
}

#signalMeterContainer.signal-meter-shell .signal-meter-footer {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#signalMeterContainer.signal-meter-shell .signal-meter-chip {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--insight-border) 86%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--insight-bg) 98%, transparent), color-mix(in srgb, var(--bg-surface) 95%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
    0 8px 15px color-mix(in srgb, var(--bg-deep) 7%, transparent);
}

#signalMeterContainer.signal-meter-shell .signal-meter-chip::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal-tone) 14%, transparent), color-mix(in srgb, var(--signal-tone) 46%, transparent), color-mix(in srgb, var(--cyan) 16%, transparent));
}

#signalMeterContainer.signal-meter-shell .signal-meter-chip-label {
  font-size: 7.5px;
  letter-spacing: 0.11em;
}

#signalMeterContainer.signal-meter-shell .signal-meter-chip-value {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.32;
}

@keyframes signalMeterSheen {
  0% { transform: translateX(-120%); opacity: 0; }
  14% { opacity: 0.85; }
  40% { opacity: 0.45; }
  62%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes signalMeterOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -6px, 0) scale(1.05); }
}

@media (max-width: 1280px) {
  #signalMeterContainer.signal-meter-shell .signal-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #signalMeterContainer.signal-meter-shell .signal-indicators {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  #signalMeterContainer.signal-meter-shell .signal-meter-footer {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #signalMeterContainer.signal-meter-shell .signal-meter-sheen,
  #signalMeterContainer.signal-meter-shell .signal-meter-orb {
    animation: none;
  }
}

.detail-risk-grid {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.detail-risk-item {
  text-align: center;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 65%, transparent);
  border-radius: 10px;
  padding: 10px 8px;
}

.detail-risk-value {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}

.position-plan-table th:last-child,
.position-plan-table td:last-child {
  text-align: center;
}

.position-plan-expand-cell {
  padding: 0 14px 12px;
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
}

.position-plan-expand-wrap {
  padding-top: 6px;
}

.position-plan-table tr.plan-detail-row td {
  background: transparent;
}

.position-plan-table tr.plan-detail-row:hover td {
  background: transparent;
  color: var(--text-secondary);
}

.position-plan-detail {
  margin-top: 0;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 65%, transparent);
  border-radius: 12px;
  padding: 12px;
}

.position-plan-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.position-plan-title-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
}

.position-plan-title {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cyan);
}

.position-plan-date-chip {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1.1;
}

.position-plan-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.position-plan-kpi {
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 10px;
  padding: 8px;
}

.position-plan-kpi .label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.position-plan-kpi .value {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.trade-cal-shell {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--cyan) 14%, transparent) 0%, transparent 44%),
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--green) 12%, transparent) 0%, transparent 48%),
    color-mix(in srgb, var(--bg-hover) 82%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
    0 12px 26px color-mix(in srgb, var(--bg-deep) 22%, transparent);
}

.trade-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.trade-cal-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trade-cal-btn {
  min-height: 28px;
  min-width: 30px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trade-cal-btn:hover {
  border-color: color-mix(in srgb, var(--cyan) 56%, var(--border-bright) 44%);
  color: var(--cyan);
}

.trade-cal-month {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.13em;
  color: var(--text-primary);
}

.trade-cal-month-btn {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.trade-cal-month-btn::after {
  content: '▾';
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.trade-cal-month-btn:hover {
  border-color: color-mix(in srgb, var(--cyan) 56%, var(--border-bright) 44%);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 8%, var(--bg-surface) 92%);
}

.trade-cal-month-btn:hover::after {
  color: var(--cyan);
}

.trade-cal-month-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.trade-cal-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.trade-cal-meta-rich {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.trade-cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.trade-cal-chip strong {
  font-size: 9px;
  color: var(--text-primary);
}

.trade-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.trade-cal-weekday {
  text-align: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.trade-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.trade-cal-day {
  min-height: 68px;
  padding: 6px 6px 5px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.trade-cal-day .day-num {
  position: absolute;
  top: 7px;
  left: 8px;
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted);
}

.trade-cal-day .day-dot {
  margin-top: 0;
  width: 32px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 38%, transparent), color-mix(in srgb, var(--text-muted) 18%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}

.trade-cal-day .day-add-mini {
  width: 14px;
  height: 14px;
  position: relative;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: transparent;
  font-family: var(--mono);
  font-size: 0;
  font-weight: 700;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.trade-cal-day .day-add-mini::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 1.6px;
  border-radius: 999px;
  background: var(--text-secondary);
  transform: translate(-50%, -50%);
}

.trade-cal-day .day-add-mini::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6px;
  height: 7px;
  border-radius: 999px;
  background: var(--text-secondary);
  transform: translate(-50%, -50%);
}

.trade-cal-day .day-add-mini:hover {
  border-color: color-mix(in srgb, var(--cyan) 64%, var(--border-bright) 36%);
  color: transparent;
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-surface) 88%);
}

.trade-cal-day .day-add-mini:hover::before,
.trade-cal-day .day-add-mini:hover::after {
  background: var(--cyan);
}

.trade-cal-day .day-meta {
  margin-top: 0;
  min-height: 22px;
  font-size: 8px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.trade-cal-day .day-meta .day-amount {
  font-size: 9px;
  letter-spacing: 0.02em;
}

.trade-cal-day .day-meta .day-state {
  font-size: 7px;
  letter-spacing: 0.08em;
}

.trade-cal-day.in-month:hover {
  border-color: color-mix(in srgb, var(--cyan) 40%, var(--border-bright) 60%);
  transform: translateY(-1px);
}

.trade-cal-day.today {
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--border-bright) 48%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 26%, transparent);
}

.trade-cal-day.selected {
  border-color: color-mix(in srgb, var(--cyan) 66%, var(--border-bright) 34%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cyan) 40%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cyan) 14%, transparent);
}

.trade-cal-day.today .day-num {
  color: var(--cyan);
}

.trade-cal-day.outside-month {
  opacity: 0.5;
}

.trade-cal-day.has-trade {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--green) 42%, var(--border-bright) 58%);
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--green) 20%, transparent) 0%, transparent 45%),
    color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

.trade-cal-day.has-trade .day-dot {
  box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 22%, transparent);
}

.trade-cal-day.has-trade .day-dot.profit {
  background: linear-gradient(90deg, color-mix(in srgb, var(--green) 62%, #ffffff 38%), var(--green));
  box-shadow: 0 0 12px color-mix(in srgb, var(--green) 54%, transparent);
}

.trade-cal-day.has-trade .day-dot.loss {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 72%, #ff8a00 28%), #ff8a00);
  box-shadow: 0 0 12px color-mix(in srgb, #ff8a00 48%, transparent);
}

.trade-cal-day.has-trade .day-dot.major-loss {
  background: linear-gradient(90deg, color-mix(in srgb, var(--red) 60%, #ff7a7a 40%), var(--red));
  box-shadow: 0 0 12px color-mix(in srgb, var(--red) 56%, transparent);
}

.trade-cal-day.has-trade .day-dot.flat {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 38%, transparent), color-mix(in srgb, var(--cyan) 58%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 36%, transparent);
}

.trade-cal-day.has-trade .day-meta.profit {
  color: var(--green);
}

.trade-cal-day.has-trade .day-meta.loss {
  color: #ff9a24;
}

.trade-cal-day.has-trade .day-meta.major-loss {
  color: var(--red);
}

.trade-cal-day.has-trade .day-meta.flat {
  color: var(--cyan);
}

@keyframes trade-detail-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.985) translateY(14px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes trade-detail-section-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes trade-detail-card-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes trade-detail-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes trade-detail-modal-launch {
  from {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    filter: blur(6px);
    transform: scale(0.985) translateY(10px);
  }
}

@keyframes trade-detail-icon-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes trade-detail-glow-pulse {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

#tradeDayPopup.popup-overlay {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  padding: 20px 16px;
  z-index: 12000;
}

#tradeDayPopup .trade-day-popup {
  width: min(960px, calc(100vw - 32px));
  max-width: 960px;
  max-height: min(90vh, 980px);
  min-height: min(560px, calc(100vh - 40px));
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 40px;
  background: #ffffff !important;
  background-image: none !important;
  backdrop-filter: blur(26px);
  box-shadow: 0 32px 64px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

#tradeDayPopup.visible .trade-day-popup {
  animation: trade-detail-modal-enter 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

#tradeDayPopup.is-launching-editor .trade-day-popup {
  animation: trade-detail-modal-launch 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

#tradeDayPopup .trade-day-popup::before {
  display: none;
}

#tradeDayPopup .trade-day-popup::after,
#tradeDayPopup .trade-day-popup > .popup-title::before,
#tradeDayPopup .trade-day-popup > .popup-title::after,
#tradeDayPopup .trade-day-popup > .popup-body::before,
#tradeDayPopup .trade-day-popup > .popup-body::after {
  display: none !important;
  content: none !important;
}

#tradeDayPopup .trade-day-popup-title-wrap,
#tradeDayPopup .trade-day-popup-body,
#tradeDayPopup .trade-day-popup-footer,
#tradeDayPopup .trade-detail-modal-header,
#tradeDayPopup .trade-detail-modal-shell,
#tradeDayPopup .trade-detail-modal-overview-panel,
#tradeDayPopup .trade-detail-modal-card,
#tradeDayPopup .trade-detail-modal-card-head {
  background: transparent !important;
  background-image: none !important;
}

#tradeDayPopup .popup-title {
  margin: 0;
  padding: 0;
}

#tradeDayPopup .popup-body {
  margin: 0;
  padding: 0 32px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

#tradeDayPopup .popup-actions {
  margin: 0;
  padding: 20px 32px 24px;
  justify-content: flex-end;
  align-items: center;
  background: #ffffff;
  border-top: 1px solid rgba(226, 232, 240, 0.82);
  backdrop-filter: blur(20px);
}

.trade-detail-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 20px;
  background: #ffffff;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
}

.trade-detail-modal-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trade-detail-modal-title {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-sans) !important;
  font-size: clamp(24px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.trade-detail-modal-title-sep {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d1d5db;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.trade-detail-modal-title-date {
  color: #3b82f6;
  font-weight: 600;
}

.trade-detail-modal-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
}

.trade-detail-modal-subtitle-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(209, 213, 219, 0.82);
}

.trade-detail-modal-close {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #ffffff;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.trade-detail-modal-close:hover {
  background: #ffffff;
  border-color: rgba(209, 213, 219, 0.8);
  color: #374151;
}

.trade-detail-modal-close:active {
  transform: scale(0.92);
}

.trade-day-popup-body {
  background: transparent;
  flex: 1 1 auto;
  min-height: 0;
}

.trade-detail-modal-loading {
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 40px 0;
  text-align: center;
  font-family: var(--font-sans) !important;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
}

.trade-detail-modal-empty-state {
  min-height: 460px;
  padding: 64px 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.trade-detail-modal-empty-visual {
  position: relative;
  width: 124px;
  height: 124px;
  margin-bottom: 32px;
  display: grid;
  place-items: center;
}

.trade-detail-modal-empty-glow {
  position: absolute;
  inset: 16px;
  border-radius: 999px;
  background: rgba(186, 230, 253, 0.55);
  filter: blur(28px);
  animation: trade-detail-glow-pulse 2.8s ease-in-out infinite;
}

.trade-detail-modal-empty-card {
  position: relative;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(243, 244, 246, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 42px;
  animation: trade-detail-icon-float 3s ease-in-out infinite;
}

.trade-detail-modal-empty-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.trade-detail-modal-empty-title {
  margin: 0 0 12px;
  font-family: var(--font-sans) !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

.trade-detail-modal-empty-copy {
  max-width: 340px;
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  color: #6b7280;
}

.trade-detail-modal-primary-btn {
  margin-top: 40px;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans) !important;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.trade-detail-modal-primary-btn i {
  font-size: 16px;
  transition: transform 0.18s ease;
}

.trade-detail-modal-primary-btn:hover {
  background: #1d4ed8;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.28);
}

.trade-detail-modal-primary-btn:hover i {
  transform: rotate(90deg);
}

.trade-detail-modal-primary-btn:active {
  transform: scale(0.96);
}

.trade-detail-modal-shell {
  display: grid;
  gap: 32px;
  padding: 28px 0 32px;
}

.trade-detail-modal-section {
  display: grid;
  gap: 12px;
  animation: trade-detail-section-enter 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.trade-detail-modal-section:nth-child(2) {
  animation-delay: 70ms;
}

.trade-detail-modal-section-title {
  padding-left: 8px;
  font-family: var(--font-sans) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
}

.trade-detail-modal-overview-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid rgba(243, 244, 246, 0.95);
  border-radius: 24px;
  background: #ffffff;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.trade-detail-modal-overview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(243, 244, 246, 0.9);
}

.trade-detail-modal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trade-detail-modal-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
}

.trade-detail-modal-chip-primary {
  border-color: rgba(191, 219, 254, 0.9);
  background: #eff6ff;
  color: #2563eb;
}

.trade-detail-modal-overview-copy {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: #6b7280;
  text-align: right;
}

.trade-detail-modal-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 16px;
  align-items: stretch;
}

.trade-detail-modal-stat {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(243, 244, 246, 0.9);
  text-align: left;
}

.trade-detail-modal-stat.is-first {
  padding-left: 0;
  border-left: 0;
  text-align: left;
}

.trade-detail-modal-stat-net {
  background: transparent;
}

.trade-detail-modal-stat-label {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
}

.trade-detail-modal-stat-value {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans) !important;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

.trade-detail-modal-stat-value.is-complete {
  color: #10b981;
}

.trade-detail-modal-stat-value.is-open {
  color: #111827;
}

.trade-detail-modal-stat-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.trade-detail-modal-summary-pill.stock-symbol-pill,
.trade-detail-modal-symbol-pill.stock-symbol-pill {
  min-height: 26px;
  border-radius: 8px;
  font-size: 11px;
  border-color: rgba(229, 231, 235, 0.92) !important;
  background: #ffffff !important;
  color: #374151 !important;
}

.trade-detail-modal-summary-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 800;
  color: #4b5563;
}

.trade-detail-modal-summary-slash {
  color: #d1d5db;
  margin: 0 4px;
}

.trade-detail-modal-summary-dash {
  color: #9ca3af;
}

.trade-detail-modal-list {
  overflow: visible;
  display: grid;
  gap: 16px;
}

.trade-detail-modal-card {
  border: 1px solid rgba(243, 244, 246, 0.95);
  border-radius: 24px;
  background: #ffffff;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  overflow: visible;
  animation: trade-detail-card-enter 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--trade-card-delay, 0ms);
}

.trade-detail-modal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: transparent;
  border-bottom: 1px solid rgba(243, 244, 246, 0.9);
  position: relative;
  z-index: 4;
}

.trade-detail-modal-card-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.trade-detail-modal-option-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(229, 231, 235, 0.92);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
}

.trade-detail-modal-option-tag.call {
  border-color: rgba(167, 243, 208, 0.9);
  background: #ecfdf5;
  color: #047857;
}

.trade-detail-modal-option-tag.put {
  border-color: rgba(254, 205, 211, 0.95);
  background: #fff1f2;
  color: #e11d48;
}

.trade-detail-modal-option-tag.neutral {
  background: #ffffff;
}

.trade-detail-modal-strike {
  font-family: var(--font-sans) !important;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
}

.trade-detail-modal-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.trade-detail-modal-time {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans) !important;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
}

.trade-detail-modal-time i {
  color: #d1d5db;
}

.trade-day-item-actions {
  position: relative;
  z-index: 30;
}

.trade-day-menu-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 999px;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.trade-day-menu-btn:hover {
  border-color: rgba(209, 213, 219, 0.95);
  background: #ffffff !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  color: #111827;
}

.trade-day-menu-btn:active {
  transform: scale(0.94);
}

.trade-day-item-actions.open .trade-day-menu-btn {
  border-color: rgba(229, 231, 235, 0.95);
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  color: #111827;
}

.trade-day-item-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  width: 224px;
  padding: 6px;
  border: 1px solid rgba(243, 244, 246, 0.92);
  border-radius: 20px;
  background: #ffffff !important;
  backdrop-filter: blur(24px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  z-index: 60;
}

.trade-day-item-actions.open .trade-day-item-menu {
  display: grid;
  gap: 2px;
  animation: trade-detail-menu-enter 0.18s ease both;
}

.trade-day-item-menu button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #4b5563;
  font-family: var(--font-sans) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trade-day-item-menu button:hover {
  background: rgba(243, 244, 246, 0.88);
  color: #111827;
}

.trade-day-item-menu button i {
  font-size: 16px;
  color: #9ca3af;
}

.trade-day-item-menu button.danger:hover {
  background: #fff1f2;
  color: #e11d48;
}

.trade-day-item-menu button.danger i {
  color: #f87171;
}

.trade-day-item-menu-divider {
  height: 1px;
  margin: 4px 8px;
  background: rgba(243, 244, 246, 0.95);
}

.trade-detail-modal-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(160px, 1.1fr);
  gap: 28px 16px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.trade-detail-modal-data-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trade-detail-modal-data-label {
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
}

.trade-detail-modal-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.trade-detail-modal-status-pill.is-open {
  border-color: rgba(191, 219, 254, 0.95);
  background: #eff6ff;
  color: #2563eb;
}

.trade-detail-modal-status-pill.is-complete {
  border-color: rgba(167, 243, 208, 0.92);
  background: #ecfdf5;
  color: #059669;
}

.trade-detail-modal-data-value {
  font-family: var(--font-sans) !important;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  color: #111827;
  word-break: break-word;
}

.trade-detail-modal-data-value.is-mono {
  color: #6b7280;
}

.trade-detail-modal-data-value.is-complete,
.trade-detail-modal-data-value.is-positive {
  color: #10b981;
}

.trade-detail-modal-data-value.is-open {
  color: #111827;
}

.trade-detail-modal-data-value.is-negative {
  color: #e11d48;
}

.trade-detail-modal-data-value.is-muted {
  color: #9ca3af;
}

.trade-detail-modal-pnl-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  grid-column: 5;
  grid-row: span 2;
  min-width: 160px;
  border: 1px solid rgba(243, 244, 246, 0.95);
  border-radius: 16px;
  background: #ffffff;
  padding: 18px;
  position: relative;
  z-index: 0;
}

.trade-detail-modal-pnl-value {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.04em;
  word-break: normal;
}

.trade-detail-modal-pnl-cell-mobile {
  display: none;
  position: relative;
  z-index: 0;
}

.trade-detail-modal-notes {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 24px 24px;
  position: relative;
  z-index: 1;
}

.trade-detail-modal-notes-label {
  flex: 0 0 auto;
  margin-top: 2px;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
  width: 60px;
}

.trade-detail-modal-notes p {
  margin: 0;
  flex: 1;
  padding: 14px 16px;
  border: 1px solid rgba(243, 244, 246, 0.95);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  font-family: var(--font-sans) !important;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
  color: #4b5563;
}

.trade-detail-modal-notes.is-empty p {
  color: #9ca3af;
}

.trade-detail-modal-footer-btn {
  min-height: 54px;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 20px;
  border: 1px solid rgba(229, 231, 235, 0.9) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #4b5563 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.trade-detail-modal-footer-btn svg {
  transition: transform 0.18s ease;
}

.trade-detail-modal-footer-btn.is-primary:hover svg,
#tradeDayPopup.is-launching-editor .trade-detail-modal-footer-btn.is-primary svg {
  transform: rotate(90deg);
}

.trade-detail-modal-footer-btn:hover {
  border-color: rgba(209, 213, 219, 0.92) !important;
  background: #ffffff !important;
  color: #374151 !important;
}

.trade-detail-modal-footer-btn:active {
  transform: scale(0.98);
}

.trade-detail-modal-footer-btn.is-primary {
  border-color: transparent !important;
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.trade-detail-modal-footer-btn.is-primary:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

.trade-detail-modal-footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

@media (max-width: 720px) {
  #tradeDayPopup.popup-overlay {
    padding: 12px;
  }

  #tradeDayPopup .trade-day-popup {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    min-height: auto;
    border-radius: 32px;
  }

  .trade-detail-modal-header {
    padding: 24px 24px 18px;
  }

  #tradeDayPopup .popup-body {
    padding: 0 24px;
  }

  #tradeDayPopup .popup-actions {
    padding: 18px 24px 24px;
  }

  .trade-detail-modal-overview-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .trade-detail-modal-overview-copy {
    text-align: left;
  }

  .trade-detail-modal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  .trade-detail-modal-stat {
    padding-left: 0;
    border-left: 0;
  }

  .trade-detail-modal-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 20px 20px 0;
  }

  .trade-detail-modal-card-head {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .trade-detail-modal-card-actions {
    width: 100%;
    justify-content: space-between;
  }

  .trade-detail-modal-pnl-cell {
    display: none;
  }

  .trade-detail-modal-pnl-cell-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    gap: 6px;
    padding: 18px;
    margin-top: 4px;
    border: 1px solid rgba(243, 244, 246, 0.95);
    border-radius: 16px;
    background: #ffffff;
    text-align: center;
  }

  .trade-detail-modal-notes {
    padding: 0 20px 20px;
  }
}

@media (max-width: 520px) {
  .trade-detail-modal-title {
    font-size: 22px;
  }

  .trade-detail-modal-card-meta {
    gap: 6px;
  }

  .trade-detail-modal-strike {
    font-size: 16px;
  }

  .trade-detail-modal-notes {
    flex-direction: column;
    gap: 8px;
  }

  .trade-detail-modal-empty-state {
    min-height: 400px;
    padding: 48px 0 56px;
  }

  .trade-detail-modal-empty-card {
    width: 88px;
    height: 88px;
  }

  .trade-detail-modal-empty-title {
    font-size: 18px;
  }

  .trade-detail-modal-empty-copy {
    font-size: 14px;
  }

  .trade-detail-modal-primary-btn {
    width: 100%;
  }

  .trade-detail-modal-footer-actions {
    flex-direction: column;
  }
}

/* Neutral popup surface cleanup outside Learning Center */
.popup-overlay {
  background: rgba(3, 10, 22, 0.44) !important;
  backdrop-filter: blur(8px) !important;
}

.popup::before,
.run-ultron-popup::before,
.signout-session-popup::before {
  display: none !important;
}

#learningHistoryPopup.popup-overlay {
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, #38bdf8 14%, transparent), transparent 56%),
    radial-gradient(130% 120% at 100% 100%, color-mix(in srgb, #14b8a6 11%, transparent), transparent 62%),
    rgba(3, 10, 22, 0.48) !important;
  backdrop-filter: blur(10px) !important;
}

/* ===== TRACKING PAGE REDESIGN ===== */
#page-tracking .tracking-shell {
  display: grid;
  gap: 16px;
}

#page-tracking .tracking-hero {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-surface) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
  box-shadow:
    0 16px 32px color-mix(in srgb, var(--bg-deep) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
  isolation: isolate;
}

#page-tracking .tracking-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--cyan) 18%, transparent) 0%, transparent 44%),
    radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--green) 12%, transparent) 0%, transparent 48%);
  opacity: 0.78;
}

#page-tracking .tracking-hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

#page-tracking .tracking-hero-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

#page-tracking .tracking-flow-fill {
  fill: url(#trackFlowGradA);
  opacity: 0.68;
  animation: trackingFlowFillBreathe 4.6s ease-in-out infinite;
}

#page-tracking .tracking-flow-path {
  fill: none;
  stroke: url(#trackFlowGradB);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 10;
}

#page-tracking .tracking-flow-a {
  animation: trackingFlowDriftA 7s linear infinite;
}

#page-tracking .tracking-flow-b {
  stroke-width: 1.7;
  opacity: 0.84;
  stroke-dasharray: 9 11;
  animation: trackingFlowDriftB 8.6s linear infinite;
}

#page-tracking .tracking-flow-dot {
  fill: color-mix(in srgb, var(--cyan) 78%, #ffffff 22%);
  opacity: 0.86;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cyan) 34%, transparent));
}

#page-tracking .tracking-flow-dot.dot-a {
  animation: trackingDotPulse 2.5s ease-in-out infinite;
}

#page-tracking .tracking-flow-dot.dot-b {
  animation: trackingDotPulse 2.8s ease-in-out infinite 0.6s;
}

#page-tracking .tracking-flow-dot.dot-c {
  animation: trackingDotPulse 3.1s ease-in-out infinite 0.3s;
}

@keyframes trackingFlowDriftA {
  to { stroke-dashoffset: -170; }
}

@keyframes trackingFlowDriftB {
  to { stroke-dashoffset: -190; }
}

@keyframes trackingFlowFillBreathe {
  0%, 100% { opacity: 0.56; }
  50% { opacity: 0.9; }
}

@keyframes trackingDotPulse {
  0%, 100% { transform: scale(0.82); opacity: 0.58; }
  55% { transform: scale(1.2); opacity: 1; }
}

#page-tracking .tracking-hero-head,
#page-tracking .tracking-hero-meta {
  position: relative;
  z-index: 1;
}

#page-tracking .tracking-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#page-tracking .tracking-add-btn {
  min-height: 36px;
  padding-inline: 14px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

#page-tracking .tracking-hero-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#page-tracking .tracking-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.11em;
  color: var(--text-secondary);
}

#page-tracking .tracking-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-tracking .tracking-kpi-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
}

#page-tracking .tracking-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--cyan) 14%, transparent) 0%, transparent 46%);
  opacity: 0.82;
}

#page-tracking .tracking-kpi-card > * {
  position: relative;
  z-index: 1;
}

#page-tracking .tracking-kpi-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  opacity: 0.62;
  pointer-events: none;
}

#page-tracking .tracking-kpi-wave path {
  fill: none;
  stroke: color-mix(in srgb, var(--cyan) 70%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8 8;
  animation: trackingKpiFlow 3.8s linear infinite;
}

#page-tracking .tracking-kpi-card.pnl .tracking-kpi-wave path {
  stroke: color-mix(in srgb, var(--green) 64%, var(--cyan) 36%);
}

#page-tracking .tracking-kpi-card.win .tracking-kpi-wave path {
  stroke: color-mix(in srgb, var(--gold) 70%, var(--cyan) 30%);
}

#page-tracking .tracking-kpi-card.best .tracking-kpi-wave path {
  stroke: color-mix(in srgb, var(--cyan) 72%, #22d3ee 28%);
}

@keyframes trackingKpiFlow {
  to { stroke-dashoffset: -110; }
}

#page-tracking .tracking-form-card {
  padding-top: 14px;
  border-style: dashed;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--bg-surface) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 90%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent),
    0 12px 24px color-mix(in srgb, var(--bg-deep) 16%, transparent);
}

#tradeEditorPopup .popup {
  width: min(1040px, 95vw);
  max-width: 1040px;
  padding: 18px 18px 16px;
}

#tradeEditorPopup .trade-editor-popup-body {
  margin-bottom: 0;
}

#tradeEditorPopup .tracking-form-card {
  border-style: solid;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border-bright) 72%);
  box-shadow: none;
  margin: 0;
}

#tradeCompletePopup .popup {
  max-width: 520px;
}

.trade-complete-detail {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.45;
}

.trade-complete-field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.trade-complete-field .stat-label {
  font-size: 9px;
}

.trade-complete-hint {
  min-height: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
}

#page-tracking .tracking-form-head {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

#page-tracking .tracking-form-hint {
  margin: 0;
}

#page-tracking .tracking-form-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

#page-tracking .tracking-form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#page-tracking .tracking-field {
  display: grid;
  gap: 6px;
}

#page-tracking .tracking-field-wide {
  margin-bottom: 12px;
}

#page-tracking .tracking-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-tracking .tracking-form-card .input-field {
  min-height: 38px;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
}

#tradeEditorPopup .trade-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#tradeEditorPopup .trade-status-btn {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

#tradeEditorPopup .trade-status-btn:hover {
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--border-bright) 48%);
  color: var(--text-primary);
}

#tradeEditorPopup .trade-status-btn.active {
  border-color: color-mix(in srgb, var(--cyan) 58%, var(--border-bright) 42%);
  background: color-mix(in srgb, var(--cyan) 14%, var(--bg-surface) 86%);
  color: var(--text-primary);
}

#tradeEditorPopup .trade-status-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

#tradeEditorPopup #addTradeForm .tracking-form-grid.tracking-form-grid-3:nth-of-type(3) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#tradeEditorPopup #addTradeForm .tracking-form-grid.tracking-form-grid-3:nth-of-type(3) .tracking-field:last-child {
  grid-column: 1 / -1;
}

#tradeEditorPopup .trade-status-toggle {
  width: 100%;
}

#tradeEditorPopup .trade-status-btn {
  flex: 1;
  justify-content: center;
}

#page-tracking .tracking-core-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

#page-tracking .tracking-calendar-card,
#page-tracking .tracking-log-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

#page-tracking .tracking-calendar-card {
  min-height: 100%;
}

#page-tracking .tracking-log-card {
  min-height: 0;
  align-self: start;
}

#page-tracking .tracking-calendar-card::before,
#page-tracking .tracking-log-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--cyan) 10%, transparent) 0%, transparent 42%);
  opacity: 0.8;
}

#page-tracking .tracking-calendar-card .card-title,
#page-tracking .tracking-log-card .card-title,
#page-tracking .tracking-calendar-card > div,
#page-tracking .tracking-log-card > div {
  position: relative;
  z-index: 1;
}

#page-tracking .trade-cal-shell {
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--cyan) 16%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--green) 12%, transparent) 0%, transparent 50%),
    color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

#page-tracking .trade-cal-meta {
  font-size: 9px;
  letter-spacing: 0.04em;
}

#page-tracking .trade-cal-meta-rich {
  justify-content: flex-end;
}

#page-tracking .trade-cal-day {
  min-height: 74px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  padding-top: 16px;
}

#page-tracking .trade-cal-day.has-trade {
  background:
    radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--green) 24%, transparent) 0%, transparent 48%),
    color-mix(in srgb, var(--bg-surface) 96%, transparent);
}

#page-tracking .trade-day-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#page-tracking .tracking-log-shell {
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 636px;
  overscroll-behavior: contain;
}

#page-tracking #tradeLogArea {
  min-width: 0;
}

#page-tracking .tracking-log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#page-tracking .tracking-log-toolbar-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--text-secondary);
}

#page-tracking .tracking-log-export-all {
  min-height: 30px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 0 12px;
}

#page-tracking .tracking-day-summary-shell {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

#page-tracking .tracking-day-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 93%, transparent);
}

#page-tracking .tracking-day-summary-row.profit {
  border-color: color-mix(in srgb, var(--green) 45%, var(--border-bright) 55%);
}

#page-tracking .tracking-day-summary-row.loss {
  border-color: color-mix(in srgb, var(--red) 42%, var(--border-bright) 58%);
}

#page-tracking .tracking-day-summary-row.flat {
  border-color: color-mix(in srgb, var(--cyan) 40%, var(--border-bright) 60%);
}

#page-tracking .tracking-day-summary-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

#page-tracking .tracking-day-summary-meta {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-secondary);
}

#page-tracking .tracking-day-summary-meta .stock-symbol-pill {
  vertical-align: middle;
}

#page-tracking .tracking-day-summary-bar {
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  position: relative;
}

#page-tracking .tracking-day-summary-bar .tracking-day-summary-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--day-bar-color, color-mix(in srgb, var(--cyan) 28%, var(--green) 72%));
}

#page-tracking .tracking-day-summary-bar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 1px color-mix(in srgb, #000000 45%, transparent);
  pointer-events: none;
  z-index: 1;
}

#page-tracking .tracking-day-summary-bar-text.profit {
  color: #ffffff;
}

#page-tracking .tracking-day-summary-bar-text.loss {
  color: #ffffff;
}

#page-tracking .tracking-day-summary-bar-text.flat {
  color: #ffffff;
}

#page-tracking .tracking-log-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

#page-tracking .tracking-day-summary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

#page-tracking .tracking-history-table {
  width: 100%;
  min-width: 0;
  font-size: 9px;
  table-layout: fixed;
}

#page-tracking .tracking-history-table th {
  font-size: 8px;
  letter-spacing: 0.11em;
  white-space: normal;
  line-height: 1.2;
  padding: 8px 6px;
  word-break: break-word;
}

#page-tracking .tracking-history-table td {
  padding: 8px 6px;
  white-space: normal;
  line-height: 1.25;
  word-break: break-word;
  vertical-align: middle;
}

#page-tracking .tracking-history-table .trade-notes-cell {
  color: var(--text-muted);
  font-size: 8px;
}

#page-tracking .tracking-history-table .trade-note-chip {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--bg-surface) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 92%, transparent)
  );
  color: var(--text-secondary);
  font-family: var(--body);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
  max-height: none;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-tracking .tracking-history-table .trade-note-chip.is-empty {
  color: var(--text-muted);
  border-style: dashed;
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
}

#page-tracking .tracking-history-table .trade-actions-cell {
  padding-right: 4px;
  white-space: nowrap;
}

#page-tracking .tracking-history-table .trade-actions-wrap {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

#page-tracking .tracking-history-table .trade-action-btn {
  min-height: 26px !important;
  border-radius: 999px !important;
  padding: 0 8px !important;
  font-size: 8px !important;
  letter-spacing: 0.04em !important;
  flex: 0 0 auto;
}

#page-tracking .tracking-history-table .trade-action-btn + .trade-action-btn {
  margin-left: 0;
}

#page-tracking .trade-action-btn {
  min-height: 24px;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 9px;
  letter-spacing: 0.06em;
}

#page-tracking .tracking-log-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
}

@media (max-width: 1350px) {
  #page-tracking .tracking-core-grid {
    grid-template-columns: 1fr;
  }

  #page-tracking .tracking-log-shell {
    max-height: none;
  }
}

@media (max-width: 980px) {
  #page-tracking .tracking-hero-head {
    flex-direction: column;
    align-items: flex-start;
  }

  #page-tracking .tracking-add-btn {
    width: 100%;
  }

  #page-tracking .tracking-kpi-grid {
    grid-template-columns: 1fr;
  }

  #page-tracking .tracking-form-grid-3 {
    grid-template-columns: 1fr;
  }

  #page-tracking .tracking-form-actions {
    flex-wrap: wrap;
  }

  #page-tracking .trade-cal-day {
    min-height: 64px;
  }

  #page-tracking .trade-cal-day .day-meta {
    font-size: 7px;
  }

  #page-tracking .trade-day-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-tracking .trade-cal-meta-rich {
    justify-content: flex-start;
  }

  #page-tracking .tracking-log-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #page-tracking .tracking-day-summary-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #page-tracking .tracking-day-summary-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-tracking .tracking-flow-fill,
  #page-tracking .tracking-flow-a,
  #page-tracking .tracking-flow-b,
  #page-tracking .tracking-flow-dot,
  #page-tracking .tracking-kpi-wave path {
    animation: none !important;
  }
}

/* ===== TRACKING TAB MODERN REFRESH ===== */
#page-tracking {
  --track-shell-bg: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 92%, transparent)
  );
  --track-shell-border: color-mix(in srgb, var(--border-bright) 72%, transparent);
}

#page-tracking .tracking-shell {
  gap: 18px;
}

#page-tracking .tracking-hero,
#page-tracking .tracking-kpi-card,
#page-tracking .tracking-calendar-card,
#page-tracking .tracking-log-card {
  border-color: var(--track-shell-border);
  background: var(--track-shell-bg);
}

#page-tracking .tracking-hero {
  border-radius: 18px;
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--bg-deep) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent);
}

#page-tracking .tracking-hero-meta {
  gap: 9px;
}

#page-tracking .tracking-meta-chip {
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

.section-header .global-tracking-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.section-header .global-tracking-meta .tracking-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.11em;
  color: var(--text-secondary);
}

#page-tracking .tracking-add-btn {
  border-radius: 10px;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--cyan) 16%, transparent);
}

#page-tracking .tracking-kpi-grid {
  gap: 14px;
}

#page-tracking .tracking-kpi-card {
  border-radius: 16px;
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--bg-deep) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

#page-tracking .tracking-kpi-card::before,
#page-tracking .tracking-kpi-wave {
  display: none;
}

#page-tracking .tracking-kpi-card .stat-label,
#page-tracking .tracking-kpi-card .stat-value,
#page-tracking .tracking-kpi-card .stat-sub {
  text-align: center;
  width: 100%;
}

#page-tracking .tracking-kpi-card .stat-sub.pnl-profit {
  color: var(--green);
}

#page-tracking .tracking-kpi-card .stat-sub.pnl-loss {
  color: var(--red);
}

#page-tracking .tracking-kpi-card .stat-sub.pnl-flat {
  color: var(--text-muted);
}

#page-tracking .tracking-kpi-card .stat-label {
  color: var(--text-secondary);
}

#page-tracking .tracking-kpi-card .stat-sub {
  color: var(--text-secondary);
}

#page-tracking .tracking-core-grid {
  gap: 16px;
}

#page-tracking .tracking-calendar-card,
#page-tracking .tracking-log-card {
  border-radius: 16px;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--bg-deep) 14%, transparent);
}

#page-tracking .trade-cal-shell {
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--cyan) 15%, transparent) 0%, transparent 44%),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--green) 11%, transparent) 0%, transparent 50%),
    color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

#page-tracking .trade-cal-day {
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
}

#page-tracking .trade-cal-day.has-trade {
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
}

#page-tracking .trade-cal-day.has-trade .day-dot {
  display: none;
}

#page-tracking .trade-cal-day.has-trade.profit {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--green) 28%, transparent) 0%, transparent 48%),
    linear-gradient(150deg, color-mix(in srgb, var(--green) 18%, var(--bg-surface) 82%), color-mix(in srgb, var(--green) 8%, var(--bg-hover) 92%));
}

#page-tracking .trade-cal-day.has-trade.loss {
  border-color: color-mix(in srgb, #ff8a00 56%, var(--border-bright) 44%);
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, #ff8a00 26%, transparent) 0%, transparent 48%),
    linear-gradient(150deg, color-mix(in srgb, #ff8a00 17%, var(--bg-surface) 83%), color-mix(in srgb, #ff8a00 8%, var(--bg-hover) 92%));
}

#page-tracking .trade-cal-day.has-trade.major-loss {
  border-color: color-mix(in srgb, var(--red) 62%, var(--border-bright) 38%);
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--red) 30%, transparent) 0%, transparent 48%),
    linear-gradient(150deg, color-mix(in srgb, var(--red) 20%, var(--bg-surface) 80%), color-mix(in srgb, var(--red) 10%, var(--bg-hover) 90%));
}

#page-tracking .trade-cal-day.has-trade.flat {
  border-color: color-mix(in srgb, var(--cyan) 56%, var(--border-bright) 44%);
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--cyan) 24%, transparent) 0%, transparent 48%),
    linear-gradient(150deg, color-mix(in srgb, var(--cyan) 14%, var(--bg-surface) 86%), color-mix(in srgb, var(--cyan) 7%, var(--bg-hover) 93%));
}

#page-tracking .trade-cal-day.has-trade .day-num {
  color: var(--text-primary);
}

#page-tracking .trade-cal-day.has-trade .day-meta.profit {
  color: var(--green);
}

#page-tracking .trade-cal-day.has-trade .day-meta.loss {
  color: #ff9a24;
}

#page-tracking .trade-cal-day.has-trade .day-meta.major-loss {
  color: var(--red);
}

#page-tracking .trade-cal-day.has-trade .day-meta.flat {
  color: var(--cyan);
}

#page-tracking .tracking-log-shell {
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

#page-tracking .tracking-history-table th {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  color: var(--text-secondary);
  border-bottom-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
}

#page-tracking .tracking-history-table td {
  border-bottom-color: color-mix(in srgb, var(--border) 84%, transparent);
}

#page-tracking .tracking-history-table tr:hover td {
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

#page-tracking .tracking-history-table .trade-note-chip {
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
}

#page-tracking .tracking-history-table .trade-action-btn {
  border-radius: 999px !important;
}

html[data-theme='light'] #page-tracking .tracking-hero,
html[data-theme='light'] #page-tracking .tracking-kpi-card,
html[data-theme='light'] #page-tracking .tracking-calendar-card,
html[data-theme='light'] #page-tracking .tracking-log-card {
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent);
}

.situation-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
  padding: 10px 11px 10px 30px;
  background: var(--insight-bg);
  border: 1px solid var(--insight-border);
  border-radius: 12px;
}

.situation-row .ind-dot {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

.situation-copy {
  width: 100%;
}

.situation-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.situation-desc {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.4;
}

html[data-theme='dark'] .advice-type.call {
  background: rgba(34, 197, 94, 0.16);
  color: var(--green);
  border-color: rgba(34, 197, 94, 0.35);
}

html[data-theme='dark'] .advice-type.put {
  background: rgba(244, 63, 94, 0.18);
  color: var(--red);
  border-color: rgba(244, 63, 94, 0.36);
}

html[data-theme='dark'] .alert-body {
  color: var(--text-secondary);
}

.setting-row {
  gap: 12px;
}

.setting-row .input-field,
.setting-row select.input-field,
.setting-row button {
  min-height: 38px;
}

#page-knowledge .section-subtitle {
  max-width: 820px;
  line-height: 1.5;
}

#page-knowledge .report-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 9px 0;
}

#page-knowledge .report-key {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.11em;
  color: var(--cyan);
}

#page-knowledge .report-val {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}

#page-knowledge .knowledge-steps {
  display: grid;
  gap: 4px;
}

/* ===== PROFILE HUB ===== */
.profile-hub-shell {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
}

.profile-hub-main-panel {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border-radius: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(22px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  display: flex;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.profile-hub-sidebar {
  width: 320px;
  border-right: 1px solid rgba(226, 232, 240, 0.64);
  background: rgba(255, 255, 255, 0.44);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-top: 24px;
  position: relative;
  isolation: isolate;
  min-height: 0;
  overflow: hidden;
}

.profile-identity-card {
  margin: 0 24px 16px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.profile-identity-cover {
  height: 84px;
  background: linear-gradient(90deg, #2dd4bf, #3b82f6);
  position: relative;
  overflow: hidden;
}

.profile-identity-cover::after {
  content: none;
}

.profile-identity-main {
  padding: 12px 14px 14px;
  margin-top: 0;
}

.profile-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: #ccfbf1;
  color: #0d9488;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 16px rgba(20, 184, 166, 0.16);
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

.profile-avatar.has-image {
  color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-identity-name {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.profile-identity-email {
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
  overflow-wrap: anywhere;
}

.profile-identity-meta {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
  overflow-wrap: anywhere;
}

.profile-identity-meta.has-role-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.profile-role-meta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.profile-role-meta-badge {
  font-size: 9px;
  padding: 3px 8px;
}

.profile-hub-sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 0 14px 14px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  position: relative;
  z-index: 1;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.profile-hub-tab {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-hub-tab i {
  font-size: 18px;
  width: 22px;
  color: var(--profile-hub-icon-color, currentColor);
  transition: color 0.2s ease, transform 0.2s ease;
}

.profile-hub-tab:hover i,
.profile-hub-tab.active i {
  color: var(--profile-hub-icon-color, currentColor);
}

.profile-hub-tab:hover i {
  transform: translateY(-1px);
}

#profileHubTabProfile { --profile-hub-icon-color: #0f766e; }
#profileHubTabSettings { --profile-hub-icon-color: #2563eb; }
#profileHubTabData { --profile-hub-icon-color: #7c3aed; }
#profileHubTabAbout { --profile-hub-icon-color: #0ea5e9; }
#profileHubTabNotifications { --profile-hub-icon-color: #ea580c; }
#profileHubTabSecurity { --profile-hub-icon-color: #16a34a; }
#profileHubTabBilling { --profile-hub-icon-color: #d97706; }
#profileHubTabAdmin { --profile-hub-icon-color: #dc2626; }

.profile-hub-tab:hover {
  color: var(--profile-hub-icon-color, #0f172a);
  background: color-mix(in srgb, var(--profile-hub-icon-color, #0f766e) 8%, #ffffff 92%);
}

.profile-hub-tab.active {
  border-color: color-mix(in srgb, var(--profile-hub-icon-color, #0f766e) 22%, #ffffff 78%);
  background: color-mix(in srgb, var(--profile-hub-icon-color, #0f766e) 14%, #ffffff 86%);
  color: var(--profile-hub-icon-color, #0f766e);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--profile-hub-icon-color, #0f766e) 16%, transparent);
}

.profile-hub-tab.profile-hub-tab-admin.active {
  border-color: #b91c1c;
  background: linear-gradient(145deg, #ef4444, #dc2626);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(220, 38, 38, 0.22);
}

.profile-admin-warning {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.38);
  background: rgba(254, 226, 226, 0.72);
  color: #991b1b;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.profile-hub-chip.admin-chip-danger {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(254, 226, 226, 0.72);
  color: #b91c1c;
}

.profile-admin-action-row {
  align-items: center;
}

.profile-admin-message {
  margin-top: 8px;
  min-height: 16px;
  font-size: 11px;
  color: #64748b;
}

.profile-admin-message.success {
  color: #15803d;
}

.profile-admin-message.error {
  color: #b91c1c;
}

.profile-admin-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}

.profile-admin-users-card,
.profile-admin-user-detail-card,
.profile-admin-ip-card {
  grid-column: 1 / -1;
}

.profile-admin-users-list {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
}

.profile-admin-user-row {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-admin-user-row.is-selected {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.profile-admin-user-main {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px;
  cursor: pointer;
}

.profile-admin-user-avatar,
.profile-admin-user-avatar-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #0f172a;
  font-family: var(--mono);
  font-weight: 700;
  border: 1px solid #cbd5e1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-admin-user-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
  margin-bottom: 8px;
}

.profile-admin-user-avatar-large {
  width: 56px;
  height: 56px;
  font-size: 16px;
  flex-shrink: 0;
}

.profile-admin-user-avatar.has-image,
.profile-admin-user-avatar-large.has-image {
  color: transparent;
}

.profile-admin-user-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-admin-user-status {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid transparent;
}

.profile-admin-user-status.is-active {
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(220, 252, 231, 0.7);
}

.profile-admin-user-status.is-banned {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(254, 226, 226, 0.8);
}

.profile-admin-user-name {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.profile-admin-user-meta {
  margin-top: 2px;
  font-size: 11px;
  color: #475569;
  word-break: break-word;
}

.profile-admin-user-meta.muted {
  color: #64748b;
}

.profile-admin-ip-filter-note {
  margin: 8px 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: #64748b;
}

.profile-admin-ip-filter-note.is-filtered {
  color: #0369a1;
}

.profile-admin-user-detail {
  display: grid;
  gap: 10px;
}

.profile-admin-user-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-admin-user-head-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.profile-admin-user-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-admin-inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-admin-inline-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}

.profile-admin-control {
  display: grid;
  gap: 4px;
}

.profile-admin-control-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #64748b;
}

.profile-admin-subtitle {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #475569;
}

.profile-admin-calendar-wrap,
.profile-admin-ip-log {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: auto;
  max-height: 280px;
}

.profile-admin-mini-log {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px;
  max-height: 220px;
  overflow: auto;
}

.profile-admin-log-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #e2e8f0;
  font-family: var(--mono);
  font-size: 10px;
  color: #334155;
}

.profile-admin-log-row:last-child {
  border-bottom: none;
}

@media (max-width: 900px) {
  .profile-admin-inline-grid {
    grid-template-columns: 1fr;
  }

  .profile-admin-inline-controls {
    grid-template-columns: 1fr;
  }

  .profile-admin-toolbar {
    grid-template-columns: 1fr;
  }

  .profile-admin-user-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-admin-log-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.profile-hub-sidebar-actions {
  margin-top: auto;
  padding: 14px 14px 18px;
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 12;
}

.profile-hub-sidebar-btn {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
}

.profile-hub-sidebar-btn.signout {
  border-color: #fecdd3;
  color: #f43f5e;
}

.profile-hub-sidebar-btn.signout:hover {
  background: #fff1f2;
  border-color: #fda4af;
}

.profile-hub-sidebar-btn.close:hover {
  background: #f8fafc;
  color: #334155;
}

.profile-hub-close-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.profile-hub-close-btn i {
  font-size: 16px;
}

.profile-hub-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: rgba(255, 255, 255, 0.62);
  display: flex;
  flex-direction: column;
}

.profile-hub-content-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 24px clamp(18px, 2.4vw, 40px);
}

.profile-hub-custom-scroll::-webkit-scrollbar {
  width: 6px;
}

.profile-hub-custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.profile-hub-custom-scroll::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

.profile-hub-panel {
  display: none;
  width: 100%;
  min-width: 0;
}

.profile-hub-panel.active {
  display: block;
  animation: fadeIn 0.22s ease;
}

.profile-hub-panel-inline-admin {
  display: block;
  width: 100%;
  min-width: 0;
  animation: fadeIn 0.22s ease;
}

.profile-hub-hero {
  --profile-hub-accent: #0f766e;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--profile-hub-accent) 18%, #dbe5f0 82%);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--profile-hub-accent) 14%, transparent), transparent 56%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--profile-hub-accent) 8%, transparent), transparent 62%),
    linear-gradient(135deg, #fbfdff, color-mix(in srgb, var(--profile-hub-accent) 8%, #ffffff 92%));
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  padding: 18px 20px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

.profile-hub-hero-profile { --profile-hub-accent: #0f766e; }
.profile-hub-hero-settings { --profile-hub-accent: #2563eb; }
.profile-hub-hero-security { --profile-hub-accent: #16a34a; }
.profile-hub-hero-billing { --profile-hub-accent: #d97706; }
.profile-hub-hero-data { --profile-hub-accent: #7c3aed; }
.profile-hub-hero-about { --profile-hub-accent: #0ea5e9; }
.profile-hub-hero-notifications { --profile-hub-accent: #ea580c; }

.profile-hub-hero::after {
  content: "\e1e3";
  font-family: "Phosphor";
  position: absolute;
  right: -18px;
  top: -30px;
  font-size: 140px;
  color: color-mix(in srgb, var(--profile-hub-accent) 12%, transparent);
}

.profile-hub-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--profile-hub-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-hub-title {
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  color: #0f172a;
}

.profile-hub-desc {
  margin-top: 8px;
  max-width: 820px;
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
}

.profile-hub-chip-row {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-hub-chip {
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-hub-modal .section-title {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.profile-hub-modal .section-subtitle {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

.profile-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.profile-avatar-upload-card {
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  padding: 24px 22px;
  display: grid;
  align-content: start;
  gap: 14px;
  text-align: center;
}

.profile-avatar-upload-wrap {
  position: relative;
  display: inline-flex;
  justify-self: center;
  margin-bottom: 0;
  cursor: pointer;
}

.profile-avatar-upload {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  background: #ccfbf1;
  color: #0d9488;
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
}

.profile-avatar-upload.has-image {
  color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-avatar-upload-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.profile-avatar-upload-wrap:hover .profile-avatar-upload-overlay {
  opacity: 1;
}

.profile-upload-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 2px dashed #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-upload-btn:hover {
  border-color: #2dd4bf;
  color: #0f766e;
  background: #f8fafc;
}

.profile-upload-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.profile-upload-input {
  display: none;
}

.profile-upload-note {
  margin-top: 0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.5;
}

.profile-form-card {
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  padding: 24px;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.profile-form-field {
  display: grid;
  gap: 8px;
}

.profile-form-field.wide {
  grid-column: 1 / -1;
}

.profile-form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.profile-form-note {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

.profile-form-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-form-message,
.profile-security-message {
  margin-top: 10px;
  min-height: 16px;
  font-size: 12px;
  color: #64748b;
}

.profile-form-message.error,
.profile-security-message.error {
  color: #dc2626;
}

.profile-form-message.success,
.profile-security-message.success {
  color: #16a34a;
}

.profile-settings-header {
  margin-bottom: 18px;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.profile-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.profile-settings-modern {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.profile-settings-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.profile-settings-modern .profile-modern-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff);
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.05),
    0 6px 14px rgba(15, 23, 42, 0.03);
}

.profile-settings-modern .profile-modern-card-body {
  padding: 24px 24px;
}

.profile-settings-modern .profile-modern-avatar-layout {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-settings-modern .profile-modern-avatar-shell {
  flex-shrink: 0;
}

.profile-settings-modern .profile-avatar-upload-wrap {
  position: relative;
  display: inline-flex;
  justify-self: center;
  cursor: pointer;
}

.profile-settings-modern .profile-avatar-upload {
  width: 124px;
  height: 124px;
  border-radius: 999px;
  border: 5px solid #ffffff;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #4f46e5;
  box-shadow:
    0 16px 34px rgba(79, 70, 229, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
}

.profile-settings-modern .profile-avatar-upload.has-image {
  color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-settings-modern .profile-modern-avatar-badge {
  display: none;
}

.profile-settings-modern .profile-upload-btn.profile-upload-dropzone {
  width: 100%;
  min-height: 140px;
  padding: 22px 24px;
  border-radius: 20px;
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}

.profile-settings-modern .profile-upload-btn.profile-upload-dropzone:hover {
  border-color: #4f46e5;
  background: #eef2ff;
  color: #0f172a;
  transform: none;
}

.profile-settings-modern .profile-upload-dropzone-copy {
  display: grid;
  gap: 8px;
}

.profile-settings-modern .profile-upload-dropzone-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-settings-modern .profile-upload-btn.profile-upload-dropzone:hover .profile-upload-dropzone-title {
  color: #4f46e5;
}

.profile-settings-modern .profile-upload-dropzone-note {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.profile-settings-modern .profile-upload-dropzone-cta {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1px solid #c7d2fe;
  background: #ffffff;
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.08);
}

.profile-settings-modern .profile-upload-input {
  display: none;
}

.profile-settings-modern .profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
}

.profile-settings-modern .profile-form-field {
  display: grid;
  gap: 10px;
}

.profile-settings-modern .profile-form-field.wide {
  grid-column: 1 / -1;
}

.profile-settings-modern .profile-form-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-settings-modern .profile-form-label-inline {
  align-items: center;
}

.profile-settings-modern .profile-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #10b981;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.profile-settings-modern .profile-input-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.profile-settings-modern .profile-input-icon {
  position: absolute;
  left: 20px;
  z-index: 1;
  color: #94a3b8;
  line-height: 0;
  transition: color 0.2s ease;
}

.profile-settings-modern .profile-modern-input.input-field,
.profile-settings-modern select.profile-modern-input.input-field {
  width: 100%;
  min-height: 54px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 18px 14px 52px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.profile-settings-modern .profile-modern-input.input-field:focus,
.profile-settings-modern select.profile-modern-input.input-field:focus {
  border-color: #4f46e5;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.profile-settings-modern .profile-input-shell:focus-within .profile-input-icon {
  color: #4f46e5;
}

.profile-settings-modern .profile-input-shell.is-portfolio .profile-input-icon {
  color: #10b981;
}

.profile-settings-modern .profile-input-shell.is-portfolio:focus-within .profile-input-icon {
  color: #059669;
}

.profile-settings-modern .profile-input-shell.is-portfolio .profile-modern-input.input-field:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.profile-settings-modern .profile-form-note.profile-form-note-modern {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}

.profile-settings-modern .profile-form-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #edf2f7;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-settings-modern .profile-form-submit,
.profile-settings-modern .profile-form-reset {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.profile-settings-modern .profile-form-submit {
  border: 0;
  background: #0ea5e9;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.24);
}

.profile-settings-modern .profile-form-submit:hover {
  background: #0284c7;
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(14, 165, 233, 0.28);
}

.profile-settings-modern .profile-form-reset {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

.profile-settings-modern .profile-form-reset:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

.profile-settings-modern .profile-form-message {
  margin-top: 12px;
  min-height: 18px;
  font-size: 12px;
  font-weight: 600;
}

.profile-settings-modern .profile-form-message.success {
  color: #16a34a;
}

.profile-settings-modern .profile-form-message.error {
  color: #dc2626;
}

@media (max-width: 760px) {
  .profile-settings-modern .profile-modern-card-body {
    padding: 24px 20px;
  }

  .profile-settings-modern .profile-modern-avatar-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .profile-settings-modern .profile-modern-avatar-shell {
    display: flex;
    justify-content: center;
  }

  .profile-settings-modern .profile-upload-btn.profile-upload-dropzone {
    min-height: 0;
    padding: 22px 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-settings-modern .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .profile-settings-modern .profile-form-field.wide {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .profile-settings-modern .profile-form-label-inline {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-settings-modern .profile-upload-btn.profile-upload-dropzone {
    text-align: center;
    align-items: center;
  }

  .profile-settings-modern .profile-upload-dropzone-copy {
    justify-items: center;
  }

  .profile-settings-modern .profile-form-actions {
    flex-direction: column;
  }

  .profile-settings-modern .profile-form-submit,
  .profile-settings-modern .profile-form-reset {
    width: 100%;
  }
}

/* ===== AUTH MODAL ===== */
html.auth-modal-open,
body.auth-modal-open {
  overflow: hidden;
  height: 100%;
}

.auth-modal-overlay {
  --auth-modal-pad: clamp(14px, 2vw, 28px);
  position: fixed;
  inset: 0;
  z-index: 10150;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--auth-modal-pad);
  overflow: hidden;
  background:
    radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, #38bdf8 18%, transparent), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, #f43f5e 14%, transparent), transparent 58%),
    rgba(8, 14, 25, 0.74);
  backdrop-filter: blur(10px);
}

.auth-modal-overlay.visible {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.auth-modal {
  width: min(1080px, 96vw);
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, #f8fbff 26%, transparent);
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--bg-surface) 92%, transparent),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  );
  box-shadow: 0 34px 90px color-mix(in srgb, var(--bg-deep) 60%, transparent);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  max-height: 92vh;
}

.auth-modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  z-index: 2;
}

.auth-modal-left {
  border-right: 1px solid color-mix(in srgb, var(--border-bright) 52%, transparent);
  padding: 34px 28px;
  display: grid;
  align-content: start;
  gap: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 38%),
    color-mix(in srgb, var(--bg-card) 89%, transparent);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.auth-brand-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 78%, #d8f4ff 22%), color-mix(in srgb, #38bdf8 70%, #0f172a 30%));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #031320;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
}

.auth-brand-name {
  font-family: var(--display);
  letter-spacing: 0.11em;
  font-size: 15px;
  color: var(--text-primary);
}

.auth-hero-title {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.2;
  color: var(--text-primary);
}

.auth-hero-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 430px;
  font-size: 13px;
}

.auth-meta-pill {
  margin-top: 6px;
  width: fit-content;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
}

.auth-modal-right {
  padding: 34px 28px;
  overflow: auto;
}

.auth-tabbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 65%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  margin-bottom: 16px;
}

.auth-tab-btn {
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  cursor: pointer;
}

.auth-tab-btn.active {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-bright) 52%);
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

.auth-view {
  display: none;
}

.auth-view.active {
  display: block;
}

.auth-form-stack {
  display: grid;
  gap: 11px;
}

.auth-field {
  display: grid;
  gap: 5px;
}

.auth-field-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.auth-message {
  margin-top: 10px;
  min-height: 16px;
  font-size: 11px;
  color: var(--text-secondary);
}

.auth-message.error {
  color: var(--red);
}

.auth-message.success {
  color: var(--green);
}

.auth-step-track {
  margin-bottom: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 58%, transparent);
  height: 8px;
  overflow: hidden;
}

.auth-step-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f43f5e, #fb923c);
  transition: width 0.25s ease;
}

.auth-register-step {
  display: none;
}

.auth-register-step.active {
  display: block;
}

.auth-register-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.auth-view-enter-right {
  animation: authViewInRight 0.35s ease both;
}

.auth-view-enter-left {
  animation: authViewInLeft 0.35s ease both;
}

@keyframes authViewInRight {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes authViewInLeft {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: translateX(0); }
}

.auth-success-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(247,251,255,0.96));
  backdrop-filter: blur(6px);
  z-index: 4;
}

.auth-success-overlay.visible {
  display: flex;
}

.auth-success-card {
  width: min(360px, 92%);
  border-radius: 24px;
  border: 1px solid #dbe8f6;
  background: #ffffff;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
  text-align: center;
  padding: 24px 20px 20px;
}

.auth-success-spinner {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #dbeafe;
  border-top-color: #0ea5e9;
  animation: authSpin 0.8s linear infinite;
}

.auth-success-check {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid #14b8a6;
  color: #14b8a6;
  font-size: 28px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
}

.auth-success-overlay.done .auth-success-spinner {
  display: none;
}

.auth-success-overlay.done .auth-success-check {
  display: inline-flex;
  animation: authCheckBounce 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

.auth-success-title {
  margin-top: 14px;
  font-family: "Plus Jakarta Sans", var(--body);
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.auth-success-sub {
  margin-top: 6px;
  font-size: 13px;
  color: #64748b;
}

@keyframes authSpin {
  to { transform: rotate(360deg); }
}

@keyframes authCheckBounce {
  0% { transform: scale(0.6); opacity: 0; }
  55% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.auth-modal {
  background: linear-gradient(150deg, #f8fbff, #f1f7ff);
  border: 1px solid #dbe7f4;
}

.auth-modal-left {
  border-right: 1px solid #dbe7f4;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(56, 189, 248, 0.2), transparent 54%),
    radial-gradient(120% 120% at 100% 100%, rgba(244, 63, 94, 0.15), transparent 58%),
    #ffffff;
}

.auth-modal-right {
  background: linear-gradient(170deg, rgba(255,255,255,0.95), rgba(248,252,255,0.9));
}

.auth-brand-name,
.auth-hero-title {
  color: #0f172a;
}

.auth-hero-desc,
.auth-field-label,
.auth-message {
  color: #64748b;
}

.auth-modal .input-field {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid #d8e2ef;
  background: #f8fafc;
  color: #0f172a;
}

.auth-modal .input-field:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20,184,166,0.16);
}

.auth-modal .btn.btn-primary {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, #f43f5e, #fb923c);
  color: #ffffff;
}

.auth-modal .btn.btn-secondary {
  border-radius: 14px;
  border: 1px solid #cbd9e8;
  background: #eef4fb;
  color: #334155;
}

body.profile-hub-open {
  overflow: hidden;
}

body.profile-hub-open .app-shell,
body.profile-hub-open .main-content {
  overflow: hidden !important;
}

body.profile-hub-open .sidebar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.profile-hub-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.2vw, 28px);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(20, 184, 166, 0.18), transparent 52%),
    radial-gradient(120% 120% at 100% 100%, rgba(14, 165, 233, 0.14), transparent 58%),
    rgba(2, 6, 23, 0.48);
  backdrop-filter: blur(10px);
  overflow: hidden;
  overscroll-behavior: contain;
}

.profile-hub-modal-overlay.visible {
  display: flex;
  animation: fadeIn 0.24s ease;
}

.profile-hub-modal {
  width: min(1400px, 96vw);
  height: min(92vh, 920px);
  max-height: calc(100dvh - 28px);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: #f0f4f8;
  box-shadow: 0 38px 96px rgba(15, 23, 42, 0.28);
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.profile-hub-modal-inner {
  position: relative;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  padding: clamp(12px, 1.8vw, 22px);
}

.profile-hub-modal .card {
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.profile-hub-modal .card-title,
.profile-hub-modal .setting-label {
  color: #0f172a;
}

.profile-hub-modal .setting-desc,
.profile-hub-modal .report-val,
.profile-hub-modal .profile-form-message,
.profile-hub-modal .profile-security-message {
  color: #64748b;
}

.profile-hub-modal .report-key {
  color: #0f766e;
}

.profile-hub-modal .input-field,
.profile-hub-modal select.input-field {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #d3deeb;
  background: #f8fafc;
  color: #0f172a;
}

.profile-hub-modal .input-field:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
}

.profile-hub-modal .btn.btn-primary {
  border-radius: 12px;
  border: 0;
  background: #0f172a;
  color: #ffffff;
}

.profile-hub-modal .btn.btn-primary:hover {
  background: #1e293b;
}

.profile-hub-modal .btn.btn-secondary {
  border-radius: 12px;
  border: 1px solid #d4deea;
  background: #ffffff;
  color: #475569;
}

html[data-theme='dark'] .profile-hub-modal {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg-surface) 94%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
}

html[data-theme='dark'] .profile-hub-modal-inner,
html[data-theme='dark'] .profile-hub-content,
html[data-theme='dark'] .profile-hub-content-scroll {
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}
html[data-theme='dark'] .profile-hub-main-panel {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--bg-deep) 62%, transparent);
}

html[data-theme='dark'] .profile-hub-sidebar-btn.signout {
  border-color: color-mix(in srgb, var(--red) 56%, var(--border-bright) 44%);
  color: color-mix(in srgb, var(--red) 72%, #ffffff 28%);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}
html[data-theme='dark'] .profile-hub-sidebar {
  border-right-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-card) 76%, transparent);
}

html[data-theme='dark'] .profile-hub-sidebar-btn.signout:hover {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--red) 78%, #7f1d1d 22%);
  background: linear-gradient(125deg, color-mix(in srgb, var(--red) 88%, #be123c 12%), color-mix(in srgb, #be123c 78%, #7f1d1d 22%));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--red) 34%, transparent);
}
html[data-theme='dark'] .profile-identity-name,
html[data-theme='dark'] .profile-hub-title,
html[data-theme='dark'] .profile-hub-modal .section-title,
html[data-theme='dark'] .profile-hub-modal .card-title,
html[data-theme='dark'] .profile-hub-modal .setting-label {
  color: var(--text-primary);
}

html[data-theme='dark'] .sidebar-logo,
html[data-theme='dark'] .sidebar-logo-text {
  color: #f8fafc;
}

html[data-theme='dark'] .sidebar-logo-text {
  opacity: 1;
  font-weight: 900;
  text-shadow: 0 0 16px color-mix(in srgb, var(--session-ui-accent) 22%, transparent);
}

html[data-theme='dark'] .market-status.open {
  color: color-mix(in srgb, var(--green) 78%, #ffffff 22%);
  border-color: color-mix(in srgb, var(--green) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--green) 18%, var(--bg-hover) 82%);
}

html[data-theme='dark'] .market-status.premarket {
  color: color-mix(in srgb, var(--gold) 80%, #ffffff 20%);
  border-color: color-mix(in srgb, var(--gold) 50%, var(--border-bright) 50%);
  background: color-mix(in srgb, var(--gold) 16%, var(--bg-hover) 84%);
}

html[data-theme='dark'] .market-status.aftermarket {
  color: color-mix(in srgb, var(--purple) 78%, #ffffff 22%);
  border-color: color-mix(in srgb, var(--purple) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--purple) 18%, var(--bg-hover) 82%);
}

html[data-theme='dark'] .market-status.closed {
  color: color-mix(in srgb, var(--red) 78%, #ffffff 22%);
  border-color: color-mix(in srgb, var(--red) 52%, var(--border-bright) 48%);
  background: color-mix(in srgb, var(--red) 18%, var(--bg-hover) 82%);
}

html[data-theme='dark'] .market-status .market-status-label,
html[data-theme='dark'] .market-status .market-status-meta,
html[data-theme='dark'] .sidebar-session-wrap .market-status .market-status-label,
html[data-theme='dark'] .sidebar-session-wrap .market-status .market-status-meta {
  color: #e2e8f0;
  text-shadow: 0 1px 8px rgba(2, 6, 23, 0.45);
}

html[data-theme='dark'] .market-status.aftermarket .market-status-label,
html[data-theme='dark'] .market-status.aftermarket .market-status-meta,
html[data-theme='dark'] .sidebar-session-wrap .market-status.aftermarket .market-status-label,
html[data-theme='dark'] .sidebar-session-wrap .market-status.aftermarket .market-status-meta {
  color: #e9ddff;
}

html[data-theme='dark'] .sidebar-session-wrap .market-status.open {
  color: color-mix(in srgb, var(--green) 74%, #d1fae5 26%);
  border-color: color-mix(in srgb, var(--green) 48%, var(--border-bright) 52%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 20%, var(--bg-surface) 80%), color-mix(in srgb, var(--green-dim) 18%, var(--bg-hover) 82%));
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--green) 16%, transparent), 0 6px 16px color-mix(in srgb, var(--green) 14%, transparent);
}

html[data-theme='dark'] .sidebar-session-wrap .market-status.premarket {
  color: color-mix(in srgb, var(--gold) 74%, #fef3c7 26%);
  border-color: color-mix(in srgb, var(--gold) 48%, var(--border-bright) 52%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 20%, var(--bg-surface) 80%), color-mix(in srgb, var(--gold-dim) 18%, var(--bg-hover) 82%));
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--gold) 16%, transparent), 0 6px 16px color-mix(in srgb, var(--gold) 14%, transparent);
}

html[data-theme='dark'] .sidebar-session-wrap .market-status.aftermarket {
  color: color-mix(in srgb, var(--purple) 72%, #ede9fe 28%);
  border-color: color-mix(in srgb, var(--purple) 48%, var(--border-bright) 52%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 22%, var(--bg-surface) 78%), color-mix(in srgb, var(--purple) 16%, var(--bg-hover) 84%));
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--purple) 16%, transparent), 0 6px 16px color-mix(in srgb, var(--purple) 16%, transparent);
}

html[data-theme='dark'] .sidebar-session-wrap .market-status.closed {
  color: color-mix(in srgb, var(--red) 70%, #ffe4e6 30%);
  border-color: color-mix(in srgb, var(--red) 46%, var(--border-bright) 54%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 20%, var(--bg-surface) 80%), color-mix(in srgb, var(--red-dim) 18%, var(--bg-hover) 82%));
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--red) 16%, transparent), 0 6px 16px color-mix(in srgb, var(--red) 14%, transparent);
}

html[data-theme='dark'] .sidebar-auth-avatar {
  border-color: color-mix(in srgb, var(--session-ui-accent) 62%, #e2e8f0 38%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--session-ui-accent) 32%, var(--bg-surface) 68%), color-mix(in srgb, var(--session-ui-accent) 18%, var(--bg-hover) 82%));
  color: #e2e8f0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--session-ui-accent) 22%, transparent), 0 8px 14px color-mix(in srgb, var(--bg-deep) 42%, transparent);
}

html[data-theme='dark'] .sidebar-auth-avatar.has-image {
  background-color: #0b1120;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

html[data-theme='dark'] .profile-hub-hero {
  border-color: color-mix(in srgb, var(--profile-hub-accent) 30%, var(--border-bright) 70%);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--profile-hub-accent) 16%, transparent), transparent 56%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--profile-hub-accent) 10%, transparent), transparent 60%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--bg-card) 92%, transparent),
      color-mix(in srgb, var(--profile-hub-accent) 10%, var(--bg-hover) 90%)
    );
  box-shadow: 0 10px 26px color-mix(in srgb, var(--profile-hub-accent) 12%, var(--bg-deep) 88%);
}

html[data-theme='dark'] .profile-hub-hero::after {
  color: color-mix(in srgb, var(--profile-hub-accent) 18%, transparent);
}

html[data-theme='dark'] .profile-hub-chip {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] .platform-updates-pill {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: color-mix(in srgb, var(--session-ui-accent) 72%, #e2e8f0 28%);
}

html[data-theme='dark'] .platform-updates-meta {
  color: var(--text-secondary);
}

html[data-theme='dark'] .platform-update-date {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: #e2e8f0;
}

html[data-theme='dark'] .platform-update-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--bg-hover) 88%, transparent));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--bg-deep) 40%, transparent);
}

html[data-theme='dark'] .platform-update-title {
  color: var(--text-primary);
}

html[data-theme='dark'] .platform-update-list {
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-identity-card,
html[data-theme='dark'] .profile-avatar-upload-card,
html[data-theme='dark'] .profile-form-card,
html[data-theme='dark'] .profile-hub-modal .card {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bg-deep) 36%, transparent);
}

html[data-theme='dark'] .profile-identity-email,
html[data-theme='dark'] .profile-identity-meta,
html[data-theme='dark'] .profile-hub-desc,
html[data-theme='dark'] .profile-form-label,
html[data-theme='dark'] .profile-form-note,
html[data-theme='dark'] .profile-hub-modal .section-subtitle,
html[data-theme='dark'] .profile-hub-modal .setting-desc,
html[data-theme='dark'] .profile-hub-modal .report-val,
html[data-theme='dark'] .profile-hub-modal .profile-form-message,
html[data-theme='dark'] .profile-hub-modal .profile-security-message {
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-role-meta-label {
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-hub-tab {
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-hub-tab:hover {
  color: color-mix(in srgb, var(--profile-hub-icon-color, #38bdf8) 72%, #ffffff 28%);
  background: color-mix(in srgb, var(--profile-hub-icon-color, #38bdf8) 12%, var(--bg-hover) 88%);
}

html[data-theme='dark'] .profile-hub-tab.active {
  border-color: color-mix(in srgb, var(--profile-hub-icon-color, #38bdf8) 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, var(--profile-hub-icon-color, #38bdf8) 20%, var(--bg-hover) 80%);
  color: color-mix(in srgb, var(--profile-hub-icon-color, #38bdf8) 74%, #ffffff 26%);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--profile-hub-icon-color, #38bdf8) 20%, transparent);
}

html[data-theme='dark'] .profile-hub-tab.profile-hub-tab-admin.active {
  border-color: color-mix(in srgb, #ef4444 66%, var(--border-bright) 34%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #ef4444 84%, #3f0f10 16%),
    color-mix(in srgb, #dc2626 88%, #2b0a0b 12%)
  );
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, #ef4444 24%, transparent);
}

html[data-theme='dark'] .profile-admin-warning {
  border-color: color-mix(in srgb, #ef4444 56%, transparent);
  background: color-mix(in srgb, #7f1d1d 34%, transparent);
  color: #fecaca;
}

html[data-theme='dark'] .profile-hub-chip.admin-chip-danger {
  border-color: color-mix(in srgb, #ef4444 56%, transparent);
  background: color-mix(in srgb, #7f1d1d 36%, transparent);
  color: #fecaca;
}

html[data-theme='dark'] .profile-admin-message {
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-admin-message.success {
  color: var(--green);
}

html[data-theme='dark'] .profile-admin-message.error {
  color: #fda4af;
}

html[data-theme='dark'] .profile-admin-user-row {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

html[data-theme='dark'] .profile-admin-user-row.is-selected {
  border-color: color-mix(in srgb, var(--cyan) 56%, var(--border-bright) 44%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 25%, transparent);
}

html[data-theme='dark'] .profile-admin-user-avatar,
html[data-theme='dark'] .profile-admin-user-avatar-large {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] .profile-admin-user-name {
  color: var(--text-primary);
}

html[data-theme='dark'] .profile-admin-user-meta {
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-admin-user-meta.muted,
html[data-theme='dark'] .profile-admin-control-label,
html[data-theme='dark'] .profile-admin-subtitle {
  color: var(--text-muted);
}

html[data-theme='dark'] .profile-admin-user-status.is-active {
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}

html[data-theme='dark'] .profile-admin-user-status.is-banned {
  border-color: color-mix(in srgb, #ef4444 48%, transparent);
  background: color-mix(in srgb, #7f1d1d 34%, transparent);
  color: #fecaca;
}

html[data-theme='dark'] .profile-admin-calendar-wrap,
html[data-theme='dark'] .profile-admin-ip-log,
html[data-theme='dark'] .profile-admin-mini-log {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
}

html[data-theme='dark'] .profile-admin-log-row {
  color: var(--text-secondary);
  border-bottom-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] .profile-hub-sidebar-btn,
html[data-theme='dark'] .profile-hub-modal .btn.btn-secondary {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-upload-btn {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--bg-surface) 92%, transparent),
      color-mix(in srgb, var(--bg-hover) 88%, transparent)
    );
  color: var(--text-secondary);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 8px 18px color-mix(in srgb, #000000 22%, transparent);
}

html[data-theme='dark'] .profile-upload-btn:hover {
  border-color: color-mix(in srgb, var(--cyan) 42%, var(--border-bright) 58%);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%),
      color-mix(in srgb, var(--cyan) 6%, var(--bg-hover) 94%)
    );
  color: color-mix(in srgb, var(--cyan) 78%, var(--text-primary) 22%);
}

html[data-theme='dark'] .profile-upload-btn:disabled {
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] .profile-hub-sidebar-btn.close:hover,
html[data-theme='dark'] .profile-hub-modal .btn.btn-secondary:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
}

html[data-theme='dark'] .profile-hub-modal .input-field,
html[data-theme='dark'] .profile-hub-modal select.input-field {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] .forecast-setting-picker-trigger-detail,
html[data-theme='dark'] .forecast-settings-picker-option-detail,
html[data-theme='dark'] .forecast-settings-picker-subtitle,
html[data-theme='dark'] .forecast-short-shares-trigger-detail,
html[data-theme='dark'] .forecast-short-shares-popup-option-detail,
html[data-theme='dark'] .forecast-short-shares-popup-subtitle {
  color: var(--text-secondary);
}

html[data-theme='dark'] .forecast-settings-picker-backdrop {
  background: rgba(2, 6, 23, 0.42);
}

html[data-theme='dark'] .forecast-settings-picker-panel {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-card) 98%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] .forecast-short-shares-popup-backdrop {
  background: rgba(2, 6, 23, 0.38);
}

html[data-theme='dark'] .forecast-short-shares-popup {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-card) 98%, transparent);
}

html[data-theme='dark'] .forecast-settings-picker-kicker {
  color: color-mix(in srgb, var(--cyan) 82%, #ffffff 18%);
}

html[data-theme='dark'] .forecast-short-shares-popup-kicker {
  color: color-mix(in srgb, var(--cyan) 82%, #ffffff 18%);
}

html[data-theme='dark'] .forecast-settings-picker-title {
  color: var(--text-primary);
}

html[data-theme='dark'] .forecast-short-shares-popup-title {
  color: var(--text-primary);
}

html[data-theme='dark'] .forecast-settings-picker-close,
html[data-theme='dark'] .forecast-settings-picker-option {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

html[data-theme='dark'] .forecast-short-shares-popup-close,
html[data-theme='dark'] .forecast-short-shares-popup-option {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

html[data-theme='dark'] .forecast-settings-picker-close:hover {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
}

html[data-theme='dark'] .forecast-short-shares-popup-close:hover,
html[data-theme='dark'] .forecast-short-shares-popup-option:hover {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
}

html[data-theme='dark'] .forecast-settings-picker-option:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%);
}

html[data-theme='dark'] .forecast-settings-picker-option.is-selected {
  background: color-mix(in srgb, var(--cyan) 16%, var(--bg-surface) 84%);
}

html[data-theme='dark'] .forecast-settings-picker-current {
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
}

html[data-theme='dark'] .forecast-short-shares-popup-current {
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
}

html[data-theme='dark'] .forecast-settings-picker-option-icon {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

html[data-theme='dark'] .forecast-short-shares-trigger {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}

html[data-theme='dark'] .forecast-short-shares-trigger:hover {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
}

html[data-theme='dark'] .forecast-short-shares-trigger[data-state='on'] {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(22, 163, 74, 0.14);
}

html[data-theme='dark'] .forecast-short-shares-trigger[data-state='off'] {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(220, 38, 38, 0.12);
}

html[data-theme='dark'] .forecast-short-shares-trigger-state[data-state='on'],
html[data-theme='dark'] .forecast-short-shares-popup-current-state[data-state='on'] {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

html[data-theme='dark'] .forecast-short-shares-trigger-state[data-state='off'],
html[data-theme='dark'] .forecast-short-shares-popup-current-state[data-state='off'] {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}

html[data-theme='dark'] .forecast-short-shares-popup-current-detail {
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-settings-modern .profile-upload-dropzone-note,
html[data-theme='dark'] .profile-settings-modern .profile-form-note.profile-form-note-modern,
html[data-theme='dark'] .profile-settings-modern .profile-form-label {
  color: var(--text-secondary);
}

html[data-theme='dark'] .profile-settings-modern .profile-modern-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  box-shadow:
    0 18px 36px color-mix(in srgb, var(--bg-deep) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-avatar-upload {
  border-color: color-mix(in srgb, #ffffff 10%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--session-ui-accent) 36%, #1e293b 64%), color-mix(in srgb, #60a5fa 28%, #111827 72%));
  color: #e0f2fe;
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-upload-btn.profile-upload-dropzone {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--bg-surface) 92%, transparent),
      color-mix(in srgb, var(--bg-hover) 88%, transparent)
    );
  color: var(--text-primary);
}

html[data-theme='dark'] .profile-settings-modern .profile-upload-btn.profile-upload-dropzone:hover {
  border-color: color-mix(in srgb, var(--session-ui-accent) 44%, var(--border-bright) 56%);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--session-ui-accent) 12%, var(--bg-surface) 88%),
      color-mix(in srgb, var(--session-ui-accent) 8%, var(--bg-hover) 92%)
    );
}

html[data-theme='dark'] .profile-settings-modern .profile-upload-dropzone-title {
  color: var(--text-primary);
}

html[data-theme='dark'] .profile-settings-modern .profile-upload-btn.profile-upload-dropzone:hover .profile-upload-dropzone-title,
html[data-theme='dark'] .profile-settings-modern .profile-input-shell:focus-within .profile-input-icon {
  color: color-mix(in srgb, var(--session-ui-accent) 72%, #ffffff 28%);
}

html[data-theme='dark'] .profile-settings-modern .profile-upload-dropzone-cta {
  border-color: color-mix(in srgb, var(--session-ui-accent) 44%, var(--border-bright) 56%);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  color: color-mix(in srgb, var(--session-ui-accent) 72%, #ffffff 28%);
  box-shadow: 0 8px 18px color-mix(in srgb, #000000 20%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-modern-input.input-field,
html[data-theme='dark'] .profile-settings-modern select.profile-modern-input.input-field {
  border-color: color-mix(in srgb, var(--border-bright) 76%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-primary);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 1px 0 color-mix(in srgb, #000000 12%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-modern-input.input-field:focus,
html[data-theme='dark'] .profile-settings-modern select.profile-modern-input.input-field:focus {
  border-color: color-mix(in srgb, var(--session-ui-accent) 48%, var(--border-bright) 52%);
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--session-ui-accent) 18%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-input-shell.is-portfolio .profile-input-icon {
  color: color-mix(in srgb, var(--green) 74%, #ffffff 26%);
}

html[data-theme='dark'] .profile-settings-modern .profile-input-shell.is-portfolio:focus-within .profile-input-icon {
  color: var(--green);
}

html[data-theme='dark'] .profile-settings-modern .profile-input-shell.is-portfolio .profile-modern-input.input-field:focus {
  border-color: color-mix(in srgb, var(--green) 46%, var(--border-bright) 54%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-verified-badge {
  color: var(--green);
}

html[data-theme='dark'] .profile-settings-modern .profile-form-actions {
  border-top-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-form-submit {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  box-shadow: 0 12px 24px color-mix(in srgb, #0ea5e9 28%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-form-submit:hover {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

html[data-theme='dark'] .profile-settings-modern .profile-form-reset {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-secondary);
  box-shadow: 0 8px 18px color-mix(in srgb, #000000 18%, transparent);
}

html[data-theme='dark'] .profile-settings-modern .profile-form-reset:hover {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] .forecast-params-modern {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 94%, transparent), color-mix(in srgb, var(--session-ui-accent) 10%, var(--bg-surface) 90%));
  box-shadow:
    0 14px 34px color-mix(in srgb, #000000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] .forecast-params-modern .report-row {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}

html[data-theme='dark'] .forecast-report-day-modern {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 95%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent));
  box-shadow:
    0 14px 30px color-mix(in srgb, #000000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'][data-market-session='open'] .report-day-card:hover {
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--green) 12%, var(--bg-card) 88%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--green) 16%, #000000 84%), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'][data-market-session='premarket'] .report-day-card:hover {
  border-color: color-mix(in srgb, var(--gold) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--gold) 12%, var(--bg-card) 88%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--gold) 15%, #000000 85%), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'][data-market-session='aftermarket'] .report-day-card:hover {
  border-color: color-mix(in srgb, var(--purple) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--purple) 12%, var(--bg-card) 88%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--purple) 15%, #000000 85%), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'][data-market-session='closed'] .report-day-card:hover {
  border-color: color-mix(in srgb, var(--red) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--red) 12%, var(--bg-card) 88%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--red) 15%, #000000 85%), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'][data-market-session] .report-day-card.bullish:hover {
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--green) 12%, var(--bg-card) 88%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--green) 16%, #000000 84%), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'][data-market-session] .report-day-card.bearish:hover {
  border-color: color-mix(in srgb, var(--red) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--red) 12%, var(--bg-card) 88%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--red) 15%, #000000 85%), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'][data-market-session] .report-day-card.neutral:hover {
  border-color: color-mix(in srgb, var(--gold) 56%, var(--border-bright) 44%);
  background: color-mix(in srgb, var(--gold) 12%, var(--bg-card) 88%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--gold) 15%, #000000 85%), inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] .forecast-report-day-modern .report-row {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}

html[data-theme='dark'] #page-forecast > .section-header {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, #000000 30%, transparent);
}

html[data-theme='dark'] #fullForecastGrid .day-card {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 95%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent));
  box-shadow:
    0 14px 30px color-mix(in srgb, #000000 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'][data-market-session='open'] #fullForecastGrid .day-card:hover {
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-bright) 44%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--green) 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-surface) 90%, transparent));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--green) 18%, #000000 82%);
}

html[data-theme='dark'][data-market-session='premarket'] #fullForecastGrid .day-card:hover {
  border-color: color-mix(in srgb, var(--gold) 56%, var(--border-bright) 44%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-surface) 90%, transparent));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--gold) 16%, #000000 84%);
}

html[data-theme='dark'][data-market-session='aftermarket'] #fullForecastGrid .day-card:hover {
  border-color: color-mix(in srgb, var(--purple) 56%, var(--border-bright) 44%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--purple) 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-surface) 90%, transparent));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--purple) 16%, #000000 84%);
}

html[data-theme='dark'][data-market-session='closed'] #fullForecastGrid .day-card:hover {
  border-color: color-mix(in srgb, var(--red) 56%, var(--border-bright) 44%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--red) 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-surface) 90%, transparent));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--red) 16%, #000000 84%);
}

html[data-theme='dark'] #fullForecastGrid .day-card.bullish:hover {
  border-color: color-mix(in srgb, var(--green) 56%, var(--border-bright) 44%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--green) 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-surface) 90%, transparent));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--green) 18%, #000000 82%);
}

html[data-theme='dark'] #fullForecastGrid .day-card.bearish:hover {
  border-color: color-mix(in srgb, var(--red) 56%, var(--border-bright) 44%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--red) 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-surface) 90%, transparent));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--red) 18%, #000000 82%);
}

html[data-theme='dark'] #fullForecastGrid .day-card.neutral:hover {
  border-color: color-mix(in srgb, var(--gold) 56%, var(--border-bright) 44%);
  background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-surface) 90%, transparent));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--gold) 16%, #000000 84%);
}

html[data-theme='dark'] #fullForecastGrid .day-card.selected {
  border-color: color-mix(in srgb, var(--forecast-card-hover-accent) 58%, var(--border-bright) 42%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--forecast-card-hover-accent) 16%, var(--bg-surface) 84%),
      color-mix(in srgb, var(--bg-surface) 96%, transparent)
    );
  box-shadow:
    0 16px 30px color-mix(in srgb, var(--forecast-card-hover-accent) 14%, #000000 86%),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] #fullForecastGrid .day-card.hintable::after {
  border-color: color-mix(in srgb, var(--session-ui-accent) 40%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  color: color-mix(in srgb, var(--session-ui-accent) 76%, var(--text-primary) 24%);
}

html[data-theme='dark'] #page-forecast #fullForecastGrid {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 8%, var(--bg-surface) 92%)
    ) !important;
  box-shadow:
    0 18px 34px color-mix(in srgb, #000000 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
  backdrop-filter: blur(20px);
}

html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-widget {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent) !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, #000000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-widget:hover,
html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-widget.selected {
  background:
    linear-gradient(
      175deg,
      color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 12%, var(--bg-card) 88%),
      color-mix(in srgb, var(--bg-surface) 92%, transparent)
    ) !important;
  border-color: color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 44%, var(--border-bright) 56%);
  box-shadow: 0 16px 28px color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 14%, #000000 86%) !important;
}

html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-label {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-date,
html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-rec {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-prob-mini-track {
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}

html[data-theme='dark'] #page-options > .section-header {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 94%, transparent), color-mix(in srgb, var(--session-ui-accent) 10%, var(--bg-surface) 90%));
  box-shadow:
    0 14px 30px color-mix(in srgb, #000000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] #page-options .card {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 94%, transparent), color-mix(in srgb, var(--session-ui-accent) 8%, var(--bg-surface) 92%));
  box-shadow:
    0 12px 28px color-mix(in srgb, #000000 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] #page-options .options-panel-stack .report-row,
html[data-theme='dark'] #page-options #optionsExposurePanel .report-row,
html[data-theme='dark'] #page-options .options-check-item,
html[data-theme='dark'] #page-options .options-day-btn,
html[data-theme='dark'] #page-options .options-playbook-card,
html[data-theme='dark'] #page-options .options-readiness-box,
html[data-theme='dark'] #page-options .position-plan-chip,
html[data-theme='dark'] #page-options .options-table-wrap {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}

html[data-theme='dark'] #page-options .options-day-btn.active {
  border-color: color-mix(in srgb, var(--session-ui-accent) 62%, var(--border-bright) 38%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--session-ui-accent) 18%, var(--bg-surface) 82%), color-mix(in srgb, var(--bg-surface) 96%, transparent));
}

html[data-theme='dark'] #page-options .options-exposure-help,
html[data-theme='dark'] #page-options .options-history-table th {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

html[data-theme='dark'] #page-options .options-history-table tr:hover td {
  background: color-mix(in srgb, var(--session-ui-accent) 10%, var(--bg-hover) 90%);
}

/* ===== AUTH MODAL (SIMPLE VERTEX CARD) ===== */
@keyframes authFadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes authFadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes authZoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.auth-view-enter-right {
  animation: authFadeInRight 0.45s ease-out both;
}

.auth-view-enter-left {
  animation: authFadeInLeft 0.45s ease-out both;
}

.auth-register-step.active {
  animation: authZoomIn 0.28s ease-out both;
}

.auth-modal-overlay {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
}

.auth-modal-overlay::before {
  display: none;
}

.auth-modal.simple-auth-modal {
  width: min(600px, 94vw);
  max-height: calc(100dvh - (var(--auth-modal-pad, 16px) * 2));
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.auth-modal.simple-auth-modal .auth-modal-close {
  right: -6px;
  top: -6px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #d7dfe9;
  background: #ffffff;
  color: #64748b;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.auth-card-shell {
  width: 100%;
  max-height: calc(100dvh - (var(--auth-modal-pad, 16px) * 2));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border-radius: 34px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.14);
  padding: 26px;
}

.auth-tabbar {
  display: flex;
  position: relative;
  border-radius: 999px;
  background: #e7edf5;
  border: 1px solid #d8e1ee;
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(148, 163, 184, 0.25);
  transform: translateX(0);
  transition: transform 0.3s ease;
}

.auth-tabbar.register .auth-tab-indicator {
  transform: translateX(calc(100% + 4px));
}

.auth-tabbar.is-hidden {
  display: none;
}

.auth-tab-btn {
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.auth-tab-btn.active {
  color: #0f172a;
}

.auth-view {
  display: none;
}

.auth-view.active {
  display: block;
}

.auth-form-stack {
  display: grid;
  gap: 16px;
}

.auth-field {
  display: grid;
  gap: 8px;
}

.auth-field-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

.auth-input-wrap {
  position: relative;
}

.auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 20px;
  pointer-events: none;
}

.auth-input-field {
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid #d3deec;
  background: #ffffff;
  color: #0f172a;
  font-family: var(--body);
  font-size: 16px;
  padding: 0 16px;
}

.auth-input-field.with-icon {
  padding-left: 48px;
}

.auth-input-field::placeholder {
  color: #b7c1cf;
}

.auth-input-field:focus {
  outline: none;
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
}

.auth-input-field[type="password"] {
  letter-spacing: 0.08em;
}

select.auth-input-field {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.auth-forgot-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}

.auth-forgot-link {
  color: #0d9488;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.auth-forgot-link:hover {
  color: #0f766e;
}

.auth-main-btn,
.auth-gradient-btn {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--body);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-main-btn {
  background: #0f172a;
}

.auth-main-btn:hover {
  background: #111d34;
  transform: translateY(-1px);
}

.auth-gradient-btn {
  background: linear-gradient(90deg, #f43f5e, #f97316);
}

.auth-gradient-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(244, 63, 94, 0.26);
}

.auth-main-btn .auth-btn-icon,
.auth-gradient-btn .auth-btn-icon {
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.auth-gradient-btn:hover .auth-btn-icon,
.auth-main-btn:hover .auth-btn-icon {
  transform: translateX(2px);
}

.auth-step-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #e8eef6;
  overflow: hidden;
  margin: 4px 0 18px;
}

.auth-step-line {
  display: none;
}

.auth-step-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 33.333%;
  background: linear-gradient(90deg, #38bdf8, #14b8a6);
  transition: width 0.35s ease;
}

.auth-step-dot {
  display: none;
}

.auth-register-step {
  display: none;
}

.auth-register-step.active {
  display: block;
}

.auth-step-title {
  margin: 0 0 4px;
  color: #0f172a;
  font-family: var(--body);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
}

.auth-step-helper {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.auth-register-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.auth-back-btn {
  min-width: 96px;
  min-height: 58px;
  border: 1px solid #d1dbe8;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff, #eaf1f8);
  color: #334155;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transition: all 0.2s ease;
}

.auth-back-btn:hover {
  border-color: #0ea5e9;
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(14, 165, 233, 0.16);
  transform: translateY(-1px);
}

.auth-message {
  min-height: 18px;
  margin-top: 12px;
  font-family: var(--body);
  font-size: 13px;
  color: #64748b;
}

.auth-message.error {
  color: #e11d48;
}

.auth-message.success {
  color: #0f766e;
}

.auth-legal {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5ecf4;
  text-align: center;
  color: #94a3b8;
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.55;
}

.auth-legal a {
  color: #334155;
  font-weight: 800;
  text-decoration: none;
}

.auth-legal a:hover {
  color: #f43f5e;
}

.auth-view-recovery {
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #f2f7fd);
  border: 1px solid #dbe6f3;
  padding: 14px;
}

.auth-recovery-head {
  display: flex;
  align-items: center;
}

.auth-recovery-back {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #d8e1ee;
  background: linear-gradient(180deg, #ffffff, #edf3fa);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.09);
}

.auth-recovery-back i {
  font-size: 20px;
}

.auth-recovery-back:hover {
  transform: translateX(-2px);
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.auth-recovery-code-wrap .auth-input-field.with-icon,
.auth-password-status-wrap .auth-input-field.with-icon {
  padding-right: 44px;
}

.auth-recovery-verified-icon,
.auth-password-status-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) scale(0.92);
  color: #0ea5e9;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
  pointer-events: none;
  font-size: 20px;
}

.auth-recovery-code-wrap.is-verified .auth-input-field,
.auth-password-status-wrap.is-verified .auth-input-field {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.auth-recovery-code-wrap.is-verified .auth-recovery-verified-icon,
.auth-password-status-wrap.is-verified .auth-password-status-icon {
  color: #16a34a;
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.auth-recovery-code-wrap.is-invalid .auth-input-field,
.auth-password-status-wrap.is-invalid .auth-input-field {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.auth-recovery-code-wrap.is-invalid .auth-recovery-verified-icon,
.auth-password-status-wrap.is-invalid .auth-password-status-icon {
  color: #dc2626;
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.auth-recovery-code-card {
  margin-top: 10px;
  border: 1px solid #d6e4f2;
  border-radius: 14px;
  background: linear-gradient(165deg, #f8fbff, #edf4fb);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.auth-recovery-code-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #475569;
}

.auth-recovery-code-value {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #d8e4f1;
  border-radius: 10px;
  padding: 8px 10px;
  word-break: break-all;
}

.auth-recovery-code-help {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

.auth-recovery-code-actions {
  display: flex;
  justify-content: flex-end;
}

.auth-reg-overview-card {
  display: grid;
  gap: 8px;
  border: 1px solid #dce6f2;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff, #f1f6fc);
  padding: 12px;
}

.auth-reg-overview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: #64748b;
}

.auth-reg-overview-row strong {
  color: #0f172a;
  font-weight: 700;
}

.auth-reg-avatar-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-reg-avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid #cfd9e7;
  background: linear-gradient(135deg, #e2ebf6, #f8fbff);
  color: #0f172a;
  font-family: var(--body);
  font-size: 20px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.auth-reg-avatar-preview.has-image {
  color: transparent;
}

.auth-reg-avatar-copy {
  display: grid;
  gap: 3px;
}

.auth-reg-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 14px;
  border: 1px dashed #94a3b8;
  background: #f8fbff;
  color: #334155;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.auth-reg-upload-btn:hover {
  border-color: #0ea5e9;
  color: #0f172a;
}

.auth-reg-avatar-input {
  display: none;
}

.auth-consent-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #d8e4f1;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.auth-consent-card:hover {
  transform: translateY(-1px);
  border-color: #86efac;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.08);
}

.auth-consent-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-consent-check {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.auth-consent-card input:checked + .auth-consent-check {
  border-color: #22c55e;
  background: transparent;
  color: #16a34a;
  transform: scale(1.03);
}

.auth-consent-card input:checked ~ .auth-consent-copy strong {
  color: #166534;
}

.auth-consent-card input:checked ~ .auth-consent-copy a {
  color: #15803d;
}

.auth-consent-copy {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
}

.auth-consent-copy strong {
  color: #0f172a;
  font-size: 13px;
}

.auth-consent-copy a {
  color: #0284c7;
  text-decoration: none;
}

.auth-consent-copy a:hover {
  text-decoration: underline;
}

.profile-forecast-mode-card {
  position: relative;
  overflow: hidden;
  border-color: #d7e3ee !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.profile-forecast-mode-card::before {
  content: none;
}

.profile-forecast-mode-card > * {
  position: relative;
  z-index: 1;
}

.profile-settings-grid .profile-forecast-mode-card {
  grid-column: 1 / -1;
}

.auth-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-mode-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 134px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #d9e5f2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 252, 0.92)),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 24px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.auth-mode-card:hover {
  transform: translateY(-1px);
  border-color: #8dc7ee;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 14px 30px rgba(15, 23, 42, 0.08);
}

.auth-mode-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.auth-mode-card.is-selected {
  border-color: #14b8a6;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(20, 184, 166, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 253, 245, 0.92));
  box-shadow:
    0 0 0 1px rgba(20, 184, 166, 0.18),
    0 16px 34px rgba(15, 23, 42, 0.08);
}

.auth-mode-card-main {
  display: grid;
  gap: 6px;
}

.auth-mode-card-main strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.3;
}

.auth-mode-card-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #cae0f2;
  background: rgba(255, 255, 255, 0.84);
  color: #0f766e;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.auth-mode-card-copy {
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.auth-mode-summary-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid #d9e6f3;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14, 165, 233, 0.12), transparent 56%),
    linear-gradient(180deg, #f8fbff, #eef6fb);
}

.auth-mode-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auth-mode-summary-label {
  color: #64748b;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.auth-mode-summary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.auth-mode-summary-title {
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.auth-mode-summary-copy {
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.auth-mode-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.auth-mode-inline-note {
  flex: 1;
  min-width: 220px;
  color: #475569;
  font-size: 12px;
  line-height: 1.6;
}

.auth-mode-help-btn {
  min-height: 42px;
  padding-inline: 16px;
  font-weight: 700;
}

.auth-mode-review-help {
  width: 100%;
  justify-content: center;
}

#forecastModeGuidePopupOverlay {
  padding: 16px;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(10px);
}

.forecast-mode-guide-popup {
  width: min(1152px, 100%);
  max-height: 90vh;
  margin: auto;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  box-shadow: 0 32px 96px rgba(15, 23, 42, 0.24);
  overflow: hidden;
}

.forecast-mode-guide-modal-shell {
  width: 100%;
  max-height: 90vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

.forecast-mode-guide-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.forecast-mode-guide-scroll::-webkit-scrollbar {
  width: 8px;
}

.forecast-mode-guide-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.forecast-mode-guide-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #cbd5e1;
  border: 2px solid #f8fafc;
}

.forecast-mode-guide-header {
  position: relative;
  padding: 24px 32px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.forecast-mode-guide-header-copy {
  max-width: none;
}

.forecast-mode-guide-hero {
  margin: 0;
  padding-right: 72px;
}

.forecast-mode-guide-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.5);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.forecast-mode-guide-close:hover {
  background: rgba(226, 232, 240, 0.82);
  color: #475569;
}

.forecast-mode-guide-close:focus-visible,
.forecast-mode-guide-action:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 2px;
}

.forecast-mode-guide-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.forecast-mode-guide-kicker {
  margin-bottom: 8px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.forecast-mode-guide-heading {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}

.forecast-mode-guide-copy {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.forecast-mode-guide-grid {
  padding: 24px 32px 32px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.forecast-mode-guide-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.forecast-mode-guide-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.forecast-mode-guide-card-bar {
  width: 100%;
  height: 4px;
  background: var(--forecast-guide-bar, #94a3b8);
}

.forecast-mode-guide-card-body {
  padding: 24px;
}

.forecast-mode-guide-card-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.forecast-mode-guide-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.forecast-mode-guide-tag-left {
  background: #f1f5f9;
  color: #475569;
}

.forecast-mode-guide-tag-right {
  color: var(--forecast-guide-text, #334155);
  background: var(--forecast-guide-surface, #f1f5f9);
  border: 1px solid var(--forecast-guide-border, #e2e8f0);
}

.forecast-mode-guide-card-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.forecast-mode-guide-card-copy {
  min-width: 0;
}

.forecast-mode-guide-icon-wrap {
  width: 36px;
  height: 36px;
  margin-top: 2px;
  border-radius: 14px;
  background: var(--forecast-guide-surface, #f1f5f9);
  color: var(--forecast-guide-text, #334155);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.forecast-mode-guide-icon-wrap svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.forecast-mode-guide-card-title {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.forecast-mode-guide-card-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

.forecast-mode-guide-divider {
  height: 1px;
  background: #f1f5f9;
  margin-bottom: 20px;
}

.forecast-mode-guide-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.forecast-mode-guide-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.forecast-mode-guide-point-dot {
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.forecast-mode-guide-point-copy {
  color: #475569;
  font-size: 14px;
  line-height: 1.7;
}

.forecast-mode-guide-point-prefix {
  color: #0f172a;
  font-weight: 700;
}

.forecast-mode-guide-footer {
  flex: 0 0 auto;
  padding: 16px 32px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
}

.forecast-mode-guide-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 24px;
  border: none;
  border-radius: 12px;
  background: #0f172a;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.forecast-mode-guide-action:hover {
  background: #1e293b;
}

html[data-theme='dark'] .profile-forecast-mode-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent) !important;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--bg-deep) 48%, transparent);
}

html[data-theme='dark'] .auth-mode-card,
html[data-theme='dark'] .auth-mode-summary-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--bg-deep) 56%, transparent);
}

html[data-theme='dark'] .auth-mode-card.is-selected {
  border-color: color-mix(in srgb, var(--green) 58%, var(--border-bright) 42%);
  background:
    radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--green) 14%, transparent), transparent 56%),
    color-mix(in srgb, var(--bg-card) 92%, transparent);
}

html[data-theme='dark'] .auth-mode-card-main strong,
html[data-theme='dark'] .auth-mode-summary-title {
  color: var(--text-primary);
}

html[data-theme='dark'] .auth-mode-card-copy,
html[data-theme='dark'] .auth-mode-summary-copy,
html[data-theme='dark'] .auth-mode-inline-note {
  color: var(--text-secondary);
}

html[data-theme='dark'] .auth-mode-card-chip {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] #forecastModeGuidePopupOverlay {
  background: rgba(2, 6, 23, 0.68);
}

html[data-theme='dark'] .forecast-mode-guide-popup {
  border-color: rgba(148, 163, 184, 0.14);
  background: #020617;
  box-shadow: 0 32px 96px rgba(2, 6, 23, 0.76);
}

html[data-theme='dark'] .forecast-mode-guide-modal-shell {
  background: #020617;
}

html[data-theme='dark'] .forecast-mode-guide-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.8);
  border-color: #020617;
}

html[data-theme='dark'] .forecast-mode-guide-header,
html[data-theme='dark'] .forecast-mode-guide-footer {
  border-color: rgba(148, 163, 184, 0.14);
}

html[data-theme='dark'] .forecast-mode-guide-footer {
  background: rgba(15, 23, 42, 0.9);
}

html[data-theme='dark'] .forecast-mode-guide-close {
  background: rgba(30, 41, 59, 0.72);
  color: #94a3b8;
}

html[data-theme='dark'] .forecast-mode-guide-close:hover {
  background: rgba(51, 65, 85, 0.86);
  color: #e2e8f0;
}

html[data-theme='dark'] .forecast-mode-guide-kicker {
  color: #5eead4;
}

html[data-theme='dark'] .forecast-mode-guide-heading,
html[data-theme='dark'] .forecast-mode-guide-card-title,
html[data-theme='dark'] .forecast-mode-guide-point-prefix {
  color: #f8fafc;
}

html[data-theme='dark'] .forecast-mode-guide-copy,
html[data-theme='dark'] .forecast-mode-guide-card-subtitle,
html[data-theme='dark'] .forecast-mode-guide-point-copy {
  color: #94a3b8;
}

html[data-theme='dark'] .forecast-mode-guide-card {
  border-color: rgba(51, 65, 85, 0.92);
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 16px 42px rgba(2, 6, 23, 0.5);
}

html[data-theme='dark'] .forecast-mode-guide-card:hover {
  border-color: rgba(100, 116, 139, 0.88);
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.58);
}

html[data-theme='dark'] .forecast-mode-guide-tag-left {
  background: rgba(30, 41, 59, 0.9);
  color: #cbd5e1;
}

html[data-theme='dark'] .forecast-mode-guide-tag-right {
  color: color-mix(in srgb, var(--forecast-guide-text, #cbd5e1) 72%, #ffffff 28%);
  background: color-mix(in srgb, var(--forecast-guide-surface, #1e293b) 18%, rgba(15, 23, 42, 0.92));
  border-color: color-mix(in srgb, var(--forecast-guide-border, #475569) 32%, rgba(148, 163, 184, 0.18));
}

html[data-theme='dark'] .forecast-mode-guide-icon-wrap {
  background: color-mix(in srgb, var(--forecast-guide-surface, #1e293b) 20%, rgba(15, 23, 42, 0.92));
  color: color-mix(in srgb, var(--forecast-guide-icon, #cbd5e1) 72%, #ffffff 28%);
}

html[data-theme='dark'] .forecast-mode-guide-divider {
  background: rgba(51, 65, 85, 0.72);
}

@media (max-width: 840px) {
  .auth-mode-grid,
  .forecast-mode-guide-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #forecastModeGuidePopupOverlay {
    padding: 12px;
  }

  .forecast-mode-guide-popup,
  .forecast-mode-guide-modal-shell {
    max-height: calc(100vh - 24px);
  }

  .forecast-mode-guide-header {
    padding: 20px;
  }

  .forecast-mode-guide-hero {
    padding-right: 56px;
  }

  .forecast-mode-guide-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
  }

  .forecast-mode-guide-heading {
    font-size: 28px;
  }

  .forecast-mode-guide-grid {
    padding: 20px;
    gap: 20px;
  }

  .forecast-mode-guide-card-body {
    padding: 20px;
  }

  .forecast-mode-guide-card-tags {
    flex-wrap: wrap;
  }

  .forecast-mode-guide-footer {
    padding: 14px 20px;
  }

  .forecast-mode-guide-action {
    width: 100%;
    justify-content: center;
  }
}

.auth-register-complete-panel {
  display: none;
  margin-top: 8px;
  border: 1px solid #dbe6f3;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff, #edf4fb);
  padding: 14px;
}

.auth-register-complete-panel.visible {
  display: block;
}

.auth-reg-final-svg {
  width: 96px;
  height: 96px;
  margin: 0 auto 10px;
}

.auth-reg-final-svg svg {
  width: 100%;
  height: 100%;
}

.auth-reg-final-svg .ring {
  fill: none;
  stroke: #c7d8ea;
  stroke-width: 6;
}

.auth-reg-final-svg .scan {
  fill: none;
  stroke: #0ea5e9;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0;
}

.auth-reg-final-svg .check {
  fill: none;
  stroke: #10b981;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
}

.auth-reg-final-svg.running .scan {
  opacity: 1;
  animation: authRegScan 0.9s ease-in-out infinite;
}

.auth-reg-final-svg.done .check {
  animation: authRegDrawCheck 0.45s ease forwards;
}

.auth-reg-complete-copy {
  text-align: center;
}

.auth-reg-complete-title {
  color: #0f172a;
  font-family: var(--body);
  font-size: 20px;
  font-weight: 800;
}

.auth-reg-complete-sub {
  margin-top: 5px;
  color: #64748b;
  font-size: 13px;
}

.auth-reg-complete-actions {
  margin-top: 12px;
  display: none;
  gap: 10px;
}

.auth-reg-complete-actions .btn {
  flex: 1;
  min-height: 42px;
  border-radius: 12px;
}

.auth-register-complete-panel.done .auth-reg-complete-actions {
  display: flex;
}

.auth-login-success-panel {
  display: none;
  margin-top: 14px;
}

.auth-login-success-panel.visible {
  display: block;
}

.auth-login-success-card {
  border: 1px solid #dbe6f3;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff, #edf4fb);
  padding: 14px;
  text-align: center;
}

.auth-login-success-panel.done #authLoginSuccessActions {
  display: flex;
}

.updates-popup {
  width: min(760px, 94vw);
  border-radius: 20px;
}

.updates-popup-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.updates-card {
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}

.updates-card-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 8px;
}

.updates-list {
  margin: 0;
  padding-left: 16px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.profile-updates-cta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.profile-updates-btn {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

@keyframes authRegScan {
  0% { transform: translateY(-22px); opacity: 0.2; }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(22px); opacity: 0.2; }
}

@keyframes authRegDrawCheck {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 768px) {
  .auth-card-shell {
    border-radius: 28px;
    padding: 16px;
  }

  .auth-tab-btn {
    min-height: 46px;
    font-size: 14px;
  }

  .auth-input-field {
    min-height: 52px;
    border-radius: 16px;
    font-size: 16px;
  }

  .auth-main-btn,
  .auth-gradient-btn {
    min-height: 54px;
    border-radius: 18px;
    font-size: 16px;
  }

  .auth-back-btn {
    min-height: 52px;
  }

  .auth-step-title {
    font-size: 28px;
  }
}

@media (max-width: 980px) {
  .signal-insight-grid {
    grid-template-columns: 1fr;
  }

  .signal-mode-grid {
    grid-template-columns: 1fr;
  }

  .signal-prob-row {
    grid-template-columns: minmax(68px, auto) minmax(0, 1fr) 40px;
  }

  .detail-risk-grid,
  .position-plan-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-knowledge .report-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-bright) 85%, transparent);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--cyan) 42%, var(--border-bright) 58%);
}

@media (max-width: 1200px) {
  .app-shell {
    padding: 12px;
    gap: 12px;
  }

  .sidebar {
    width: 232px;
    border-radius: 18px;
  }

  .top-bar {
    margin: 10px;
    margin-bottom: 0;
    grid-template-columns: 1fr;
  }

  .top-bar-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    min-width: 0;
    width: 100%;
    max-width: 220px;
    justify-self: end;
  }
}

@media (max-width: 980px) {
  .app-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .sidebar-logo {
    margin: 0 8px 0 2px;
    padding: 8px 10px;
    flex-shrink: 0;
  }

  .sidebar-divider {
    display: none;
  }

  .sidebar-session-wrap:not(.sidebar-session-top) {
    display: none;
  }

  .sidebar-session-wrap.sidebar-session-top {
    display: block;
    width: auto;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    flex-shrink: 0;
  }

  .sidebar-session-wrap.sidebar-session-top .market-status {
    min-height: 36px;
    border-radius: 999px;
    padding: 6px 10px;
    grid-template-columns: 16px minmax(0, auto);
  }

  .sidebar-auth-wrap {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    width: auto;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .sidebar-auth-wrap .sidebar-auth-pill {
    min-height: 32px;
    width: auto;
    padding: 0 10px;
    font-size: 9px;
  }

  .sidebar-auth-wrap .sidebar-auth-user {
    display: none;
  }

  .nav-item {
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
  }

  .nav-item .nav-label {
    text-align: center;
  }

  .nav-badge {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-left: 6px;
  }

  .nav-item .nav-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 8px;
  }

  .nav-item .nav-icon .nav-icon-svg {
    width: 16px;
    height: 16px;
  }

  .main-content {
    overflow: visible;
  }

  .top-bar {
    position: static;
    margin: 0 0 12px;
    border-radius: 16px;
  }

  .top-bar-right {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: flex-start;
    min-width: 0;
    max-width: 220px;
    justify-self: start;
  }

  .trajx-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trajx-day-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .trajx-detail-grid {
    grid-template-columns: 1fr;
  }

  .page {
    padding: 14px var(--main-shell-gutter);
  }

  .page.active > :first-child {
    margin-top: 8px;
  }

  .section-header {
    align-items: stretch;
  }

  .section-header .tabs {
    margin-left: 0;
    width: 100%;
  }

  .profile-overview-grid,
  .profile-security-grid,
  .profile-settings-grid {
    grid-template-columns: 1fr;
  }

  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .profile-hub-main-panel {
    flex-direction: column;
  }

  .profile-hub-sidebar {
    width: 100%;
    flex: 0 1 auto;
    flex-shrink: 1;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.64);
  }

  .profile-hub-sidebar-nav {
    max-height: 220px;
  }

  .profile-hub-content-scroll {
    padding: 18px;
  }

  .auth-modal:not(.simple-auth-modal) {
    grid-template-columns: 1fr;
    width: min(700px, 96vw);
  }

  .auth-modal:not(.simple-auth-modal) .auth-modal-left {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-bright) 52%, transparent);
    padding: 20px 18px 16px;
  }

  .auth-modal:not(.simple-auth-modal) .auth-modal-right {
    padding: 20px 18px 22px;
  }

  .profile-hub-modal {
    width: min(960px, 96vw);
    height: min(92vh, 900px);
    border-radius: 28px;
  }

  .profile-hub-modal-inner {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .profile-hub-modal-overlay {
    align-items: stretch;
    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .top-bar {
    padding: 14px;
    grid-template-columns: 1fr;
  }

  .top-bar-right {
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .top-bar-left,
  .top-bar-right {
    width: 100%;
  }

  .ohl-box,
  .session-box {
    min-width: 100%;
  }

  .top-actions {
    width: 100%;
    justify-content: flex-start;
    max-width: 100%;
  }

  .trajx-kpi-grid {
    grid-template-columns: 1fr;
  }

  .trajx-day-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trajx-flow-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  }

  .trajx-flow-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .trajx-flow-right {
    text-align: left;
  }

  .forecast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trade-cal-day {
    min-height: 56px;
    padding: 5px;
  }

  .trade-cal-day .day-meta {
    font-size: 7px;
  }

  .trade-day-item-grid {
    grid-template-columns: 1fr;
  }

  .history-day-row {
    grid-template-columns: 1fr;
  }

  .history-log-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .history-price-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-history-day-boundaries,
  .price-history-boundary-legend,
  .price-history-popup-boundaries {
    gap: 6px;
  }

  .price-history-boundary-pill {
    font-size: 8px;
    padding: 3px 8px;
  }

  .detail-risk-grid,
  .position-plan-kpis {
    grid-template-columns: 1fr;
  }

  .profile-hub-tab {
    width: 100%;
    min-height: 48px;
    font-size: 12px;
  }

  .auth-hero-title {
    font-size: 22px;
  }

  .profile-hub-modal {
    width: 100%;
    max-width: 100%;
    height: min(calc(100dvh - 20px), 940px);
    max-height: calc(100dvh - 20px);
    border-radius: 22px;
    margin: auto;
  }

  .profile-hub-main-panel {
    border-radius: 1.6rem;
  }

  .profile-hub-title {
    font-size: 24px;
  }

  .profile-hub-sidebar-actions {
    grid-template-columns: 1fr;
  }

  .profile-hub-content-scroll {
    padding: 16px;
  }
}

/* ===== FINAL POPUP FIXES (READABILITY + LAYOUT) ===== */
#tradeEditorPopup .popup {
  border-radius: 22px;
  overflow: hidden;
}

#tradeEditorPopup .trade-editor-popup-body {
  margin-bottom: 0;
  border-radius: 16px;
  overflow: hidden;
}

#tradeEditorPopup .tracking-form-card {
  border-radius: 16px;
}

#tradeEditorPopup .tracking-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

#tradeEditorPopup .tracking-form-actions .btn {
  margin: 0 !important;
}

#tradeEditorPopup.popup-overlay {
  background: rgba(3, 10, 22, 0.44) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#tradeEditorPopup .popup::before,
#tradeEditorPopup .popup::after {
  display: none !important;
}

#tradeEditorPopup .popup.trade-editor-popup-modern {
  position: relative;
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  padding: 0;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  background: #ffffff;
  box-shadow: 0 28px 60px -18px rgba(15, 23, 42, 0.2);
}

#tradeEditorPopup .trade-editor-modern-form-shell {
  display: grid;
  grid-template-rows: auto auto auto;
  min-height: auto;
  max-height: none;
}

#tradeEditorPopup .popup.trade-editor-popup-modern[data-save-state='saving'] .trade-editor-modern-form-shell {
  opacity: 0.72;
}

#tradeEditorPopup .trade-editor-modern-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #dde5ec;
  background: #ffffff;
}

#tradeEditorPopup .trade-editor-modern-header-copy {
  display: grid;
  gap: 8px;
}

#tradeEditorPopup .trade-editor-modern-title {
  margin: 0;
  font-size: clamp(21px, 2.6vw, 24px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#tradeEditorPopup .trade-editor-modern-subtitle {
  margin: 0;
  max-width: 640px;
  color: #566577;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

#tradeEditorPopup .trade-editor-modern-validation {
  display: none;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

#tradeEditorPopup .trade-editor-modern-validation.is-visible {
  display: block;
}

#tradeEditorPopup .trade-editor-modern-close {
  width: 38px;
  height: 38px;
  border: 1px solid #dde5ec;
  border-radius: 999px;
  background: #ffffff;
  color: #66778a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

#tradeEditorPopup .trade-editor-modern-close:hover {
  background: #eef3f7;
  color: #0f172a;
  border-color: #c9d5e1;
}

#tradeEditorPopup .trade-editor-modern-close:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#tradeEditorPopup .trade-editor-popup-body {
  padding: 0;
  overflow: visible;
  background: #ffffff;
}

#tradeEditorPopup .trade-editor-modern-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 18px 24px 20px;
  align-items: start;
}

#tradeEditorPopup .trade-editor-modern-section {
  display: grid;
  gap: 10px;
}

#tradeEditorPopup .trade-editor-modern-section-asset {
  grid-column: 1 / -1;
}

#tradeEditorPopup .trade-editor-modern-section-status {
  grid-column: 1 / -1;
}

#tradeEditorPopup .trade-editor-modern-section-execution {
  grid-column: 1 / -1;
}

#tradeEditorPopup .trade-editor-modern-section-title,
#tradeEditorPopup .trade-editor-modern-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#tradeEditorPopup .trade-editor-modern-section-title {
  color: #7a8a9b;
  padding-left: 2px;
}

#tradeEditorPopup .trade-editor-modern-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#tradeEditorPopup .trade-editor-modern-inline-hint {
  min-height: 16px;
  color: #b45309;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}

#tradeEditorPopup .trade-editor-modern-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dde5ec;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

#tradeEditorPopup .trade-editor-modern-card-status {
  gap: 18px;
}

#tradeEditorPopup .trade-editor-modern-grid {
  display: grid;
  gap: 16px;
}

#tradeEditorPopup .trade-editor-modern-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#tradeEditorPopup .trade-editor-modern-grid-execution {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

#tradeEditorPopup .trade-editor-modern-grid-execution > .trade-editor-modern-field:nth-child(5),
#tradeEditorPopup .trade-editor-modern-grid-execution > .trade-editor-modern-field:nth-child(6) {
  grid-column: span 2;
}

#tradeEditorPopup .trade-editor-modern-field {
  display: grid;
  gap: 6px;
}

#tradeEditorPopup .trade-editor-modern-field.is-disabled {
  opacity: 0.62;
}

#tradeEditorPopup .trade-editor-modern-field.is-invalid .trade-editor-modern-label {
  color: #b91c1c;
}

#tradeEditorPopup .trade-editor-modern-label {
  color: #607182;
  padding-left: 2px;
}

#tradeEditorPopup .trade-editor-modern-label.is-disabled {
  color: #a8b5c2;
}

#tradeEditorPopup .trade-editor-modern-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#tradeEditorPopup .trade-editor-modern-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#tradeEditorPopup .trade-editor-modern-input-wrap.is-invalid .trade-editor-modern-input-icon {
  color: #dc2626;
}

#tradeEditorPopup .trade-editor-modern-input-wrap.has-icon .input-field {
  padding-left: 42px;
}

#tradeEditorPopup .trade-editor-modern-input-icon {
  position: absolute;
  left: 14px;
  font-size: 16px;
  color: #8b9aab;
  pointer-events: none;
}

#tradeEditorPopup .trade-editor-modern-input-icon.is-disabled {
  color: #a8b5c2;
}

#tradeEditorPopup .trade-editor-modern-input,
#tradeEditorPopup .trade-editor-modern-textarea {
  min-height: 46px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

#tradeEditorPopup .trade-editor-modern-field.is-invalid .trade-editor-modern-input,
#tradeEditorPopup .trade-editor-modern-field.is-invalid .trade-editor-modern-textarea {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

#tradeEditorPopup .trade-editor-modern-input::placeholder,
#tradeEditorPopup .trade-editor-modern-textarea::placeholder {
  color: #8a99a9;
  font-weight: 500;
}

#tradeEditorPopup .trade-editor-modern-input:focus,
#tradeEditorPopup .trade-editor-modern-textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

#tradeEditorPopup .trade-editor-modern-input.uppercase {
  text-transform: uppercase;
}

#tradeEditorPopup .trade-editor-modern-textarea {
  min-height: 84px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}

#tradeEditorPopup .trade-editor-modern-notes-field {
  gap: 10px;
}

#tradeEditorPopup .trade-editor-modern-field-error {
  min-height: 16px;
  padding-left: 2px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

#tradeEditorPopup .trade-editor-modern-textarea:disabled,
#tradeEditorPopup .trade-editor-modern-input:disabled {
  background: #f2f5f8;
  color: #8b9aab;
  border-color: #dce5ec;
  box-shadow: none;
  cursor: not-allowed;
}

#tradeEditorPopup .trade-editor-type-toggle,
#tradeEditorPopup .trade-editor-status-toggle {
  display: flex;
  gap: 8px;
  padding: 4px;
  border: 1px solid #d9e2ea;
  border-radius: 12px;
  background: #f2f5f8;
}

#tradeEditorPopup .trade-editor-type-btn,
#tradeEditorPopup .trade-editor-status-btn {
  flex: 1;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #607182;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

#tradeEditorPopup .trade-editor-type-btn:hover,
#tradeEditorPopup .trade-editor-status-btn:hover {
  color: #0f172a;
}

#tradeEditorPopup .trade-editor-type-btn.active,
#tradeEditorPopup .trade-editor-status-btn.active {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

#tradeEditorPopup .trade-editor-type-btn.active {
  color: #0f172a;
}

#tradeEditorPopup #tradeStatusOpenBtn.active {
  color: #0f766e;
}

#tradeEditorPopup #tradeStatusCompleteBtn.active {
  color: #059669;
}

#tradeEditorPopup .trade-status-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#tradeEditorPopup .trade-editor-modern-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid #dde5ec;
  background: #ffffff;
}

#tradeEditorPopup .trade-editor-modern-actions .btn {
  min-height: 54px;
  border-radius: 14px;
  padding: 0 20px;
  margin: 0 !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  flex: 1 1 0;
}

#tradeEditorPopup .trade-editor-modern-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  background: #2563eb !important;
  color: #ffffff !important;
  border: 0 !important;
}

#tradeEditorPopup .trade-editor-modern-cancel {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  background: #ffffff !important;
  color: #4b5563 !important;
  border: 1px solid rgba(229, 231, 235, 0.95) !important;
}

#tradeEditorPopup .trade-editor-modern-save-icon {
  font-size: 15px;
}

#tradeEditorPopup .trade-editor-modern-actions .btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

#tradeEditorPopup .trade-editor-save-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

#tradeEditorPopup .popup.trade-editor-popup-modern[data-save-state='saving'] .trade-editor-save-overlay,
#tradeEditorPopup .popup.trade-editor-popup-modern[data-save-state='success'] .trade-editor-save-overlay,
#tradeEditorPopup .popup.trade-editor-popup-modern[data-save-state='error'] .trade-editor-save-overlay {
  opacity: 1;
  pointer-events: auto;
}

#tradeEditorPopup .trade-editor-save-panel {
  display: none;
  width: min(360px, 100%);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px;
  border: 1px solid #dde5ec;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  text-align: center;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

#tradeEditorPopup .popup.trade-editor-popup-modern[data-save-state='saving'] .trade-editor-save-panel-saving,
#tradeEditorPopup .popup.trade-editor-popup-modern[data-save-state='success'] .trade-editor-save-panel-success,
#tradeEditorPopup .popup.trade-editor-popup-modern[data-save-state='error'] .trade-editor-save-panel-error {
  display: flex;
}

#tradeEditorPopup .trade-editor-save-spinner {
  width: 58px;
  height: 58px;
  border: 4px solid rgba(15, 118, 110, 0.14);
  border-top-color: #0f766e;
  border-radius: 999px;
  animation: trade-editor-save-spin 0.9s linear infinite;
}

@keyframes trade-editor-save-spin {
  to {
    transform: rotate(360deg);
  }
}

#tradeEditorPopup .trade-editor-save-icon {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

#tradeEditorPopup .trade-editor-save-icon-success {
  color: #047857;
  background: #d1fae5;
}

#tradeEditorPopup .trade-editor-save-icon-error {
  color: #b45309;
  background: #fef3c7;
}

#tradeEditorPopup .trade-editor-save-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
}

#tradeEditorPopup .trade-editor-save-detail {
  margin: 0;
  color: #566577;
  font-size: 14px;
  line-height: 1.55;
}

#tradeEditorPopup .trade-editor-save-done,
#tradeEditorPopup .trade-editor-save-retry,
#tradeEditorPopup .trade-editor-save-back {
  min-height: 52px;
  min-width: 150px;
  border-radius: 14px;
}

#tradeEditorPopup .trade-editor-save-error-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 860px) {
  #tradeEditorPopup .popup.trade-editor-popup-modern {
    width: calc(100vw - 18px);
    border-radius: 24px;
  }

  #tradeEditorPopup .trade-editor-modern-header,
  #tradeEditorPopup .trade-editor-modern-body,
  #tradeEditorPopup .trade-editor-modern-actions {
    padding-inline: 20px;
  }

  #tradeEditorPopup .trade-editor-modern-body {
    grid-template-columns: 1fr;
  }

  #tradeEditorPopup .trade-editor-modern-section-asset,
  #tradeEditorPopup .trade-editor-modern-section-status,
  #tradeEditorPopup .trade-editor-modern-section-execution {
    grid-column: auto;
  }

  #tradeEditorPopup .trade-editor-modern-grid-execution {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tradeEditorPopup .trade-editor-modern-grid-execution > .trade-editor-modern-field:nth-child(5),
  #tradeEditorPopup .trade-editor-modern-grid-execution > .trade-editor-modern-field:nth-child(6) {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  #tradeEditorPopup .trade-editor-modern-header {
    padding-top: 22px;
    padding-bottom: 18px;
  }

  #tradeEditorPopup .trade-editor-modern-grid-2,
  #tradeEditorPopup .trade-editor-modern-grid-execution {
    grid-template-columns: 1fr;
  }

  #tradeEditorPopup .trade-editor-modern-section-title-row,
  #tradeEditorPopup .trade-editor-modern-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #tradeEditorPopup .trade-editor-modern-actions .btn {
    width: 100%;
  }

  #tradeEditorPopup .trade-editor-modern-inline-hint {
    text-align: left;
  }

  #tradeEditorPopup .trade-editor-save-error-actions {
    flex-direction: column;
  }
}

html[data-theme='dark'] #tradeEditorPopup.popup-overlay {
  background: rgba(2, 6, 23, 0.64) !important;
}

html[data-theme='dark'] #tradeEditorPopup .popup.trade-editor-popup-modern {
  border-color: #334155;
  background: #0b1220;
  box-shadow: 0 32px 80px -20px rgba(2, 6, 23, 0.78);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-header,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-actions {
  border-color: #334155;
  background: #0f172a;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-popup-body {
  background: rgba(15, 23, 42, 0.58);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-card {
  border-color: #334155;
  background: #111827;
  box-shadow: none;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-validation {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(127, 29, 29, 0.26);
  color: #fecaca;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-title,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-save,
html[data-theme='dark'] #tradeEditorPopup #tradeStatusOpenBtn.active,
html[data-theme='dark'] #tradeEditorPopup #tradeStatusCompleteBtn.active {
  color: #f8fafc;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-subtitle,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-label,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-section-title,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-inline-hint {
  color: #94a3b8;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-close {
  background: #111827;
  color: #94a3b8;
  border-color: rgba(51, 65, 85, 0.96);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-close:hover {
  background: #162033;
  color: #e2e8f0;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-input,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-textarea {
  border-color: #334155;
  background: #111827;
  color: #e2e8f0;
  box-shadow: none;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-input::placeholder,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-textarea::placeholder,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-input-icon {
  color: #64748b;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-input:focus,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-textarea:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-field.is-invalid .trade-editor-modern-label,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-field-error,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-input-wrap.is-invalid .trade-editor-modern-input-icon {
  color: #fca5a5;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-field.is-invalid .trade-editor-modern-input,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-field.is-invalid .trade-editor-modern-textarea {
  border-color: rgba(248, 113, 113, 0.58);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-textarea:disabled,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-input:disabled {
  background: #0f172a;
  color: #64748b;
  border-color: #1e293b;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-type-toggle,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-status-toggle {
  border-color: #334155;
  background: #111827;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-type-btn,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-status-btn {
  color: #94a3b8;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-type-btn:hover,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-status-btn:hover {
  color: #e2e8f0;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-type-btn.active,
html[data-theme='dark'] #tradeEditorPopup .trade-editor-status-btn.active {
  background: #162033;
  color: #f8fafc;
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.42);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-save {
  background: #2563eb !important;
  color: #ffffff !important;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-modern-cancel {
  background: #111827 !important;
  color: #e2e8f0 !important;
  border-color: rgba(51, 65, 85, 0.96) !important;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-save-overlay {
  background: rgba(2, 6, 23, 0.72);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-save-panel {
  border-color: #334155;
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 22px 56px rgba(2, 6, 23, 0.42);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-save-title {
  color: #f8fafc;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-save-detail {
  color: #94a3b8;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-save-icon-success {
  color: #6ee7b7;
  background: rgba(6, 78, 59, 0.42);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-save-icon-error {
  color: #fbbf24;
  background: rgba(146, 64, 14, 0.36);
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-save-spinner {
  border-color: rgba(20, 184, 166, 0.14);
  border-top-color: #14b8a6;
}

html[data-theme='dark'] .sidebar-quick-submenu,
html[data-theme='dark'] .sidebar-quick-submenu-floating {
  border-color: #334155;
  background: #0f172a;
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.42);
}

html[data-theme='dark'] .sidebar-learn-more-group + .sidebar-learn-more-group,
html[data-theme='dark'] .sidebar-learn-more-group-title {
  border-color: #334155;
  color: #94a3b8;
}

html[data-theme='dark'] .sidebar-learn-more-card {
  border-color: #334155;
  background: #111827;
  box-shadow: none;
}

html[data-theme='dark'] .sidebar-learn-more-card:hover,
html[data-theme='dark'] .sidebar-learn-more-card.is-active {
  background: #162033;
  border-color: #475569;
}

html[data-theme='dark'] .sidebar-learn-more-card-label {
  color: #f8fafc;
}

html[data-theme='dark'] .sidebar-learn-more-card-desc,
html[data-theme='dark'] .sidebar-learn-more-card-open {
  color: #94a3b8;
}

html[data-theme='dark'] .system-update-image-lightbox-card {
  border-color: #334155;
  background: linear-gradient(165deg, #0f172a, #111827);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.42);
}

html[data-theme='dark'] .system-update-image-lightbox-image {
  background: #020617;
}

html[data-theme='dark'] .card-title {
  color: #e2e8f0;
}

html[data-theme='dark'] #page-simulations .simv2-prob-card,
html[data-theme='dark'] #page-simulations .simv2-card,
html[data-theme='dark'] #page-simulations .simv2-dist-metric-card,
html[data-theme='dark'] #page-simulations .simv2p-stat-card,
html[data-theme='dark'] #page-simulations .simv2p-graph-card,
html[data-theme='dark'] #page-simulations .simv2p-focus-card,
html[data-theme='dark'] #page-simulations .simv2p-day-pill {
  border-color: #334155;
  background: #0f172a;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
}

html[data-theme='dark'] #page-simulations .simv2-card-title,
html[data-theme='dark'] #page-simulations .simv2-prob-value,
html[data-theme='dark'] #page-simulations .simv2-dist-metric-card strong,
html[data-theme='dark'] #page-simulations .simv2p-stat-value.is-neutral,
html[data-theme='dark'] #page-simulations .simv2p-mini-row strong {
  color: #f8fafc;
}

html[data-theme='dark'] #page-simulations .simv2-prob-label,
html[data-theme='dark'] #page-simulations .simv2-prob-sub,
html[data-theme='dark'] #page-simulations .simv2-learning-label,
html[data-theme='dark'] #page-simulations .simv2-learning-pct,
html[data-theme='dark'] #page-simulations .simv2-dist-label,
html[data-theme='dark'] #page-simulations .simv2p-stat-label,
html[data-theme='dark'] #page-simulations .simv2p-legend span,
html[data-theme='dark'] #page-simulations .simv2p-mini-row span,
html[data-theme='dark'] #page-simulations .simv2p-axis-y text,
html[data-theme='dark'] #page-simulations .simv2p-axis-x text {
  color: #94a3b8;
  fill: #94a3b8;
}

html[data-theme='dark'] #page-simulations .simv2-learning-track,
html[data-theme='dark'] #page-simulations .simv2-dist-track,
html[data-theme='dark'] #page-simulations .simv2p-cone-pill,
html[data-theme='dark'] #page-simulations .simv2p-tooltip-inner {
  border-color: #334155;
  background: #111827;
}

html[data-theme='dark'] #page-simulations .simv2p-chart-wrap {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.9));
}

html[data-theme='dark'] #page-simulations .simv2-dist-card,
html[data-theme='dark'] #page-simulations .simv2-situation-card {
  border-color: #334155;
  background: #0f172a;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
}

html[data-theme='dark'] #page-simulations .simv2-dist-card-title,
html[data-theme='dark'] #page-simulations .simv2-situation-card-title {
  color: #94a3b8;
}

html[data-theme='dark'] #page-simulations .simv2-dist-label.bull,
html[data-theme='dark'] #page-simulations .simv2-dist-pct.bull,
html[data-theme='dark'] #page-simulations .simv2-dist-metric-card strong.bull {
  color: #6ee7b7;
}

html[data-theme='dark'] #page-simulations .simv2-dist-label.flat,
html[data-theme='dark'] #page-simulations .simv2-dist-pct.flat,
html[data-theme='dark'] #page-simulations .simv2-dist-metric-card strong.flat {
  color: #fdba74;
}

html[data-theme='dark'] #page-simulations .simv2-dist-label.bear,
html[data-theme='dark'] #page-simulations .simv2-dist-pct.bear,
html[data-theme='dark'] #page-simulations .simv2-dist-metric-card strong.bear {
  color: #fda4af;
}

html[data-theme='dark'] #page-simulations .simv2-dist-track {
  border-color: rgba(51, 65, 85, 0.88);
  background: rgba(17, 24, 39, 0.94);
}

html[data-theme='dark'] #page-simulations .simv2-dist-divider {
  background: linear-gradient(90deg, rgba(51, 65, 85, 0), rgba(71, 85, 105, 0.94), rgba(51, 65, 85, 0));
}

html[data-theme='dark'] #page-simulations .simv2-dist-metric-card {
  border-color: rgba(51, 65, 85, 0.88);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.04);
}

html[data-theme='dark'] #page-simulations .simv2-dist-metric-card span {
  color: #94a3b8;
}

html[data-theme='dark'] #page-simulations .simv2-dist-badge.bull {
  border-color: rgba(16, 185, 129, 0.26);
  background: rgba(6, 78, 59, 0.3);
  color: #d1fae5;
}

html[data-theme='dark'] #page-simulations .simv2-dist-badge.flat {
  border-color: rgba(249, 115, 22, 0.26);
  background: rgba(154, 52, 18, 0.28);
  color: #fed7aa;
}

html[data-theme='dark'] #page-simulations .simv2-dist-badge.bear {
  border-color: rgba(244, 63, 94, 0.24);
  background: rgba(136, 19, 55, 0.28);
  color: #fecdd3;
}

html[data-theme='dark'] #page-simulations .simv2-situation-row {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.72));
  border-color: rgba(51, 65, 85, 0.9);
  box-shadow: none;
}

html[data-theme='dark'] #page-simulations .simv2-situation-row.is-up {
  background: linear-gradient(90deg, rgba(6, 78, 59, 0.3), rgba(15, 23, 42, 0.68));
  border-color: rgba(16, 185, 129, 0.28);
}

html[data-theme='dark'] #page-simulations .simv2-situation-row.is-neutral {
  background: linear-gradient(90deg, rgba(154, 52, 18, 0.22), rgba(15, 23, 42, 0.68));
  border-color: rgba(249, 115, 22, 0.26);
}

html[data-theme='dark'] #page-simulations .simv2-situation-row.is-down {
  background: linear-gradient(90deg, rgba(136, 19, 55, 0.22), rgba(15, 23, 42, 0.68));
  border-color: rgba(244, 63, 94, 0.24);
}

html[data-theme='dark'] #page-simulations .simv2-situation-title.is-up {
  color: #d1fae5;
}

html[data-theme='dark'] #page-simulations .simv2-situation-title.is-neutral {
  color: #fed7aa;
}

html[data-theme='dark'] #page-simulations .simv2-situation-title.is-down {
  color: #fecdd3;
}

html[data-theme='dark'] #page-simulations .simv2-situation-desc {
  color: #cbd5e1;
}

html[data-theme='dark'] #page-simulations .simv2p-active-zone {
  fill: rgba(56, 189, 248, 0.08);
}

html[data-theme='dark'] #page-simulations .simv2p-crosshair line {
  stroke: rgba(148, 163, 184, 0.35);
}

html[data-theme='dark'] #page-simulations .simv2p-y-pill rect,
html[data-theme='dark'] #page-simulations .simv2p-y-pill polygon {
  fill: #0f172a;
}

html[data-theme='dark'] #page-simulations .simv2p-y-pill text {
  fill: #f8fafc;
}

html[data-theme='dark'] .popup-title,
html[data-theme='dark'] #tradeEditorPopupTitle,
html[data-theme='dark'] #tradeCompletePopupTitle,
html[data-theme='dark'] #actionConfirmTitle,
html[data-theme='dark'] .run-ultron-popup .popup-title,
html[data-theme='dark'] .signout-session-popup .popup-title,
html[data-theme='dark'] .updates-popup .popup-title {
  color: #f8fafc !important;
  text-shadow: 0 1px 8px rgba(2, 6, 23, 0.45);
}

html[data-theme='dark'] .run-ultron-popup,
html[data-theme='dark'] .signout-session-popup,
html[data-theme='dark'] #tradeEditorPopup .popup,
html[data-theme='dark'] #tradeCompletePopup .popup,
html[data-theme='dark'] .auth-modal.simple-auth-modal .auth-card-shell {
  border-color: color-mix(in srgb, var(--border-bright) 78%, transparent) !important;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-card) 95%, transparent),
    color-mix(in srgb, var(--bg-hover) 91%, transparent)
  ) !important;
}

html[data-theme='dark'] #tradeEditorPopup .trade-editor-popup-body,
html[data-theme='dark'] #tradeEditorPopup .tracking-form-card,
html[data-theme='dark'] #tradeCompletePopup .trade-complete-detail {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent) !important;
  background: color-mix(in srgb, var(--bg-surface) 93%, transparent) !important;
}

/* ===== DASHBOARD PANEL REACT REFRESH ===== */
#page-dashboard .dashboard-panel-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #ffffff 68%, var(--border) 32%);
  background:
    radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 7%, transparent), transparent 62%),
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--green) 6%, transparent), transparent 66%),
    linear-gradient(165deg, color-mix(in srgb, #ffffff 94%, transparent), color-mix(in srgb, var(--bg-surface) 97%, transparent));
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--bg-deep) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

#page-dashboard .dashboard-panel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, #ffffff 26%, transparent);
  pointer-events: none;
}

#page-dashboard .dashboard-panel-card > .card-title {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  color: color-mix(in srgb, var(--text-primary) 84%, #64748b 16%);
}

#page-dashboard .dashboard-panel-card > .card-title::after {
  width: 40px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cyan) 16%, transparent),
    color-mix(in srgb, var(--cyan) 44%, transparent),
    color-mix(in srgb, var(--green) 20%, transparent)
  );
}

#page-dashboard .dashboard-panel-subtitle {
  position: relative;
  z-index: 1;
  margin-top: 7px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-secondary);
}

#page-dashboard #signalMeterContainer .signal-pill-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

#page-dashboard #signalMeterContainer .signal-no-divider::after {
  display: none;
}

#page-dashboard #signalMeterContainer .signal-pill-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #f1f5f9;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

#page-dashboard #signalMeterContainer .signal-pill-chip.bull {
  background: #ecfdf5;
  color: #059669;
  border-color: rgba(16, 185, 129, 0.22);
}

#page-dashboard #signalMeterContainer .signal-pill-chip.amber {
  background: #fffbeb;
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.22);
}

#page-dashboard #signalMeterContainer .signal-pill-chip.rose {
  background: #fff1f2;
  color: #e11d48;
  border-color: rgba(244, 63, 94, 0.2);
}

#page-dashboard .dashboard-trajectory-card {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-shell,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-shell * {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-shell,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-chart-shell {
  max-width: 100%;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-chart-shell,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-kpi,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-legend-item {
  background: #ffffff !important;
  box-shadow: none !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-svg .trajx-band-outer,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-svg .trajx-band-core,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-svg .trajx-median-shadow,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-svg .trajx-median-flow {
  display: none;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-svg .trajx-actual,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-svg .trajx-median {
  animation: none !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-day-rail {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-day-btn {
  min-width: 108px;
  flex: 0 0 auto;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-headline,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-signal-pill,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-stat,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-card,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-stage,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-legend-item,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-meta,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-card,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-stat,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-chart-wrap,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-chart-chip,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-stage-note-pill,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-metric,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-option-card,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-option-cell,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-card,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-row,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-pill,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajectory-point-detail.trajneo-detail-card {
  background: #ffffff !important;
  box-shadow: none !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-headline::before,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-card::before,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn::before,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn::after {
  display: none !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-stage-aura,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-chart-ambient {
  display: none !important;
}

/* Trajectory Studio flow alignment (match reference layout flow) */
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-kicker {
  display: none;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-headline {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-headline-main {
  margin-bottom: 14px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .dashboard-options-rec-card.options-react-shell .week-ahead-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-primary) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .dashboard-options-rec-card.options-react-shell .week-ahead-subtitle {
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-headline-side {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  background: color-mix(in srgb, #ffffff 94%, var(--bg-hover) 6%);
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-signal-pill,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-stat {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-radius: 16px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-signal-pill.trajneo-priority-stat,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-stat.trajneo-priority-stat {
  border: 1px solid color-mix(in srgb, var(--tone, #b8c5d8) 38%, #c7d2e1 62%) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tone, #93a2b8) 8%, #ffffff 92%),
    color-mix(in srgb, var(--tone, #93a2b8) 4%, #f7f9fc 96%)
  ) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-priority-label {
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.045em !important;
  color: #000 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-priority-value {
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: var(--tone, #000) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajectory-point-detail.trajneo-detail-card {
  background: #ffffff !important;
  border-color: #d5deea !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-shell,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-shell * {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-main,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-main * {
  text-align: center !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-grid {
  align-items: stretch !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-main {
  display: grid !important;
  height: 100% !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(18px, 2vw, 24px) !important;
  padding: clamp(18px, 2.4vw, 30px) clamp(14px, 2.2vw, 30px) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-metrics {
  width: min(100%, 980px) !important;
  margin-inline: auto !important;
  gap: clamp(12px, 1.2vw, 24px) !important;
  justify-items: center !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-metric {
  width: 100% !important;
  max-width: 210px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-prob {
  width: min(100%, 980px) !important;
  margin-inline: auto !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-prob-track {
  width: 100% !important;
  margin-inline: auto !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-prob-meta {
  justify-content: center !important;
  gap: 18px !important;
  width: 100% !important;
  margin-inline: auto !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focusday-option {
  background: #edf2f8 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-strip {
  gap: 12px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn {
  --trajneo-day-tone: var(--gold) !important;
  border-radius: 28px !important;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent) !important;
  background:
    radial-gradient(120% 110% at 10% 0%, color-mix(in srgb, var(--trajneo-day-tone) 10%, transparent), transparent 64%) !important,
    linear-gradient(165deg, color-mix(in srgb, #ffffff 96%, transparent), color-mix(in srgb, var(--bg-surface) 98%, transparent)) !important;
  min-height: 220px !important;
  padding: 16px 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transform: scale(0.96) !important;
  opacity: 0.86 !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent) !important,
    inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent) !important;
  transition: transform 260ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn.neutral { --trajneo-day-tone: var(--gold) !important; }
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn.bear { --trajneo-day-tone: var(--red) !important; }
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn.bull { --trajneo-day-tone: var(--green) !important; }

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn.is-active {
  transform: scale(1) !important;
  opacity: 1 !important;
  border-color: color-mix(in srgb, var(--trajneo-day-tone) 56%, var(--border-bright) 44%) !important;
  box-shadow:
    0 16px 28px color-mix(in srgb, var(--trajneo-day-tone) 14%, transparent) !important,
    inset 0 1px 0 color-mix(in srgb, #ffffff 74%, transparent) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-label {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
  color: var(--text-muted) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-date {
  margin-top: 3px !important;
  margin-bottom: 12px !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 1px solid color-mix(in srgb, var(--trajneo-day-tone) 30%, var(--border-bright) 70%) !important;
  background: color-mix(in srgb, var(--trajneo-day-tone) 10%, var(--bg-surface) 90%) !important;
  color: color-mix(in srgb, var(--trajneo-day-tone) 90%, var(--text-secondary) 10%) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-price {
  margin-top: 10px !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-price.neutral,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-move.neutral {
  color: var(--gold) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-price.bear,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-move.bear {
  color: var(--red) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-price.bull,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-move.bull {
  color: var(--green) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-move {
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-conf-track {
  width: 100% !important;
  margin-top: 10px !important;
  height: 6px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-conf-fill {
  height: 100% !important;
  border-radius: inherit !important;
  transition: width 520ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-conf-fill.neutral {
  background-color: var(--gold) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-conf-fill.bear {
  background-color: var(--red) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-conf-fill.bull {
  background-color: var(--green) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-conf {
  margin-top: 7px !important;
  margin-bottom: 11px !important;
  font-size: 9px !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-rec {
  margin-top: auto !important;
  min-height: 22px !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent) !important;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent) !important;
  color: var(--text-secondary) !important;
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
  display: inline-flex !important;
  align-items: center !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-selected-ring {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 28px !important;
  border: 2px solid color-mix(in srgb, var(--trajneo-day-tone) 28%, transparent) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn.is-active .trajneo-day-selected-ring {
  opacity: 1 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-grid {
  border-top: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  padding-top: 16px;
  margin-top: 2px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-label {
  font-size: 9px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-value {
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-sub {
  font-size: 10px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* Trajectory Studio full text scale */
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-label,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-stat span,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-label,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-stat span,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-stage-note,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-stage-note-pill,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-id,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-name,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-detail-kicker,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-metric .label,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-prob-head,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-prob-labels,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-option-head,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-option-cell .label,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-title,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-pill,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-date,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-day,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-dir,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-metric-head,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-chart-chip,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-chart-toolbar-label,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-axis-text {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-title,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-title,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-detail-direction,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-option-value,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-stat strong,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-stat strong,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-right,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-option-cell .value,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-metric .value,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-price,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-move,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-direction-pill,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-sub,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-sub,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-legend-item,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-meta {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-value,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-price {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-price {
  font-size: 34px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-card {
  background: #ffffff !important;
  border: 1px solid #d5deea !important;
  border-radius: 24px !important;
  padding: 18px 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-head {
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #d3ddec !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #5f718d !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-legend {
  gap: 22px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-legend-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #5f718d !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-legend-item i {
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-row {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr) minmax(122px, auto) !important;
  gap: 18px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-row:last-child {
  margin-bottom: 0 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-date {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: #243149 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-day {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  color: #7c8ea8 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-dir {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-meters {
  gap: 12px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-metric {
  display: grid !important;
  grid-template-columns: minmax(148px, 176px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-metric-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #8899b1 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-metric-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-track,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-risk-track {
  height: 12px !important;
  background: #d7deea !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-fill,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-risk-fill {
  box-shadow: none !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-metric-value {
  font-size: 12px !important;
  font-weight: 800 !important;
  min-width: 52px !important;
  text-align: right !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-right {
  display: grid !important;
  gap: 4px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: right !important;
  color: #5f718d !important;
}

@media (max-width: 1080px) {
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-strip {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 6px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn {
    flex: 0 0 168px !important;
    min-height: 220px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-flow-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-flow-right {
    text-align: left;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-metric {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-right {
    display: inline-flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    text-align: left !important;
  }
}

/* Week Ahead Forecast Summary */
#page-dashboard .dashboard-week-summary-card #dashForecastGrid {
  position: relative;
  z-index: 1;
  gap: 10px;
  background: color-mix(in srgb, #ffffff 95%, var(--bg-surface) 5%);
  border: 1px solid color-mix(in srgb, #ffffff 70%, var(--border) 30%);
  border-radius: 18px;
  padding: 10px;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card {
  --dash-week-card-hover-accent: var(--cyan);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #ffffff 72%, var(--border) 28%);
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 5%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, #ffffff 95%, transparent), color-mix(in srgb, var(--bg-surface) 97%, transparent));
  box-shadow:
    0 10px 18px color-mix(in srgb, var(--bg-deep) 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
  border-top-width: 2px;
  padding: 13px 11px;
  min-height: 184px;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card.bullish { --dash-week-card-hover-accent: var(--green); }
#page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card.bearish { --dash-week-card-hover-accent: var(--red); }
#page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card.neutral { --dash-week-card-hover-accent: var(--gold); }

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--dash-week-card-hover-accent) 58%, var(--border-bright) 42%);
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--dash-week-card-hover-accent) 10%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, #ffffff 95%, transparent), color-mix(in srgb, var(--bg-surface) 97%, transparent));
  box-shadow: 0 14px 22px color-mix(in srgb, var(--dash-week-card-hover-accent) 14%, transparent);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card.selected {
  border-color: color-mix(in srgb, var(--dash-week-card-hover-accent) 60%, var(--border) 40%);
  background:
    radial-gradient(130% 120% at 15% 0%, color-mix(in srgb, var(--dash-week-card-hover-accent) 12%, transparent), transparent 62%),
    linear-gradient(
      175deg,
      color-mix(in srgb, var(--dash-week-card-hover-accent) 8%, var(--bg-surface) 92%),
      color-mix(in srgb, var(--bg-surface) 98%, transparent)
    );
  box-shadow:
    0 16px 26px color-mix(in srgb, var(--dash-week-card-hover-accent) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card.hintable::after {
  bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, var(--border-bright) 78%);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  border-radius: 999px;
  padding: 3px 8px;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card.hintable {
  padding-bottom: 42px;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-detail {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-surface) 97%, transparent), color-mix(in srgb, var(--bg-hover) 93%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent),
    0 12px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent);
  padding: 14px;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-title {
  color: var(--cyan);
  font-size: 9px;
  letter-spacing: 0.18em;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-sub {
  margin-top: 4px;
  line-height: 1.35;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-subchips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  white-space: nowrap;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-chip.info {
  border-color: color-mix(in srgb, var(--cyan) 24%, var(--border-bright) 76%);
  background: color-mix(in srgb, var(--cyan) 6%, var(--bg-surface) 94%);
  color: color-mix(in srgb, var(--cyan) 68%, var(--text-secondary) 32%);
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-chip.bull {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--green) 7%, var(--bg-surface) 93%);
  color: color-mix(in srgb, var(--green) 76%, var(--text-secondary) 24%);
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-chip.bear {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--red) 7%, var(--bg-surface) 93%);
  color: color-mix(in srgb, var(--red) 78%, var(--text-secondary) 22%);
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-chip.neutral {
  border-color: color-mix(in srgb, var(--gold) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--gold) 7%, var(--bg-surface) 93%);
  color: color-mix(in srgb, var(--gold) 82%, var(--text-secondary) 18%);
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-open-btn {
  font-size: 8px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap;
}

#page-dashboard .dashboard-week-summary-card .dash-detail-grid {
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
}

#page-dashboard .dashboard-week-summary-card .dash-kpi {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  font-size: 14px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 36%, transparent);
}

#page-dashboard .dashboard-week-summary-card .dash-kpi-label {
  width: 16px;
  height: 16px;
}

#page-dashboard .dashboard-week-summary-card .dash-kpi-val {
  font-size: 14px;
}

#page-dashboard .dashboard-week-summary-card .dash-prob-label-row {
  display: flex;
  justify-content: space-between;
    min-height: 40px;
    padding: 0 16px;
    font-size: 12px;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  border-color: color-mix(in srgb, var(--green) 24%, var(--border-bright) 76%);
  background: color-mix(in srgb, var(--green) 6%, var(--bg-surface) 94%);
  color: color-mix(in srgb, var(--green) 80%, var(--text-secondary) 20%);
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-glow {
  display: none;
}
}

  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);

#page-dashboard .dashboard-week-summary-card .dash-prob-label-row > span.bear {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border-bright) 76%);
  background: color-mix(in srgb, var(--red) 6%, var(--bg-surface) 94%);
  color: color-mix(in srgb, var(--red) 78%, var(--text-secondary) 22%);
}

  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  height: 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent);
}
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
#page-dashboard .dashboard-week-summary-card .prob-seg-neutral {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, transparent), var(--gold));
}

#page-dashboard .dashboard-week-summary-card .prob-seg-bear {
  background: linear-gradient(90deg, color-mix(in srgb, var(--red) 70%, transparent), var(--red));
}

#page-dashboard .dashboard-week-summary-card .dash-range-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.35;
  color: var(--text-secondary);
}

#page-dashboard .dashboard-week-summary-card .dash-range-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
}

#page-dashboard .dashboard-week-summary-card .dash-range-pill strong {
  color: var(--text-primary);
  font-weight: 700;
}

#page-dashboard .dashboard-week-summary-card .dash-range-pill .risk-badge {
  margin-left: 2px;
}

#page-dashboard .dashboard-week-summary-card .dash-reason-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border-bright) 58%, transparent);
  gap: 10px;
}

#page-dashboard .dashboard-week-summary-card .dash-reason {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), color-mix(in srgb, var(--bg-hover) 92%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
  font-size: 10px;
  line-height: 1.35;
  padding: 8px 9px;
}

#page-dashboard .dashboard-week-summary-card .hide-scrollbar::-webkit-scrollbar {
  display: none;
}

#page-dashboard .dashboard-week-summary-card .hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid {
  display: flex;
  align-items: stretch;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  margin-top: 14px;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget {
  --dash-card-tone: var(--red);
  flex: 0 0 168px;
  min-height: 238px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background:
    radial-gradient(120% 110% at 10% 0%, color-mix(in srgb, var(--dash-card-tone) 10%, transparent), transparent 64%),
    linear-gradient(165deg, color-mix(in srgb, #ffffff 96%, transparent), color-mix(in srgb, var(--bg-surface) 98%, transparent));
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--bg-deep) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  padding: 16px 14px 18px;
  cursor: pointer;
  transform: scale(0.96);
  opacity: 0.86;
  transition: transform 260ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget.neutral { --dash-card-tone: var(--gold); }
#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget.bear { --dash-card-tone: var(--red); }
#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget.bull { --dash-card-tone: var(--green); }

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget:hover {
  opacity: 1;
  transform: translateY(-1px) scale(0.985);
  border-color: color-mix(in srgb, var(--dash-card-tone) 44%, var(--border-bright) 56%);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget.selected {
  transform: scale(1);
  opacity: 1;
  border-color: color-mix(in srgb, var(--dash-card-tone) 56%, var(--border-bright) 44%);
  box-shadow:
    0 16px 28px color-mix(in srgb, var(--dash-card-tone) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 74%, transparent);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-date {
  margin-top: 3px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-secondary);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--dash-card-tone) 30%, var(--border-bright) 70%);
  background: color-mix(in srgb, var(--dash-card-tone) 10%, var(--bg-surface) 90%);
  color: color-mix(in srgb, var(--dash-card-tone) 90%, var(--text-secondary) 10%);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-icon span {
  line-height: 1;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-price {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-move {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-price.bull,
#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-move.bull {
  color: var(--green);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-price.bear,
#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-move.bear {
  color: var(--red);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-price.neutral,
#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-move.neutral {
  color: var(--gold);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-prob-mini {
  width: 100%;
  margin: 10px 0 11px;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-prob-mini-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-prob-mini-seg {
  height: 100%;
  transition: width 520ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-prob-mini-seg.bull {
  background: var(--green);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-prob-mini-seg.neutral {
  background: #f59e0b;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-prob-mini-seg.bear {
  background: var(--red);
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-rec {
  margin-top: auto;
  min-height: 22px;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-selected-ring {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 2px solid color-mix(in srgb, var(--dash-card-tone) 28%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget.selected .dash-day-selected-ring {
  opacity: 1;
}

#page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget.hintable::after {
  content: '';
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-detail {
  margin-top: 16px;
  border-radius: 32px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  padding: 22px;
}

#page-dashboard .dashboard-week-summary-card .dash-week-detail-shell {
  position: relative;
}

#page-dashboard .dashboard-week-summary-card .dash-week-detail-glow {
  display: none;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-head {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  align-items: flex-start;
}

#page-dashboard .dashboard-week-summary-card .dash-week-detail-title-wrap {
  min-width: 0;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-title {
  font-size: 11px;
  letter-spacing: 0.15em;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-subchips {
  margin-top: 8px;
  gap: 8px;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-open-btn {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #0f172a;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.24);
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms ease, box-shadow 180ms ease;
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-open-btn:hover {
  background: #1e293b;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.28);
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-open-btn:active {
  transform: scale(0.95);
}

#page-dashboard .dashboard-week-summary-card .dash-forecast-open-btn .dash-open-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 760px) {
  #page-dashboard .dashboard-week-summary-card .dash-forecast-open-btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: 11px;
  }
}

#page-dashboard .dashboard-week-summary-card .dash-week-detail-grid {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
}

#page-dashboard .dashboard-week-summary-card .dash-week-kpi {
  border-radius: 14px;
  padding: 10px;
}

#page-dashboard .dashboard-week-summary-card .dash-week-prob-label-row,
#page-dashboard .dashboard-week-summary-card .dash-week-prob-split,
#page-dashboard .dashboard-week-summary-card .dash-week-range-row,
#page-dashboard .dashboard-week-summary-card .dash-week-reason-list {
  position: relative;
  z-index: 1;
}

#page-dashboard .dashboard-week-summary-card .dash-week-range-row .dash-range-pill.risk-low {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--green) 8%, var(--bg-surface) 92%);
  color: color-mix(in srgb, var(--green) 84%, var(--text-secondary) 16%);
}

#page-dashboard .dashboard-week-summary-card .dash-week-range-row .dash-risk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  line-height: 1;
  margin-right: 1px;
}

#page-dashboard .dashboard-week-summary-card .dash-week-reason-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  #page-dashboard .dashboard-week-summary-card .dash-week-reason-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  #page-dashboard .dashboard-week-summary-card .dash-forecast-detail {
    border-radius: 24px;
    padding: 16px;
  }

  #page-dashboard .dashboard-week-summary-card #dashForecastGrid .dash-day-widget {
    flex-basis: 154px;
    min-height: 224px;
    border-radius: 22px;
  }
}

/* Primary Options Recommendation */
#page-dashboard .dashboard-options-rec-card #dashOptionsRec {
  position: relative;
  z-index: 1;
}

#page-dashboard .dashboard-options-rec-card .options-advice {
  --options-advice-tone: var(--cyan);
  margin-top: 0;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--options-advice-tone) 18%, var(--border-bright) 82%);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--options-advice-tone) 8%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, #ffffff 95%, transparent), color-mix(in srgb, var(--bg-surface) 97%, transparent));
  padding: 16px;
  box-shadow:
    0 12px 24px color-mix(in srgb, var(--options-advice-tone) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 64%, transparent);
}

#page-dashboard .dashboard-options-rec-card .options-advice.options-advice-call {
  --options-advice-tone: var(--green);
}

#page-dashboard .dashboard-options-rec-card .options-advice.options-advice-put {
  --options-advice-tone: var(--red);
}

#page-dashboard .dashboard-options-rec-card .advice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#page-dashboard .dashboard-options-rec-card .advice-type {
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 9px;
  letter-spacing: 0.14em;
}

#page-dashboard .dashboard-options-rec-card .advice-meta {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-secondary);
}

#page-dashboard .dashboard-options-rec-card .advice-grid {
  gap: 8px;
}

#page-dashboard .dashboard-options-rec-card .advice-grid.advice-grid-primary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#page-dashboard .dashboard-options-rec-card .advice-grid.advice-grid-secondary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#page-dashboard .dashboard-options-rec-card .advice-grid .report-section {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, #ffffff 84%, transparent), color-mix(in srgb, var(--bg-surface) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 8px 16px color-mix(in srgb, var(--bg-deep) 8%, transparent);
  padding: 10px 9px !important;
}

#page-dashboard .dashboard-options-rec-card .advice-grid .report-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--options-advice-tone) 18%, transparent), color-mix(in srgb, var(--options-advice-tone) 54%, transparent), color-mix(in srgb, var(--cyan) 20%, transparent));
  opacity: 0.85;
}

#page-dashboard .dashboard-options-rec-card .advice-grid .report-section .stat-label {
  font-size: 8px;
  letter-spacing: 0.11em;
}

#page-dashboard .dashboard-options-rec-card .ai-commentary-block {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--options-advice-tone) 6%, var(--bg-surface) 94%), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  padding: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
}

#page-dashboard .dashboard-options-rec-card .ai-commentary-block.call {
  border-color: color-mix(in srgb, var(--green) 30%, var(--border-bright) 70%);
}

#page-dashboard .dashboard-options-rec-card .ai-commentary-block.put {
  border-color: color-mix(in srgb, var(--red) 30%, var(--border-bright) 70%);
}

#page-dashboard .dashboard-options-rec-card .advice-table-wrap {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  padding: 8px;
  overflow: auto;
}

#page-dashboard .dashboard-options-rec-card .advice-history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10px !important;
}

#page-dashboard .dashboard-options-rec-card .advice-history-table th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#page-dashboard .dashboard-options-rec-card .advice-history-table th,
#page-dashboard .dashboard-options-rec-card .advice-history-table td {
  padding: 7px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

#page-dashboard .dashboard-options-rec-card .advice-history-table tr:last-child td {
  border-bottom: none;
}

/* Composite Signal Meter (rest of box refresh) */
#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell {
  position: relative;
  z-index: 1;
  gap: 10px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-insight-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-grid {
  gap: 8px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 9px;
  right: 9px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal-tone) 12%, transparent), color-mix(in srgb, var(--signal-tone) 52%, transparent), color-mix(in srgb, var(--cyan) 14%, transparent));
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-label {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-value {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.28;
  color: var(--text-primary);
  font-weight: 700;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-sub {
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.35;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-prob-panel {
  border-radius: 14px;
  padding: 11px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-prob-head {
  margin-bottom: 10px;
  font-size: 8px;
  letter-spacing: 0.1em;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-prob-row {
  margin-bottom: 7px;
  padding: 3px 0;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-prob-track {
  height: 9px;
  border-radius: 999px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-prob-foot {
  margin-top: 10px;
  padding-top: 9px;
  font-size: 8px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-mode-grid {
  gap: 8px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-mode-card {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  padding: 9px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-mode-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal-tone) 12%, transparent), color-mix(in srgb, var(--signal-tone) 38%, transparent), transparent);
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-mode-label {
  font-size: 7px;
  letter-spacing: 0.12em;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-mode-value {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.3;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-grid {
  gap: 8px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 10px;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 9px;
  right: 9px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal-tone) 12%, transparent), color-mix(in srgb, var(--signal-tone) 32%, transparent), transparent);
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-title {
  font-size: 8px;
  letter-spacing: 0.1em;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-row {
  font-size: 9px;
  padding: 6px 0;
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-row strong {
  color: var(--text-primary);
}

#page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell #signalInsightPanel .loading-state {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--insight-border) 84%, transparent);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--insight-bg) 98%, transparent), color-mix(in srgb, var(--bg-surface) 95%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
    0 8px 16px color-mix(in srgb, var(--bg-deep) 8%, transparent);
}

/* Dashboard refresh dark-mode tuning */
html[data-theme='dark'] #page-dashboard .dashboard-panel-card {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background:
    radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 62%),
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--green) 9%, transparent), transparent 66%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--bg-surface) 92%, transparent)
    );
  box-shadow:
    0 18px 34px color-mix(in srgb, #000000 36%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-panel-card::before {
  border-color: color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-panel-card > .card-title {
  color: color-mix(in srgb, var(--text-primary) 94%, #cbd5e1 6%);
}

html[data-theme='dark'] #page-dashboard .dashboard-panel-subtitle {
  color: color-mix(in srgb, var(--text-secondary) 92%, #cbd5e1 8%);
}


html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 60%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--bg-surface) 92%, transparent)
    );
  box-shadow:
    0 12px 22px color-mix(in srgb, #000000 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card #dashForecastGrid .day-card.selected {
  border-color: color-mix(in srgb, var(--dash-week-card-hover-accent) 56%, var(--border-bright) 44%);
  background:
    radial-gradient(130% 120% at 15% 0%, color-mix(in srgb, var(--dash-week-card-hover-accent) 16%, transparent), transparent 62%),
    linear-gradient(
      175deg,
      color-mix(in srgb, var(--dash-week-card-hover-accent) 10%, var(--bg-card) 90%),
      color-mix(in srgb, var(--bg-surface) 92%, transparent)
    );
  box-shadow:
    0 16px 28px color-mix(in srgb, var(--dash-week-card-hover-accent) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card .dash-forecast-detail {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 62%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--bg-hover) 90%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 12px 24px color-mix(in srgb, #000000 28%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card .dash-kpi,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card .dash-reason,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card .dash-range-pill,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card .dash-prob-label-row > span {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--bg-surface) 92%, transparent),
      color-mix(in srgb, var(--bg-hover) 88%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card .dash-forecast-chip {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card .dash-range-row {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card .options-advice,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card .advice-grid .report-section,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card .ai-commentary-block,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card .advice-table-wrap {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  box-shadow:
    0 12px 24px color-mix(in srgb, #000000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card .options-advice {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--options-advice-tone) 12%, transparent), transparent 60%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--bg-surface) 92%, transparent)
    );
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card .advice-grid .report-section {
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--bg-surface) 92%, transparent),
      color-mix(in srgb, var(--bg-hover) 88%, transparent)
    );
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card .advice-meta {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card .advice-history-table th {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
  color: color-mix(in srgb, var(--text-muted) 80%, #cbd5e1 20%);
}

html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-card,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-mode-card,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-card,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-prob-panel,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell #signalInsightPanel .loading-state {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--bg-surface) 92%, transparent),
      color-mix(in srgb, var(--bg-hover) 88%, transparent)
    );
  box-shadow:
    0 10px 20px color-mix(in srgb, #000000 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-label,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-mode-label,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-title,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-prob-head,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-prob-foot {
  color: color-mix(in srgb, var(--text-muted) 74%, #cbd5e1 26%);
}

html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-extra-sub,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-mode-value,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-bottom-row {
  color: var(--text-secondary);
}

/* Dashboard responsive refinements */
@media (max-width: 1280px) {
  #page-dashboard .dashboard-options-rec-card .advice-grid.advice-grid-primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #page-dashboard .dashboard-options-rec-card .advice-grid.advice-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #page-dashboard .dashboard-week-summary-card .dash-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-dashboard .dashboard-week-summary-card .dash-reason-list {
    grid-template-columns: 1fr;
  }

  #page-dashboard .dashboard-week-summary-card .dash-forecast-head {
    flex-direction: column;
    align-items: flex-start;
  }

  #page-dashboard .dashboard-week-summary-card .dash-forecast-subchips {
    gap: 5px;
  }

  #page-dashboard .dashboard-week-summary-card .dash-range-row {
    padding: 8px;
  }

  #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #page-dashboard .dashboard-week-summary-card .dash-prob-label-row {
    gap: 6px;
  }

  #page-dashboard .dashboard-week-summary-card .dash-range-pill {
    width: 100%;
    justify-content: space-between;
  }

  #page-dashboard .dashboard-options-rec-card .advice-grid.advice-grid-primary,
  #page-dashboard .dashboard-options-rec-card .advice-grid.advice-grid-secondary {
    grid-template-columns: 1fr;
  }

  #page-dashboard .dashboard-composite-card #signalMeterContainer.signal-meter-shell .signal-insight-grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar user class badge (Admin / Plus / Standard) */
.sidebar-auth-user-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-auth-user-name-row .sidebar-auth-user-name {
  min-width: 0;
  flex: 1 1 auto;
}

.sidebar-user-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  padding: 2px 7px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.sidebar-user-rank-badge.is-admin {
  color: #fecaca;
  background: color-mix(in srgb, #ef4444 18%, transparent);
  border-color: color-mix(in srgb, #ef4444 42%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 10%, transparent) inset;
}

.sidebar-user-rank-badge.is-plus {
  color: #fde68a;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  border-color: color-mix(in srgb, #f59e0b 46%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 10%, transparent) inset;
}

.sidebar-user-rank-badge.is-pro {
  color: #ddd6fe;
  background: color-mix(in srgb, #7c3aed 20%, transparent);
  border-color: color-mix(in srgb, #7c3aed 48%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #7c3aed 12%, transparent) inset;
}

.sidebar-user-rank-badge.is-standard {
  color: #bfdbfe;
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  border-color: color-mix(in srgb, #3b82f6 44%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #3b82f6 10%, transparent) inset;
}

html[data-theme='light'] .sidebar-user-rank-badge.is-admin {
  color: #991b1b;
  background: color-mix(in srgb, #ef4444 10%, white 90%);
  border-color: color-mix(in srgb, #ef4444 38%, white 62%);
}

html[data-theme='light'] .sidebar-user-rank-badge.is-plus {
  color: #92400e;
  background: color-mix(in srgb, #f59e0b 12%, white 88%);
  border-color: color-mix(in srgb, #f59e0b 42%, white 58%);
}

html[data-theme='light'] .sidebar-user-rank-badge.is-pro {
  color: #5b21b6;
  background: color-mix(in srgb, #7c3aed 10%, white 90%);
  border-color: color-mix(in srgb, #7c3aed 40%, white 60%);
}

html[data-theme='light'] .sidebar-user-rank-badge.is-standard {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

/* Standard users: limited shell with Trade Calendar + Price History */
body.role-standard-tracking-only .top-bar.top-bar-redesign {
  display: none !important;
}

body.role-standard-tracking-only .sidebar .nav-item[data-page]:not([data-page='tracking']):not([data-page='price-history']) {
  display: none !important;
}

body.role-standard-tracking-only .sidebar .sidebar-divider {
  display: none;
}

/* Trade Calendar UI refresh (keeps existing data/state wiring) */
#page-tracking .trade-cal-shell {
  border: 1px solid color-mix(in srgb, var(--border-bright) 68%, transparent);
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--cyan) 10%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 96%, transparent), color-mix(in srgb, var(--bg-hover) 90%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
    0 10px 22px color-mix(in srgb, var(--bg-deep) 16%, transparent);
}

#page-tracking .trade-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

#page-tracking .trade-cal-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

#page-tracking .trade-cal-header-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

#page-tracking .trade-cal-title-icon {
  font-size: 13px;
  color: color-mix(in srgb, var(--cyan) 78%, var(--text-primary) 22%);
  line-height: 1;
}

#page-tracking .trade-cal-btn,
#page-tracking .trade-cal-month-btn {
  min-height: 30px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  transition: all 0.18s ease;
}

#page-tracking .trade-cal-btn {
  min-width: 30px;
  padding: 0 9px;
}

#page-tracking .trade-cal-month-btn {
  padding: 0 12px;
}

#page-tracking .trade-cal-btn:hover,
#page-tracking .trade-cal-month-btn:hover {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-bright) 52%);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%);
}

#page-tracking .trade-cal-month-btn::after {
  opacity: 0.65;
}

#page-tracking .trade-cal-btn-today {
  padding: 0 12px;
}

#page-tracking .trade-cal-meta-rich {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

#page-tracking .trade-cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 95%, transparent);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

#page-tracking .trade-cal-chip strong {
  color: var(--text-primary);
  font-size: 10px;
}

#page-tracking .trade-cal-chip-positive {
  border-color: color-mix(in srgb, var(--green) 36%, var(--border-bright) 64%);
  background: color-mix(in srgb, var(--green) 10%, var(--bg-surface) 90%);
}

#page-tracking .trade-cal-chip-negative {
  border-color: color-mix(in srgb, var(--red) 36%, var(--border-bright) 64%);
  background: color-mix(in srgb, var(--red) 9%, var(--bg-surface) 91%);
}

#page-tracking .trade-cal-chip-net {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%);
}

#page-tracking .trade-cal-weekdays {
  margin-bottom: 8px;
  gap: 7px;
}

#page-tracking .trade-cal-weekday {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.11em;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

#page-tracking .trade-cal-grid {
  gap: 8px;
}

#page-tracking .trade-cal-day {
  min-height: 108px;
  padding: 10px 10px 28px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 98%, transparent);
  text-align: left;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  cursor: pointer;
}

#page-tracking .trade-cal-day .day-num {
  position: static;
  display: inline-flex;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

#page-tracking .trade-cal-day-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
}

#page-tracking .trade-cal-day-data {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#page-tracking .trade-cal-day-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-surface) 88%);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

#page-tracking .trade-cal-day-tickers {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.07em;
}

#page-tracking .trade-cal-day-net {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

#page-tracking .trade-cal-day-data.profit .trade-cal-day-net {
  color: var(--green);
}

#page-tracking .trade-cal-day-data.loss .trade-cal-day-net,
#page-tracking .trade-cal-day-data.major-loss .trade-cal-day-net {
  color: var(--red);
}

#page-tracking .trade-cal-day-data.flat .trade-cal-day-net {
  color: var(--text-secondary);
}

#page-tracking .trade-cal-day-empty {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-muted) 72%, transparent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

#page-tracking .trade-cal-day.in-month:hover .trade-cal-day-empty {
  opacity: 0.9;
}

#page-tracking .trade-cal-day .day-add-mini {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 74%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition: all 0.18s ease;
}

#page-tracking .trade-cal-day .day-add-mini::before,
#page-tracking .trade-cal-day .day-add-mini::after {
  display: none;
}

#page-tracking .trade-cal-day.in-month:hover .day-add-mini {
  opacity: 1;
}

#page-tracking .trade-cal-day .day-add-mini:hover {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-bright) 52%);
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%);
}

#page-tracking .trade-cal-day .day-dot,
#page-tracking .trade-cal-day .day-meta {
  display: none;
}

#page-tracking .trade-cal-day.in-month:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cyan) 32%, var(--border-bright) 68%);
}

#page-tracking .trade-cal-day.today {
  border-color: color-mix(in srgb, var(--cyan) 52%, var(--border-bright) 48%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 18%, transparent);
}

#page-tracking .trade-cal-day.selected {
  border-color: color-mix(in srgb, var(--cyan) 64%, var(--border-bright) 36%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 14%, transparent);
}

#page-tracking .trade-cal-day.outside-month {
  opacity: 0.42;
  border-color: transparent;
  background: transparent;
  cursor: default;
}

#page-tracking .trade-cal-day.has-trade {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--border-bright) 66%);
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--cyan) 14%, transparent) 0%, transparent 45%),
    color-mix(in srgb, var(--bg-surface) 98%, transparent);
}

@media (max-width: 980px) {
  #page-tracking .trade-cal-head {
    align-items: flex-start;
  }

  #page-tracking .trade-cal-controls,
  #page-tracking .trade-cal-meta-rich {
    width: 100%;
  }

  #page-tracking .trade-cal-day {
    min-height: 94px;
    padding: 8px 8px 25px;
  }

  #page-tracking .trade-cal-day-content {
    min-height: 48px;
  }
}

/* Trade Log UI refresh */
#page-tracking .tracking-log-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#page-tracking .tracking-log-card > .card-title {
  display: none !important;
}

#page-tracking #tradeLogArea {
  min-width: 0;
}

#page-tracking .tracking-log-v3-module {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fade-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#page-tracking .tracking-log-v3-section-label {
  margin-left: 2px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#page-tracking .tracking-log-v3-card {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

#page-tracking .tracking-log-v3-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 24px 26px;
  border-bottom: 1px solid #f1f5f9;
  background: rgba(248, 250, 252, 0.68);
}

#page-tracking .tracking-log-v3-export {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #38bdf8;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#page-tracking .tracking-log-v3-export i {
  font-size: 16px;
}

#page-tracking .tracking-log-v3-export:hover {
  background: #0ea5e9;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(14, 165, 233, 0.28);
}

#page-tracking .tracking-log-v3-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

#page-tracking .tracking-log-v3-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.18s ease;
}

#page-tracking .tracking-log-v3-row:last-child {
  border-bottom: 0;
}

#page-tracking .tracking-log-v3-row:hover {
  background: rgba(248, 250, 252, 0.7);
}

#page-tracking .tracking-log-v3-left {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

#page-tracking .tracking-log-v3-date-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 104px;
}

#page-tracking .tracking-log-v3-date {
  color: #1e293b;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  transition: color 0.18s ease;
}

#page-tracking .tracking-log-v3-row:hover .tracking-log-v3-date {
  color: #0ea5e9;
}

#page-tracking .tracking-log-v3-trades {
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
}

#page-tracking .tracking-log-v3-tickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#page-tracking .tracking-log-v3-ticker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

#page-tracking .tracking-log-v3-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}

#page-tracking .tracking-log-v3-pnl {
  min-width: 124px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

#page-tracking .tracking-log-v3-pnl i {
  font-size: 16px;
}

#page-tracking .tracking-log-v3-pnl.profit {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #059669;
}

#page-tracking .tracking-log-v3-pnl.loss {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #e11d48;
}

#page-tracking .tracking-log-v3-pnl.flat {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

#page-tracking .tracking-log-v3-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#page-tracking .tracking-log-v3-action {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #94a3b8;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#page-tracking .tracking-log-v3-action i {
  font-size: 16px;
}

#page-tracking .tracking-log-v3-action:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  #page-tracking .tracking-log-v3-topbar {
    padding: 20px;
  }

  #page-tracking .tracking-log-v3-export {
    width: 100%;
    justify-content: center;
  }

  #page-tracking .tracking-log-v3-row {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
  }

  #page-tracking .tracking-log-v3-left {
    justify-content: space-between;
    gap: 16px;
  }

  #page-tracking .tracking-log-v3-right {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  #page-tracking .tracking-log-v3-left {
    flex-direction: column;
    align-items: flex-start;
  }

  #page-tracking .tracking-log-v3-right {
    flex-direction: column;
    align-items: stretch;
  }

  #page-tracking .tracking-log-v3-pnl {
    width: 100%;
  }

  #page-tracking .tracking-log-v3-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ===== GLOBAL BUTTON REFRESH ===== */
.btn,
.trade-action-btn,
.feedback-choice-btn,
.history-view-btn,
.pred-layout-view-btn,
.tracking-log-modern-export,
.trade-cal-btn,
.trade-cal-month-btn,
.pred-layout-edit-btn {
  border-radius: 12px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}

.btn:hover,
.trade-action-btn:hover,
.feedback-choice-btn:hover,
.history-view-btn:hover,
.pred-layout-view-btn:hover,
.tracking-log-modern-export:hover,
.trade-cal-btn:hover,
.trade-cal-month-btn:hover,
.pred-layout-edit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--bg-deep) 14%, transparent) !important;
}

.btn:active,
.trade-action-btn:active,
.feedback-choice-btn:active,
.history-view-btn:active,
.pred-layout-view-btn:active,
.tracking-log-modern-export:active,
.trade-cal-btn:active,
.trade-cal-month-btn:active,
.pred-layout-edit-btn:active {
  transform: translateY(0);
}

.btn-danger::before,
.trade-action-btn.danger::before {
  content: none !important;
  display: none !important;
}

.history-delete-btn,
.pred-layout-trash,
.all-forecast-trash-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}

.history-delete-btn span {
  display: none !important;
}

.history-delete-btn:not(.all-forecast-trash-btn)::before {
  content: none !important;
}

#page-history #predictionsTableWrap .history-delete-btn::before,
#page-history #predictionsTableWrap .history-delete-btn::after {
  content: none !important;
}

/* ===== BESPOKE BUTTON COLOR PALETTE ===== */
.btn,
.trade-action-btn,
.feedback-choice-btn,
.history-view-btn,
.pred-layout-view-btn,
.trade-cal-btn,
.trade-cal-month-btn,
.pred-layout-edit-btn {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--bg-surface) 96%, transparent),
    color-mix(in srgb, var(--bg-hover) 88%, transparent)
  ) !important;
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  color: var(--text-secondary) !important;
}

.btn:hover,
.trade-action-btn:hover,
.feedback-choice-btn:hover,
.history-view-btn:hover,
.pred-layout-view-btn:hover,
.trade-cal-btn:hover,
.trade-cal-month-btn:hover,
.pred-layout-edit-btn:hover {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--border-bright) 62%) !important;
  color: var(--text-primary) !important;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--cyan) 10%, var(--bg-surface) 90%),
    color-mix(in srgb, var(--bg-hover) 84%, transparent)
  ) !important;
}

.btn-primary,
.tracking-log-modern-export {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--cyan) 74%, #ffffff 26%),
    color-mix(in srgb, var(--cyan) 72%, var(--bg-deep) 28%)
  ) !important;
  border-color: color-mix(in srgb, var(--cyan) 70%, var(--border-bright) 30%) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.tracking-log-modern-export:hover {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--cyan) 82%, #ffffff 18%),
    color-mix(in srgb, var(--cyan) 80%, var(--bg-deep) 20%)
  ) !important;
  border-color: color-mix(in srgb, var(--cyan) 80%, var(--border-bright) 20%) !important;
}

.btn-secondary {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--purple) 56%, #ffffff 44%),
    color-mix(in srgb, var(--purple) 64%, var(--bg-deep) 36%)
  ) !important;
  border-color: color-mix(in srgb, var(--purple) 62%, var(--border-bright) 38%) !important;
  color: #ffffff !important;
}

.btn-secondary:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--purple) 64%, #ffffff 36%),
    color-mix(in srgb, var(--purple) 72%, var(--bg-deep) 28%)
  ) !important;
}

.btn-danger,
.trade-action-btn.danger,
.history-delete-btn,
.pred-layout-trash,
.all-forecast-trash-btn {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--red) 76%, #ffffff 24%),
    color-mix(in srgb, var(--red) 72%, var(--bg-deep) 28%)
  ) !important;
  border-color: color-mix(in srgb, var(--red) 66%, var(--border-bright) 34%) !important;
  color: #ffffff !important;
}

.btn-danger:hover,
.trade-action-btn.danger:hover,
.history-delete-btn:hover,
.pred-layout-trash:hover,
.all-forecast-trash-btn:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--red) 84%, #ffffff 16%),
    color-mix(in srgb, var(--red) 80%, var(--bg-deep) 20%)
  ) !important;
  border-color: color-mix(in srgb, var(--red) 78%, var(--border-bright) 22%) !important;
  color: #ffffff !important;
}

/* ===== SURGE MOVEMENT ALERT MODAL (AURORA CARD) ===== */
@keyframes surge-modal-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes surge-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes surge-progress-fill {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes surge-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes surge-blob-bounce-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(26px, -40px, 0) scale(1.08); }
  66% { transform: translate3d(-20px, 18px, 0) scale(0.92); }
}

@keyframes surge-blob-bounce-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(-30px, 42px, 0) scale(1.14); }
  66% { transform: translate3d(16px, -16px, 0) scale(0.9); }
}

@keyframes surge-blob-bounce-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(44px, 18px, 0) scale(0.94); }
  66% { transform: translate3d(-34px, -30px, 0) scale(1.08); }
}

@keyframes surge-chart-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes surge-chart-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes surge-node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50% { transform: scale(1.25); opacity: 0.08; }
}

#surgePopup {
  --surge-overlay: rgba(15, 23, 42, 0.1);
  --surge-panel: #ffffff;
  --surge-panel-border: rgba(15, 23, 42, 0.08);
  --surge-panel-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.15);
  --surge-visual-bg: linear-gradient(180deg, rgba(236, 253, 245, 0.96), rgba(220, 252, 231, 0.74));
  --surge-content-bg: transparent;
  --surge-pill-bg: rgba(255, 255, 255, 0.62);
  --surge-pill-border: rgba(255, 255, 255, 0.54);
  --surge-grid-dot: rgba(15, 23, 42, 0.08);
  --surge-title: #0f172a;
  --surge-body: #64748b;
  --surge-muted: #94a3b8;
  --surge-forecast-line: #cbd5e1;
  --surge-metric-bg: rgba(248, 250, 252, 0.84);
  --surge-metric-border: rgba(226, 232, 240, 0.88);
  --surge-metric-text: #1f2937;
  --surge-metric-muted: #94a3b8;
  --surge-secondary-text: #475569;
  --surge-secondary-hover: rgba(241, 245, 249, 0.9);
  --surge-primary-bg: #0f172a;
  --surge-primary-text: #ffffff;
  --surge-primary-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  --surge-progress: rgba(255, 255, 255, 0.12);
  --surge-node-shell: #ffffff;
  --surge-tooltip-bg: rgba(255, 255, 255, 0.92);
  --surge-tooltip-shadow: rgba(15, 23, 42, 0.12);
  --surge-line-start: #94a3b8;
  --surge-line-mid: #475569;
  --surge-line-end: #f43f5e;
  --surge-area-fill: #f43f5e;
  --surge-tone-text: #e11d48;
  --surge-tone-soft-bg: rgba(255, 241, 242, 0.7);
  --surge-tone-soft-border: rgba(251, 113, 133, 0.18);
  --surge-callout-bg: rgba(255, 247, 237, 0.68);
  --surge-callout-border: rgba(251, 191, 36, 0.24);
  --surge-callout-text: rgba(146, 64, 14, 0.88);
  --surge-badge-dot: #f43f5e;
  --surge-button-hover-start: #f43f5e;
  --surge-button-hover-end: #f97316;
  --surge-node-shadow: rgba(244, 63, 94, 0.4);
  --surge-up-bg: rgba(16, 185, 129, 0.12);
  --surge-up-text: #047857;
  --surge-down-bg: rgba(244, 63, 94, 0.12);
  --surge-down-text: #be123c;
  --surge-warn-bg: rgba(245, 158, 11, 0.14);
  --surge-warn-text: #b45309;
}

#surgePopup[data-tone='up'] {
  --surge-line-end: #10b981;
  --surge-area-fill: #10b981;
  --surge-tone-text: #059669;
  --surge-tone-soft-bg: rgba(236, 253, 245, 0.76);
  --surge-tone-soft-border: rgba(16, 185, 129, 0.18);
  --surge-callout-bg: rgba(236, 253, 245, 0.64);
  --surge-callout-border: rgba(52, 211, 153, 0.22);
  --surge-callout-text: rgba(6, 95, 70, 0.88);
  --surge-badge-dot: #10b981;
  --surge-button-hover-start: #10b981;
  --surge-button-hover-end: #14b8a6;
  --surge-node-shadow: rgba(16, 185, 129, 0.34);
}

#surgePopup[data-tone='down'] {
  --surge-line-end: #ef4444;
  --surge-area-fill: #ef4444;
  --surge-tone-text: #dc2626;
  --surge-tone-soft-bg: rgba(254, 242, 242, 0.76);
  --surge-tone-soft-border: rgba(248, 113, 113, 0.18);
  --surge-callout-bg: rgba(255, 241, 242, 0.68);
  --surge-callout-border: rgba(251, 113, 133, 0.22);
  --surge-callout-text: rgba(136, 19, 55, 0.88);
  --surge-badge-dot: #ef4444;
  --surge-button-hover-start: #ef4444;
  --surge-button-hover-end: #f97316;
  --surge-node-shadow: rgba(239, 68, 68, 0.34);
}

#surgePopup[data-tone='warn'] {
  --surge-line-end: #f43f5e;
  --surge-area-fill: #f43f5e;
  --surge-tone-text: #e11d48;
  --surge-tone-soft-bg: rgba(255, 241, 242, 0.7);
  --surge-tone-soft-border: rgba(251, 113, 133, 0.18);
  --surge-callout-bg: rgba(255, 247, 237, 0.68);
  --surge-callout-border: rgba(251, 191, 36, 0.24);
  --surge-callout-text: rgba(146, 64, 14, 0.88);
  --surge-badge-dot: #f43f5e;
  --surge-button-hover-start: #f43f5e;
  --surge-button-hover-end: #f97316;
  --surge-node-shadow: rgba(244, 63, 94, 0.4);
}

html[data-theme='dark'] #surgePopup {
  --surge-overlay: rgba(2, 6, 23, 0.5);
  --surge-panel: #0f172a;
  --surge-panel-border: rgba(148, 163, 184, 0.16);
  --surge-panel-shadow: 0 42px 84px -24px rgba(2, 6, 23, 0.6);
  --surge-visual-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(17, 24, 39, 0.8));
  --surge-content-bg: transparent;
  --surge-pill-bg: rgba(15, 23, 42, 0.56);
  --surge-pill-border: rgba(148, 163, 184, 0.18);
  --surge-grid-dot: rgba(226, 232, 240, 0.12);
  --surge-title: #f8fafc;
  --surge-body: #94a3b8;
  --surge-muted: #64748b;
  --surge-forecast-line: rgba(148, 163, 184, 0.46);
  --surge-metric-bg: rgba(15, 23, 42, 0.72);
  --surge-metric-border: rgba(148, 163, 184, 0.16);
  --surge-metric-text: #e2e8f0;
  --surge-metric-muted: #94a3b8;
  --surge-secondary-text: #cbd5e1;
  --surge-secondary-hover: rgba(30, 41, 59, 0.88);
  --surge-primary-bg: #f8fafc;
  --surge-primary-text: #0f172a;
  --surge-primary-shadow: 0 14px 28px rgba(2, 6, 23, 0.28);
  --surge-progress: rgba(15, 23, 42, 0.08);
  --surge-node-shell: #0f172a;
  --surge-tooltip-bg: rgba(15, 23, 42, 0.9);
  --surge-tooltip-shadow: rgba(2, 6, 23, 0.32);
  --surge-line-start: #64748b;
  --surge-line-mid: #cbd5e1;
  --surge-up-bg: rgba(16, 185, 129, 0.16);
  --surge-up-text: #6ee7b7;
  --surge-down-bg: rgba(244, 63, 94, 0.16);
  --surge-down-text: #fda4af;
  --surge-warn-bg: rgba(245, 158, 11, 0.18);
  --surge-warn-text: #fcd34d;
}

html[data-theme='dark'] #surgePopup[data-tone='up'] {
  --surge-tone-text: #6ee7b7;
  --surge-tone-soft-bg: rgba(16, 185, 129, 0.14);
  --surge-tone-soft-border: rgba(16, 185, 129, 0.2);
  --surge-callout-bg: rgba(6, 78, 59, 0.28);
  --surge-callout-border: rgba(52, 211, 153, 0.18);
  --surge-callout-text: rgba(209, 250, 229, 0.92);
}

html[data-theme='dark'] #surgePopup[data-tone='down'] {
  --surge-tone-text: #fda4af;
  --surge-tone-soft-bg: rgba(244, 63, 94, 0.14);
  --surge-tone-soft-border: rgba(251, 113, 133, 0.2);
  --surge-callout-bg: rgba(136, 19, 55, 0.26);
  --surge-callout-border: rgba(251, 113, 133, 0.16);
  --surge-callout-text: rgba(255, 228, 230, 0.94);
}

html[data-theme='dark'] #surgePopup[data-tone='warn'] {
  --surge-tone-text: #fda4af;
  --surge-tone-soft-bg: rgba(244, 63, 94, 0.12);
  --surge-tone-soft-border: rgba(251, 113, 133, 0.18);
  --surge-callout-bg: rgba(120, 53, 15, 0.26);
  --surge-callout-border: rgba(251, 191, 36, 0.14);
  --surge-callout-text: rgba(254, 243, 199, 0.94);
}

#surgePopup.movement-alert-overlay {
  z-index: 25040;
  padding: 16px;
  background: var(--surge-overlay) !important;
  backdrop-filter: blur(10px) !important;
}

#surgePopup.movement-alert-overlay.visible {
  display: flex;
  animation: surge-fade-in 0.3s ease-out;
}

#surgePopup .popup.surge-movement-modal {
  position: relative;
  width: min(540px, calc(100vw - 32px));
  max-width: 540px;
  padding: 12px;
  border-radius: 40px;
  border: 1px solid var(--surge-panel-border) !important;
  background: var(--surge-panel) !important;
  box-shadow: var(--surge-panel-shadow) !important;
  overflow: hidden;
  animation: surge-modal-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#surgePopup .popup.surge-movement-modal::before,
#surgePopup .popup.surge-movement-modal::after {
  display: none !important;
}

#surgePopup .surge-modal-visual {
  position: relative;
  height: 224px;
  overflow: hidden;
  background: var(--surge-visual-bg);
  border-radius: 30px;
}

#surgePopup .surge-aurora {
  position: absolute;
  border-radius: 999px;
  filter: blur(52px);
  mix-blend-mode: multiply;
  opacity: 1;
  pointer-events: none;
}

html[data-theme='dark'] #surgePopup .surge-aurora {
  mix-blend-mode: screen;
  opacity: 0.82;
}

#surgePopup .surge-aurora-1 {
  top: -20%;
  left: -10%;
  width: 16rem;
  height: 16rem;
  background: color-mix(in srgb, var(--surge-line-end) 65%, #ffffff 35%);
  animation: surge-blob-bounce-1 8s infinite ease-in-out;
}

#surgePopup .surge-aurora-2 {
  top: 20%;
  right: -10%;
  width: 17rem;
  height: 17rem;
  background: color-mix(in srgb, var(--surge-button-hover-end) 58%, #ffffff 42%);
  animation: surge-blob-bounce-2 9s infinite ease-in-out reverse;
}

#surgePopup .surge-aurora-3 {
  bottom: -40%;
  left: 20%;
  width: 19rem;
  height: 19rem;
  background: color-mix(in srgb, var(--surge-button-hover-start) 52%, #ffffff 48%);
  animation: surge-blob-bounce-3 10s infinite ease-in-out;
}

#surgePopup .surge-modal-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--surge-grid-dot) 1px, transparent 1px);
  background-size: 16px 16px;
}

#surgePopup .surge-modal-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#surgePopup .surge-chart-forecast {
  stroke: var(--surge-forecast-line);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  opacity: 0.78;
}

#surgePopup .surge-chart-state {
  opacity: 0;
  pointer-events: none;
}

#surgePopup[data-tone='up'] .surge-chart-state.is-up,
#surgePopup[data-tone='down'] .surge-chart-state.is-down,
#surgePopup[data-tone='warn'] .surge-chart-state.is-warn {
  opacity: 1;
}

#surgePopup .surge-chart-area {
  fill: url(#surgeAreaGrad);
  opacity: 0;
  transform-origin: bottom;
  animation: surge-chart-fade 1.4s ease-out forwards 0.85s;
}

#surgePopup .surge-chart-live {
  stroke: url(#surgeLineGrad);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: surge-chart-draw 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.25s;
}

#surgePopup .surge-chart-node {
  opacity: 0;
  animation: surge-chart-fade 0.45s ease-out forwards 1.55s;
}

#surgePopup .surge-chart-node-halo {
  fill: var(--surge-area-fill);
  opacity: 0.15;
  animation: surge-node-pulse 1.8s infinite ease-in-out;
}

#surgePopup .surge-chart-node-shell {
  fill: var(--surge-node-shell);
  filter: drop-shadow(0 10px 16px var(--surge-node-shadow));
}

#surgePopup .surge-chart-node-core {
  fill: var(--surge-line-end);
}

#surgePopup .surge-chart-tooltip {
  opacity: 0;
  animation: surge-chart-fade 0.5s ease-out forwards 1.8s;
}

#surgePopup .surge-chart-tooltip-connector {
  stroke: color-mix(in srgb, var(--surge-line-end) 44%, var(--surge-tooltip-bg) 56%);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  animation: surge-chart-fade 0.5s ease-out forwards 1.8s;
}

#surgePopup .surge-chart-tooltip-shell {
  fill: var(--surge-tooltip-bg);
  filter: drop-shadow(0 10px 15px var(--surge-tooltip-shadow));
}

#surgePopup .surge-chart-tooltip-text {
  fill: var(--surge-tone-text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
}

#surgePopup .surge-modal-header {
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#surgePopup .surge-modal-badge,
#surgePopup .surge-modal-close {
  border: 1px solid var(--surge-pill-border);
  background: var(--surge-pill-bg);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

#surgePopup .surge-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--surge-title);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#surgePopup .surge-modal-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--surge-badge-dot);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--surge-badge-dot) 18%, transparent);
  animation: pulse 1.5s ease-in-out infinite;
}

#surgePopup .surge-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--surge-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.18s ease;
}

#surgePopup .surge-modal-close:hover {
  color: var(--surge-title);
  transform: translateY(-1px);
}

#surgePopup .surge-modal-content {
  position: relative;
  z-index: 1;
  padding: 24px 20px 20px;
  background: var(--surge-content-bg);
}

#surgePopup .surge-modal-copy {
  margin-bottom: 24px;
}

#surgePopup .surge-modal-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--surge-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#surgePopup .surge-modal-title {
  margin: 0 0 10px;
  color: var(--surge-title);
  font-family: "Sora", var(--font-sans);
  font-size: 32px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.04em;
}

#surgePopup .surge-modal-body {
  margin: 0;
  color: var(--surge-body);
  font-size: 15px;
  line-height: 1.7;
}

#surgePopup .surge-popup-symbol,
#surgePopup .surge-popup-focus,
#surgePopup .surge-popup-price {
  color: var(--surge-title);
  font-weight: 700;
}

#surgePopup .surge-popup-move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 3px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
}

#surgePopup .surge-popup-move.is-up {
  background: var(--surge-up-bg);
  color: var(--surge-up-text);
}

#surgePopup .surge-popup-move.is-down {
  background: var(--surge-down-bg);
  color: var(--surge-down-text);
}

#surgePopup .surge-popup-move.is-warn {
  background: var(--surge-warn-bg);
  color: var(--surge-warn-text);
}

#surgePopup .surge-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

#surgePopup .surge-metric-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--surge-metric-border);
  background: var(--surge-metric-bg);
}

#surgePopup .surge-metric-card-live {
  border-color: var(--surge-tone-soft-border);
  background: var(--surge-tone-soft-bg);
}

#surgePopup .surge-metric-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, var(--surge-line-end) 18%, transparent);
  border-radius: 999px;
  filter: blur(26px);
  transform: translate(50%, -50%);
}

#surgePopup .surge-metric-label {
  margin-bottom: 6px;
  color: var(--surge-metric-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#surgePopup .surge-metric-label-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--surge-tone-text);
}

#surgePopup .surge-metric-trend {
  display: none;
}

#surgePopup[data-tone='up'] .surge-metric-trend-up,
#surgePopup[data-tone='down'] .surge-metric-trend-down,
#surgePopup[data-tone='warn'] .surge-metric-trend-warn {
  display: inline-flex;
}

#surgePopup .surge-metric-value {
  color: var(--surge-metric-text);
  font-size: 31px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
}

#surgePopup .surge-metric-value-live {
  color: var(--surge-tone-text);
  font-weight: 700;
}

#surgePopup .surge-modal-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--surge-callout-border);
  background: var(--surge-callout-bg);
}

#surgePopup .surge-modal-callout-icon {
  color: color-mix(in srgb, var(--surge-line-end) 78%, #f59e0b 22%);
  flex-shrink: 0;
  margin-top: 1px;
}

#surgePopup .surge-modal-callout-text {
  margin: 0;
  color: var(--surge-callout-text);
  font-size: 13px;
  line-height: 1.65;
  font-weight: 600;
}

#surgePopup .surge-modal-actions {
  display: flex;
  gap: 12px;
}

#surgePopup .surge-action-btn {
  min-height: 58px;
  padding: 0 24px;
  border-radius: 18px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.18s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#surgePopup .surge-action-btn:active {
  transform: scale(0.98);
}

#surgePopup .surge-action-btn.secondary {
  background: transparent;
  color: var(--surge-secondary-text);
}

#surgePopup .surge-action-btn.secondary:hover {
  background: var(--surge-secondary-hover);
}

#surgePopup #surgeRerunBtn {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-color: transparent;
  background: var(--surge-primary-bg);
  color: var(--surge-primary-text);
  box-shadow: var(--surge-primary-shadow);
}

#surgePopup .surge-rerun-hover,
#surgePopup .surge-rerun-progress {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#surgePopup .surge-rerun-hover {
  background: linear-gradient(90deg, var(--surge-button-hover-start), var(--surge-button-hover-end));
  opacity: 0;
  transition: opacity 0.5s ease;
}

#surgePopup #surgeRerunBtn:hover .surge-rerun-hover {
  opacity: 1;
}

#surgePopup .surge-rerun-progress {
  width: 0;
  background: var(--surge-progress);
}

#surgePopup .surge-rerun-progress.is-running {
  animation-name: surge-progress-fill;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

#surgePopup .surge-rerun-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#surgePopup .surge-rerun-icon {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

#surgePopup #surgeRerunBtn:hover .surge-rerun-icon {
  transform: rotate(-180deg);
}

#surgePopup .surge-rerun-icon.is-spinning {
  animation: surge-icon-spin 3s linear infinite;
}

@media (max-width: 640px) {
  #surgePopup.movement-alert-overlay {
    padding: 12px;
  }

  #surgePopup .popup.surge-movement-modal {
    width: calc(100vw - 24px);
    padding: 10px;
    border-radius: 30px;
  }

  #surgePopup .surge-modal-visual {
    height: 212px;
    border-radius: 24px;
  }

  #surgePopup .surge-modal-header {
    top: 16px;
    left: 18px;
    right: 18px;
  }

  #surgePopup .surge-modal-content {
    padding: 22px 20px 20px;
  }

  #surgePopup .surge-modal-title {
    font-size: 27px;
  }

  #surgePopup .surge-metric-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #surgePopup .surge-metric-value {
    font-size: 28px;
  }

  #surgePopup .surge-modal-actions {
    flex-direction: column;
  }

  #surgePopup .surge-action-btn.secondary,
  #surgePopup #surgeRerunBtn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #surgePopup.movement-alert-overlay.visible,
  #surgePopup .popup.surge-movement-modal,
  #surgePopup .surge-aurora,
  #surgePopup .surge-chart-live,
  #surgePopup .surge-chart-area,
  #surgePopup .surge-chart-node,
  #surgePopup .surge-chart-tooltip,
  #surgePopup .surge-chart-node-halo,
  #surgePopup .surge-modal-badge-dot,
  #surgePopup .surge-rerun-progress.is-running,
  #surgePopup .surge-rerun-icon.is-spinning {
    animation: none !important;
  }

  #surgePopup #surgeRerunBtn:hover .surge-rerun-hover {
    opacity: 0;
  }

  #surgePopup #surgeRerunBtn:hover .surge-rerun-icon {
    transform: none;
  }
}

/* ===== FEEDBACK MODAL (Prediction Feedback 1:1 style) ===== */
@keyframes feedbackModalEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes feedbackModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

#feedbackPopup.popup-overlay {
  padding: 16px;
  overflow-y: auto;
  background: transparent;
  backdrop-filter: none;
}

#feedbackPopup .feedback-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: none;
  opacity: 0;
}

#feedbackPopup.visible .feedback-modal-backdrop {
  animation: feedbackModalFade 0.3s ease-out forwards;
}

#feedbackPopup .popup.feedback-popup-shell {
  position: relative;
  z-index: 1;
  width: min(600px, calc(100vw - 32px));
  margin: 32px auto;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #dbe3ed;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.25);
  padding: 0;
  opacity: 0;
  transform: scale(0.95) translateY(10px);
}

#feedbackPopup.visible .popup.feedback-popup-shell {
  animation: feedbackModalEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#feedbackPopup .popup.feedback-popup-shell::before {
  content: none;
  display: none !important;
  background: transparent !important;
}

#feedbackPopup .feedback-modal-header {
  padding: 40px 40px 24px;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#feedbackPopup .feedback-modal-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0f172a;
  text-shadow: none !important;
}

#feedbackPopup .feedback-modal-intro {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  color: #64748b;
  background: transparent !important;
  text-shadow: none !important;
}

#feedbackPopup .feedback-modal-detail-wrap {
  margin: 0;
  padding: 8px 40px;
  background: #ffffff !important;
  background-image: none !important;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

#feedbackPopup #feedbackDetail {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

#feedbackPopup #feedbackDetail .report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

#feedbackPopup #feedbackDetail .report-row.no-border {
  border-bottom: 0;
}

#feedbackPopup #feedbackDetail .report-key {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#feedbackPopup #feedbackDetail .report-val {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

#feedbackPopup #feedbackDetail .report-val.is-muted {
  color: #94a3b8;
  font-style: italic;
  font-weight: 500;
}

#feedbackPopup .feedback-editor-modern {
  margin: 0;
  padding: 30px 40px 32px;
  border: 0;
  background: #ffffff !important;
  background-image: none !important;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#feedbackPopup .feedback-field-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#feedbackPopup .feedback-editor-label {
  margin: 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#feedbackPopup .feedback-editor-choices {
  display: flex;
  gap: 12px;
}

#feedbackPopup .feedback-choice-btn {
  min-height: 52px !important;
  border-radius: 999px !important;
  border: 2px solid #f1f5f9 !important;
  background: #ffffff !important;
  color: #64748b !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
}

#feedbackPopup .feedback-choice-btn .feedback-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
}

#feedbackPopup .feedback-choice-btn:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #475569 !important;
}

#feedbackPopup .feedback-choice-btn.is-correct.active {
  border-color: #10b981 !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  box-shadow: 0 1px 0 rgba(16, 185, 129, 0.12) !important;
}

#feedbackPopup .feedback-choice-btn.is-incorrect.active {
  border-color: #f43f5e !important;
  background: #fff1f2 !important;
  color: #be123c !important;
  box-shadow: 0 1px 0 rgba(244, 63, 94, 0.12) !important;
}

#feedbackPopup .feedback-pnl-wrap {
  position: relative;
}

#feedbackPopup .feedback-pnl-prefix {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  font-weight: 700;
  pointer-events: none;
}

#feedbackPopup .feedback-pnl-input {
  min-height: 52px;
  border-radius: 16px;
  border: 2px solid #f1f5f9;
  background: #ffffff;
  color: #1e293b;
  font-size: 15px;
  font-weight: 700;
  padding-left: 36px;
  padding-right: 20px;
}

#feedbackPopup .feedback-pnl-input::placeholder {
  color: #cbd5e1;
  font-weight: 500;
}

#feedbackPopup .feedback-pnl-input:hover {
  border-color: #cbd5e1;
}

#feedbackPopup .feedback-pnl-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

#feedbackPopup .feedback-editor-hint {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  color: #64748b;
}

#feedbackPopup .popup-actions.feedback-modal-actions {
  padding: 0 40px 28px;
  border-top: 0;
  background: #ffffff !important;
  background-image: none !important;
  justify-content: flex-end;
  gap: 12px;
}

#feedbackPopup .popup-actions.feedback-modal-actions .btn {
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#feedbackPopup .feedback-cancel-btn {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#feedbackPopup .feedback-cancel-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-neutral {
  background: #38bdf8 !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.3) !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-neutral:hover {
  background: #0ea5e9 !important;
  border-color: #0284c7 !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-correct {
  background: #10b981 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28) !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-correct:hover {
  background: #059669 !important;
  border-color: #047857 !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-incorrect {
  background: #f43f5e !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(244, 63, 94, 0.3) !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-incorrect:hover {
  background: #e11d48 !important;
  border-color: #be123c !important;
}

#feedbackPopup #feedbackSaveBtn:disabled {
  background: #e2e8f0 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
}

@media (max-width: 640px) {
  #feedbackPopup.popup-overlay {
    padding: 10px;
  }

  #feedbackPopup .popup.feedback-popup-shell {
    width: calc(100vw - 20px);
    margin: 18px auto;
    max-height: calc(100vh - 36px);
    border-radius: 22px;
  }

  #feedbackPopup .feedback-modal-header {
    padding: 28px 20px 18px;
  }

  #feedbackPopup .feedback-modal-title {
    font-size: 20px;
  }

  #feedbackPopup .feedback-modal-intro {
    font-size: 14px;
  }

  #feedbackPopup .feedback-modal-detail-wrap {
    padding: 6px 20px;
  }

  #feedbackPopup .feedback-editor-modern {
    padding: 22px 20px 24px;
    gap: 18px;
  }

  #feedbackPopup .feedback-editor-choices {
    flex-direction: column;
    gap: 10px;
  }

  #feedbackPopup .popup-actions.feedback-modal-actions {
    padding: 0 20px 20px;
    flex-direction: column-reverse;
  }

  #feedbackPopup .popup-actions.feedback-modal-actions .btn {
    width: 100%;
  }
}

/* ===== FEEDBACK POPUP DETAIL REHAUL ===== */
#feedbackPopup .feedback-detail-hero {
  display: grid;
  gap: 6px;
  padding: 4px 0 14px;
}

#feedbackPopup .feedback-detail-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#feedbackPopup .feedback-detail-title {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

#feedbackPopup .feedback-detail-sub {
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

#feedbackPopup .feedback-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

#feedbackPopup .feedback-brief-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
  background: #f8fafc;
  display: grid;
  gap: 6px;
}

#feedbackPopup .feedback-brief-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

#feedbackPopup .feedback-brief-value {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  color: #0f172a;
}

#feedbackPopup .feedback-brief-meta {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
  font-weight: 600;
}

#feedbackPopup .feedback-probability-card {
  margin-top: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px;
  background: #ffffff;
}

#feedbackPopup .feedback-probability-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
}

#feedbackPopup .feedback-probability-bar {
  margin-top: 10px;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
}

#feedbackPopup .feedback-probability-seg {
  height: 100%;
}

#feedbackPopup .feedback-probability-seg.bull {
  background: linear-gradient(90deg, #34d399, #10b981);
}

#feedbackPopup .feedback-probability-seg.neutral {
  background: linear-gradient(90deg, #cbd5e1, #94a3b8);
}

#feedbackPopup .feedback-probability-seg.bear {
  background: linear-gradient(90deg, #fb7185, #f43f5e);
}

#feedbackPopup .feedback-probability-legend {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#feedbackPopup .feedback-probability-legend span {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#feedbackPopup .feedback-probability-legend .bull {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #bbf7d0;
}

#feedbackPopup .feedback-probability-legend .neutral {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
}

#feedbackPopup .feedback-probability-legend .bear {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

#feedbackPopup .feedback-detail-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#feedbackPopup .feedback-detail-item {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
  background: #ffffff;
  display: grid;
  gap: 6px;
}

#feedbackPopup .feedback-detail-item-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

#feedbackPopup .feedback-detail-item-value {
  font-size: 12px;
  line-height: 1.55;
  color: #0f172a;
  font-weight: 800;
}

@media (max-width: 640px) {
  #feedbackPopup .feedback-brief-grid,
  #feedbackPopup .feedback-detail-grid {
    grid-template-columns: 1fr;
  }

  #feedbackPopup .feedback-detail-title {
    font-size: 20px;
  }

  #feedbackPopup .feedback-probability-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== PREDICTION ARCHIVE FLAT CLEANUP ===== */
#page-history .historyv2-topbar-count {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
}

#page-history .historyv2-info-banner,
#page-history .historyv2-window-card,
#page-history .historyv2-window-head,
#page-history .historyv2-day-card,
#page-history .historyv3-summary-card,
#page-history .historyv3-window-head,
#page-history .historyv3-context-card,
#page-history .historyv3-context-card.is-story,
#page-history .historyv3-day-card,
#page-history .historyv3-day-stats > div,
#allForecastDaysPopup .popup.all-forecast-modern-shell,
#allForecastDaysPopup .all-forecast-modern-panel,
#allForecastDaysPopup .all-forecast-modern-header,
#allForecastDaysPopup .all-forecast-modern-body,
#allForecastDaysPopup .all-forecast-modern-footer,
#allForecastDaysPopup .afw-metric-card,
#allForecastDaysPopup .afw-library-shell,
#allForecastDaysPopup .afw-library-head,
#allForecastDaysPopup .afw-expand-wrap,
#allForecastDaysPopup .afw-session-card,
#allForecastDaysPopup .afw-day-card,
#feedbackPopup .popup.feedback-popup-shell,
#feedbackPopup .feedback-modal-header,
#feedbackPopup .feedback-modal-detail-wrap,
#feedbackPopup .feedback-editor-modern,
#feedbackPopup .popup-actions.feedback-modal-actions,
#feedbackPopup .feedback-brief-card,
#feedbackPopup .feedback-probability-card,
#feedbackPopup .feedback-detail-item {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#page-history .historyv2-info-banner,
#page-history .historyv2-window-card,
#page-history .historyv2-day-card,
#page-history .historyv3-summary-card,
#page-history .historyv3-context-card,
#page-history .historyv3-day-card,
#allForecastDaysPopup .popup.all-forecast-modern-shell,
#allForecastDaysPopup .afw-metric-card,
#allForecastDaysPopup .afw-library-shell,
#allForecastDaysPopup .afw-expand-wrap,
#allForecastDaysPopup .afw-session-card,
#allForecastDaysPopup .afw-day-card,
#feedbackPopup .popup.feedback-popup-shell,
#feedbackPopup .feedback-brief-card,
#feedbackPopup .feedback-probability-card,
#feedbackPopup .feedback-detail-item {
  border-color: #e2e8f0;
}

#page-history .historyv2-ticker-pill,
#page-history .historyv2-view-action.is-active,
#page-history .historyv2-trash-action,
#page-history .historyv3-context-chip,
#page-history .historyv3-day-action,
#allForecastDaysPopup .historyv3-day-action,
#allForecastDaysPopup .afw-action-btn,
#allForecastDaysPopup .afw-remove-btn,
#feedbackPopup .feedback-choice-btn,
#feedbackPopup .feedback-cancel-btn,
#feedbackPopup .feedback-pnl-input,
#feedbackPopup .feedback-probability-legend span {
  box-shadow: none !important;
}

#page-history .historyv2-base-price {
  color: #0f172a;
}

#page-history .historyv2-window-head,
#page-history .historyv3-window-head,
#allForecastDaysPopup .all-forecast-modern-body {
  background: #ffffff !important;
}

#page-history .historyv2-view-action.is-active {
  border-color: #cbd5e1;
  background: #ffffff;
}

#page-history .historyv2-trash-action {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #64748b;
}

#page-history .historyv2-trash-action:hover {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#page-history .historyv3-context-chip,
#page-history .historyv3-day-action,
#allForecastDaysPopup .historyv3-day-action,
#allForecastDaysPopup .afw-action-btn,
#allForecastDaysPopup .afw-remove-btn {
  background-image: none !important;
}

#page-history .historyv3-day-action.is-primary,
#allForecastDaysPopup .historyv3-day-action.is-primary {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff;
}

#allForecastDaysPopup .popup.all-forecast-modern-shell,
#allForecastDaysPopup .afw-metric-card,
#allForecastDaysPopup .afw-day-card,
#allForecastDaysPopup .afw-session-card {
  box-shadow: none !important;
}

#feedbackPopup .popup.feedback-popup-shell {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

#feedbackPopup .feedback-choice-btn.is-correct.active,
#feedbackPopup .feedback-choice-btn.is-incorrect.active,
#feedbackPopup .feedback-pnl-input:hover,
#feedbackPopup .feedback-pnl-input:focus {
  box-shadow: none !important;
}

#feedbackPopup .feedback-pnl-input:hover,
#feedbackPopup .feedback-pnl-input:focus {
  border-color: #cbd5e1;
}

#feedbackPopup .feedback-probability-seg.bull {
  background: #10b981;
}

#feedbackPopup .feedback-probability-seg.neutral {
  background: #94a3b8;
}

#feedbackPopup .feedback-probability-seg.bear {
  background: #f43f5e;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-neutral,
#feedbackPopup #feedbackSaveBtn.feedback-save-correct,
#feedbackPopup #feedbackSaveBtn.feedback-save-incorrect {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-neutral:hover,
#feedbackPopup #feedbackSaveBtn.feedback-save-correct:hover,
#feedbackPopup #feedbackSaveBtn.feedback-save-incorrect:hover {
  background: #020617 !important;
  border-color: #020617 !important;
}

html[data-theme='dark'] #page-history .historyv2-topbar-count,
html[data-theme='dark'] #page-history .historyv2-info-banner,
html[data-theme='dark'] #page-history .historyv2-window-card,
html[data-theme='dark'] #page-history .historyv2-window-head,
html[data-theme='dark'] #page-history .historyv2-day-card,
html[data-theme='dark'] #page-history .historyv3-summary-card,
html[data-theme='dark'] #page-history .historyv3-window-head,
html[data-theme='dark'] #page-history .historyv3-context-card,
html[data-theme='dark'] #page-history .historyv3-context-card.is-story,
html[data-theme='dark'] #page-history .historyv3-day-card,
html[data-theme='dark'] #page-history .historyv3-day-stats > div,
html[data-theme='dark'] #allForecastDaysPopup .popup.all-forecast-modern-shell,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-panel,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-header,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-body,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-footer,
html[data-theme='dark'] #allForecastDaysPopup .afw-metric-card,
html[data-theme='dark'] #allForecastDaysPopup .afw-library-shell,
html[data-theme='dark'] #allForecastDaysPopup .afw-library-head,
html[data-theme='dark'] #allForecastDaysPopup .afw-expand-wrap,
html[data-theme='dark'] #allForecastDaysPopup .afw-session-card,
html[data-theme='dark'] #allForecastDaysPopup .afw-day-card,
html[data-theme='dark'] #feedbackPopup .popup.feedback-popup-shell,
html[data-theme='dark'] #feedbackPopup .feedback-modal-header,
html[data-theme='dark'] #feedbackPopup .feedback-modal-detail-wrap,
html[data-theme='dark'] #feedbackPopup .feedback-editor-modern,
html[data-theme='dark'] #feedbackPopup .popup-actions.feedback-modal-actions,
html[data-theme='dark'] #feedbackPopup .feedback-brief-card,
html[data-theme='dark'] #feedbackPopup .feedback-probability-card,
html[data-theme='dark'] #feedbackPopup .feedback-detail-item {
  background: #0f172a !important;
  background-image: none !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}

html[data-theme='dark'] #page-history .historyv2-topbar-title,
html[data-theme='dark'] #page-history .historyv2-meta-value,
html[data-theme='dark'] #page-history .historyv2-meta-strong,
html[data-theme='dark'] #page-history .historyv2-base-price,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-title,
html[data-theme='dark'] #allForecastDaysPopup .afw-metric-value,
html[data-theme='dark'] #allForecastDaysPopup .afw-library-title,
html[data-theme='dark'] #allForecastDaysPopup .afw-row-title,
html[data-theme='dark'] #allForecastDaysPopup .afw-expand-title,
html[data-theme='dark'] #allForecastDaysPopup .afw-cell-range,
html[data-theme='dark'] #allForecastDaysPopup .afw-cell-count,
html[data-theme='dark'] #feedbackPopup .feedback-modal-title,
html[data-theme='dark'] #feedbackPopup .feedback-detail-title,
html[data-theme='dark'] #feedbackPopup .feedback-brief-value,
html[data-theme='dark'] #feedbackPopup .feedback-detail-item-value,
html[data-theme='dark'] #feedbackPopup .feedback-probability-head {
  color: #f8fafc !important;
}

html[data-theme='dark'] #page-history .historyv2-topbar-count,
html[data-theme='dark'] #page-history .historyv2-info-banner-text,
html[data-theme='dark'] #page-history .historyv2-meta-label,
html[data-theme='dark'] #page-history .historyv3-window-copy,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-subtitle,
html[data-theme='dark'] #allForecastDaysPopup .afw-metric-label,
html[data-theme='dark'] #allForecastDaysPopup .afw-metric-sub,
html[data-theme='dark'] #allForecastDaysPopup .afw-library-caption,
html[data-theme='dark'] #allForecastDaysPopup .afw-row-sub,
html[data-theme='dark'] #allForecastDaysPopup .afw-expand-sub,
html[data-theme='dark'] #allForecastDaysPopup .afw-day-label,
html[data-theme='dark'] #allForecastDaysPopup .afw-day-meta,
html[data-theme='dark'] #feedbackPopup .feedback-modal-intro,
html[data-theme='dark'] #feedbackPopup .feedback-detail-kicker,
html[data-theme='dark'] #feedbackPopup .feedback-detail-sub,
html[data-theme='dark'] #feedbackPopup .feedback-brief-label,
html[data-theme='dark'] #feedbackPopup .feedback-brief-meta,
html[data-theme='dark'] #feedbackPopup .feedback-detail-item-label,
html[data-theme='dark'] #feedbackPopup .feedback-editor-label,
html[data-theme='dark'] #feedbackPopup .feedback-editor-hint {
  color: #94a3b8 !important;
}

/* ===== UNIFIED MODERN BUTTON SYSTEM ===== */
:where(button[class*="btn"], a[class*="btn"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 72%, transparent);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    transform 0.14s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

:where(button[class*="btn"], a[class*="btn"]):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bg-deep) 18%, transparent);
}

:where(button[class*="btn"], a[class*="btn"]):active {
  transform: scale(0.98);
}

:where(button[class*="btn"], a[class*="btn"]):disabled,
:where(button[class*="btn"], a[class*="btn"]).disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn,
.trade-action-btn,
.feedback-btn,
.history-view-btn,
.pred-layout-view-btn,
.pred-layout-edit-btn,
.trade-cal-btn,
.trade-cal-month-btn,
.profile-upload-btn,
.system-updates-secondary-btn,
.top-header-lock-btn,
.auth-back-btn,
.tab-btn,
.auth-tab-btn {
  background: #ffffff !important;
  color: var(--text-secondary) !important;
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent) !important;
}

.btn:hover,
.trade-action-btn:hover,
.feedback-btn:hover,
.history-view-btn:hover,
.pred-layout-view-btn:hover,
.pred-layout-edit-btn:hover,
.trade-cal-btn:hover,
.trade-cal-month-btn:hover,
.profile-upload-btn:hover,
.system-updates-secondary-btn:hover,
.top-header-lock-btn:hover,
.auth-back-btn:hover,
.tab-btn:hover,
.auth-tab-btn:hover {
  background: color-mix(in srgb, var(--bg-hover) 78%, #ffffff 22%) !important;
  color: var(--text-primary) !important;
  border-color: color-mix(in srgb, var(--border) 68%, transparent) !important;
}

.btn-primary,
.tracking-log-modern-export,
.tracking-add-btn,
.auth-main-btn,
.auth-gradient-btn,
.btn-run-forecast,
#feedbackSaveBtn,
.system-updates-admin-btn {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--cyan) 72%, #ffffff 28%),
    color-mix(in srgb, var(--cyan) 76%, var(--bg-deep) 24%)
  ) !important;
  border-color: color-mix(in srgb, var(--cyan) 72%, var(--border-bright) 28%) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.tracking-log-modern-export:hover,
.tracking-add-btn:hover,
.auth-main-btn:hover,
.auth-gradient-btn:hover,
.btn-run-forecast:hover,
#feedbackSaveBtn:hover,
.system-updates-admin-btn:hover {
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--cyan) 82%, #ffffff 18%),
    color-mix(in srgb, var(--cyan) 84%, var(--bg-deep) 16%)
  ) !important;
  border-color: color-mix(in srgb, var(--cyan) 84%, var(--border-bright) 16%) !important;
}

.btn-secondary,
.profile-hub-sidebar-btn.close,
.profile-hub-close-btn {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--border) 58%, transparent) !important;
  color: var(--text-secondary) !important;
}

.btn-secondary:hover,
.profile-hub-sidebar-btn.close:hover,
.profile-hub-close-btn:hover {
  background: color-mix(in srgb, var(--bg-hover) 80%, #ffffff 20%) !important;
  border-color: color-mix(in srgb, var(--border) 78%, transparent) !important;
  color: var(--text-primary) !important;
}

.btn-danger,
.trade-action-btn.danger,
.history-delete-btn,
.pred-layout-trash,
.all-forecast-trash-btn,
.profile-hub-sidebar-btn.signout {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--red) 76%, #ffffff 24%),
    color-mix(in srgb, var(--red) 78%, var(--bg-deep) 22%)
  ) !important;
  border-color: color-mix(in srgb, var(--red) 72%, var(--border-bright) 28%) !important;
  color: #ffffff !important;
}

.btn-danger:hover,
.trade-action-btn.danger:hover,
.history-delete-btn:hover,
.pred-layout-trash:hover,
.all-forecast-trash-btn:hover,
.profile-hub-sidebar-btn.signout:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--red) 84%, #ffffff 16%),
    color-mix(in srgb, var(--red) 86%, var(--bg-deep) 14%)
  ) !important;
  border-color: color-mix(in srgb, var(--red) 84%, var(--border-bright) 16%) !important;
}

.feedback-btn.fb-correct {
  background: color-mix(in srgb, var(--green) 15%, #ffffff 85%) !important;
  border-color: color-mix(in srgb, var(--green) 62%, var(--border-bright) 38%) !important;
  color: color-mix(in srgb, var(--green) 90%, #0b2817 10%) !important;
}

.feedback-btn.fb-correct:hover {
  background: color-mix(in srgb, var(--green) 22%, #ffffff 78%) !important;
}

.feedback-btn.fb-incorrect,
.feedback-btn.fb-revert {
  background: color-mix(in srgb, var(--red) 13%, #ffffff 87%) !important;
  border-color: color-mix(in srgb, var(--red) 58%, var(--border-bright) 42%) !important;
  color: color-mix(in srgb, var(--red) 90%, #3f0617 10%) !important;
}

.feedback-btn.fb-incorrect:hover,
.feedback-btn.fb-revert:hover {
  background: color-mix(in srgb, var(--red) 21%, #ffffff 79%) !important;
}

.feedback-btn.fb-change {
  background: color-mix(in srgb, var(--cyan) 13%, #ffffff 87%) !important;
  border-color: color-mix(in srgb, var(--cyan) 56%, var(--border-bright) 44%) !important;
  color: color-mix(in srgb, var(--cyan) 88%, #0b1f33 12%) !important;
}

.feedback-btn.fb-change:hover {
  background: color-mix(in srgb, var(--cyan) 22%, #ffffff 78%) !important;
}

.feedback-choice-btn {
  border-width: 2px !important;
  border-radius: 14px !important;
  min-height: 44px !important;
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--border) 50%, transparent) !important;
  color: var(--text-secondary) !important;
}

.feedback-choice-btn.is-correct.active {
  border-color: color-mix(in srgb, var(--green) 74%, var(--border-bright) 26%) !important;
  background: color-mix(in srgb, var(--green) 14%, #ffffff 86%) !important;
  color: color-mix(in srgb, var(--green) 90%, #0b2817 10%) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 16%, transparent) !important;
}

.feedback-choice-btn.is-incorrect.active {
  border-color: color-mix(in srgb, var(--red) 74%, var(--border-bright) 26%) !important;
  background: color-mix(in srgb, var(--red) 14%, #ffffff 86%) !important;
  color: color-mix(in srgb, var(--red) 90%, #3f0617 10%) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 16%, transparent) !important;
}

/* ===== BESPOKE BUTTON HIGHLIGHT LAYER ===== */
:where(button[class*="btn"], a[class*="btn"]) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --btn-highlight: color-mix(in srgb, var(--cyan) 52%, transparent);
  --btn-highlight-b: #818cf8;
  --btn-highlight-c: #22d3ee;
}

:where(button[class*="btn"], a[class*="btn"])::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 18%, color-mix(in srgb, #ffffff 42%, transparent) 49%, transparent 82%);
  transform: translateX(-135%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

:where(button[class*="btn"], a[class*="btn"])::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--btn-highlight) 40%, transparent),
      color-mix(in srgb, var(--btn-highlight-b) 38%, transparent),
      color-mix(in srgb, var(--btn-highlight-c) 36%, transparent)
    ),
    radial-gradient(circle at 20% 28%, color-mix(in srgb, var(--btn-highlight) 24%, transparent) 0%, transparent 54%),
    radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--btn-highlight) 20%, transparent) 0%, transparent 48%);
  background-size: 210% 210%, 100% 100%, 100% 100%;
  background-position: 0% 50%, center, center;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.25s ease;
  animation: modernButtonColorFlow 8.5s ease-in-out infinite;
}

:where(button[class*="btn"], a[class*="btn"]):hover {
  border-color: color-mix(in srgb, var(--btn-highlight) 58%, var(--border-bright) 42%) !important;
}

:where(button[class*="btn"], a[class*="btn"]):hover::before {
  opacity: 0.9;
  animation: bespokeButtonSweep 1.05s ease;
}

:where(button[class*="btn"], a[class*="btn"]):hover::after {
  opacity: 0.58;
}

:where(button[class*="btn"], a[class*="btn"]) > * {
  position: relative;
  z-index: 1;
}

@keyframes bespokeButtonSweep {
  0% { transform: translateX(-135%); }
  100% { transform: translateX(140%); }
}

@keyframes modernButtonColorFlow {
  0% { background-position: 0% 50%, center, center; }
  50% { background-position: 100% 50%, center, center; }
  100% { background-position: 0% 50%, center, center; }
}

.btn-primary,
.tracking-log-modern-export,
.tracking-add-btn,
.auth-main-btn,
.auth-gradient-btn,
.btn-run-forecast,
#feedbackSaveBtn,
.system-updates-admin-btn {
  --btn-highlight: #818cf8;
  --btn-highlight-b: #60a5fa;
  --btn-highlight-c: #22d3ee;
}

.btn-secondary,
.profile-hub-sidebar-btn.close,
.profile-hub-close-btn,
.trade-cal-btn,
.trade-cal-month-btn,
.pred-layout-view-btn,
.pred-layout-edit-btn,
.tab-btn,
.auth-tab-btn {
  --btn-highlight: #60a5fa;
  --btn-highlight-b: #818cf8;
  --btn-highlight-c: #38bdf8;
}

.btn-danger,
.trade-action-btn.danger,
.history-delete-btn,
.pred-layout-trash,
.all-forecast-trash-btn,
.profile-hub-sidebar-btn.signout {
  --btn-highlight: #fb7185;
  --btn-highlight-b: #f97316;
  --btn-highlight-c: #fb7185;
}

.feedback-btn.fb-correct,
.feedback-choice-btn.is-correct.active {
  --btn-highlight: #34d399;
  --btn-highlight-b: #22c55e;
  --btn-highlight-c: #10b981;
}

.feedback-btn.fb-incorrect,
.feedback-btn.fb-revert,
.feedback-choice-btn.is-incorrect.active {
  --btn-highlight: #fb7185;
  --btn-highlight-b: #f43f5e;
  --btn-highlight-c: #fb7185;
}

.feedback-btn.fb-change {
  --btn-highlight: #22d3ee;
  --btn-highlight-b: #60a5fa;
  --btn-highlight-c: #22d3ee;
}

:where(button[class*="btn"], a[class*="btn"]):disabled::after,
:where(button[class*="btn"], a[class*="btn"]).disabled::after {
  animation: none;
  opacity: 0.16;
}

html[data-theme='dark'] :where(button[class*="btn"], a[class*="btn"])::before {
  background: linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, 0.26) 49%, transparent 82%);
}

html[data-theme='dark'] :where(button[class*="btn"], a[class*="btn"])::after {
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  :where(button[class*="btn"], a[class*="btn"])::after {
    animation: none !important;
  }
}

/* ===== HEADER LOCK BUTTON (REFERENCE STYLE) ===== */
.top-bar.top-bar-redesign > .top-header-lock-btn {
  right: 12px;
  bottom: 6px;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #94a3b8 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
  transform: none;
}

.top-bar.top-bar-redesign > .top-header-lock-btn:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
  transform: none;
}

.top-bar.top-bar-redesign > .top-header-lock-btn.is-locked {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn.is-locked:hover {
  background: #0f172a !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}

.top-header-lock-btn .icon-lock-toggle {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.8;
}

.top-header-lock-btn .lock-body {
  fill: color-mix(in srgb, currentColor 14%, transparent);
}

html[data-theme='dark'] .top-bar.top-bar-redesign > .top-header-lock-btn:not(.is-locked) {
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent) !important;
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent) !important;
  color: color-mix(in srgb, var(--text-muted) 82%, #cbd5e1 18%) !important;
  box-shadow: 0 5px 14px rgba(2, 6, 23, 0.42) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign > .top-header-lock-btn:not(.is-locked):hover {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--border-bright) 84%, transparent) !important;
  color: color-mix(in srgb, var(--text-secondary) 90%, #e2e8f0 10%) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign > .top-header-lock-btn.is-locked {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

/* ===== SYSTEM HEADER UI REFRESH (1:1 STYLE) ===== */
.top-bar.top-bar-redesign {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding: 12px 12px 12px 18px !important;
  border-radius: 32px !important;
  border: 1px solid rgba(16, 185, 129, 0.16) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
  overflow: visible !important;
}

.top-bar.top-bar-redesign > .top-bar-left,
.top-bar.top-bar-redesign > .top-bar-right {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  flex: 1 1 360px !important;
  min-width: 0 !important;
}

.top-bar.top-bar-redesign .top-system-meta {
  min-width: 210px !important;
  flex: 1 1 210px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.top-bar.top-bar-redesign .top-system-layout {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
}

.top-bar.top-bar-redesign .top-system-content {
  min-width: 188px !important;
  justify-content: center !important;
  padding: 2px 0 !important;
}

.top-bar.top-bar-redesign .top-bar-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #0f172a !important;
}

.top-bar.top-bar-redesign .top-meta-row {
  display: grid !important;
  gap: 6px !important;
}

.top-bar.top-bar-redesign .top-meta-item {
  min-height: 27px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  padding: 0 10px !important;
}

.top-bar.top-bar-redesign .top-meta-item .top-meta-key {
  color: #94a3b8 !important;
  font-size: 9px !important;
}

.top-bar.top-bar-redesign .top-meta-item .top-meta-value {
  color: #334155 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.top-bar.top-bar-redesign .price-cluster {
  flex: 1 1 220px !important;
  min-width: 200px !important;
  max-width: 250px !important;
}

.top-bar.top-bar-redesign .top-price-card {
  min-height: 112px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(16, 185, 129, 0.38) !important;
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.82), rgba(240, 253, 250, 0.72)) !important;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.14) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  animation: headerCardFloat 7.8s ease-in-out infinite;
}

.top-bar.top-bar-redesign .top-price-card:hover {
  transform: translateY(-2px);
  border-color: rgba(16, 185, 129, 0.58) !important;
  box-shadow: 0 14px 24px rgba(16, 185, 129, 0.18) !important;
}

.top-bar.top-bar-redesign .top-price-card .price-label.top-price-tag {
  border-radius: 999px !important;
  border: 1px solid rgba(167, 243, 208, 0.9) !important;
  background: #ffffff !important;
  color: #047857 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.top-bar.top-bar-redesign .price-value {
  color: #065f46 !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.top-bar.top-bar-redesign .top-price-card .price-change {
  color: #059669 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.top-bar.top-bar-redesign .top-price-pct {
  color: #10b981 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.top-bar.top-bar-redesign .top-bar-right {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  flex: 1.3 1 500px !important;
  min-width: 0 !important;
}

.top-bar.top-bar-redesign .ohl-box,
.top-bar.top-bar-redesign .session-box {
  min-width: 208px !important;
  flex: 1 1 208px !important;
  min-height: 112px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  background: rgba(248, 250, 252, 0.82) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease !important;
}

.top-bar.top-bar-redesign .ohl-box:hover,
.top-bar.top-bar-redesign .session-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.65) !important;
}

.top-bar.top-bar-redesign .ohl-item,
.top-bar.top-bar-redesign .ohl-chip,
.top-bar.top-bar-redesign .session-mini-box {
  border-radius: 10px !important;
  border: 1px solid rgba(226, 232, 240, 0.78) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.top-bar.top-bar-redesign .top-actions {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-left: 0 !important;
  padding-left: 6px !important;
  flex: 1 1 230px !important;
}

.top-bar.top-bar-redesign .top-actions .btn-run-forecast {
  min-height: 52px !important;
  border-radius: 16px !important;
  padding: 0 24px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #22d3ee, #3b82f6) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px -6px rgba(6, 182, 212, 0.58) !important;
  transform: translateY(0);
}

.top-bar.top-bar-redesign .top-actions .btn-run-forecast:hover {
  background: linear-gradient(90deg, #67e8f9, #60a5fa) !important;
  box-shadow: 0 10px 22px -4px rgba(6, 182, 212, 0.65) !important;
  transform: translateY(-2px);
}

.top-bar.top-bar-redesign .top-actions .btn-run-forecast .action-btn-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.top-bar.top-bar-redesign .top-actions .btn-run-forecast .action-btn-label {
  letter-spacing: 0.05em !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn {
  position: static !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  margin-right: 2px !important;
  border: 1px solid #334155 !important;
  background: #1e293b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.62) !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn .icon-lock-toggle {
  width: 16px !important;
  height: 16px !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn:hover {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn:not(.is-locked) {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn:not(.is-locked):hover {
  background: #f8fafc !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
}

@media (min-width: 1280px) {
  .top-bar.top-bar-redesign {
    flex-wrap: nowrap !important;
  }

  .top-bar.top-bar-redesign .top-bar-right {
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 1200px) {
  .top-bar.top-bar-redesign {
    gap: 10px !important;
    padding: 9px 10px 9px 12px !important;
  }

  .top-bar.top-bar-redesign .price-cluster {
    min-width: 190px !important;
    max-width: 220px !important;
  }
}

@media (max-width: 980px) {
  .top-bar.top-bar-redesign {
    border-radius: 24px !important;
    padding: 8px 8px 8px 10px !important;
    gap: 8px !important;
  }

  .top-bar.top-bar-redesign > .top-bar-left,
  .top-bar.top-bar-redesign > .top-bar-right {
    flex: 1 1 100% !important;
  }

  .top-bar.top-bar-redesign .top-system-meta {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .top-bar.top-bar-redesign .top-system-layout {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .top-bar.top-bar-redesign .top-system-content,
  .top-bar.top-bar-redesign .price-cluster {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .top-bar.top-bar-redesign .top-bar-right {
    flex-wrap: wrap !important;
  }

  .top-bar.top-bar-redesign .ohl-box,
  .top-bar.top-bar-redesign .session-box {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .top-bar.top-bar-redesign .top-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .top-bar.top-bar-redesign .top-meta-item,
  .top-bar.top-bar-redesign .ohl-item,
  .top-bar.top-bar-redesign .ohl-chip,
  .top-bar.top-bar-redesign .session-mini-box {
    min-height: 24px !important;
  }

  .top-bar.top-bar-redesign .top-actions .btn-run-forecast,
  .top-bar.top-bar-redesign > .top-header-lock-btn {
    min-height: 46px !important;
    height: 46px !important;
  }
}

@keyframes headerCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

html[data-theme='dark'] .top-bar.top-bar-redesign {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border-bright) 72%) !important;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent) !important;
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.45) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-meta-item,
html[data-theme='dark'] .top-bar.top-bar-redesign .ohl-box,
html[data-theme='dark'] .top-bar.top-bar-redesign .session-box,
html[data-theme='dark'] .top-bar.top-bar-redesign .ohl-item,
html[data-theme='dark'] .top-bar.top-bar-redesign .ohl-chip,
html[data-theme='dark'] .top-bar.top-bar-redesign .session-mini-box {
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent) !important;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card {
  border-color: color-mix(in srgb, var(--green) 44%, var(--border-bright) 56%) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--green) 18%, var(--bg-surface) 82%),
    color-mix(in srgb, var(--green) 10%, var(--bg-hover) 90%)
  ) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-actions .btn-run-forecast {
  background: linear-gradient(90deg, #0891b2, #2563eb) !important;
}

.top-bar.top-bar-redesign .top-price-card {
  --ticker-trend-color: var(--green);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 116px !important;
  border-radius: 18px !important;
  padding: 12px 12px 11px !important;
  border: 1px solid color-mix(in srgb, var(--ticker-trend-color) 34%, var(--border-bright) 66%) !important;
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--ticker-trend-color) 14%, transparent), transparent 62%),
    color-mix(in srgb, var(--bg-surface) 96%, transparent) !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--ticker-trend-color) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent) !important;
  cursor: pointer;
  user-select: none;
  transition: transform 0.42s ease, box-shadow 0.42s ease, border-color 0.42s ease, background 0.42s ease !important;
  overflow: hidden;
}

.top-bar.top-bar-redesign .top-price-card:hover,
.top-bar.top-bar-redesign .top-price-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ticker-trend-color) 56%, var(--border-bright) 44%) !important;
  box-shadow:
    0 18px 30px color-mix(in srgb, var(--ticker-trend-color) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent) !important;
}

.top-bar.top-bar-redesign .top-price-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--ticker-trend-color) 30%, transparent),
    0 18px 30px color-mix(in srgb, var(--ticker-trend-color) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent) !important;
}

.top-bar.top-bar-redesign .top-price-card.trend-up { --ticker-trend-color: var(--green); }
.top-bar.top-bar-redesign .top-price-card.trend-down { --ticker-trend-color: var(--red); }
.top-bar.top-bar-redesign .top-price-card.trend-neutral { --ticker-trend-color: var(--orange); }

.top-bar.top-bar-redesign .top-price-label-row {
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
}

.top-bar.top-bar-redesign .top-price-label-row::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ticker-trend-color) 82%, white 18%);
  box-shadow:
    0 0 0 0 color-mix(in srgb, var(--ticker-trend-color) 46%, transparent),
    0 0 10px color-mix(in srgb, var(--ticker-trend-color) 44%, transparent);
  animation: topTickerLivePulse 1.7s ease-out infinite;
  flex: 0 0 auto;
}

@keyframes topTickerLivePulse {
  0% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--ticker-trend-color) 48%, transparent),
      0 0 10px color-mix(in srgb, var(--ticker-trend-color) 44%, transparent);
  }
  70% {
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--ticker-trend-color) 0%, transparent),
      0 0 14px color-mix(in srgb, var(--ticker-trend-color) 32%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--ticker-trend-color) 0%, transparent),
      0 0 10px color-mix(in srgb, var(--ticker-trend-color) 44%, transparent);
  }
}

.top-bar.top-bar-redesign .top-price-card .price-label.top-price-tag {
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--ticker-trend-color) 26%, var(--border-bright) 74%) !important;
  background: color-mix(in srgb, #ffffff 84%, transparent) !important;
  color: color-mix(in srgb, var(--ticker-trend-color) 78%, var(--text-primary) 22%) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  padding: 4px 9px !important;
}

.top-bar.top-bar-redesign .top-price-main-row {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.top-bar.top-bar-redesign .price-value {
  color: color-mix(in srgb, var(--ticker-trend-color) 72%, var(--text-primary) 28%) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

.top-bar.top-bar-redesign .top-price-lower-row {
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  margin-top: 4px;
}

.top-bar.top-bar-redesign .top-price-change-stack {
  align-items: center;
  text-align: center;
  gap: 1px;
}

.top-bar.top-bar-redesign .top-price-card .price-change {
  color: color-mix(in srgb, var(--ticker-trend-color) 70%, var(--text-primary) 30%) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.top-bar.top-bar-redesign .top-price-card .price-change.up::before,
.top-bar.top-bar-redesign .top-price-card .price-change.down::before,
.top-bar.top-bar-redesign .top-price-card .price-change.neutral::before {
  font-size: 11px;
  line-height: 1;
}

.top-bar.top-bar-redesign .top-price-card .price-change.up::before { content: '↗'; }
.top-bar.top-bar-redesign .top-price-card .price-change.down::before { content: '↘'; }
.top-bar.top-bar-redesign .top-price-card .price-change.neutral::before { content: '-'; }

.top-bar.top-bar-redesign .top-price-pct {
  color: color-mix(in srgb, var(--ticker-trend-color) 58%, var(--text-secondary) 42%) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.top-bar.top-bar-redesign .top-price-card .top-price-signal {
  min-width: 84px;
  max-width: 108px;
  opacity: 0.92;
}

.top-bar.top-bar-redesign .top-price-card .top-price-bg-svg {
  top: auto;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 58px;
  opacity: 0.52;
  z-index: 1;
  pointer-events: none;
}

.top-bar.top-bar-redesign .top-price-card:hover .top-price-bg-svg {
  transform: scaleX(1.06) scaleY(1.04);
  transform-origin: left bottom;
  transition: transform 0.7s ease;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card {
  border-color: color-mix(in srgb, var(--ticker-trend-color) 42%, var(--border-bright) 58%) !important;
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--ticker-trend-color) 18%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg-card) 94%, transparent) !important;
  box-shadow:
    0 12px 24px color-mix(in srgb, #020617 62%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card .price-label.top-price-tag {
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent) !important;
  border-color: color-mix(in srgb, var(--ticker-trend-color) 42%, var(--border-bright) 58%) !important;
  color: color-mix(in srgb, var(--ticker-trend-color) 72%, #ffffff 28%) !important;
}

/* ===== HEADER ACTION FIT + LOCK POSITION TUNE ===== */
.top-bar.top-bar-redesign {
  position: relative !important;
  padding-right: 52px !important;
  padding-bottom: 14px !important;
}

.top-bar.top-bar-redesign .top-actions {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 0 !important;
}

.top-bar.top-bar-redesign .top-actions .btn-run-forecast {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 0 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  gap: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(90deg, #22d3ee, #3b82f6) !important;
  border: 1px solid color-mix(in srgb, #38bdf8 62%, #ffffff 38%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px -10px rgba(14, 116, 144, 0.62) !important;
}

.top-bar.top-bar-redesign .top-actions .btn-run-forecast:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 26px -12px rgba(14, 116, 144, 0.74) !important;
}

.top-bar.top-bar-redesign .top-actions .btn-run-forecast .action-btn-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.top-bar.top-bar-redesign .price-cluster {
  align-self: flex-start !important;
  padding-top: 2px !important;
}

.top-bar.top-bar-redesign .top-price-card {
  margin-top: -2px !important;
}

.top-bar.top-bar-redesign .top-actions .btn-run-forecast .action-btn-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn {
  position: absolute !important;
  right: 10px !important;
  bottom: 8px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 4 !important;
  border: 1px solid #dbe4ee !important;
  background: #ffffff !important;
  color: #64748b !important;
  box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.42) !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn .icon-lock-toggle {
  width: 13px !important;
  height: 13px !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn:hover {
  border-color: #c7d2e0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn.is-locked {
  border-color: #334155 !important;
  background: #1e293b !important;
  color: #ffffff !important;
}

.top-bar.top-bar-redesign > .top-header-lock-btn.is-locked:hover {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign > .top-header-lock-btn:not(.is-locked) {
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent) !important;
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent) !important;
  color: color-mix(in srgb, var(--text-muted) 84%, #cbd5e1 16%) !important;
}

/* ===== DASHBOARD KPI CARDS (NEW 1:1 LOOK) ===== */
@keyframes dashboardCardReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashboardTensorPulse {
  0%, 100% { opacity: 0.22; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes dashboardLiveHeartbeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.5; }
}

@keyframes dashboardPriceTickUp {
  0% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes dashboardPriceTickDown {
  0% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

#page-dashboard .dashboard-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px !important;
}

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card {
  --kpi-tone: var(--green);
  position: relative;
  overflow: hidden;
  min-height: 230px !important;
  height: 230px;
  border-radius: 24px !important;
  padding: 24px !important;
  border: 1px solid color-mix(in srgb, var(--kpi-tone) 18%, var(--border-bright) 82%) !important;
  background: color-mix(in srgb, var(--bg-surface) 98%, #ffffff 2%) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, #0f172a 10%, transparent) !important;
  display: flex;
  flex-direction: column;
  animation: dashboardCardReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 1;
  transition: box-shadow 0.35s ease;
}

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, #0f172a 10%, transparent) !important;
}

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.metric-price { animation-delay: 0.1s; }
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.metric-signal { animation-delay: 0.2s; }
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.metric-vix { animation-delay: 0.3s; }

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.metric-price,
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.tone-bull.metric-price,
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card[data-tone='bull'].metric-price { --kpi-tone: var(--green); }

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.metric-price.tone-bear,
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.metric-price[data-tone='bear'] { --kpi-tone: var(--red); }

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.metric-signal,
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.metric-vix { --kpi-tone: var(--green); }

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.tone-bull,
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card[data-tone='bull'] { --kpi-tone: var(--green); }

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.tone-bear,
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card[data-tone='bear'] { --kpi-tone: var(--red); }

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.tone-neutral,
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card[data-tone='neutral'] { --kpi-tone: var(--orange); }

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card.tone-info,
#page-dashboard .dashboard-hero-metrics .dashboard-stat-card[data-tone='info'] { --kpi-tone: var(--cyan); }

#page-dashboard .dashboard-widget-glow {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 128px;
  pointer-events: none;
  opacity: 0.2;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--kpi-tone) 36%, transparent), transparent);
}

#page-dashboard .dashboard-widget-head,
#page-dashboard .dashboard-widget-main,
#page-dashboard .dashboard-widget-footer {
  position: relative;
  z-index: 2;
}

#page-dashboard .dashboard-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#page-dashboard .dashboard-widget-head .stat-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: #64748b !important;
}

#page-dashboard .dashboard-stat-tag {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--kpi-tone) 22%, var(--border-bright) 78%);
  background: color-mix(in srgb, var(--bg-surface) 95%, #ffffff 5%);
  color: color-mix(in srgb, var(--kpi-tone) 80%, var(--text-secondary) 20%);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.12em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: uppercase;
}

#page-dashboard .dashboard-stat-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kpi-tone) 92%, white 8%);
  animation: dashboardLiveHeartbeat 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

#page-dashboard .dashboard-widget-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

#page-dashboard .dashboard-widget-main .stat-value {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(38px, 3.1vw, 44px) !important;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--kpi-tone) 86%, var(--text-primary) 14%);
}

#page-dashboard .dashboard-widget-footer {
  margin-top: auto;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-bright) 84%, #ffffff 16%);
  background: color-mix(in srgb, var(--bg-surface) 90%, #ffffff 10%);
  box-shadow: 0 1px 2px color-mix(in srgb, #0f172a 6%, transparent);
}

#page-dashboard .dashboard-widget-footer.stat-sub,
#page-dashboard #dashPriceChange {
  min-height: 44px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--kpi-tone) 76%, var(--text-secondary) 24%);
  text-align: center !important;
}

#page-dashboard .dashboard-widget-bg-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.85;
  color: color-mix(in srgb, var(--kpi-tone) 86%, transparent);
  transition: color 1s ease;
}

#page-dashboard .dashboard-price-wave-live {
  position: absolute;
  inset: 0;
}

#page-dashboard .dashboard-price-wave-live svg {
  width: 100%;
  height: 100%;
  display: block;
}

#page-dashboard .dashboard-price-wave-area {
  transition: d 0.5s linear;
}

#page-dashboard .dashboard-price-wave-line {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 0.5s linear, stroke 1s ease;
}

#page-dashboard .dashboard-price-wave-stop {
  transition: stop-color 1s ease;
}

#page-dashboard .dashboard-widget-main-signal {
  justify-content: space-between;
  gap: 16px;
}

#page-dashboard .dashboard-widget-main-signal .stat-value {
  font-size: clamp(36px, 3vw, 44px) !important;
}

#page-dashboard .dashboard-tensor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--kpi-tone) 24%, transparent);
  background: color-mix(in srgb, var(--kpi-tone) 10%, transparent);
}

#page-dashboard .dashboard-tensor-grid span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--kpi-tone) 85%, white 15%);
  opacity: 0.3;
  animation: dashboardTensorPulse 2s ease-in-out infinite;
}

#page-dashboard .dashboard-tensor-grid span:nth-child(1) { animation-delay: 0s; }
#page-dashboard .dashboard-tensor-grid span:nth-child(2) { animation-delay: 0.15s; }
#page-dashboard .dashboard-tensor-grid span:nth-child(3) { animation-delay: 0.30s; }
#page-dashboard .dashboard-tensor-grid span:nth-child(4) { animation-delay: 0.45s; }
#page-dashboard .dashboard-tensor-grid span:nth-child(5) { animation-delay: 0.60s; }
#page-dashboard .dashboard-tensor-grid span:nth-child(6) { animation-delay: 0.75s; }
#page-dashboard .dashboard-tensor-grid span:nth-child(7) { animation-delay: 0.90s; }
#page-dashboard .dashboard-tensor-grid span:nth-child(8) { animation-delay: 1.05s; }
#page-dashboard .dashboard-tensor-grid span:nth-child(9) { animation-delay: 1.20s; }

#page-dashboard .dashboard-widget-footer-signal {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#page-dashboard .dashboard-signal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
}

#page-dashboard .dashboard-signal-row span {
  color: #64748b;
  font-weight: 600;
}

#page-dashboard .dashboard-signal-row strong {
  color: color-mix(in srgb, var(--kpi-tone) 82%, var(--text-primary) 18%);
  font-weight: 900;
}

#page-dashboard .dashboard-signal-row-sep {
  height: 1px;
  width: 100%;
  background: color-mix(in srgb, var(--border-bright) 85%, transparent);
}

#page-dashboard .dashboard-signal-vol-annual {
  margin-left: 4px;
  color: color-mix(in srgb, var(--kpi-tone) 65%, #94a3b8 35%);
  font-weight: 700;
}

#page-dashboard .dashboard-widget-main-vix {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  margin-top: 2px;
}

#page-dashboard .dashboard-vix-topline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

#page-dashboard .dashboard-vix-regime {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kpi-tone) 86%, var(--text-primary) 14%);
  margin-bottom: 5px;
}

#page-dashboard .dashboard-vix-track-wrap {
  position: relative;
  padding-top: 10px;
}

#page-dashboard .dashboard-vix-needle {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--kpi-tone) 88%, var(--text-primary) 12%);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}

#page-dashboard .dashboard-vix-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#page-dashboard .dashboard-vix-track .low { background: color-mix(in srgb, var(--green) 80%, white 20%); }
#page-dashboard .dashboard-vix-track .med { background: color-mix(in srgb, var(--gold) 86%, white 14%); }
#page-dashboard .dashboard-vix-track .high { background: color-mix(in srgb, var(--red) 82%, white 18%); }

#page-dashboard .dashboard-vix-labels {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

#page-dashboard .dashboard-vix-labels span:last-child {
  color: color-mix(in srgb, var(--red) 80%, #fb7185 20%);
}

#page-dashboard .dashboard-widget-footer-vix {
  min-height: 44px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#page-dashboard .dashboard-widget-footer-vix span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

#page-dashboard .dashboard-widget-footer-vix strong {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 900;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-dashboard .dashboard-widget-footer-vix strong .is-risk {
  color: color-mix(in srgb, var(--red) 86%, var(--text-primary) 14%);
}

#page-dashboard #dashPrice.flash-green {
  animation: dashboardPriceTickUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#page-dashboard #dashPrice.flash-red {
  animation: dashboardPriceTickDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-hero-metrics .dashboard-stat-card {
  background: color-mix(in srgb, var(--bg-card) 95%, transparent) !important;
  border-color: color-mix(in srgb, var(--kpi-tone) 28%, var(--border-bright) 72%) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, #020617 40%, transparent) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-widget-footer {
  background: color-mix(in srgb, var(--bg-hover) 88%, var(--bg-card) 12%);
  border-color: color-mix(in srgb, var(--kpi-tone) 26%, var(--border-bright) 74%);
}

@media (prefers-reduced-motion: reduce) {
  #page-dashboard .dashboard-price-wave-area,
  #page-dashboard .dashboard-price-wave-line,
  #page-dashboard .dashboard-price-wave-stop {
    transition: none !important;
  }
}

@media (max-width: 1200px) {
  #page-dashboard .dashboard-hero-metrics {
    grid-template-columns: 1fr;
    gap: 14px !important;
  }

  #page-dashboard .dashboard-hero-metrics .dashboard-stat-card {
    height: auto;
    min-height: 214px !important;
  }
}

/* ===== Week Ahead Forecast (React 1:1 look) ===== */
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell {
  padding: 8px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .week-ahead-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin: 0 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 14px -16px rgba(15, 23, 42, 0.18);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .week-ahead-title {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .week-ahead-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: #475569;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .week-ahead-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin: 0 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 14px -16px rgba(15, 23, 42, 0.18);
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .week-ahead-title {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .week-ahead-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: #475569;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .week-ahead-header,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .week-ahead-header {
  border-color: rgba(148, 163, 184, 0.24);
  background: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
  padding: 14px;
  margin: 0 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 28px;
  background: #ffffff;
  margin-top: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
  --dash-card-tone: #f43f5e;
  min-width: 0;
  min-height: 220px;
  border-radius: 28px;
  padding: 16px 14px 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transform: none;
  opacity: 1;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget.rose { --dash-card-tone: #f43f5e; }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget.bull { --dash-card-tone: #10b981; }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget.amber { --dash-card-tone: #f59e0b; }

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget.selected {
  background: #ffffff;
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #94a3b8;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-date {
  margin-top: 2px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--dash-card-tone) 12%, #ffffff 88%);
  color: var(--dash-card-tone);
  font-size: 16px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-price {
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-move {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 12px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-price.rose,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-move.rose { color: #f43f5e; }

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-price.bull,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-move.bull { color: #10b981; }

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-price.amber,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-move.amber { color: #f59e0b; }

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-prob-mini {
  width: 100%;
  margin: 4px 0 14px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-prob-mini-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: #e2e8f0;
  box-shadow: inset 0 1px 1px rgba(148, 163, 184, 0.18);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-prob-mini-seg {
  height: 100%;
  transition: width 520ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-prob-mini-seg.bull {
  background: #10b981;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-prob-mini-seg.neutral {
  background: #f59e0b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-prob-mini-seg.bear {
  background: #f43f5e;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-rec {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: #f1f5f9;
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-selected-ring {
  border-radius: 28px;
  border: 2px solid color-mix(in srgb, var(--dash-card-tone) 18%, transparent);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
  margin-top: 6px;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
  padding: 20px 18px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-main-title {
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: #1e293b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-badges {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip {
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #f1f5f9;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.slate { background: #f1f5f9; color: #334155; }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.amber { background: #fffbeb; color: #d97706; border-color: rgba(245, 158, 11, 0.22); }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.rose { background: #fff1f2; color: #e11d48; border-color: rgba(244, 63, 94, 0.2); }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.bull { background: #ecfdf5; color: #059669; border-color: rgba(16, 185, 129, 0.22); }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.outline { background: transparent; }

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-grid {
  margin-top: 6px;
  margin-bottom: 18px;
  gap: 12px;
  align-items: stretch;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-kpi {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 6px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-kpi-val {
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin: 0;
  line-height: 1.02;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.bull { color: #059669; }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.neutral { color: #d97706; }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.bear { color: #e11d48; }

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-split {
  height: 12px;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .prob-seg-bull { background: #10b981; }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .prob-seg-neutral { background: #f59e0b; }
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .prob-seg-bear { background: #f43f5e; }

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-split .prob-seg-bull,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-split .prob-seg-neutral,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-split .prob-seg-bear {
  transition: width 640ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-range-row {
  margin-top: 8px;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-range-pill {
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  min-height: 26px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 600;
  color: #475569;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-range-pill strong {
  color: #0f172a;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-range-pill.risk-low {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-reason-list {
  margin-top: 10px;
  border-top: 0;
  padding-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  padding: 10px;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot {
  margin: 10px 0 10px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: #edf2f8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.42);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-title {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #475569;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: #334155;
  white-space: nowrap;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-type-pill.bull {
  color: #047857;
  border-color: rgba(4, 120, 87, 0.25);
  background: #ecfdf5;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-type-pill.rose {
  color: #be123c;
  border-color: rgba(190, 18, 60, 0.25);
  background: #fff1f2;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-type-pill.amber {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.24);
  background: #fffbeb;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-strike {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #0f172a;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-item {
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.72);
  min-height: 62px;
  padding: 7px 10px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #64748b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value {
  margin-top: 3px;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.16;
  color: #0f172a;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value.is-date {
  font-size: clamp(15px, 1.2vw, 19px);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-inline-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #ffffff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  margin: 0 3px;
  text-transform: uppercase;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-inline-type-pill.bull {
  color: #047857;
  border-color: rgba(4, 120, 87, 0.25);
  background: #ecfdf5;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-inline-type-pill.rose {
  color: #be123c;
  border-color: rgba(190, 18, 60, 0.25);
  background: #fff1f2;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-inline-type-pill.amber {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.24);
  background: #fffbeb;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value.is-premium {
  color: #b45309;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value.is-target {
  color: #047857;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value.is-rr {
  color: #0f172a;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value.is-band {
  color: #0f766e;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-item.is-premium {
  border-color: rgba(180, 83, 9, 0.2);
  background: rgba(255, 247, 237, 0.78);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-item.is-target {
  border-color: rgba(4, 120, 87, 0.18);
  background: rgba(236, 253, 245, 0.76);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-item.is-band {
  border-color: rgba(15, 118, 110, 0.2);
  background: rgba(240, 253, 250, 0.78);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-insight-icon {
  margin-top: 1px;
  color: #94a3b8;
  font-size: 16px;
  display: inline-flex;
}

@media (max-width: 980px) {
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    padding: 8px 10px 10px;
    margin: 0 6px 10px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
    flex: 0 0 168px;
    min-height: 220px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-kpi {
    min-height: 92px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-reason-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
    padding: 14px 12px;
    border-radius: 18px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-main-title {
    font-size: 16px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-kpi-val {
    font-size: clamp(22px, 6vw, 28px);
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot {
    margin: 10px 0 8px;
    padding: 10px;
    border-radius: 16px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-head {
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-main {
    font-size: 13px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-strike {
    font-size: 16px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-item {
    min-height: 0;
    border-radius: 13px;
    padding: 8px 10px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value {
    font-size: clamp(13px, 4.8vw, 16px);
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value.is-date {
    font-size: clamp(14px, 5.1vw, 18px);
  }

}

/* ===== Dashboard Day Detail Snapshot Refresh ===== */
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
  margin-top: 10px;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.045);
  padding: 18px;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-detail-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-detail-main-title {
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #1e293b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge.is-success {
  border-color: #c7eed8;
  background: #ecfdf3;
  color: #047857;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge.is-warning {
  border-color: #f7dd9d;
  background: #fffbeb;
  color: #b45309;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge.is-danger {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-open-btn {
  flex-shrink: 0;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #0f172a;
  border: 1px solid #0f172a;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  font-size: 11px;
  font-weight: 600;
  gap: 6px;
  transition: background-color 160ms ease, border-color 160ms ease;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-open-btn:hover,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-open-btn:active {
  transform: none;
  background: #111827;
  border-color: #111827;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-open-btn .dash-open-icon {
  width: 13px;
  height: 13px;
  font-size: 11px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-trade-box {
  margin: 0;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  box-shadow: none;
  padding: 16px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-option-snapshot-head {
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-option-snapshot-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-option-snapshot-main {
  color: #334155;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-option-type-pill {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border-width: 1px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card {
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 12px 14px;
  min-height: 72px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card.is-success {
  border-color: #c7eed8;
  background: rgba(236, 253, 243, 0.72);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card.is-warning {
  border-color: #fde1bc;
  background: rgba(255, 247, 237, 0.82);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #94a3b8;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-value {
  margin-top: 4px;
  font-size: clamp(18px, 1.35vw, 23px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1e293b;
  font-weight: 700;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card.is-success .dash-day-snapshot-stat-value {
  color: #047857;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card.is-warning .dash-day-snapshot-stat-value {
  color: #b45309;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-value.is-compact {
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.15;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-value.is-meta {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.18;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-strip {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 16px 14px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  text-align: center;
  opacity: 1;
  transform: none;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-metrics.is-animate-in .dash-day-snapshot-market-card {
  opacity: 0;
  transform: translateY(10px);
  animation: dashDaySnapshotCardIn 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--dash-entry-delay, 0ms);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 10px;
  color: #94a3b8;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-icon,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-icon svg {
  width: 16px;
  height: 16px;
  display: inline-flex;
  flex-shrink: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-label {
  max-width: 92px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value {
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #0f172a;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value.tone-bull {
  color: #059669;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value.tone-bear {
  color: #e11d48;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value.tone-neutral {
  color: #d97706;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px 14px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  opacity: 1;
  transform: none;
  font-variant-numeric: tabular-nums;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-shell.is-animate-in .dash-day-snapshot-sentiment-stat {
  opacity: 0;
  transform: translateY(8px);
  animation: dashDaySnapshotCardIn 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--dash-entry-delay, 0ms);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-bull {
  align-items: flex-start;
  text-align: left;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-neutral {
  align-items: center;
  text-align: center;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-bear {
  align-items: flex-end;
  text-align: right;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #64748b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-value {
  font-size: clamp(18px, 1.55vw, 28px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-bull .dash-day-snapshot-sentiment-value {
  color: #047857;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-neutral .dash-day-snapshot-sentiment-value {
  color: #b45309;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-bear .dash-day-snapshot-sentiment-value {
  color: #be123c;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-fill {
  height: 100%;
  width: 0;
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-fill.is-bull {
  background: #10b981;
  transition-delay: 0ms;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-fill.is-neutral {
  background: #f59e0b;
  transition-delay: 150ms;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.72);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-fill.is-bear {
  background: #f43f5e;
  transition-delay: 300ms;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.72);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-kpi-grid {
  margin: 0;
  gap: 12px;
  align-items: start;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-kpi {
  min-height: 0;
  padding: 2px 8px;
  gap: 8px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-val {
  font-size: clamp(24px, 1.7vw, 30px);
  letter-spacing: -0.04em;
  color: #1e293b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-val.tone-bull {
  color: #059669;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-val.tone-bear {
  color: #e11d48;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-val.tone-neutral {
  color: #d97706;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-label-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 12px;
  gap: 14px;
  align-items: end;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bull {
  align-items: flex-start;
  text-align: left;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--neutral {
  align-items: center;
  text-align: center;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bear {
  align-items: flex-end;
  text-align: right;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #64748b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary-value {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1;
  letter-spacing: -0.03em;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bull .dash-prob-summary-value {
  color: #059669;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--neutral .dash-prob-summary-value {
  color: #d97706;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bear .dash-prob-summary-value {
  color: #e11d48;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split {
  height: 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #e5e7eb;
  box-shadow: none;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-bull,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-neutral,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-bear {
  position: relative;
  overflow: hidden;
  transition: none;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-neutral,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-bear {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.6);
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-bull::after,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-neutral::after,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-bear::after {
  content: none;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-range-row {
  margin-top: 0;
  gap: 8px;
  align-items: center;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill strong {
  color: #1e293b;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill.risk-low {
  border-color: #c7eed8;
  background: #ecfdf3;
  color: #047857;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill.risk-medium {
  border-color: #f7dd9d;
  background: #fffbeb;
  color: #b45309;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill.risk-high {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-risk-icon {
  width: 14px;
  height: 14px;
  margin-right: 0;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-risk-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-note-grid {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-note {
  align-items: flex-start;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 13px 14px;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-note-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #64748b;
  font-size: 16px;
}

@keyframes dashDaySnapshotCardIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashDaySnapshotSweep {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card,
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat {
    animation: none;
    opacity: 1;
    transform: none;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-fill {
    transition: none;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-bull::after,
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-neutral::after,
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-bear::after {
    animation: none;
  }
}

@media (max-width: 980px) {
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
    padding: 16px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-detail-main-title {
    font-size: 20px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-note-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
    padding: 14px 12px;
    border-radius: 16px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell {
    gap: 14px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-head {
    flex-direction: column;
    align-items: stretch;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-detail-main-title {
    font-size: 18px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-open-btn {
    width: fit-content;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-trade-box {
    padding: 14px;
    border-radius: 14px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-grid {
    grid-template-columns: 1fr;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card {
    min-height: 0;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-strip {
    gap: 14px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-metrics {
    gap: 12px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card {
    min-height: 90px;
    padding: 14px 10px;
    border-radius: 14px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-label {
    max-width: 88px;
    font-size: 10px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value {
    font-size: clamp(22px, 7vw, 30px);
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-shell {
    gap: 12px;
    padding: 14px 12px 12px;
    border-radius: 14px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stats {
    gap: 8px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-label {
    font-size: 11px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-value {
    font-size: clamp(16px, 5vw, 22px);
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-track {
    height: 12px;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill {
    width: 100%;
    justify-content: flex-start;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-note {
    font-size: 12px;
    padding: 12px;
  }
}

/* ===== Primary Options Recommendation (React 1:1 look) ===== */
#page-dashboard .dashboard-options-rec-card.options-react-shell {
  padding: 8px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashOptionsRec {
  border-radius: 32px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
  padding: 28px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-card {
  border-radius: 32px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
  padding: 22px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-head {
  margin-bottom: 18px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-title-icon {
  width: 34px;
  height: 34px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-title-icon svg {
  width: 16px;
  height: 16px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-title {
  font-size: 13px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-legend-item {
  font-size: 10px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-columns-label,
#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric-label,
#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric-mobile-label,
#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-stat-label,
#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-day {
  font-size: 9px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-columns {
  grid-template-columns: minmax(154px, auto) minmax(0, 1fr) minmax(104px, auto);
  gap: 16px;
  padding: 0 18px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-columns-metrics {
  gap: 16px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-list {
  gap: 10px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-row {
  grid-template-columns: minmax(154px, auto) minmax(0, 1fr) minmax(104px, auto);
  gap: 16px;
  padding: 16px 18px;
  border-radius: 24px;
  background: rgba(248, 250, 252, 0.55);
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-date {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  color: #243149;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-day {
  letter-spacing: 0.16em;
  color: #8fa0b7;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-dir {
  min-height: 28px;
  padding: 0 11px;
  font-size: 9px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-dir-icon,
#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-dir-icon svg {
  width: 13px;
  height: 13px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric {
  gap: 12px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-track,
#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-risk-track {
  height: 9px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric-value {
  font-size: 13px;
  min-width: 50px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-right {
  gap: 6px;
  padding-left: 16px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-stat-value {
  font-size: 11px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.8);
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-badge-main {
  background: #fff1f2;
  border-color: rgba(244, 63, 94, 0.2);
  color: #e11d48;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-badge-outlook strong.rose { color: #e11d48; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-badge-outlook strong.emerald { color: #059669; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-badge-outlook strong.amber { color: #d97706; }

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-grid {
  display: grid;
  gap: 12px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-grid-primary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-grid-secondary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-box {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  min-height: 90px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #94a3b8;
  margin-bottom: 6px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.1;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-value.indigo { color: #4f46e5; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-value.amber { color: #d97706; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-value.rose { color: #e11d48; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-value.emerald { color: #059669; }

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 18px;
  border: 1px solid rgba(244, 63, 94, 0.16);
  background: rgba(255, 241, 242, 0.6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  padding: 16px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffe4e6;
  color: #e11d48;
  font-size: 18px;
  flex-shrink: 0;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #e11d48;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  color: #475569;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-copy strong {
  font-weight: 700;
  color: #0f172a;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-copy strong.rose { color: #e11d48; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-copy strong.emerald { color: #059669; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-copy strong.amber { color: #d97706; }

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-snapshot {
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: #edf2f8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 18px 20px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.42);
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #475569;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-main {
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1;
  white-space: nowrap;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  background: rgba(255, 255, 255, 0.72);
  padding: 12px 14px;
  min-height: 84px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #475569;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item-value {
  margin-top: 6px;
  font-size: clamp(22px, 2.8vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.15;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-table-wrap {
  margin-top: 2px;
  width: 100%;
  overflow-x: auto;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-table {
  min-width: 700px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row.por-head {
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0;
  padding-bottom: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #94a3b8;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row:not(.por-head) {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  transition: background-color 160ms ease;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row:not(.por-head):hover {
  background: rgba(248, 250, 252, 0.85);
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row .por-day {
  font-weight: 700;
  color: #475569;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row .por-bias {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row .por-bias.rose { color: #e11d48; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row .por-bias.emerald { color: #059669; }
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-row .por-bias.amber { color: #d97706; }

@media (max-width: 1180px) {
  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-grid-primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #page-dashboard .dashboard-options-rec-card.options-react-shell #dashOptionsRec {
    padding: 18px 14px;
    border-radius: 24px;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-card {
    padding: 18px 14px;
    border-radius: 24px;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 15px 14px;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric {
    padding: 8px 9px;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-header-row {
    align-items: flex-start;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-grid-primary,
  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-value {
    font-size: 20px;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-main {
    font-size: clamp(28px, 9vw, 40px);
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-grid {
    grid-template-columns: 1fr;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item {
    min-height: 0;
  }

  #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item-value {
    font-size: clamp(20px, 7vw, 32px);
  }
}

/* ===== Week Ahead Final Overrides (anti-bleed) ===== */
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-grid {
  background: transparent !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-kpi,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-kpi {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-head {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-open-btn {
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  box-shadow: none !important;
  filter: none !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-open-btn:hover,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-open-btn:active {
  box-shadow: none !important;
  filter: none !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  white-space: nowrap !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.bull {
  justify-self: start !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.neutral {
  justify-self: center !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.bear {
  justify-self: end !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.bull {
  border-color: rgba(16, 185, 129, 0.24) !important;
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.neutral {
  border-color: rgba(245, 158, 11, 0.24) !important;
  background: rgba(245, 158, 11, 0.1) !important;
  color: #d97706 !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span.bear {
  border-color: rgba(244, 63, 94, 0.24) !important;
  background: rgba(244, 63, 94, 0.1) !important;
  color: #e11d48 !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-label-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: clamp(8px, 2vw, 14px) !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  font-variant-numeric: tabular-nums;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bull {
  align-items: flex-start !important;
  text-align: left !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--neutral {
  align-items: center !important;
  text-align: center !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bear {
  align-items: flex-end !important;
  text-align: right !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary-label {
  white-space: nowrap !important;
  font-size: clamp(11px, 1.2vw, 12px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #64748b !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary-value {
  font-size: clamp(16px, 1.4vw, 22px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bull .dash-prob-summary-value {
  color: #047857 !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--neutral .dash-prob-summary-value {
  color: #b45309 !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bear .dash-prob-summary-value {
  color: #be123c !important;
}

/* ===== Composite Signal Meter (React conversion / anti-bleed) ===== */
#page-dashboard .dashboard-composite-card.composite-react-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .card-title,
#page-dashboard .dashboard-composite-card.composite-react-shell .dashboard-panel-subtitle {
  display: none !important;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .composite-react-header {
  padding: 0 8px;
  margin-bottom: 12px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .composite-react-title {
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: #94a3b8;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .composite-react-title i {
  font-size: 14px;
  color: #6366f1;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .composite-react-subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
}

#page-dashboard .dashboard-composite-card.composite-react-shell #signalMeterContainer.signal-meter-react-shell {
  border-radius: 32px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
  padding: 22px;
  position: relative;
  overflow: hidden;
}

#page-dashboard .dashboard-composite-card.composite-react-shell #signalMeterContainer.signal-meter-react-shell .signal-meter-hero-bg,
#page-dashboard .dashboard-composite-card.composite-react-shell #signalMeterContainer.signal-meter-react-shell .signal-meter-band-grid {
  display: none !important;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-react-bias-card {
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  padding: 16px;
  margin-bottom: 14px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-kicker {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-scale-top {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter {
  height: 14px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(90deg, #f43f5e, #f59e0b 50%, #10b981);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18);
  position: relative;
  overflow: visible;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-band-centerline {
  background: rgba(255, 255, 255, 0.62);
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-needle {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid var(--signal-tone, #f43f5e);
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 700ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms ease;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-needle-core {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--signal-tone, #f43f5e);
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-axis {
  color: #94a3b8;
  font-size: 10px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-insight-grid.signal-insight-grid-react {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-insight-grid.signal-insight-grid-react .signal-insight {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  padding: 12px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-indicators.signal-indicators-react {
  gap: 10px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-indicators.signal-indicators-react .ind-row {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  padding: 12px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-react-insight-panel {
  margin-top: 14px !important;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-footer.signal-meter-footer-react {
  margin-top: 14px;
  gap: 8px;
}

#page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-footer.signal-meter-footer-react .signal-meter-chip {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

@media (max-width: 1100px) {
  #page-dashboard .dashboard-composite-card.composite-react-shell .signal-insight-grid.signal-insight-grid-react {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #page-dashboard .dashboard-composite-card.composite-react-shell #signalMeterContainer.signal-meter-react-shell {
    padding: 16px;
    border-radius: 24px;
  }

  #page-dashboard .dashboard-composite-card.composite-react-shell .signal-insight-grid.signal-insight-grid-react {
    grid-template-columns: 1fr;
  }
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-glow {
  display: none !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
  background: #ffffff !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

/* ===== FLAT BUTTON OVERRIDE (KEEP FORECAST RUN GRADIENT) ===== */
:where(button[class*="btn"], a[class*="btn"]):not(.btn-run-forecast):not(.action-btn-run):not(.action-btn-run-modern):not(.ultron-access-primary-btn) {
  background-image: none !important;
}

:where(button[class*="btn"], a[class*="btn"]):not(.btn-run-forecast):not(.action-btn-run):not(.action-btn-run-modern):not(.ultron-access-primary-btn)::before,
:where(button[class*="btn"], a[class*="btn"]):not(.btn-run-forecast):not(.action-btn-run):not(.action-btn-run-modern):not(.ultron-access-primary-btn)::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.btn-primary:not(.btn-run-forecast),
.tracking-log-modern-export:not(.btn-run-forecast),
.tracking-add-btn:not(.btn-run-forecast),
.auth-main-btn:not(.btn-run-forecast),
.auth-gradient-btn:not(.btn-run-forecast),
#feedbackSaveBtn:not(.btn-run-forecast),
.system-updates-admin-btn:not(.btn-run-forecast) {
  background: #0ea5e9 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.btn-primary:not(.btn-run-forecast):hover,
.tracking-log-modern-export:not(.btn-run-forecast):hover,
.tracking-add-btn:not(.btn-run-forecast):hover,
.auth-main-btn:not(.btn-run-forecast):hover,
.auth-gradient-btn:not(.btn-run-forecast):hover,
#feedbackSaveBtn:not(.btn-run-forecast):hover,
.system-updates-admin-btn:not(.btn-run-forecast):hover {
  background: #0284c7 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
}

.btn-danger:not(.btn-run-forecast),
.trade-action-btn.danger:not(.btn-run-forecast),
.history-delete-btn:not(.btn-run-forecast),
.pred-layout-trash:not(.btn-run-forecast),
.all-forecast-trash-btn:not(.btn-run-forecast),
.profile-hub-sidebar-btn.signout:not(.btn-run-forecast) {
  background: #ef4444 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.btn-danger:not(.btn-run-forecast):hover,
.trade-action-btn.danger:not(.btn-run-forecast):hover,
.history-delete-btn:not(.btn-run-forecast):hover,
.pred-layout-trash:not(.btn-run-forecast):hover,
.all-forecast-trash-btn:not(.btn-run-forecast):hover,
.profile-hub-sidebar-btn.signout:not(.btn-run-forecast):hover {
  background: #dc2626 !important;
  border-color: #be123c !important;
  color: #ffffff !important;
}

.sidebar-quick-item,
.sidebar-quick-item-btn {
  background: #ffffff !important;
  background-image: none !important;
}

/* ===== GLOBAL FONT NORMALIZATION ===== */
#legacy-page-root,
#legacy-page-root * {
  font-family: var(--font-sans) !important;
}

#legacy-page-root .ph,
#legacy-page-root [class^="ph-"],
#legacy-page-root [class*=" ph-"] {
  font-family: "Phosphor" !important;
}

/* ===== Complete 7-Day Report (React 1:1 style) ===== */
#page-forecast .complete-report-react-shell {
  border-radius: 24px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  padding: 0 !important;
}

#page-forecast .complete-report-react-shell > .card-title {
  display: none !important;
}

#page-forecast .complete-report-react-shell #fullReportArea {
  padding: 18px 20px 20px;
}

.reportv3-shell {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.reportv3-header {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 14px;
}

.reportv3-header-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #334155;
}

.reportv3-header-icon,
.reportv3-subtitle-icon,
.reportv3-day-title-icon,
.reportv3-panel-icon,
.reportv3-btn-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.reportv3-header-icon {
  color: #64748b;
}

.reportv3-params-wrap {
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reportv3-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #94a3b8;
}

.reportv3-subtitle-icon {
  width: 14px;
  height: 14px;
}

.reportv3-params-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.reportv3-param-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 88px;
}

.reportv3-param-card.is-wide {
  grid-column: span 2;
  min-height: 116px;
  background: #fbfdff;
}

.reportv3-param-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.reportv3-param-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  color: #0f172a;
}

.reportv3-param-value.compact {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.reportv3-param-sub {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
}

.reportv3-param-desc {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  color: #475569;
}

.reportv3-param-subline {
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
  color: #94a3b8;
}

.reportv3-param-card.tone-muted .reportv3-param-value,
.reportv3-param-card.tone-muted .reportv3-param-desc {
  color: #475569;
}

.reportv3-param-card.tone-bull .reportv3-param-value,
.reportv3-param-card.tone-bull .reportv3-param-desc {
  color: #059669;
}

.reportv3-param-card.tone-bear .reportv3-param-value,
.reportv3-param-card.tone-bear .reportv3-param-desc {
  color: #e11d48;
}

.reportv3-param-card.tone-neutral .reportv3-param-value,
.reportv3-param-card.tone-neutral .reportv3-param-desc {
  color: #d97706;
}

.reportv3-day-card {
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.reportv3-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
  background: rgba(248, 250, 252, 0.76);
}

.reportv3-day-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.reportv3-day-title-icon {
  color: #64748b;
}

.reportv3-bias-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reportv3-bias-pill.tone-bull {
  color: #059669;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.reportv3-bias-pill.tone-bear {
  color: #e11d48;
  background: #fff1f2;
  border-color: #fecdd3;
}

.reportv3-bias-pill.tone-neutral {
  color: #d97706;
  background: #fffbeb;
  border-color: #fde68a;
}

.reportv3-day-body {
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.reportv3-panel {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  overflow: hidden;
}

.reportv3-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #64748b;
}

.reportv3-panel-icon {
  color: #64748b;
}

.reportv3-panel-body {
  padding: 6px 16px;
}

.reportv3-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f8fafc;
}

.reportv3-panel-row:last-child {
  border-bottom: none;
}

.reportv3-panel-label {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.reportv3-panel-value {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}

.reportv3-panel-value.is-strong {
  font-weight: 800;
}

.reportv3-panel-value.tone-bull {
  color: #10b981;
}

.reportv3-panel-value.tone-bear {
  color: #f43f5e;
}

.reportv3-panel-value.tone-neutral {
  color: #f59e0b;
}

.reportv3-prob-inline,
.reportv3-premium-target {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.reportv3-prob-inline .tone-bull {
  color: #059669;
}

.reportv3-prob-inline .tone-neutral {
  color: #64748b;
}

.reportv3-prob-inline .tone-bear {
  color: #e11d48;
}

.reportv3-prob-inline .sep {
  color: #cbd5e1;
  font-weight: 700;
}

.reportv3-option-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  min-width: 70px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reportv3-option-pill.tone-bull {
  color: #059669;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.reportv3-option-pill.tone-bear {
  color: #e11d48;
  background: #fff1f2;
  border-color: #fecdd3;
}

.reportv3-option-pill.tone-neutral {
  color: #d97706;
  background: #fffbeb;
  border-color: #fde68a;
}

.reportv3-premium-target .premium {
  color: #475569;
}

.reportv3-premium-target .arrow {
  color: #94a3b8;
}

.reportv3-premium-target .target {
  color: #059669;
}

.reportv3-day-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
  flex-wrap: wrap;
}

.reportv3-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reportv3-result-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reportv3-result-pill.correct {
  color: #059669;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.reportv3-result-pill.incorrect {
  color: #e11d48;
  background: #fff1f2;
  border-color: #fecdd3;
}

.reportv3-btn-ghost,
.reportv3-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.reportv3-btn-ghost {
  border: 1px solid #a7f3d0;
  background: transparent;
  color: #059669;
}

.reportv3-btn-ghost:hover {
  background: #ecfdf5;
  border-color: #34d399;
}

.reportv3-btn-link {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d97706;
  cursor: pointer;
}

.reportv3-btn-primary {
  border: none;
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.18);
}

.reportv3-btn-primary:hover {
  background: #1e293b;
}

.reportv3-btn-primary:active,
.reportv3-btn-ghost:active {
  transform: scale(0.98);
}

.reportv3-reverted-note {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d97706;
}

@media (max-width: 1120px) {
  .reportv3-params-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .reportv3-params-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reportv3-param-card.is-wide {
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  #page-forecast .complete-report-react-shell #fullReportArea {
    padding: 14px;
  }

  .reportv3-shell {
    gap: 18px;
  }

  .reportv3-params-wrap,
  .reportv3-day-body,
  .reportv3-day-header,
  .reportv3-day-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .reportv3-day-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .reportv3-day-footer {
    align-items: stretch;
  }

  .reportv3-btn-primary {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .reportv3-params-grid {
    grid-template-columns: 1fr;
  }

  .reportv3-param-card.is-wide {
    grid-column: span 1;
  }

  .reportv3-day-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .reportv3-panel-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .reportv3-panel-value,
  .reportv3-premium-target,
  .reportv3-prob-inline {
    text-align: left;
    justify-content: flex-start;
  }
}

.reportv2-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reportv2-header {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 12px;
}

.reportv2-header-title {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #1e293b;
}

.reportv2-params-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reportv2-subtitle {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
  margin-left: 2px;
}

.reportv2-params-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.reportv2-param-card {
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: rgba(248, 250, 252, 0.78);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reportv2-param-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reportv2-param-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #1e293b;
}

.reportv2-param-value.compact {
  font-size: 12px;
}

.reportv2-param-sub {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

.reportv2-param-card.tone-muted .reportv2-param-value { color: #475569; }
.reportv2-param-card.tone-bull .reportv2-param-value { color: #059669; }
.reportv2-param-card.tone-bear .reportv2-param-value { color: #e11d48; }
.reportv2-param-card.tone-neutral .reportv2-param-value { color: #d97706; }

.reportv2-day-card {
  border-radius: 22px;
  border: 1px solid #e2e8f0;
  background: rgba(248, 250, 252, 0.62);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reportv2-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding-bottom: 10px;
}

.reportv2-day-title {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #1e293b;
  text-transform: uppercase;
}

.reportv2-day-title .sep {
  color: #cbd5e1;
  margin: 0 4px;
}

.reportv2-day-bias-pill {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reportv2-day-bias-pill.tone-bull {
  color: #059669;
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.reportv2-day-bias-pill.tone-bear {
  color: #e11d48;
  background: #fff1f2;
  border-color: #fecdd3;
}

.reportv2-day-bias-pill.tone-neutral {
  color: #d97706;
  background: #fffbeb;
  border-color: #fde68a;
}

.reportv2-day-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.reportv2-day-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px 14px;
}

.reportv2-day-col-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
  text-align: center;
}

.reportv2-day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.reportv2-metric-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 7px;
  min-height: 46px;
  text-align: center;
}

.reportv2-metric-row.full {
  grid-column: span 2;
}

.reportv2-metric-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.reportv2-metric-value {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #1e293b;
  line-height: 1.2;
}

.reportv2-metric-value.tone-neutral { color: #d97706; }

.reportv2-bullbear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.reportv2-bullbear .tone-bull { color: #059669; }
.reportv2-bullbear .tone-bear { color: #e11d48; }
.reportv2-bullbear .sep { color: #cbd5e1; font-weight: 700; }

.reportv2-option-type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #ffffff;
  color: #334155;
  white-space: nowrap;
}

.reportv2-option-type-pill.tone-bull {
  color: #059669;
  border-color: #bbf7d0;
  background: #ecfdf5;
}

.reportv2-option-type-pill.tone-bear {
  color: #e11d48;
  border-color: #fecdd3;
  background: #fff1f2;
}

.reportv2-option-type-pill.tone-neutral {
  color: #d97706;
  border-color: #fde68a;
  background: #fffbeb;
}

.reportv2-premium-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.reportv2-premium-target .premium { color: #475569; }
.reportv2-premium-target .arrow { color: #94a3b8; font-weight: 700; }
.reportv2-premium-target .target { color: #059669; }

.reportv2-day-actions {
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.reportv2-rate-block {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reportv2-rate-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #64748b;
}

.reportv2-rate-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reportv2-rate-btn {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.reportv2-rate-btn i {
  font-size: 12px;
  line-height: 1;
}

.reportv2-rate-btn.correct {
  color: #059669;
  border-color: #bbf7d0;
}

.reportv2-rate-btn.correct:hover,
.reportv2-rate-btn.correct.is-active {
  color: #047857;
  border-color: #10b981;
  background: #ecfdf5;
}

.reportv2-rate-btn.incorrect {
  color: #e11d48;
  border-color: #fecdd3;
}

.reportv2-rate-btn.incorrect:hover,
.reportv2-rate-btn.incorrect.is-active {
  color: #be123c;
  border-color: #f43f5e;
  background: #fff1f2;
}

.reportv2-reverted-note {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d97706;
}

.reportv2-add-btn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #1e293b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.16s ease, transform 0.12s ease;
}

.reportv2-add-btn i {
  font-size: 13px;
  line-height: 1;
}

.reportv2-add-btn:hover {
  background: #0f172a;
}

.reportv2-add-btn:active {
  transform: scale(0.97);
}

@media (max-width: 1120px) {
  .reportv2-params-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #page-forecast .complete-report-react-shell #fullReportArea {
    padding: 14px;
  }

  .reportv2-shell {
    gap: 14px;
  }

  .reportv2-day-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .reportv2-day-col {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .reportv2-day-actions {
    align-items: stretch;
  }

  .reportv2-add-btn {
    width: 100%;
  }

  .reportv2-params-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .reportv2-params-grid,
  .reportv2-day-grid {
    grid-template-columns: 1fr;
  }

  .reportv2-metric-row.full {
    grid-column: span 1;
  }
}

/* ===== Topic Headers (React 1:1 refresh) ===== */
#page-forecast > .section-header.modern-topic-header,
#page-options > .section-header.modern-topic-header,
#page-simulations > .section-header.modern-topic-header,
#page-history > .section-header.modern-topic-header,
#page-price-history > .section-header.modern-topic-header,
#page-tracking .section-header.modern-topic-header.tracking-hero {
  border: 1px solid #e2e8f0 !important;
  border-radius: 22px !important;
  padding: 16px 18px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  margin-bottom: 20px;
}

#page-tracking .section-header.modern-topic-header.tracking-hero::before {
  content: none !important;
  display: none !important;
}

.modern-topic-header .modern-topic-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modern-topic-header .modern-topic-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modern-topic-header .modern-topic-title {
  font-family: var(--font-sans) !important;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #0f172a;
}

.modern-topic-header .modern-topic-subtitle {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}

.modern-topic-header .modern-topic-generated-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}

.modern-topic-header .modern-topic-generated-icon {
  color: #94a3b8;
}

.modern-topic-header .modern-topic-generated-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1;
}

.modern-topic-header .modern-topic-generated-value {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  color: #1e293b;
}

.modern-topic-header .global-tracking-meta.modern-topic-pill-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-top: 1px;
}

.modern-topic-header .global-tracking-meta.modern-topic-pill-row .modern-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #d5dee9;
  background: #f8fafc;
  color: #64748b;
  font-family: var(--font-sans) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.modern-topic-header .modern-topic-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
}

.modern-topic-header .global-tracking-meta.modern-topic-pill-row::-webkit-scrollbar {
  display: none;
}

@media (max-width: 980px) {
  .modern-topic-header .modern-topic-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .modern-topic-header .modern-topic-generated-pill {
    width: auto;
  }
}

/* ===== Mode Terminal Headers ===== */
.topic-terminal-header {
  --topic-accent: #4f46e5;
  --topic-accent-strong: #4338ca;
  --topic-accent-soft: #eef2ff;
  --topic-accent-border: rgba(165, 180, 252, 0.95);
  --topic-accent-shadow: rgba(79, 70, 229, 0.2);
  align-items: stretch;
  gap: 24px;
  margin-bottom: 20px;
}

.topic-terminal-header--forecast {
  --topic-accent: #4f46e5;
  --topic-accent-strong: #4338ca;
  --topic-accent-soft: #eef2ff;
  --topic-accent-border: rgba(165, 180, 252, 0.95);
  --topic-accent-shadow: rgba(79, 70, 229, 0.2);
}

.topic-terminal-header--dashboard {
  --topic-accent: #2563eb;
  --topic-accent-strong: #1d4ed8;
  --topic-accent-soft: #dbeafe;
  --topic-accent-border: rgba(147, 197, 253, 0.95);
  --topic-accent-shadow: rgba(37, 99, 235, 0.2);
}

.topic-terminal-header--options {
  --topic-accent: #059669;
  --topic-accent-strong: #047857;
  --topic-accent-soft: #d1fae5;
  --topic-accent-border: rgba(110, 231, 183, 0.95);
  --topic-accent-shadow: rgba(5, 150, 105, 0.2);
}

.topic-terminal-header--simulations {
  --topic-accent: #d97706;
  --topic-accent-strong: #b45309;
  --topic-accent-soft: #fef3c7;
  --topic-accent-border: rgba(252, 211, 77, 0.95);
  --topic-accent-shadow: rgba(217, 119, 6, 0.2);
}

.topic-terminal-header--history {
  --topic-accent: #7c3aed;
  --topic-accent-strong: #6d28d9;
  --topic-accent-soft: #f3e8ff;
  --topic-accent-border: rgba(216, 180, 254, 0.95);
  --topic-accent-shadow: rgba(124, 58, 237, 0.2);
}

.topic-terminal-header--price-history {
  --topic-accent: #0ea5e9;
  --topic-accent-strong: #0284c7;
  --topic-accent-soft: #f0f9ff;
  --topic-accent-border: rgba(186, 230, 253, 0.95);
  --topic-accent-shadow: rgba(14, 165, 233, 0.2);
}

.topic-terminal-header--tracking {
  --topic-accent: #ef4444;       
  --topic-accent-strong: #dc2626; 
  --topic-accent-soft: #fee2e2;  
  --topic-accent-border: rgba(248, 113, 113, 0.95);
  --topic-accent-shadow: rgba(239, 68, 68, 0.2);
}

.topic-terminal-header-copy {
  flex: 1 1 560px;
}

.topic-terminal-header-panel {
  flex: 1 1 460px;
  min-width: min(100%, 460px);
  max-width: 560px;
}

.topic-terminal-header .topic-terminal-header-icon {
  border-color: color-mix(in srgb, var(--topic-accent) 18%, #e2e8f0 82%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--topic-accent) 10%, #ffffff 90%) 0%,
      color-mix(in srgb, var(--topic-accent) 18%, #e2e8f0 82%) 100%
    );
  color: var(--topic-accent);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--topic-accent) 18%, transparent);
}

.topic-terminal-header .topic-terminal-header-kicker,
.topic-terminal-header .topic-terminal-header-control-kicker,
.topic-terminal-header .topic-terminal-header-status-kicker {
  color: color-mix(in srgb, var(--topic-accent) 72%, #64748b 28%);
}

.topic-terminal-header .topic-terminal-header-text {
  max-width: 660px;
}

.topic-terminal-header-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-terminal-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.topic-terminal-header-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--topic-accent);
}

.topic-terminal-header-control-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.topic-terminal-header-control-card {
  flex: 1 1 auto;
  min-height: 92px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--topic-accent) 2%, #f8fafc 98%) 0%,
      #ffffff 100%
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: grid;
  gap: 10px;
}

.topic-terminal-header-control-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.topic-terminal-header-control-value {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

.topic-terminal-header-control-value strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.topic-terminal-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
}

.topic-terminal-header-btn {
  min-height: 60px;
  min-width: 164px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.18s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.topic-terminal-header-btn:hover {
  transform: translateY(-1px);
}

.topic-terminal-header-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topic-terminal-header-btn.is-primary {
  background: var(--topic-accent);
  border-color: color-mix(in srgb, var(--topic-accent) 84%, transparent);
  color: #ffffff;
  box-shadow: 0 14px 28px var(--topic-accent-shadow);
}

.topic-terminal-header-btn.is-primary:hover {
  background: var(--topic-accent-strong);
  border-color: color-mix(in srgb, var(--topic-accent-strong) 86%, transparent);
  color: #ffffff;
}

.topic-terminal-header-btn.is-secondary:hover {
  border-color: var(--topic-accent-border);
  background: color-mix(in srgb, var(--topic-accent) 4%, #f8fafc 96%);
  color: #0f172a;
}

.topic-terminal-header-btn.is-danger {
  background: #e11d48;
  border-color: rgba(225, 29, 72, 0.36);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(225, 29, 72, 0.22);
}

.topic-terminal-header-btn.is-danger:hover {
  background: #be123c;
  border-color: rgba(190, 18, 60, 0.42);
  color: #ffffff;
}

.topic-terminal-header-status {
  min-height: 74px;
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  align-items: flex-start;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--topic-accent) 18%, #cbd5e1 82%);
  background: color-mix(in srgb, var(--topic-accent) 4%, #f8fafc 96%);
}

.topic-terminal-header-status-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.topic-terminal-header-status-text {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .topic-terminal-header {
    flex-direction: column;
  }

  .topic-terminal-header-panel {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .topic-terminal-header-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .topic-terminal-header {
    padding: 20px;
    border-radius: 22px;
  }

  .topic-terminal-header-control-row {
    flex-direction: column;
  }

  .topic-terminal-header-actions {
    width: 100%;
  }

  .topic-terminal-header-btn {
    flex: 1 1 180px;
  }
}

html[data-theme='dark'] .topic-terminal-header {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--topic-accent) 8%, var(--bg-surface) 92%)
    );
  box-shadow:
    0 18px 34px color-mix(in srgb, #000000 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-icon {
  border-color: color-mix(in srgb, var(--topic-accent) 36%, var(--border-bright) 64%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--topic-accent) 22%, var(--bg-card) 78%) 0%,
      color-mix(in srgb, var(--topic-accent) 10%, var(--bg-surface) 90%) 100%
    );
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}

html[data-theme='dark'] .topic-terminal-header .price-history-v3-brand-title,
html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-control-value,
html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-control-value strong,
html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-btn.is-secondary {
  color: var(--text-primary);
}

html[data-theme='dark'] .topic-terminal-header .price-history-v3-brand-text,
html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-pill,
html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-status-text {
  color: var(--text-secondary);
}

html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-pill,
html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-control-card,
html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-btn.is-secondary,
html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-status {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-status {
  background: color-mix(in srgb, var(--topic-accent) 10%, var(--bg-surface) 90%);
}

html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-btn.is-primary {
  background: color-mix(in srgb, var(--topic-accent) 76%, #111827 24%);
  border-color: color-mix(in srgb, var(--topic-accent) 72%, transparent);
  color: #ffffff;
}

html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-btn.is-primary:hover {
  background: color-mix(in srgb, var(--topic-accent-strong) 76%, #0f172a 24%);
  border-color: color-mix(in srgb, var(--topic-accent-strong) 72%, transparent);
}

html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-btn.is-danger {
  background: color-mix(in srgb, #e11d48 72%, #111827 28%);
  border-color: color-mix(in srgb, #fb7185 58%, transparent);
  color: #ffffff;
}

html[data-theme='dark'] .topic-terminal-header .topic-terminal-header-btn.is-danger:hover {
  background: color-mix(in srgb, #be123c 74%, #0f172a 26%);
  border-color: color-mix(in srgb, #fb7185 64%, transparent);
}

/* ===== Trade Tracking + Calendar (1:1 Refresh) ===== */
#page-tracking .tracking-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#page-tracking .tracking-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#page-tracking .tracking-kpi-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  padding: 24px 18px !important;
  text-align: center;
  transition: transform 0.18s ease;
}

#page-tracking .tracking-kpi-card:hover {
  transform: translateY(-2px);
}

#page-tracking .tracking-kpi-card::before,
#page-tracking .tracking-kpi-wave {
  display: none !important;
}

#page-tracking .tracking-kpi-card .stat-label {
  margin: 0 0 10px;
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-tracking .tracking-kpi-card .stat-value {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: clamp(30px, 2.5vw, 36px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#page-tracking .tracking-kpi-card .stat-value.red {
  color: #e11d48;
}

#page-tracking .tracking-kpi-card .stat-value.green {
  color: #10b981;
}

#page-tracking .tracking-kpi-card .stat-value.gold {
  color: #f59e0b;
}

#page-tracking .tracking-kpi-card .stat-sub {
  margin-top: 8px;
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-tracking .tracking-kpi-card .stat-sub.pnl-profit {
  color: #34d399;
}

#page-tracking .tracking-kpi-card .stat-sub.pnl-loss {
  color: #fb7185;
}

#page-tracking .tracking-kpi-card .stat-sub.pnl-flat {
  color: #94a3b8;
}

#page-tracking .tracking-core-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

#page-tracking .tracking-calendar-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 34px -24px rgba(15, 23, 42, 0.28) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#page-tracking .tracking-calendar-card::before {
  content: none !important;
}

#page-tracking .tracking-calendar-card > .card-title {
  display: none !important;
}

#page-tracking .trade-cal-shell {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

@keyframes track-cal-float-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes track-cal-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.24);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

#page-tracking .trade-cal-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 24px 24px 18px;
  border-bottom: 1px solid #ebf1f6;
  background: #ffffff;
}

#page-tracking .trade-cal-header-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 24px;
  width: 100%;
}

#page-tracking .trade-cal-header-context {
  min-width: 0;
  width: 100%;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#page-tracking .trade-cal-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#page-tracking .trade-cal-header-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-tracking .trade-cal-header-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans) !important;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0f172a;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-tracking .trade-cal-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid #fecaca;
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  color: #ef4444;
  font-size: 22px;
  box-shadow: 0 16px 24px -24px rgba(239, 68, 68, 0.88);
}

#page-tracking .trade-cal-title-icon svg,
#page-tracking .trade-cal-title-icon i {
  display: block;
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
}

#page-tracking .trade-cal-title-icon svg {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#page-tracking .trade-cal-header-sub {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  color: #64748b;
}

#page-tracking .trade-cal-header-controls {
  display: flex;
  width: 100%;
}

#page-tracking .trade-cal-stat-divider {
  width: 1px;
  min-height: 34px;
  margin: 0 16px;
  flex: 0 0 auto;
  background: #edf2f7;
}

#page-tracking .trade-goal-hub {
  width: 100%;
  max-width: 380px;
  justify-self: end;
  border-radius: 24px;
  border: 1px solid #bae6fd;
  background: rgba(240, 249, 255, 0.68);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#page-tracking .trade-goal-hub.goal-tone-amber {
  border-color: #fde68a;
  background: rgba(255, 251, 235, 0.72);
}

#page-tracking .trade-goal-hub.goal-tone-sky {
  border-color: #bae6fd;
  background: rgba(240, 249, 255, 0.68);
}

#page-tracking .trade-goal-hub.goal-tone-indigo {
  border-color: #c7d2fe;
  background: rgba(238, 242, 255, 0.72);
}

#page-tracking .trade-goal-hub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#page-tracking .trade-goal-hub-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f172a;
}

#page-tracking .trade-goal-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0ea5e9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#page-tracking .trade-goal-hub.goal-tone-amber .trade-goal-icon {
  color: #d97706;
}

#page-tracking .trade-goal-hub.goal-tone-indigo .trade-goal-icon {
  color: #4f46e5;
}

#page-tracking .trade-goal-hub-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#page-tracking .trade-goal-edit-btn {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

#page-tracking .trade-goal-edit-btn:hover {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #334155;
}

#page-tracking .trade-goal-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid #dbe5ef;
  background: rgba(255, 255, 255, 0.8);
}

#page-tracking .trade-goal-mode-btn {
  min-width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-family: var(--font-sans) !important;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease;
}

#page-tracking .trade-goal-mode-btn:hover {
  color: #334155;
}

#page-tracking .trade-goal-mode-btn.active {
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
}

#page-tracking .trade-goal-mode-btn.active.goal-tone-amber {
  background: #f59e0b;
}

#page-tracking .trade-goal-mode-btn.active.goal-tone-sky {
  background: #0ea5e9;
}

#page-tracking .trade-goal-mode-btn.active.goal-tone-indigo {
  background: #6366f1;
}

#page-tracking .trade-goal-hub-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#page-tracking .trade-goal-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

#page-tracking .trade-goal-title-row h3 {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: 18px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0ea5e9;
}

#page-tracking .trade-goal-hub.goal-tone-amber .trade-goal-title-row h3 {
  color: #d97706;
}

#page-tracking .trade-goal-hub.goal-tone-indigo .trade-goal-title-row h3 {
  color: #4f46e5;
}

#page-tracking .trade-goal-target-label {
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
}

#page-tracking .trade-goal-target-label strong {
  color: #0f172a;
  font-weight: 800;
}

#page-tracking .trade-goal-hub-main p {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  color: #64748b;
}

#page-tracking .trade-goal-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#page-tracking .trade-goal-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
}

#page-tracking .trade-goal-progress-value {
  color: #0ea5e9;
}

#page-tracking .trade-goal-hub.goal-tone-amber .trade-goal-progress-value {
  color: #d97706;
}

#page-tracking .trade-goal-hub.goal-tone-indigo .trade-goal-progress-value {
  color: #4f46e5;
}

#page-tracking .trade-goal-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

#page-tracking .trade-goal-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #0ea5e9;
  transition: width 0.35s ease;
}

#page-tracking .trade-goal-hub.goal-tone-amber .trade-goal-progress-bar {
  background: #f59e0b;
}

#page-tracking .trade-goal-hub.goal-tone-indigo .trade-goal-progress-bar {
  background: #6366f1;
}

#page-tracking .trade-goal-progress-sub {
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
}

#page-tracking .trade-goal-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#page-tracking .trade-goal-modal {
  width: 100%;
  max-width: 440px;
  border-radius: 24px;
  border: 1px solid #dbeafe;
  background: #ffffff;
  box-shadow: 0 24px 64px -12px rgba(15, 23, 42, 0.26);
  overflow: hidden;
}

#page-tracking .trade-goal-modal.goal-tone-amber {
  border-color: #fde68a;
}

#page-tracking .trade-goal-modal.goal-tone-indigo {
  border-color: #c7d2fe;
}

#page-tracking .trade-goal-modal-head {
  padding: 20px 20px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}

#page-tracking .trade-goal-modal-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#page-tracking .trade-goal-modal-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0ea5e9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#page-tracking .trade-goal-modal.goal-tone-amber .trade-goal-modal-icon {
  color: #d97706;
}

#page-tracking .trade-goal-modal.goal-tone-indigo .trade-goal-modal-icon {
  color: #4f46e5;
}

#page-tracking .trade-goal-modal-head h3 {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
}

#page-tracking .trade-goal-modal-head p {
  margin: 4px 0 0;
  font-family: var(--font-sans) !important;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

#page-tracking .trade-goal-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: color 0.18s ease, background 0.18s ease;
}

#page-tracking .trade-goal-modal-close:hover {
  color: #334155;
  background: #f8fafc;
}

#page-tracking .trade-goal-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-tracking .trade-goal-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#page-tracking .trade-goal-modal-field span {
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-tracking .trade-goal-modal-field input,
#page-tracking .trade-goal-modal-field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 10px 12px;
  font-family: var(--font-sans) !important;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#page-tracking .trade-goal-modal-field textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.4;
  font-weight: 600;
}

#page-tracking .trade-goal-modal-field input:focus,
#page-tracking .trade-goal-modal-field textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

#page-tracking .trade-goal-modal-foot {
  padding: 0 20px 20px;
  display: flex;
  gap: 10px;
}

#page-tracking .trade-goal-modal-btn {
  flex: 1;
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-family: var(--font-sans) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

#page-tracking .trade-goal-modal-btn.cancel:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

#page-tracking .trade-goal-modal-btn.save {
  border-color: transparent;
  background: #0f172a;
  color: #ffffff;
}

#page-tracking .trade-goal-modal-btn.save:hover {
  background: #020617;
}

#page-tracking .trade-cal-nav-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
  margin-left: auto;
}

#page-tracking .trade-cal-nav-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.34);
  padding: 4px;
}

#page-tracking .trade-cal-nav-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

#page-tracking .trade-cal-nav-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  transform: translateY(-1px);
}

#page-tracking .trade-cal-month-btn {
  border: 0 !important;
  background: transparent !important;
  min-width: 160px;
  height: 38px;
  padding: 0 18px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  text-align: center;
  border-radius: 12px !important;
}

#page-tracking .trade-cal-month-btn::after {
  display: none !important;
}

#page-tracking .trade-cal-month-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#page-tracking .trade-cal-btn {
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #475569 !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  box-shadow: 0 12px 26px -24px rgba(15, 23, 42, 0.34);
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

#page-tracking .trade-cal-btn:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

#page-tracking .trade-cal-btn-today {
  min-width: 88px;
  flex: 0 0 auto;
}

#page-tracking .trade-cal-meta-rich {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin: 0 !important;
  width: 100%;
  overflow-x: auto;
  padding: 12px 16px;
  border: 1px solid #e5ecf4;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
  scrollbar-width: none;
}

#page-tracking .trade-cal-meta-rich::-webkit-scrollbar {
  display: none;
}

#page-tracking .trade-cal-chip {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 72px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#page-tracking .trade-cal-chip-label {
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

#page-tracking .trade-cal-chip-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans) !important;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  color: #0f172a;
  white-space: nowrap;
}

#page-tracking .trade-cal-chip-value i {
  font-size: 15px;
}

#page-tracking .trade-cal-chip-positive .trade-cal-chip-value {
  color: #10b981;
}

#page-tracking .trade-cal-chip-negative .trade-cal-chip-value {
  color: #f43f5e;
}

#page-tracking .trade-cal-chip-net {
  margin-left: auto;
  min-width: 132px;
  padding: 10px 16px;
  border: 1px solid #b7efcf;
  border-radius: 14px;
  background: #effcf5;
  box-shadow: none;
}

#page-tracking .trade-cal-chip-net .trade-cal-chip-label {
  color: #059669;
}

#page-tracking .trade-cal-body {
  padding: 20px 24px 24px;
  background: #ffffff;
}

#page-tracking .trade-cal-grid-shell {
  overflow: hidden;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: none;
}

#page-tracking .trade-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0;
  padding: 0 12px;
  border-bottom: 1px solid #e7eef5;
  background: #ffffff;
}

#page-tracking .trade-cal-weekday {
  text-align: center;
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  padding: 14px 0;
}

#page-tracking .trade-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

#page-tracking .trade-cal-day {
  position: relative;
  min-height: 132px;
  border-radius: 22px;
  border: 1px solid #edf2f7;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  padding: 12px;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease, background 0.24s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  animation: track-cal-float-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#page-tracking .trade-cal-day .day-num {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 999px;
  font-family: var(--font-sans) !important;
  font-size: 14px;
  font-weight: 800;
  color: #94a3b8;
  z-index: 1;
}

#page-tracking .trade-cal-day-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding-top: 24px;
}

#page-tracking .trade-cal-day-data {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
}

#page-tracking .trade-cal-day-pill-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

#page-tracking .trade-cal-day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.88);
  color: #64748b;
  font-family: var(--font-sans) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-tracking .trade-cal-day-net {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--font-sans) !important;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}

#page-tracking .trade-cal-day-net-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

#page-tracking .trade-cal-day-net-value {
  font-variant-numeric: tabular-nums;
}

#page-tracking .trade-cal-day-data.profit .trade-cal-day-net {
  color: #059669;
}

#page-tracking .trade-cal-day-data.loss .trade-cal-day-net {
  color: #ea580c;
}

#page-tracking .trade-cal-day-data.major-loss .trade-cal-day-net {
  color: #e11d48;
}

#page-tracking .trade-cal-day-data.flat .trade-cal-day-net {
  color: #2563eb;
}

#page-tracking .trade-cal-day-empty {
  display: none;
}

#page-tracking .trade-cal-empty-plus {
  display: none;
}

#page-tracking .trade-cal-day.in-month:hover .trade-cal-day-empty {
  opacity: 0;
}

#page-tracking .trade-cal-day .day-add-mini {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid #dce6f1;
  background: rgba(255, 255, 255, 0.96);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88);
  box-shadow: none;
  transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
  z-index: 2;
}

#page-tracking .trade-cal-day.in-month:hover .day-add-mini {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#page-tracking .trade-cal-day .day-add-mini:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #2563eb;
}

#page-tracking .trade-cal-day.in-month:hover {
  border-color: #cbd5e1;
  box-shadow: 0 24px 30px -28px rgba(15, 23, 42, 0.35);
  transform: translateY(-4px) scale(1.01);
}

#page-tracking .trade-cal-day.today {
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

#page-tracking .trade-cal-day.today .day-num {
  background: #ffffff;
  color: #4f46e5;
  box-shadow: 0 18px 26px -24px rgba(79, 70, 229, 0.72);
  animation: track-cal-pulse 2.6s infinite;
}

#page-tracking .trade-cal-day.selected {
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.16), 0 24px 30px -28px rgba(59, 130, 246, 0.36);
}

#page-tracking .trade-cal-day.outside-month {
  opacity: 0.4;
  background: #f8fafc;
  border-color: #eef2f7;
}

#page-tracking .trade-cal-day.theme-win {
  border-color: rgba(16, 185, 129, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
}

#page-tracking .trade-cal-day.theme-warn {
  border-color: rgba(249, 115, 22, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
}

#page-tracking .trade-cal-day.theme-flat {
  border-color: rgba(59, 130, 246, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

#page-tracking .trade-cal-day.theme-loss {
  border-color: rgba(244, 63, 94, 0.26);
  background: linear-gradient(180deg, #ffffff 0%, #fff1f2 100%);
}

#page-tracking .trade-cal-day.theme-win .day-num {
  color: #047857;
}

#page-tracking .trade-cal-day.theme-warn .day-num {
  color: #c2410c;
}

#page-tracking .trade-cal-day.theme-flat .day-num {
  color: #2563eb;
}

#page-tracking .trade-cal-day.theme-loss .day-num {
  color: #be123c;
}

#page-tracking .trade-cal-day.theme-win .trade-cal-day-pill {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(255, 255, 255, 0.86);
  color: #047857;
}

#page-tracking .trade-cal-day.theme-warn .trade-cal-day-pill {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(255, 255, 255, 0.86);
  color: #c2410c;
}

#page-tracking .trade-cal-day.theme-flat .trade-cal-day-pill {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(255, 255, 255, 0.86);
  color: #2563eb;
}

#page-tracking .trade-cal-day.theme-loss .trade-cal-day-pill {
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(255, 255, 255, 0.86);
  color: #be123c;
}

#page-tracking .trade-cal-day .day-dot,
#page-tracking .trade-cal-day .day-meta {
  display: none !important;
}

#page-tracking .tracking-log-card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

#page-tracking .tracking-log-card::before {
  content: none !important;
}

@media (max-width: 1100px) {
  #page-tracking .tracking-kpi-grid {
    grid-template-columns: 1fr;
  }

  #page-tracking .trade-cal-header-main {
    grid-template-columns: 1fr;
  }

  #page-tracking .trade-goal-hub {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  #page-tracking .trade-cal-head,
  #page-tracking .trade-cal-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  #page-tracking .trade-cal-nav-left {
    justify-content: flex-start;
    margin-left: 0;
  }
}

@media (max-width: 860px) {
  #page-tracking .trade-cal-head {
    padding-top: 20px;
    padding-bottom: 16px;
  }

  #page-tracking .trade-cal-header-top {
    flex-direction: column;
  }

  #page-tracking .trade-cal-nav-left,
  #page-tracking .trade-cal-meta-rich {
    width: 100%;
  }

  #page-tracking .trade-cal-nav-left {
    flex-wrap: wrap;
  }

  #page-tracking .trade-cal-meta-rich {
    padding: 12px 14px;
  }

  #page-tracking .trade-cal-stat-divider {
    margin: 0 12px;
  }

  #page-tracking .trade-cal-grid {
    gap: 8px;
    padding: 10px;
  }

  #page-tracking .trade-cal-day {
    min-height: 106px;
    border-radius: 18px;
    padding: 10px;
  }

  #page-tracking .trade-cal-day .day-num {
    top: 12px;
    left: 12px;
    font-size: 12px;
    min-width: 28px;
    height: 28px;
  }

  #page-tracking .trade-cal-day-net {
    font-size: 16px;
  }

  #page-tracking .trade-cal-day-pill {
    font-size: 8px;
    min-height: 20px;
    padding: 0 8px;
  }

  #page-tracking .trade-cal-chip-value {
    font-size: 16px;
  }

  #page-tracking .trade-goal-hub-top {
    align-items: flex-start;
    flex-direction: column;
  }

  #page-tracking .trade-goal-hub-actions {
    width: 100%;
    justify-content: space-between;
  }

  #page-tracking .trade-goal-modal {
    border-radius: 20px;
  }

  #page-tracking .trade-goal-modal-head,
  #page-tracking .trade-goal-modal-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  #page-tracking .trade-goal-modal-foot {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
  }
}

@media (max-width: 640px) {
  #page-tracking .trade-cal-head,
  #page-tracking .trade-cal-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  #page-tracking .trade-cal-header-title {
    font-size: 21px;
  }

  #page-tracking .trade-cal-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 22px;
  }

  #page-tracking .trade-cal-month-btn {
    min-width: 132px;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  #page-tracking .trade-cal-grid-shell {
    border-radius: 20px;
  }

  #page-tracking .trade-cal-weekdays {
    padding: 0 6px;
  }

  #page-tracking .trade-cal-weekday {
    font-size: 9px;
    padding: 12px 0;
  }

  #page-tracking .trade-cal-day {
    min-height: 92px;
    border-radius: 16px;
    padding: 8px;
  }

  #page-tracking .trade-cal-day .day-num {
    top: 10px;
    left: 10px;
    min-width: 24px;
    height: 24px;
    font-size: 11px;
  }

  #page-tracking .trade-cal-day-content {
    padding-top: 16px;
  }

  #page-tracking .trade-cal-day-net {
    font-size: 14px;
    gap: 4px;
  }

  #page-tracking .trade-cal-day-net-icon {
    font-size: 13px;
  }

  #page-tracking .trade-cal-empty-plus,
  #page-tracking .trade-cal-day .day-add-mini {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    font-size: 14px;
  }

  #page-tracking .trade-cal-day .day-add-mini {
    top: 50%;
    left: 50%;
  }
}

/* ===== Dark Mode Repair: React Refresh Shells ===== */
html[data-theme='dark'] #page-forecast > .section-header.modern-topic-header,
html[data-theme='dark'] #page-options > .section-header.modern-topic-header,
html[data-theme='dark'] #page-simulations > .section-header.modern-topic-header,
html[data-theme='dark'] #page-history > .section-header.modern-topic-header,
html[data-theme='dark'] #page-price-history > .section-header.modern-topic-header,
html[data-theme='dark'] #page-tracking .section-header.modern-topic-header.tracking-hero {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 8%, var(--bg-surface) 92%)
    ) !important;
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme='dark'] .modern-topic-header .modern-topic-title,
html[data-theme='dark'] .modern-topic-header .modern-topic-generated-value {
  color: var(--text-primary);
}

html[data-theme='dark'] .modern-topic-header .modern-topic-subtitle,
html[data-theme='dark'] .modern-topic-header .modern-topic-generated-text,
html[data-theme='dark'] .modern-topic-header .modern-topic-generated-icon,
html[data-theme='dark'] .modern-topic-header .global-tracking-meta.modern-topic-pill-row .modern-topic-pill,
html[data-theme='dark'] .modern-topic-header .modern-topic-pill-icon {
  color: var(--text-secondary);
}

html[data-theme='dark'] .modern-topic-header .modern-topic-generated-pill,
html[data-theme='dark'] .modern-topic-header .global-tracking-meta.modern-topic-pill-row .modern-topic-pill {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-forecast .complete-report-react-shell {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 8%, var(--bg-surface) 92%)
    ) !important;
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme='dark'] .reportv3-header,
html[data-theme='dark'] .reportv3-day-header,
html[data-theme='dark'] .reportv3-day-footer,
html[data-theme='dark'] .reportv3-panel-header,
html[data-theme='dark'] .reportv3-panel-row {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
}

html[data-theme='dark'] .reportv3-header-title,
html[data-theme='dark'] .reportv3-param-value,
html[data-theme='dark'] .reportv3-day-title,
html[data-theme='dark'] .reportv3-panel-value,
html[data-theme='dark'] .reportv3-prob-inline,
html[data-theme='dark'] .reportv3-premium-target,
html[data-theme='dark'] .reportv3-btn-primary {
  color: var(--text-primary);
}

html[data-theme='dark'] .reportv3-header-icon,
html[data-theme='dark'] .reportv3-subtitle,
html[data-theme='dark'] .reportv3-subtitle-icon,
html[data-theme='dark'] .reportv3-param-label,
html[data-theme='dark'] .reportv3-param-sub,
html[data-theme='dark'] .reportv3-param-subline,
html[data-theme='dark'] .reportv3-day-title-icon,
html[data-theme='dark'] .reportv3-panel-header,
html[data-theme='dark'] .reportv3-panel-icon,
html[data-theme='dark'] .reportv3-panel-label {
  color: var(--text-muted);
}

html[data-theme='dark'] .reportv3-params-wrap,
html[data-theme='dark'] .reportv3-param-card,
html[data-theme='dark'] .reportv3-day-card,
html[data-theme='dark'] .reportv3-panel,
html[data-theme='dark'] .reportv3-result-pill,
html[data-theme='dark'] .reportv3-btn-ghost {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow:
    0 12px 26px color-mix(in srgb, #000000 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] .reportv3-param-card.is-wide,
html[data-theme='dark'] .reportv3-day-header,
html[data-theme='dark'] .reportv3-panel-header,
html[data-theme='dark'] .reportv3-day-footer {
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
}

html[data-theme='dark'] .reportv3-param-desc {
  color: var(--text-secondary);
}

html[data-theme='dark'] .reportv3-btn-ghost {
  color: #6ee7b7;
  border-color: color-mix(in srgb, #34d399 48%, var(--border-bright) 52%);
}

html[data-theme='dark'] .reportv3-btn-ghost:hover {
  background: color-mix(in srgb, #065f46 28%, var(--bg-hover) 72%);
}

html[data-theme='dark'] .reportv3-btn-link,
html[data-theme='dark'] .reportv3-reverted-note {
  color: #fbbf24;
}

html[data-theme='dark'] .reportv3-btn-primary {
  background: color-mix(in srgb, var(--bg-deep) 88%, #020617 12%);
  box-shadow: 0 12px 28px color-mix(in srgb, #000000 28%, transparent);
}

html[data-theme='dark'] .reportv3-btn-primary:hover {
  background: color-mix(in srgb, var(--bg-deep) 94%, #000000 6%);
}

html[data-theme='dark'] .reportv3-bias-pill,
html[data-theme='dark'] .reportv3-option-pill {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] .reportv3-prob-inline .sep,
html[data-theme='dark'] .reportv3-premium-target .arrow {
  color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

html[data-theme='dark'] .reportv2-header {
  border-bottom-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
}

html[data-theme='dark'] .reportv2-header-title,
html[data-theme='dark'] .reportv2-param-value,
html[data-theme='dark'] .reportv2-day-title,
html[data-theme='dark'] .reportv2-metric-value,
html[data-theme='dark'] .reportv2-option-snapshot-main,
html[data-theme='dark'] .reportv2-option-strike,
html[data-theme='dark'] .reportv2-day-actions,
html[data-theme='dark'] .reportv2-add-btn {
  color: var(--text-primary);
}

html[data-theme='dark'] .reportv2-subtitle,
html[data-theme='dark'] .reportv2-param-label,
html[data-theme='dark'] .reportv2-param-sub,
html[data-theme='dark'] .reportv2-day-title .sep,
html[data-theme='dark'] .reportv2-day-col-title,
html[data-theme='dark'] .reportv2-metric-label,
html[data-theme='dark'] .reportv2-rate-label {
  color: var(--text-muted);
}

html[data-theme='dark'] .reportv2-param-card,
html[data-theme='dark'] .reportv2-day-card,
html[data-theme='dark'] .reportv2-day-col,
html[data-theme='dark'] .reportv2-option-snapshot,
html[data-theme='dark'] .reportv2-option-snapshot-item,
html[data-theme='dark'] .reportv2-rate-btn {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  box-shadow:
    0 10px 22px color-mix(in srgb, #000000 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] .reportv2-day-head,
html[data-theme='dark'] .reportv2-day-actions,
html[data-theme='dark'] .reportv2-option-snapshot-head,
html[data-theme='dark'] .reportv2-metric-row {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
}

html[data-theme='dark'] .reportv2-day-bias-pill,
html[data-theme='dark'] .reportv2-option-type-pill {
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] .reportv2-add-btn {
  background: color-mix(in srgb, var(--bg-deep) 88%, #020617 12%);
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
}

html[data-theme='dark'] .reportv2-add-btn:hover {
  background: color-mix(in srgb, var(--bg-deep) 94%, #000000 6%);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashOptionsRec,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-card,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell #signalMeterContainer.signal-meter-react-shell {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 8%, var(--bg-surface) 92%)
    ) !important;
  box-shadow:
    0 18px 34px color-mix(in srgb, #000000 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
  backdrop-filter: blur(20px);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-reason,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-item,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-box,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-row,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-stat,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-react-bias-card,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-insight-grid.signal-insight-grid-react .signal-insight,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-indicators.signal-indicators-react .ind-row,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-footer.signal-meter-footer-react .signal-meter-chip {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent) !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, #000000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget:hover,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget.selected {
  background:
    linear-gradient(
      175deg,
      color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 12%, var(--bg-card) 88%),
      color-mix(in srgb, var(--bg-surface) 92%, transparent)
    ) !important;
  border-color: color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 44%, var(--border-bright) 56%);
  box-shadow: 0 16px 28px color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 14%, #000000 86%) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .week-ahead-title,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .week-ahead-title,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-label,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-kpi-label,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-label,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-row.por-head,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-columns-label,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric-label,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric-mobile-label,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-stat-label,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .composite-react-title,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-axis {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .week-ahead-subtitle,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .week-ahead-subtitle,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-date,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-rec,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.slate,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-badge,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-copy p,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-row:not(.por-head),
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-row .por-day,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .composite-react-subtitle,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-kicker,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-sub {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-main-title,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-kpi-val,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-range-pill strong,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-main,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-strike,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-value,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-value,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-ai-copy strong,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-main,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item-value,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-title,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-date,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric-value,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-stat-value,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-needle,
html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-chip-value {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-prob-mini-track,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-split {
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-range-pill,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-type-pill,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-inline-type-pill,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-badge,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-snapshot,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-row:not(.por-head):hover {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-title-icon {
  background: color-mix(in srgb, #4f46e5 20%, var(--bg-hover) 80%);
  color: #a5b4fc;
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-legend-item {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-columns-icon,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric-mobile-icon {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-day {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-dir.is-bull {
  background: color-mix(in srgb, var(--green) 16%, var(--bg-hover) 84%);
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-bright) 66%);
  color: #6ee7b7;
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-dir.is-bear {
  background: color-mix(in srgb, var(--red) 16%, var(--bg-hover) 84%);
  border-color: color-mix(in srgb, var(--red) 34%, var(--border-bright) 66%);
  color: #fda4af;
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-dir.is-neutral {
  background: color-mix(in srgb, var(--gold) 16%, var(--bg-hover) 84%);
  border-color: color-mix(in srgb, var(--gold) 34%, var(--border-bright) 66%);
  color: #fcd34d;
}

html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-track,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-risk-track {
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}

@media (max-width: 760px) {
  html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-metric {
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  }
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-option-snapshot-head,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-head,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell .por-row.por-head {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-prob-label-row > span {
  border-color: color-mix(in srgb, var(--border-bright) 60%, transparent) !important;
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
  background: color-mix(in srgb, var(--bg-card) 96%, #020617 4%) !important;
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, #000000 20%, transparent) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-detail-main-title,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-option-snapshot-main,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-value,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-val,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill strong {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-option-snapshot-title,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-label,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-label {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge.is-default,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-trade-box,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-note,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent) !important;
  box-shadow: none;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-note,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge.is-default {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-shell {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-head,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-label {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value.tone-bull,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-bull .dash-day-snapshot-sentiment-value {
  color: #6ee7b7;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value.tone-neutral,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-neutral .dash-day-snapshot-sentiment-value {
  color: #fcd34d;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-market-card-value.tone-bear,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-stat.is-bear .dash-day-snapshot-sentiment-value {
  color: #fda4af;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-track {
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-fill.is-neutral,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-sentiment-fill.is-bear {
  box-shadow: inset 1px 0 0 rgba(15, 23, 42, 0.3);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge.is-success,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card.is-success,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill.risk-low {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--green) 14%, var(--bg-hover) 86%) !important;
  color: #6ee7b7;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge.is-warning,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card.is-warning,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill.risk-medium {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--gold) 16%, var(--bg-hover) 84%) !important;
  color: #fcd34d;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-badge.is-danger,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-range-pill.risk-high {
  border-color: color-mix(in srgb, var(--red) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--red) 16%, var(--bg-hover) 84%) !important;
  color: #fda4af;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary-label {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bull .dash-prob-summary-value {
  color: #6ee7b7;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--neutral .dash-prob-summary-value {
  color: #fcd34d;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-prob-summary--bear .dash-prob-summary-value {
  color: #fda4af;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card.is-success .dash-day-snapshot-stat-value,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-val.tone-bull {
  color: #6ee7b7;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-stat-card.is-warning .dash-day-snapshot-stat-value,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-val.tone-neutral {
  color: #fcd34d;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-kpi-val.tone-bear {
  color: #fda4af;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split {
  border-color: color-mix(in srgb, var(--border-bright) 60%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
  box-shadow: none;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-neutral,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-week-prob-split .prob-seg-bear {
  box-shadow: inset 1px 0 0 rgba(15, 23, 42, 0.28);
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-open-btn {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #0f172a;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-open-btn:hover,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-open-btn:active {
  background: #cbd5e1;
  border-color: #cbd5e1;
  color: #0f172a;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-note-icon,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell .dash-risk-icon {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-meter-band-centerline {
  background: color-mix(in srgb, #ffffff 22%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-composite-card.composite-react-shell .signal-needle {
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, #000000 28%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-panel,
html[data-theme='dark'] #page-options .position-v2-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 8%, var(--bg-surface) 92%)
    ) !important;
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme='dark'] #page-options .options-v2-card-header,
html[data-theme='dark'] #page-options .options-v2-data-row,
html[data-theme='dark'] #page-options .options-v2-info-block,
html[data-theme='dark'] #page-options .options-v2-ratio-hero,
html[data-theme='dark'] #page-options .options-v2-readiness-footer,
html[data-theme='dark'] #page-options .options-v2-setup-grid,
html[data-theme='dark'] #page-options .options-v2-setup-cell.is-divider,
html[data-theme='dark'] #page-options .options-v2-list-row,
html[data-theme='dark'] #page-options .options-v2-table-head,
html[data-theme='dark'] #page-options .options-exec-v2-heading-row,
html[data-theme='dark'] #page-options .position-v2-head {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-box-heading,
html[data-theme='dark'] #page-options .options-v2-card-subcopy,
html[data-theme='dark'] #page-options .options-v2-data-label,
html[data-theme='dark'] #page-options .options-v2-data-subvalue,
html[data-theme='dark'] #page-options .options-v2-setup-label,
html[data-theme='dark'] #page-options .options-v2-ratio-kicker,
html[data-theme='dark'] #page-options .options-v2-ratio-score-unit,
html[data-theme='dark'] #page-options .options-v2-readiness-title,
html[data-theme='dark'] #page-options .options-v2-list-label,
html[data-theme='dark'] #page-options .options-v2-table th,
html[data-theme='dark'] #page-options .options-exec-v2-heading,
html[data-theme='dark'] #page-options .options-exec-v2-metric-label,
html[data-theme='dark'] #page-options .options-exec-v2-readiness-label,
html[data-theme='dark'] #page-options .position-v2-head-title,
html[data-theme='dark'] #page-options .position-v2-input-label,
html[data-theme='dark'] #page-options .position-v2-summary-label {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-options .options-v2-list-value,
html[data-theme='dark'] #page-options .options-v2-tone-primary,
html[data-theme='dark'] #page-options .options-v2-tone-slate,
html[data-theme='dark'] #page-options .options-v2-readiness-score,
html[data-theme='dark'] #page-options .options-v2-ratio-score,
html[data-theme='dark'] #page-options .options-v2-table td,
html[data-theme='dark'] #page-options .options-exec-v2-metric-value,
html[data-theme='dark'] #page-options .options-exec-v2-readiness-text,
html[data-theme='dark'] #page-options .options-exec-v2-check-text,
html[data-theme='dark'] #page-options .position-v2-input,
html[data-theme='dark'] #page-options .position-v2-summary-value,
html[data-theme='dark'] #page-options .position-v2-summary-sub,
html[data-theme='dark'] #page-options .position-v2-table td,
html[data-theme='dark'] #page-options .position-v2-detail-value {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-options .options-v2-card-header,
html[data-theme='dark'] #page-options .options-v2-ratio-hero,
html[data-theme='dark'] #page-options .options-v2-readiness-footer {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-card) 94%, transparent),
      color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 6%, var(--bg-surface) 94%)
    );
}

html[data-theme='dark'] #page-options .options-v2-card-icon-wrap,
html[data-theme='dark'] #page-options .options-v2-badge,
html[data-theme='dark'] #page-options .options-v2-readiness-badge,
html[data-theme='dark'] #page-options .options-exec-v2-tab,
html[data-theme='dark'] #page-options .options-exec-v2-metric,
html[data-theme='dark'] #page-options .options-exec-v2-readiness,
html[data-theme='dark'] #page-options .options-exec-v2-checklist,
html[data-theme='dark'] #page-options .options-exec-v2-check-icon,
html[data-theme='dark'] #page-options .position-v2-input,
html[data-theme='dark'] #page-options .position-v2-summary-card,
html[data-theme='dark'] #page-options .position-v2-filter-pill,
html[data-theme='dark'] #page-options .position-v2-matrix-shell,
html[data-theme='dark'] #page-options .position-v2-table-scroll,
html[data-theme='dark'] #page-options .position-v2-detail-card,
html[data-theme='dark'] #page-options .position-v2-detail-btn {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  box-shadow:
    0 10px 22px color-mix(in srgb, #000000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-card-icon-wrap {
  color: color-mix(in srgb, #dbeafe 72%, var(--cyan) 28%);
}

html[data-theme='dark'] #page-options .options-v2-badge-mode {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-options .options-v2-info-block.tone-info {
  background: color-mix(in srgb, var(--cyan) 10%, var(--bg-card) 90%);
  color: color-mix(in srgb, #d8ecff 88%, var(--cyan) 12%);
}

html[data-theme='dark'] #page-options .options-v2-info-block.tone-warning {
  background: color-mix(in srgb, #f59e0b 10%, var(--bg-card) 90%);
  color: color-mix(in srgb, #fde68a 84%, #ffffff 16%);
}

html[data-theme='dark'] #page-options .options-v2-overview-panel {
  padding: 0 !important;
}

html[data-theme='dark'] #page-options .options-v2-card-shell-overview {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme='dark'] #page-options .options-v2-overview-header,
html[data-theme='dark'] #page-options .options-v2-overview-row.is-divider,
html[data-theme='dark'] #page-options .options-v2-overview-readiness {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-overview-title,
html[data-theme='dark'] #page-options .options-v2-overview-row-value,
html[data-theme='dark'] #page-options .options-v2-overview-readiness-score {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-options .options-v2-overview-subtitle,
html[data-theme='dark'] #page-options .options-v2-overview-row-label,
html[data-theme='dark'] #page-options .options-v2-overview-setup-label,
html[data-theme='dark'] #page-options .options-v2-overview-readiness-label,
html[data-theme='dark'] #page-options .options-v2-overview-readiness-score-unit {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-options .options-v2-overview-group,
html[data-theme='dark'] #page-options .options-v2-overview-setup-card {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 10px 24px color-mix(in srgb, #000000 16%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-overview-chip {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] #page-options .options-v2-overview-info.tone-info {
  border-color: color-mix(in srgb, var(--cyan) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-card) 88%);
  color: color-mix(in srgb, #dbeafe 82%, var(--cyan) 18%);
}

html[data-theme='dark'] #page-options .options-v2-overview-info.tone-info:hover {
  background: color-mix(in srgb, var(--cyan) 16%, var(--bg-card) 84%);
}

html[data-theme='dark'] #page-options .options-v2-overview-info.tone-warning {
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border-bright) 70%);
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-card) 88%);
  color: color-mix(in srgb, #fde68a 84%, #ffffff 16%);
}

html[data-theme='dark'] #page-options .options-v2-overview-info.tone-warning:hover {
  background: color-mix(in srgb, #f59e0b 16%, var(--bg-card) 84%);
}

html[data-theme='dark'] #page-options .options-v2-overview-setup-card.tone-green {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border-bright) 76%);
}

html[data-theme='dark'] #page-options .options-v2-overview-setup-card.tone-rose {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border-bright) 76%);
}

html[data-theme='dark'] #page-options .options-v2-overview-setup-value.tone-green {
  color: color-mix(in srgb, #bbf7d0 84%, var(--green) 16%);
}

html[data-theme='dark'] #page-options .options-v2-overview-setup-value.tone-rose {
  color: color-mix(in srgb, #fecdd3 84%, var(--red) 16%);
}

html[data-theme='dark'] #page-options .options-v2-overview-inline-value.tone-amber {
  color: color-mix(in srgb, #fde68a 84%, #ffffff 16%);
}

html[data-theme='dark'] #page-options .options-v2-overview-readiness-badge.tone-ready {
  border-color: color-mix(in srgb, var(--green) 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, var(--green) 12%, var(--bg-card) 88%);
  color: color-mix(in srgb, #bbf7d0 84%, var(--green) 16%);
}

html[data-theme='dark'] #page-options .options-v2-overview-readiness-badge.tone-selective {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-card) 88%);
  color: color-mix(in srgb, #fde68a 84%, #ffffff 16%);
}

html[data-theme='dark'] #page-options .options-v2-overview-readiness-badge.tone-defensive {
  border-color: color-mix(in srgb, var(--red) 42%, var(--border-bright) 58%);
  background: color-mix(in srgb, var(--red) 12%, var(--bg-card) 88%);
  color: color-mix(in srgb, #fecdd3 84%, #ffffff 16%);
}

html[data-theme='dark'] #page-options .options-v2-overview-readiness-badge.tone-neutral {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  color: var(--text-muted);
}

html[data-theme='dark'] #page-options .options-v2-overview-readiness-track {
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 20%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-data-row:hover {
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-panel {
  border-color: color-mix(in srgb, var(--border-bright) 62%, rgba(255, 255, 255, 0.18)) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-card) 94%, transparent),
      color-mix(in srgb, var(--bg-surface) 92%, transparent)
    ) !important;
  box-shadow:
    0 28px 56px color-mix(in srgb, #000000 32%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme='dark'] #page-options .options-v2-card-shell-risk {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 4%, transparent),
      color-mix(in srgb, var(--bg-surface) 8%, transparent)
    );
}

html[data-theme='dark'] #page-options .options-v2-risk-header,
html[data-theme='dark'] #page-options .options-v2-risk-metric-row {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-title,
html[data-theme='dark'] #page-options .options-v2-risk-metric-row .options-v2-data-value,
html[data-theme='dark'] #page-options .options-v2-ratio-score {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-options .options-v2-risk-subtitle,
html[data-theme='dark'] #page-options .options-v2-ratio-kicker,
html[data-theme='dark'] #page-options .options-v2-ratio-score-unit,
html[data-theme='dark'] #page-options .options-v2-risk-metric-row .options-v2-data-label,
html[data-theme='dark'] #page-options .options-v2-risk-label-note {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-options .options-v2-ratio-bar {
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 24%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-metrics {
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 18px 32px color-mix(in srgb, #000000 18%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-context {
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 18px 32px color-mix(in srgb, #000000 18%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-context-card {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-context-title,
html[data-theme='dark'] #page-options .options-v2-risk-context-label,
html[data-theme='dark'] #page-options .options-v2-risk-context-note-icon {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-options .options-v2-risk-context-value {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-options .options-v2-risk-context-subvalue,
html[data-theme='dark'] #page-options .options-v2-risk-context-note {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-options .options-v2-risk-context-note {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-metric-row:hover {
  background: color-mix(in srgb, var(--bg-hover) 80%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-metric-row.is-move .options-v2-data-value {
  color: color-mix(in srgb, #dbeafe 78%, var(--cyan) 22%);
}

html[data-theme='dark'] #page-options .options-v2-risk-metrics .options-v2-badge {
  box-shadow:
    0 8px 16px color-mix(in srgb, #000000 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-options .options-v2-risk-metrics .options-v2-badge.tone-green {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--green) 14%, var(--bg-card) 86%);
  color: #6ee7b7;
}

html[data-theme='dark'] #page-options .options-v2-risk-metrics .options-v2-badge.tone-rose {
  border-color: color-mix(in srgb, var(--red) 34%, var(--border-bright) 66%);
  background: color-mix(in srgb, var(--red) 14%, var(--bg-card) 86%);
  color: #fda4af;
}

html[data-theme='dark'] #page-options .options-exec-v2-tab:hover,
html[data-theme='dark'] #page-options .options-v2-table tbody tr:hover td,
html[data-theme='dark'] #page-options .position-v2-main-row:hover td,
html[data-theme='dark'] #page-options .position-v2-detail-btn:hover {
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent) !important;
}

html[data-theme='dark'] #page-options .options-exec-v2-tab.active {
  border-color: color-mix(in srgb, var(--cyan) 44%, var(--border-bright) 56%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-card) 88%);
}

html[data-theme='dark'] #page-options .options-v2-table th,
html[data-theme='dark'] #page-options .options-v2-table td,
html[data-theme='dark'] #page-options .options-exec-v2-check-item + .options-exec-v2-check-item,
html[data-theme='dark'] #page-options .position-v2-table th,
html[data-theme='dark'] #page-options .position-v2-table td,
html[data-theme='dark'] #page-options .position-v2-expand-row td {
  border-color: color-mix(in srgb, var(--border-bright) 60%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-heading,
html[data-theme='dark'] #page-options .options-exec-v3-metric-label,
html[data-theme='dark'] #page-options .options-exec-v3-readiness-scorehead {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-options .options-exec-v3-metric-card,
html[data-theme='dark'] #page-options .options-exec-v3-tab,
html[data-theme='dark'] #page-options .options-exec-v3-check-icon {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow:
    0 12px 26px color-mix(in srgb, #000000 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-tab {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-options .options-exec-v3-tabs {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 76%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-tab:hover {
  border-color: color-mix(in srgb, var(--border-bright) 78%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] #page-options .options-exec-v3-tab.active {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--border-bright) 52%);
  background: color-mix(in srgb, var(--cyan) 12%, var(--bg-card) 88%);
  color: color-mix(in srgb, var(--cyan) 72%, #ffffff 28%);
}

html[data-theme='dark'] #page-options .options-exec-v3-metric-value,
html[data-theme='dark'] #page-options .options-exec-v3-focus-strike,
html[data-theme='dark'] #page-options .options-exec-v3-check-text {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-options .options-exec-v3-metric-sub,
html[data-theme='dark'] #page-options .options-exec-v3-readiness-note {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-options .options-exec-v3-metric-sub-icon {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-options .options-exec-v3-focus-pill.tone-neutral {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness {
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness.tone-ready {
  background: linear-gradient(180deg, color-mix(in srgb, #10b981 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-card) 96%, transparent));
  border-color: color-mix(in srgb, #10b981 48%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness.tone-selective {
  background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-card) 96%, transparent));
  border-color: color-mix(in srgb, #f59e0b 48%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness.tone-defensive {
  background: linear-gradient(180deg, color-mix(in srgb, #f43f5e 12%, var(--bg-card) 88%), color-mix(in srgb, var(--bg-card) 96%, transparent));
  border-color: color-mix(in srgb, #f43f5e 48%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness-icon-wrap {
  background: color-mix(in srgb, #ffffff 8%, var(--bg-surface) 92%);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness-title.tone-ready,
html[data-theme='dark'] #page-options .options-exec-v3-readiness.tone-ready .options-exec-v3-readiness-note {
  color: color-mix(in srgb, #86efac 78%, #ffffff 22%);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness-title.tone-selective,
html[data-theme='dark'] #page-options .options-exec-v3-readiness.tone-selective .options-exec-v3-readiness-note,
html[data-theme='dark'] #page-options .options-exec-v3-readiness.tone-selective .options-exec-v3-readiness-scorehead {
  color: color-mix(in srgb, #fde68a 74%, #ffffff 26%);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness-title.tone-defensive,
html[data-theme='dark'] #page-options .options-exec-v3-readiness.tone-defensive .options-exec-v3-readiness-note {
  color: color-mix(in srgb, #fecdd3 78%, #ffffff 22%);
}

html[data-theme='dark'] #page-options .options-exec-v3-readiness-track {
  background: color-mix(in srgb, #ffffff 12%, var(--bg-hover) 88%);
}

html[data-theme='dark'] #page-options .options-exec-v3-check-item {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  box-shadow:
    0 14px 28px color-mix(in srgb, #000000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-check-item.caution {
  background: color-mix(in srgb, #f59e0b 8%, var(--bg-card) 92%);
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-check-item.block {
  background: color-mix(in srgb, #f43f5e 9%, var(--bg-card) 91%);
  border-color: color-mix(in srgb, #f43f5e 40%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-check-item.pass .options-exec-v3-check-icon {
  background: color-mix(in srgb, #10b981 12%, var(--bg-card) 88%);
  border-color: color-mix(in srgb, #10b981 42%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-check-item.caution .options-exec-v3-check-icon {
  background: color-mix(in srgb, #f59e0b 12%, var(--bg-card) 88%);
  border-color: color-mix(in srgb, #f59e0b 42%, transparent);
}

html[data-theme='dark'] #page-options .options-exec-v3-check-item.block .options-exec-v3-check-icon {
  background: color-mix(in srgb, #f43f5e 12%, var(--bg-card) 88%);
  border-color: color-mix(in srgb, #f43f5e 42%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-kpi-card,
html[data-theme='dark'] #page-tracking .tracking-calendar-card,
html[data-theme='dark'] #page-tracking .tracking-log-card,
html[data-theme='dark'] #page-tracking .trade-cal-shell,
html[data-theme='dark'] #page-tracking .trade-goal-modal {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 8%, var(--bg-surface) 92%)
    ) !important;
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme='dark'] #page-tracking .trade-cal-head,
html[data-theme='dark'] #page-tracking .trade-cal-body,
html[data-theme='dark'] #page-tracking .trade-goal-hub,
html[data-theme='dark'] #page-tracking .trade-goal-modal-head {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-kpi-card .stat-label,
html[data-theme='dark'] #page-tracking .tracking-kpi-card .stat-sub,
html[data-theme='dark'] #page-tracking .trade-cal-header-title,
html[data-theme='dark'] #page-tracking .trade-cal-chip-label,
html[data-theme='dark'] #page-tracking .trade-cal-weekday,
html[data-theme='dark'] #page-tracking .trade-goal-modal-field span {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-tracking .tracking-kpi-card .stat-value,
html[data-theme='dark'] #page-tracking .trade-goal-hub-label,
html[data-theme='dark'] #page-tracking .trade-goal-target-label strong,
html[data-theme='dark'] #page-tracking .trade-goal-modal-head h3,
html[data-theme='dark'] #page-tracking .trade-cal-chip-value,
html[data-theme='dark'] #page-tracking .trade-cal-month-btn,
html[data-theme='dark'] #page-tracking .trade-cal-day .day-num {
  color: var(--text-primary) !important;
}

html[data-theme='dark'] #page-tracking .trade-goal-hub-main p,
html[data-theme='dark'] #page-tracking .trade-goal-target-label,
html[data-theme='dark'] #page-tracking .trade-goal-progress-meta,
html[data-theme='dark'] #page-tracking .trade-goal-progress-sub,
html[data-theme='dark'] #page-tracking .trade-goal-modal-head p,
html[data-theme='dark'] #page-tracking .trade-goal-modal-close,
html[data-theme='dark'] #page-tracking .trade-cal-btn,
html[data-theme='dark'] #page-tracking .trade-cal-chip,
html[data-theme='dark'] #page-tracking .trade-cal-day-pill,
html[data-theme='dark'] #page-tracking .tracking-log-card {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] #page-tracking .trade-goal-icon,
html[data-theme='dark'] #page-tracking .trade-goal-mode-switch,
html[data-theme='dark'] #page-tracking .trade-goal-modal-icon,
html[data-theme='dark'] #page-tracking .trade-goal-modal-close,
html[data-theme='dark'] #page-tracking .trade-goal-modal-field input,
html[data-theme='dark'] #page-tracking .trade-goal-modal-field textarea,
html[data-theme='dark'] #page-tracking .trade-goal-modal-btn.cancel,
html[data-theme='dark'] #page-tracking .trade-cal-nav-pill,
html[data-theme='dark'] #page-tracking .trade-cal-btn,
html[data-theme='dark'] #page-tracking .trade-cal-chip,
html[data-theme='dark'] #page-tracking .trade-cal-day,
html[data-theme='dark'] #page-tracking .trade-cal-empty-plus {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent) !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, #000000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-tracking .trade-goal-edit-btn:hover,
html[data-theme='dark'] #page-tracking .trade-goal-modal-close:hover,
html[data-theme='dark'] #page-tracking .trade-cal-nav-btn:hover,
html[data-theme='dark'] #page-tracking .trade-cal-btn:hover,
html[data-theme='dark'] #page-tracking .trade-cal-day.in-month:hover {
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent) !important;
}

html[data-theme='dark'] #page-tracking .trade-goal-progress-track,
html[data-theme='dark'] #page-tracking .trade-cal-day.outside-month {
  border-color: color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 78%, transparent);
}

html[data-theme='dark'] #page-tracking .trade-cal-body {
  background: color-mix(in srgb, var(--bg-card) 96%, transparent) !important;
}

html[data-theme='dark'] #page-tracking .trade-cal-day.theme-win {
  border-color: color-mix(in srgb, var(--green) 38%, var(--border-bright) 62%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--green) 16%, var(--bg-card) 84%), color-mix(in srgb, var(--green) 8%, var(--bg-surface) 92%));
}

html[data-theme='dark'] #page-tracking .trade-cal-day.theme-warn {
  border-color: color-mix(in srgb, #f97316 38%, var(--border-bright) 62%);
  background: linear-gradient(145deg, color-mix(in srgb, #f97316 14%, var(--bg-card) 86%), color-mix(in srgb, #f59e0b 8%, var(--bg-surface) 92%));
}

html[data-theme='dark'] #page-tracking .trade-cal-day.theme-flat {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--border-bright) 62%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--cyan) 16%, var(--bg-card) 84%), color-mix(in srgb, var(--cyan) 8%, var(--bg-surface) 92%));
}

html[data-theme='dark'] #page-tracking .trade-cal-day.theme-loss {
  border-color: color-mix(in srgb, var(--red) 38%, var(--border-bright) 62%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--red) 16%, var(--bg-card) 84%), color-mix(in srgb, var(--red) 8%, var(--bg-surface) 92%));
}

html[data-theme='dark'] #page-tracking .trade-cal-head {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 11%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 95%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent)) !important;
}

html[data-theme='dark'] #page-tracking .trade-cal-header-title {
  color: var(--text-primary) !important;
}

html[data-theme='dark'] #page-tracking .trade-cal-header-sub {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] #page-tracking .trade-cal-meta-rich,
html[data-theme='dark'] #page-tracking .trade-cal-grid-shell,
html[data-theme='dark'] #page-tracking .trade-cal-day .day-add-mini {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent) !important;
  box-shadow:
    0 10px 22px color-mix(in srgb, #000000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

html[data-theme='dark'] #page-tracking .trade-cal-title-icon {
  border-color: color-mix(in srgb, #ef4444 42%, var(--border-bright) 58%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ef4444 24%, var(--bg-card) 76%) 0%,
      color-mix(in srgb, #ef4444 12%, var(--bg-surface) 88%) 100%
    ) !important;
  color: #f87171;
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}

html[data-theme='dark'] #page-tracking .trade-cal-stat-divider {
  background: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] #page-tracking .trade-cal-chip-net {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.12) !important;
}

html[data-theme='dark'] #page-tracking .trade-cal-chip-net .trade-cal-chip-label {
  color: #34d399 !important;
}

html[data-theme='dark'] #page-tracking .trade-cal-day.today {
  border-color: color-mix(in srgb, #818cf8 48%, var(--border-bright) 52%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, #2563eb 12%, var(--bg-surface) 88%));
}

html[data-theme='dark'] #page-tracking .trade-cal-day.today .day-num {
  background: color-mix(in srgb, var(--bg-card) 96%, transparent);
  color: #a5b4fc !important;
  box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.22);
}

/* ===== DARK MODE PATCHES: HEADER / SIDEBAR / DASHBOARD / TRACKING ===== */
html[data-theme='dark'] .top-bar.top-bar-redesign {
  border-color: color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 28%, var(--border-bright) 72%) !important;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 11%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent)) !important;
  box-shadow:
    0 18px 34px rgba(2, 6, 23, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-system-meta,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-meta-item,
html[data-theme='dark'] .top-bar.top-bar-redesign .ohl-box,
html[data-theme='dark'] .top-bar.top-bar-redesign .session-box,
html[data-theme='dark'] .top-bar.top-bar-redesign .ohl-item,
html[data-theme='dark'] .top-bar.top-bar-redesign .ohl-chip,
html[data-theme='dark'] .top-bar.top-bar-redesign .session-mini-box {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent) !important;
  box-shadow:
    0 8px 18px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-bar-title,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-meta-item .top-meta-value,
html[data-theme='dark'] .top-bar.top-bar-redesign .ohl-value,
html[data-theme='dark'] .top-bar.top-bar-redesign .session-main,
html[data-theme='dark'] .top-bar.top-bar-redesign .price-label,
html[data-theme='dark'] .top-bar.top-bar-redesign .session-mini-value {
  color: var(--text-primary) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-meta-item .top-meta-key,
html[data-theme='dark'] .top-bar.top-bar-redesign .ohl-label,
html[data-theme='dark'] .top-bar.top-bar-redesign .session-sub,
html[data-theme='dark'] .top-bar.top-bar-redesign .session-mini-label {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card {
  border-color: color-mix(in srgb, var(--ticker-trend-color, var(--green)) 36%, var(--border-bright) 64%) !important;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--ticker-trend-color, var(--green)) 16%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-hover) 92%, transparent)) !important;
  box-shadow:
    0 14px 26px rgba(2, 6, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card .price-label.top-price-tag {
  border-color: color-mix(in srgb, var(--ticker-trend-color, var(--green)) 34%, var(--border-bright) 66%) !important;
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent) !important;
  color: color-mix(in srgb, var(--ticker-trend-color, var(--green)) 72%, var(--text-primary) 28%) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .price-value.top-trend-up,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card .price-change.top-trend-up,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-pct.top-trend-up {
  color: #34d399 !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .price-value.top-trend-down,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card .price-change.top-trend-down,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-pct.top-trend-down {
  color: #fb7185 !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .price-value.top-trend-neutral,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-card .price-change.top-trend-neutral,
html[data-theme='dark'] .top-bar.top-bar-redesign .top-price-pct.top-trend-neutral {
  color: #fbbf24 !important;
}

html[data-theme='dark'] .sidebar-profile-menu-card,
html[data-theme='dark'] .sidebar-profile-menu-header {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent)) !important;
  box-shadow:
    0 24px 54px -18px rgba(2, 6, 23, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .sidebar-quick-item-btn {
  color: var(--text-primary);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row:hover,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .sidebar-quick-item-btn:hover,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap.open .sidebar-quick-item-btn {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent) !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row .sidebar-quick-icon,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .sidebar-quick-icon {
  border-color: color-mix(in srgb, var(--border-bright) 74%, transparent) !important;
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent) !important;
  box-shadow:
    0 6px 14px rgba(2, 6, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-profile {
  border-color: rgba(56, 189, 248, 0.3) !important;
  background: rgba(14, 165, 233, 0.14) !important;
  color: #38bdf8 !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-learn {
  border-color: rgba(251, 191, 36, 0.3) !important;
  background: rgba(245, 158, 11, 0.14) !important;
  color: #f59e0b !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-feedback {
  border-color: rgba(192, 132, 252, 0.3) !important;
  background: rgba(168, 85, 247, 0.14) !important;
  color: #c084fc !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-ticket-replyed {
  border-color: rgba(251, 113, 133, 0.3) !important;
  background: rgba(244, 63, 94, 0.14) !important;
  color: #fb7185 !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-admin,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-quick-icon.kind-settings {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(51, 65, 85, 0.82) !important;
  color: #cbd5e1 !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row .sidebar-quick-label,
html[data-theme='dark'] .sidebar-profile-menu-email {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] .sidebar-profile-menu-name,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row:hover .sidebar-quick-label {
  color: var(--text-primary) !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-amber,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .learn-more-btn {
  border: 1px solid rgba(245, 158, 11, 0.24) !important;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--bg-surface) 92%, rgba(245, 158, 11, 0.08)),
    color-mix(in srgb, var(--bg-hover) 90%, rgba(245, 158, 11, 0.14))
  ) !important;
  box-shadow:
    0 10px 20px rgba(2, 6, 23, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-amber .sidebar-quick-label,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .learn-more-btn .sidebar-quick-label {
  color: #f8fafc !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .learn-more-btn .sidebar-quick-caret,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-amber .sidebar-quick-caret {
  color: #fbbf24 !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-amber:hover,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-amber:hover .sidebar-quick-label,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .learn-more-btn:hover,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .learn-more-btn:hover .sidebar-quick-label,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap.open .learn-more-btn,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap.open .learn-more-btn .sidebar-quick-label {
  color: #fbbf24 !important;
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap .learn-more-btn:hover .sidebar-quick-caret,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-row-wrap.open .learn-more-btn .sidebar-quick-caret,
html[data-theme='dark'] .sidebar-auth-wrap.sidebar-auth-signed-in .sidebar-profile-menu-row-amber:hover .sidebar-quick-caret {
  color: #f59e0b !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip {
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent) !important;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent) !important;
  color: var(--text-secondary) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 10px rgba(2, 6, 23, 0.18) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.slate {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent) !important;
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.amber,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.neutral {
  border-color: rgba(245, 158, 11, 0.28) !important;
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.rose,
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.bear {
  border-color: rgba(244, 63, 94, 0.28) !important;
  background: rgba(244, 63, 94, 0.14) !important;
  color: #fb7185 !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.bull {
  border-color: rgba(16, 185, 129, 0.28) !important;
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-chip.outline {
  background: transparent !important;
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-section-label {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-card {
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 96%, transparent), color-mix(in srgb, var(--bg-surface) 92%, transparent));
  box-shadow:
    0 18px 36px rgba(2, 6, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-topbar {
  border-bottom-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-row {
  border-bottom-color: color-mix(in srgb, var(--border-bright) 54%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-row:hover {
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-date,
html[data-theme='dark'] #page-tracking .tracking-log-v3-pnl.flat span {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-trades,
html[data-theme='dark'] #page-tracking .tracking-log-v3-ticker,
html[data-theme='dark'] #page-tracking .tracking-log-v3-pnl.flat,
html[data-theme='dark'] #page-tracking .tracking-log-v3-action {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-ticker,
html[data-theme='dark'] #page-tracking .tracking-log-v3-action {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  box-shadow:
    0 4px 12px rgba(2, 6, 23, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-action:hover {
  border-color: color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-pnl.profit {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.28);
  color: #34d399;
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-pnl.loss {
  background: rgba(244, 63, 94, 0.14);
  border-color: rgba(244, 63, 94, 0.28);
  color: #fb7185;
}

html[data-theme='dark'] #page-tracking .tracking-log-v3-pnl.flat {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 58%, transparent);
}

html[data-theme='dark'] #tradeDayPopup.popup-overlay {
  background: rgba(3, 10, 22, 0.58);
  backdrop-filter: blur(14px);
}

html[data-theme='dark'] #tradeDayPopup .popup-actions {
  border-top-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-title,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-stat-value,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-strike,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-data-value,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-footer-btn,
html[data-theme='dark'] #tradeDayPopup .trade-day-item-menu button:hover {
  color: var(--text-primary) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-title-sep,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-subtitle,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-subtitle-dot,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-eyebrow,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview-text,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-time,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-data-label,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-list-title,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-footer-copy,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-notes-label,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-loading,
html[data-theme='dark'] #tradeDayPopup .trade-day-item-menu button,
html[data-theme='dark'] #tradeDayPopup .trade-day-menu-btn {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview-panel,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-card,
html[data-theme='dark'] #tradeDayPopup .trade-day-item-menu,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-chip,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-summary-overflow,
html[data-theme='dark'] #tradeDayPopup .trade-day-menu-btn,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-footer-btn {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent) !important;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent) !important;
  box-shadow:
    0 8px 18px rgba(2, 6, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview-head,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-card-head,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-pnl-cell {
  border-color: color-mix(in srgb, var(--border-bright) 56%, transparent);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview-divider,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-stat,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-pnl-cell {
  border-color: color-mix(in srgb, var(--border-bright) 54%, transparent);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-chip-primary {
  border-color: rgba(56, 189, 248, 0.28) !important;
  background: rgba(14, 165, 233, 0.14) !important;
  color: #38bdf8 !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-option-tag,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-notes p {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent) !important;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent) !important;
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-option-tag.call {
  border-color: rgba(16, 185, 129, 0.28) !important;
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-option-tag.put {
  border-color: rgba(244, 63, 94, 0.28) !important;
  background: rgba(244, 63, 94, 0.14) !important;
  color: #fb7185 !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-data-value.is-mono,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-data-value.is-open,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-data-value.is-muted,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-summary-dash {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-empty-card {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  color: color-mix(in srgb, var(--text-secondary) 84%, transparent);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-empty-title {
  color: var(--text-primary);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-empty-copy {
  color: var(--text-secondary);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-title-sep {
  background: color-mix(in srgb, var(--text-secondary) 32%, transparent);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview-copy,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-section-title,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-status-pill.is-open,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-status-pill.is-complete,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-pnl-cell-mobile,
html[data-theme='dark'] #tradeDayPopup .trade-day-item-menu-divider {
  color: var(--text-secondary);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview-topbar,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-card-head,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-pnl-cell,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-pnl-cell-mobile,
html[data-theme='dark'] #tradeDayPopup .trade-day-item-menu-divider {
  border-color: color-mix(in srgb, var(--border-bright) 56%, transparent);
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-section-title,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-overview-copy,
html[data-theme='dark'] #tradeDayPopup .trade-day-item-menu button i,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-time i {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-summary-pill.stock-symbol-pill,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-symbol-pill.stock-symbol-pill {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent) !important;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent) !important;
  color: var(--text-primary) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-pnl-cell,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-pnl-cell-mobile,
html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-notes.is-empty p {
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-status-pill.is-open {
  border-color: rgba(56, 189, 248, 0.28) !important;
  background: rgba(14, 165, 233, 0.18) !important;
  color: #38bdf8 !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-status-pill.is-complete {
  border-color: rgba(16, 185, 129, 0.28) !important;
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-day-item-actions.open .trade-day-menu-btn {
  background: color-mix(in srgb, var(--bg-card) 94%, transparent) !important;
  border-color: color-mix(in srgb, var(--border-bright) 72%, transparent) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-day-item-menu button.danger:hover {
  background: rgba(244, 63, 94, 0.16) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-footer-btn.is-primary {
  border-color: transparent !important;
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.36) !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-footer-btn.is-primary:hover {
  background: #1d4ed8 !important;
}

html[data-theme='dark'] #tradeDayPopup .trade-detail-modal-primary-btn {
  background: #2563eb;
  color: #ffffff;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-system-meta {
  border-color: color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 22%, var(--border-bright) 78%) !important;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 8%, transparent), transparent 68%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 92%, transparent), color-mix(in srgb, var(--bg-surface) 88%, transparent)) !important;
  box-shadow:
    0 10px 24px rgba(2, 6, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-meta-item {
  background: color-mix(in srgb, var(--bg-hover) 94%, transparent) !important;
}

html[data-theme='dark'] .top-bar.top-bar-redesign .top-bar-title {
  color: color-mix(in srgb, var(--text-primary) 88%, #ffffff 12%) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-chart-shell,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-kpi,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-legend-item,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-headline,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-signal-pill,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-head-stat,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-kpi-card,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-stage,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-legend-item,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-meta,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-card,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-focus-stat,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-chart-wrap,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-chart-chip,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-stage-note-pill,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-metric,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-option-card,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-option-cell,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-card,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-row,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-flow-pill,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajectory-point-detail.trajneo-detail-card {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--bg-hover) 90%, transparent)
    ) !important;
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
    0 10px 22px color-mix(in srgb, #000000 24%, transparent) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-shell,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-shell {
  color: var(--text-primary) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-kpi-label,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-kpi-sub,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-axis-label,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-date,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-rec {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-kpi-value,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-day-name,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-detail-main-val,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-detail-side-val {
  color: var(--text-primary) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-day-btn {
  border-color: color-mix(in srgb, var(--border-bright) 66%, transparent);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--bg-surface) 94%, transparent),
      color-mix(in srgb, var(--bg-hover) 90%, transparent)
    );
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajx-day-btn.active {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
}

/* Profile Hub Billing & Upgrade Colors Refactor */

/* Sidebar Upgrade Card */
.upgrade-card-mini {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cyan) 10%, transparent), color-mix(in srgb, var(--cyan-dim) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--cyan) 20%, transparent);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.upgrade-card-mini-icon {
  font-size: 24px;
  color: var(--cyan);
  margin-bottom: 8px;
}

.upgrade-card-mini-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.upgrade-card-mini-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.upgrade-card-mini-btn {
  width: 100%;
}

/* Billing Hero */
.billing-hero {
  --profile-hub-accent: #d97706;
  overflow: hidden;
}

.billing-kicker {
  color: var(--profile-hub-accent) !important;
}

.billing-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.billing-plan-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
  border-radius: 26px !important;
  padding: 24px !important;
  min-height: 100%;
  box-shadow:
    0 22px 44px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.billing-plan-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 28px 56px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.billing-plan-card.is-current-plan {
  border-color: color-mix(in srgb, var(--cyan) 42%, transparent) !important;
  box-shadow:
    0 32px 62px rgba(14, 116, 144, 0.14),
    0 0 0 1px color-mix(in srgb, var(--cyan) 24%, transparent) inset;
}

.billing-plan-card-standard {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 55%, transparent) 0%, color-mix(in srgb, var(--bg-card) 88%, transparent) 100%) !important;
}

.billing-plan-card-plus {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cyan) 9%, transparent) 0%, color-mix(in srgb, var(--bg-card) 88%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--cyan) 32%, transparent) !important;
}

.billing-plan-card-pro {
  background:
    linear-gradient(180deg, color-mix(in srgb, #7c3aed 9%, transparent) 0%, color-mix(in srgb, var(--bg-card) 88%, transparent) 100%) !important;
  border-color: color-mix(in srgb, #7c3aed 32%, transparent) !important;
}

.billing-plan-card-glow,
.billing-plan-card-noise {
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.billing-plan-card-glow {
  width: 220px;
  height: 220px;
  border-radius: 999px;
  right: -72px;
  top: -88px;
  opacity: 0.7;
  filter: blur(18px);
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 35%, transparent) 0%, transparent 66%);
  animation: billing-card-float 8s ease-in-out infinite;
}

.billing-plan-card-pro .billing-plan-card-glow {
  background: radial-gradient(circle, color-mix(in srgb, #7c3aed 38%, transparent) 0%, transparent 68%);
}

.billing-plan-card-noise {
  inset: 0;
  opacity: 0.28;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.34), transparent 26%, transparent 74%, rgba(255,255,255,0.12)),
    radial-gradient(circle at top left, rgba(255,255,255,0.2), transparent 36%);
}

.billing-plan-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 7px 12px;
  max-width: calc(100% - 32px);
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 80%, white 20%), color-mix(in srgb, #22d3ee 82%, white 18%));
  color: #04111f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(6, 182, 212, 0.2);
  z-index: 3;
}

.billing-plan-card-badge.pro {
  background: linear-gradient(90deg, #a78bfa, #818cf8);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.24);
}

.billing-plan-card-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.billing-plan-card-badge + .billing-plan-card-head {
  padding-top: 44px;
}

.billing-plan-head-copy {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.billing-plan-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}

.billing-plan-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
}

.billing-plan-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: 0;
  text-align: center;
}

.billing-plan-price span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

.billing-plan-description {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 18px;
  text-align: center;
}

.billing-plan-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.billing-plan-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.55;
}

.billing-feature-icon {
  color: var(--cyan);
  margin-top: 2px;
}

.billing-plan-card-pro .billing-feature-icon {
  color: #8b5cf6;
}

.billing-plan-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 52%, transparent);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.billing-upgrade-btn {
  width: 100%;
  min-height: 44px;
}

.billing-plan-change-panel {
  width: min(640px, 100%);
  padding: 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-card) 98%, transparent);
}

.billing-plan-change-current {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
}

.billing-plan-change-card {
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
  box-shadow: none !important;
  padding: 18px !important;
}

.billing-plan-change-card .card-title {
  margin-bottom: 12px;
}

.billing-plan-change-actions {
  align-items: stretch;
}

.billing-plan-change-actions > button,
.billing-plan-change-actions form {
  flex: 1 1 180px;
}

.billing-plan-change-actions button {
  width: 100%;
}

@keyframes billing-card-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-8px, 10px, 0) scale(1.04); }
}

@media (max-width: 1120px) {
  .billing-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .billing-plan-change-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-plan-change-actions > button,
  .billing-plan-change-actions form {
    flex: 1 1 auto;
  }
}

@media (max-width: 1380px) {
  .billing-plan-card-badge + .billing-plan-card-head {
    padding-top: 48px;
  }
}

/* ===== AUTH MODAL GUI REFRESH ===== */
#authModalOverlay {
  background: rgba(248, 250, 252, 0.78);
  backdrop-filter: blur(18px);
}

#authModalOverlay::before,
#authModalOverlay::after {
  content: "";
  position: fixed;
  width: 42vw;
  height: 42vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 999px;
  filter: blur(120px);
  pointer-events: none;
  opacity: 0.85;
}

#authModalOverlay::before {
  top: 18%;
  left: 14%;
  background: rgba(96, 165, 250, 0.22);
}

#authModalOverlay::after {
  right: 12%;
  bottom: 14%;
  background: rgba(129, 140, 248, 0.22);
}

#authModalPanel.auth-modal.simple-auth-modal {
  position: relative;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

#authModalPanel .auth-card-shell {
  width: 100%;
  max-height: calc(100dvh - 116px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 40px 40px 0 0;
  box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.18);
  scrollbar-gutter: stable both-edges;
}

#authModalPanel .auth-card-shell::-webkit-scrollbar {
  width: 8px;
}

#authModalPanel .auth-card-shell::-webkit-scrollbar-track {
  background: transparent;
}

#authModalPanel .auth-card-shell::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}

#authModalPanel .auth-legal {
  margin: 0;
  padding: 22px 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  background: rgba(248, 250, 252, 0.56);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(241, 245, 249, 0.92);
  border-radius: 0 0 40px 40px;
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.12);
}

#authModalPanel .auth-legal a {
  color: #475569;
  font-weight: 800;
  text-decoration: none;
}

#authModalPanel .auth-legal a:hover {
  color: #4f46e5;
}

#authModalPanel .auth-tabbar {
  display: flex;
  position: relative;
  padding: 6px;
  margin-bottom: 32px;
  border: 0;
  border-radius: 16px;
  background: rgba(241, 245, 249, 0.7);
}

#authModalPanel .auth-tab-indicator {
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#authModalPanel .auth-tabbar.register .auth-tab-indicator {
  transform: translateX(calc(100% + 6px));
}

#authModalPanel .auth-tab-btn {
  min-height: 48px;
  border-radius: 12px;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

#authModalPanel .auth-tab-btn.active {
  color: #0f172a;
}

#authModalPanel .auth-view.active {
  min-height: 380px;
}

#authModalPanel .auth-form-stack {
  display: grid;
  gap: 16px;
}

#authModalPanel .auth-login-stack {
  gap: 18px;
}

#authModalPanel .auth-field.is-hidden {
  display: none;
}

#authModalPanel .auth-login-hero {
  display: grid;
  justify-items: center;
  gap: 24px;
  margin-bottom: 6px;
}

#authModalPanel .auth-login-brand {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #3b82f6, #4f46e5);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
}

#authModalPanel .auth-login-copy {
  text-align: center;
}

#authModalPanel .auth-returning-user-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.78);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

#authModalPanel .auth-returning-user-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

#authModalPanel .auth-returning-user-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  background: linear-gradient(135deg, #e2e8f0, #ffffff);
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

#authModalPanel .auth-returning-user-avatar.has-image {
  color: transparent;
}

#authModalPanel .auth-returning-user-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#authModalPanel .auth-returning-user-kicker {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#authModalPanel .auth-returning-user-title {
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

#authModalPanel .auth-returning-user-subtitle {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

#authModalPanel .auth-returning-user-alt {
  width: fit-content;
  padding: 0;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: 0;
}

#authModalPanel .auth-returning-user-alt:hover {
  color: #4338ca;
  text-decoration: underline;
}

#authModalPanel .auth-field {
  display: grid;
  gap: 8px;
}

#authModalPanel .auth-field-label {
  margin-left: 4px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#authModalPanel .auth-step-title {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

#authModalPanel .auth-step-helper {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.55;
}

#authModalPanel .auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#authModalPanel .auth-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 20px;
  pointer-events: none;
  transition: color 0.2s ease;
}

#authModalPanel .auth-react-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#authModalPanel .auth-input-wrap:focus-within .auth-input-icon {
  color: #6366f1;
}

#authModalPanel .auth-input-field {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.68);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  color: #0f172a;
  font-size: 16px;
  transition: all 0.3s ease;
}

#authModalPanel .auth-input-field.with-icon {
  padding-left: 48px;
}

#authModalPanel .auth-input-field::placeholder {
  color: #94a3b8;
}

#authModalPanel .auth-input-field:focus {
  outline: none;
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 0 0 2px #6366f1;
}

#authModalPanel .auth-input-field[type="password"] {
  letter-spacing: 0.08em;
}

#authModalPanel .auth-password-status-wrap .auth-input-field.with-icon,
#authModalPanel .auth-recovery-code-wrap .auth-input-field.with-icon {
  padding-right: 48px;
}

#authModalPanel .auth-password-status-wrap.is-verified .auth-input-field,
#authModalPanel .auth-recovery-code-wrap.is-verified .auth-input-field {
  background: rgba(209, 250, 229, 0.34);
  border-color: #6ee7b7;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}

#authModalPanel .auth-password-status-wrap.is-invalid .auth-input-field,
#authModalPanel .auth-recovery-code-wrap.is-invalid .auth-input-field {
  background: rgba(255, 241, 242, 0.56);
  border-color: #fda4af;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.14);
}

#authModalPanel .auth-password-status-icon,
#authModalPanel .auth-recovery-verified-icon {
  right: 16px;
  color: #94a3b8;
}

#authModalPanel .auth-password-status-wrap.is-verified .auth-password-status-icon,
#authModalPanel .auth-recovery-code-wrap.is-verified .auth-recovery-verified-icon {
  color: #10b981;
}

#authModalPanel .auth-password-status-wrap.is-invalid .auth-password-status-icon,
#authModalPanel .auth-recovery-code-wrap.is-invalid .auth-recovery-verified-icon {
  color: #f43f5e;
}

#authModalPanel .auth-forgot-wrap {
  justify-content: flex-end;
  margin-top: -4px;
}

#authModalPanel .auth-forgot-link {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

#authModalPanel .auth-forgot-link:hover {
  color: #4f46e5;
}

#authModalPanel .auth-main-btn,
#authModalPanel .auth-gradient-btn,
#authModalPanel .auth-reg-complete-actions .btn.btn-primary,
#authModalPanel .auth-recovery-code-actions .btn.btn-primary {
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, #3b82f6, #4f46e5);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.22);
  transition: all 0.3s ease;
}

#authModalPanel .auth-main-btn:hover:not(:disabled),
#authModalPanel .auth-gradient-btn:hover:not(:disabled),
#authModalPanel .auth-reg-complete-actions .btn.btn-primary:hover:not(:disabled),
#authModalPanel .auth-recovery-code-actions .btn.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 18px 28px -10px rgba(59, 130, 246, 0.3);
  background: linear-gradient(90deg, #2563eb, #4338ca);
}

#authModalPanel .auth-main-btn:disabled,
#authModalPanel .auth-gradient-btn:disabled,
#authModalPanel .auth-reg-complete-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

#authModalPanel .auth-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.25s ease;
}

#authModalPanel .auth-main-btn:hover .auth-btn-icon,
#authModalPanel .auth-gradient-btn:hover .auth-btn-icon {
  transform: translateX(2px);
}

#authModalPanel .auth-register-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

#authModalPanel #authRegisterNextBtn,
#authModalPanel .auth-register-actions .auth-gradient-btn {
  flex: 1;
}

#authModalPanel .auth-back-btn,
#authModalPanel .auth-reg-complete-actions .btn.btn-secondary,
#authModalPanel .auth-recovery-code-actions .btn.btn-secondary,
#authModalPanel .auth-mode-review-help {
  min-height: 56px;
  padding: 0 20px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.68);
  background: rgba(255, 255, 255, 0.62);
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: all 0.3s ease;
}

#authModalPanel .auth-back-btn:hover,
#authModalPanel .auth-reg-complete-actions .btn.btn-secondary:hover,
#authModalPanel .auth-recovery-code-actions .btn.btn-secondary:hover,
#authModalPanel .auth-mode-review-help:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

#authModalPanel .auth-step-track {
  height: 6px;
  margin: 0 0 32px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}

#authModalPanel .auth-step-fill {
  background: linear-gradient(90deg, #34d399, #6366f1);
  transition: width 0.5s ease-out;
}

#authModalPanel .auth-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 6px;
  margin-bottom: 24px;
}

#authModalPanel .auth-mode-grid::-webkit-scrollbar {
  width: 6px;
}

#authModalPanel .auth-mode-grid::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

#authModalPanel .auth-mode-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 144px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.68);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
  transition: all 0.3s ease;
}

#authModalPanel .auth-mode-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

#authModalPanel .auth-mode-card.is-selected {
  border-color: #34d399;
  background:
    radial-gradient(circle at top right, rgba(209, 250, 229, 0.72), transparent 52%),
    rgba(209, 250, 229, 0.36);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.08);
  transform: scale(1.02);
}

#authModalPanel .auth-mode-card-main {
  gap: 10px;
}

#authModalPanel .auth-mode-card-main strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

#authModalPanel .auth-mode-card-chip {
  min-height: 22px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

#authModalPanel .auth-mode-card.is-selected .auth-mode-card-chip {
  border-color: #a7f3d0;
  background: #d1fae5;
  color: #047857;
}

#authModalPanel .auth-mode-card-copy {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

#authModalPanel .auth-mode-summary-card {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  background: #f8fafc;
}

#authModalPanel .auth-mode-summary-top {
  align-items: center;
}

#authModalPanel .auth-mode-summary-label {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

#authModalPanel .auth-mode-summary-pill {
  min-width: 42px;
  min-height: 24px;
  padding: 0 8px;
  background: #0f172a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

#authModalPanel .auth-mode-summary-title {
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
}

#authModalPanel .auth-mode-summary-copy,
#authModalPanel .auth-mode-inline-note {
  color: #64748b;
  font-size: 14px;
  line-height: 1.55;
}

#authModalPanel .auth-mode-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#authModalPanel .auth-consent-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.68);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

#authModalPanel .auth-consent-card:hover {
  background: #ffffff;
  transform: none;
  border-color: #cbd5e1;
  box-shadow: none;
}

#authModalPanel .auth-consent-check {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
}

#authModalPanel .auth-consent-card input:checked + .auth-consent-check {
  border-color: #10b981;
  background: #10b981;
  color: #ffffff;
}

#authModalPanel .auth-consent-copy {
  gap: 4px;
  color: #64748b;
  font-size: 14px;
}

#authModalPanel .auth-consent-copy strong {
  color: #0f172a;
  font-size: 15px;
}

#authModalPanel .auth-consent-card input:checked ~ .auth-consent-copy strong {
  color: #065f46;
}

#authModalPanel .auth-consent-card input:checked ~ .auth-consent-copy a {
  color: #059669;
}

#authModalPanel .auth-consent-copy a {
  color: #4f46e5;
}

#authModalPanel .auth-reg-overview-card {
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.68);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#authModalPanel .auth-reg-overview-row {
  padding: 12px 14px;
  font-size: 14px;
  color: #64748b;
}

#authModalPanel .auth-reg-overview-row + .auth-reg-overview-row {
  border-top: 1px solid #f1f5f9;
}

#authModalPanel .auth-reg-overview-row strong {
  color: #0f172a;
}

#authModalPanel .auth-reg-avatar-block {
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

#authModalPanel .auth-reg-avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 20px;
  font-weight: 900;
}

#authModalPanel .auth-reg-avatar-copy {
  gap: 4px;
}

#authModalPanel .auth-reg-upload-btn {
  width: 100%;
  min-height: 48px;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px dashed #cbd5e1;
  background: transparent;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
}

#authModalPanel .auth-reg-upload-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #334155;
}

#authModalPanel .auth-message {
  min-height: 18px;
  margin-top: 16px;
  color: #64748b;
  font-size: 13px;
}

#authModalPanel .auth-message.error {
  color: #f43f5e;
}

#authModalPanel .auth-message.success {
  color: #10b981;
}

#authModalPanel .auth-view-recovery {
  padding: 0;
  border: 0;
  background: transparent;
}

#authModalPanel .auth-recovery-head {
  margin-bottom: 8px;
}

#authModalPanel .auth-recovery-back {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.68);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#authModalPanel .auth-recovery-back:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

#authViewLogin.auth-login-slide-active #authLoginForm {
  display: none;
}

#authModalPanel .auth-login-success-panel,
#authModalPanel .auth-register-complete-panel {
  display: none;
}

#authModalPanel .auth-login-success-panel.visible,
#authModalPanel .auth-register-complete-panel.visible {
  display: block;
  animation: authZoomIn 0.45s ease both;
}

#authModalPanel .auth-login-success-card,
#authModalPanel .auth-register-complete-panel {
  padding: 28px 24px;
  border-radius: 32px;
  border: 1px solid rgba(226, 232, 240, 0.7);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-align: center;
}

#authModalPanel .auth-login-success-card {
  display: grid;
  justify-items: center;
  gap: 12px;
}

#authModalPanel .auth-reg-final-svg {
  width: 100px;
  height: 100px;
  margin: 0 auto 18px;
}

#authModalPanel .auth-reg-final-svg .ring {
  stroke: #dbe5f0;
}

#authModalPanel .auth-reg-final-svg .scan {
  stroke: #6366f1;
}

#authModalPanel .auth-reg-final-svg .check {
  stroke: #10b981;
}

#authModalPanel .auth-login-success-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 320px);
  padding: 12px 14px;
  margin-top: -2px;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.78);
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.1), transparent 40%),
    rgba(248, 250, 252, 0.92);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

#authModalPanel .auth-login-success-identity.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#authModalPanel .auth-login-success-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  background: linear-gradient(135deg, #e2e8f0, #ffffff);
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

#authModalPanel .auth-login-success-avatar.has-image {
  color: transparent;
}

#authModalPanel .auth-login-success-identity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

#authModalPanel .auth-login-success-label {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#authModalPanel .auth-login-success-name {
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#authModalPanel .auth-reg-complete-title {
  color: #0f172a;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.025em;
}

#authModalPanel .auth-reg-complete-sub {
  margin: 10px auto 0;
  max-width: 320px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.55;
}

#authModalPanel .auth-recovery-code-card {
  margin-top: 20px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #dbe6f2;
  background: #f8fafc;
  text-align: left;
}

#authModalPanel .auth-recovery-code-label {
  color: #64748b;
}

#authModalPanel .auth-recovery-code-value {
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

#authModalPanel .auth-reg-complete-actions,
#authModalPanel .auth-recovery-code-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

#authModalPanel .auth-reg-complete-actions .btn,
#authModalPanel .auth-recovery-code-actions .btn {
  flex: 1 1 180px;
}

#authModalPanel .auth-login-success-panel.done #authLoginSuccessActions,
#authModalPanel .auth-register-complete-panel.done .auth-reg-complete-actions {
  display: flex;
}

html[data-theme='dark'] #authModalOverlay {
  background: rgba(15, 23, 42, 0.54);
}

html[data-theme='dark'] #authModalPanel .auth-card-shell,
html[data-theme='dark'] #authModalPanel .auth-legal,
html[data-theme='dark'] #authModalPanel .auth-login-success-card,
html[data-theme='dark'] #authModalPanel .auth-register-complete-panel,
html[data-theme='dark'] #authModalPanel .auth-recovery-code-card,
html[data-theme='dark'] #authModalPanel .auth-mode-summary-card,
html[data-theme='dark'] #authModalPanel .auth-reg-overview-card {
  color: #0f172a;
}

@media (min-width: 640px) {
  #authModalPanel .auth-mode-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  #authModalPanel.auth-modal.simple-auth-modal {
    width: min(540px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
  }

  #authModalPanel .auth-card-shell {
    max-height: calc(100dvh - 92px);
    padding: 24px;
    border-radius: 28px 28px 0 0;
  }

  #authModalPanel .auth-legal {
    padding: 18px 16px;
    border-radius: 0 0 28px 28px;
  }

  #authModalPanel .auth-view.active {
    min-height: auto;
  }

  #authModalPanel .auth-step-title {
    font-size: 26px;
  }

  #authModalPanel .auth-returning-user-main {
    align-items: flex-start;
  }

  #authModalPanel .auth-returning-user-title {
    font-size: 18px;
  }

  #authModalPanel .auth-step-helper,
  #authModalPanel .auth-mode-summary-copy,
  #authModalPanel .auth-mode-inline-note,
  #authModalPanel .auth-consent-copy,
  #authModalPanel .auth-reg-complete-sub {
    font-size: 14px;
  }

  #authModalPanel .auth-login-success-identity {
    width: 100%;
    padding: 12px;
  }

  #authModalPanel .auth-login-success-name {
    font-size: 16px;
  }

  #authModalPanel .auth-register-actions,
  #authModalPanel .auth-reg-complete-actions {
    flex-direction: column;
  }

  #authModalPanel .auth-back-btn,
  #authModalPanel #authRegisterNextBtn,
  #authModalPanel .auth-reg-complete-actions .btn {
    width: 100%;
  }
}

/* ===== TRACKING LOG UI REFRESH ===== */
#page-tracking .tracking-log-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#page-tracking .tracking-log-card::before {
  content: none !important;
}

#page-tracking .tracking-log-card > .card-title {
  display: none !important;
}

#page-tracking #tradeLogArea {
  min-width: 0;
}

#page-tracking .tracking-log-v4-module {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e2e8f0;
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  animation: fade-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#page-tracking .tracking-log-v4-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: rgba(248, 250, 252, 0.34);
  border-radius: 32px 32px 0 0;
}

#page-tracking .tracking-log-v4-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#page-tracking .tracking-log-v4-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  color: #ef4444;
  box-shadow: 0 16px 24px -24px rgba(239, 68, 68, 0.88);
}

#page-tracking .tracking-log-v4-title-icon svg,
#page-tracking .tracking-log-v4-title-icon i {
  display: block;
  width: 22px;
  height: 22px;
  color: inherit;
  font-size: 22px;
  line-height: 1;
}

#page-tracking .tracking-log-v4-export {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid #3b82f6;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f8ef9, #3b82f6);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(59, 130, 246, 0.18);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

#page-tracking .tracking-log-v4-export i {
  font-size: 16px;
}

#page-tracking .tracking-log-v4-export:hover {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(37, 99, 235, 0.22);
}

#page-tracking .tracking-log-v4-export:disabled,
#page-tracking .tracking-log-v4-export[aria-disabled='true'] {
  background: #cbd5e1;
  color: #ffffff;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}

#page-tracking .tracking-log-v4-list {
  overflow: hidden;
  border: 0;
  border-radius: 0 0 32px 32px;
  background: transparent;
  box-shadow: none;
}

#page-tracking .tracking-log-v4-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s ease;
}

#page-tracking .tracking-log-v4-row:last-child {
  border-bottom: 0;
}

#page-tracking .tracking-log-v4-row:hover {
  background: #f8fafc;
}

#page-tracking .tracking-log-v4-left {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

#page-tracking .tracking-log-v4-date-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 104px;
}

#page-tracking .tracking-log-v4-date {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#page-tracking .tracking-log-v4-trades {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#page-tracking .tracking-log-v4-tickers {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#page-tracking .tracking-log-v4-ticker {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

#page-tracking .tracking-log-v4-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

#page-tracking .tracking-log-v4-pnl {
  min-width: 118px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#page-tracking .tracking-log-v4-pnl i {
  font-size: 15px;
}

#page-tracking .tracking-log-v4-pnl.gain {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

#page-tracking .tracking-log-v4-pnl.loss {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #e11d48;
}

#page-tracking .tracking-log-v4-pnl.neutral {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

#page-tracking .tracking-log-v4-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#page-tracking .tracking-log-v4-action {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #94a3b8;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

#page-tracking .tracking-log-v4-action i {
  font-size: 16px;
}

#page-tracking .tracking-log-v4-action:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
  transform: translateY(-1px);
}

#page-tracking .tracking-log-v4-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: 36px 24px;
}

@media (max-width: 980px) {
  #page-tracking .tracking-log-v4-header {
    flex-direction: column;
    align-items: stretch;
  }

  #page-tracking .tracking-log-v4-export {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #page-tracking .tracking-log-v4-row {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
  }

  #page-tracking .tracking-log-v4-left,
  #page-tracking .tracking-log-v4-right {
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  #page-tracking .tracking-log-v4-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  #page-tracking .tracking-log-v4-right {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #page-tracking .tracking-log-v4-pnl {
    width: 100%;
    min-width: 0;
  }

  #page-tracking .tracking-log-v4-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #page-tracking .tracking-log-v4-action {
    width: 100%;
    height: 40px;
  }
}

html[data-theme='dark'] #page-tracking .tracking-log-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-module {
  border-color: color-mix(in srgb, var(--border-bright) 70%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 96%, transparent),
      color-mix(in srgb, var(--bg-surface) 92%, transparent)
    );
  box-shadow:
    0 18px 36px rgba(2, 6, 23, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-header {
  border-bottom-color: color-mix(in srgb, var(--border-bright) 56%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-title {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-title-icon {
  border-color: color-mix(in srgb, #ef4444 42%, var(--border-bright) 58%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, #ef4444 24%, var(--bg-card) 76%) 0%,
      color-mix(in srgb, #ef4444 12%, var(--bg-surface) 88%) 100%
    ) !important;
  color: #f87171;
  box-shadow:
    0 16px 30px color-mix(in srgb, #000000 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-date {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-export {
  background: color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 78%, #1d4ed8 22%);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 28%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-export:hover {
  background: color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 88%, #0f172a 12%);
  box-shadow: 0 12px 22px color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 24%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-export:disabled,
html[data-theme='dark'] #page-tracking .tracking-log-v4-export[aria-disabled='true'] {
  background: color-mix(in srgb, var(--bg-hover) 92%, transparent);
  color: var(--text-muted);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-list {
  background: transparent;
  box-shadow: none;
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-row {
  border-bottom-color: color-mix(in srgb, var(--border-bright) 56%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-row:hover {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-trades,
html[data-theme='dark'] #page-tracking .tracking-log-v4-ticker,
html[data-theme='dark'] #page-tracking .tracking-log-v4-pnl.neutral,
html[data-theme='dark'] #page-tracking .tracking-log-v4-action {
  color: var(--text-secondary);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-ticker,
html[data-theme='dark'] #page-tracking .tracking-log-v4-action,
html[data-theme='dark'] #page-tracking .tracking-log-v4-pnl.neutral {
  border-color: color-mix(in srgb, var(--border-bright) 60%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-action:hover {
  border-color: color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 28%, var(--border-bright) 72%);
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  color: var(--text-primary);
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-pnl.gain {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.28);
  color: #34d399;
}

html[data-theme='dark'] #page-tracking .tracking-log-v4-pnl.loss {
  background: rgba(244, 63, 94, 0.14);
  border-color: rgba(244, 63, 94, 0.28);
  color: #fb7185;
}

/* Compact trajectory graph redesign */
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell * {
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-card {
  border: 1px solid rgba(219, 229, 240, 0.92);
  border-radius: 24px;
  background: #ffffff;
  padding: 18px 18px 16px;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.05),
    0 4px 10px rgba(15, 23, 42, 0.04);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-inline-icon svg {
  width: 16px;
  height: 16px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.03);
  overflow-x: auto;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: fit-content;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  color: #0f172a;
  white-space: nowrap;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-divider {
  width: 1px;
  height: 26px;
  background: #cbd5e1;
  flex: 0 0 auto;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-visual {
  display: grid;
  gap: 10px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-plot-area {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-y-axis {
  position: relative;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-y-tick {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #94a3b8;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-svg-frame {
  position: relative;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-svg-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 284;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, 0.06), transparent 58%),
    radial-gradient(110% 130% at 100% 0%, rgba(16, 185, 129, 0.07), transparent 62%),
    linear-gradient(180deg, #f8fbff 0%, #eef7ff 100%);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-line {
  stroke: #e2e8f0;
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-vert {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-vert.is-now {
  stroke: rgba(59, 130, 246, 0.52);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-base-line {
  stroke: #cbd5e1;
  stroke-width: 1.1;
  stroke-dasharray: 4 4;
  animation: trajgraphDashDrift 7.8s linear infinite;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-history-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 8;
  opacity: 0.94;
  animation: trajgraphDashDrift 6.2s linear infinite;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-cone {
  opacity: 0.82;
  transform-origin: center;
  animation: trajgraphBreatheCone 7.2s ease-in-out infinite;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-animate-in .trajgraph-cone {
  opacity: 0;
  animation: trajgraphFadeIn 0.9s ease forwards 0.6s, trajgraphBreatheCone 7.2s ease-in-out infinite 1.6s;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-main-line-shadow {
  fill: none;
  stroke: rgba(14, 165, 233, 0.15);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-main-line {
  fill: none;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-animate-in .trajgraph-main-line {
  stroke-dasharray: var(--trajgraph-line-len);
  stroke-dashoffset: var(--trajgraph-line-len);
  animation: trajgraphDrawLine 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-main-energy {
  fill: none;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 38;
  stroke-dashoffset: 0;
  opacity: 0.62;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.86));
  animation: trajgraphFlowEnergy 2.6s linear infinite;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-animate-in .trajgraph-main-energy {
  stroke-dashoffset: var(--trajgraph-line-len);
  opacity: 0;
  animation: trajgraphDrawLine 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, trajgraphFlowEnergy 2.6s linear infinite 1.8s;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-error-group {
  transition: opacity 220ms ease, transform 220ms ease;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-error-line,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-error-cap {
  stroke: var(--point-tone, #f59e0b);
  stroke-linecap: round;
  opacity: 0.42;
  transition: opacity 180ms ease, stroke-width 180ms ease, filter 180ms ease;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-error-line {
  stroke-width: 2;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-error-cap {
  stroke-width: 3;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-error-group.is-active .trajgraph-error-line,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-error-group.is-active .trajgraph-error-cap {
  opacity: 1;
  stroke-width: 3.6;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--point-tone, #f59e0b) 42%, transparent));
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-point {
  cursor: default;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-point[data-clickable="true"] {
  cursor: pointer;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-sonar {
  fill: none;
  stroke: var(--point-tone, #f59e0b);
  opacity: 0;
  stroke-width: 2;
  pointer-events: none;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-dot {
  fill: #ffffff;
  stroke: var(--point-tone, #f59e0b);
  stroke-width: 3.5;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), stroke-width 220ms ease, filter 220ms ease, fill 220ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-point.is-active .trajgraph-dot {
  fill: var(--point-tone, #f59e0b);
  stroke: #ffffff;
  stroke-width: 4.4;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--point-tone, #f59e0b) 32%, transparent));
  transform: scale(1.08);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-point.is-active .trajgraph-sonar {
  animation: trajgraphPulseSonar 2.6s ease-out infinite;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-line {
  stroke: color-mix(in srgb, var(--point-tone, #10b981) 72%, rgba(255, 255, 255, 0.42) 28%);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.82;
  animation: trajgraphDashDrift 5.2s linear infinite;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-spot {
  fill: color-mix(in srgb, var(--point-tone, #10b981) 16%, transparent);
  stroke: color-mix(in srgb, var(--point-tone, #10b981) 22%, transparent);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-dot {
  stroke: #ffffff;
  stroke-width: 3;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--point-tone, #10b981) 34%, transparent));
  transform-box: fill-box;
  transform-origin: center;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-label-bg {
  fill: rgba(15, 23, 42, 0.96);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-label-text {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-end-halo {
  fill: color-mix(in srgb, var(--point-tone, #10b981) 16%, transparent);
  opacity: 0.78;
  animation: trajgraphEndpointPulse 3.2s ease-in-out infinite;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-end-core {
  fill: var(--point-tone, #10b981);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-axis {
  position: relative;
  margin-left: 70px;
  height: 34px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-active {
  color: #ffffff;
  background: #0f172a;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  transform: translateX(-50%) translateY(-2px);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .color-indigo {
  color: #4f46e5;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .color-amber {
  color: #f59e0b;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .color-emerald {
  color: #10b981;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .color-rose {
  color: #f43f5e;
}

@keyframes trajgraphDrawLine {
  from {
    stroke-dashoffset: var(--trajgraph-line-len);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes trajgraphDashDrift {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -28;
  }
}

@keyframes trajgraphFadeIn {
  to {
    opacity: 0.82;
  }
}

@keyframes trajgraphBreatheCone {
  0%, 100% {
    opacity: 0.74;
  }
  50% {
    opacity: 0.9;
    transform: scaleY(1.012);
  }
}

@keyframes trajgraphFlowEnergy {
  from {
    stroke-dashoffset: 60;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes trajgraphPulseSonar {
  0% {
    r: 6;
    opacity: 0.55;
    stroke-width: 0;
  }
  100% {
    r: 22;
    opacity: 0;
    stroke-width: 2;
  }
}

@keyframes trajgraphEndpointPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

@media (max-width: 900px) {
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-card {
    padding: 16px 14px 14px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-plot-area {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-axis {
    margin-left: 58px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label {
    font-size: 11px;
    padding: 5px 7px;
  }
}

@media (max-width: 700px) {
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-header-row {
    align-items: stretch;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stats-bar {
    width: 100%;
    padding: 9px 10px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-y-tick {
    font-size: 10px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-cone,
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-base-line,
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-history-line,
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-main-line,
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-main-energy,
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-line,
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-sonar,
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-end-halo {
    animation: none !important;
  }
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-card {
  border-color: color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 96%, transparent),
    color-mix(in srgb, var(--bg-surface) 92%, transparent)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 26px rgba(0, 0, 0, 0.26);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-value {
  color: var(--text-primary);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-label,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-y-tick,
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label {
  color: var(--text-muted);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stats-bar {
  border-color: color-mix(in srgb, var(--border-bright) 58%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-divider {
  background: color-mix(in srgb, var(--border-bright) 62%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-svg-stage {
  border-color: color-mix(in srgb, var(--border-bright) 54%, transparent);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, 0.12), transparent 58%),
    radial-gradient(110% 130% at 100% 0%, rgba(16, 185, 129, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(14, 23, 38, 0.96) 0%, rgba(10, 18, 30, 0.98) 100%);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-line {
  stroke: color-mix(in srgb, var(--border-bright) 24%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-vert {
  stroke: color-mix(in srgb, var(--border-bright) 20%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-base-line {
  stroke: color-mix(in srgb, var(--text-primary) 22%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-active {
  background: color-mix(in srgb, var(--bg-surface) 12%, #ffffff 88%);
  color: #0f172a;
}

/* ===== UNIVERSAL BUTTON PRESS MOTION ===== */
:where(button, a[role="button"]) {
  --ultron-button-press-shift: 2px;
  --ultron-button-press-scale: 0.985;
  --ultron-button-press-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

:where(
  .btn-primary,
  .tracking-log-modern-export,
  .tracking-add-btn,
  .auth-main-btn,
  .auth-gradient-btn,
  #feedbackSaveBtn,
  .system-updates-admin-btn,
  .ultron-access-primary-btn
) {
  --ultron-button-press-shadow: 0 6px 14px rgba(14, 165, 233, 0.18);
}

:where(
  .btn-danger,
  .trade-action-btn.danger,
  .history-delete-btn,
  .pred-layout-trash,
  .all-forecast-trash-btn,
  .profile-hub-sidebar-btn.signout
) {
  --ultron-button-press-shadow: 0 6px 14px rgba(225, 29, 72, 0.18);
}

:where(
  .btn-secondary,
  .profile-hub-sidebar-btn,
  .profile-upload-btn,
  .profile-hub-tab,
  .sidebar-auth-pill,
  .trade-action-btn,
  .feedback-choice-btn,
  .surge-action-btn,
  .popup-close-btn,
  .top-header-lock-btn,
  .filter-btn,
  .close-btn,
  .ultron-access-secondary-btn
) {
  --ultron-button-press-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

:where(button, a[role="button"]):not(.forecast-trigger):not(:disabled):active,
:where(a[role="button"]):not(.forecast-trigger):not([aria-disabled="true"]):active {
  transform: translateY(var(--ultron-button-press-shift)) scale(var(--ultron-button-press-scale)) !important;
  box-shadow: var(--ultron-button-press-shadow) !important;
}

:where(.btn-run-forecast, .action-btn-run, .action-btn-run-modern):not(:disabled):active {
  transform: translateY(1px) scale(0.99) !important;
}

/* ===== PREDICTION WORKSPACE OVERHAUL ===== */
#page-history .prediction-workspace-shell {
  --prediction-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  --prediction-surface: #ffffff;
  --prediction-surface-alt: #f8fafc;
  --prediction-border: #dbe5f0;
  --prediction-border-strong: #cbd5e1;
  --prediction-text: #0f172a;
  --prediction-muted: #64748b;
  --prediction-soft: #94a3b8;
  --prediction-accent: #2563eb;
  --prediction-accent-soft: rgba(37, 99, 235, 0.08);
  --prediction-success: #059669;
  --prediction-success-soft: rgba(16, 185, 129, 0.12);
  --prediction-warn: #ca8a04;
  --prediction-warn-soft: rgba(245, 158, 11, 0.12);
  --prediction-danger: #e11d48;
  --prediction-danger-soft: rgba(244, 63, 94, 0.1);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#page-history .prediction-workspace-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid var(--prediction-border);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(37, 99, 235, 0.07), transparent 42%),
    radial-gradient(100% 120% at 0% 0%, rgba(14, 165, 233, 0.06), transparent 38%),
    var(--prediction-bg);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

#page-history .prediction-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

#page-history .prediction-workspace-head-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(420px, 100%);
}

#page-history .prediction-workspace-kicker,
#page-history .prediction-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #475569;
}

#page-history .prediction-workspace-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#page-history .prediction-workspace-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--prediction-text);
}

#page-history .prediction-workspace-count {
  min-width: 42px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--prediction-border);
  background: rgba(255, 255, 255, 0.78);
  color: var(--prediction-text);
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#page-history .prediction-workspace-description {
  max-width: 760px;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--prediction-muted);
}

#page-history .prediction-workspace-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-history .prediction-workspace-banner {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.86);
  padding: 14px 16px;
}

#page-history .prediction-workspace-banner-text {
  margin: 0;
  color: var(--prediction-muted);
  font-size: 13px;
  line-height: 1.6;
}

#page-history .prediction-workspace-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--prediction-border);
  background: var(--prediction-surface);
}

#page-history .prediction-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

#page-history .prediction-section-title {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--prediction-text);
}

#page-history .prediction-section-meta {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--prediction-border);
  background: var(--prediction-surface-alt);
  color: var(--prediction-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-history .prediction-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#page-history .prediction-overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 138px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--prediction-border);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.92), transparent 54%),
    var(--prediction-surface-alt);
}

#page-history .prediction-overview-card::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  border-radius: 20px 20px 0 0;
  opacity: 0.9;
}

#page-history .prediction-overview-card.tone-review::after {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

#page-history .prediction-overview-card.tone-live::after {
  background: linear-gradient(90deg, #0ea5e9, #2563eb);
}

#page-history .prediction-overview-card.tone-coverage::after {
  background: linear-gradient(90deg, #14b8a6, #059669);
}

#page-history .prediction-overview-card.tone-manual::after {
  background: linear-gradient(90deg, #ec4899, #e11d48);
}

#page-history .prediction-overview-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #475569;
}

#page-history .prediction-overview-value {
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--prediction-text);
}

#page-history .prediction-overview-sub {
  font-size: 12px;
  line-height: 1.55;
  color: var(--prediction-muted);
}

#page-history .prediction-filter-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--prediction-border);
  background: var(--prediction-surface-alt);
}

#page-history .prediction-filter-search {
  display: flex;
  width: 100%;
}

#page-history .prediction-filter-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

#page-history .prediction-filter-search-icon {
  position: absolute;
  left: 14px;
  color: #64748b;
}

#page-history .prediction-filter-search-input {
  width: 100%;
  min-height: 50px;
  padding: 0 44px 0 42px;
  border-radius: 16px;
  border: 1px solid var(--prediction-border);
  background: #ffffff;
  color: var(--prediction-text);
  font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#page-history .prediction-filter-search-input::placeholder {
  color: #94a3b8;
}

#page-history .prediction-filter-search-input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

#page-history .prediction-filter-search-clear {
  position: absolute;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

#page-history .prediction-filter-search-clear:hover {
  background: rgba(148, 163, 184, 0.14);
  color: #334155;
}

#page-history .prediction-filter-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#page-history .prediction-filter-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

#page-history .prediction-filter-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#page-history .prediction-filter-pill {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--prediction-border);
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

#page-history span.prediction-filter-pill {
  cursor: default;
}

#page-history .prediction-filter-pill:hover:not(.is-static) {
  transform: translateY(-1px);
  border-color: var(--prediction-border-strong);
}

#page-history .prediction-filter-pill.is-active {
  border-color: #0f172a;
  background: #0f172a;
  color: #ffffff;
}

#page-history .prediction-filter-pill.is-static {
  background: rgba(255, 255, 255, 0.72);
  color: var(--prediction-muted);
}

#page-history .prediction-filter-pill-count {
  min-width: 20px;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
}

#page-history .prediction-filter-pill.is-active .prediction-filter-pill-count {
  background: rgba(255, 255, 255, 0.16);
}

#page-history .prediction-queue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#page-history .prediction-queue-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--prediction-border);
  background:
    radial-gradient(100% 120% at 100% 0%, rgba(255, 255, 255, 0.96), transparent 56%),
    #ffffff;
}

#page-history .prediction-queue-card.tone-review {
  border-color: rgba(245, 158, 11, 0.28);
  background:
    radial-gradient(100% 120% at 100% 0%, rgba(251, 191, 36, 0.12), transparent 56%),
    #ffffff;
}

#page-history .prediction-queue-card.tone-live {
  border-color: rgba(14, 165, 233, 0.24);
}

#page-history .prediction-queue-card.tone-upcoming {
  border-color: rgba(99, 102, 241, 0.24);
}

#page-history .prediction-queue-card.tone-correct {
  border-color: rgba(16, 185, 129, 0.28);
}

#page-history .prediction-queue-card.tone-incorrect {
  border-color: rgba(244, 63, 94, 0.24);
}

#page-history .prediction-queue-card-head,
#page-history .prediction-queue-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#page-history .prediction-queue-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#page-history .prediction-queue-symbol-pill,
#page-history .prediction-archive-symbol-pill,
#page-history .prediction-queue-session-pill,
#page-history .prediction-queue-tag {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#page-history .prediction-queue-symbol-pill,
#page-history .prediction-archive-symbol-pill {
  border: 1px solid rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

#page-history .prediction-queue-session-pill {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.1);
  color: #475569;
}

#page-history .prediction-queue-session-pill.session-open {
  border-color: rgba(14, 165, 233, 0.22);
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
}

#page-history .prediction-queue-session-pill.session-pre {
  border-color: rgba(99, 102, 241, 0.22);
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}

#page-history .prediction-queue-session-pill.session-after {
  border-color: rgba(168, 85, 247, 0.22);
  background: rgba(168, 85, 247, 0.1);
  color: #7e22ce;
}

#page-history .prediction-queue-tag {
  border: 1px solid rgba(203, 213, 225, 0.8);
  background: #f8fafc;
  color: #64748b;
}

#page-history .prediction-queue-card-status {
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--prediction-border);
  background: var(--prediction-surface-alt);
}

#page-history .prediction-queue-card-status span {
  font-size: 13px;
  font-weight: 900;
  color: var(--prediction-text);
}

#page-history .prediction-queue-card-status small {
  color: var(--prediction-muted);
  font-size: 11px;
  line-height: 1.45;
}

#page-history .prediction-queue-card-status.tone-review {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.1);
}

#page-history .prediction-queue-card-status.tone-live {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(14, 165, 233, 0.08);
}

#page-history .prediction-queue-card-status.tone-upcoming {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(99, 102, 241, 0.08);
}

#page-history .prediction-queue-card-status.tone-correct {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.08);
}

#page-history .prediction-queue-card-status.tone-incorrect {
  border-color: rgba(244, 63, 94, 0.24);
  background: rgba(244, 63, 94, 0.08);
}

#page-history .prediction-queue-card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#page-history .prediction-queue-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-history .prediction-queue-card-title-row h5 {
  margin: 0;
  font-size: 18px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--prediction-text);
}

#page-history .prediction-queue-card-window {
  color: var(--prediction-muted);
  font-size: 12px;
  font-weight: 700;
}

#page-history .prediction-queue-card-copy p {
  margin: 0;
  color: var(--prediction-muted);
  font-size: 13px;
  line-height: 1.55;
}

#page-history .prediction-queue-card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

#page-history .prediction-queue-card-price strong {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.05em;
}

#page-history .prediction-queue-card-price span {
  font-size: 13px;
  font-weight: 800;
}

#page-history .prediction-queue-card-price .is-pos {
  color: var(--prediction-success);
}

#page-history .prediction-queue-card-price .is-neg {
  color: var(--prediction-danger);
}

#page-history .prediction-queue-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-history .prediction-queue-card-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--prediction-border);
  background: var(--prediction-surface-alt);
}

#page-history .prediction-queue-card-metrics span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

#page-history .prediction-queue-card-metrics strong {
  font-size: 13px;
  line-height: 1.45;
  color: var(--prediction-text);
}

#page-history .prediction-queue-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#page-history .prediction-queue-btn,
#page-history .prediction-empty-action,
#page-history .prediction-archive-card-toggle {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--prediction-border);
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

#page-history .prediction-queue-btn:hover,
#page-history .prediction-empty-action:hover,
#page-history .prediction-archive-card-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--prediction-border-strong);
}

#page-history .prediction-queue-btn.is-primary,
#page-history .prediction-empty-action {
  border-color: #0f172a;
  background: #0f172a;
  color: #ffffff;
}

#page-history .prediction-queue-btn.is-primary:hover,
#page-history .prediction-empty-action:hover {
  background: #020617;
  border-color: #020617;
}

#page-history .prediction-queue-btn.is-secondary,
#page-history .prediction-archive-card-toggle {
  background: var(--prediction-surface-alt);
}

#page-history .prediction-workspace-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 160px;
  padding: 18px;
  border-radius: 20px;
  border: 1px dashed rgba(148, 163, 184, 0.44);
  background: rgba(248, 250, 252, 0.76);
}

#page-history .prediction-workspace-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #ffffff;
  color: #334155;
  display: grid;
  place-items: center;
  font-size: 26px;
  flex: 0 0 auto;
}

#page-history .prediction-workspace-empty-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 280px;
}

#page-history .prediction-workspace-empty-copy h5 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--prediction-text);
}

#page-history .prediction-workspace-empty-copy p {
  margin: 0;
  color: var(--prediction-muted);
  font-size: 13px;
  line-height: 1.6;
}

#page-history .prediction-tracked-windows .historyv2-window-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#page-history .prediction-archive-library,
#page-history .prediction-archive-group-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#page-history .prediction-archive-card {
  border: 1px solid var(--prediction-border);
  border-radius: 22px;
  background: #ffffff;
  overflow: hidden;
}

#page-history .prediction-archive-card.is-open {
  border-color: rgba(37, 99, 235, 0.24);
}

#page-history .prediction-archive-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.9fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  cursor: pointer;
}

#page-history .prediction-archive-card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#page-history .prediction-archive-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-history .prediction-archive-card-title-row h5 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--prediction-text);
}

#page-history .prediction-archive-card-copy p {
  margin: 0;
  color: var(--prediction-muted);
  font-size: 13px;
  line-height: 1.55;
}

#page-history .prediction-archive-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#page-history .prediction-archive-card-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--prediction-border);
  background: var(--prediction-surface-alt);
}

#page-history .prediction-archive-card-stats span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #64748b;
}

#page-history .prediction-archive-card-stats strong {
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--prediction-text);
}

#page-history .prediction-archive-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

#page-history .prediction-archive-card-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--prediction-border);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.64) 0%, rgba(255, 255, 255, 0.96) 100%);
}

#page-history .prediction-manual-ledger {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#page-history .prediction-manual-ledger-head h5 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--prediction-text);
}

#page-history .prediction-manual-ledger-head p {
  margin: 0;
  color: var(--prediction-muted);
  font-size: 13px;
  line-height: 1.55;
}

#page-history .prediction-manual-ledger .historyv2-feedback-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--prediction-border);
  border-radius: 18px;
  background: #ffffff;
}

#page-history .prediction-manual-ledger .historyv2-feedback-table th,
#page-history .prediction-manual-ledger .historyv2-feedback-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--prediction-border);
  text-align: left;
  font-size: 12px;
  color: var(--prediction-text);
}

#page-history .prediction-manual-ledger .historyv2-feedback-table th {
  background: var(--prediction-surface-alt);
  color: var(--prediction-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

#page-history .prediction-manual-ledger .historyv2-feedback-table tr:last-child td {
  border-bottom: 0;
}

#page-history .prediction-manual-ledger .tag {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-history .prediction-manual-ledger .tag.correct {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

#page-history .prediction-manual-ledger .tag.incorrect {
  border-color: rgba(244, 63, 94, 0.24);
  background: rgba(244, 63, 94, 0.1);
  color: #be123c;
}

#page-history .prediction-archive-group-stack .afw-session-card {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--prediction-border);
  background: #ffffff;
}

#page-history .prediction-archive-group-stack .afw-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--prediction-border);
}

#page-history .prediction-archive-group-stack .afw-session-head-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

#page-history .prediction-archive-group-stack .afw-session-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--prediction-muted);
}

#page-history .prediction-archive-group-stack .afw-session-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--prediction-muted);
  font-size: 11px;
  font-weight: 700;
}

#page-history .prediction-archive-group-stack .afw-session-divider {
  color: #cbd5e1;
}

#page-history .prediction-archive-group-stack .afw-session-pill,
#page-history .prediction-archive-group-stack .afw-ticker-pill {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--prediction-border);
  background: var(--prediction-surface-alt);
  color: #334155;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#page-history .prediction-archive-group-stack .afw-session-pill.afw-session-open {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
}

#page-history .prediction-archive-group-stack .afw-session-pill.afw-session-pre {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}

#page-history .prediction-archive-group-stack .afw-session-pill.afw-session-after {
  border-color: rgba(168, 85, 247, 0.24);
  background: rgba(168, 85, 247, 0.1);
  color: #7e22ce;
}

#page-history .prediction-archive-group-stack .afw-day-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#page-history .prediction-archive-group-stack .afw-day-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--prediction-border);
  background: var(--prediction-surface-alt);
}

#page-history .prediction-archive-group-stack .afw-day-pill {
  display: flex;
  justify-content: flex-start;
}

#page-history .prediction-archive-group-stack .afw-day-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--prediction-text);
}

#page-history .prediction-archive-group-stack .afw-day-price {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--prediction-text);
}

#page-history .prediction-archive-group-stack .afw-day-price.is-bull,
#page-history .prediction-archive-group-stack .afw-day-move.is-bull {
  color: var(--prediction-success);
}

#page-history .prediction-archive-group-stack .afw-day-price.is-bear,
#page-history .prediction-archive-group-stack .afw-day-move.is-bear {
  color: var(--prediction-danger);
}

#page-history .prediction-archive-group-stack .afw-day-price.is-neutral,
#page-history .prediction-archive-group-stack .afw-day-move.is-flat {
  color: #d97706;
}

#page-history .prediction-archive-group-stack .afw-day-move,
#page-history .prediction-archive-group-stack .afw-day-meta,
#page-history .prediction-archive-group-stack .afw-day-band,
#page-history .prediction-archive-group-stack .afw-day-plan {
  font-size: 12px;
  line-height: 1.5;
  color: var(--prediction-muted);
}

#page-history .prediction-archive-group-stack .afw-day-probs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-history .prediction-archive-group-stack .afw-day-probs span {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
}

#page-history .prediction-archive-group-stack .afw-day-probs .bull {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

#page-history .prediction-archive-group-stack .afw-day-probs .neutral {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

#page-history .prediction-archive-group-stack .afw-day-probs .bear {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
}

#page-history .prediction-archive-group-stack .afw-day-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--prediction-border);
  background: #ffffff;
}

#page-history .prediction-archive-group-stack .afw-day-status.tone-review {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.08);
}

#page-history .prediction-archive-group-stack .afw-day-status.tone-live {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(14, 165, 233, 0.08);
}

#page-history .prediction-archive-group-stack .afw-day-status.tone-upcoming {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(99, 102, 241, 0.08);
}

#page-history .prediction-archive-group-stack .afw-day-status.tone-correct {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.08);
}

#page-history .prediction-archive-group-stack .afw-day-status.tone-incorrect {
  border-color: rgba(244, 63, 94, 0.24);
  background: rgba(244, 63, 94, 0.08);
}

#page-history .prediction-archive-group-stack .afw-day-status-label {
  font-size: 12px;
  font-weight: 900;
  color: var(--prediction-text);
}

#page-history .prediction-archive-group-stack .afw-day-status-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--prediction-muted);
}

#page-history .prediction-archive-group-stack .feedback-note.reverted {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
}

#page-history .prediction-archive-group-stack .afw-session-feedback .tag,
#page-history .prediction-manual-ledger .tag,
#page-history .prediction-archive-group-stack .tag {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-history .prediction-archive-group-stack .tag.correct {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

#page-history .prediction-archive-group-stack .tag.incorrect {
  border-color: rgba(244, 63, 94, 0.24);
  background: rgba(244, 63, 94, 0.1);
  color: #be123c;
}

#page-history .prediction-archive-group-stack .tag.review {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.12);
  color: #a16207;
}

#page-history .prediction-archive-group-stack .tag.live {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(14, 165, 233, 0.1);
  color: #0369a1;
}

#page-history .prediction-archive-group-stack .tag.upcoming {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}

#page-history .afw-remove-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(244, 63, 94, 0.18);
  border-radius: 14px;
  background: rgba(244, 63, 94, 0.06);
  color: #be123c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.18s ease, border-color 0.18s ease;
}

#page-history .afw-remove-btn:hover {
  transform: translateY(-1px);
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.24);
}

@media (max-width: 1240px) {
  #page-history .prediction-overview-grid,
  #page-history .prediction-queue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-history .prediction-archive-card-head {
    grid-template-columns: 1fr;
  }

  #page-history .prediction-archive-card-actions {
    justify-content: flex-start;
  }

  #page-history .prediction-archive-group-stack .afw-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #page-history .prediction-workspace-frame {
    padding: 18px;
    border-radius: 24px;
  }

  #page-history .prediction-workspace-section {
    padding: 16px;
  }

  #page-history .prediction-queue-card-head,
  #page-history .prediction-queue-card-main {
    flex-direction: column;
  }

  #page-history .prediction-queue-card-status,
  #page-history .prediction-queue-card-price {
    width: 100%;
  }

  #page-history .prediction-queue-card-price {
    align-items: flex-start;
  }

  #page-history .prediction-queue-card-metrics {
    grid-template-columns: 1fr;
  }

  #page-history .prediction-archive-card-stats {
    grid-template-columns: 1fr;
  }

  #page-history .prediction-archive-group-stack .afw-session-head {
    flex-direction: column;
  }

  #page-history .prediction-archive-group-stack .afw-day-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #page-history .prediction-overview-grid,
  #page-history .prediction-queue-grid {
    grid-template-columns: 1fr;
  }

  #page-history .prediction-workspace-head,
  #page-history .prediction-section-heading,
  #page-history .prediction-workspace-empty {
    flex-direction: column;
  }

  #page-history .prediction-workspace-actions,
  #page-history .prediction-queue-actions {
    width: 100%;
  }

  #page-history .prediction-workspace-actions .historyv2-pill-action,
  #page-history .prediction-queue-btn,
  #page-history .prediction-empty-action,
  #page-history .prediction-archive-card-toggle {
    width: 100%;
  }
}

html[data-theme='dark'] #page-history .prediction-workspace-shell {
  --prediction-bg: linear-gradient(180deg, rgba(12, 18, 30, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
  --prediction-surface: #0f172a;
  --prediction-surface-alt: #111c31;
  --prediction-border: rgba(71, 85, 105, 0.65);
  --prediction-border-strong: rgba(100, 116, 139, 0.88);
  --prediction-text: #f8fafc;
  --prediction-muted: #cbd5e1;
  --prediction-soft: #94a3b8;
}

html[data-theme='dark'] #page-history .prediction-workspace-frame {
  box-shadow: none;
}

html[data-theme='dark'] #page-history .prediction-workspace-banner,
html[data-theme='dark'] #page-history .prediction-workspace-section,
html[data-theme='dark'] #page-history .prediction-overview-card,
html[data-theme='dark'] #page-history .prediction-filter-shell,
html[data-theme='dark'] #page-history .prediction-queue-card,
html[data-theme='dark'] #page-history .prediction-archive-card,
html[data-theme='dark'] #page-history .prediction-archive-group-stack .afw-session-card,
html[data-theme='dark'] #page-history .prediction-archive-group-stack .afw-day-card,
html[data-theme='dark'] #page-history .prediction-manual-ledger .historyv2-feedback-table,
html[data-theme='dark'] #page-history .prediction-workspace-empty,
html[data-theme='dark'] #page-history .prediction-queue-card-status,
html[data-theme='dark'] #page-history .prediction-queue-card-metrics > div,
html[data-theme='dark'] #page-history .prediction-archive-card-stats > div,
html[data-theme='dark'] #page-history .prediction-archive-card-body,
html[data-theme='dark'] #page-history .prediction-archive-group-stack .afw-day-status {
  background-image: none;
}

html[data-theme='dark'] #page-history .prediction-filter-search-input,
html[data-theme='dark'] #page-history .prediction-filter-pill,
html[data-theme='dark'] #page-history .prediction-queue-btn,
html[data-theme='dark'] #page-history .prediction-empty-action,
html[data-theme='dark'] #page-history .prediction-archive-card-toggle,
html[data-theme='dark'] #page-history .prediction-workspace-count,
html[data-theme='dark'] #page-history .prediction-workspace-empty-icon {
  background: #081120;
  border-color: rgba(71, 85, 105, 0.88);
  color: #f8fafc;
}

html[data-theme='dark'] #page-history .prediction-filter-search-input::placeholder {
  color: #7f8ea3;
}

html[data-theme='dark'] #page-history .prediction-filter-search-clear {
  color: #cbd5e1;
}

html[data-theme='dark'] #page-history .prediction-filter-search-clear:hover {
  background: rgba(148, 163, 184, 0.12);
}

html[data-theme='dark'] #page-history .prediction-filter-pill.is-active,
html[data-theme='dark'] #page-history .prediction-queue-btn.is-primary,
html[data-theme='dark'] #page-history .prediction-empty-action {
  background: #f8fafc;
  border-color: #f8fafc;
  color: #0f172a;
}

html[data-theme='dark'] #page-history .prediction-filter-pill.is-active .prediction-filter-pill-count {
  background: rgba(15, 23, 42, 0.14);
}

html[data-theme='dark'] #page-history .prediction-queue-symbol-pill,
html[data-theme='dark'] #page-history .prediction-archive-symbol-pill {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(96, 165, 250, 0.3);
}

html[data-theme='dark'] #page-history .prediction-queue-session-pill,
html[data-theme='dark'] #page-history .prediction-queue-tag,
html[data-theme='dark'] #page-history .prediction-archive-group-stack .afw-session-pill,
html[data-theme='dark'] #page-history .prediction-archive-group-stack .afw-ticker-pill {
  background: rgba(15, 23, 42, 0.56);
  border-color: rgba(71, 85, 105, 0.88);
  color: #e2e8f0;
}

html[data-theme='dark'] #page-history .prediction-manual-ledger .historyv2-feedback-table th {
  background: #111c31;
  color: #cbd5e1;
}

html[data-theme='dark'] #page-history .prediction-manual-ledger .historyv2-feedback-table td {
  color: #f8fafc;
}

html[data-theme='dark'] #page-history .prediction-archive-group-stack .tag.review {
  color: #fcd34d;
}

html[data-theme='dark'] #page-history .prediction-archive-group-stack .tag.live {
  color: #7dd3fc;
}

html[data-theme='dark'] #page-history .prediction-archive-group-stack .tag.upcoming {
  color: #c4b5fd;
}

html[data-theme='dark'] #page-history .afw-remove-btn {
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(225, 29, 72, 0.3);
  color: #fda4af;
}

/* ===== PREDICTION POLISH PASS ===== */
#page-history .prediction-workspace-frame {
  background: var(--prediction-bg);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

#page-history .prediction-overview-card {
  border-width: 1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#page-history .prediction-overview-card::after {
  content: none;
}

#page-history .prediction-overview-card.tone-review {
  border-color: rgba(245, 158, 11, 0.34);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

#page-history .prediction-overview-card.tone-live {
  border-color: rgba(14, 165, 233, 0.28);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

#page-history .prediction-overview-card.tone-coverage {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

#page-history .prediction-overview-card.tone-manual {
  border-color: rgba(236, 72, 153, 0.28);
  background: linear-gradient(180deg, rgba(253, 242, 248, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
}

#allForecastDaysPopup .popup.all-forecast-modern-shell,
#feedbackPopup .popup.feedback-popup-shell {
  background-image: none !important;
}

#allForecastDaysPopup .popup.all-forecast-modern-shell::before,
#feedbackPopup .popup.feedback-popup-shell::before,
#allForecastDaysPopup :where(button, a[role="button"])::before,
#allForecastDaysPopup :where(button, a[role="button"])::after,
#feedbackPopup :where(button, a[role="button"])::before,
#feedbackPopup :where(button, a[role="button"])::after {
  content: none !important;
  display: none !important;
}

#allForecastDaysPopup .popup.all-forecast-modern-shell {
  width: min(1320px, 96vw);
  max-width: 1320px;
  min-height: min(840px, 94vh);
  max-height: min(880px, 94vh);
  border: 1px solid #dbe5ef;
  background: #f8fafc !important;
  box-shadow: 0 28px 72px -16px rgba(15, 23, 42, 0.26) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
}

#allForecastDaysPopup .all-forecast-modern-panel {
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

#allForecastDaysPopup .all-forecast-modern-header {
  padding: 24px 24px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #fcfcfd !important;
  flex: 0 0 auto;
}

#allForecastDaysPopup .all-forecast-modern-title {
  font-size: 24px;
  letter-spacing: -0.03em;
}

#allForecastDaysPopup .all-forecast-modern-subtitle {
  margin-top: 7px;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.55;
}

#allForecastDaysPopup .all-forecast-modern-close {
  border-radius: 16px;
  border-color: #dbe5ef;
  background: #ffffff;
}

#allForecastDaysPopup .all-forecast-modern-body {
  background: #f8fafc !important;
  border-top: 0;
  padding: 18px 0 10px;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.52) rgba(226, 232, 240, 0.68);
  scroll-padding-top: 12px;
  -webkit-overflow-scrolling: touch;
}

#allForecastDaysPopup .all-forecast-modern-body::-webkit-scrollbar {
  width: 12px;
}

#allForecastDaysPopup .all-forecast-modern-body::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.68);
  border-radius: 999px;
}

#allForecastDaysPopup .all-forecast-modern-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid rgba(226, 232, 240, 0.68);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.92) 0%, rgba(100, 116, 139, 0.88) 100%);
}

#allForecastDaysPopup .all-forecast-modern-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(100, 116, 139, 0.98) 0%, rgba(71, 85, 105, 0.94) 100%);
}

#allForecastDaysPopup .all-forecast-modern-footer {
  padding: 14px 24px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fcfcfd !important;
  flex: 0 0 auto;
}

#allForecastDaysPopup .all-forecast-modern-export {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid #dbe5ef !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0.04em;
}

#allForecastDaysPopup .afw-archive-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 14px;
}

#allForecastDaysPopup .afw-summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#allForecastDaysPopup .afw-summary-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid #dbe5ef;
  background: #ffffff;
}

#allForecastDaysPopup .afw-summary-chip span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

#allForecastDaysPopup .afw-summary-chip strong {
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #0f172a;
}

#allForecastDaysPopup .afw-sheet-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid #dbe5ef;
  background: #ffffff;
}

#allForecastDaysPopup .afw-sheet-panel.is-empty {
  min-height: 260px;
  justify-content: center;
}

#allForecastDaysPopup .afw-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .afw-sheet-head-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: min(420px, 100%);
}

#allForecastDaysPopup .afw-sheet-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

#allForecastDaysPopup .afw-sheet-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0f172a;
}

#allForecastDaysPopup .afw-sheet-copy {
  margin: 0;
  max-width: 780px;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}

#allForecastDaysPopup .afw-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#allForecastDaysPopup .afw-sheet-meta-pill,
#allForecastDaysPopup .prediction-archive-card-meta-pill {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #dbe5ef;
  background: #f8fafc;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#allForecastDaysPopup .afw-sheet-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}

#allForecastDaysPopup .afw-sheet-subcopy,
#allForecastDaysPopup .afw-sheet-caption {
  font-size: 12px;
  line-height: 1.55;
  color: #64748b;
}

#allForecastDaysPopup .prediction-archive-group-stack.is-popup {
  gap: 12px;
}

#allForecastDaysPopup .prediction-archive-card.is-popup {
  border: 1px solid #dbe5ef;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#allForecastDaysPopup .prediction-archive-card.is-popup:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.34);
}

#allForecastDaysPopup .prediction-archive-card.is-popup.is-open {
  border-color: #cbd5e1;
  box-shadow: 0 18px 38px -22px rgba(15, 23, 42, 0.28);
}

#allForecastDaysPopup .prediction-archive-card-head.is-popup {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  cursor: pointer;
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#allForecastDaysPopup .prediction-archive-card.is-popup.is-open .prediction-archive-card-head.is-popup {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.88) 0%, rgba(255, 255, 255, 0.98) 100%);
}

#allForecastDaysPopup .prediction-archive-card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#allForecastDaysPopup .prediction-archive-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .prediction-archive-card-title-row h5 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0f172a;
}

#allForecastDaysPopup .prediction-archive-symbol-pill {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #eef2ff;
  color: #3730a3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#allForecastDaysPopup .prediction-archive-card-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

#allForecastDaysPopup .prediction-archive-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#allForecastDaysPopup .prediction-archive-card-actions.is-popup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

#allForecastDaysPopup .prediction-archive-card-toggle {
  min-height: 48px;
  min-width: 186px;
  padding: 8px 10px 8px 14px;
  border-radius: 16px;
  border: 1px solid #dbe5ef;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  box-shadow: 0 10px 22px -20px rgba(15, 23, 42, 0.5) !important;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

#allForecastDaysPopup .prediction-archive-card-toggle:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  box-shadow: 0 18px 34px -24px rgba(15, 23, 42, 0.54) !important;
}

#allForecastDaysPopup .prediction-archive-card-toggle:active {
  transform: translateY(0) scale(0.985);
}

#allForecastDaysPopup .prediction-archive-card-toggle:focus-visible {
  outline: none;
  border-color: #64748b;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18), 0 12px 26px -18px rgba(15, 23, 42, 0.46) !important;
}

#allForecastDaysPopup .prediction-archive-card-toggle.is-open {
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
}

#allForecastDaysPopup .prediction-archive-card-toggle-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

#allForecastDaysPopup .prediction-archive-card-toggle-labels {
  display: grid;
  align-items: center;
}

#allForecastDaysPopup .prediction-archive-card-toggle-label {
  grid-area: 1 / 1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

#allForecastDaysPopup .prediction-archive-card-toggle-label.is-open {
  opacity: 0;
  transform: translateY(6px);
}

#allForecastDaysPopup .prediction-archive-card-toggle.is-open .prediction-archive-card-toggle-label.is-closed {
  opacity: 0;
  transform: translateY(-6px);
}

#allForecastDaysPopup .prediction-archive-card-toggle.is-open .prediction-archive-card-toggle-label.is-open {
  opacity: 1;
  transform: translateY(0);
}

#allForecastDaysPopup .prediction-archive-card-toggle-state {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #64748b;
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

#allForecastDaysPopup .prediction-archive-card-toggle:hover .prediction-archive-card-toggle-state,
#allForecastDaysPopup .prediction-archive-card-toggle.is-open .prediction-archive-card-toggle-state {
  color: #475569;
}

#allForecastDaysPopup .prediction-archive-card-toggle-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#allForecastDaysPopup .prediction-archive-card-toggle-icon i {
  font-size: 14px;
}

#allForecastDaysPopup .prediction-archive-card-toggle.is-open .prediction-archive-card-toggle-icon {
  transform: rotate(180deg);
  border-color: #cbd5e1;
  background: rgba(226, 232, 240, 0.96);
  color: #0f172a;
}

#allForecastDaysPopup .prediction-archive-card-body-shell.is-popup {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#allForecastDaysPopup .prediction-archive-card-body-shell.is-popup.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

#allForecastDaysPopup .prediction-archive-card-body.is-popup {
  min-height: 0;
  overflow: hidden;
  padding: 0 18px 18px;
  border-top: 1px solid #edf2f7;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

#allForecastDaysPopup .afw-remove-btn {
  box-shadow: none !important;
}

#allForecastDaysPopup .afw-session-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #f8fafc !important;
  box-shadow: none !important;
}

#allForecastDaysPopup .afw-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

#allForecastDaysPopup .afw-session-head-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .afw-session-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: #64748b;
}

#allForecastDaysPopup .afw-session-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

#allForecastDaysPopup .afw-session-pill,
#allForecastDaysPopup .afw-ticker-pill {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #dbe5ef;
  background: #ffffff;
  color: #334155;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#allForecastDaysPopup .afw-day-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#allForecastDaysPopup .afw-day-card {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #ffffff !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#allForecastDaysPopup .afw-day-label,
#allForecastDaysPopup .afw-day-meta,
#allForecastDaysPopup .afw-day-band,
#allForecastDaysPopup .afw-day-plan {
  text-align: left;
}

#allForecastDaysPopup .afw-day-status {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 12px;
  background: #f8fafc;
}

#allForecastDaysPopup .afw-history-actions {
  margin-top: auto;
}

#allForecastDaysPopup .prediction-workspace-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 220px;
  padding: 18px;
  border-radius: 20px;
  border-style: solid;
  border-color: #dbe5ef;
  background: #f8fafc;
}

#allForecastDaysPopup .prediction-workspace-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid #dbe5ef;
  background: #ffffff;
  color: #334155;
  display: grid;
  place-items: center;
  font-size: 24px;
  flex: 0 0 auto;
}

#allForecastDaysPopup .prediction-workspace-empty-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 280px;
}

#allForecastDaysPopup .prediction-workspace-empty-copy h5 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0f172a;
}

#allForecastDaysPopup .prediction-workspace-empty-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}

#allForecastDaysPopup .prediction-empty-action {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #ffffff;
  box-shadow: none !important;
}

#feedbackPopup .popup.feedback-popup-shell {
  width: min(900px, calc(100vw - 32px));
  margin: 26px auto;
  max-height: calc(100vh - 52px);
  border: 1px solid #dbe5ef;
  border-radius: 28px;
  background: #fcfcfd !important;
  box-shadow: 0 26px 70px -18px rgba(15, 23, 42, 0.28) !important;
}

#feedbackPopup .feedback-modal-header {
  padding: 28px 30px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #fcfcfd !important;
}

#feedbackPopup .feedback-modal-title {
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-transform: none;
}

#feedbackPopup .feedback-modal-intro {
  max-width: 720px;
  font-size: 14px;
  line-height: 1.6;
}

#feedbackPopup .feedback-modal-detail-wrap {
  padding: 20px 30px 12px;
  border: 0;
  background: #fcfcfd !important;
}

#feedbackPopup .feedback-editor-modern {
  padding: 0 30px 22px;
  gap: 16px;
  background: #fcfcfd !important;
}

#feedbackPopup .feedback-field-block {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #ffffff !important;
}

#feedbackPopup .feedback-editor-label {
  color: #64748b;
}

#feedbackPopup .feedback-choice-btn {
  min-height: 48px !important;
  border-radius: 16px !important;
  border-color: #dbe5ef !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-choice-btn:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

#feedbackPopup .feedback-choice-btn.is-correct.active {
  border-color: rgba(16, 185, 129, 0.36) !important;
  background: #ecfdf5 !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-choice-btn.is-incorrect.active {
  border-color: rgba(244, 63, 94, 0.34) !important;
  background: #fff1f2 !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-pnl-input {
  min-height: 50px;
  border-radius: 16px;
  border-color: #dbe5ef;
  box-shadow: none !important;
}

#feedbackPopup .feedback-pnl-input:hover {
  border-color: #cbd5e1;
}

#feedbackPopup .feedback-pnl-input:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14) !important;
}

#feedbackPopup .feedback-editor-hint {
  color: #64748b;
}

#feedbackPopup .popup-actions.feedback-modal-actions {
  padding: 0 30px 28px;
  background: #fcfcfd !important;
}

#feedbackPopup .popup-actions.feedback-modal-actions .btn {
  min-height: 48px;
  border-radius: 16px;
  text-transform: none;
  letter-spacing: 0.04em;
  box-shadow: none !important;
}

#feedbackPopup .feedback-cancel-btn {
  border-color: #dbe5ef !important;
  box-shadow: none !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-neutral,
#feedbackPopup #feedbackSaveBtn.feedback-save-correct,
#feedbackPopup #feedbackSaveBtn.feedback-save-incorrect {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-neutral:hover,
#feedbackPopup #feedbackSaveBtn.feedback-save-correct:hover,
#feedbackPopup #feedbackSaveBtn.feedback-save-incorrect:hover {
  background: #020617 !important;
  border-color: #020617 !important;
}

#feedbackPopup .feedback-settlement-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#feedbackPopup .feedback-detail-hero {
  gap: 8px;
  padding: 0;
}

#feedbackPopup .feedback-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#feedbackPopup .feedback-detail-title-wrap {
  display: grid;
  gap: 6px;
}

#feedbackPopup .feedback-detail-status-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 210px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}

#feedbackPopup .feedback-detail-status-pill span {
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}

#feedbackPopup .feedback-detail-status-pill small {
  font-size: 11px;
  line-height: 1.5;
  color: #64748b;
}

#feedbackPopup .feedback-detail-status-pill.tone-review {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(255, 251, 235, 0.9);
}

#feedbackPopup .feedback-detail-status-pill.tone-live {
  border-color: rgba(14, 165, 233, 0.24);
  background: rgba(240, 249, 255, 0.92);
}

#feedbackPopup .feedback-detail-status-pill.tone-upcoming {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(238, 242, 255, 0.92);
}

#feedbackPopup .feedback-detail-status-pill.tone-correct {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(236, 253, 245, 0.92);
}

#feedbackPopup .feedback-detail-status-pill.tone-incorrect {
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(255, 241, 242, 0.92);
}

#feedbackPopup .feedback-settlement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.85fr);
  gap: 14px;
}

#feedbackPopup .feedback-settlement-main,
#feedbackPopup .feedback-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#feedbackPopup .feedback-brief-grid {
  margin-top: 0;
}

#feedbackPopup .feedback-brief-card,
#feedbackPopup .feedback-probability-card,
#feedbackPopup .feedback-detail-side-card {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-brief-card.is-primary {
  border-color: rgba(15, 23, 42, 0.12);
}

#feedbackPopup .feedback-brief-card.is-result.tone-review {
  border-color: rgba(245, 158, 11, 0.28);
}

#feedbackPopup .feedback-brief-card.is-result.tone-live {
  border-color: rgba(14, 165, 233, 0.24);
}

#feedbackPopup .feedback-brief-card.is-result.tone-upcoming {
  border-color: rgba(99, 102, 241, 0.24);
}

#feedbackPopup .feedback-brief-card.is-result.tone-correct {
  border-color: rgba(16, 185, 129, 0.28);
}

#feedbackPopup .feedback-brief-card.is-result.tone-incorrect {
  border-color: rgba(244, 63, 94, 0.28);
}

#feedbackPopup .feedback-detail-side-card {
  padding: 16px;
}

#feedbackPopup .feedback-detail-side-card-head {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

#feedbackPopup .feedback-detail-side-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

#feedbackPopup .feedback-detail-side-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

#feedbackPopup .feedback-detail-side-row:last-of-type {
  padding-bottom: 0;
}

#feedbackPopup .feedback-detail-side-row span {
  font-size: 12px;
  color: #64748b;
}

#feedbackPopup .feedback-detail-side-row strong {
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
  color: #0f172a;
}

@media (max-width: 1100px) {
  #allForecastDaysPopup .afw-summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #allForecastDaysPopup .afw-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #feedbackPopup .feedback-settlement-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #allForecastDaysPopup .popup.all-forecast-modern-shell {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    min-height: calc(100vh - 12px);
  }

  #allForecastDaysPopup .all-forecast-modern-header,
  #allForecastDaysPopup .all-forecast-modern-footer,
  #allForecastDaysPopup .afw-archive-sheet {
    padding-left: 14px;
    padding-right: 14px;
  }

  #allForecastDaysPopup .afw-summary-row,
  #allForecastDaysPopup .afw-day-grid {
    grid-template-columns: 1fr;
  }

  #allForecastDaysPopup .afw-sheet-panel,
  #allForecastDaysPopup .prediction-archive-card-head.is-popup,
  #allForecastDaysPopup .prediction-archive-card-body.is-popup {
    padding-left: 14px;
    padding-right: 14px;
  }

  #allForecastDaysPopup .prediction-archive-card-head.is-popup,
  #allForecastDaysPopup .afw-sheet-head,
  #allForecastDaysPopup .afw-sheet-subhead,
  #allForecastDaysPopup .afw-session-head {
    flex-direction: column;
  }

  #allForecastDaysPopup .prediction-archive-card-actions.is-popup {
    width: 100%;
    justify-content: space-between;
  }

  #allForecastDaysPopup .prediction-archive-card-toggle {
    flex: 1 1 auto;
    min-width: 0;
  }

  #feedbackPopup .popup.feedback-popup-shell {
    width: calc(100vw - 20px);
    margin: 16px auto;
    max-height: calc(100vh - 32px);
  }

  #feedbackPopup .feedback-modal-header,
  #feedbackPopup .feedback-modal-detail-wrap,
  #feedbackPopup .feedback-editor-modern,
  #feedbackPopup .popup-actions.feedback-modal-actions {
    padding-left: 20px;
    padding-right: 20px;
  }

  #feedbackPopup .feedback-detail-title-row,
  #feedbackPopup .popup-actions.feedback-modal-actions {
    flex-direction: column;
  }

  #feedbackPopup .feedback-detail-status-pill,
  #feedbackPopup .popup-actions.feedback-modal-actions .btn {
    width: 100%;
  }
}

html[data-theme='dark'] #page-history .prediction-workspace-frame {
  background: var(--prediction-bg);
}

html[data-theme='dark'] #page-history .prediction-overview-card {
  box-shadow: none;
}

html[data-theme='dark'] #page-history .prediction-overview-card.tone-review {
  border-color: rgba(245, 158, 11, 0.38);
  background: linear-gradient(180deg, rgba(54, 35, 5, 0.44) 0%, rgba(15, 23, 42, 0.98) 100%);
}

html[data-theme='dark'] #page-history .prediction-overview-card.tone-live {
  border-color: rgba(56, 189, 248, 0.32);
  background: linear-gradient(180deg, rgba(8, 47, 73, 0.5) 0%, rgba(15, 23, 42, 0.98) 100%);
}

html[data-theme='dark'] #page-history .prediction-overview-card.tone-coverage {
  border-color: rgba(16, 185, 129, 0.34);
  background: linear-gradient(180deg, rgba(5, 46, 35, 0.5) 0%, rgba(15, 23, 42, 0.98) 100%);
}

html[data-theme='dark'] #page-history .prediction-overview-card.tone-manual {
  border-color: rgba(236, 72, 153, 0.32);
  background: linear-gradient(180deg, rgba(80, 7, 36, 0.46) 0%, rgba(15, 23, 42, 0.98) 100%);
}

html[data-theme='dark'] #allForecastDaysPopup .popup.all-forecast-modern-shell,
html[data-theme='dark'] #feedbackPopup .popup.feedback-popup-shell {
  border-color: rgba(71, 85, 105, 0.88) !important;
  background: #0b1220 !important;
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-panel,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-header,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-body,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-footer,
html[data-theme='dark'] #allForecastDaysPopup .afw-summary-chip,
html[data-theme='dark'] #allForecastDaysPopup .afw-sheet-panel,
html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card.is-popup,
html[data-theme='dark'] #allForecastDaysPopup .afw-session-card,
html[data-theme='dark'] #allForecastDaysPopup .afw-day-card,
html[data-theme='dark'] #allForecastDaysPopup .prediction-workspace-empty,
html[data-theme='dark'] #feedbackPopup .feedback-modal-header,
html[data-theme='dark'] #feedbackPopup .feedback-modal-detail-wrap,
html[data-theme='dark'] #feedbackPopup .feedback-editor-modern,
html[data-theme='dark'] #feedbackPopup .popup-actions.feedback-modal-actions,
html[data-theme='dark'] #feedbackPopup .feedback-field-block,
html[data-theme='dark'] #feedbackPopup .feedback-brief-card,
html[data-theme='dark'] #feedbackPopup .feedback-probability-card,
html[data-theme='dark'] #feedbackPopup .feedback-detail-side-card,
html[data-theme='dark'] #feedbackPopup .feedback-detail-status-pill {
  background: #0f172a !important;
  border-color: rgba(71, 85, 105, 0.72) !important;
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-title,
html[data-theme='dark'] #allForecastDaysPopup .afw-summary-chip strong,
html[data-theme='dark'] #allForecastDaysPopup .afw-sheet-title,
html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-title-row h5,
html[data-theme='dark'] #allForecastDaysPopup .prediction-workspace-empty-copy h5,
html[data-theme='dark'] #feedbackPopup .feedback-modal-title,
html[data-theme='dark'] #feedbackPopup .feedback-detail-title,
html[data-theme='dark'] #feedbackPopup .feedback-detail-status-pill span,
html[data-theme='dark'] #feedbackPopup .feedback-detail-side-row strong {
  color: #f8fafc !important;
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-subtitle,
html[data-theme='dark'] #allForecastDaysPopup .afw-summary-chip span,
html[data-theme='dark'] #allForecastDaysPopup .afw-sheet-kicker,
html[data-theme='dark'] #allForecastDaysPopup .afw-sheet-copy,
html[data-theme='dark'] #allForecastDaysPopup .afw-sheet-subcopy,
html[data-theme='dark'] #allForecastDaysPopup .afw-sheet-caption,
html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-copy p,
html[data-theme='dark'] #allForecastDaysPopup .afw-session-meta,
html[data-theme='dark'] #allForecastDaysPopup .afw-session-right,
html[data-theme='dark'] #allForecastDaysPopup .prediction-workspace-empty-copy p,
html[data-theme='dark'] #feedbackPopup .feedback-modal-intro,
html[data-theme='dark'] #feedbackPopup .feedback-detail-kicker,
html[data-theme='dark'] #feedbackPopup .feedback-detail-sub,
html[data-theme='dark'] #feedbackPopup .feedback-editor-label,
html[data-theme='dark'] #feedbackPopup .feedback-editor-hint,
html[data-theme='dark'] #feedbackPopup .feedback-detail-status-pill small,
html[data-theme='dark'] #feedbackPopup .feedback-detail-side-row span {
  color: #94a3b8 !important;
}

html[data-theme='dark'] #allForecastDaysPopup .afw-sheet-meta-pill,
html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-meta-pill,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-close,
html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-export,
html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-toggle,
html[data-theme='dark'] #allForecastDaysPopup .afw-session-pill,
html[data-theme='dark'] #allForecastDaysPopup .afw-ticker-pill,
html[data-theme='dark'] #allForecastDaysPopup .prediction-workspace-empty-icon,
html[data-theme='dark'] #feedbackPopup .feedback-choice-btn,
html[data-theme='dark'] #feedbackPopup .feedback-cancel-btn,
html[data-theme='dark'] #feedbackPopup .feedback-pnl-input {
  background: #081120 !important;
  border-color: rgba(71, 85, 105, 0.88) !important;
  color: #f8fafc !important;
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-symbol-pill {
  background: rgba(67, 56, 202, 0.24);
  border-color: rgba(129, 140, 248, 0.32);
  color: #c7d2fe;
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-body {
  scrollbar-color: rgba(100, 116, 139, 0.88) rgba(8, 17, 32, 0.92);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-body::-webkit-scrollbar-track {
  background: rgba(8, 17, 32, 0.92);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-body::-webkit-scrollbar-thumb {
  border-color: rgba(8, 17, 32, 0.92);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.78) 0%, rgba(100, 116, 139, 0.92) 100%);
}

html[data-theme='dark'] #allForecastDaysPopup .all-forecast-modern-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.9) 0%, rgba(71, 85, 105, 0.96) 100%);
}

html[data-theme='dark'] #allForecastDaysPopup .afw-day-status {
  background: #081120;
  border-color: rgba(71, 85, 105, 0.72);
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card.is-popup {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 17, 32, 0.98) 100%);
  box-shadow: 0 10px 26px -22px rgba(2, 6, 23, 0.96);
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card.is-popup:hover {
  box-shadow: 0 20px 40px -26px rgba(2, 6, 23, 0.92);
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card.is-popup.is-open {
  border-color: rgba(100, 116, 139, 0.92);
  box-shadow: 0 22px 46px -28px rgba(2, 6, 23, 0.96);
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card.is-popup.is-open .prediction-archive-card-head.is-popup {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(8, 17, 32, 0.98) 100%);
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-toggle {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(8, 17, 32, 0.98) 100%) !important;
  border-color: rgba(71, 85, 105, 0.88) !important;
  color: #f8fafc !important;
  box-shadow: 0 14px 30px -24px rgba(2, 6, 23, 0.92) !important;
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-toggle:hover {
  border-color: rgba(148, 163, 184, 0.72) !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.92) 100%) !important;
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-toggle:focus-visible {
  border-color: rgba(148, 163, 184, 0.88) !important;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18), 0 18px 36px -24px rgba(2, 6, 23, 0.96) !important;
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-toggle.is-open {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-color: rgba(148, 163, 184, 0.72) !important;
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-toggle-state {
  color: #94a3b8;
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-toggle-icon {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(71, 85, 105, 0.88);
  color: #cbd5e1;
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-toggle.is-open .prediction-archive-card-toggle-icon {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(100, 116, 139, 0.92);
  color: #f8fafc;
}

html[data-theme='dark'] #allForecastDaysPopup .prediction-archive-card-body.is-popup {
  border-top-color: rgba(51, 65, 85, 0.88);
  background: linear-gradient(180deg, rgba(8, 17, 32, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
}

html[data-theme='dark'] #feedbackPopup .feedback-pnl-input:focus {
  border-color: rgba(148, 163, 184, 0.88) !important;
  box-shadow: 0 0 0 4px rgba(71, 85, 105, 0.28) !important;
}

@media (prefers-reduced-motion: reduce) {
  #allForecastDaysPopup .all-forecast-modern-body {
    scroll-behavior: auto;
  }

  #allForecastDaysPopup .prediction-archive-card.is-popup,
  #allForecastDaysPopup .prediction-archive-card-head.is-popup,
  #allForecastDaysPopup .prediction-archive-card-toggle,
  #allForecastDaysPopup .prediction-archive-card-toggle-label,
  #allForecastDaysPopup .prediction-archive-card-toggle-state,
  #allForecastDaysPopup .prediction-archive-card-toggle-icon,
  #allForecastDaysPopup .prediction-archive-card-body-shell.is-popup {
    transition: none !important;
  }
}

/* Price History Page Overrides */
#page-price-history .topic-terminal-header,
#page-price-history .price-history-v3-quick-card,
#page-price-history .price-history-v3-toolbar-card,
#page-price-history .price-history-v3-side-card,
#page-price-history .price-history-v3-chart-card,
#page-price-history .price-history-v3-metrics-shell,
#page-price-history .price-history-v3-table-shell,
#page-price-history .price-history-v3-loading-card,
#page-price-history .price-history-v3-popup-focus,
#page-price-history .price-history-v3-popup-table-shell,
.popup.price-history-v2-modal,
#priceLogDayPopup .price-history-v3-popup-focus,
#priceLogDayPopup .price-history-v3-popup-metric,
#priceLogDayPopup .price-history-v3-chart-wrap {
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

#page-price-history .topic-terminal-header {
  gap: 18px;
  padding: 20px !important;
}

#page-price-history .topic-terminal-header .topic-terminal-header-icon {
  border-color: #dbeafe;
  background: #f0f9ff;
  color: #0ea5e9;
  box-shadow: none;
}

#page-price-history .price-history-v3-brand-icon,
#page-price-history .price-history-v3-empty-icon {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: none;
}

#page-price-history .price-history-v3-brand-kicker,
#page-price-history .price-history-v3-section-kicker,
#page-price-history .price-history-v3-side-kicker,
#page-price-history .topic-terminal-header .topic-terminal-header-control-kicker,
#page-price-history .topic-terminal-header .topic-terminal-header-status-kicker {
  color: #64748b;
}

#page-price-history .topic-terminal-header .topic-terminal-header-kicker,
#page-price-history .topic-terminal-header .topic-terminal-header-control-kicker,
#page-price-history .topic-terminal-header .topic-terminal-header-status-kicker,
#page-price-history .price-history-v3-selector-kicker,
#page-price-history .price-history-v3-launcher-kicker {
  color: #0284c7;
}

#page-price-history .price-history-v3-brand-title,
#page-price-history .price-history-v3-side-title,
#page-price-history .price-history-v3-empty-title,
#page-price-history .price-history-v3-loading-title,
#page-price-history .price-history-v3-chart-value-row strong,
#page-price-history .topic-terminal-header .topic-terminal-header-control-value,
#page-price-history .topic-terminal-header .topic-terminal-header-control-value strong {
  color: #0f172a;
}

#page-price-history .price-history-v3-brand-text,
#page-price-history .price-history-v3-quick-note,
#page-price-history .price-history-v3-chart-subtitle,
#page-price-history .price-history-v3-side-empty,
#page-price-history .price-history-v3-empty-text,
#page-price-history .price-history-v3-loading-text,
#page-price-history .price-history-v3-side-note,
#page-price-history .price-history-v3-provider-note,
#page-price-history .topic-terminal-header .topic-terminal-header-status-text {
  color: #475569;
}

#page-price-history .topic-terminal-header .topic-terminal-header-pill,
#page-price-history .topic-terminal-header .topic-terminal-header-control-card,
#page-price-history .topic-terminal-header .topic-terminal-header-status,
#page-price-history .topic-terminal-header .topic-terminal-header-btn.is-secondary,
#page-price-history .price-history-v3-search-input,
#page-price-history .price-history-v3-search-results,
#page-price-history .price-history-v3-search-item,
#page-price-history .price-history-v3-chip,
#page-price-history .price-history-v3-search-clear,
#page-price-history .price-history-v3-reset-btn,
#page-price-history .price-history-v3-save-btn,
#page-price-history .price-history-v3-inline-btn,
#page-price-history .price-history-v3-export-btn,
#page-price-history .price-history-v3-date-field,
#page-price-history .price-history-v3-popup-date,
#page-price-history .price-history-v3-timeframe-pill,
#page-price-history .price-history-v3-recent-item,
#page-price-history .price-history-v3-metric-card,
#page-price-history .price-history-v3-popup-metric,
#page-price-history .price-history-v3-chart-wrap,
#page-price-history .price-history-v3-status-badge,
#page-price-history .price-history-v3-chart-meta,
#page-price-history .price-history-v3-side-widget-wrap,
#page-price-history .price-history-v3-pulse-stats {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: none;
}

#page-price-history .topic-terminal-header .topic-terminal-header-btn.is-primary,
#page-price-history .price-history-v3-search-submit,
#page-price-history .price-history-v3-open-btn,
#page-price-history .price-history-v3-inline-btn.is-primary {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: none;
}

#page-price-history .topic-terminal-header .topic-terminal-header-btn.is-primary:hover,
#page-price-history .price-history-v3-search-submit:hover,
#page-price-history .price-history-v3-open-btn:hover,
#page-price-history .price-history-v3-inline-btn.is-primary:hover {
  background: #1e293b;
  border-color: #1e293b;
  color: #ffffff;
}

#page-price-history .price-history-v3-search-icon {
  color: #64748b;
}

#page-price-history .price-history-v3-search-input {
  border-width: 1px;
}

#page-price-history .price-history-v3-search-input:focus {
  border-color: #334155;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

#page-price-history .price-history-v3-search-results {
  border-color: #e2e8f0;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

#page-price-history .price-history-v3-search-hint,
#page-price-history .price-history-v3-side-note,
#page-price-history .topic-terminal-header .topic-terminal-header-pill,
#page-price-history .topic-terminal-header .topic-terminal-header-control-card,
#page-price-history .topic-terminal-header .topic-terminal-header-status,
#page-price-history .topic-terminal-header .topic-terminal-header-btn.is-secondary,
#page-price-history .price-history-v3-search-clear,
#page-price-history .price-history-v3-reset-btn,
#page-price-history .price-history-v3-inline-btn,
#page-price-history .price-history-v3-export-btn,
#page-price-history .price-history-v3-status-badge,
#page-price-history .price-history-v3-chart-meta {
  background: #f8fafc;
}

#page-price-history .price-history-v3-search-item:hover,
#page-price-history .price-history-v3-chip:hover,
#page-price-history .price-history-v3-recent-item:hover,
#page-price-history .topic-terminal-header .topic-terminal-header-btn.is-secondary:hover,
#page-price-history .price-history-v3-search-clear:hover,
#page-price-history .price-history-v3-reset-btn:hover,
#page-price-history .price-history-v3-save-btn:hover,
#page-price-history .price-history-v3-inline-btn:hover,
#page-price-history .price-history-v3-export-btn:hover {
  transform: none;
  border-color: #94a3b8;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: none;
}

#page-price-history .price-history-v3-save-btn.is-active,
#page-price-history .price-history-v3-chip.is-favorite,
#page-price-history .price-history-v3-timeframe-pill.is-active,
#page-price-history .price-history-v3-symbol-pill,
#page-price-history .price-history-v3-search-symbol {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
  box-shadow: none;
}

#page-price-history .price-history-v3-selector-card,
#page-price-history .price-history-v3-launcher-card,
#page-price-history .price-history-v3-saved-card,
#page-price-history .price-history-v3-saved-empty-card,
#page-price-history .price-history-v3-detail-meta {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: none;
}

#page-price-history .price-history-v3-selector-card {
  border-radius: 24px;
  padding: 20px;
  display: grid;
  gap: 18px;
}

#page-price-history .price-history-v3-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#page-price-history .price-history-v3-selector-kicker,
#page-price-history .price-history-v3-launcher-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-price-history .price-history-v3-selector-title {
  margin: 6px 0 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

#page-price-history .price-history-v3-selector-note,
#page-price-history .price-history-v3-launcher-note,
#page-price-history .price-history-v3-saved-empty-text,
#page-price-history .price-history-v3-saved-card-meta {
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

#page-price-history .price-history-v3-selector-note {
  max-width: 340px;
  margin: 0;
  text-align: right;
}

#page-price-history .price-history-v3-selector-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
  gap: 16px;
  align-items: start;
}

#page-price-history .price-history-v3-selector-rail-shell {
  min-width: 0;
}

#page-price-history .price-history-v3-selector-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

#page-price-history .price-history-v3-saved-card {
  position: relative;
  flex: 0 0 248px;
  min-width: 248px;
  border-radius: 20px;
  overflow: hidden;
}

#page-price-history .price-history-v3-saved-card.is-active {
  border-color: #bfdbfe;
  background: #f8fbff;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

#page-price-history .price-history-v3-saved-card-main {
  width: 100%;
  min-height: 116px;
  padding: 18px 54px 18px 18px;
  border: none;
  background: transparent;
  color: inherit;
  display: grid;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

#page-price-history .price-history-v3-saved-card-symbol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-price-history .price-history-v3-saved-card-symbol {
  color: #0f172a;
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.03em;
}

#page-price-history .price-history-v3-saved-card-name,
#page-price-history .price-history-v3-detail-company,
#page-price-history .price-history-v3-saved-empty-title {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 850;
}

#page-price-history .price-history-v3-detail-company {
  font-size: 20px;
  line-height: 1.2;
}

#page-price-history .price-history-v3-saved-card-meta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-price-history .price-history-v3-saved-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#page-price-history .price-history-v3-saved-card-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
}

#page-price-history .price-history-v3-saved-card-remove:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
  color: #0f172a;
}

#page-price-history .price-history-v3-saved-empty-card {
  min-height: 116px;
  min-width: min(100%, 320px);
  border-radius: 20px;
  padding: 18px;
  display: grid;
  gap: 6px;
  align-content: center;
}

#page-price-history .price-history-v3-launcher-card {
  border-radius: 22px;
  padding: 18px;
  display: grid;
  gap: 14px;
}

#page-price-history .price-history-v3-launcher-head {
  display: grid;
  gap: 6px;
}

#page-price-history .price-history-v3-search-control.is-compact .price-history-v3-search-row {
  align-items: stretch;
}

#page-price-history .price-history-v3-search-control.is-compact .price-history-v3-search-input {
  min-height: 48px;
  padding-left: 42px;
}

#page-price-history .price-history-v3-search-control.is-compact .price-history-v3-search-submit {
  min-height: 48px;
  min-width: 104px;
  padding: 0 16px;
}

#page-price-history .price-history-v3-search-control.is-compact .price-history-v3-search-clear {
  width: 32px;
  min-height: 32px;
}

#page-price-history .price-history-v3-search-control.is-compact .price-history-v3-search-results {
  top: calc(100% + 8px);
}

#page-price-history .price-history-v3-quick-row {
  grid-template-columns: 1fr;
  gap: 16px;
}

#page-price-history .price-history-v3-bottom-grid {
  display: grid;
  grid-template-columns: minmax(388px, 1.16fr) minmax(0, 0.92fr) minmax(0, 0.92fr);
  gap: 16px;
  margin-top: 16px;
}

#page-price-history .price-history-v3-pulse-card {
  margin-top: 0;
  padding: 22px 18px 18px;
}

#page-price-history .price-history-v3-detail-card {
  flex: 1 1 auto;
  align-self: start;
}

#page-price-history .price-history-v3-side-head,
#page-price-history .price-history-v3-side-stat,
#priceLogDayPopup .price-history-v3-popup-focus-head {
  border-color: #e2e8f0;
}

#page-price-history #priceHistoryDetailRail {
  align-items: flex-start;
}

#page-price-history .price-history-v3-detail-stack {
  width: 100%;
  display: grid;
  gap: 14px;
}

#page-price-history .price-history-v3-detail-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#page-price-history .price-history-v3-detail-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#page-price-history .price-history-v3-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-price-history .price-history-v3-detail-meta {
  border-radius: 16px;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  background: #f8fafc;
}

#page-price-history .price-history-v3-detail-meta span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#page-price-history .price-history-v3-detail-meta strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

#page-price-history .price-history-v3-side-body.is-widget {
  padding: 0;
  min-height: 360px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

#page-price-history .price-history-v3-side-body.is-widget .price-history-v3-widget-host {
  min-height: 360px;
  height: 360px;
}

#page-price-history #priceHistoryRecentRows {
  min-height: 0;
  padding: 10px 8px 0;
  align-items: center;
  justify-content: center;
}

#page-price-history .price-history-v3-pulse-shell {
  width: 100%;
  display: flex;
  justify-content: center;
}

#page-price-history .price-history-v3-side-widget-wrap.is-detail-shell {
  min-height: 252px;
}

#page-price-history .price-history-v3-side-widget-wrap.is-pulse.is-centered {
  width: min(100%, 360px);
  min-height: 388px;
  margin: 0 auto;
}

#page-price-history .price-history-v3-side-widget-wrap,
#page-price-history .price-history-v3-pulse-stats,
#page-price-history .price-history-v3-chart-wrap,
#priceLogDayPopup .price-history-v3-chart-wrap,
#priceLogDayPopup .price-history-v3-popup-metric {
  border-color: #e2e8f0;
}

#page-price-history .price-history-v3-ticker-tape-container {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

#page-price-history .price-history-v3-widget-host.is-ticker {
  min-height: 64px;
  height: 64px;
}

#page-price-history .price-history-v3-widget-host.is-symbol-overview,
#page-price-history .price-history-v3-widget-host.is-company-profile {
  min-height: 360px;
  height: 360px;
}

#page-price-history .price-history-v3-widget-host.is-detail {
  min-height: 252px;
  height: 252px;
}

#page-price-history .price-history-v3-widget-host.is-pulse {
  min-height: 388px;
  height: 388px;
}

#priceLogDayPopup.popup-overlay.react-popup-overlay {
  background: rgba(15, 23, 42, 0.54);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.popup.price-history-v2-modal {
  width: min(1040px, 94vw);
  max-width: 1040px;
  max-height: min(90vh, 920px);
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
}

.popup.price-history-v2-modal::before,
.popup.price-history-v2-modal::after {
  content: none !important;
  display: none !important;
}

.price-history-v2-modal-header {
  gap: 16px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.price-history-v2-modal .price-history-v2-modal-title {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #0f172a;
}

.price-history-v2-modal-meta {
  align-items: flex-start;
  gap: 10px;
}

.price-history-v2-modal-summary {
  max-width: none;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.price-history-v2-modal-close {
  border-radius: 14px;
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
  box-shadow: none;
}

.price-history-v2-modal-close:hover {
  transform: none;
  background: #f1f5f9;
  color: #0f172a;
}

.price-history-v2-modal-body {
  padding: 20px 24px 24px;
  background: #ffffff;
}

.price-history-v2-modal-actions {
  gap: 10px;
  padding: 16px 24px 24px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.price-history-v2-modal-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border-color: #cbd5e1;
  background: #ffffff;
  color: #334155;
  box-shadow: none;
}

.price-history-v2-modal-btn:hover {
  transform: none;
  border-color: #94a3b8;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: none;
}

.price-history-v2-modal-btn.is-favorite {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.price-history-v2-modal-btn.is-primary {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: none;
}

.price-history-v2-modal-btn.is-primary:hover {
  background: #1e293b;
  border-color: #1e293b;
  color: #ffffff;
}

#priceLogDayPopup .price-history-v3-popup-focus,
#priceLogDayPopup .price-history-v3-chart-wrap {
  padding: 20px;
}

#priceLogDayPopup .price-history-v3-chart-wrap.is-popup,
#priceLogDayPopup .price-history-v3-widget-host.is-popup {
  min-height: 480px;
  height: 480px;
}

html[data-theme='dark'] #page-price-history {
  background: transparent;
}

html[data-theme='dark'] #page-price-history .topic-terminal-header,
html[data-theme='dark'] #page-price-history .price-history-v3-quick-card,
html[data-theme='dark'] #page-price-history .price-history-v3-selector-card,
html[data-theme='dark'] #page-price-history .price-history-v3-launcher-card,
html[data-theme='dark'] #page-price-history .price-history-v3-toolbar-card,
html[data-theme='dark'] #page-price-history .price-history-v3-side-card,
html[data-theme='dark'] #page-price-history .price-history-v3-chart-card,
html[data-theme='dark'] #page-price-history .price-history-v3-metrics-shell,
html[data-theme='dark'] #page-price-history .price-history-v3-table-shell,
html[data-theme='dark'] #page-price-history .price-history-v3-loading-card,
html[data-theme='dark'] #page-price-history .price-history-v3-popup-focus,
html[data-theme='dark'] #page-price-history .price-history-v3-popup-table-shell,
html[data-theme='dark'] .popup.price-history-v2-modal,
html[data-theme='dark'] #priceLogDayPopup .price-history-v3-popup-focus,
html[data-theme='dark'] #priceLogDayPopup .price-history-v3-popup-metric,
html[data-theme='dark'] #priceLogDayPopup .price-history-v3-chart-wrap,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-card,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-empty-card,
html[data-theme='dark'] #page-price-history .price-history-v3-detail-meta {
  border-color: #334155 !important;
  background: #0f172a !important;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.42) !important;
}

html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-icon {
  border-color: rgba(14, 165, 233, 0.34);
  background: rgba(14, 165, 233, 0.14);
  color: #7dd3fc;
}

html[data-theme='dark'] #page-price-history .price-history-v3-brand-icon,
html[data-theme='dark'] #page-price-history .price-history-v3-empty-icon {
  border-color: #334155;
  background: #111827;
  color: #e2e8f0;
}

html[data-theme='dark'] #page-price-history .price-history-v3-brand-title,
html[data-theme='dark'] #page-price-history .price-history-v3-side-title,
html[data-theme='dark'] #page-price-history .price-history-v3-empty-title,
html[data-theme='dark'] #page-price-history .price-history-v3-loading-title,
html[data-theme='dark'] #page-price-history .price-history-v3-selector-title,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-card-symbol,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-card-name,
html[data-theme='dark'] #page-price-history .price-history-v3-detail-company,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-empty-title,
html[data-theme='dark'] #page-price-history .price-history-v3-detail-meta strong,
html[data-theme='dark'] #page-price-history .price-history-v3-chart-value-row strong,
html[data-theme='dark'] #page-price-history .price-history-v3-search-meta strong,
html[data-theme='dark'] #page-price-history .price-history-v3-table-date,
html[data-theme='dark'] #page-price-history .price-history-v3-recent-copy strong,
html[data-theme='dark'] #page-price-history .price-history-v3-side-stat strong,
html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-control-value,
html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-control-value strong,
html[data-theme='dark'] .price-history-v2-modal .price-history-v2-modal-title,
html[data-theme='dark'] #priceLogDayPopup .price-history-v3-popup-focus h4,
html[data-theme='dark'] #priceLogDayPopup .price-history-v3-popup-metric strong {
  color: #e2e8f0;
}

html[data-theme='dark'] #page-price-history .price-history-v3-brand-text,
html[data-theme='dark'] #page-price-history .price-history-v3-quick-note,
html[data-theme='dark'] #page-price-history .price-history-v3-chart-subtitle,
html[data-theme='dark'] #page-price-history .price-history-v3-side-empty,
html[data-theme='dark'] #page-price-history .price-history-v3-empty-text,
html[data-theme='dark'] #page-price-history .price-history-v3-loading-text,
html[data-theme='dark'] #page-price-history .price-history-v3-selector-note,
html[data-theme='dark'] #page-price-history .price-history-v3-launcher-note,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-empty-text,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-card-meta,
html[data-theme='dark'] #page-price-history .price-history-v3-recent-copy span,
html[data-theme='dark'] #page-price-history .price-history-v3-side-stat span,
html[data-theme='dark'] #page-price-history .price-history-v3-side-note,
html[data-theme='dark'] #page-price-history .price-history-v3-search-hint,
html[data-theme='dark'] #page-price-history .price-history-v3-table,
html[data-theme='dark'] #page-price-history .price-history-v3-provider-note,
html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-status-text,
html[data-theme='dark'] .price-history-v2-modal-summary,
html[data-theme='dark'] #priceLogDayPopup .price-history-v3-popup-metric span,
html[data-theme='dark'] #priceLogDayPopup .price-history-v3-tv-empty {
  color: #94a3b8;
}

html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-pill,
html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-control-card,
html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-status,
html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-btn.is-secondary,
html[data-theme='dark'] #page-price-history .price-history-v3-search-input,
html[data-theme='dark'] #page-price-history .price-history-v3-search-results,
html[data-theme='dark'] #page-price-history .price-history-v3-search-item,
html[data-theme='dark'] #page-price-history .price-history-v3-chip,
html[data-theme='dark'] #page-price-history .price-history-v3-search-clear,
html[data-theme='dark'] #page-price-history .price-history-v3-reset-btn,
html[data-theme='dark'] #page-price-history .price-history-v3-save-btn,
html[data-theme='dark'] #page-price-history .price-history-v3-inline-btn,
html[data-theme='dark'] #page-price-history .price-history-v3-export-btn,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-card-remove,
html[data-theme='dark'] #page-price-history .price-history-v3-date-field,
html[data-theme='dark'] #page-price-history .price-history-v3-popup-date,
html[data-theme='dark'] #page-price-history .price-history-v3-timeframe-pill,
html[data-theme='dark'] #page-price-history .price-history-v3-recent-item,
html[data-theme='dark'] #page-price-history .price-history-v3-metric-card,
html[data-theme='dark'] #page-price-history .price-history-v3-popup-metric,
html[data-theme='dark'] #page-price-history .price-history-v3-chart-wrap,
html[data-theme='dark'] #page-price-history .price-history-v3-status-badge,
html[data-theme='dark'] #page-price-history .price-history-v3-chart-meta,
html[data-theme='dark'] #page-price-history .price-history-v3-side-widget-wrap,
html[data-theme='dark'] #page-price-history .price-history-v3-pulse-stats,
html[data-theme='dark'] .price-history-v2-modal-close,
html[data-theme='dark'] .price-history-v2-modal-btn {
  border-color: #334155;
  background: #111827;
  color: #cbd5e1;
}

html[data-theme='dark'] #page-price-history .price-history-v3-search-input:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-btn.is-primary,
html[data-theme='dark'] #page-price-history .price-history-v3-search-submit,
html[data-theme='dark'] #page-price-history .price-history-v3-open-btn,
html[data-theme='dark'] #page-price-history .price-history-v3-inline-btn.is-primary,
html[data-theme='dark'] .price-history-v2-modal-btn.is-primary {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #0f172a;
}

html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-btn.is-primary:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-search-submit:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-open-btn:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-inline-btn.is-primary:hover,
html[data-theme='dark'] .price-history-v2-modal-btn.is-primary:hover {
  background: #cbd5e1;
  border-color: #cbd5e1;
  color: #0f172a;
}

html[data-theme='dark'] #page-price-history .price-history-v3-save-btn.is-active,
html[data-theme='dark'] #page-price-history .price-history-v3-chip.is-favorite,
html[data-theme='dark'] #page-price-history .price-history-v3-timeframe-pill.is-active,
html[data-theme='dark'] #page-price-history .price-history-v3-symbol-pill,
html[data-theme='dark'] #page-price-history .price-history-v3-search-symbol,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-card-badge {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(96, 165, 250, 0.38);
  color: #bfdbfe;
}

html[data-theme='dark'] #page-price-history .price-history-v3-saved-card.is-active {
  background: #111827 !important;
  border-color: rgba(96, 165, 250, 0.38) !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3);
}

html[data-theme='dark'] #page-price-history .price-history-v3-search-item:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-chip:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-recent-item:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-search-clear:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-reset-btn:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-save-btn:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-inline-btn:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-export-btn:hover,
html[data-theme='dark'] #page-price-history .price-history-v3-saved-card-remove:hover,
html[data-theme='dark'] .price-history-v2-modal-close:hover,
html[data-theme='dark'] .price-history-v2-modal-btn:hover {
  border-color: #64748b;
  background: #1e293b;
  color: #e2e8f0;
}

html[data-theme='dark'] #page-price-history .price-history-v3-selector-kicker,
html[data-theme='dark'] #page-price-history .price-history-v3-launcher-kicker,
html[data-theme='dark'] #page-price-history .topic-terminal-header .topic-terminal-header-kicker {
  color: #7dd3fc;
}

html[data-theme='dark'] #page-price-history .price-history-v3-side-head,
html[data-theme='dark'] #page-price-history .price-history-v3-side-stat,
html[data-theme='dark'] #priceLogDayPopup .price-history-v3-popup-focus-head,
html[data-theme='dark'] .price-history-v2-modal-header,
html[data-theme='dark'] .price-history-v2-modal-actions {
  border-color: #334155;
}

@media (max-width: 1200px) {
  #page-price-history .price-history-v3-selector-layout {
    grid-template-columns: 1fr;
  }

  #page-price-history .price-history-v3-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  #page-price-history .price-history-v3-selector-head {
    flex-direction: column;
  }

  #page-price-history .price-history-v3-selector-note {
    max-width: none;
    text-align: left;
  }

  #page-price-history .price-history-v3-detail-meta-grid {
    grid-template-columns: 1fr;
  }

  #page-price-history .price-history-v3-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #page-price-history .topic-terminal-header {
    padding: 18px !important;
    gap: 14px !important;
  }

  #page-price-history .topic-terminal-header .topic-terminal-header-copy {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  #page-price-history .topic-terminal-header .price-history-v3-brand-row {
    gap: 12px !important;
  }

  #page-price-history .topic-terminal-header .price-history-v3-brand-text {
    margin: 0 !important;
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #page-price-history .topic-terminal-header .topic-terminal-header-pill-row {
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;
    justify-content: stretch !important;
  }

  #page-price-history .topic-terminal-header .topic-terminal-header-pill {
    flex: 1 1 100% !important;
    width: 100%;
  }

  #page-price-history .price-history-v3-selector-card,
  #page-price-history .price-history-v3-launcher-card {
    padding: 16px;
  }

  #page-price-history .price-history-v3-search-control.is-compact .price-history-v3-search-row,
  #page-price-history .price-history-v3-detail-header-row {
    flex-direction: column;
  }

  #page-price-history .price-history-v3-saved-card {
    flex-basis: min(84vw, 248px);
    min-width: min(84vw, 248px);
  }

  #page-price-history .price-history-v3-widget-host.is-main {
    min-height: 420px;
    height: 420px;
  }

  #page-price-history .price-history-v3-side-widget-wrap.is-detail-shell,
  #page-price-history .price-history-v3-widget-host.is-symbol-overview,
  #page-price-history .price-history-v3-widget-host.is-company-profile,
  #page-price-history .price-history-v3-widget-host.is-pulse,
  #page-price-history .price-history-v3-widget-host.is-popup,
  #page-price-history .price-history-v3-side-widget-wrap.is-pulse,
  #priceLogDayPopup .price-history-v3-chart-wrap.is-popup,
  #priceLogDayPopup .price-history-v3-widget-host.is-popup {
    min-height: 320px;
    height: 320px;
  }

  #page-price-history .price-history-v3-widget-host.is-detail {
    min-height: 320px;
    height: 320px;
  }
}

/* ===== Price History Premium Density Pass ===== */
#page-price-history {
  --price-history-section-gap: 16px;
  --price-history-section-gap-tight: 12px;
  --price-history-surface-radius: 16px;
  --price-history-inner-radius: 14px;
  --price-history-surface-pad: 14px;
  --price-history-header-pad: 14px 16px;
  --price-history-input-height: 44px;
  --price-history-chip-height: 28px;
  --price-history-ui-border: rgba(148, 163, 184, 0.18);
  --price-history-ui-surface: #ffffff;
  --price-history-ui-soft: #f8fafc;
  --price-history-ui-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px -24px rgba(15, 23, 42, 0.18);
  --price-history-ui-text: #0f172a;
  --price-history-ui-muted: #64748b;
  --price-history-ui-subtle: #94a3b8;
}

#page-price-history .topic-terminal-header.topic-terminal-header--price-history {
  gap: 20px;
  margin-bottom: var(--price-history-section-gap);
  padding: 18px !important;
  border-radius: 22px;
}

#page-price-history .topic-terminal-header--price-history .topic-terminal-header-pill-row {
  gap: 8px;
}

#page-price-history .topic-terminal-header--price-history .topic-terminal-header-pill {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #ffffff !important;
  color: #475569;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

#page-price-history .price-history-v3-ticker-tape-container,
#page-price-history :is(.price-history-v3-selector-card, .price-history-v3-launcher-card, .price-history-v3-toolbar-card, .price-history-v3-side-card, .price-history-v3-chart-card, .price-history-v3-metrics-shell, .price-history-v3-table-shell, .price-history-v3-loading-card, .price-history-v3-popup-focus, .price-history-v3-popup-table-shell, .popup.price-history-v2-modal, #priceLogDayPopup .price-history-v3-popup-focus, #priceLogDayPopup .price-history-v3-popup-metric, #priceLogDayPopup .price-history-v3-chart-wrap) {
  border-radius: calc(var(--price-history-surface-radius) + 2px) !important;
  border-color: var(--price-history-ui-border) !important;
  background: var(--price-history-ui-surface) !important;
  box-shadow: var(--price-history-ui-shadow) !important;
}

#page-price-history :is(.price-history-v3-selector-card, .price-history-v3-launcher-card, .price-history-v3-toolbar-card, .price-history-v3-side-card, .price-history-v3-loading-card) {
  padding: var(--price-history-surface-pad) !important;
}

#page-price-history .price-history-v3-ticker-tape-container {
  border-radius: var(--price-history-surface-radius);
}

#page-price-history .price-history-v3-selector-card {
  gap: var(--price-history-section-gap);
}

#page-price-history .price-history-v3-selector-head {
  gap: 14px;
}

#page-price-history .price-history-v3-selector-title {
  margin-top: 4px;
  font-size: 22px;
  letter-spacing: -0.025em;
}

#page-price-history .price-history-v3-selector-note,
#page-price-history .price-history-v3-launcher-note,
#page-price-history .price-history-v3-saved-empty-text,
#page-price-history .price-history-v3-saved-card-meta,
#page-price-history .price-history-v3-brand-text,
#page-price-history .price-history-v3-side-note,
#page-price-history .price-history-v3-provider-note {
  font-size: 12px;
  line-height: 1.55;
}

#page-price-history .price-history-v3-selector-layout,
#page-price-history .price-history-v3-bottom-grid,
#page-price-history .price-history-v3-quick-row,
#page-price-history .price-history-v3-layout {
  gap: var(--price-history-section-gap);
}

#page-price-history .price-history-v3-selector-rail {
  gap: 10px;
  padding: 2px 2px 6px;
}

#page-price-history .price-history-v3-saved-card {
  flex-basis: 228px;
  min-width: 228px;
  border-radius: var(--price-history-surface-radius);
}

#page-price-history .price-history-v3-saved-card-main {
  min-height: 104px;
  padding: 14px 48px 14px 14px;
  gap: 6px;
}

#page-price-history .price-history-v3-saved-card-symbol {
  font-size: 19px;
}

#page-price-history .price-history-v3-saved-card-name,
#page-price-history .price-history-v3-detail-company,
#page-price-history .price-history-v3-saved-empty-title {
  font-size: 14px;
}

#page-price-history .price-history-v3-saved-card-badge,
#page-price-history .price-history-v3-symbol-pill,
#page-price-history .price-history-v3-search-symbol {
  min-height: var(--price-history-chip-height);
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
}

#page-price-history .price-history-v3-saved-card-remove {
  top: 10px;
  right: 10px;
  width: 30px;
  min-height: 30px;
}

#page-price-history .price-history-v3-saved-empty-card {
  min-height: 104px;
  border-radius: var(--price-history-surface-radius);
  padding: 14px;
}

#page-price-history .price-history-v3-launcher-card {
  gap: 12px;
}

#page-price-history .price-history-v3-search-input {
  min-height: var(--price-history-input-height);
  padding: 0 44px 0 40px;
  border-radius: var(--price-history-inner-radius);
  font-size: 13px;
}

#page-price-history .price-history-v3-search-control.is-compact .price-history-v3-search-input {
  min-height: var(--price-history-input-height);
  padding-left: 40px;
}

#page-price-history .price-history-v3-search-results {
  border-radius: var(--price-history-surface-radius);
}

#page-price-history .price-history-v3-search-results.is-open {
  padding: 10px;
}

#page-price-history .price-history-v3-search-item {
  min-height: 56px;
  padding: 12px 14px;
  border-radius: var(--price-history-inner-radius);
}

#page-price-history .price-history-v3-search-hint {
  min-height: 42px;
  border-radius: var(--price-history-inner-radius);
  padding: 12px 14px;
  font-size: 12px;
}

#page-price-history :is(.price-history-v3-search-clear, .price-history-v3-search-submit, .price-history-v3-reset-btn, .price-history-v3-save-btn, .price-history-v3-inline-btn, .price-history-v3-export-btn, .price-history-v3-open-btn) {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--price-history-inner-radius);
  font-size: 10px;
  letter-spacing: 0.1em;
}

#page-price-history .price-history-v3-search-submit {
  min-width: 96px;
}

#page-price-history .price-history-v3-search-clear {
  width: 30px;
  min-height: 30px;
}

#page-price-history .price-history-v3-timeframe-group {
  gap: 8px;
}

#page-price-history .price-history-v3-timeframe-pill {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

#page-price-history .price-history-v3-filter-group,
#page-price-history .price-history-v3-chart-actions,
#page-price-history .price-history-v3-search-row {
  gap: 10px;
}

#page-price-history .price-history-v3-status-badge,
#page-price-history .price-history-v3-chart-meta {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

#page-price-history .price-history-v3-side-head {
  gap: 4px;
  padding-bottom: 12px;
}

#page-price-history .price-history-v3-side-title {
  font-size: 16px;
}

#page-price-history .price-history-v3-side-body {
  padding-top: 14px;
}

#page-price-history .price-history-v3-pulse-body {
  padding-top: 16px;
}

#page-price-history .price-history-v3-detail-stack {
  gap: 12px;
}

#page-price-history .price-history-v3-detail-header-row {
  gap: 10px;
}

#page-price-history .price-history-v3-detail-copy {
  gap: 8px;
}

#page-price-history .price-history-v3-detail-meta-grid {
  gap: 8px;
}

#page-price-history .price-history-v3-detail-meta {
  border-radius: var(--price-history-inner-radius);
  padding: 10px 12px;
  gap: 4px;
}

#page-price-history .price-history-v3-detail-meta span {
  font-size: 9px;
}

#page-price-history .price-history-v3-detail-meta strong {
  font-size: 12px;
}

#page-price-history .price-history-v3-side-widget-wrap {
  border-radius: var(--price-history-surface-radius);
}

#page-price-history .price-history-v3-chart-card,
#page-price-history .price-history-v3-popup-focus,
#page-price-history .price-history-v3-popup-table-shell {
  padding: var(--price-history-surface-pad) !important;
}

#page-price-history .price-history-v3-chart-copy {
  gap: 8px;
}

#page-price-history .price-history-v3-chart-tag-row,
#page-price-history .price-history-v3-chart-value-row,
#page-price-history .price-history-v3-popup-focus-head {
  gap: 10px;
}

#page-price-history .price-history-v3-chart-value-row strong {
  font-size: 32px;
}

#page-price-history .price-history-v3-chart-wrap {
  margin-top: 14px;
  border-radius: var(--price-history-surface-radius);
}

#page-price-history .price-history-v3-provider-note {
  margin-top: 14px;
}

#page-price-history .price-history-v3-widget-host.is-main {
  min-height: 520px;
  height: 520px;
}

#page-price-history .price-history-v3-widget-host.is-symbol-overview,
#page-price-history .price-history-v3-widget-host.is-company-profile {
  min-height: 332px;
  height: 332px;
}

#page-price-history .price-history-v3-widget-host.is-detail {
  min-height: 236px;
  height: 236px;
}

#page-price-history .price-history-v3-widget-host.is-pulse {
  min-height: 360px;
  height: 360px;
}

#page-price-history .price-history-v3-widget-host.is-popup,
#priceLogDayPopup .price-history-v3-widget-host.is-popup {
  min-height: 440px;
  height: 440px;
}

#page-price-history .price-history-v3-metric-grid,
#page-price-history .price-history-v3-popup-metric-grid {
  gap: 10px;
}

#page-price-history .price-history-v3-metric-card,
#page-price-history .price-history-v3-popup-metric {
  border-radius: var(--price-history-inner-radius);
  padding: 12px;
  gap: 6px;
}

#page-price-history .price-history-v3-metric-label,
#page-price-history .price-history-v3-popup-metric span {
  font-size: 9px;
}

#page-price-history .price-history-v3-metric-value {
  font-size: 18px;
}

#page-price-history .price-history-v3-table-head {
  margin-bottom: 12px;
}

#page-price-history .price-history-v3-table th {
  padding: 12px 14px;
  font-size: 9px;
}

#page-price-history .price-history-v3-table td {
  padding: 14px;
  font-size: 12px;
}

#page-price-history .price-history-v3-recent-item {
  padding: 12px 14px;
  border-radius: var(--price-history-inner-radius);
  margin-bottom: 8px;
}

#page-price-history .price-history-v3-recent-copy strong,
#page-price-history .price-history-v3-popup-focus h4 {
  font-size: 13px;
}

#page-price-history .price-history-v3-recent-copy span {
  font-size: 11px;
}

#page-price-history .price-history-v3-floating-action {
  gap: 10px;
}

#priceLogDayPopup .price-history-v3-popup-focus,
#priceLogDayPopup .price-history-v3-chart-wrap {
  padding: var(--price-history-surface-pad);
}

.popup.price-history-v2-modal {
  border-radius: calc(var(--price-history-surface-radius, 16px) + 4px);
}

.price-history-v2-modal-header {
  padding: 18px 18px 14px;
}

.price-history-v2-modal .price-history-v2-modal-title {
  font-size: 16px;
}

.price-history-v2-modal-summary {
  font-size: 12px;
}

.price-history-v2-modal-body {
  padding: 16px 18px 18px;
}

.price-history-v2-modal-actions {
  gap: 8px;
  padding: 14px 18px 18px;
}

.price-history-v2-modal-close,
.price-history-v2-modal-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--price-history-inner-radius, 14px);
  font-size: 11px;
}

html[data-theme='dark'] #page-price-history {
  --price-history-ui-border: color-mix(in srgb, var(--border-bright) 62%, transparent);
  --price-history-ui-surface: color-mix(in srgb, var(--bg-card) 96%, transparent);
  --price-history-ui-soft: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  --price-history-ui-shadow: none;
}

html[data-theme='dark'] #page-price-history :is(.topic-terminal-header, .price-history-v3-ticker-tape-container, .price-history-v3-selector-card, .price-history-v3-launcher-card, .price-history-v3-toolbar-card, .price-history-v3-side-card, .price-history-v3-chart-card, .price-history-v3-metrics-shell, .price-history-v3-table-shell, .price-history-v3-loading-card, .price-history-v3-popup-focus, .price-history-v3-popup-table-shell, .price-history-v3-saved-card, .price-history-v3-saved-empty-card, .price-history-v3-detail-meta, .price-history-v3-side-widget-wrap, .price-history-v3-pulse-stats, .price-history-v3-chart-wrap, .price-history-v3-popup-metric, .price-history-v2-modal) {
  border-color: var(--price-history-ui-border) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] #page-price-history :is(.topic-terminal-header, .price-history-v3-ticker-tape-container, .price-history-v3-selector-card, .price-history-v3-launcher-card, .price-history-v3-toolbar-card, .price-history-v3-side-card, .price-history-v3-chart-card, .price-history-v3-metrics-shell, .price-history-v3-table-shell, .price-history-v3-loading-card, .price-history-v3-popup-focus, .price-history-v3-popup-table-shell, .price-history-v3-saved-card, .price-history-v3-saved-empty-card, .price-history-v3-detail-meta, .price-history-v3-side-widget-wrap, .price-history-v3-pulse-stats, .price-history-v3-chart-wrap, .price-history-v3-popup-metric) {
  background: var(--price-history-ui-surface) !important;
}

html[data-theme='dark'] #page-price-history :is(.price-history-v3-search-input, .price-history-v3-search-results, .price-history-v3-search-item, .price-history-v3-chip, .price-history-v3-search-clear, .price-history-v3-reset-btn, .price-history-v3-save-btn, .price-history-v3-inline-btn, .price-history-v3-export-btn, .price-history-v3-open-btn, .price-history-v3-date-field, .price-history-v3-popup-date, .price-history-v3-timeframe-pill, .price-history-v3-recent-item, .price-history-v3-metric-card, .price-history-v3-status-badge, .price-history-v3-chart-meta, .price-history-v2-modal-close, .price-history-v2-modal-btn) {
  border-color: var(--price-history-ui-border);
}

@media (max-width: 1024px) {
  #page-price-history .price-history-v3-layout,
  #page-price-history .price-history-v3-selector-layout,
  #page-price-history .price-history-v3-bottom-grid {
    gap: 14px;
  }
}

@media (max-width: 640px) {
  #page-price-history .topic-terminal-header.topic-terminal-header--price-history {
    padding: 16px !important;
    border-radius: 20px;
  }

  #page-price-history .price-history-v3-selector-card,
  #page-price-history .price-history-v3-launcher-card,
  #page-price-history .price-history-v3-toolbar-card,
  #page-price-history .price-history-v3-side-card,
  #page-price-history .price-history-v3-chart-card {
    padding: 14px !important;
  }

  #page-price-history .price-history-v3-widget-host.is-main {
    min-height: 400px;
    height: 400px;
  }

  #page-price-history .price-history-v3-widget-host.is-symbol-overview,
  #page-price-history .price-history-v3-widget-host.is-company-profile,
  #page-price-history .price-history-v3-widget-host.is-pulse,
  #page-price-history .price-history-v3-widget-host.is-popup,
  #priceLogDayPopup .price-history-v3-widget-host.is-popup,
  #page-price-history .price-history-v3-widget-host.is-detail {
    min-height: 300px;
    height: 300px;
  }
}

/* ===== Dashboard Unified Layout Refresh (End Cascade) ===== */
#page-dashboard .dashboard-main-pair {
  gap: 18px !important;
  align-items: start !important;
}

#page-dashboard :is(.dashboard-week-summary-card.week-ahead-react-shell, .dashboard-options-rec-card.options-react-shell) {
  border-radius: 16px !important;
  border: 1px solid var(--dash-ui-border, rgba(148, 163, 184, 0.22)) !important;
  background: var(--dash-ui-surface, #ffffff) !important;
  box-shadow: var(--dash-ui-shadow, 0 1px 2px rgba(15, 23, 42, 0.05)) !important;
  padding: 8px 0 0 !important;
  overflow: hidden !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#page-dashboard .dashboard-panel-card {
  border-radius: 16px !important;
  border: 1px solid var(--dash-ui-border, rgba(148, 163, 184, 0.22)) !important;
  background: var(--dash-ui-surface, #ffffff) !important;
  box-shadow: var(--dash-ui-shadow, 0 1px 2px rgba(15, 23, 42, 0.05)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#page-dashboard .dashboard-panel-card::before {
  display: none !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell,
#page-dashboard .dashboard-options-rec-card.options-react-shell:has(#dashOptionsRec) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell:not(:has(#dashOptionsRec)) {
  border-radius: 16px !important;
  border: 1px solid var(--dash-ui-border, rgba(148, 163, 184, 0.22)) !important;
  background: var(--dash-ui-surface, #ffffff) !important;
  box-shadow: var(--dash-ui-shadow, 0 1px 2px rgba(15, 23, 42, 0.05)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .week-ahead-header,
#page-dashboard .dashboard-options-rec-card.options-react-shell:has(#dashOptionsRec) .week-ahead-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 14px 16px !important;
  margin: 0 0 12px !important;
  border: 1px solid var(--dash-ui-border, rgba(148, 163, 184, 0.22)) !important;
  border-radius: 14px !important;
  background: var(--dash-ui-surface, #ffffff) !important;
  box-shadow: var(--dash-ui-shadow, 0 1px 2px rgba(15, 23, 42, 0.05)) !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell:not(:has(#dashOptionsRec)) .week-ahead-header,
#page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell .week-ahead-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 18px 18px 12px !important;
  margin: 0 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-dashboard :is(.dashboard-week-summary-card.week-ahead-react-shell, .dashboard-options-rec-card.options-react-shell) .week-ahead-title,
#page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell .week-ahead-title {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--dash-ui-text, #0f172a) !important;
}

#page-dashboard :is(.dashboard-week-summary-card.week-ahead-react-shell, .dashboard-options-rec-card.options-react-shell) .week-ahead-subtitle,
#page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell .week-ahead-subtitle {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: var(--dash-ui-muted, #64748b) !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(.dashboard-options-rec-card.options-react-shell, .signal-modern__hero, .signal-modern__metric),
#page-dashboard :is(#signalScenarioContent > .card, #signalInsightPanel .stat-card, #signalInsightPanel .card),
#page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajgraph-card, .trajneo-headline-side, .trajneo-flow-card, .trajectory-point-detail.trajneo-detail-card, .trajneo-day-btn),
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell :is(#dashForecastGrid, #dashForecastGrid .dash-day-widget, #dashForecastDetail),
#page-dashboard .dashboard-options-rec-card.options-react-shell :is(#dashOptionsRec, #dashConfidencePressure .trajneo-flow-card, .por-metric-box, .por-ai-block, .por-option-snapshot, .por-option-item) {
  border-radius: 16px !important;
  border: 1px solid var(--dash-ui-border, rgba(148, 163, 184, 0.22)) !important;
  background: var(--dash-ui-surface, #ffffff) !important;
  box-shadow: var(--dash-ui-shadow, 0 1px 2px rgba(15, 23, 42, 0.05)) !important;
  backdrop-filter: none !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell {
  border-radius: 0 !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-modern__hero,
#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-modern__metric,
#page-dashboard :is(#signalScenarioContent > .card, #signalInsightPanel .stat-card, #signalInsightPanel .card),
#page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajgraph-card, .trajneo-headline-side, .trajneo-flow-card, .trajectory-point-detail.trajneo-detail-card),
#page-dashboard .dashboard-options-rec-card.options-react-shell :is(#dashOptionsRec, #dashConfidencePressure .trajneo-flow-card, .por-ai-block, .por-option-snapshot) {
  padding: 14px !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-modern__tag {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-modern__track,
#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure :is(.trajneo-flow-track, .trajneo-risk-track) {
  height: 8px !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-modern__stat,
#page-dashboard #signalScenarioContent .signal-pill-chip,
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-badge,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-range-pill {
  box-shadow: none !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-modern__stat-label,
#page-dashboard #signalScenarioContent .card-title,
#page-dashboard #signalInsightPanel .stat-label,
#page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajgraph-stat-label, .trajneo-day-label, .trajneo-flow-title, .trajneo-flow-day, .trajneo-flow-metric-label, .trajneo-option-cell .label, .trajneo-kpi-label),
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-label,
#page-dashboard .dashboard-options-rec-card.options-react-shell :is(.por-metric-label, .por-option-item-label, .por-row.por-head, #dashConfidencePressure .trajneo-flow-columns-label, #dashConfidencePressure .trajneo-flow-metric-label, #dashConfidencePressure .trajneo-flow-metric-mobile-label, #dashConfidencePressure .trajneo-flow-stat-label, #dashConfidencePressure .trajneo-flow-day) {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--dash-ui-subtle, #94a3b8) !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(.signal-modern__stat-value, .signal-modern__metric-name, #i1val, #i2val, #i3val, #i4val, #i5val, #i6val, #i7val),
#page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(#i1meta, #i2meta, #i3meta, #i4meta, #i5meta, #i6meta, #i7meta),
#page-dashboard #signalInsightPanel :is(.text-xs, .font-semibold, .font-bold),
#page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajgraph-stat-value, .trajneo-day-date, .trajneo-day-move, .trajneo-flow-date, .trajneo-flow-metric-value, .trajneo-flow-right, .trajneo-kpi-value, .trajneo-kpi-sub),
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid :is(.dash-day-date, .dash-day-move),
#page-dashboard .dashboard-options-rec-card.options-react-shell :is(.por-ai-copy p, .por-row:not(.por-head), .por-row .por-day, #dashConfidencePressure .trajneo-flow-title, #dashConfidencePressure .trajneo-flow-date, #dashConfidencePressure .trajneo-flow-metric-value, #dashConfidencePressure .trajneo-flow-stat-value, #dashConfidencePressure .trajneo-flow-right) {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajneo-day-btn, .trajgraph-card),
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
  background: var(--dash-ui-surface, #ffffff) !important;
  transform: none !important;
  opacity: 1 !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
  min-height: 188px !important;
  padding: 14px 12px 16px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-selected-ring,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-selected-ring {
  border-radius: 16px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-price,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-price,
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-main {
  font-family: var(--font-sans) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid {
  background: var(--dash-ui-soft, #f8fafc) !important;
  box-shadow: none !important;
  padding: 12px !important;
  margin: 0 0 12px !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-grid,
#page-dashboard .dashboard-options-rec-card.options-react-shell .por-shell,
#page-dashboard #signalScenarioContent,
#page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(.signal-modern__stats, .signal-modern__metrics) {
  gap: 10px !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-box {
  min-height: 80px !important;
  padding: 12px !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-value {
  font-size: clamp(20px, 1.8vw, 26px) !important;
  line-height: 1 !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item {
  min-height: 72px !important;
  padding: 10px 12px !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item-value {
  font-size: clamp(18px, 2vw, 24px) !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-row {
  border-radius: 14px !important;
  background: var(--dash-ui-soft, #f8fafc) !important;
  padding: 14px 16px !important;
  gap: 14px !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-panel-card,
html[data-theme='dark'] #page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(.dashboard-options-rec-card.options-react-shell, .signal-modern__hero, .signal-modern__metric),
html[data-theme='dark'] #page-dashboard :is(#signalScenarioContent > .card, #signalInsightPanel .stat-card, #signalInsightPanel .card),
html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajgraph-card, .trajneo-headline-side, .trajneo-flow-card, .trajectory-point-detail.trajneo-detail-card, .trajneo-day-btn),
html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell :is(#dashForecastGrid, #dashForecastGrid .dash-day-widget, #dashForecastDetail),
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell :is(#dashOptionsRec, #dashConfidencePressure .trajneo-flow-card, .por-metric-box, .por-ai-block, .por-option-snapshot, .por-option-item) {
  border-color: var(--dash-ui-border, color-mix(in srgb, var(--border-bright) 64%, transparent)) !important;
  background: var(--dash-ui-surface, color-mix(in srgb, var(--bg-card) 96%, transparent)) !important;
  box-shadow: var(--dash-ui-shadow, none) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid,
html[data-theme='dark'] #page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-row,
html[data-theme='dark'] #page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-modern__stat {
  background: var(--dash-ui-soft, color-mix(in srgb, var(--bg-hover) 84%, transparent)) !important;
}

@media (max-width: 980px) {
  #page-dashboard .dashboard-main-pair {
    gap: 16px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn,
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
    min-height: 176px !important;
  }
}

@media (max-width: 760px) {
  #page-dashboard :is(.dashboard-week-summary-card.week-ahead-react-shell, .dashboard-options-rec-card.options-react-shell) .week-ahead-header,
  #page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell .week-ahead-header {
    padding: 16px 16px 10px !important;
  }

  #page-dashboard :is(.dashboard-week-summary-card.week-ahead-react-shell, .dashboard-options-rec-card.options-react-shell) .week-ahead-title,
  #page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell .week-ahead-title {
    font-size: 14px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn,
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
    min-height: 164px !important;
    padding: 12px 10px 14px !important;
  }

  #page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(.signal-modern__hero, .signal-modern__metric),
  #page-dashboard :is(#signalScenarioContent > .card, #signalInsightPanel .stat-card, #signalInsightPanel .card),
  #page-dashboard .dashboard-options-rec-card.options-react-shell :is(#dashOptionsRec, #dashConfidencePressure .trajneo-flow-card, .por-ai-block, .por-option-snapshot) {
    padding: 14px !important;
  }
}

/* ===== Signal Header Shell Fix ===== */
#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card {
  border-radius: 18px !important;
  border: 1px solid var(--dash-ui-border, rgba(148, 163, 184, 0.22)) !important;
  background: var(--dash-ui-surface, #ffffff) !important;
  box-shadow: var(--dash-ui-shadow, 0 1px 2px rgba(15, 23, 42, 0.05)) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  backdrop-filter: none !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card::before,
#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card::after {
  display: none !important;
  content: none !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card .week-ahead-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 18px 18px 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card .week-ahead-title {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--dash-ui-text, #0f172a) !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card .week-ahead-subtitle {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: var(--dash-ui-muted, #64748b) !important;
}

@media (max-width: 760px) {
  #page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card {
    border-radius: 16px !important;
  }

  #page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card .week-ahead-header {
    padding: 16px 16px 12px !important;
  }

  #page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card .week-ahead-title {
    font-size: 14px !important;
  }
}

#page-dashboard #signalScenarioContent .signal-distribution-foot {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 34px !important;
  margin-top: 8px !important;
}

#page-dashboard #signalScenarioContent .signal-distribution-chip-row {
  margin-top: 0 !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  #page-dashboard #signalScenarioContent .signal-distribution-foot {
    min-height: 32px !important;
  }
}

/* ===== FEEDBACK REVIEW FLOW OVERRIDE ===== */
#feedbackPopup {
  --feedback-shell-bg: #f8fafc;
  --feedback-panel-bg: #ffffff;
  --feedback-panel-muted: #f8fafc;
  --feedback-border: #dbe5ef;
  --feedback-border-strong: #cbd5e1;
  --feedback-text: #0f172a;
  --feedback-muted: #475569;
  --feedback-soft: #64748b;
  --feedback-neutral-bg: #f8fafc;
  --feedback-neutral-border: #cbd5e1;
  --feedback-review-bg: #fffbeb;
  --feedback-review-border: #fcd34d;
  --feedback-bull: #047857;
  --feedback-bull-bg: #ecfdf3;
  --feedback-bull-border: #bbf7d0;
  --feedback-bear: #be123c;
  --feedback-bear-bg: #fff1f2;
  --feedback-bear-border: #fecdd3;
}

html[data-theme='dark'] #feedbackPopup {
  --feedback-shell-bg: #0b1220;
  --feedback-panel-bg: #0f172a;
  --feedback-panel-muted: #081120;
  --feedback-border: #334155;
  --feedback-border-strong: #475569;
  --feedback-text: #f8fafc;
  --feedback-muted: #cbd5e1;
  --feedback-soft: #94a3b8;
  --feedback-neutral-bg: #081120;
  --feedback-neutral-border: #475569;
  --feedback-review-bg: rgba(120, 88, 31, 0.18);
  --feedback-review-border: rgba(245, 158, 11, 0.42);
  --feedback-bull: #6ee7b7;
  --feedback-bull-bg: rgba(22, 101, 52, 0.22);
  --feedback-bull-border: rgba(110, 231, 183, 0.32);
  --feedback-bear: #fda4af;
  --feedback-bear-bg: rgba(127, 29, 29, 0.22);
  --feedback-bear-border: rgba(253, 164, 175, 0.3);
}

#feedbackPopup .popup.feedback-popup-shell {
  width: min(960px, calc(100vw - 32px));
  margin: 24px auto;
  max-height: calc(100vh - 48px);
  border: 1px solid var(--feedback-border) !important;
  border-radius: 16px;
  background: var(--feedback-shell-bg) !important;
  box-shadow: 0 22px 54px -36px rgba(15, 23, 42, 0.45) !important;
  overflow-y: auto;
  overflow-x: hidden;
}

#feedbackPopup .feedback-modal-header,
#feedbackPopup .feedback-modal-detail-wrap,
#feedbackPopup .feedback-editor-modern,
#feedbackPopup .popup-actions.feedback-modal-actions {
  background: var(--feedback-shell-bg) !important;
}

#feedbackPopup .feedback-modal-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--feedback-border);
}

#feedbackPopup .feedback-modal-title {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--feedback-text) !important;
}

#feedbackPopup .feedback-modal-intro {
  margin: 0;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--feedback-muted) !important;
}

#feedbackPopup .feedback-modal-detail-wrap {
  padding: 20px 28px 0;
  border: 0;
}

#feedbackPopup #feedbackDetail {
  margin: 0;
  padding: 0;
}

#feedbackPopup .feedback-review-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#feedbackPopup .feedback-review-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--feedback-border);
}

#feedbackPopup .feedback-review-summary-copy {
  display: grid;
  gap: 8px;
}

#feedbackPopup .feedback-review-meta {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--feedback-soft);
}

#feedbackPopup .feedback-review-date {
  font-size: 30px;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--feedback-text);
}

#feedbackPopup .feedback-review-note {
  max-width: 760px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--feedback-muted);
}

#feedbackPopup .feedback-review-state {
  display: grid;
  gap: 6px;
  align-self: start;
  padding: 15px 16px;
  border: 1px solid var(--feedback-neutral-border);
  border-radius: 10px;
  background: var(--feedback-neutral-bg);
}

#feedbackPopup .feedback-review-state-label {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--feedback-text);
}

#feedbackPopup .feedback-review-state-copy {
  font-size: 13px;
  line-height: 1.55;
  color: var(--feedback-muted);
}

#feedbackPopup .feedback-review-state.tone-review {
  border-color: var(--feedback-review-border);
  background: var(--feedback-review-bg);
}

#feedbackPopup .feedback-review-state.tone-correct {
  border-color: var(--feedback-bull-border);
  background: var(--feedback-bull-bg);
}

#feedbackPopup .feedback-review-state.tone-incorrect {
  border-color: var(--feedback-bear-border);
  background: var(--feedback-bear-bg);
}

#feedbackPopup .feedback-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
  gap: 16px;
}

#feedbackPopup .feedback-review-main,
#feedbackPopup .feedback-review-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#feedbackPopup .feedback-review-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--feedback-border);
  border-radius: 12px;
  background: var(--feedback-panel-bg) !important;
}

#feedbackPopup .feedback-review-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#feedbackPopup .feedback-review-panel-title {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--feedback-text);
}

#feedbackPopup .feedback-review-panel-meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--feedback-soft);
}

#feedbackPopup .feedback-review-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

#feedbackPopup .feedback-review-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--feedback-border);
}

#feedbackPopup .feedback-review-stat:nth-child(-n+2) {
  padding-top: 0;
  border-top: 0;
}

#feedbackPopup .feedback-review-stat-label {
  font-size: 12px;
  line-height: 1.4;
  color: var(--feedback-soft);
}

#feedbackPopup .feedback-review-stat-value {
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--feedback-text);
}

#feedbackPopup .feedback-review-stat-meta {
  font-size: 12px;
  line-height: 1.55;
  color: var(--feedback-muted);
}

#feedbackPopup .feedback-review-probability-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--feedback-border);
}

#feedbackPopup .feedback-review-probability-seg {
  height: 100%;
}

#feedbackPopup .feedback-review-probability-seg.bull {
  background: #10b981;
}

#feedbackPopup .feedback-review-probability-seg.neutral {
  background: #94a3b8;
}

#feedbackPopup .feedback-review-probability-seg.bear {
  background: #f43f5e;
}

#feedbackPopup .feedback-review-probability-breakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#feedbackPopup .feedback-review-probability-item {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--feedback-border);
}

#feedbackPopup .feedback-review-probability-item span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--feedback-soft);
}

#feedbackPopup .feedback-review-probability-item strong {
  font-size: 16px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--feedback-text);
}

#feedbackPopup .feedback-review-probability-item.bull strong {
  color: var(--feedback-bull);
}

#feedbackPopup .feedback-review-probability-item.bear strong {
  color: var(--feedback-bear);
}

#feedbackPopup .feedback-review-kv-list {
  display: flex;
  flex-direction: column;
}

#feedbackPopup .feedback-review-kv-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--feedback-border);
}

#feedbackPopup .feedback-review-kv-row:first-child {
  padding-top: 0;
  border-top: 0;
}

#feedbackPopup .feedback-review-kv-row:last-child {
  padding-bottom: 0;
}

#feedbackPopup .feedback-review-kv-row span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--feedback-soft);
}

#feedbackPopup .feedback-review-kv-row strong {
  max-width: 62%;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
  text-align: right;
  color: var(--feedback-text);
}

#feedbackPopup .feedback-editor-modern {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 28px 22px;
}

#feedbackPopup .feedback-field-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--feedback-border);
  border-radius: 12px;
  background: var(--feedback-panel-bg) !important;
}

#feedbackPopup .feedback-editor-label {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--feedback-text) !important;
}

#feedbackPopup .feedback-editor-choices {
  display: flex;
  gap: 12px;
}

#feedbackPopup .feedback-choice-btn {
  min-height: 48px !important;
  border: 1px solid var(--feedback-border) !important;
  border-radius: 10px !important;
  background: var(--feedback-panel-muted) !important;
  color: var(--feedback-muted) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none !important;
}

#feedbackPopup .feedback-choice-btn:hover {
  border-color: var(--feedback-border-strong) !important;
  background: var(--feedback-panel-bg) !important;
}

#feedbackPopup .feedback-choice-btn.is-correct.active {
  border-color: var(--feedback-bull-border) !important;
  background: var(--feedback-bull-bg) !important;
  color: var(--feedback-bull) !important;
}

#feedbackPopup .feedback-choice-btn.is-incorrect.active {
  border-color: var(--feedback-bear-border) !important;
  background: var(--feedback-bear-bg) !important;
  color: var(--feedback-bear) !important;
}

#feedbackPopup .feedback-choice-btn .feedback-choice-icon {
  width: 18px;
  height: 18px;
}

#feedbackPopup .feedback-pnl-wrap {
  position: relative;
}

#feedbackPopup .feedback-pnl-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--feedback-soft);
  font-size: 15px;
  font-weight: 700;
  pointer-events: none;
}

#feedbackPopup .feedback-pnl-input {
  min-height: 48px;
  padding-left: 30px;
  padding-right: 14px;
  border: 1px solid var(--feedback-border) !important;
  border-radius: 10px;
  background: var(--feedback-panel-muted) !important;
  color: var(--feedback-text) !important;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none !important;
}

#feedbackPopup .feedback-pnl-input::placeholder {
  color: var(--feedback-soft);
  font-weight: 500;
}

#feedbackPopup .feedback-pnl-input:hover,
#feedbackPopup .feedback-pnl-input:focus {
  border-color: var(--feedback-border-strong) !important;
  background: var(--feedback-panel-bg) !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-editor-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--feedback-soft) !important;
}

#feedbackPopup .popup-actions.feedback-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 28px 28px;
}

#feedbackPopup .popup-actions.feedback-modal-actions .btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none !important;
}

#feedbackPopup .feedback-cancel-btn {
  border: 1px solid var(--feedback-border) !important;
  background: var(--feedback-panel-bg) !important;
  color: var(--feedback-muted) !important;
}

#feedbackPopup .feedback-cancel-btn:hover {
  border-color: var(--feedback-border-strong) !important;
  color: var(--feedback-text) !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-neutral,
#feedbackPopup #feedbackSaveBtn.feedback-save-correct,
#feedbackPopup #feedbackSaveBtn.feedback-save-incorrect {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}

html[data-theme='dark'] #feedbackPopup #feedbackSaveBtn.feedback-save-neutral,
html[data-theme='dark'] #feedbackPopup #feedbackSaveBtn.feedback-save-correct,
html[data-theme='dark'] #feedbackPopup #feedbackSaveBtn.feedback-save-incorrect {
  background: #f8fafc !important;
  border-color: #f8fafc !important;
  color: #0f172a !important;
}

#feedbackPopup #feedbackSaveBtn.feedback-save-neutral:hover,
#feedbackPopup #feedbackSaveBtn.feedback-save-correct:hover,
#feedbackPopup #feedbackSaveBtn.feedback-save-incorrect:hover {
  background: #020617 !important;
  border-color: #020617 !important;
}

html[data-theme='dark'] #feedbackPopup #feedbackSaveBtn.feedback-save-neutral:hover,
html[data-theme='dark'] #feedbackPopup #feedbackSaveBtn.feedback-save-correct:hover,
html[data-theme='dark'] #feedbackPopup #feedbackSaveBtn.feedback-save-incorrect:hover {
  background: #e2e8f0 !important;
  border-color: #e2e8f0 !important;
}

#feedbackPopup #feedbackSaveBtn:disabled {
  background: var(--feedback-panel-muted) !important;
  border-color: var(--feedback-border) !important;
  color: var(--feedback-soft) !important;
  cursor: not-allowed;
}

@media (max-width: 920px) {
  #feedbackPopup .feedback-review-summary,
  #feedbackPopup .feedback-review-grid {
    grid-template-columns: 1fr;
  }

  #feedbackPopup .feedback-review-state {
    max-width: none;
  }
}

@media (max-width: 760px) {
  #feedbackPopup .popup.feedback-popup-shell {
    width: calc(100vw - 20px);
    margin: 16px auto;
    max-height: calc(100vh - 32px);
  }

  #feedbackPopup .feedback-modal-header,
  #feedbackPopup .feedback-modal-detail-wrap,
  #feedbackPopup .feedback-editor-modern,
  #feedbackPopup .popup-actions.feedback-modal-actions {
    padding-left: 20px;
    padding-right: 20px;
  }

  #feedbackPopup .feedback-modal-header {
    padding-top: 20px;
    padding-bottom: 14px;
  }

  #feedbackPopup .feedback-modal-title {
    font-size: 23px;
  }

  #feedbackPopup .feedback-review-date {
    font-size: 27px;
  }

  #feedbackPopup .feedback-review-stats,
  #feedbackPopup .feedback-review-probability-breakdown {
    grid-template-columns: 1fr;
  }

  #feedbackPopup .feedback-review-stat {
    padding-top: 12px;
    border-top: 1px solid var(--feedback-border);
  }

  #feedbackPopup .feedback-review-stat:first-child {
    padding-top: 0;
    border-top: 0;
  }

  #feedbackPopup .feedback-review-panel-head,
  #feedbackPopup .feedback-editor-choices,
  #feedbackPopup .popup-actions.feedback-modal-actions {
    flex-direction: column;
  }

  #feedbackPopup .feedback-review-kv-row,
  #feedbackPopup .feedback-review-panel-head {
    align-items: flex-start;
  }

  #feedbackPopup .feedback-review-kv-row strong {
    max-width: none;
    text-align: left;
  }

  #feedbackPopup .feedback-choice-btn,
  #feedbackPopup .popup-actions.feedback-modal-actions .btn {
    width: 100%;
  }
}

/* ===== FEEDBACK POPUP — flat surface (no wash/gradient), fit viewport (no shell scroll) ===== */
#feedbackPopup {
  --feedback-shell-bg: #ffffff;
  --feedback-panel-muted: #ffffff;
  --feedback-neutral-bg: #ffffff;
}

html[data-theme="dark"] #feedbackPopup {
  --feedback-shell-bg: #0f172a;
  --feedback-panel-muted: #0f172a;
  --feedback-neutral-bg: #0f172a;
}

#feedbackPopup.popup-overlay {
  padding: 10px;
}

#feedbackPopup .popup.feedback-popup-shell {
  margin: 10px auto !important;
  max-height: calc(100dvh - 20px) !important;
  overflow: hidden !important;
  scrollbar-gutter: auto;
  background: var(--feedback-shell-bg) !important;
  background-image: none !important;
  width: min(880px, calc(100vw - 20px)) !important;
}

#feedbackPopup .feedback-modal-header,
#feedbackPopup .feedback-modal-detail-wrap,
#feedbackPopup .feedback-editor-modern,
#feedbackPopup .popup-actions.feedback-modal-actions {
  background: var(--feedback-shell-bg) !important;
  background-image: none !important;
}

#feedbackPopup .feedback-modal-header {
  padding: 12px 22px 10px !important;
}

#feedbackPopup .feedback-modal-title {
  margin: 0 0 6px !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

#feedbackPopup .feedback-modal-intro {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

#feedbackPopup .feedback-modal-detail-wrap {
  padding: 10px 22px 0 !important;
}

#feedbackPopup .feedback-review-shell {
  gap: 10px !important;
}

#feedbackPopup .feedback-review-summary {
  gap: 12px !important;
  padding-bottom: 10px !important;
}

#feedbackPopup .feedback-review-summary-copy {
  gap: 4px !important;
}

#feedbackPopup .feedback-review-meta {
  font-size: 11px !important;
}

#feedbackPopup .feedback-review-date {
  font-size: 22px !important;
}

#feedbackPopup .feedback-review-note {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#feedbackPopup .feedback-review-state,
#feedbackPopup .feedback-review-state.tone-review,
#feedbackPopup .feedback-review-state.tone-live,
#feedbackPopup .feedback-review-state.tone-upcoming,
#feedbackPopup .feedback-review-state.tone-correct,
#feedbackPopup .feedback-review-state.tone-incorrect {
  padding: 10px 12px !important;
  background: var(--feedback-panel-bg) !important;
  background-image: none !important;
  border: 1px solid var(--feedback-border) !important;
}

#feedbackPopup .feedback-review-state.tone-live {
  border-color: rgba(14, 165, 233, 0.35) !important;
}

#feedbackPopup .feedback-review-state.tone-review {
  border-color: rgba(245, 158, 11, 0.4) !important;
}

#feedbackPopup .feedback-review-state.tone-correct {
  border-color: rgba(16, 185, 129, 0.4) !important;
}

#feedbackPopup .feedback-review-state.tone-incorrect {
  border-color: rgba(244, 63, 94, 0.4) !important;
}

#feedbackPopup .feedback-review-state-label {
  font-size: 14px !important;
}

#feedbackPopup .feedback-review-state-copy {
  font-size: 12px !important;
}

#feedbackPopup .feedback-review-grid {
  gap: 10px !important;
}

#feedbackPopup .feedback-review-main,
#feedbackPopup .feedback-review-side {
  gap: 10px !important;
}

#feedbackPopup .feedback-review-panel {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background-image: none !important;
}

#feedbackPopup .feedback-review-panel-title {
  font-size: 13px !important;
}

#feedbackPopup .feedback-review-panel-meta {
  font-size: 10px !important;
}

#feedbackPopup .feedback-review-stats {
  gap: 0 12px !important;
}

#feedbackPopup .feedback-review-stat {
  padding: 6px 0 !important;
  gap: 2px !important;
}

#feedbackPopup .feedback-review-stat-label {
  font-size: 10px !important;
}

#feedbackPopup .feedback-review-stat-value {
  font-size: 15px !important;
}

#feedbackPopup .feedback-review-stat-meta {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

#feedbackPopup .feedback-review-probability-bar {
  height: 8px !important;
}

#feedbackPopup .feedback-review-probability-breakdown {
  gap: 8px !important;
}

#feedbackPopup .feedback-review-probability-item {
  padding-top: 6px !important;
  gap: 2px !important;
}

#feedbackPopup .feedback-review-probability-item span {
  font-size: 10px !important;
}

#feedbackPopup .feedback-review-probability-item strong {
  font-size: 13px !important;
}

#feedbackPopup .feedback-review-kv-row {
  padding: 6px 0 !important;
  gap: 10px !important;
}

#feedbackPopup .feedback-review-kv-row span {
  font-size: 11px !important;
}

#feedbackPopup .feedback-review-kv-row strong {
  font-size: 12px !important;
}

#feedbackPopup .feedback-editor-modern {
  padding: 10px 22px 12px !important;
  gap: 10px !important;
}

#feedbackPopup .feedback-field-block {
  padding: 10px !important;
  gap: 8px !important;
  background-image: none !important;
}

#feedbackPopup .feedback-choice-btn {
  min-height: 40px !important;
}

#feedbackPopup .feedback-pnl-input {
  min-height: 40px !important;
  font-size: 14px !important;
}

#feedbackPopup .popup-actions.feedback-modal-actions {
  padding: 0 22px 14px !important;
}

#feedbackPopup .popup-actions.feedback-modal-actions .btn {
  min-height: 40px !important;
}

@media (max-height: 700px) {
  #feedbackPopup .feedback-modal-header {
    padding: 10px 18px 8px !important;
  }

  #feedbackPopup .feedback-modal-title {
    font-size: 16px !important;
  }

  #feedbackPopup .feedback-review-date {
    font-size: 18px !important;
  }

  #feedbackPopup .feedback-review-shell {
    gap: 8px !important;
  }

  #feedbackPopup .feedback-review-panel {
    padding: 8px !important;
    gap: 6px !important;
  }

  #feedbackPopup .feedback-editor-modern {
    padding: 8px 18px 10px !important;
    gap: 8px !important;
  }

  #feedbackPopup .popup-actions.feedback-modal-actions {
    padding: 0 18px 10px !important;
  }
}

/* ===== FEEDBACK POPUP — final cascade lock ===== */
#feedbackPopup .popup.feedback-popup-shell {
  width: min(960px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 48px) !important;
  border-radius: 16px !important;
  background-image: none !important;
}

#feedbackPopup .feedback-review-panel,
#feedbackPopup .feedback-field-block {
  border-radius: 12px !important;
}

#feedbackPopup .feedback-choice-btn,
#feedbackPopup .feedback-pnl-input,
#feedbackPopup .popup-actions.feedback-modal-actions .btn,
#feedbackPopup .feedback-review-state {
  border-radius: 10px !important;
}

/* ===== FEEDBACK POPUP — reference layout pass ===== */
#feedbackPopup {
  --feedback-ref-shell: #ffffff;
  --feedback-ref-shell-border: #e5e7eb;
  --feedback-ref-surface: #ffffff;
  --feedback-ref-surface-strong: #ffffff;
  --feedback-ref-muted-surface: #f8fafc;
  --feedback-ref-stroke: #e5e7eb;
  --feedback-ref-stroke-soft: #eef2f7;
  --feedback-ref-text: #111827;
  --feedback-ref-text-muted: #6b7280;
  --feedback-ref-text-soft: #9ca3af;
  --feedback-ref-primary: #2563eb;
  --feedback-ref-primary-strong: #1d4ed8;
  --feedback-ref-primary-soft: rgba(219, 234, 254, 0.92);
  --feedback-ref-amber: #d97706;
  --feedback-ref-amber-soft: rgba(255, 247, 237, 0.95);
  --feedback-ref-teal: #0f766e;
  --feedback-ref-teal-soft: rgba(240, 253, 250, 0.95);
  --feedback-ref-rose: #e11d48;
  --feedback-ref-rose-soft: rgba(255, 241, 242, 0.95);
  --feedback-ref-orange: #f59e0b;
  --feedback-ref-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] #feedbackPopup {
  --feedback-ref-shell: #ffffff;
  --feedback-ref-shell-border: #e5e7eb;
  --feedback-ref-surface: #ffffff;
  --feedback-ref-surface-strong: #ffffff;
  --feedback-ref-muted-surface: #f8fafc;
  --feedback-ref-stroke: #e5e7eb;
  --feedback-ref-stroke-soft: #eef2f7;
  --feedback-ref-text: #111827;
  --feedback-ref-text-muted: #6b7280;
  --feedback-ref-text-soft: #9ca3af;
  --feedback-ref-primary: #2563eb;
  --feedback-ref-primary-strong: #1d4ed8;
  --feedback-ref-primary-soft: rgba(219, 234, 254, 0.92);
  --feedback-ref-amber: #d97706;
  --feedback-ref-amber-soft: rgba(255, 247, 237, 0.95);
  --feedback-ref-teal: #0f766e;
  --feedback-ref-teal-soft: rgba(240, 253, 250, 0.95);
  --feedback-ref-rose: #e11d48;
  --feedback-ref-rose-soft: rgba(255, 241, 242, 0.95);
  --feedback-ref-orange: #f59e0b;
  --feedback-ref-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

#feedbackPopup.popup-overlay {
  padding: 16px !important;
  background: transparent !important;
}

#feedbackPopup.react-popup-overlay.visible {
  backdrop-filter: blur(10px) !important;
}

#feedbackPopup .feedback-modal-backdrop {
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: none;
}

#feedbackPopup .popup.feedback-popup-shell {
  width: min(1024px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 40px !important;
  border: 1px solid var(--feedback-ref-shell-border) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: var(--feedback-ref-shadow) !important;
  backdrop-filter: none;
}

#feedbackPopup .popup.feedback-popup-shell::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#feedbackPopup .feedback-modal-header,
#feedbackPopup .feedback-modal-body,
#feedbackPopup .feedback-modal-detail-wrap,
#feedbackPopup .feedback-editor-modern,
#feedbackPopup .popup-actions.feedback-modal-actions,
#feedbackPopup .feedback-review-list-card,
#feedbackPopup .feedback-review-signal-card {
  background-image: none !important;
}

#feedbackPopup .feedback-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 24px 24px 16px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

#feedbackPopup .feedback-modal-header-copy {
  min-width: 0;
}

#feedbackPopup .feedback-modal-title {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: var(--feedback-ref-text) !important;
}

#feedbackPopup .feedback-modal-intro {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#feedbackPopup .feedback-modal-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--feedback-ref-muted-surface);
  color: var(--feedback-ref-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

#feedbackPopup .feedback-modal-close:hover {
  background: rgba(229, 231, 235, 0.92);
  color: var(--feedback-ref-text);
}

html[data-theme="dark"] #feedbackPopup .feedback-modal-close:hover {
  background: #f3f4f6;
}

#feedbackPopup .feedback-modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

#feedbackPopup .feedback-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 24px;
}

#feedbackPopup .feedback-modal-detail-wrap {
  padding: 0 !important;
  background: transparent !important;
}

#feedbackPopup #feedbackDetail {
  margin: 0;
}

#feedbackPopup .feedback-review-shell {
  display: flex;
  flex-direction: column;
  gap: 32px !important;
}

#feedbackPopup .feedback-review-hero {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--feedback-ref-stroke);
}

#feedbackPopup .feedback-review-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#feedbackPopup .feedback-review-badge {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

#feedbackPopup .feedback-review-badge.is-symbol {
  background: var(--feedback-ref-primary-soft);
  color: var(--feedback-ref-primary);
}

#feedbackPopup .feedback-review-badge.is-state {
  background: var(--feedback-ref-amber-soft);
  color: var(--feedback-ref-amber);
}

#feedbackPopup .feedback-review-badge.is-state.tone-upcoming {
  background: rgba(238, 242, 255, 0.95);
  color: #4f46e5;
}

#feedbackPopup .feedback-review-badge.is-state.tone-live,
#feedbackPopup .feedback-review-badge.is-state.tone-review {
  background: var(--feedback-ref-amber-soft);
  color: var(--feedback-ref-amber);
}

#feedbackPopup .feedback-review-badge.is-state.tone-correct {
  background: var(--feedback-ref-teal-soft);
  color: var(--feedback-ref-teal);
}

#feedbackPopup .feedback-review-badge.is-state.tone-incorrect {
  background: var(--feedback-ref-rose-soft);
  color: var(--feedback-ref-rose);
}

#feedbackPopup .feedback-review-badge-icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
}

#feedbackPopup .feedback-review-badge-icon svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#feedbackPopup .feedback-review-date {
  margin: 0 0 12px !important;
  font-size: 44px !important;
  line-height: 0.98 !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  color: var(--feedback-ref-text) !important;
}

#feedbackPopup .feedback-review-trendline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--feedback-ref-text-muted);
}

#feedbackPopup .feedback-review-trend-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

#feedbackPopup .feedback-review-trend-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#feedbackPopup .feedback-review-trendline.tone-bull .feedback-review-trend-icon {
  color: var(--feedback-ref-teal);
}

#feedbackPopup .feedback-review-trendline.tone-bear .feedback-review-trend-icon {
  color: var(--feedback-ref-rose);
}

#feedbackPopup .feedback-review-trendline.tone-neutral .feedback-review-trend-icon {
  color: var(--feedback-ref-text-soft);
}

#feedbackPopup .feedback-review-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr) !important;
  gap: 32px !important;
}

#feedbackPopup .feedback-review-main,
#feedbackPopup .feedback-review-side {
  display: flex;
  flex-direction: column;
  gap: 16px !important;
}

#feedbackPopup .feedback-review-section-title {
  padding-left: 8px;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--feedback-ref-text-muted);
}

#feedbackPopup .feedback-review-list-card,
#feedbackPopup .feedback-review-signal-card {
  border: 1px solid var(--feedback-ref-stroke-soft);
  border-radius: 24px !important;
  background: var(--feedback-ref-surface) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  backdrop-filter: none;
}

#feedbackPopup .feedback-review-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--feedback-ref-stroke-soft);
}

#feedbackPopup .feedback-review-list-row:last-child {
  border-bottom: 0;
}

#feedbackPopup .feedback-review-list-row.is-generated {
  align-items: flex-start;
}

#feedbackPopup .feedback-review-list-label {
  font-size: 15px;
  line-height: 1.45;
  color: var(--feedback-ref-text-muted);
}

#feedbackPopup .feedback-review-list-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  min-width: 0;
}

#feedbackPopup .feedback-review-list-main {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--feedback-ref-text);
}

#feedbackPopup .feedback-review-list-meta,
#feedbackPopup .feedback-review-generated-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--feedback-ref-text-soft);
}

#feedbackPopup .feedback-review-list-chip,
#feedbackPopup .feedback-review-list-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}

#feedbackPopup .feedback-review-list-chip.tone-bull {
  background: var(--feedback-ref-teal-soft);
  color: var(--feedback-ref-teal);
}

#feedbackPopup .feedback-review-list-chip.tone-bear {
  background: var(--feedback-ref-rose-soft);
  color: var(--feedback-ref-rose);
}

#feedbackPopup .feedback-review-list-chip.tone-neutral {
  background: var(--feedback-ref-muted-surface);
  color: var(--feedback-ref-text-muted);
}

#feedbackPopup .feedback-review-list-pill.tone-high {
  background: var(--feedback-ref-amber-soft);
  color: var(--feedback-ref-amber);
}

#feedbackPopup .feedback-review-list-pill.tone-medium {
  background: rgba(254, 249, 195, 0.95);
  color: #ca8a04;
}

#feedbackPopup .feedback-review-list-pill.tone-low {
  background: var(--feedback-ref-teal-soft);
  color: var(--feedback-ref-teal);
}

#feedbackPopup .feedback-review-signal-card {
  padding: 16px;
}

#feedbackPopup .feedback-review-signal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

#feedbackPopup .feedback-review-signal-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--feedback-ref-text-muted);
}

#feedbackPopup .feedback-review-signal-bar {
  height: 10px;
  width: 100%;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
  background: var(--feedback-ref-stroke-soft);
}

#feedbackPopup .feedback-review-signal-seg {
  height: 100%;
}

#feedbackPopup .feedback-review-signal-seg.bull {
  background: #14b8a6;
}

#feedbackPopup .feedback-review-signal-seg.neutral {
  background: #f59e0b;
}

#feedbackPopup .feedback-review-signal-seg.bear {
  background: #f43f5e;
}

#feedbackPopup .feedback-review-signal-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 500;
}

#feedbackPopup .feedback-review-signal-legend .bull {
  color: #0f766e;
}

#feedbackPopup .feedback-review-signal-legend .neutral {
  color: #d97706;
}

#feedbackPopup .feedback-review-signal-legend .bear {
  color: #e11d48;
}

#feedbackPopup .feedback-editor-modern {
  margin-top: 40px;
  padding: 24px 32px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 32px !important;
  align-items: start !important;
  border: 1px solid var(--feedback-ref-stroke) !important;
  border-radius: 28px !important;
  background: var(--feedback-ref-surface-strong) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: none;
}

#feedbackPopup .feedback-field-block {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-editor-label {
  margin: 0 0 12px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--feedback-ref-text-muted) !important;
}

#feedbackPopup .feedback-editor-choices {
  display: flex !important;
  gap: 0 !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: var(--feedback-ref-muted-surface) !important;
}

#feedbackPopup .feedback-choice-btn {
  min-height: 44px !important;
  flex: 1 1 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--feedback-ref-text-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-choice-btn:hover {
  background: rgba(229, 231, 235, 0.5) !important;
  color: var(--feedback-ref-text) !important;
}

html[data-theme="dark"] #feedbackPopup .feedback-choice-btn:hover {
  background: rgba(229, 231, 235, 0.5) !important;
}

#feedbackPopup .feedback-choice-btn.is-correct.active,
#feedbackPopup .feedback-choice-btn.is-incorrect.active {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  outline: 1px solid rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] #feedbackPopup .feedback-choice-btn.is-correct.active,
html[data-theme="dark"] #feedbackPopup .feedback-choice-btn.is-incorrect.active {
  background: #ffffff !important;
  outline-color: rgba(15, 23, 42, 0.05);
}

#feedbackPopup .feedback-choice-btn.is-correct.active {
  color: var(--feedback-ref-teal) !important;
}

#feedbackPopup .feedback-choice-btn.is-incorrect.active {
  color: var(--feedback-ref-rose) !important;
}

#feedbackPopup .feedback-choice-btn .feedback-choice-icon {
  width: 18px !important;
  height: 18px !important;
}

#feedbackPopup .feedback-pnl-wrap {
  position: relative;
}

#feedbackPopup .feedback-pnl-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--feedback-ref-text-soft);
  pointer-events: none;
}

#feedbackPopup .feedback-pnl-prefix svg {
  width: 18px;
  height: 18px;
}

#feedbackPopup .feedback-pnl-input {
  min-height: 48px !important;
  padding-left: 42px !important;
  padding-right: 16px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: rgba(249, 250, 251, 0.92) !important;
  color: var(--feedback-ref-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #feedbackPopup .feedback-pnl-input {
  background: #f9fafb !important;
}

#feedbackPopup .feedback-pnl-input::placeholder {
  color: var(--feedback-ref-text-soft) !important;
  font-weight: 400 !important;
}

#feedbackPopup .feedback-pnl-input:hover {
  background: rgba(243, 244, 246, 0.96) !important;
}

html[data-theme="dark"] #feedbackPopup .feedback-pnl-input:hover {
  background: #f3f4f6 !important;
}

#feedbackPopup .feedback-pnl-input:focus {
  background: #ffffff !important;
  border-color: var(--feedback-ref-primary) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
}

html[data-theme="dark"] #feedbackPopup .feedback-pnl-input:focus {
  background: #ffffff !important;
}

#feedbackPopup .feedback-editor-hint {
  display: none !important;
}

#feedbackPopup .popup-actions.feedback-modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  border-top: 1px solid var(--feedback-ref-stroke) !important;
  background: #ffffff !important;
  backdrop-filter: none;
  border-bottom-left-radius: 40px !important;
  border-bottom-right-radius: 40px !important;
}

html[data-theme="dark"] #feedbackPopup .popup-actions.feedback-modal-actions {
  background: #ffffff !important;
}

#feedbackPopup .popup-actions.feedback-modal-actions .btn {
  min-height: 44px !important;
  padding: 0 24px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-save-btn {
  background: var(--feedback-ref-primary) !important;
  border: 1px solid var(--feedback-ref-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
}

#feedbackPopup .feedback-save-btn:hover {
  background: var(--feedback-ref-primary-strong) !important;
  border-color: var(--feedback-ref-primary-strong) !important;
}

#feedbackPopup #feedbackSaveBtn:disabled {
  background: rgba(229, 231, 235, 0.96) !important;
  border-color: rgba(229, 231, 235, 0.96) !important;
  color: var(--feedback-ref-text-soft) !important;
  box-shadow: none !important;
}

#feedbackPopup .feedback-cancel-btn {
  margin-left: auto;
  border: 0 !important;
  background: transparent !important;
  color: var(--feedback-ref-text-muted) !important;
}

#feedbackPopup .feedback-cancel-btn:hover {
  background: rgba(229, 231, 235, 0.52) !important;
  color: var(--feedback-ref-text) !important;
}

html[data-theme="dark"] #feedbackPopup .feedback-cancel-btn:hover {
  background: rgba(229, 231, 235, 0.52) !important;
}

@media (max-width: 900px) {
  #feedbackPopup .popup.feedback-popup-shell {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 32px !important;
  }

  #feedbackPopup .feedback-modal-body {
    padding: 0 20px 20px;
  }

  #feedbackPopup .feedback-review-grid,
  #feedbackPopup .feedback-editor-modern {
    grid-template-columns: 1fr !important;
  }

  #feedbackPopup .feedback-review-date {
    font-size: 40px !important;
  }

  #feedbackPopup .popup-actions.feedback-modal-actions {
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }
}

@media (max-width: 640px) {
  #feedbackPopup.popup-overlay {
    padding: 10px !important;
  }

  #feedbackPopup .popup.feedback-popup-shell {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 28px !important;
  }

  #feedbackPopup .feedback-modal-header {
    padding: 20px 20px 14px !important;
  }

  #feedbackPopup .feedback-modal-body {
    padding: 0 20px 20px;
  }

  #feedbackPopup .feedback-review-shell {
    gap: 24px !important;
  }

  #feedbackPopup .feedback-review-date {
    font-size: 34px !important;
  }

  #feedbackPopup .feedback-review-list-row {
    align-items: flex-start;
  }

  #feedbackPopup .feedback-review-list-value {
    max-width: 58%;
  }

  #feedbackPopup .feedback-review-signal-legend {
    flex-direction: column;
    align-items: flex-start;
  }

  #feedbackPopup .feedback-editor-modern {
    margin-top: 28px;
    padding: 20px !important;
    gap: 24px !important;
  }

  #feedbackPopup .popup-actions.feedback-modal-actions {
    padding: 16px 20px 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
  }

  #feedbackPopup .feedback-cancel-btn {
    margin-left: 0;
  }

  #feedbackPopup .popup-actions.feedback-modal-actions .btn {
    width: 100%;
  }
}


/* ===== PREMIUM ARCHIVE & PREDICTION UI ===== */
.history-modern-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-modern-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.history-modern-info-banner i {
  font-size: 20px;
  color: var(--cyan);
}

.history-modern-info-text {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.history-modern-windows-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modern-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  min-height: 240px;
}

.modern-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #94a3b8;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.08);
}

.modern-empty-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin-bottom: 6px;
}

.modern-empty-subtitle {
  font-size: 14px;
  color: #64748b;
  max-width: 400px;
}

/* Premium Popup Overlay & Shell */
.popup-overlay.popup-overlay-premium {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(15, 23, 42, 0.4);
}

.archive-premium-popup-shell {
  width: min(1200px, 94vw);
  height: min(840px, 90vh);
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 32px 84px -16px rgba(2, 6, 23, 0.3), 0 0 0 1px rgba(226, 232, 240, 0.8) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.archive-premium-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.archive-premium-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px 36px 24px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
  border-bottom: 1px solid #f1f5f9;
  flex: 0 0 auto;
}

.archive-premium-header-copy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.archive-premium-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 20px -8px rgba(2, 132, 199, 0.5);
  flex: 0 0 auto;
}

.archive-premium-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 6px;
}

.archive-premium-subtitle {
  font-size: 14px;
  color: #64748b;
  max-width: 500px;
  line-height: 1.5;
}

.archive-premium-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.archive-premium-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.archive-premium-close:hover {
  background: #f1f5f9;
  color: #0f172a;
  transform: scale(1.05);
}

.archive-premium-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  background: #f8fafc;
}

.archive-premium-sheet {
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.archive-premium-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.archive-premium-summary-chip {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.archive-premium-summary-chip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e2e8f0 0%, transparent 100%);
  opacity: 0.5;
}

.archive-premium-summary-chip .chip-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #94a3b8;
}

.archive-premium-summary-chip .chip-val {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #0f172a;
  line-height: 1;
}

.archive-premium-sheet-panel {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.04);
}

.archive-premium-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e2e8f0;
}

.archive-premium-sheet-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 6px;
}

.archive-premium-sheet-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.archive-premium-sheet-copy {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.archive-premium-sheet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.archive-premium-sheet-meta .badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.archive-premium-sheet-meta .badge-subtle {
  background: #f1f5f9;
  color: #475569;
}

.archive-premium-sheet-meta .badge-default {
  background: rgba(56, 189, 248, 0.1);
  color: #0284c7;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.archive-premium-sheet-subhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.archive-premium-sheet-subcopy {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}

.archive-premium-sheet-caption {
  font-size: 12px;
  color: #94a3b8;
}

.prediction-archive-group-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Premium Card Overhaul */
.archive-premium-group-card {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.archive-premium-group-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.archive-premium-group-card.is-open {
  border-color: #94a3b8;
  box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.12);
}

.archive-premium-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  gap: 20px;
}

.archive-premium-group-card.is-open .archive-premium-group-head {
  background: #f8fafc;
  border-bottom: 1px dashed #e2e8f0;
}

.archive-premium-group-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.archive-premium-group-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.archive-premium-group-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0;
}

.archive-premium-group-desc {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.archive-premium-meta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.archive-premium-meta-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 8px;
}

.archive-premium-meta-pill.is-warn {
  background: #fffbeb;
  color: #d97706;
}

.archive-premium-group-stats {
  display: flex;
  gap: 20px;
}

.archive-premium-group-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.archive-premium-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 160px;
  padding: 10px 10px 10px 16px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  color: #0f172a;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
  text-align: left;
}

.archive-premium-toggle-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.archive-premium-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.archive-premium-toggle-labels {
  display: grid;
}

.archive-premium-toggle-label {
  grid-area: 1 / 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.2s, transform 0.2s;
}

.archive-premium-toggle-btn.is-open .archive-premium-toggle-label.is-closed {
  opacity: 0;
  transform: translateY(-4px);
}
.archive-premium-toggle-label.is-open {
  opacity: 0;
  transform: translateY(4px);
}
.archive-premium-toggle-btn.is-open .archive-premium-toggle-label.is-open {
  opacity: 1;
  transform: translateY(0);
}

.archive-premium-toggle-state {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.archive-premium-toggle-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #475569;
  transition: transform 0.3s ease, background 0.3s;
}

.archive-premium-toggle-btn.is-open .archive-premium-toggle-icon {
  transform: rotate(180deg);
  background: #e2e8f0;
  color: #0f172a;
}

.archive-premium-remove-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff1f2;
  border: 1px solid #ffe4e6;
  color: #e11d48;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.2s;
}

.archive-premium-remove-btn:hover {
  background: #ffe4e6;
  color: #be123c;
}

.archive-premium-group-body-shell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.archive-premium-group-body-shell.is-open {
  grid-template-rows: 1fr;
}

.archive-premium-group-body {
  min-height: 0;
  overflow: hidden;
  padding: 0 24px 24px;
  background: #f8fafc;
}

/* Dark Mode Overrides */
html[data-theme='dark'] .history-modern-info-banner {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
  border-color: rgba(71, 85, 105, 0.4);
}

html[data-theme='dark'] .history-modern-info-text {
  color: #cbd5e1;
}

html[data-theme='dark'] .modern-empty-state {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(71, 85, 105, 0.5);
}

html[data-theme='dark'] .modern-empty-icon {
  background: #0f172a;
  border-color: #334155;
}

html[data-theme='dark'] .modern-empty-title {
  color: #f8fafc;
}

html[data-theme='dark'] .modern-empty-subtitle {
  color: #94a3b8;
}

html[data-theme='dark'] .archive-premium-popup-shell {
  background: #0f172a;
  border-color: rgba(71, 85, 105, 0.8);
  box-shadow: 0 32px 84px -16px rgba(0, 0, 0, 0.6);
}

html[data-theme='dark'] .archive-premium-header {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(11, 17, 32, 1) 100%);
  border-bottom-color: rgba(51, 65, 85, 0.6);
}

html[data-theme='dark'] .archive-premium-title {
  color: #f8fafc;
}

html[data-theme='dark'] .archive-premium-subtitle {
  color: #94a3b8;
}

html[data-theme='dark'] .archive-premium-close {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

html[data-theme='dark'] .archive-premium-close:hover {
  background: #334155;
  color: #f8fafc;
}

html[data-theme='dark'] .archive-premium-body {
  background: #0f172a;
}

html[data-theme='dark'] .archive-premium-summary-chip {
  background: #1e293b;
  border-color: #334155;
}

html[data-theme='dark'] .archive-premium-summary-chip::before {
  background: linear-gradient(90deg, #475569 0%, transparent 100%);
}

html[data-theme='dark'] .archive-premium-summary-chip .chip-val {
  color: #f8fafc;
}

html[data-theme='dark'] .archive-premium-sheet-panel {
  background: #1e293b;
  border-color: #334155;
}

html[data-theme='dark'] .archive-premium-sheet-head {
  border-bottom-color: #334155;
}

html[data-theme='dark'] .archive-premium-sheet-title {
  color: #f8fafc;
}

html[data-theme='dark'] .archive-premium-sheet-copy {
  color: #94a3b8;
}

html[data-theme='dark'] .archive-premium-group-card {
  background: #111827;
  border-color: #334155;
}

html[data-theme='dark'] .archive-premium-group-card:hover {
  border-color: #475569;
}

html[data-theme='dark'] .archive-premium-group-card.is-open {
  border-color: #64748b;
}

html[data-theme='dark'] .archive-premium-group-head {
  background: linear-gradient(180deg, #1e293b 0%, #111827 100%);
}

html[data-theme='dark'] .archive-premium-group-card.is-open .archive-premium-group-head {
  background: #0f172a;
  border-bottom-color: #334155;
}

html[data-theme='dark'] .archive-premium-group-title {
  color: #f8fafc;
}

html[data-theme='dark'] .archive-premium-group-desc {
  color: #cbd5e1;
}

html[data-theme='dark'] .archive-premium-meta-pill {
  background: #1e293b;
  color: #cbd5e1;
}

html[data-theme='dark'] .archive-premium-meta-pill.is-warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

html[data-theme='dark'] .archive-premium-toggle-btn {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

html[data-theme='dark'] .archive-premium-toggle-btn:hover {
  background: #334155;
  border-color: #475569;
}

html[data-theme='dark'] .archive-premium-toggle-state {
  color: #94a3b8;
}

html[data-theme='dark'] .archive-premium-toggle-icon {
  background: #0f172a;
  color: #e2e8f0;
}

html[data-theme='dark'] .archive-premium-remove-btn {
  background: rgba(225, 29, 72, 0.15);
  border-color: rgba(225, 29, 72, 0.25);
  color: #fda4af;
}

html[data-theme='dark'] .archive-premium-group-body {
  background: #0f172a;
}

/* ===== HISTORY WORKSPACE REWORK ===== */
#page-history .history-workspace-shell {
  width: 100%;
  max-width: 1440px;
  margin: 16px auto 0;
  padding: 0 8px 28px;
  display: grid;
  gap: 24px;
}

#page-history .history-workspace-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

#page-history .history-workspace-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid #dbe1ea;
  background: #ffffff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#page-history .history-workspace-title-copy {
  display: grid;
  gap: 8px;
}

#page-history .history-workspace-title-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#page-history .history-workspace-title-line h3 {
  margin: 0;
  font-size: 31px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
}

#page-history .history-workspace-title-count {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

#page-history .history-workspace-title-copy p {
  margin: 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
}

#page-history .history-workspace-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#page-history .history-workspace-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #d7dde6;
  border-radius: 16px;
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#page-history .history-workspace-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

#page-history .history-workspace-btn.is-archive,
#page-history .history-workspace-btn.is-primary {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

#page-history .history-workspace-btn.is-archive:hover,
#page-history .history-workspace-btn.is-primary:hover {
  background: #0f172a;
  border-color: #0f172a;
}

#page-history .history-workspace-btn.is-muted {
  background: rgba(17, 24, 39, 0.05);
  border-color: transparent;
  color: #4b5563;
}

#page-history .history-workspace-btn.is-muted:hover {
  background: rgba(17, 24, 39, 0.09);
  color: #111827;
}

#page-history .history-workspace-btn.is-queue {
  flex: 1 1 auto;
}

#page-history .history-workspace-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid #dbe1ea;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#page-history .prediction-workspace-banner-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: #475569;
}

#page-history .prediction-workspace-banner-text strong {
  color: #111827;
  font-weight: 700;
}

#page-history .history-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  align-items: stretch;
}

#page-history .history-workspace-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  height: 100%;
  align-content: stretch;
}

#page-history .history-workspace-stat {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  padding: 20px;
  display: grid;
  gap: 12px;
  height: 100%;
  align-content: start;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

#page-history .history-workspace-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#page-history .history-workspace-stat-head span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}

#page-history .history-workspace-stat strong {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
}

#page-history .history-workspace-stat p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

#page-history .history-workspace-stat.tone-review .history-workspace-stat-head,
#page-history .history-workspace-stat.tone-review .history-workspace-stat-head svg {
  color: #d97706;
}

#page-history .history-workspace-stat.tone-live .history-workspace-stat-head,
#page-history .history-workspace-stat.tone-live .history-workspace-stat-head svg {
  color: #2563eb;
}

#page-history .history-workspace-stat.tone-coverage .history-workspace-stat-head,
#page-history .history-workspace-stat.tone-coverage .history-workspace-stat-head svg {
  color: #059669;
}

#page-history .history-workspace-stat.tone-manual .history-workspace-stat-head,
#page-history .history-workspace-stat.tone-manual .history-workspace-stat-head svg {
  color: #7c3aed;
}

#page-history .history-workspace-filter-card {
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #ffffff;
  padding: 20px;
  display: grid;
  gap: 20px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

#page-history .history-workspace-search {
  position: relative;
}

#page-history .history-workspace-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  display: inline-flex;
}

#page-history .history-workspace-search-input {
  width: 100%;
  min-height: 44px;
  padding: 0 40px 0 40px;
  border: 1px solid #dbe1ea;
  border-radius: 14px;
  background: #f8fafc;
  color: #111827;
  font-size: 14px;
  outline: 0;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

#page-history .history-workspace-search-input:focus {
  background: #ffffff;
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.14);
}

#page-history .history-workspace-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #9ca3af;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#page-history .history-workspace-search-clear:hover {
  color: #475569;
}

#page-history .history-workspace-filter-stack {
  display: grid;
  gap: 12px;
}

#page-history .history-workspace-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-history .history-workspace-pill {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe1ea;
  border-radius: 12px;
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#page-history .history-workspace-pill:hover:not(.is-static) {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #111827;
}

#page-history .history-workspace-pill.is-active {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

#page-history .history-workspace-pill.is-static {
  cursor: default;
  background: #f8fafc;
  color: #64748b;
}

#page-history .history-workspace-pill.tone-review {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #b45309;
}

#page-history .history-workspace-pill.tone-live {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

#page-history .history-workspace-pill.tone-upcoming {
  background: #f8fafc;
  border-color: #dbe1ea;
  color: #475569;
}

#page-history .history-workspace-pill.tone-reviewed {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

#page-history .history-workspace-pill.tone-all {
  background: #e5e7eb;
  border-color: #cbd5e1;
  color: #111827;
}

#page-history .history-workspace-pill.tone-review.is-active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

#page-history .history-workspace-pill.tone-live.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

#page-history .history-workspace-pill.tone-upcoming.is-active {
  background: #475569;
  border-color: #475569;
  color: #ffffff;
}

#page-history .history-workspace-pill.tone-reviewed.is-active {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
}

#page-history .history-workspace-pill.tone-all.is-active {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

#page-history .history-workspace-pill-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

#page-history .history-workspace-pill.is-active .history-workspace-pill-count {
  background: rgba(255, 255, 255, 0.18);
}

#page-history .history-workspace-queue {
  display: grid;
  gap: 16px;
}

#page-history .history-workspace-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#page-history .history-workspace-section-head h4 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}

#page-history .history-workspace-section-meta {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #dbe1ea;
  color: #475569;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}

#page-history .history-workspace-queue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

#page-history .history-workspace-loading-card,
#page-history .history-workspace-empty {
  min-height: 220px;
  border: 1px dashed #dbe1ea;
  border-radius: 24px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px 24px;
}

#page-history .history-workspace-loading-icon,
#page-history .history-workspace-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid #dbe1ea;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

#page-history .history-workspace-loading-card span {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

#page-history .history-workspace-empty-copy {
  display: grid;
  gap: 6px;
  max-width: 480px;
}

#page-history .history-workspace-empty-copy h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

#page-history .history-workspace-empty-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
}

#allForecastDaysPopup .history-workspace-empty {
  min-height: 240px;
  border: 1px dashed #dbe1ea;
  border-radius: 24px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px 24px;
}

#allForecastDaysPopup .history-workspace-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid #dbe1ea;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

#allForecastDaysPopup .history-workspace-empty-copy {
  display: grid;
  gap: 6px;
  max-width: 480px;
}

#allForecastDaysPopup .history-workspace-empty-copy h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

#allForecastDaysPopup .history-workspace-empty-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
}

#allForecastDaysPopup .history-workspace-btn {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #d7dde6;
  border-radius: 16px;
  background: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

#allForecastDaysPopup .history-workspace-btn.is-primary {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

#page-history .history-queue-card {
  border: 1px solid #e5e7eb;
  border-radius: 32px;
  background: #ffffff;
  padding: 24px;
  display: grid;
  gap: 18px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}

#page-history .history-queue-card-head,
#page-history .history-queue-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

#page-history .history-queue-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-history .history-queue-chip {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #dbe1ea;
  background: #f8fafc;
  color: #475569;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-history .history-queue-chip.is-symbol {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

#page-history .history-queue-state {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #b45309;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

#page-history .history-queue-state.is-live {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

#page-history .history-queue-state.is-upcoming {
  background: #f8fafc;
  border-color: #dbe1ea;
  color: #475569;
}

#page-history .history-queue-state.is-correct {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

#page-history .history-queue-state.is-incorrect {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

#page-history .history-queue-card-copy {
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
}

#page-history .history-queue-card-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#page-history .history-queue-card-title-row h5 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  color: #111827;
}

#page-history .history-queue-card-window {
  font-size: 15px;
  font-weight: 600;
  color: #6b7280;
}

#page-history .history-queue-card-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
}

#page-history .history-queue-card-price {
  min-width: 110px;
  display: grid;
  gap: 6px;
  text-align: right;
}

#page-history .history-queue-card-price strong {
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
}

#page-history .history-queue-card-price span {
  font-size: 14px;
  font-weight: 800;
}

#page-history .history-queue-card-price .is-pos,
#page-history .history-archive-day-card-price .is-pos {
  color: #059669;
}

#page-history .history-queue-card-price .is-neg,
#page-history .history-archive-day-card-price .is-neg {
  color: #e11d48;
}

#page-history .history-queue-card-metrics {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background: #f8fafc;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

#page-history .history-queue-card-metrics > div {
  display: grid;
  gap: 8px;
}

#page-history .history-queue-card-metrics span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

#page-history .history-queue-card-metrics strong {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: #111827;
}

#page-history .history-queue-card-actions {
  display: flex;
  gap: 12px;
}

#page-history .history-queue-icon-btn {
  width: 48px;
  height: 48px;
  border: 1px solid #dbe1ea;
  border-radius: 16px;
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#page-history .history-queue-icon-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #111827;
}

#page-history .history-signal {
  display: grid;
  gap: 8px;
}

#page-history .history-signal-track {
  display: flex;
  height: 6px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

#page-history .history-signal-segment {
  display: block;
  height: 100%;
}

#page-history .history-signal-segment.bull {
  background: #34d399;
}

#page-history .history-signal-segment.neutral {
  background: #f59e0b;
}

#page-history .history-signal-segment.bear {
  background: #fb7185;
}

#page-history .history-signal-legend {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#page-history .history-signal-legend .bull {
  color: #059669;
}

#page-history .history-signal-legend .neutral {
  color: #d97706;
}

#page-history .history-signal-legend .bear {
  color: #e11d48;
}

#page-history .history-signal.is-compact {
  gap: 6px;
}

#allForecastDaysPopup .history-signal {
  display: grid;
  gap: 6px;
}

#allForecastDaysPopup .history-signal-track {
  display: flex;
  height: 6px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

#allForecastDaysPopup .history-signal-segment {
  display: block;
  height: 100%;
}

#allForecastDaysPopup .history-signal-segment.bull {
  background: #34d399;
}

#allForecastDaysPopup .history-signal-segment.neutral {
  background: #cbd5e1;
}

#allForecastDaysPopup .history-signal-segment.bear {
  background: #fb7185;
}

#allForecastDaysPopup .history-signal-legend {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#allForecastDaysPopup .history-signal-legend .bull {
  color: #059669;
}

#allForecastDaysPopup .history-signal-legend .neutral {
  color: #64748b;
}

#allForecastDaysPopup .history-signal-legend .bear {
  color: #e11d48;
}

#page-history .history-archive-overlay {
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#allForecastDaysPopup .history-archive-modal {
  width: min(1100px, 100%);
  max-width: 1100px;
  height: min(90vh, 880px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 40px 100px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

#allForecastDaysPopup .history-archive-modal-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#allForecastDaysPopup .history-archive-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.82);
}

#allForecastDaysPopup .history-archive-modal-copy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

#allForecastDaysPopup .history-archive-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

#allForecastDaysPopup .history-archive-modal-title {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #111827;
}

#allForecastDaysPopup .history-archive-modal-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}

#allForecastDaysPopup .history-archive-modal-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#allForecastDaysPopup .history-archive-modal-close:hover {
  background: #e5e7eb;
  color: #111827;
}

#allForecastDaysPopup .history-archive-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
  background: rgba(248, 250, 252, 0.7);
}

#allForecastDaysPopup .history-archive-group-list {
  display: grid;
  gap: 16px;
}

#allForecastDaysPopup .history-archive-search-shell {
  display: grid;
  gap: 12px;
  margin-bottom: 4px;
}

#allForecastDaysPopup .history-archive-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .history-archive-search {
  position: relative;
  flex: 1 1 520px;
}

#allForecastDaysPopup .history-archive-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  display: inline-flex;
}

#allForecastDaysPopup .history-archive-search-input {
  width: 100%;
  min-height: 46px;
  padding: 0 42px 0 42px;
  border: 1px solid #dbe1ea;
  border-radius: 16px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  outline: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#allForecastDaysPopup .history-archive-search-input:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.18);
}

#allForecastDaysPopup .history-archive-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#allForecastDaysPopup .history-archive-search-clear:hover {
  color: #475569;
}

#allForecastDaysPopup .history-archive-search-meta {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

#allForecastDaysPopup .history-archive-search-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#allForecastDaysPopup .history-archive-search-pill {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #dbe1ea;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#allForecastDaysPopup .history-archive-search-pill:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #111827;
}

#allForecastDaysPopup .history-archive-search-pill.is-active {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

#allForecastDaysPopup .history-archive-group-list.is-empty {
  min-height: 100%;
}

#allForecastDaysPopup .history-archive-group {
  border: 1px solid #dbe1ea;
  border-radius: 28px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

#allForecastDaysPopup .history-archive-group.is-open {
  border-color: #bfdbfe;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

#allForecastDaysPopup .history-archive-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
}

#allForecastDaysPopup .history-archive-group-copy {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
}

#allForecastDaysPopup .history-archive-group-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .history-archive-group-symbol {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}

#allForecastDaysPopup .history-archive-group-date {
  font-size: 18px;
  font-weight: 600;
  color: #9ca3af;
}

#allForecastDaysPopup .history-archive-group-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

#allForecastDaysPopup .history-archive-group-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#allForecastDaysPopup .history-archive-group-pill {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#allForecastDaysPopup .history-archive-group-pill.is-warn {
  background: #fffbeb;
  color: #b45309;
}

#allForecastDaysPopup .history-archive-group-pill.is-live {
  background: #eff6ff;
  color: #1d4ed8;
}

#allForecastDaysPopup .history-archive-group-toggle {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f8fafc;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#allForecastDaysPopup .history-archive-group-toggle:hover {
  background: #e5e7eb;
  color: #111827;
}

#allForecastDaysPopup .history-archive-group-body-shell {
  display: none;
}

#allForecastDaysPopup .history-archive-group-body-shell.is-open {
  display: block;
}

#allForecastDaysPopup .history-archive-group-body {
  border-top: 1px solid #e5e7eb;
  background: rgba(248, 250, 252, 0.8);
  padding: 24px;
  display: grid;
  gap: 20px;
}

#allForecastDaysPopup .history-archive-group-meta {
  max-width: 760px;
  display: grid;
  gap: 12px;
}

#allForecastDaysPopup .history-archive-group-meta-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#allForecastDaysPopup .history-archive-group-meta-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#allForecastDaysPopup .history-archive-group-meta-badge {
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid #dbe1ea;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#allForecastDaysPopup .history-archive-group-meta-status {
  display: grid;
  gap: 4px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

#allForecastDaysPopup .history-archive-group-meta-status strong {
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#allForecastDaysPopup .history-archive-group-meta-copy {
  display: grid;
  gap: 6px;
}

#allForecastDaysPopup .history-archive-group-meta-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

#allForecastDaysPopup .history-archive-group-meta-copy p.is-strong {
  color: #111827;
  font-weight: 700;
}

#allForecastDaysPopup .history-archive-day-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

#allForecastDaysPopup .history-archive-day-card {
  min-width: 264px;
  flex: 0 0 264px;
  border: 1px solid #dbe1ea;
  border-radius: 24px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

#allForecastDaysPopup .history-archive-day-card-head {
  padding: 16px 18px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#allForecastDaysPopup .history-archive-day-card-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111827;
}

#allForecastDaysPopup .history-archive-day-card-title span {
  color: #cbd5e1;
}

#allForecastDaysPopup .history-archive-day-card-session {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#allForecastDaysPopup .history-archive-day-card-body {
  padding: 18px;
  display: grid;
  gap: 16px;
}

#allForecastDaysPopup .history-archive-day-card-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

#allForecastDaysPopup .history-archive-day-card-price strong {
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

#allForecastDaysPopup .history-archive-day-card-price span {
  font-size: 13px;
  font-weight: 800;
}

#allForecastDaysPopup .history-archive-day-card-stats {
  display: grid;
  gap: 10px;
}

#allForecastDaysPopup .history-archive-day-card-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

#allForecastDaysPopup .history-archive-day-card-stats span {
  color: #6b7280;
  font-weight: 600;
}

#allForecastDaysPopup .history-archive-day-card-stats strong {
  color: #111827;
  font-weight: 700;
  text-align: right;
}

#allForecastDaysPopup .history-archive-day-card-actions {
  padding: 14px 18px 18px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
  display: flex;
  gap: 10px;
}

#allForecastDaysPopup .history-archive-day-btn {
  flex: 1 1 0;
  min-height: 38px;
  border-radius: 14px;
  border: 1px solid #dbe1ea;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

#allForecastDaysPopup .history-archive-day-btn.is-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

#allForecastDaysPopup .history-archive-day-btn.is-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

#allForecastDaysPopup .history-archive-day-btn.is-muted:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #111827;
}

@media (max-width: 1280px) {
  #page-history .history-workspace-grid {
    grid-template-columns: 1fr;
  }

  #page-history .history-workspace-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #page-history .history-workspace-queue-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #page-history .history-workspace-shell {
    padding: 0 4px 24px;
  }

  #page-history .history-workspace-title-line h3 {
    font-size: 26px;
  }

  #page-history .history-workspace-stats,
  #page-history .history-queue-card-metrics {
    grid-template-columns: 1fr;
  }

  #page-history .history-queue-card,
  #page-history .history-workspace-filter-card {
    padding: 18px;
    border-radius: 24px;
  }

  #page-history .history-queue-card-head,
  #page-history .history-queue-card-main,
  #allForecastDaysPopup .history-archive-group-head,
  #allForecastDaysPopup .history-archive-group-meta-head {
    flex-direction: column;
    align-items: flex-start;
  }

  #page-history .history-queue-card-price {
    text-align: left;
  }

  #page-history .history-queue-card-actions,
  #page-history .history-workspace-toolbar {
    width: 100%;
  }

  #page-history .history-queue-icon-btn {
    flex: 0 0 48px;
  }

  #allForecastDaysPopup .history-archive-modal {
    border-radius: 28px;
    height: min(92vh, 920px);
  }

  #allForecastDaysPopup .history-archive-modal-head,
  #allForecastDaysPopup .history-archive-modal-body,
  #allForecastDaysPopup .history-archive-group-body {
    padding: 18px;
  }

  #allForecastDaysPopup .history-archive-search-row {
    align-items: stretch;
  }

  #allForecastDaysPopup .history-archive-search-meta {
    width: 100%;
  }

  #allForecastDaysPopup .history-archive-group-controls {
    width: 100%;
    justify-content: space-between;
  }

  #allForecastDaysPopup .history-archive-day-card {
    min-width: 236px;
    flex-basis: 236px;
  }
}

html[data-theme='dark'] #page-history .history-workspace-title-icon,
html[data-theme='dark'] #page-history .history-workspace-banner-icon,
html[data-theme='dark'] #page-history .history-workspace-stat,
html[data-theme='dark'] #page-history .history-workspace-filter-card,
html[data-theme='dark'] #page-history .history-queue-card,
html[data-theme='dark'] #page-history .history-queue-card-metrics,
html[data-theme='dark'] #page-history .history-workspace-empty-icon,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-modal,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-group,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-day-card {
  background: #0f172a;
  border-color: #1f2937;
}

html[data-theme='dark'] #page-history .history-workspace-title-line h3,
html[data-theme='dark'] #page-history .history-workspace-stat strong,
html[data-theme='dark'] #page-history .history-queue-card-title-row h5,
html[data-theme='dark'] #page-history .history-queue-card-price strong,
html[data-theme='dark'] #page-history .history-queue-card-metrics strong,
html[data-theme='dark'] #page-history .history-workspace-empty-copy h5,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-modal-title,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-group-symbol,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-day-card-title,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-day-card-stats strong {
  color: #f8fafc;
}

html[data-theme='dark'] #page-history .history-workspace-title-copy p,
html[data-theme='dark'] #page-history .prediction-workspace-banner-text,
html[data-theme='dark'] #page-history .history-workspace-stat p,
html[data-theme='dark'] #page-history .history-queue-card-copy p,
html[data-theme='dark'] #page-history .history-workspace-empty-copy p,
html[data-theme='dark'] #allForecastDaysPopup .history-workspace-empty-copy p,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-modal-subtitle,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-group-range,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-group-meta-copy p,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-day-card-stats span {
  color: #94a3b8;
}

html[data-theme='dark'] #page-history .history-workspace-banner,
html[data-theme='dark'] #page-history .history-workspace-loading-card,
html[data-theme='dark'] #page-history .history-workspace-empty,
html[data-theme='dark'] #allForecastDaysPopup .history-workspace-empty,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-modal-body,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-group-body,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-day-card-actions {
  background: #111827;
  border-color: #1f2937;
}

html[data-theme='dark'] #page-history .history-workspace-btn,
html[data-theme='dark'] #page-history .history-workspace-pill,
html[data-theme='dark'] #page-history .history-queue-icon-btn,
html[data-theme='dark'] #allForecastDaysPopup .history-workspace-btn,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-search-pill,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-modal-close,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-day-btn,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-group-toggle,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-group-meta-badge,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-day-card-session {
  background: #111827;
  border-color: #374151;
  color: #cbd5e1;
}

html[data-theme='dark'] #page-history .history-workspace-search-input {
  background: #111827;
  border-color: #374151;
  color: #f8fafc;
}

html[data-theme='dark'] #allForecastDaysPopup .history-archive-search-input {
  background: #0f172a;
  border-color: #374151;
  color: #f8fafc;
}

html[data-theme='dark'] #page-history .history-workspace-btn.is-archive,
html[data-theme='dark'] #page-history .history-workspace-btn.is-primary,
html[data-theme='dark'] #page-history .history-workspace-pill.is-active,
html[data-theme='dark'] #allForecastDaysPopup .history-workspace-btn.is-primary,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-search-pill.is-active,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-day-btn.is-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-review {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fbbf24;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-live {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(96, 165, 250, 0.28);
  color: #93c5fd;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-upcoming {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-reviewed {
  background: rgba(5, 150, 105, 0.14);
  border-color: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-all {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.22);
  color: #f8fafc;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-review.is-active {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #ffffff;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-live.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-upcoming.is-active {
  background: #64748b;
  border-color: #64748b;
  color: #ffffff;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-reviewed.is-active {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
}

html[data-theme='dark'] #page-history .history-workspace-pill.tone-all.is-active {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

/* ===== Dashboard Premium Density Pass ===== */
#page-dashboard {
  --dash-section-gap: 16px;
  --dash-section-gap-tight: 12px;
  --dash-surface-radius: 16px;
  --dash-inner-radius: 14px;
  --dash-surface-pad: 14px;
  --dash-header-pad: 14px 16px;
  --dash-kpi-height: 208px;
  --dash-kpi-pad: 20px;
  --dash-day-card-height: 176px;
  --dash-ui-border: rgba(148, 163, 184, 0.18);
  --dash-ui-surface: #ffffff;
  --dash-ui-soft: #f8fafc;
  --dash-ui-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px -24px rgba(15, 23, 42, 0.18);
  --dash-ui-text: #0f172a;
  --dash-ui-muted: #64748b;
  --dash-ui-subtle: #94a3b8;
}

#page-dashboard .topic-terminal-header.topic-terminal-header--dashboard {
  gap: 20px;
  margin-bottom: var(--dash-section-gap);
  padding: 18px !important;
  border-radius: 22px;
}

#page-dashboard .topic-terminal-header--dashboard .topic-terminal-header-pill-row {
  gap: 8px;
}

#page-dashboard .topic-terminal-header--dashboard .topic-terminal-header-pill {
  min-height: 34px;
  padding: 0 12px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

#page-dashboard .ticker-wrapper {
  border-radius: var(--dash-surface-radius);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
    0 8px 18px color-mix(in srgb, var(--bg-deep) 8%, transparent);
  padding: 6px 0;
  margin-bottom: var(--dash-section-gap);
}

#page-dashboard .ticker-wrapper::before,
#page-dashboard .ticker-wrapper::after {
  width: 20px;
}

#page-dashboard .ticker-content {
  --ticker-gap: 8px;
}

#page-dashboard .ticker-item {
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
    0 3px 8px color-mix(in srgb, var(--ticker-item-tone) 5%, transparent);
}

#page-dashboard .ticker-item .sym {
  font-size: 8px;
  letter-spacing: 0.11em;
}

#page-dashboard .ticker-item .ticker-value {
  font-size: 10px;
}

#page-dashboard .dashboard-main-pair,
#page-dashboard .dashboard-hero-metrics {
  gap: var(--dash-section-gap) !important;
}

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card {
  min-height: var(--dash-kpi-height) !important;
  height: var(--dash-kpi-height);
  border-radius: calc(var(--dash-surface-radius) + 2px) !important;
  padding: var(--dash-kpi-pad) !important;
  border: 1px solid color-mix(in srgb, var(--kpi-tone) 16%, var(--border-bright) 84%) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, #0f172a 8%, transparent) !important;
}

#page-dashboard .dashboard-hero-metrics .dashboard-stat-card:hover {
  box-shadow: 0 6px 16px color-mix(in srgb, #0f172a 8%, transparent) !important;
}

#page-dashboard .dashboard-widget-glow {
  height: 120px;
  opacity: 0.16;
}

#page-dashboard .dashboard-widget-main {
  margin-top: 4px;
}

#page-dashboard .dashboard-widget-main .stat-value,
#page-dashboard .dashboard-widget-main-signal .stat-value {
  font-size: clamp(34px, 2.8vw, 40px) !important;
}

#page-dashboard .dashboard-widget-main-signal {
  gap: 12px;
}

#page-dashboard .dashboard-tensor-grid {
  gap: 5px;
  padding: 7px;
  border-radius: 10px;
}

#page-dashboard .dashboard-stat-tag {
  min-height: 22px;
  padding: 0 8px;
}

#page-dashboard .dashboard-widget-footer {
  border-radius: var(--dash-inner-radius);
  box-shadow: 0 1px 1px color-mix(in srgb, #0f172a 5%, transparent);
}

#page-dashboard .dashboard-widget-footer.stat-sub,
#page-dashboard #dashPriceChange,
#page-dashboard .dashboard-widget-footer-vix {
  min-height: 40px;
  padding: 8px 14px;
}

#page-dashboard .dashboard-widget-footer-signal {
  padding: 9px 10px;
  gap: 6px;
}

#page-dashboard .dashboard-signal-row,
#page-dashboard .dashboard-widget-footer-vix span,
#page-dashboard .dashboard-widget-footer-vix strong {
  font-size: 10px;
}

#page-dashboard .dashboard-vix-topline {
  margin-bottom: 10px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell {
  padding-top: 0 !important;
}

#page-dashboard .dashboard-panel-card,
#page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(.dashboard-options-rec-card.options-react-shell, .signal-modern__hero, .signal-modern__metric),
#page-dashboard :is(#signalScenarioContent > .card, #signalInsightPanel .stat-card, #signalInsightPanel .card),
#page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajgraph-card, .trajneo-headline-side, .trajneo-flow-card, .trajectory-point-detail.trajneo-detail-card, .trajneo-day-btn),
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell :is(#dashForecastGrid, #dashForecastGrid .dash-day-widget, #dashForecastDetail),
#page-dashboard .dashboard-options-rec-card.options-react-shell :is(#dashOptionsRec, #dashConfidencePressure .trajneo-flow-card, .por-metric-box, .por-ai-block, .por-option-snapshot, .por-option-item) {
  border-radius: var(--dash-surface-radius) !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card {
  border-radius: var(--dash-surface-radius) !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card .week-ahead-header,
#page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell .week-ahead-header {
  padding: var(--dash-header-pad) !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(.signal-modern__stats, .signal-modern__metrics),
#page-dashboard #signalScenarioContent,
#page-dashboard .dashboard-options-rec-card.options-react-shell :is(.por-grid, .por-shell) {
  gap: var(--dash-section-gap-tight) !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell :is(.signal-modern__hero, .signal-modern__metric),
#page-dashboard :is(#signalScenarioContent > .card, #signalInsightPanel .stat-card, #signalInsightPanel .card),
#page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajgraph-card, .trajneo-headline-side, .trajneo-flow-card, .trajectory-point-detail.trajneo-detail-card),
#page-dashboard .dashboard-options-rec-card.options-react-shell :is(#dashOptionsRec, #dashConfidencePressure .trajneo-flow-card, .por-ai-block, .por-option-snapshot) {
  padding: var(--dash-surface-pad) !important;
}

#page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-modern__stat {
  border-radius: var(--dash-inner-radius) !important;
  padding: 10px !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .week-ahead-header,
#page-dashboard .dashboard-options-rec-card.options-react-shell:has(#dashOptionsRec) .week-ahead-header {
  padding: var(--dash-header-pad) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid {
  padding: 12px !important;
  margin: 0 0 var(--dash-section-gap-tight) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
  min-height: var(--dash-day-card-height) !important;
  padding: 12px 11px 14px !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-selected-ring,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-selected-ring {
  border-radius: var(--dash-surface-radius) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
  margin-top: var(--dash-section-gap-tight) !important;
  padding: calc(var(--dash-surface-pad) + 2px) !important;
  border-radius: var(--dash-surface-radius) !important;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-shell {
  gap: 14px;
}

#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-day-snapshot-head,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-detail-grid,
#page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-reason-list {
  gap: var(--dash-section-gap-tight) !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-metric-box {
  min-height: 76px !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell .por-option-item {
  min-height: 68px !important;
  border-radius: var(--dash-inner-radius) !important;
}

#page-dashboard .dashboard-options-rec-card.options-react-shell #dashConfidencePressure .trajneo-flow-row {
  border-radius: var(--dash-inner-radius) !important;
  padding: 12px 14px !important;
  gap: 12px !important;
}

html[data-theme='dark'] #page-dashboard {
  --dash-ui-border: color-mix(in srgb, var(--border-bright) 62%, transparent);
  --dash-ui-surface: color-mix(in srgb, var(--bg-card) 96%, transparent);
  --dash-ui-soft: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  --dash-ui-shadow: none;
}

html[data-theme='dark'] #page-dashboard .dashboard-hero-metrics .dashboard-stat-card {
  box-shadow: 0 1px 2px color-mix(in srgb, #020617 34%, transparent) !important;
}

@media (max-width: 1200px) {
  #page-dashboard .dashboard-hero-metrics .dashboard-stat-card {
    min-height: var(--dash-kpi-height) !important;
  }
}

@media (max-width: 980px) {
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn,
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
    min-height: 168px !important;
  }
}

@media (max-width: 760px) {
  #page-dashboard .topic-terminal-header.topic-terminal-header--dashboard {
    padding: 16px !important;
    border-radius: 20px;
  }

  #page-dashboard :is(.dashboard-week-summary-card.week-ahead-react-shell, .dashboard-options-rec-card.options-react-shell) .week-ahead-header,
  #page-dashboard #signalMeterContainer.signal-meter-modern-shell .dashboard-options-rec-card.options-react-shell .week-ahead-header,
  #page-dashboard #signalMeterContainer.signal-meter-modern-shell .signal-focus-header-card .week-ahead-header {
    padding: 14px 16px 10px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajneo-day-btn,
  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell #dashForecastGrid .dash-day-widget {
    min-height: 156px !important;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-forecast-detail {
    padding: calc(var(--dash-surface-pad) + 2px) !important;
  }
}

/* ===== Dashboard Trajectory Flow Refresh ===== */
#page-dashboard .dashboard-trajectory-card #miniChartArea {
  --traj-flow-border: color-mix(in srgb, var(--dash-ui-border, rgba(148, 163, 184, 0.24)) 92%, transparent);
  --traj-flow-surface:
    radial-gradient(140% 150% at 0% 0%, rgba(16, 185, 129, 0.09), transparent 54%),
    radial-gradient(110% 120% at 100% 0%, rgba(245, 158, 11, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
  --traj-flow-stage:
    radial-gradient(150% 135% at 12% 18%, rgba(16, 185, 129, 0.1), transparent 44%),
    radial-gradient(140% 120% at 88% 12%, rgba(245, 158, 11, 0.1), transparent 46%),
    linear-gradient(180deg, #f9fbfe 0%, #edf6fe 100%);
  --traj-flow-pill: rgba(15, 23, 42, 0.88);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell * {
  font-family: var(--font-sans) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-card {
  max-width: min(100%, 1380px);
  margin: 0 auto;
  padding: 18px 18px 22px !important;
  border-radius: 24px !important;
  border-color: var(--traj-flow-border) !important;
  background: var(--traj-flow-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 28px 62px -54px rgba(15, 23, 42, 0.42) !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-animate-in .trajgraph-card {
  animation: trajgraphCardLift 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-header-row {
  margin-bottom: 18px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stats-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px !important;
  width: min(100%, 1160px);
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-divider {
  display: none !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-item {
  min-width: 0;
  min-height: 82px;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid var(--traj-flow-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.88)),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 18px 38px -34px rgba(15, 23, 42, 0.44);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-animate-in .trajgraph-stat-item {
  animation: trajgraphStatRise 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-label {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-value {
  justify-content: center;
  font-size: clamp(18px, 1.8vw, 26px) !important;
  letter-spacing: -0.05em !important;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-inline-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-visual {
  gap: 16px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-plot-area {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-y-axis {
  padding-right: 4px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-y-tick {
  right: 2px;
  font-size: 12px !important;
  letter-spacing: 0.02em;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-svg-stage {
  aspect-ratio: 1000 / 308;
  border-radius: 28px;
  border: 1px solid var(--traj-flow-border);
  background: var(--traj-flow-stage);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -18px 32px -26px rgba(16, 185, 129, 0.14),
    0 24px 54px -44px rgba(15, 23, 42, 0.42);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-line {
  stroke: rgba(203, 213, 225, 0.76);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-vert {
  stroke: rgba(148, 163, 184, 0.22);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-vert.is-now {
  stroke: rgba(16, 185, 129, 0.42);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-base-line {
  stroke: rgba(100, 116, 139, 0.34);
  opacity: 0.9;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-main-line-shadow {
  stroke-width: 12;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-main-line {
  stroke-width: 4.8;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-main-energy {
  opacity: 0.7;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-hit-area {
  fill: rgba(15, 23, 42, 0.001);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-line {
  stroke: color-mix(in srgb, var(--point-tone, #10b981) 72%, rgba(255, 255, 255, 0.42) 28%);
  stroke-dasharray: 6 8;
  opacity: 0.52;
  transition: stroke 220ms ease, opacity 220ms ease;
  animation: trajgraphDashDrift 10s linear infinite;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-cap {
  fill: var(--traj-flow-pill);
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.22));
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-label-bg {
  fill: rgba(15, 23, 42, 0.88);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-axis {
  margin-left: 88px;
  min-height: 52px;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label {
  position: absolute;
  z-index: 2;
  min-width: 64px;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--day-tone, #94a3b8) 18%, transparent);
  border-radius: 14px;
  white-space: nowrap;
  text-align: center;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: color-mix(in srgb, var(--day-tone, #94a3b8) 74%, #64748b 26%);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  pointer-events: none;
  user-select: none;
  transition:
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.24s ease,
    color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label:hover {
  color: color-mix(in srgb, var(--day-tone, #94a3b8) 74%, #64748b 26%);
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--day-tone, #10b981) 44%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--day-tone, #10b981) 22%, #0f172a 78%),
      color-mix(in srgb, var(--day-tone, #10b981) 14%, #111827 86%)
    );
  box-shadow: 0 16px 28px -22px color-mix(in srgb, var(--day-tone, #10b981) 44%, rgba(15, 23, 42, 0.82) 56%);
  transform: translateX(-50%) translateY(-2px);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-edge-start {
  transform: translateY(0);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-edge-end {
  transform: translateX(-100%);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-edge-start:hover {
  transform: translateY(-2px);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-edge-end:hover {
  transform: translateX(-100%) translateY(-2px);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-edge-start.is-active {
  transform: translateY(-3px);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-edge-end.is-active {
  transform: translateX(-100%) translateY(-3px);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-selection-settling .trajgraph-point.is-active .trajgraph-dot {
  animation: trajgraphPointSettle 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-selection-settling .trajgraph-point.is-active .trajgraph-sonar {
  animation: trajgraphSelectPulse 0.56s cubic-bezier(0.16, 1, 0.3, 1), trajgraphPulseSonar 2.6s ease-out infinite 0.56s;
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-selection-settling .trajgraph-focus-spot {
  animation: trajgraphFocusSettle 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-selection-settling .trajgraph-focus-dot {
  animation: trajgraphFocusDotSettle 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-selection-settling .trajgraph-focus-label-bg,
#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-selection-settling .trajgraph-focus-label-text {
  animation: trajgraphLabelSettle 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-shell.is-selection-settling .trajgraph-x-label.is-active {
  animation: trajgraphAxisSettle 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes trajgraphCardLift {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes trajgraphPointSettle {
  0% {
    transform: scale(0.96);
  }
  55% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1.08);
  }
}

@keyframes trajgraphSelectPulse {
  0% {
    opacity: 0;
    stroke-width: 0;
  }
  35% {
    opacity: 0.4;
    stroke-width: 2.1;
  }
  100% {
    opacity: 0;
    stroke-width: 1.8;
  }
}

@keyframes trajgraphFocusSettle {
  0% {
    opacity: 0.44;
    transform: scale(0.96);
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes trajgraphFocusDotSettle {
  0% {
    opacity: 0.72;
    transform: scale(0.94);
  }
  60% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes trajgraphLabelSettle {
  0% {
    opacity: 0.3;
    transform: translateX(-1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes trajgraphAxisSettle {
  0% {
    filter: saturate(0.98);
  }
  55% {
    filter: saturate(1.02);
  }
  100% {
    filter: saturate(1);
  }
}

@keyframes trajgraphStatRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea {
  --traj-flow-border: color-mix(in srgb, var(--dash-ui-border, rgba(148, 163, 184, 0.22)) 100%, transparent);
  --traj-flow-surface:
    radial-gradient(140% 150% at 0% 0%, rgba(16, 185, 129, 0.14), transparent 54%),
    radial-gradient(110% 120% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(12, 18, 29, 0.98), rgba(7, 14, 24, 0.98));
  --traj-flow-stage:
    radial-gradient(150% 135% at 12% 18%, rgba(16, 185, 129, 0.16), transparent 44%),
    radial-gradient(140% 120% at 88% 12%, rgba(245, 158, 11, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(13, 20, 33, 0.98) 0%, rgba(7, 12, 21, 1) 100%);
  --traj-flow-pill: rgba(226, 232, 240, 0.16);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 30px 62px -52px rgba(2, 6, 23, 0.92) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-item {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(10, 18, 30, 0.94)),
    rgba(15, 23, 42, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 30px -30px rgba(2, 6, 23, 0.9);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-inline-icon {
  background: rgba(148, 163, 184, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea :is(.trajgraph-stat-label, .trajgraph-y-tick) {
  color: var(--dash-ui-subtle, #94a3b8) !important;
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label {
  color: color-mix(in srgb, var(--day-tone, #f8fafc) 76%, var(--dash-ui-subtle, #94a3b8) 24%) !important;
  background: rgba(15, 23, 42, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-svg-stage {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -20px 34px -28px rgba(16, 185, 129, 0.12),
    0 24px 50px -42px rgba(2, 6, 23, 0.94);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-line {
  stroke: color-mix(in srgb, var(--border-bright) 28%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-grid-vert {
  stroke: color-mix(in srgb, var(--border-bright) 20%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-base-line {
  stroke: color-mix(in srgb, var(--text-primary) 20%, transparent);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-focus-cap {
  fill: rgba(148, 163, 184, 0.14);
  stroke: rgba(255, 255, 255, 0.08);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label:hover {
  color: color-mix(in srgb, var(--day-tone, #f8fafc) 76%, var(--dash-ui-subtle, #94a3b8) 24%) !important;
  background: rgba(15, 23, 42, 0.36);
}

html[data-theme='dark'] #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label.is-active {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--day-tone, #10b981) 30%, rgba(15, 23, 42, 0.92) 70%),
      color-mix(in srgb, var(--day-tone, #10b981) 20%, rgba(15, 23, 42, 0.98) 80%)
    );
  color: #f8fafc !important;
}

@media (max-width: 980px) {
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-plot-area {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-axis {
    margin-left: 74px;
  }
}

@media (max-width: 700px) {
  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-card {
    padding: 16px 14px 18px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stats-bar {
    grid-template-columns: 1fr;
    gap: 10px !important;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-stat-item {
    min-height: 74px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-plot-area {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-svg-stage {
    border-radius: 24px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-axis {
    margin-left: 60px;
    min-height: 48px;
  }

  #page-dashboard .dashboard-trajectory-card #miniChartArea .trajgraph-x-label {
    min-width: 52px;
    padding: 7px 8px !important;
    font-size: 10px !important;
  }
}

/* ===== Forecast Premium Density Pass ===== */
#page-forecast {
  --forecast-section-gap: 16px;
  --forecast-section-gap-tight: 12px;
  --forecast-surface-radius: 16px;
  --forecast-inner-radius: 14px;
  --forecast-surface-pad: 14px;
  --forecast-header-pad: 14px 16px;
  --forecast-day-card-height: 176px;
  --forecast-detail-pad: 16px;
  --forecast-report-pad: 16px;
  --forecast-ui-border: rgba(148, 163, 184, 0.18);
  --forecast-ui-surface: #ffffff;
  --forecast-ui-soft: #f8fafc;
  --forecast-ui-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px -24px rgba(15, 23, 42, 0.18);
  --forecast-ui-text: #0f172a;
  --forecast-ui-muted: #64748b;
  --forecast-ui-subtle: #94a3b8;
}

#page-forecast .topic-terminal-header.topic-terminal-header--forecast {
  gap: 20px;
  margin-bottom: var(--forecast-section-gap);
  padding: 18px !important;
  border-radius: 22px;
}

#page-forecast .topic-terminal-header--forecast .topic-terminal-header-pill-row {
  gap: 8px;
}

#page-forecast .topic-terminal-header--forecast .topic-terminal-header-pill {
  min-height: 34px;
  padding: 0 12px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

#page-forecast .forecast-grid {
  gap: var(--forecast-section-gap-tight);
}

#page-forecast #fullForecastGrid {
  padding: var(--forecast-surface-pad) !important;
  margin: 0 0 var(--forecast-section-gap) !important;
  border-color: var(--forecast-ui-border) !important;
  border-radius: calc(var(--forecast-surface-radius) + 2px) !important;
  background: var(--forecast-ui-surface) !important;
  box-shadow: var(--forecast-ui-shadow) !important;
  backdrop-filter: none !important;
}

#page-forecast #fullForecastGrid .day-card {
  border-radius: var(--forecast-surface-radius);
  border-color: var(--forecast-ui-border);
  box-shadow: var(--forecast-ui-shadow);
  padding: 14px 12px;
}

#page-forecast #fullForecastGrid .day-card:hover,
#page-forecast #fullForecastGrid .day-card.selected {
  transform: translateY(-1px);
}

#page-forecast #fullForecastGrid .dash-day-widget {
  min-height: var(--forecast-day-card-height) !important;
  border-radius: var(--forecast-surface-radius) !important;
  border-color: var(--forecast-ui-border);
  background: var(--forecast-ui-surface) !important;
  box-shadow: var(--forecast-ui-shadow) !important;
  padding: 14px 12px 14px !important;
  backdrop-filter: none !important;
}

#page-forecast #fullForecastGrid .dash-day-widget:hover,
#page-forecast #fullForecastGrid .dash-day-widget.selected {
  transform: translateY(-1px);
}

#page-forecast #fullForecastGrid .dash-day-widget:hover {
  box-shadow: 0 10px 20px -20px color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 26%, transparent) !important;
}

#page-forecast #fullForecastGrid .dash-day-widget.selected {
  box-shadow: 0 12px 22px -22px color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 30%, transparent) !important;
}

#page-forecast #fullForecastGrid .dash-day-label {
  font-size: 9px;
  letter-spacing: 0.12em;
}

#page-forecast #fullForecastGrid .dash-day-date {
  margin-bottom: 12px;
  font-size: 10px;
}

#page-forecast #fullForecastGrid .dash-day-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 7px;
  font-size: 14px;
}

#page-forecast #fullForecastGrid .dash-day-price {
  font-size: 22px;
}

#page-forecast #fullForecastGrid .dash-day-move {
  font-size: 10px;
  margin-bottom: 10px;
}

#page-forecast #fullForecastGrid .dash-day-prob-mini {
  margin: 4px 0 12px;
}

#page-forecast #fullForecastGrid .dash-day-rec {
  min-height: 22px;
  padding: 0 9px;
  font-size: 8px;
  letter-spacing: 0.06em;
}

#page-forecast #fullForecastGrid .dash-day-selected-ring {
  border-radius: var(--forecast-surface-radius) !important;
}

#page-forecast .forecast-detail {
  margin-top: var(--forecast-section-gap);
  border-radius: var(--forecast-surface-radius);
}

#page-forecast .complete-report-react-shell {
  border-radius: calc(var(--forecast-surface-radius) + 2px) !important;
  border-color: var(--forecast-ui-border) !important;
  background: var(--forecast-ui-surface) !important;
  box-shadow: var(--forecast-ui-shadow) !important;
}

#page-forecast .complete-report-react-shell #fullReportArea {
  padding: var(--forecast-report-pad) !important;
}

#page-forecast :is(.reportv3-shell, .reportv2-shell) {
  gap: var(--forecast-section-gap) !important;
}

#page-forecast :is(.reportv3-params-wrap, .reportv3-day-card, .reportv2-day-card) {
  border-radius: calc(var(--forecast-surface-radius) + 2px);
  border-color: var(--forecast-ui-border);
  box-shadow: var(--forecast-ui-shadow);
}

#page-forecast .reportv3-params-wrap {
  padding: var(--forecast-report-pad);
  gap: 14px;
}

#page-forecast :is(.reportv3-param-card, .reportv2-param-card, .reportv2-day-col, .reportv3-panel) {
  border-radius: var(--forecast-inner-radius);
  border-color: var(--forecast-ui-border);
}

#page-forecast .reportv3-param-card {
  padding: 12px 14px;
  min-height: 80px;
}

#page-forecast .reportv3-day-header,
#page-forecast .reportv3-day-body,
#page-forecast .reportv3-day-footer {
  padding: 16px;
}

#page-forecast .reportv3-day-body {
  gap: var(--forecast-section-gap-tight);
}

#page-forecast .reportv3-panel-header {
  padding: 12px 14px;
}

#page-forecast .reportv3-panel-body {
  padding: 4px 14px;
}

#page-forecast .reportv3-panel-row {
  gap: 12px;
  padding: 10px 0;
}

#page-forecast :is(.reportv3-bias-pill, .reportv3-option-pill) {
  min-height: 28px;
  padding: 0 12px;
  font-size: 10px;
}

#page-forecast .reportv3-result-pill {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 10px;
}

#page-forecast :is(.reportv3-btn-ghost, .reportv3-btn-primary, .reportv2-rate-btn, .reportv2-add-btn) {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
}

#page-forecast .reportv3-prob-inline .tone-neutral,
#page-forecast .reportv2-bullbear .tone-neutral {
  color: #d97706;
}

#page-forecast .reportv2-day-card {
  border-radius: calc(var(--forecast-surface-radius) + 2px);
  padding: 14px 16px;
  gap: 12px;
}

#page-forecast .reportv2-day-col {
  padding: 10px 12px;
}

#page-forecast .reportv2-day-actions {
  gap: 10px;
  padding-top: 10px;
}

html[data-theme='dark'] #page-forecast {
  --forecast-ui-border: color-mix(in srgb, var(--border-bright) 62%, transparent);
  --forecast-ui-surface: color-mix(in srgb, var(--bg-card) 96%, transparent);
  --forecast-ui-soft: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  --forecast-ui-shadow: none;
}

html[data-theme='dark'] #page-forecast #fullForecastGrid {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-card) 95%, transparent),
      color-mix(in srgb, var(--session-ui-accent, var(--cyan)) 6%, var(--bg-surface) 94%)
    ) !important;
}

html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-widget {
  box-shadow: 0 1px 2px color-mix(in srgb, #020617 34%, transparent) !important;
}

html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-widget:hover,
html[data-theme='dark'] #page-forecast #fullForecastGrid .dash-day-widget.selected {
  box-shadow: 0 12px 24px -22px color-mix(in srgb, var(--dash-card-tone, var(--cyan)) 18%, #000000 82%) !important;
}

html[data-theme='dark'] #page-forecast :is(.complete-report-react-shell, .reportv3-params-wrap, .reportv3-param-card, .reportv3-day-card, .reportv3-panel, .reportv3-result-pill, .reportv3-btn-ghost, .reportv2-day-card, .reportv2-param-card, .reportv2-day-col, .reportv2-rate-btn) {
  border-color: var(--forecast-ui-border);
  box-shadow: none;
}

html[data-theme='dark'] #page-forecast :is(.reportv3-params-wrap, .reportv3-param-card, .reportv3-day-card, .reportv3-panel, .reportv3-result-pill, .reportv3-btn-ghost, .reportv2-day-card, .reportv2-param-card, .reportv2-day-col, .reportv2-rate-btn) {
  background: var(--forecast-ui-surface);
}

@media (max-width: 980px) {
  #page-forecast #fullForecastGrid .dash-day-widget {
    min-height: 168px !important;
  }
}

@media (max-width: 820px) {
  #page-forecast .complete-report-react-shell #fullReportArea {
    padding: var(--forecast-report-pad) !important;
  }
}

@media (max-width: 760px) {
  #page-forecast .topic-terminal-header.topic-terminal-header--forecast {
    padding: 16px !important;
    border-radius: 20px;
  }

  #page-forecast #fullForecastGrid .dash-day-widget {
    min-height: 156px !important;
    padding: 12px 10px 13px !important;
  }

  #page-forecast #fullForecastGrid .dash-day-price {
    font-size: 20px;
  }
}

/* ===== Options Premium Density Pass ===== */
#page-options {
  --options-section-gap: 16px;
  --options-section-gap-tight: 12px;
  --options-surface-radius: 16px;
  --options-inner-radius: 14px;
  --options-surface-pad: 14px;
  --options-header-pad: 14px 16px;
  --options-input-height: 46px;
  --options-chip-height: 28px;
  --options-ui-border: rgba(148, 163, 184, 0.18);
  --options-ui-surface: #ffffff;
  --options-ui-soft: #f8fafc;
  --options-ui-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px -24px rgba(15, 23, 42, 0.18);
  --options-ui-text: #0f172a;
  --options-ui-muted: #64748b;
  --options-ui-subtle: #94a3b8;
}

#page-options .topic-terminal-header.topic-terminal-header--options {
  gap: 20px;
  margin-bottom: var(--options-section-gap);
  padding: 18px !important;
  border-radius: 22px;
}

#page-options .topic-terminal-header--options .topic-terminal-header-pill-row {
  gap: 8px;
}

#page-options .topic-terminal-header--options .topic-terminal-header-pill {
  min-height: 34px;
  padding: 0 12px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

#page-options > .grid-2 {
  gap: var(--options-section-gap) !important;
}

#page-options :is(.options-v2-panel, .position-v2-card, .card:has(#optionsExecutionPanel)) {
  border-radius: calc(var(--options-surface-radius) + 2px) !important;
  border: 1px solid var(--options-ui-border) !important;
  background: var(--options-ui-surface) !important;
  box-shadow: var(--options-ui-shadow) !important;
}

#page-options .position-v2-card {
  padding: var(--options-surface-pad) !important;
}

#page-options .card:has(#optionsExecutionPanel) {
  padding: var(--options-surface-pad) !important;
}

#page-options .options-v2-overview-panel,
#page-options .options-v2-risk-panel,
#page-options .options-v2-table-panel {
  overflow: hidden !important;
}

#page-options :is(.options-v2-overview-header, .options-v2-risk-header, .options-v2-table-head, .position-v2-matrix-head) {
  padding: var(--options-header-pad) !important;
}

#page-options .options-v2-overview-title,
#page-options .options-v2-risk-title {
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

#page-options .options-v2-overview-subtitle,
#page-options .options-v2-risk-subtitle {
  font-size: 14px;
  line-height: 1.5;
}

#page-options .options-v2-overview-body,
#page-options .options-v2-risk-body {
  gap: var(--options-section-gap-tight);
  padding: var(--options-surface-pad) !important;
}

#page-options :is(.options-v2-overview-group, .options-v2-risk-metrics, .options-v2-risk-context, .options-v2-table-shell, .position-v2-matrix-shell) {
  border-radius: calc(var(--options-surface-radius) + 2px);
  border-color: var(--options-ui-border);
  background: var(--options-ui-surface);
  box-shadow: var(--options-ui-shadow);
}

#page-options :is(.options-v2-overview-setup-card, .options-v2-risk-context-card, .options-exec-v2-metric, .options-exec-v2-readiness, .options-exec-v3-metric-card, .options-exec-v3-readiness, .options-exec-v3-check-item, .position-v2-summary-card, .position-v2-detail-card) {
  border-radius: var(--options-inner-radius);
  border-color: var(--options-ui-border);
  background: var(--options-ui-surface);
  box-shadow: var(--options-ui-shadow);
}

#page-options :is(.options-v2-overview-row, .options-v2-data-row, .options-v2-risk-metric-row) {
  padding: 12px 14px !important;
}

#page-options :is(.options-v2-box-heading, .options-v2-data-label, .options-v2-overview-row-label, .options-v2-overview-setup-label, .options-v2-risk-context-title, .options-v2-risk-context-label, .position-v2-head-title, .position-v2-input-label, .position-v2-summary-label, .position-v2-detail-label) {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--options-ui-subtle);
}

#page-options .options-v2-overview-group {
  border-radius: var(--options-surface-radius);
}

#page-options .options-v2-overview-row-value,
#page-options .options-v2-data-value {
  font-size: 13px;
}

#page-options .options-v2-overview-chip,
#page-options .options-v2-badge,
#page-options .options-v2-overview-readiness-badge,
#page-options .options-v2-type-pill,
#page-options .position-v2-type-pill,
#page-options .position-v2-detail-pill {
  min-height: var(--options-chip-height);
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
}

#page-options .options-v2-overview-chip {
  align-items: center;
  padding: 0 10px;
}

#page-options .options-v2-overview-info {
  padding: 14px 16px;
  border-radius: var(--options-surface-radius);
}

#page-options .options-v2-overview-info-head {
  margin-bottom: 8px;
}

#page-options .options-v2-overview-info-text {
  font-size: 13px;
}

#page-options .options-v2-overview-setup-grid {
  gap: 10px;
}

#page-options .options-v2-overview-setup-card {
  padding: 12px 14px;
}

#page-options .options-v2-overview-setup-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -16px rgba(15, 23, 42, 0.18);
}

#page-options .options-v2-overview-setup-value {
  font-size: 18px;
}

#page-options .options-v2-overview-setup-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

#page-options .options-v2-overview-readiness {
  margin-top: 0;
  padding-top: 12px;
}

#page-options .options-v2-overview-readiness-head {
  margin-bottom: 10px;
}

#page-options .options-v2-overview-readiness-score {
  font-size: 16px;
}

#page-options .options-v2-overview-readiness-score-unit {
  font-size: 13px;
}

#page-options .options-v2-overview-readiness-track {
  height: 8px;
}

#page-options .options-v2-risk-header {
  padding: var(--options-header-pad) !important;
}

#page-options .options-v2-ratio-kicker {
  margin-bottom: 6px;
  font-size: 10px;
}

#page-options .options-v2-ratio-score {
  margin-bottom: 12px;
  font-size: 36px;
}

#page-options .options-v2-ratio-score-unit {
  font-size: 22px;
}

#page-options .options-v2-ratio-bar {
  height: 12px;
  margin-bottom: 8px;
}

#page-options .options-v2-ratio-labels {
  font-size: 12px;
}

#page-options .options-v2-risk-metric-row .options-v2-data-label {
  font-size: 10px;
}

#page-options .options-v2-risk-label-note {
  font-size: 10px;
}

#page-options .options-v2-risk-metric-row .options-v2-data-value,
#page-options .options-v2-risk-metric-row .options-v2-inline-icon-value {
  font-size: 14px;
}

#page-options .options-v2-risk-metrics .options-v2-badge {
  min-height: var(--options-chip-height);
  font-size: 12px;
}

#page-options .options-v2-risk-context {
  gap: 10px;
  padding: 14px;
}

#page-options .options-v2-risk-context-grid {
  gap: 10px;
}

#page-options .options-v2-risk-context-card {
  padding: 12px 14px;
  border-radius: var(--options-inner-radius);
}

#page-options .options-v2-risk-context-value {
  font-size: 16px;
}

#page-options .options-v2-risk-context-subvalue,
#page-options .options-v2-risk-context-note {
  font-size: 11px;
}

#page-options .options-v2-table-head {
  padding: var(--options-header-pad) !important;
}

#page-options .options-v2-table-scroll {
  padding: 6px 16px 16px;
}

#page-options .options-v2-table th {
  padding: 0 12px 12px;
  font-size: 9px;
}

#page-options .options-v2-table td {
  padding: 12px;
  font-size: 12px;
}

#page-options :is(.options-exec-v2, .options-exec-v3) {
  gap: var(--options-section-gap-tight) !important;
}

#page-options :is(.options-exec-v2-heading-row, .options-exec-v3-heading-row) {
  padding-bottom: 8px;
}

#page-options :is(.options-exec-v2-heading, .options-exec-v3-heading) {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--options-ui-muted);
}

#page-options .options-exec-v2-tabs {
  gap: 8px;
}

#page-options .options-exec-v2-tab {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 10px;
}

#page-options .options-exec-v2-metrics {
  gap: 12px;
}

#page-options .options-exec-v2-metric {
  padding: 10px 12px;
}

#page-options .options-exec-v2-metric-label,
#page-options .options-exec-v2-readiness-label {
  font-size: 8px;
  margin-bottom: 4px;
}

#page-options .options-exec-v2-metric-value {
  font-size: 18px;
  margin-bottom: 4px;
}

#page-options .options-exec-v2-focus-pill {
  min-height: var(--options-chip-height);
  padding: 0 10px;
  font-size: 10px;
}

#page-options .options-exec-v2-metric-sub,
#page-options .options-exec-v2-readiness-text,
#page-options .options-exec-v2-check-text {
  font-size: 11px;
}

#page-options .options-exec-v2-readiness {
  padding: 10px 12px;
}

#page-options .options-exec-v2-checklist {
  border-radius: var(--options-surface-radius);
  border-color: var(--options-ui-border);
  box-shadow: var(--options-ui-shadow);
}

#page-options .options-exec-v2-check-item {
  padding: 10px 12px;
}

#page-options .options-exec-v2-check-state {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 8px;
}

#page-options .options-exec-v2-check-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

#page-options .options-exec-v3-heading-row {
  padding: 2px 0 0;
}

#page-options .options-exec-v3-tabs {
  gap: 8px;
  padding: 6px;
  border-radius: var(--options-surface-radius);
}

#page-options .options-exec-v3-tab {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
}

#page-options .options-exec-v3-tab.active {
  box-shadow: 0 6px 14px -14px rgba(15, 23, 42, 0.18);
}

#page-options .options-exec-v3-metrics {
  gap: 12px;
}

#page-options .options-exec-v3-metric-card {
  padding: 14px 16px;
  min-height: 102px;
  border-radius: var(--options-surface-radius);
}

#page-options .options-exec-v3-metric-label {
  font-size: 9px;
  margin-bottom: 8px;
}

#page-options .options-exec-v3-metric-value {
  font-size: 24px;
  margin-bottom: 6px;
}

#page-options .options-exec-v3-metric-sub {
  font-size: 11px;
}

#page-options .options-exec-v3-metric-sub-icon {
  width: 13px;
  height: 13px;
  flex-basis: 13px;
}

#page-options .options-exec-v3-focus-pill {
  min-height: var(--options-chip-height);
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
}

#page-options .options-exec-v3-focus-strike {
  font-size: 26px;
}

#page-options .options-exec-v3-readiness {
  border-radius: var(--options-surface-radius);
  padding: 12px 14px;
}

#page-options .options-exec-v3-readiness-icon-wrap {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 12px;
}

#page-options .options-exec-v3-readiness-title {
  font-size: 12px;
}

#page-options .options-exec-v3-readiness-note,
#page-options .options-exec-v3-readiness-scorehead {
  font-size: 11px;
}

#page-options .options-exec-v3-checklist {
  gap: 8px;
}

#page-options .options-exec-v3-check-item {
  padding: 10px 12px;
  border-radius: var(--options-inner-radius);
}

#page-options .options-exec-v3-check-state {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
}

#page-options .options-exec-v3-check-text {
  font-size: 12px;
}

#page-options .options-exec-v3-check-icon {
  width: 28px;
  height: 28px;
}

#page-options .position-v2-head {
  padding: 0 2px 10px;
  margin-bottom: 12px;
}

#page-options .position-v2-input-grid {
  gap: 12px;
}

#page-options .position-v2-input-wrap {
  gap: 6px;
}

#page-options .position-v2-input {
  min-height: var(--options-input-height);
  border-radius: var(--options-inner-radius);
  border-color: var(--options-ui-border);
  background: var(--options-ui-surface);
}

#page-options .position-v2-output,
#page-options #positionCalcOutput.position-v2-output {
  margin-top: 12px;
  gap: 12px;
}

#page-options .position-v2-summary-grid {
  gap: 12px;
}

#page-options .position-v2-summary-card {
  padding: 12px 14px;
}

#page-options .position-v2-summary-value {
  font-size: 20px;
}

#page-options .position-v2-summary-sub {
  font-size: 10px;
  line-height: 1.45;
}

#page-options .position-v2-filter-pills {
  gap: 8px;
}

#page-options .position-v2-filter-pill {
  min-height: var(--options-chip-height);
  padding: 0 10px;
  font-size: 10px;
  box-shadow: var(--options-ui-shadow);
}

#page-options .position-v2-matrix-head {
  padding: var(--options-header-pad) !important;
}

#page-options .position-v2-matrix-title {
  font-size: 12px;
}

#page-options .position-v2-matrix-caption {
  font-size: 10px;
}

#page-options .position-v2-table thead th {
  padding: 12px;
  font-size: 9px;
}

#page-options .position-v2-table thead th:first-child {
  padding-left: 18px;
}

#page-options .position-v2-table thead th:last-child {
  padding-right: 18px;
}

#page-options .position-v2-main-row td {
  padding: 14px 12px;
  font-size: 12px;
}

#page-options .position-v2-main-row td:first-child {
  padding-left: 18px;
}

#page-options .position-v2-main-row td:last-child {
  padding-right: 18px;
}

#page-options .position-v2-detail-btn {
  min-height: 32px;
  padding: 0 14px;
  font-size: 10px;
  box-shadow: none;
}

#page-options .position-v2-expand-wrap {
  margin: 12px;
  border-radius: var(--options-surface-radius);
  border-color: var(--options-ui-border);
  padding: 16px;
}

#page-options .position-v2-detail-shell {
  gap: 12px;
}

#page-options .position-v2-detail-card {
  padding: 12px 10px;
  box-shadow: none;
}

#page-options .position-v2-detail-value {
  font-size: 15px;
}

#page-options .position-v2-detail-strategy-line {
  font-size: 11px;
}

#page-options .position-v2-detail-line-label {
  font-size: 9px;
}

#page-options .position-v2-detail-line-value {
  font-size: 13px;
}

#page-options .position-v2-track-btn {
  min-height: 40px;
  padding: 0 22px;
  font-size: 11px;
  box-shadow: 0 8px 18px -18px rgba(56, 189, 248, 0.4);
}

html[data-theme='dark'] #page-options {
  --options-ui-border: color-mix(in srgb, var(--border-bright) 62%, transparent);
  --options-ui-surface: color-mix(in srgb, var(--bg-card) 96%, transparent);
  --options-ui-soft: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  --options-ui-shadow: none;
}

html[data-theme='dark'] #page-options :is(.options-v2-panel, .position-v2-card, .card:has(#optionsExecutionPanel)) {
  background: var(--options-ui-surface) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] #page-options :is(.options-v2-overview-group, .options-v2-risk-metrics, .options-v2-risk-context, .options-v2-table-shell, .position-v2-matrix-shell, .options-v2-overview-setup-card, .options-v2-risk-context-card, .options-exec-v2-metric, .options-exec-v2-readiness, .options-exec-v2-checklist, .options-exec-v3-metric-card, .options-exec-v3-readiness, .options-exec-v3-check-item, .position-v2-summary-card, .position-v2-detail-card, .position-v2-filter-pill, .position-v2-input, .position-v2-detail-btn) {
  border-color: var(--options-ui-border);
  background: var(--options-ui-surface);
  box-shadow: none;
}

html[data-theme='dark'] #page-options .options-exec-v3-tabs {
  background: var(--options-ui-soft);
  border-color: var(--options-ui-border);
}

html[data-theme='dark'] #page-options .options-exec-v3-checklist {
  background: transparent;
}

@media (max-width: 1100px) {
  #page-options .options-exec-v3-tab {
    min-width: 112px;
  }
}

@media (max-width: 900px) {
  #page-options .options-v2-panel {
    padding: 16px !important;
  }

  #page-options .options-v2-overview-panel,
  #page-options .options-v2-risk-panel,
  #page-options .options-v2-table-panel {
    padding: 0 !important;
  }
}

@media (max-width: 760px) {
  #page-options .topic-terminal-header.topic-terminal-header--options {
    padding: 16px !important;
    border-radius: 20px;
  }

  #page-options .options-v2-risk-title,
  #page-options .options-v2-overview-title {
    font-size: 20px;
  }

  #page-options .options-exec-v3-metric-card {
    min-height: auto;
  }
}

/* ===== Simulations Premium Density Pass ===== */
#page-simulations {
  --sim-section-gap: 16px;
  --sim-section-gap-tight: 12px;
  --sim-surface-radius: 16px;
  --sim-inner-radius: 14px;
  --sim-surface-pad: 14px;
  --sim-header-pad: 14px 16px;
  --sim-stat-height: 104px;
  --sim-pill-height: 28px;
  --sim-ui-border: rgba(148, 163, 184, 0.18);
  --sim-ui-surface: #ffffff;
  --sim-ui-soft: #f8fafc;
  --sim-ui-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px -24px rgba(15, 23, 42, 0.18);
  --sim-ui-text: #0f172a;
  --sim-ui-muted: #64748b;
  --sim-ui-subtle: #94a3b8;
}

#page-simulations .topic-terminal-header.topic-terminal-header--simulations {
  gap: 20px;
  margin-bottom: var(--sim-section-gap);
  padding: 18px !important;
  border-radius: 22px;
}

#page-simulations .topic-terminal-header--simulations .topic-terminal-header-pill-row {
  gap: 8px;
}

#page-simulations .topic-terminal-header--simulations .topic-terminal-header-pill {
  min-height: 34px;
  padding: 0 12px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

#page-simulations .simv2-shell {
  gap: var(--sim-section-gap-tight);
}

#page-simulations .simv2-top-grid,
#page-simulations .simv2-bottom-grid,
#page-simulations .simv3p-stats-row,
#page-simulations .simv3p-focus-grid {
  gap: var(--sim-section-gap-tight);
}

#page-simulations :is(.simv2-prob-card, .simv2-card, .simv2-dist-card, .simv2-situation-card, .simv3p-stat-card, .simv3p-chart-card, .simv3p-focus-shell, .simv3p-panel, .simv3p-day-pill, .simv3p-cone-pill, .simv3p-tooltip) {
  border-radius: var(--sim-surface-radius);
  border-color: var(--sim-ui-border);
  background: var(--sim-ui-surface);
  box-shadow: var(--sim-ui-shadow);
}

#page-simulations .simv2-prob-card {
  min-height: var(--sim-stat-height);
  padding: 14px;
}

#page-simulations .simv2-prob-label {
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--sim-ui-subtle);
}

#page-simulations .simv2-prob-value {
  font-size: 28px;
  letter-spacing: -0.03em;
}

#page-simulations .simv2-prob-sub {
  margin-top: 4px;
  font-size: 11px;
}

#page-simulations .simv2-card {
  border-radius: calc(var(--sim-surface-radius) + 2px);
  padding: var(--sim-surface-pad);
}

#page-simulations .simv2-dist-card,
#page-simulations .simv2-situation-card {
  border-radius: calc(var(--sim-surface-radius) + 2px);
  padding: 18px 16px;
}

#page-simulations .simv2-card-title,
#page-simulations .simv2-dist-card-title,
#page-simulations .simv2-situation-card-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--sim-ui-muted);
}

#page-simulations .simv2-dist-card-title,
#page-simulations .simv2-situation-card-title {
  margin-bottom: 16px;
}

#page-simulations :is(#simLiveLearningPanel, #scenarioDistPanel, #situationPanel, #multiScenarioPanel) {
  margin-top: 8px;
}

#page-simulations .simv2-dist-card #scenarioDistPanel,
#page-simulations .simv2-situation-card #situationPanel {
  margin-top: 0;
}

#page-simulations .simv2-learning-list {
  gap: 8px;
}

#page-simulations .simv2-learning-row,
#page-simulations .simv2-dist-row {
  gap: 10px;
}

#page-simulations .simv2-learning-label,
#page-simulations .simv2-dist-label {
  font-size: 9px;
}

#page-simulations .simv2-learning-track {
  height: 8px;
}

#page-simulations .simv2-learning-pct {
  font-size: 9px;
}

#page-simulations .simv2-dist-bars {
  gap: 12px;
}

#page-simulations .simv2-dist-track {
  height: 12px;
}

#page-simulations .simv2-dist-fill.bull,
#page-simulations .simv2-dist-fill.flat,
#page-simulations .simv2-dist-fill.bear {
  box-shadow: none;
}

#page-simulations .simv2-dist-pct {
  font-size: 13px;
}

#page-simulations .simv2-dist-divider {
  margin: 14px 0 12px;
}

#page-simulations .simv2-dist-metrics-grid {
  gap: 8px;
}

#page-simulations .simv2-dist-metric-card {
  border-radius: var(--sim-inner-radius);
  padding: 10px 12px;
}

#page-simulations .simv2-dist-metric-card span {
  font-size: 9px;
}

#page-simulations .simv2-dist-metric-card strong {
  font-size: 15px;
}

#page-simulations .simv2-dist-badge {
  min-height: var(--sim-pill-height);
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
}

#page-simulations .simv2-situation-list {
  gap: 10px;
}

#page-simulations .simv2-situation-row {
  gap: 12px;
  border-radius: var(--sim-surface-radius);
  min-height: 84px;
  padding: 14px 16px;
}

#page-simulations .simv2-situation-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 16px -16px rgba(15, 23, 42, 0.24);
}

#page-simulations .simv2-situation-title {
  font-size: 15px;
}

#page-simulations .simv2-situation-desc {
  font-size: 13px;
  line-height: 1.45;
}

#page-simulations .simv3p-shell {
  gap: var(--sim-section-gap-tight);
}

#page-simulations .simv3p-stat-card {
  min-height: 92px;
  border-radius: var(--sim-surface-radius);
  padding: 14px;
}

#page-simulations .simv3p-stat-label {
  font-size: 9px;
}

#page-simulations .simv3p-stat-value {
  font-size: 24px;
  letter-spacing: -0.04em;
}

#page-simulations .simv3p-stat-icon {
  width: 16px;
  height: 16px;
}

#page-simulations .simv3p-chart-card,
#page-simulations .simv3p-focus-shell {
  border-radius: calc(var(--sim-surface-radius) + 2px);
}

#page-simulations .simv3p-chart-topbar,
#page-simulations .simv3p-info-bar,
#page-simulations .simv3p-focus-header {
  padding: var(--sim-header-pad);
}

#page-simulations .simv3p-legend {
  gap: 8px 12px;
}

#page-simulations .simv3p-legend span,
#page-simulations .simv3p-cone-pill,
#page-simulations .simv3p-tooltip-label {
  font-size: 9px;
}

#page-simulations .simv3p-cone-pill {
  min-height: var(--sim-pill-height);
  padding: 0 10px;
}

#page-simulations .simv3p-chart-wrapper {
  height: 320px;
}

#page-simulations .simv3p-info-bar {
  font-size: 10px;
  gap: 10px;
}

#page-simulations .simv3p-info-pill {
  font-size: 10px;
}

#page-simulations .simv3p-day-pills {
  gap: 8px;
}

#page-simulations .simv3p-day-pill {
  border-radius: var(--sim-surface-radius);
  padding: 10px;
}

#page-simulations .simv3p-day-pill:hover {
  transform: translateY(-1px);
}

#page-simulations .simv3p-day-pill-label {
  font-size: 10px;
}

#page-simulations .simv3p-day-pill-date {
  font-size: 9px;
}

#page-simulations .simv3p-focus-header {
  gap: 8px;
}

#page-simulations .simv3p-focus-state,
#page-simulations .simv3p-focus-date,
#page-simulations .simv3p-badge {
  min-height: var(--sim-pill-height);
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
}

#page-simulations .simv3p-panel {
  border-radius: var(--sim-surface-radius);
}

#page-simulations .simv3p-panel-header {
  padding: 12px 14px;
  font-size: 10px;
}

#page-simulations .simv3p-panel-body {
  padding: 12px 14px;
}

#page-simulations .simv3p-panel-row,
#page-simulations .simv3p-prob-row {
  padding: 10px 0;
}

#page-simulations .simv3p-panel-label {
  font-size: 10px;
}

#page-simulations .simv3p-panel-row strong,
#page-simulations .simv3p-prob-head strong {
  font-size: 13px;
}

html[data-theme='dark'] #page-simulations {
  --sim-ui-border: color-mix(in srgb, var(--border-bright) 62%, transparent);
  --sim-ui-surface: color-mix(in srgb, var(--bg-card) 96%, transparent);
  --sim-ui-soft: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  --sim-ui-shadow: none;
}

html[data-theme='dark'] #page-simulations :is(.simv2-prob-card, .simv2-card, .simv2-dist-card, .simv2-situation-card, .simv2-dist-metric-card, .simv3p-stat-card, .simv3p-chart-card, .simv3p-day-pill, .simv3p-focus-shell, .simv3p-panel, .simv3p-cone-pill, .simv3p-tooltip) {
  border-color: var(--sim-ui-border);
  box-shadow: none;
}

html[data-theme='dark'] #page-simulations :is(.simv2-prob-card, .simv2-card, .simv2-dist-card, .simv2-situation-card, .simv2-dist-metric-card, .simv3p-stat-card, .simv3p-chart-card, .simv3p-day-pill, .simv3p-focus-shell, .simv3p-panel, .simv3p-cone-pill) {
  background: var(--sim-ui-surface);
}

html[data-theme='dark'] #page-simulations .simv3p-chart-topbar,
html[data-theme='dark'] #page-simulations .simv3p-panel-header,
html[data-theme='dark'] #page-simulations .simv3p-info-bar {
  background: var(--sim-ui-soft);
}

@media (max-width: 1024px) {
  #page-simulations .simv3p-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #page-simulations .topic-terminal-header.topic-terminal-header--simulations {
    padding: 16px !important;
    border-radius: 20px;
  }

  #page-simulations .simv3p-chart-wrapper {
    height: 300px;
  }
}

@media (max-width: 620px) {
  #page-simulations .simv3p-stats-row {
    grid-template-columns: 1fr;
  }

  #page-simulations .simv2-prob-card {
    min-height: 96px;
  }
}

/* ===== History Premium Density Pass ===== */
#page-history {
  --history-section-gap: 16px;
  --history-section-gap-tight: 12px;
  --history-surface-radius: 16px;
  --history-inner-radius: 14px;
  --history-surface-pad: 14px;
  --history-header-pad: 14px 16px;
  --history-chip-height: 28px;
  --history-stat-height: 116px;
  --history-ui-border: rgba(148, 163, 184, 0.18);
  --history-ui-surface: #ffffff;
  --history-ui-soft: #f8fafc;
  --history-ui-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px -24px rgba(15, 23, 42, 0.18);
  --history-ui-text: #0f172a;
  --history-ui-muted: #64748b;
  --history-ui-subtle: #94a3b8;
}

#page-history .topic-terminal-header.topic-terminal-header--history {
  gap: 20px;
  margin-bottom: var(--history-section-gap);
  padding: 18px !important;
  border-radius: 22px;
}

#page-history .topic-terminal-header--history .topic-terminal-header-pill-row {
  gap: 8px;
}

#page-history .topic-terminal-header--history .topic-terminal-header-pill {
  min-height: 34px;
  padding: 0 12px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

#page-history .history-workspace-shell {
  margin-top: var(--history-section-gap);
  padding: 0 6px 24px;
  gap: var(--history-section-gap);
}

#page-history .history-workspace-topbar,
#page-history .history-workspace-grid,
#page-history .history-workspace-queue-grid {
  gap: var(--history-section-gap);
}

#page-history .history-workspace-title-copy {
  gap: 6px;
}

#page-history .history-workspace-title-line h3 {
  font-size: 28px;
}

#page-history .history-workspace-title-count,
#page-history .history-workspace-btn,
#page-history .history-workspace-section-meta,
#page-history .history-workspace-pill,
#page-history .history-queue-chip,
#page-history .history-queue-state,
#page-history .prediction-archive-group-stack .afw-session-pill,
#page-history .prediction-archive-group-stack .afw-ticker-pill,
#page-history .prediction-archive-group-stack .afw-day-probs span,
#page-history .prediction-manual-ledger .tag,
#page-history .prediction-archive-group-stack .tag,
#allForecastDaysPopup .history-workspace-btn,
#allForecastDaysPopup .history-archive-search-pill,
#allForecastDaysPopup .history-archive-group-pill,
#allForecastDaysPopup .history-archive-group-meta-badge,
#allForecastDaysPopup .history-archive-day-card-session,
#allForecastDaysPopup .history-archive-day-btn,
#allForecastDaysPopup .prediction-archive-symbol-pill,
#allForecastDaysPopup .prediction-archive-card-toggle-label,
#allForecastDaysPopup .prediction-archive-card-toggle-state {
  min-height: var(--history-chip-height);
}

#page-history .history-workspace-title-count,
#page-history .history-workspace-section-meta {
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
}

#page-history .history-workspace-title-copy p {
  font-size: 14px;
  line-height: 1.55;
}

#page-history .history-workspace-toolbar {
  gap: 10px;
}

#page-history .history-workspace-btn {
  padding: 0 16px;
  border-radius: var(--history-inner-radius);
  font-size: 12px;
}

#page-history .history-workspace-banner {
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--history-surface-radius);
  border-color: var(--history-ui-border);
  background: var(--history-ui-soft);
  box-shadow: var(--history-ui-shadow);
}

#page-history .history-workspace-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border-color: var(--history-ui-border);
  background: var(--history-ui-surface);
  box-shadow: none;
}

#page-history .prediction-workspace-banner-text {
  font-size: 13px;
}

#page-history .history-workspace-stats {
  gap: var(--history-section-gap-tight);
}

#page-history .history-workspace-stat {
  --history-stat-accent: #2563eb;
  --history-stat-accent-soft: rgba(37, 99, 235, 0.12);
  --history-stat-accent-border: rgba(37, 99, 235, 0.2);
  min-height: var(--history-stat-height);
  border-radius: calc(var(--history-surface-radius) + 2px);
  border-color: color-mix(in srgb, var(--history-stat-accent) 18%, var(--history-ui-border));
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--history-ui-surface);
  box-shadow: var(--history-ui-shadow);
  text-align: center;
}

#page-history .history-workspace-stat::before {
  content: none;
}

#page-history .history-workspace-stat::after {
  content: none;
}

#page-history .history-workspace-stat-head {
  display: grid;
  justify-items: center;
  gap: 16px;
}

#page-history .history-workspace-stat-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--history-stat-accent-border);
  background: var(--history-stat-accent-soft);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: color-mix(in srgb, var(--history-stat-accent) 78%, #0f172a);
}

#page-history .history-workspace-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid var(--history-stat-accent-border);
  background: color-mix(in srgb, var(--history-stat-accent) 5%, #ffffff);
  color: var(--history-stat-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#page-history .history-workspace-stat-icon svg {
  display: block;
}

#page-history .history-workspace-stat-body {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 16ch;
}

#page-history .history-workspace-stat strong {
  font-size: clamp(40px, 3vw, 56px);
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}

#page-history .history-workspace-stat p {
  max-width: 15ch;
  font-size: 12px;
  line-height: 1.55;
  text-wrap: balance;
}

#page-history .history-workspace-stat.tone-review {
  --history-stat-accent: #d97706;
  --history-stat-accent-soft: rgba(245, 158, 11, 0.12);
  --history-stat-accent-border: rgba(245, 158, 11, 0.22);
}

#page-history .history-workspace-stat.tone-live {
  --history-stat-accent: #2563eb;
  --history-stat-accent-soft: rgba(59, 130, 246, 0.12);
  --history-stat-accent-border: rgba(59, 130, 246, 0.22);
}

#page-history .history-workspace-stat.tone-coverage {
  --history-stat-accent: #059669;
  --history-stat-accent-soft: rgba(16, 185, 129, 0.12);
  --history-stat-accent-border: rgba(16, 185, 129, 0.22);
}

#page-history .history-workspace-stat.tone-manual {
  --history-stat-accent: #7c3aed;
  --history-stat-accent-soft: rgba(124, 58, 237, 0.12);
  --history-stat-accent-border: rgba(124, 58, 237, 0.22);
}

html[data-theme='dark'] #page-history .history-workspace-stat {
  background: var(--history-ui-surface);
}

html[data-theme='dark'] #page-history .history-workspace-stat-head span {
  color: color-mix(in srgb, var(--history-stat-accent) 74%, #e2e8f0);
}

html[data-theme='dark'] #page-history .history-workspace-stat-icon {
  background: color-mix(in srgb, var(--history-stat-accent) 10%, rgba(15, 23, 42, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#page-history .history-workspace-filter-card {
  border-radius: calc(var(--history-surface-radius) + 2px);
  border-color: var(--history-ui-border);
  padding: 16px;
  gap: 16px;
  box-shadow: var(--history-ui-shadow);
}

#page-history .history-workspace-search-input {
  min-height: 42px;
  border-radius: var(--history-inner-radius);
  font-size: 13px;
}

#page-history .history-workspace-filter-stack {
  gap: 10px;
}

#page-history .history-workspace-pill {
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
}

#page-history .history-workspace-pill-count {
  min-width: 16px;
  height: 16px;
  font-size: 9px;
}

#page-history .history-workspace-queue {
  gap: var(--history-section-gap-tight);
}

#page-history .history-workspace-section-head h4 {
  font-size: 12px;
}

#page-history #historyActiveQueueMeta {
  display: none;
}

#page-history .history-workspace-loading-card,
#page-history .history-workspace-empty,
#allForecastDaysPopup .history-workspace-empty {
  min-height: 200px;
  border-radius: calc(var(--history-surface-radius) + 2px);
  padding: 24px 18px;
}

#page-history .history-workspace-loading-icon,
#page-history .history-workspace-empty-icon,
#allForecastDaysPopup .history-workspace-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 20px;
}

#page-history .history-workspace-empty-copy h5,
#allForecastDaysPopup .history-workspace-empty-copy h5 {
  font-size: 16px;
}

#page-history .history-workspace-empty-copy p,
#allForecastDaysPopup .history-workspace-empty-copy p {
  font-size: 13px;
}

#page-history .history-queue-card {
  border-radius: calc(var(--history-surface-radius) + 2px);
  border-color: var(--history-ui-border);
  padding: 16px;
  gap: 14px;
  box-shadow: var(--history-ui-shadow);
}

#page-history .history-queue-card-head,
#page-history .history-queue-card-main {
  gap: 14px;
}

#page-history .history-queue-card-tags {
  gap: 6px;
}

#page-history .history-queue-chip {
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
}

#page-history .history-queue-state {
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
}

#page-history .history-queue-card-copy {
  gap: 8px;
}

#page-history .history-queue-card-title-row {
  gap: 8px;
}

#page-history .history-queue-card-title-row h5 {
  font-size: 16px;
}

#page-history .history-queue-card-window {
  font-size: 13px;
}

#page-history .history-queue-card-copy p {
  font-size: 13px;
  line-height: 1.55;
}

#page-history .history-queue-card-price {
  min-width: 96px;
  gap: 4px;
}

#page-history .history-queue-card-price strong {
  font-size: 26px;
}

#page-history .history-queue-card-price span {
  font-size: 12px;
}

#page-history .history-queue-card-metrics {
  border-radius: var(--history-surface-radius);
  border-color: var(--history-ui-border);
  padding: 14px;
  gap: 12px 14px;
}

#page-history .history-queue-card-metrics > div {
  gap: 6px;
}

#page-history .history-queue-card-metrics span {
  font-size: 10px;
}

#page-history .history-queue-card-metrics strong {
  font-size: 13px;
}

#page-history .history-queue-card-actions {
  align-items: stretch;
  gap: 10px;
}

#page-history .history-workspace-btn.is-primary.is-queue {
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--history-inner-radius);
  font-size: 12px;
}

#page-history .history-queue-icon-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
  border-radius: var(--history-inner-radius);
}

#page-history .history-signal {
  gap: 6px;
}

#page-history .history-signal-legend,
#allForecastDaysPopup .history-signal-legend {
  font-size: 9px;
}

#page-history .prediction-workspace-empty {
  border-radius: calc(var(--history-surface-radius) + 2px);
}

#page-history .prediction-tracked-windows .historyv2-window-list,
#page-history .prediction-archive-library,
#page-history .prediction-archive-group-stack {
  gap: var(--history-section-gap-tight);
}

#page-history .prediction-archive-card {
  border-radius: calc(var(--history-surface-radius) + 2px);
}

#page-history .prediction-archive-card-head {
  gap: 12px;
  padding: 16px;
}

#page-history .prediction-archive-card-title-row h5 {
  font-size: 16px;
}

#page-history .prediction-archive-card-copy p {
  font-size: 12px;
}

#page-history .prediction-archive-card-stats {
  gap: 8px;
}

#page-history .prediction-archive-card-stats > div {
  padding: 10px;
  border-radius: var(--history-inner-radius);
}

#page-history .prediction-archive-card-stats span {
  font-size: 9px;
}

#page-history .prediction-archive-card-stats strong {
  font-size: 16px;
}

#page-history .prediction-archive-card-body {
  padding: 0 16px 16px;
}

#page-history .prediction-manual-ledger {
  gap: var(--history-section-gap-tight);
}

#page-history .prediction-manual-ledger-head h5 {
  font-size: 16px;
}

#page-history .prediction-manual-ledger-head p {
  font-size: 12px;
}

#page-history .prediction-manual-ledger .historyv2-feedback-table {
  border-radius: var(--history-surface-radius);
}

#page-history .prediction-manual-ledger .historyv2-feedback-table th,
#page-history .prediction-manual-ledger .historyv2-feedback-table td {
  padding: 10px 12px;
  font-size: 11px;
}

#page-history .prediction-manual-ledger .historyv2-feedback-table th {
  font-size: 9px;
}

#page-history .prediction-archive-group-stack .afw-session-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: var(--history-surface-radius);
}

#page-history .prediction-archive-group-stack .afw-session-head {
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#page-history .prediction-archive-group-stack .afw-session-meta,
#page-history .prediction-archive-group-stack .afw-session-right {
  font-size: 10px;
}

#page-history .prediction-archive-group-stack .afw-session-pill,
#page-history .prediction-archive-group-stack .afw-ticker-pill,
#page-history .prediction-archive-group-stack .afw-day-probs span {
  padding: 0 9px;
  font-size: 9px;
}

#page-history .prediction-archive-group-stack .afw-day-grid {
  gap: 10px;
}

#page-history .prediction-archive-group-stack .afw-day-card {
  gap: 8px;
  padding: 12px;
  border-radius: var(--history-surface-radius);
}

#page-history .prediction-archive-group-stack .afw-day-label {
  font-size: 12px;
}

#page-history .prediction-archive-group-stack .afw-day-price {
  font-size: 22px;
}

#page-history .prediction-archive-group-stack .afw-day-move,
#page-history .prediction-archive-group-stack .afw-day-meta,
#page-history .prediction-archive-group-stack .afw-day-band,
#page-history .prediction-archive-group-stack .afw-day-plan {
  font-size: 11px;
}

#page-history .prediction-archive-group-stack .afw-day-status {
  padding: 9px 10px;
  border-radius: var(--history-inner-radius);
}

#page-history .prediction-archive-group-stack .afw-day-status-label {
  font-size: 11px;
}

#page-history .prediction-archive-group-stack .afw-day-status-sub,
#page-history .prediction-archive-group-stack .feedback-note.reverted {
  font-size: 10px;
}

#page-history :is(.prediction-queue-btn, .prediction-empty-action, .prediction-archive-card-toggle) {
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--history-inner-radius);
  font-size: 11px;
}

#page-history .prediction-workspace-empty {
  min-height: 148px;
  padding: 16px;
}

#allForecastDaysPopup .history-archive-modal {
  border-radius: 28px;
  box-shadow: 0 24px 56px -32px rgba(15, 23, 42, 0.28);
}

#allForecastDaysPopup .history-archive-modal-head {
  padding: 18px 20px;
}

#allForecastDaysPopup .history-archive-modal-title {
  font-size: 18px;
}

#allForecastDaysPopup .history-archive-modal-subtitle {
  font-size: 12px;
}

#allForecastDaysPopup .history-archive-modal-body {
  padding: 16px;
}

#allForecastDaysPopup .history-archive-group-list,
#allForecastDaysPopup .history-archive-search-shell {
  gap: var(--history-section-gap-tight);
}

#allForecastDaysPopup .history-archive-search-row {
  gap: 12px;
}

#allForecastDaysPopup .history-archive-search-input {
  min-height: 42px;
  border-radius: var(--history-inner-radius);
  font-size: 13px;
}

#allForecastDaysPopup .history-archive-search-meta {
  font-size: 11px;
}

#allForecastDaysPopup .history-archive-search-pill {
  min-height: var(--history-chip-height);
  padding: 0 10px;
  font-size: 11px;
}

#allForecastDaysPopup .history-archive-group,
#allForecastDaysPopup .prediction-archive-card.is-popup {
  border-radius: calc(var(--history-surface-radius) + 2px);
}

#allForecastDaysPopup .history-archive-group-head,
#allForecastDaysPopup .prediction-archive-card-head.is-popup {
  gap: 14px;
  padding: 16px;
}

#allForecastDaysPopup .history-archive-group-symbol,
#allForecastDaysPopup .history-archive-group-date,
#allForecastDaysPopup .prediction-archive-card-title-row h5 {
  font-size: 16px;
}

#allForecastDaysPopup .history-archive-group-range,
#allForecastDaysPopup .prediction-archive-card-copy p {
  font-size: 12px;
}

#allForecastDaysPopup .history-archive-group-pill {
  min-height: var(--history-chip-height);
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
}

#allForecastDaysPopup .history-archive-group-toggle,
#allForecastDaysPopup .prediction-archive-card-toggle-icon,
#allForecastDaysPopup .history-archive-modal-close {
  width: 30px;
  height: 30px;
}

#allForecastDaysPopup .history-archive-group-body,
#allForecastDaysPopup .prediction-archive-card-body.is-popup {
  padding: 16px;
  gap: 16px;
}

#allForecastDaysPopup .history-archive-group-meta {
  gap: 10px;
}

#allForecastDaysPopup .history-archive-group-meta-badge {
  min-height: 22px;
  padding: 0 9px;
  font-size: 10px;
}

#allForecastDaysPopup .history-archive-group-meta-copy p,
#allForecastDaysPopup .history-archive-group-meta-status {
  font-size: 11px;
}

#allForecastDaysPopup .history-archive-day-rail {
  gap: 12px;
}

#allForecastDaysPopup .history-archive-day-card {
  min-width: 236px;
  flex-basis: 236px;
  border-radius: calc(var(--history-surface-radius) + 2px);
  box-shadow: var(--history-ui-shadow);
}

#allForecastDaysPopup .history-archive-day-card-head {
  padding: 14px 16px;
}

#allForecastDaysPopup .history-archive-day-card-title,
#allForecastDaysPopup .history-archive-day-card-session {
  font-size: 10px;
}

#allForecastDaysPopup .history-archive-day-card-body {
  padding: 14px 16px;
  gap: 12px;
}

#allForecastDaysPopup .history-archive-day-card-price strong {
  font-size: 24px;
}

#allForecastDaysPopup .history-archive-day-card-price span,
#allForecastDaysPopup .history-archive-day-card-stats > div {
  font-size: 12px;
}

#allForecastDaysPopup .history-archive-day-card-actions {
  padding: 12px 16px 16px;
  gap: 8px;
}

#allForecastDaysPopup .history-archive-day-btn,
#allForecastDaysPopup .history-workspace-btn,
#allForecastDaysPopup .prediction-empty-action,
#allForecastDaysPopup .prediction-archive-card-toggle {
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--history-inner-radius);
  font-size: 11px;
}

#allForecastDaysPopup .afw-session-card {
  padding: 14px;
  border-radius: var(--history-surface-radius);
}

#allForecastDaysPopup .afw-session-head {
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#allForecastDaysPopup .afw-session-meta,
#allForecastDaysPopup .afw-session-right {
  font-size: 10px;
}

#allForecastDaysPopup .afw-session-pill,
#allForecastDaysPopup .afw-ticker-pill {
  min-height: var(--history-chip-height);
  padding: 0 9px;
  font-size: 9px;
}

#allForecastDaysPopup .afw-day-grid {
  gap: 10px;
}

#allForecastDaysPopup .afw-day-card {
  padding: 12px;
  border-radius: var(--history-surface-radius);
  gap: 8px;
}

#allForecastDaysPopup .afw-day-status {
  padding: 9px 10px;
  border-radius: var(--history-inner-radius);
}

html[data-theme='dark'] #page-history {
  --history-ui-border: color-mix(in srgb, var(--border-bright) 62%, transparent);
  --history-ui-surface: color-mix(in srgb, var(--bg-card) 96%, transparent);
  --history-ui-soft: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  --history-ui-shadow: none;
}

html[data-theme='dark'] #page-history :is(.history-workspace-banner, .history-workspace-stat, .history-workspace-filter-card, .history-workspace-loading-card, .history-workspace-empty, .history-queue-card, .history-queue-card-metrics, .prediction-archive-card, .prediction-archive-card-stats > div, .prediction-archive-card-body, .prediction-manual-ledger .historyv2-feedback-table, .prediction-archive-group-stack .afw-session-card, .prediction-archive-group-stack .afw-day-card, .prediction-archive-group-stack .afw-day-status) {
  border-color: var(--history-ui-border);
  box-shadow: none;
}

html[data-theme='dark'] #page-history :is(.history-workspace-banner, .history-workspace-stat, .history-workspace-filter-card, .history-workspace-loading-card, .history-workspace-empty, .history-queue-card, .history-queue-card-metrics, .prediction-archive-card, .prediction-archive-card-stats > div, .prediction-archive-card-body, .prediction-manual-ledger .historyv2-feedback-table, .prediction-archive-group-stack .afw-session-card, .prediction-archive-group-stack .afw-day-card, .prediction-archive-group-stack .afw-day-status) {
  background: var(--history-ui-surface);
}

html[data-theme='dark'] #page-history :is(.history-workspace-btn, .history-workspace-pill, .history-queue-icon-btn) {
  border-color: var(--history-ui-border);
}

@media (max-width: 980px) {
  #page-history .history-workspace-grid {
    grid-template-columns: 1fr;
  }

  #page-history .history-workspace-queue-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 760px) {
  #page-history .topic-terminal-header.topic-terminal-header--history {
    padding: 16px !important;
    border-radius: 20px;
  }

  #page-history .history-workspace-shell {
    padding: 0 4px 20px;
  }

  #page-history .history-workspace-title-line h3 {
    font-size: 24px;
  }

  #page-history .history-workspace-stats,
  #page-history .history-queue-card-metrics,
  #page-history .prediction-archive-group-stack .afw-day-grid {
    grid-template-columns: 1fr;
  }

  #page-history .history-queue-card,
  #page-history .history-workspace-filter-card {
    padding: 16px;
    border-radius: calc(var(--history-surface-radius) + 2px);
  }

  #page-history .history-queue-card-head,
  #page-history .history-queue-card-main,
  #allForecastDaysPopup .history-archive-group-head,
  #allForecastDaysPopup .history-archive-group-meta-head,
  #allForecastDaysPopup .afw-session-head {
    flex-direction: column;
    align-items: flex-start;
  }

  #page-history .history-queue-card-actions,
  #page-history .history-workspace-toolbar {
    width: 100%;
  }
}

/* ===== History Legacy Surface Alignment ===== */
#page-history .history-queue-card-copy p,
#page-history .prediction-archive-card-copy p,
#allForecastDaysPopup .prediction-archive-card-copy p,
#page-history .historyv3-context-copy,
#page-history .historyv3-window-copy {
  display: none;
}

#page-history .prediction-queue-actions,
#page-history .historyv3-day-actions,
#allForecastDaysPopup .historyv3-day-actions,
#page-history .prediction-archive-card-actions,
#allForecastDaysPopup .prediction-archive-card-actions.is-popup {
  align-items: stretch;
  gap: 8px;
}

#page-history .prediction-queue-btn,
#page-history .historyv3-day-action,
#page-history .historyv2-view-action,
#page-history .prediction-archive-card-toggle,
#allForecastDaysPopup .historyv3-day-action,
#allForecastDaysPopup .prediction-archive-card-toggle,
#allForecastDaysPopup .history-archive-day-btn {
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--history-inner-radius);
  font-size: 11px;
}

#page-history .historyv2-window-actions {
  gap: 8px;
  align-items: stretch;
}

#page-history .historyv2-trash-action {
  width: 38px;
  height: 38px;
  border-radius: var(--history-inner-radius);
  box-shadow: none;
}

/* ===== History Archive Popup Refinement ===== */
#allForecastDaysPopup .history-archive-search-shell {
  gap: 0;
}

#allForecastDaysPopup .history-archive-search-pills {
  display: none;
}

#allForecastDaysPopup .history-archive-group-list {
  margin-top: 12px;
}

#allForecastDaysPopup .history-archive-modal {
  border-radius: 32px;
}

#allForecastDaysPopup .history-archive-group,
#allForecastDaysPopup .prediction-archive-card.is-popup {
  border-radius: 24px;
}

#allForecastDaysPopup .history-archive-day-card,
#allForecastDaysPopup .afw-day-card {
  border-radius: 20px;
}

/* ===== Unified Legacy Shell Polish ===== */
:root {
  --legacy-shell-layer-sticky: 50;
  --legacy-shell-layer-sidebar-menu: 260;
  --legacy-shell-layer-search-popover: 320;
  --legacy-shell-layer-top-ticker: 10120;
  --legacy-shell-layer-modal: 12000;
}

:is(
  #page-dashboard,
  #page-forecast,
  #page-options,
  #page-simulations,
  #page-history,
  #page-price-history,
  #allForecastDaysPopup,
  .ultron-ticker-overlay
) {
  --legacy-shell-control-height: 44px;
  --legacy-shell-control-height-compact: 36px;
  --legacy-shell-icon-button-size: 36px;
  --legacy-shell-field-height: 46px;
  --legacy-shell-surface-radius: 22px;
  --legacy-shell-control-radius: 16px;
  --legacy-shell-control-radius-tight: 14px;
  --legacy-shell-control-padding-x: 14px;
  --legacy-shell-border-soft: rgba(148, 163, 184, 0.24);
  --legacy-shell-border-strong: rgba(148, 163, 184, 0.36);
  --legacy-shell-surface-soft: rgba(248, 250, 252, 0.92);
  --legacy-shell-shadow-soft: 0 14px 32px -28px rgba(15, 23, 42, 0.34);
  --legacy-shell-focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

#page-history {
  --history-surface-radius: var(--legacy-shell-surface-radius);
  --history-inner-radius: var(--legacy-shell-control-radius-tight);
  --history-chip-height: var(--legacy-shell-control-height-compact);
  --history-ui-border: var(--legacy-shell-border-soft);
  --history-ui-shadow: var(--legacy-shell-shadow-soft);
  --history-ui-soft: var(--legacy-shell-surface-soft);
}

#page-price-history {
  --price-history-surface-radius: var(--legacy-shell-surface-radius);
  --price-history-inner-radius: var(--legacy-shell-control-radius-tight);
  --price-history-input-height: var(--legacy-shell-field-height);
  --price-history-chip-height: var(--legacy-shell-control-height-compact);
  --price-history-ui-border: var(--legacy-shell-border-soft);
  --price-history-ui-shadow: var(--legacy-shell-shadow-soft);
  --price-history-ui-soft: var(--legacy-shell-surface-soft);
}

.page,
.legacy-shell-target-page,
.legacy-shell-target-page > * {
  min-width: 0;
}

.top-bar.top-bar-redesign {
  z-index: var(--legacy-shell-layer-sticky);
}

.sidebar-auth-quick-menu {
  z-index: var(--legacy-shell-layer-sidebar-menu);
}

.sidebar-auth-wrap.sidebar-user-menu-open .sidebar-auth-quick-menu {
  overflow: visible;
}

#page-history .history-workspace-topbar,
#page-history .history-workspace-grid,
#page-history .history-workspace-toolbar,
#page-history .history-workspace-filter-card,
#page-history .history-workspace-search,
#page-history .history-workspace-section-head,
#page-history .history-queue-card-head,
#page-history .history-queue-card-main,
#page-history .history-queue-card-actions,
#allForecastDaysPopup .history-archive-search-shell,
#allForecastDaysPopup .history-archive-search-row,
#allForecastDaysPopup .history-archive-group-head,
#allForecastDaysPopup .history-archive-group-controls,
#page-price-history .price-history-v3-selector-head,
#page-price-history .price-history-v3-selector-layout,
#page-price-history .price-history-v3-launcher-card,
#page-price-history .price-history-v3-search-control,
#page-price-history .price-history-v3-search-row,
#page-price-history .price-history-v3-search-stack,
#page-price-history .price-history-v3-filter-group,
#page-price-history .price-history-v3-chart-actions,
#page-price-history .price-history-v3-detail-header-row,
#page-price-history .price-history-v3-layout,
#page-price-history .price-history-v3-bottom-grid {
  min-width: 0;
}

#page-history .history-workspace-topbar,
#page-history .history-workspace-filter-card,
#allForecastDaysPopup .history-archive-search-shell,
#page-price-history .price-history-v3-selector-card,
#page-price-history .price-history-v3-launcher-card,
#page-price-history .price-history-v3-search-control,
#page-price-history .price-history-v3-search-stack,
#page-price-history .price-history-v3-search-input-wrap {
  position: relative;
  overflow: visible;
}

.legacy-shell-search-input,
#page-history .history-workspace-search-input,
#allForecastDaysPopup .history-archive-search-input,
#page-price-history .price-history-v3-search-input {
  min-height: var(--legacy-shell-field-height);
  border-radius: var(--legacy-shell-control-radius-tight);
  font-size: 13px;
}

#page-history .history-workspace-search-input,
#allForecastDaysPopup .history-archive-search-input,
#page-price-history .price-history-v3-search-input {
  padding-left: 40px;
  padding-right: 44px;
}

#page-history .history-workspace-search-input:focus,
#allForecastDaysPopup .history-archive-search-input:focus,
#page-price-history .price-history-v3-search-input:focus {
  box-shadow: var(--legacy-shell-focus-ring);
}

.legacy-shell-icon-btn,
#page-history .history-workspace-search-clear,
#allForecastDaysPopup .history-archive-search-clear,
#page-price-history .price-history-v3-search-clear,
#page-price-history .price-history-v3-saved-card-remove {
  width: var(--legacy-shell-icon-button-size);
  min-width: var(--legacy-shell-icon-button-size);
  height: var(--legacy-shell-icon-button-size);
  min-height: var(--legacy-shell-icon-button-size);
  padding: 0;
  border-radius: var(--legacy-shell-control-radius-tight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

#page-history .history-workspace-search-clear,
#allForecastDaysPopup .history-archive-search-clear,
#page-price-history .price-history-v3-search-clear {
  border: 1px solid var(--legacy-shell-border-soft);
  background: rgba(248, 250, 252, 0.92);
}

.legacy-shell-action-btn,
#page-history .history-workspace-btn,
#allForecastDaysPopup .history-workspace-btn,
#allForecastDaysPopup .history-archive-day-btn,
#page-price-history :is(.price-history-v3-search-submit, .price-history-v3-reset-btn, .price-history-v3-save-btn, .price-history-v3-inline-btn, .price-history-v3-export-btn, .price-history-v3-open-btn) {
  min-height: var(--legacy-shell-control-height);
  padding: 0 var(--legacy-shell-control-padding-x);
  border-radius: var(--legacy-shell-control-radius-tight);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  box-shadow: none;
}

.legacy-shell-compact-pill,
#page-history .history-workspace-pill,
#allForecastDaysPopup .history-archive-search-pill,
#page-price-history .price-history-v3-timeframe-pill {
  min-height: var(--legacy-shell-control-height-compact);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

#page-history .history-workspace-toolbar,
#page-history .history-queue-card-actions,
#allForecastDaysPopup .history-archive-day-card-actions,
#page-price-history .price-history-v3-filter-group,
#page-price-history .price-history-v3-chart-actions {
  flex-wrap: wrap;
}

#page-price-history .price-history-v3-search-row {
  flex-wrap: wrap;
  align-items: stretch;
}

#page-price-history .price-history-v3-search-stack {
  z-index: var(--legacy-shell-layer-search-popover);
  isolation: isolate;
}

#page-price-history .price-history-v3-search-results {
  z-index: calc(var(--legacy-shell-layer-search-popover) + 1);
  box-shadow: 0 18px 36px -26px rgba(15, 23, 42, 0.32);
}

#page-price-history .price-history-v3-search-results.is-open {
  overscroll-behavior: contain;
}

#page-price-history .price-history-v3-search-submit,
#page-price-history .price-history-v3-open-btn {
  min-width: 104px;
}

#page-dashboard .ticker-wrapper,
#page-dashboard .top-price-modern-waves {
  contain: layout paint;
}

html[data-theme='dark'] #page-history .history-workspace-search-clear,
html[data-theme='dark'] #allForecastDaysPopup .history-archive-search-clear,
html[data-theme='dark'] #page-price-history .price-history-v3-search-clear {
  border-color: color-mix(in srgb, var(--border-bright) 62%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 86%, transparent);
}

html[data-theme='dark'] .sidebar-auth-wrap.sidebar-user-menu-open .sidebar-auth-quick-menu {
  overflow: visible;
}

@media (max-width: 760px) {
  #page-history .history-workspace-toolbar,
  #page-price-history .price-history-v3-filter-group,
  #page-price-history .price-history-v3-chart-actions {
    width: 100%;
  }

  #page-price-history .price-history-v3-search-row {
    flex-direction: column;
  }

  #page-price-history .price-history-v3-search-submit {
    width: 100%;
  }
}

@media (max-width: 980px) {
  .main-content {
    overflow-y: visible;
    overflow-x: hidden;
  }
}

/* ===== Launch UI Stabilization Pass ===== */
:root {
  --legacy-shell-layer-sticky: 140;
  --legacy-shell-layer-mobile-toolbar: 180;
  --legacy-shell-layer-drawer-backdrop: 880;
  --legacy-shell-layer-drawer: 890;
  --legacy-shell-layer-sidebar-menu: 905;
  --legacy-shell-layer-search-popover: 960;
  --legacy-shell-layer-top-ticker: 12100;
  --legacy-shell-layer-modal: 24000;
}

#legacy-page-root {
  --legacy-shell-page-max: 1440px;
  --legacy-shell-mobile-toolbar-height: 64px;
  --legacy-shell-mobile-toolbar-gap: 8px;
}

.legacy-mobile-toolbar,
.ultron-mobile-nav-backdrop {
  display: none;
}

.sidebar-mobile-close {
  display: none;
}

.auth-modal-overlay,
.profile-hub-modal-overlay,
.welcome-overlay {
  z-index: calc(var(--legacy-shell-layer-modal) + 20) !important;
}

.top-run-forecast-modal-overlay {
  z-index: calc(var(--legacy-shell-layer-modal) + 10) !important;
}

.app-wrapper.ultron-ticker-overlay,
.top-ticker-hint {
  z-index: var(--legacy-shell-layer-top-ticker) !important;
}

.popup-overlay,
.auth-modal-overlay,
.profile-hub-modal-overlay,
.welcome-overlay,
.top-run-forecast-modal-overlay,
.app-wrapper.ultron-ticker-overlay,
.top-ticker-hint {
  isolation: isolate;
}

.legacy-shell-target-page {
  width: min(100%, var(--legacy-shell-page-max));
  margin-inline: auto;
  padding: 0 var(--main-shell-gutter) 28px;
}

#page-price-history.legacy-shell-target-page {
  width: min(100%, var(--legacy-shell-page-max)) !important;
  margin-inline: auto !important;
  padding: 0 var(--main-shell-gutter) 28px !important;
}

@media (min-width: 1560px) {
  :is(
    #page-dashboard,
    #page-forecast,
    #page-options,
    #page-simulations,
    #page-history,
    #page-price-history
  ).legacy-shell-target-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  #page-price-history.legacy-shell-target-page {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  #page-history .history-workspace-shell {
    max-width: none;
    margin-inline: 0;
  }
}

#page-price-history .price-history-v2-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(#page-dashboard, #page-forecast, #page-options, #page-simulations, #page-history, #page-price-history) {
  --legacy-launch-surface-radius: 24px;
  --legacy-launch-inner-radius: 18px;
  --legacy-launch-panel-border: color-mix(in srgb, var(--border-bright) 62%, transparent);
  --legacy-launch-panel-border-strong: color-mix(in srgb, var(--border-bright) 78%, transparent);
  --legacy-launch-shadow:
    0 18px 36px -30px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  --legacy-launch-surface-soft: color-mix(in srgb, var(--bg-surface) 94%, transparent);
}

:is(
  #page-dashboard,
  #page-forecast,
  #page-options,
  #page-simulations,
  #page-history,
  #page-price-history
) :is(
  .dashboard-panel-card,
  .dashboard-stat-card,
  .complete-report-react-shell,
  .options-v2-panel,
  .position-v2-card,
  .simv2-card,
  .simv2-prob-card,
  .history-workspace-topbar,
  .history-workspace-filter-card,
  .history-workspace-stat,
  .history-workspace-queue,
  .price-history-v3-selector-card,
  .price-history-v3-launcher-card,
  .price-history-v3-toolbar-card,
  .price-history-v3-side-card,
  .price-history-v3-chart-card,
  .price-history-v3-metrics-shell,
  .price-history-v3-table-shell,
  .price-history-v3-loading-card,
  .price-history-v3-popup-focus,
  .price-history-v3-popup-table-shell
) {
  border-radius: var(--legacy-launch-surface-radius) !important;
  box-shadow: var(--legacy-launch-shadow) !important;
}

:is(#page-dashboard, #page-forecast, #page-options, #page-simulations) :is(
  .dashboard-panel-card,
  .dashboard-stat-card,
  .complete-report-react-shell,
  .options-v2-panel,
  .position-v2-card,
  .simv2-card,
  .simv2-prob-card
) {
  border: 1px solid var(--legacy-launch-panel-border) !important;
  background: var(--legacy-launch-surface-soft) !important;
}

:is(#page-dashboard, #page-forecast, #page-options, #page-simulations) :is(
  .dashboard-panel-card,
  .dashboard-stat-card,
  .complete-report-react-shell,
  .options-v2-panel,
  .position-v2-card,
  .simv2-card,
  .simv2-prob-card
)::before,
:is(#page-dashboard, #page-forecast, #page-options, #page-simulations) :is(
  .dashboard-panel-card,
  .dashboard-stat-card,
  .complete-report-react-shell,
  .options-v2-panel,
  .position-v2-card,
  .simv2-card,
  .simv2-prob-card
)::after {
  border-radius: inherit !important;
}

:is(#page-dashboard, #page-forecast, #page-options, #page-simulations, #page-history, #page-price-history) .topic-terminal-header {
  border-radius: 28px !important;
  margin-bottom: 16px !important;
  box-shadow:
    0 20px 40px -34px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

:is(#page-dashboard, #page-forecast, #page-options, #page-simulations, #page-history, #page-price-history) .topic-terminal-header .topic-terminal-header-pill {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.24);
}

:is(
  .btn,
  .sidebar-auth-pill,
  .legacy-shell-action-btn,
  .topic-terminal-header-btn,
  .price-history-v2-modal-btn,
  .trade-status-btn,
  .history-view-btn,
  .history-delete-btn,
  .position-v2-detail-btn,
  .position-v2-track-btn,
  #page-forecast .reportv3-btn-ghost,
  #page-forecast .reportv3-btn-primary,
  #page-forecast .reportv2-rate-btn,
  #page-forecast .reportv2-add-btn,
  #page-history .history-workspace-btn,
  #page-history .history-queue-icon-btn,
  #page-history .prediction-queue-btn,
  #page-history .prediction-empty-action,
  #page-history .prediction-archive-card-toggle,
  #page-price-history .price-history-v3-search-submit,
  #page-price-history .price-history-v3-reset-btn,
  #page-price-history .price-history-v3-save-btn,
  #page-price-history .price-history-v3-inline-btn,
  #page-price-history .price-history-v3-export-btn,
  #page-price-history .price-history-v3-open-btn,
  #feedbackPopup .feedback-choice-btn
) {
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease !important;
}

:is(
  .btn,
  .sidebar-auth-pill,
  .legacy-shell-action-btn,
  .topic-terminal-header-btn,
  .price-history-v2-modal-btn,
  .trade-status-btn,
  .history-view-btn,
  .history-delete-btn,
  .position-v2-detail-btn,
  .position-v2-track-btn,
  #page-forecast .reportv3-btn-ghost,
  #page-forecast .reportv3-btn-primary,
  #page-forecast .reportv2-rate-btn,
  #page-forecast .reportv2-add-btn,
  #page-history .history-workspace-btn,
  #page-history .history-queue-icon-btn,
  #page-history .prediction-queue-btn,
  #page-history .prediction-empty-action,
  #page-history .prediction-archive-card-toggle,
  #page-price-history .price-history-v3-search-submit,
  #page-price-history .price-history-v3-reset-btn,
  #page-price-history .price-history-v3-save-btn,
  #page-price-history .price-history-v3-inline-btn,
  #page-price-history .price-history-v3-export-btn,
  #page-price-history .price-history-v3-open-btn,
  #feedbackPopup .feedback-choice-btn
):active {
  transform: translateY(1px) scale(0.98);
}

:is(
  .legacy-shell-icon-btn,
  #page-history .history-workspace-search-clear,
  #allForecastDaysPopup .history-archive-search-clear,
  #page-price-history .price-history-v3-search-clear,
  #page-price-history .price-history-v3-saved-card-remove,
  .top-header-lock-btn,
  .top-ticker-expand,
  .legacy-mobile-toolbar-toggle,
  .legacy-mobile-toolbar-action,
  .ultron-ticker-overlay .close-btn
) {
  width: var(--legacy-shell-icon-button-size);
  min-width: var(--legacy-shell-icon-button-size);
  height: var(--legacy-shell-icon-button-size);
  min-height: var(--legacy-shell-icon-button-size);
  border-radius: var(--legacy-shell-control-radius-tight);
}

:is(
  .legacy-shell-search-surface,
  #page-history .history-workspace-filter-card,
  #allForecastDaysPopup .history-archive-search-shell,
  #page-price-history .price-history-v3-selector-card,
  #page-price-history .price-history-v3-launcher-card,
  #page-price-history .price-history-v3-toolbar-card
) {
  border-radius: var(--legacy-shell-surface-radius) !important;
  border-color: var(--legacy-shell-border-soft) !important;
  box-shadow: var(--legacy-shell-shadow-soft) !important;
}

:is(
  .legacy-shell-search-control,
  #page-history .history-workspace-search,
  #page-price-history .price-history-v3-search-control,
  .ultron-ticker-overlay .search-wrapper
) {
  border-radius: var(--legacy-shell-control-radius) !important;
}

:is(
  .legacy-shell-search-input,
  #page-history .history-workspace-search-input,
  #allForecastDaysPopup .history-archive-search-input,
  #page-price-history .price-history-v3-search-input,
  .ultron-ticker-overlay .search-input
) {
  min-height: var(--legacy-shell-field-height) !important;
  border-radius: var(--legacy-shell-control-radius-tight) !important;
}

.ultron-ticker-overlay .search-wrapper {
  border-color: var(--legacy-shell-border-soft) !important;
  box-shadow: var(--legacy-shell-shadow-soft) !important;
}

.ultron-ticker-overlay .search-input {
  min-height: var(--legacy-shell-field-height) !important;
  padding-left: 54px !important;
  padding-right: 18px !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
}

#page-price-history .price-history-v3-search-results {
  top: calc(100% + 10px);
  border: 1px solid var(--legacy-shell-border-strong);
  border-radius: 18px;
  max-height: min(320px, 45vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 44px -28px rgba(15, 23, 42, 0.28);
}

#page-price-history .price-history-v3-selector-card {
  position: relative;
  z-index: calc(var(--legacy-shell-layer-search-popover) - 2);
  overflow: visible !important;
  isolation: isolate;
}

#page-price-history :is(
  .price-history-v3-selector-layout,
  .price-history-v3-launcher-card,
  .price-history-v3-search-control,
  .price-history-v3-search-row,
  .price-history-v3-search-stack,
  .price-history-v3-search-input-wrap
) {
  position: relative;
  overflow: visible !important;
}

#page-price-history .price-history-v3-search-stack {
  z-index: var(--legacy-shell-layer-search-popover);
}

#page-price-history .price-history-v3-search-results,
#page-price-history .price-history-v3-search-results.is-open {
  z-index: calc(var(--legacy-shell-layer-search-popover) + 4);
}

#page-price-history :is(
  .price-history-v3-toolbar-card,
  .price-history-v3-layout,
  .price-history-v3-bottom-grid
) {
  position: relative;
  z-index: 0;
}

#page-price-history .price-history-v3-search-item {
  min-height: 52px;
  align-items: center;
}

:is(
  #alertsClearPopup,
  #predictionClearPopup,
  #resetPopup,
  #tradeDayPopup,
  #tradeEditorPopup,
  #tradeCompletePopup,
  #systemLogDayPopup,
  #alertsDayPopup,
  #priceLogDayPopup,
  #actionConfirmPopup
) {
  padding: clamp(12px, 2vw, 24px);
}

:is(
  #alertsClearPopup,
  #predictionClearPopup,
  #resetPopup,
  #tradeDayPopup,
  #tradeEditorPopup,
  #tradeCompletePopup,
  #systemLogDayPopup,
  #alertsDayPopup,
  #priceLogDayPopup,
  #actionConfirmPopup
) .popup {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  border-radius: 28px !important;
  border: 1px solid var(--legacy-shell-border-strong) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--bg-surface) 96%, transparent),
      color-mix(in srgb, var(--bg-hover) 92%, transparent)
    ) !important;
  box-shadow:
    0 28px 60px -34px rgba(15, 23, 42, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

:is(
  #alertsClearPopup,
  #predictionClearPopup,
  #resetPopup,
  #tradeDayPopup,
  #tradeEditorPopup,
  #tradeCompletePopup,
  #systemLogDayPopup,
  #alertsDayPopup,
  #priceLogDayPopup,
  #actionConfirmPopup
) .popup-title {
  font-size: 13px;
  letter-spacing: 0.14em;
}

:is(
  #alertsClearPopup,
  #predictionClearPopup,
  #resetPopup,
  #tradeDayPopup,
  #tradeEditorPopup,
  #tradeCompletePopup,
  #systemLogDayPopup,
  #alertsDayPopup,
  #priceLogDayPopup,
  #actionConfirmPopup
) .popup-body {
  font-size: 13px;
  line-height: 1.6;
}

:is(
  #alertsClearPopup,
  #predictionClearPopup,
  #resetPopup,
  #tradeDayPopup,
  #tradeEditorPopup,
  #tradeCompletePopup,
  #systemLogDayPopup,
  #alertsDayPopup,
  #priceLogDayPopup,
  #actionConfirmPopup
) .popup-actions {
  gap: 10px;
  flex-wrap: wrap;
}

html[data-theme='dark'] .ultron-ticker-overlay .search-wrapper,
html[data-theme='dark'] #page-price-history .price-history-v3-search-results {
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
}

html[data-theme='dark'] .legacy-mobile-toolbar,
html[data-theme='dark'] .sidebar {
  border-color: color-mix(in srgb, var(--border-bright) 68%, transparent);
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
}

html[data-theme='dark'] .legacy-mobile-toolbar-action,
html[data-theme='dark'] .legacy-mobile-toolbar-toggle {
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent);
  border-color: color-mix(in srgb, var(--border-bright) 64%, transparent);
  color: var(--text-primary);
}

@media (max-width: 980px) {
  body.ultron-mobile-nav-open {
    overflow: hidden;
  }

  .app-shell {
    display: block;
    min-height: 100dvh;
    padding: 0;
    gap: 0;
  }

  .legacy-mobile-toolbar {
    position: sticky;
    top: 10px;
    z-index: var(--legacy-shell-layer-mobile-toolbar);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 12px var(--main-shell-gutter) 8px;
    padding: 10px 12px;
    border-radius: 20px;
    border: 1px solid var(--legacy-shell-border-soft);
    background: rgba(248, 250, 252, 0.94);
    box-shadow: var(--legacy-shell-shadow-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .legacy-mobile-toolbar-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .legacy-mobile-toolbar-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cyan) 74%, var(--text-secondary) 26%);
  }

  .legacy-mobile-toolbar-title {
    display: block;
    min-width: 0;
    font-size: 15px;
    line-height: 1.15;
    color: var(--text-primary);
  }

  .legacy-mobile-toolbar-subtitle {
    display: block;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-secondary);
  }

  .legacy-mobile-toolbar-toggle,
  .legacy-mobile-toolbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--legacy-shell-border-soft);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.24);
  }

  .legacy-mobile-toolbar-toggle.is-open {
    background: color-mix(in srgb, var(--cyan) 12%, rgba(255, 255, 255, 0.92));
    border-color: color-mix(in srgb, var(--cyan) 48%, var(--legacy-shell-border-soft) 52%);
    color: var(--cyan);
  }

  .ultron-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.22s ease;
    z-index: var(--legacy-shell-layer-drawer-backdrop);
  }

  .ultron-mobile-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 340px) !important;
    max-width: 340px;
    padding: 16px 14px 18px !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    border-radius: 0 24px 24px 0;
    border-right: 1px solid var(--legacy-shell-border-soft);
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    box-shadow: 0 28px 64px -36px rgba(15, 23, 42, 0.44);
    transform: translateX(-108%);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: var(--legacy-shell-layer-drawer) !important;
  }

  .sidebar-mobile-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--legacy-shell-icon-button-size);
    height: var(--legacy-shell-icon-button-size);
    border: 1px solid var(--legacy-shell-border-soft);
    border-radius: var(--legacy-shell-control-radius-tight);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
    box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.28);
    z-index: 2;
  }

  .sidebar.mobile-open,
  body.ultron-mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-logo {
    margin: 0 44px 6px 0;
    padding: 10px 12px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--cyan) 7%, transparent);
  }

  .sidebar-nav-scroll {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-right: 2px;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .sidebar-nav-scroll .sidebar-logo,
  .sidebar-nav-scroll .sidebar-session-wrap.sidebar-session-top,
  .sidebar-nav-scroll .sidebar-divider,
  .sidebar-nav-scroll .nav-item {
    flex-shrink: 0;
  }

  .sidebar-divider {
    display: block;
    width: 100%;
    margin: 10px 0;
  }

  .sidebar .nav-item {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 16px;
  }

  .sidebar-session-wrap.sidebar-session-top,
  .sidebar-auth-wrap {
    width: 100%;
    flex-shrink: 0;
  }

  .sidebar-session-wrap.sidebar-session-top {
    display: block;
    margin-top: 0;
    padding-top: 0;
  }

  .sidebar-session-wrap.sidebar-session-top .market-status {
    width: 100%;
  }

  .sidebar-auth-wrap {
    margin-top: 0;
    padding-top: 12px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--border-bright) 54%, transparent);
    display: grid;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-surface) 0%, transparent),
        color-mix(in srgb, var(--bg-surface) 96%, transparent) 16%
      );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .sidebar-auth-quick-menu {
    left: 0;
    right: 0;
    bottom: calc(100% + 12px);
    width: 100%;
    max-height: min(52dvh, 420px);
    overflow-y: auto;
  }

  .sidebar-auth-wrap.sidebar-user-menu-open .sidebar-auth-quick-menu {
    max-height: min(52dvh, 420px);
    overflow-y: auto;
  }

  .sidebar-profile-menu-card {
    max-height: min(52dvh, 420px);
  }

  .sidebar-auth-user-pill {
    min-height: 58px;
  }

  .main-content {
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .top-bar.top-bar-redesign {
    top: calc(10px + var(--legacy-shell-mobile-toolbar-height) + var(--legacy-shell-mobile-toolbar-gap)) !important;
    margin-top: 0 !important;
  }

  .legacy-shell-target-page {
    padding-bottom: 24px;
  }

  #page-dashboard .grid-4,
  #page-dashboard .dashboard-main-pair,
  #page-options .grid-2,
  #page-simulations .simv2-top-grid,
  #page-simulations .simv2-bottom-grid,
  #page-history .history-workspace-grid,
  #page-price-history .price-history-v3-layout,
  #page-price-history .price-history-v3-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  #page-dashboard .dashboard-week-summary-card.week-ahead-react-shell .dash-week-reason-list {
    grid-template-columns: 1fr !important;
  }

  #page-dashboard .ticker-content {
    gap: 10px !important;
  }

  :is(#page-dashboard, #page-forecast, #page-options, #page-simulations, #page-history, #page-price-history) .topic-terminal-header {
    padding: 20px !important;
    gap: 14px !important;
  }

  :is(#page-dashboard, #page-forecast, #page-options, #page-simulations, #page-history, #page-price-history) .topic-terminal-header .topic-terminal-header-pill-row {
    gap: 8px;
  }

  :is(#page-dashboard, #page-forecast, #page-options, #page-simulations, #page-history, #page-price-history) .topic-terminal-header .topic-terminal-header-btn {
    min-width: 0;
    min-height: 48px;
    flex: 1 1 100%;
    border-radius: 16px;
  }

  #page-price-history .price-history-v3-floating-action {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
  }
}

@media (max-width: 760px) {
  #page-price-history.legacy-shell-target-page {
    width: min(100%, var(--legacy-shell-page-max)) !important;
    margin-inline: auto !important;
    padding: 0 var(--main-shell-gutter) 20px !important;
    border-radius: 0 !important;
  }

  .legacy-mobile-toolbar {
    margin: 10px var(--main-shell-gutter) 8px;
    padding: 9px 10px;
    border-radius: 18px;
  }

  .legacy-mobile-toolbar-title {
    font-size: 14px;
  }

  .legacy-mobile-toolbar-subtitle {
    display: none;
  }

  .legacy-shell-target-page {
    padding-bottom: 20px;
  }

  #page-price-history .price-history-v3-search-row {
    flex-direction: column;
    align-items: stretch;
  }

  #page-price-history :is(
    .price-history-v3-search-submit,
    .price-history-v3-open-btn,
    .price-history-v3-export-btn,
    .price-history-v3-reset-btn
  ) {
    width: 100%;
  }

  :is(
    #alertsClearPopup,
    #predictionClearPopup,
    #resetPopup,
    #tradeDayPopup,
    #tradeEditorPopup,
    #tradeCompletePopup,
    #systemLogDayPopup,
    #alertsDayPopup,
    #priceLogDayPopup,
    #actionConfirmPopup
  ) .popup-actions .btn {
    width: 100%;
  }
}