html.dark {
--bg: #202123;
--sidebar: #212525;
--surface-1: #202123;
--surface-2: #2A2B2D;
--surface-3: #2F3032;
--border: rgba(255,255,255,0.06);
--text: #F3F4F5;
--text-2: #9A9B9D;
--text-3: #6A6B6D;
--accent: #02B075;
--accent-2: #15B278;
--accent-pressed: #009A68;
--focus: rgba(2,176,117,0.35);
--danger: #E24A3B;
--shadow: rgba(0,0,0,0.00);
}
html.dark body {
background: linear-gradient(180deg, #232427 0%, var(--bg) 18%, var(--bg) 100%);
color: var(--text);
}
html.dark .bg-white {
background-color: var(--surface-1) !important;
border-color: var(--border) !important;
box-shadow: 0 12px 28px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.03);
background-image: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
}
html.dark .sm\:bg-white,
html.dark .md\:bg-white,
html.dark .lg\:bg-white {
background-color: var(--surface-1) !important;
border-color: var(--border) !important;
box-shadow: 0 12px 28px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.03);
background-image: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
}
html.dark .bg-slate-50,
html.dark .bg-slate-100 { background-color: var(--surface-2) !important; }
html.dark .sm\:bg-slate-50,
html.dark .md\:bg-slate-50,
html.dark .lg\:bg-slate-50,
html.dark .sm\:bg-slate-100,
html.dark .md\:bg-slate-100,
html.dark .lg\:bg-slate-100 { background-color: var(--surface-2) !important; }
html.dark .bg-slate-200 { background-color: var(--surface-3) !important; }
html.dark .text-slate-900 { color: var(--text) !important; }
html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-slate-500 { color: var(--text-2) !important; }
html.dark .text-slate-400 { color: var(--text-3) !important; }
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-slate-100 { border-color: var(--border) !important; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
html.dark input,
html.dark select,
html.dark button,
html.dark textarea {
border-color: var(--border);
}
html.dark input,
html.dark select,
html.dark textarea {
background-color: var(--surface-2) !important;
color: var(--text) !important;
}
html.dark ::placeholder { color: var(--text-3) !important; }
html.dark .bg-emerald-50,
html.dark .bg-emerald-100,
html.dark .bg-emerald-100\/60,
html.dark .bg-emerald-100\/50,
html.dark .bg-emerald-300,
html.dark .bg-emerald-400,
html.dark .bg-emerald-500 {
background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 60%, var(--accent-pressed) 100%) !important;
border-color: rgba(255,255,255,0.10) !important;
color: #041d15 !important;
}
html.dark .text-emerald-700,
html.dark .text-emerald-800 { color: #041d15 !important; }
html.dark a.border-emerald-200,
html.dark #themeToggle,
html.dark #themeToggleMobile,
html.dark #overviewTabPredictions.bg-white,
html.dark #overviewTabLatest.bg-white {
background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 60%, var(--accent-pressed) 100%) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: #041d15 !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.00), 0 0 18px rgba(2,176,117,0.28);
}
html.dark a.border-emerald-200:hover,
html.dark #themeToggle:hover,
html.dark #themeToggleMobile:hover,
html.dark #overviewTabPredictions.bg-white:hover,
html.dark #overviewTabLatest.bg-white:hover {
box-shadow: 0 10px 22px rgba(0,0,0,0.00), 0 0 22px rgba(2,176,117,0.35);
}
html.dark a.border-emerald-200:focus-visible,
html.dark #themeToggle:focus-visible,
html.dark #themeToggleMobile:focus-visible,
html.dark #overviewTabPredictions.bg-white:focus-visible,
html.dark #overviewTabLatest.bg-white:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--focus), 0 10px 22px rgba(0,0,0,0.00), 0 0 18px rgba(2,176,117,0.28);
}
html.dark .hover\:bg-slate-50:hover { background-color: var(--surface-3) !important; }
html.dark .hover\:bg-emerald-50:hover { background-color: var(--surface-3) !important; }
html.dark #journeyMilestones .bg-emerald-50 {
background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 60%, var(--accent-pressed) 100%) !important;
border-color: rgba(255,255,255,0.12) !important;
}
html.dark #journeyMilestones .bg-emerald-50 .text-slate-900,
html.dark #journeyMilestones .bg-emerald-50 .text-slate-700,
html.dark #journeyMilestones .bg-emerald-50 .text-slate-600,
html.dark #journeyMilestones .bg-emerald-50 .text-slate-500 { color: #041d15 !important; }
.progress-fill {
box-shadow: 0 0 10px rgba(2,176,117,0.18);
}
html.dark .progress-fill {
box-shadow: 0 0 12px rgba(2,176,117,0.32);
}
html.dark .bg-red-50,
html.dark .text-red-700,
html.dark .border-red-200 { color: var(--danger) !important; border-color: rgba(226,74,59,0.4) !important; background-color: rgba(226,74,59,0.08) !important; }
.stage-pill {
border: 1px solid #86efac;
background-color: #ecfdf5;
color: #166534;
}
html.dark .stage-pill {
border-color: #34d399;
background-color: rgba(16, 185, 129, 0.24);
color: #d1fae5;
}
.journey-open-indicator {
border: 1px solid #cbd5e1;
background-color: #f8fafc;
color: #64748b;
}
html.dark .journey-open-indicator {
border-color: rgba(148, 163, 184, 0.5);
background-color: rgba(148, 163, 184, 0.14);
color: #cbd5e1;
}
.prediction-chip {
border: 1px solid #6ee7b7;
background-color: #ecfdf5;
color: #065f46;
}
.prediction-chip .material-symbols-rounded {
color: #059669;
}
html.dark .prediction-chip {
border-color: #34d399;
background-color: rgba(16, 185, 129, 0.24);
color: #d1fae5;
}
html.dark .prediction-chip .material-symbols-rounded {
color: #6ee7b7;
}
html.dark #loadingOverlay { background-color: var(--bg); }
@media (max-width: 639px) {
html.dark .mobile-neon-bolt {
color: #fff65a !important;
font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
text-shadow:
0 0 4px rgba(255, 239, 82, 0.95),
0 0 10px rgba(255, 233, 58, 0.9),
0 0 18px rgba(255, 212, 0, 0.7),
0 0 28px rgba(255, 196, 0, 0.45);
}
}