/*
 * light-theme.css — SupplementLabs.ai Light Mode Override
 * Blueprint palette: White/light backgrounds, #2196F3 primary blue, category accents
 * Applied globally via nav.js injection (all app pages except admin)
 */

/* ═══════════════════════════════════════════════════════
   1. CSS TOKEN OVERRIDES — Blueprint Light Palette
═══════════════════════════════════════════════════════ */
:root {
  /* Primary accent — Blueprint blue */
  --accent: #2196F3 !important;
  --accent-dim: #1976D2 !important;
  --accent-glow: rgba(33,150,243,0.12) !important;
  --accent-glow-strong: rgba(33,150,243,0.22) !important;
  --accent-glow-faint: rgba(33,150,243,0.06) !important;

  /* Backgrounds — white/light */
  --bg-deep: #ffffff !important;
  --bg-card: #ffffff !important;
  --bg-elevated: #f5f5f5 !important;
  --bg-glass: rgba(255,255,255,0.88) !important;
  --bg-secondary: #fafafa !important;
  --bg-section: #f8f9fa !important;

  /* Borders */
  --border: #e0e0e0 !important;
  --border-light: #eeeeee !important;
  --border-glow: rgba(33,150,243,0.2) !important;

  /* Shadows — light mode subtle */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04) !important;
  --shadow-glow: 0 0 20px rgba(33,150,243,0.10), 0 4px 16px rgba(0,0,0,0.06) !important;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06) !important;

  /* Text — dark on light */
  --text-primary: #1A1A2E !important;
  --text-secondary: #424242 !important;
  --text-muted: #757575 !important;
  --text-label: #9e9e9e !important;

  /* Category accents */
  --cat-weight: #D97706;
  --cat-weight-bg: #FFF8F0;
  --cat-performance: #0369A1;
  --cat-performance-bg: #EFF8FF;
  --cat-sleep: #7C3AED;
  --cat-sleep-bg: #FAF5FF;
  --cat-brain: #0D9488;
  --cat-brain-bg: #F0FFFD;

  /* Semantic */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --disabled: #D1D5DB;

  /* sn- prefixed (nav.js injected vars, overridden here) */
  --sn-accent: #2196F3 !important;
  --sn-accent-glow: rgba(33,150,243,0.12) !important;
  --sn-bg-deep: #ffffff !important;
  --sn-bg-card: #ffffff !important;
  --sn-bg-elevated: #f5f5f5 !important;
  --sn-text-primary: #1A1A2E !important;
  --sn-text-secondary: #424242 !important;
  --sn-text-muted: #9e9e9e !important;
  --sn-border: #e0e0e0 !important;
  --sn-border-light: #eeeeee !important;

  /* ─── Short-form page-specific vars (check-in, guides, my-day, etc.) ─── */
  --bg: #ffffff !important;
  --card: #ffffff !important;
  --raised: #f5f5f5 !important;
  --input: #f5f5f5 !important;
  --bg-input: #f5f5f5 !important;
  --text: #1A1A2E !important;
  --text2: #424242 !important;
  --text3: #757575 !important;
  --text-sec: #424242 !important;
  --border2: #eeeeee !important;
  --border-lt: #eeeeee !important;
  --card-pad: 16px !important;
  --card-r: 12px !important;
  --warn: #F59E0B !important;
  --warn-glow: rgba(245,158,11,0.15) !important;
  --danger: #EF4444 !important;

  /* My Day time-of-day colors (keep accent but override dark variants) */
  --morning: #F59E0B !important;
  --morning-col: #D97706 !important;
  --afternoon: #2196F3 !important;
  --afternoon-col: #0369A1 !important;
  --evening: #7C3AED !important;
  --evening-col: #7C3AED !important;
  --night: #2196F3 !important;

  /* ── my-program.css short-form variable overrides ── */
  --bg-elev: #f5f5f5 !important;
  --text-1: #1A1A2E !important;
  --text-2: #424242 !important;
  --text-3: #757575 !important;
  --border-l: #e0e0e0 !important;
  --amber: #D97706 !important;
  --red: #EF4444 !important;

  /* ── Hub / card variable overrides ── */
  --bg-hover: #f0f4f8 !important;
  --accent-border: rgba(33,150,243,0.25) !important;
  --border-hover: #d0d8e4 !important;
  --radius: 14px !important;
  --radius-sm: 10px !important;

  /* ── Time-of-day gradient overrides (light-safe) ── */
  --morning-bg: linear-gradient(135deg, rgba(255,140,0,0.08), rgba(255,200,0,0.05)) !important;
  --morning-border: rgba(255,160,0,0.25) !important;
  --afternoon-bg: linear-gradient(135deg, rgba(33,150,243,0.08), rgba(100,200,255,0.05)) !important;
  --afternoon-border: rgba(33,150,243,0.25) !important;
  --evening-bg: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(100,80,200,0.05)) !important;
  --evening-border: rgba(124,58,237,0.2) !important;
  --anytime-bg: linear-gradient(135deg, rgba(33,150,243,0.06), rgba(33,150,243,0.04)) !important;
  --anytime-border: rgba(33,150,243,0.15) !important;
}

/* ═══════════════════════════════════════════════════════
   2. BODY & BACKGROUND
═══════════════════════════════════════════════════════ */
body {
  background: #ffffff !important;
  background-image: none !important;
  background-attachment: initial !important;
  color: #1A1A2E !important;
}

/* ═══════════════════════════════════════════════════════
   3. NAVIGATION — Light glass bar
═══════════════════════════════════════════════════════ */
nav,
.chat-nav,
#slab-nav,
[id="slab-nav"],
[class*="nav-bar"],
[class*="top-bar"] {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border-bottom: 1px solid #e0e0e0 !important;
  box-shadow: 0 1px 0 #eeeeee, 0 2px 12px rgba(0,0,0,0.05) !important;
}

/* Sidebar (both nav.js #slab-sidebar and app-nav.js #sn-sidebar) */
#slab-sidebar,
#sn-sidebar {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid #e0e0e0 !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.04) !important;
}

/* Nav icons and text (both nav.js and app-nav.js) */
#slab-sidebar .sn-nav-icon,
#slab-sidebar .sn-nav-label,
#slab-sidebar .sn-logo-text,
#sn-sidebar .sn-nav-label,
#sn-sidebar .sn-logo-text,
#sn-sidebar-logo .sn-logo-text {
  color: #424242 !important;
  fill: #424242 !important;
}

/* app-nav.js specific nav items */
.sn-nav-item {
  color: #757575 !important;
  border-left-color: transparent !important;
}
.sn-nav-item:hover {
  background: rgba(33,150,243,0.04) !important;
  color: #2196F3 !important;
}
.sn-nav-item.active {
  color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
  border-left-color: #2196F3 !important;
}
.sn-nav-item .sn-nav-label { color: inherit !important; }

/* app-nav.js bottom items */
.sn-bottom-item {
  color: #757575 !important;
}
.sn-bottom-item:hover { color: #2196F3 !important; }
.sn-bottom-item.active { color: #2196F3 !important; }

/* Drawer items (app-nav.js) */
.sn-drawer-item { color: #424242 !important; }
.sn-drawer-item:hover { color: #2196F3 !important; background: rgba(33,150,243,0.04) !important; }

/* app-nav.js logo icon — update stroke to blue */
#sn-sidebar-logo .sn-logo-icon svg circle,
#sn-sidebar-logo .sn-logo-icon svg path {
  stroke: #2196F3 !important;
}
#sn-sidebar-logo .sn-logo-icon svg circle[fill="#00e5a0"] {
  fill: #2196F3 !important;
}
#sn-sidebar-logo .sn-logo-text span { color: #2196F3 !important; }

/* Mobile bottom nav bar (app-nav.js) */
#sn-bottom-nav,
#sn-mobile-nav {
  background: rgba(255,255,255,0.95) !important;
  border-top: 1px solid #e0e0e0 !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.05) !important;
}
.sn-bottom-item { color: #757575 !important; }
.sn-bottom-item:active { background: rgba(33,150,243,0.04) !important; }
.sn-bottom-item.active { color: #2196F3 !important; }
.sn-bottom-item.locked { color: #9e9e9e !important; opacity: 0.65 !important; }
.sn-mobile-item { color: #757575 !important; }
.sn-mobile-item.active { color: #2196F3 !important; }

/* Sidebar sub-elements */
#sn-sidebar-logo {
  border-bottom: 1px solid #e0e0e0 !important;
}
#sn-sidebar-logo .sn-logo-text {
  color: #1A1A2E !important;
}
#sn-sidebar-profile {
  border-top: 1px solid #e0e0e0 !important;
}
.sn-profile-name { color: #1A1A2E !important; }
.sn-nav-divider { background: #e0e0e0 !important; }
#sn-sidebar-nav::-webkit-scrollbar-thumb { background: #d0d0d0 !important; }

/* Drawer overlay + drawer (app-nav.js) */
#sn-drawer {
  background: #ffffff !important;
  color: #1A1A2E !important;
  border-top: 1px solid #e0e0e0 !important;
}
#sn-drawer-overlay { background: rgba(0,0,0,0.3) !important; }
#sn-drawer-handle { background: #d0d0d0 !important; }
#sn-drawer-header { border-bottom: 1px solid #e0e0e0 !important; }
#sn-drawer-close-btn {
  background: rgba(0,0,0,0.04) !important;
  color: #757575 !important;
}
#sn-drawer-close-btn:hover {
  background: rgba(0,0,0,0.08) !important;
  color: #1A1A2E !important;
}
.sn-drawer-divider { background: #e0e0e0 !important; }
.sn-drawer-item.active { color: #2196F3 !important; background: rgba(33,150,243,0.06) !important; }
.sn-drawer-item.locked { color: #9e9e9e !important; opacity: 0.65 !important; }
.sn-drawer-locked-badge {
  background: rgba(0,0,0,0.04) !important;
  color: #9e9e9e !important;
}

/* Upgrade modal (app-nav.js) */
#sn-upgrade-overlay {
  background: rgba(0,0,0,0.4) !important;
}
#sn-upgrade-modal {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
#sn-upgrade-modal .sn-modal-icon {
  background: rgba(33,150,243,0.08) !important;
  border-color: rgba(33,150,243,0.2) !important;
  color: #2196F3 !important;
}
#sn-upgrade-modal h3 { color: #1A1A2E !important; }
#sn-upgrade-modal p { color: #757575 !important; }
#sn-upgrade-modal .sn-upgrade-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
}
#sn-upgrade-modal .sn-upgrade-btn:hover { background: #1976D2 !important; }
#sn-upgrade-modal .sn-compare-link { color: #2196F3 !important; }
#sn-upgrade-modal .sn-modal-close {
  background: rgba(0,0,0,0.04) !important;
  color: #757575 !important;
  border-color: #e0e0e0 !important;
}

/* app-nav auth modal button */
#sn-auth-modal .sn-auth-submit,
.sn-auth-submit {
  background: #2196F3 !important;
  color: #ffffff !important;
}

/* Active nav item */
#slab-sidebar .sn-nav-item.active .sn-nav-icon,
#slab-sidebar .sn-nav-item.active .sn-nav-label,
#slab-sidebar .sn-bottom-item.active,
.sn-drawer-item.active {
  color: #2196F3 !important;
  fill: #2196F3 !important;
}

.sn-drawer-item.active {
  background: rgba(33,150,243,0.06) !important;
  border-left-color: #2196F3 !important;
}

/* Drawer / mobile sheet */
#slab-drawer,
.sn-drawer,
[id*="drawer"] {
  background: #ffffff !important;
  border-left: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}

/* Auth modal */
#sn-auth-modal {
  background: #ffffff !important;
  color: #1A1A2E !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
#sn-auth-modal .sn-auth-tab.active {
  color: #2196F3 !important;
  border-bottom-color: #2196F3 !important;
}
#sn-auth-modal .sn-auth-input {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}
#sn-auth-modal .sn-auth-input:focus {
  border-color: #2196F3 !important;
  background: #ffffff !important;
}
#sn-auth-modal .sn-auth-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
  border: none !important;
}
#sn-auth-modal .sn-auth-btn:hover {
  background: #1976D2 !important;
}
#sn-auth-modal .sn-auth-msg { color: #2196F3 !important; }

/* Change-password modal (nav.js — injected with inline styles) */
#sn-change-pw-modal {
  background: rgba(0,0,0,0.4) !important;
}
#sn-change-pw-modal > div {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}
#sn-change-pw-modal h3 { color: #1A1A2E !important; }
#sn-change-pw-modal label { color: #757575 !important; }
#sn-change-pw-modal input[type="password"] {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}
#sn-change-pw-modal input[type="password"]:focus {
  border-color: #2196F3 !important;
  background: #ffffff !important;
}
#sn-change-pw-modal #sn-cp-save {
  background: #2196F3 !important;
  color: #ffffff !important;
}
#sn-change-pw-modal #sn-cp-cancel {
  background: transparent !important;
  color: #757575 !important;
  border: 1px solid #e0e0e0 !important;
}

/* Notification dot — use accent color on light theme */
.sn-notif-dot,
.sn-drawer-notif-dot,
.sn-more-bell-dot {
  background: #2196F3 !important;
  border-color: #ffffff !important;
}

/* Notification panel — light theme overrides */
#sn-notif-overlay {
  background: rgba(0,0,0,0.25) !important;
}
#sn-notif-panel {
  background: #ffffff !important;
  border-left: 1px solid #e0e0e0 !important;
  box-shadow: -4px 0 24px rgba(0,0,0,0.08) !important;
}
.sn-notif-header {
  border-bottom: 1px solid #e0e0e0 !important;
}
.sn-notif-header h3 {
  color: #1A1A2E !important;
}
.sn-notif-mark-all {
  color: #2196F3 !important;
}
.sn-notif-mark-all:hover {
  background: rgba(33,150,243,0.08) !important;
}
.sn-notif-close {
  background: #f0f0f5 !important;
  color: #666 !important;
}
.sn-notif-close:hover {
  background: #e0e0e0 !important;
  color: #1A1A2E !important;
}
.sn-notif-item:hover {
  background: #f5f5f8 !important;
}
.sn-notif-item.unread {
  border-left-color: #2196F3 !important;
  background: rgba(33,150,243,0.04) !important;
}
.sn-notif-item-title {
  color: #333 !important;
}
.sn-notif-item.unread .sn-notif-item-title {
  color: #1A1A2E !important;
}
.sn-notif-item-msg {
  color: #666 !important;
}
.sn-notif-item-time {
  color: #999 !important;
}
.sn-notif-empty {
  color: #999 !important;
}
.sn-notif-settings-link {
  border-top: 1px solid #e0e0e0 !important;
  color: #666 !important;
}
.sn-notif-settings-link:hover {
  color: #2196F3 !important;
}
.sn-notif-loading {
  color: #999 !important;
}

/* Nav overlay (mobile) */
#slab-overlay,
[id*="overlay"]:not([id*="admin"]) {
  background: rgba(0,0,0,0.3) !important;
}

/* Logo: force dark logo variant on light bg */
.sn-sidebar-logo img,
.sn-logo img,
[class*="logo"] img {
  filter: none !important;
}

/* Scrollbar — light */
::-webkit-scrollbar-track { background: #f5f5f5 !important; }
::-webkit-scrollbar-thumb { background: #d0d0d0 !important; }
::-webkit-scrollbar-thumb:hover { background: #2196F3 !important; }

/* ═══════════════════════════════════════════════════════
   4. CARDS & CONTAINERS
═══════════════════════════════════════════════════════ */
.card,
[class*="card"]:not(.option-card):not(.plan-card-action):not([class*="admin"]):not(.cat-card):not(.pricing-card):not(.pricing-card-featured):not(.testimonial-card):not(.roadmap-card):not(.problem-card):not(.hub-card):not([class*="hub-card-"]):not(.hub-badge):not([class*="hub-"]),
[class*="-card"]:not([class*="score-card-locked"]):not([class*="blur-card"]):not([class*="admin"]):not(.cat-card):not(.pricing-card):not(.pricing-card-featured):not(.testimonial-card):not(.roadmap-card):not(.problem-card):not(.hub-card):not([class*="hub-card-"]) {
  background: #ffffff !important;
  border: 1px solid #eeeeee !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.04) !important;
  color: #1A1A2E !important;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s cubic-bezier(0.4,0,0.2,1), border-color 0.2s ease !important;
}

.card:hover,
[class*="card"]:hover:not([class*="admin"]):not(.cat-card):not(.pricing-card):not(.pricing-card-featured):not(.testimonial-card):not(.roadmap-card):not(.problem-card):not(.hub-card):not([class*="hub-card-"]):not(.hub-badge):not([class*="hub-"]) {
  border-color: rgba(33,150,243,0.25) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.08),
    0 0 0 1px rgba(33,150,243,0.08),
    0 2px 8px rgba(33,150,243,0.04) !important;
  transform: translateY(-2px) !important;
}

/* Section backgrounds */
main, .dash-main, .plan-main, .ci-main, .stacks-main,
.guides-wrap, .wizard-wrap, .onb-main, .page-wrap,
.guides-page, .billing-wrap, [class*="-wrap"], [class*="-main"],
[class*="-page"], .container, .content-area, .inner-wrap {
  background: transparent !important;
  color: #1A1A2E !important;
}

/* Section dividers / alt backgrounds */
section, .section, [class*="-section"] {
  color: #1A1A2E !important;
}
section:nth-child(even), [class*="alt-section"], [class*="gray-section"],
.section-alt, .bg-light, .bg-gray {
  background: #f8f9fa !important;
}

/* Stats / metric displays */
.stat-value, .score-value, .metric-value, .big-number, [class*="stat-num"] {
  color: #2196F3 !important;
}
.stat-label, .score-label, .metric-label, [class*="stat-label"] {
  color: #757575 !important;
}

/* Badges / tags */
.badge, [class*="badge"], .tag, [class*="tag"],
.tier-badge, [class*="tier"] {
  background: rgba(33,150,243,0.08) !important;
  color: #2196F3 !important;
  border: 1px solid rgba(33,150,243,0.2) !important;
}
.badge-success, [class*="badge-success"], [class*="badge-green"] {
  background: rgba(16,185,129,0.08) !important;
  color: #059669 !important;
  border-color: rgba(16,185,129,0.2) !important;
}
.badge-warning, [class*="badge-warn"] {
  background: rgba(245,158,11,0.08) !important;
  color: #D97706 !important;
  border-color: rgba(245,158,11,0.2) !important;
}

/* ═══════════════════════════════════════════════════════
   5. TYPOGRAPHY
═══════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 { color: #1A1A2E !important; }
p, li, span, label, td, th { color: #424242; }
a { color: #2196F3 !important; }
a:hover { color: #1976D2 !important; }
.text-muted, [class*="muted"], .hint, .caption, small { color: #9e9e9e !important; }
.text-accent, [class*="text-accent"] { color: #2196F3 !important; }

/* Page titles */
.page-title, h1 { font-size: 24px; font-weight: 700; margin-bottom: 32px; }
.section-title, h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════
   6. FORMS & INPUTS
═══════════════════════════════════════════════════════ */
input, textarea, select,
[class*="input"], [class*="select"], [class*="textarea"],
.form-control {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
  border-radius: 8px !important;
}
input:focus, textarea:focus, select:focus,
[class*="input"]:focus, .form-control:focus {
  border-color: #2196F3 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.1) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: #9e9e9e !important; }
label, .form-label { color: #424242 !important; font-weight: 500; }

/* ── HIGH-SPECIFICITY input overrides (beats premium.css 0-1-1 selectors) ── */
body input[type="text"],
body input[type="email"],
body input[type="number"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body input[type="url"],
body select,
body textarea,
body textarea:not(.chat-input):not(#chat-input) {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
  color: #1A1A2E !important;
}
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="number"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body select:focus,
body textarea:focus {
  border-color: #2196F3 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.1) !important;
  outline: none !important;
}
body .input-wrapper {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
}
body .input-wrapper:focus-within {
  border-color: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.08) !important;
}

/* Checkboxes — custom style */
input[type="checkbox"] { accent-color: #2196F3; }
input[type="radio"] { accent-color: #2196F3; }

/* ═══════════════════════════════════════════════════════
   7. BUTTONS
═══════════════════════════════════════════════════════ */
/* Primary button */
.btn, .btn-primary, [class*="btn-primary"], button[class*="primary"],
.cta-btn, [class*="-cta-btn"], [class*="submit-btn"], [class*="action-btn"] {
  background: #2196F3 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
  min-height: 44px !important;
  cursor: pointer !important;
}
.btn:hover, .btn-primary:hover, [class*="btn-primary"]:hover, [class*="-cta-btn"]:hover {
  background: #1976D2 !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.005) !important;
  box-shadow: 0 4px 12px rgba(33,150,243,0.3) !important;
}
.btn:active, .btn-primary:active { transform: scale(0.98) !important; }

/* Secondary / outline button */
.btn-secondary, [class*="btn-secondary"], .btn-outline, [class*="btn-outline"],
.btn-ghost, [class*="btn-ghost"] {
  background: transparent !important;
  color: #2196F3 !important;
  border: 1.5px solid #2196F3 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.btn-secondary:hover, [class*="btn-secondary"]:hover {
  background: rgba(33,150,243,0.06) !important;
}

/* Danger button */
.btn-danger, [class*="btn-danger"] {
  background: #EF4444 !important;
  color: #ffffff !important;
}

/* ── FIX: All accent-bg buttons must have white text in light mode ──
   --accent is overridden to #2196F3 (blue) in light-theme, so ANY button
   that uses background:var(--accent) with dark text (color:#0a0a0f) becomes
   blue-on-dark = unreadable. Force white text on all known accent buttons. */
.btn-buy,
.program-enroll-btn,
.mp-card-btn,
.mp-empty-cta,
.mp-modal-cta,
.mp-enroll-dialog-cta,
.mp-analyze-btn,
.mp-add-all-btn,
.mp-pc-accept-btn,
.mp-create-ai-btn,
.nav-btn.accent,
.mp-filter-chip.active,
.detail-enroll-btn,
.stack-action-btn {
  color: #ffffff !important;
}
/* Keep outline/read variants with accent text, not white */
.btn-buy.btn-read,
.btn-buy.btn-upgrade,
.mp-card-btn.outline,
.mp-card-btn.upgrade,
.program-enroll-btn.outline,
.program-enroll-btn.locked {
  color: #2196F3 !important;
  background: transparent !important;
}
.btn-buy.btn-free {
  background: #f59e0b !important;
  color: #ffffff !important;
}

/* ── FIX: Clean card borders on Programs & Hub pages ──
   Remove the green-tinted cell borders for a clean card look
   matching the premium My Day styling. */
.program-card,
.supplement-item {
  border-color: rgba(0,0,0,0.07) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04) !important;
}
.program-card:hover,
.supplement-item:hover {
  border-color: rgba(33,150,243,0.3) !important;
  box-shadow: 0 8px 28px rgba(33,150,243,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
}
.program-card.enrolled {
  border-color: rgba(33,150,243,0.25) !important;
  background: linear-gradient(145deg, rgba(33,150,243,0.04), #ffffff) !important;
}
.hub-card {
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
}
.hub-card:hover {
  border: none !important;
  box-shadow: 0 8px 28px rgba(33,150,243,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* ═══════════════════════════════════════════════════════
   8. LISTS, TABLES, DIVIDERS
═══════════════════════════════════════════════════════ */
table { color: #1A1A2E !important; }
th { background: #f5f5f5 !important; color: #424242 !important; border-bottom: 1px solid #e0e0e0 !important; }
td { border-bottom: 1px solid #f0f0f0 !important; color: #424242 !important; }
tr:hover td { background: rgba(33,150,243,0.03) !important; }
hr, .divider, [class*="divider"] { border-color: #e0e0e0 !important; }

/* Dropdowns */
.dropdown, [class*="dropdown-menu"], [class*="popover"],
[class*="tooltip-content"] {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  color: #1A1A2E !important;
}

/* Modals */
.modal, [class*="modal-content"], [class*="-modal"] {
  background: #ffffff !important;
  color: #1A1A2E !important;
  border: 1px solid #e0e0e0 !important;
}
.modal-header, [class*="modal-header"] {
  border-bottom: 1px solid #eeeeee !important;
  color: #1A1A2E !important;
}
.modal-overlay, [class*="modal-bg"], [class*="modal-backdrop"] {
  background: rgba(0,0,0,0.35) !important;
}

/* Toasts */
.toast, [class*="toast"] {
  background: #ffffff !important;
  color: #1A1A2E !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

/* ═══════════════════════════════════════════════════════
   9. MICRO-INTERACTIONS & ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes sl-checkmark-bounce {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(5deg); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes sl-strikethrough {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes sl-badge-flip {
  0%   { transform: perspective(400px) rotateY(90deg); opacity: 0; }
  40%  { transform: perspective(400px) rotateY(-15deg); opacity: 1; }
  70%  { transform: perspective(400px) rotateY(10deg); }
  100% { transform: perspective(400px) rotateY(0deg); }
}
@keyframes sl-badge-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes sl-streak-grow {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2) rotate(-3deg); }
  100% { transform: scale(1.05); }
}
@keyframes sl-streak-flicker {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  25%       { opacity: 0.7; transform: scaleY(0.92); }
  50%       { opacity: 0.85; transform: scaleY(1.08); }
  75%       { opacity: 0.75; transform: scaleY(0.95); }
}
@keyframes sl-counter-tick {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-4px); opacity: 0.5; }
  26%  { transform: translateY(4px); opacity: 0; }
  60%  { transform: translateY(0); opacity: 1; }
}
@keyframes sl-pulse-first {
  0%, 100% { box-shadow: 0 0 0 0 rgba(33,150,243,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(33,150,243,0); }
}
@keyframes sl-slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sl-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sl-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes sl-flame-flicker {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); filter: brightness(1); }
  20%       { transform: scaleX(0.96) scaleY(1.04) rotate(-2deg); filter: brightness(1.1); }
  40%       { transform: scaleX(1.04) scaleY(0.96) rotate(2deg); filter: brightness(0.95); }
  60%       { transform: scaleX(0.98) scaleY(1.02) rotate(-1deg); filter: brightness(1.05); }
}
@keyframes sl-rating-fill {
  from { width: 0; }
  to   { width: var(--rating-pct, 80%); }
}

/* Check-in: supplement checked state */
.sl-supplement-item.sl-checked .sl-supplement-label {
  text-decoration: line-through;
  color: #9e9e9e !important;
}
.sl-supplement-item.sl-checked .sl-check-icon {
  color: #10B981 !important;
  animation: sl-checkmark-bounce 0.4s cubic-bezier(0.4,0,0.2,1) both;
}

/* Streak flame icons */
.sl-streak-flame, [class*="streak-icon"], [class*="flame-icon"],
.streak-emoji { animation: sl-flame-flicker 1.5s ease-in-out infinite; }
.sl-streak-flame.sl-streak-large { font-size: 1.6em !important; }
.sl-streak-flame.sl-streak-huge  { font-size: 2em !important; }
.sl-streak-flame.sl-streak-blue  { filter: hue-rotate(140deg) !important; }

/* Streak counter tick */
[class*="streak-count"].sl-animating,
[class*="streak-num"].sl-animating {
  animation: sl-counter-tick 0.4s ease-in-out;
}

/* Badge flip on earn */
.sl-badge-earned { animation: sl-badge-flip 0.6s cubic-bezier(0.4,0,0.2,1) both; }
.sl-badge-shine {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  background-size: 200% auto;
  animation: sl-badge-shine 1.5s linear 0.6s both;
}

/* "Start Program" first-visit pulse */
.sl-pulse-cta { animation: sl-pulse-first 2s ease-in-out 3; }

/* Active nav indicator slide-in */
[class*="nav-item"].active::before,
.sn-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 60%;
  transform: translateY(-50%);
  background: #2196F3;
  border-radius: 0 3px 3px 0;
  animation: sl-slide-in 0.2s ease-out both;
}

/* Rating color gradients (check-in) */
.sl-rating-1 { color: #EF4444 !important; }
.sl-rating-2 { color: #F97316 !important; }
.sl-rating-3 { color: #F59E0B !important; }
.sl-rating-4 { color: #84CC16 !important; }
.sl-rating-5 { color: #10B981 !important; }

/* Page transitions */
main, .dash-main, .plan-main, .ci-main, .stacks-main,
.guides-wrap, .wizard-wrap, .onb-main, .page-wrap,
.guides-page, .billing-wrap {
  animation: sl-fade-up 0.35s cubic-bezier(0.4,0,0.2,1) both !important;
}

/* ═══════════════════════════════════════════════════════
   10. SKELETON LOADING STATES (replaces spinners)
═══════════════════════════════════════════════════════ */
.sl-skeleton, [class*="skeleton"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%) !important;
  background-size: 400px 100% !important;
  animation: sl-skeleton-shimmer 1.4s ease-in-out infinite !important;
  border-radius: 8px !important;
  color: transparent !important;
  pointer-events: none !important;
}
.sl-skeleton-text { height: 16px; margin-bottom: 8px; width: 80%; }
.sl-skeleton-title { height: 24px; margin-bottom: 12px; width: 50%; }
.sl-skeleton-card { height: 120px; border-radius: 12px; }

/* ═══════════════════════════════════════════════════════
   11. EMPTY STATES
═══════════════════════════════════════════════════════ */
.sl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 16px;
  color: #757575 !important;
}
.sl-empty-icon {
  font-size: 3rem;
  opacity: 0.5;
  margin-bottom: 8px;
}
.sl-empty-headline {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A2E !important;
  margin: 0;
}
.sl-empty-subtext {
  font-size: 14px;
  color: #757575 !important;
  max-width: 280px;
  line-height: 1.5;
  margin: 0;
}
.sl-empty-cta {
  margin-top: 8px;
  background: #2196F3 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-height: 44px !important;
  animation: sl-pulse-first 2s ease-in-out 2;
}
.sl-empty-cta:hover { background: #1976D2 !important; transform: translateY(-1px) !important; }

/* Progress dots for empty analytics */
.sl-progress-dots {
  display: flex; gap: 8px; align-items: center; margin-top: 8px;
}
.sl-progress-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: #e0e0e0; border: 2px solid #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #9e9e9e;
  transition: all 0.3s ease;
}
.sl-progress-dot.filled { background: #2196F3; border-color: #2196F3; color: #fff; }
.sl-progress-dot.active { background: #fff; border-color: #2196F3; color: #2196F3; }

/* Milestones locked/greyed */
.sl-milestone-locked {
  opacity: 0.45 !important;
  filter: grayscale(0.7) !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════
   12. PROGRESSIVE DISCLOSURE — Tier Gating (no lock icons)
═══════════════════════════════════════════════════════ */
/* Frosted glass locked section */
.sl-locked-section {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.sl-locked-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  background: rgba(255,255,255,0.7) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  border-radius: 12px;
}
.sl-locked-label {
  font-size: 14px;
  font-weight: 600;
  color: #424242 !important;
  text-align: center;
}
.sl-locked-plan {
  font-size: 12px;
  color: #757575 !important;
  text-align: center;
}
.sl-locked-upgrade-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  min-height: 44px !important;
}
.sl-locked-upgrade-btn:hover { background: #1976D2 !important; }

/* Upgrade modal — before/after preview */
.sl-upgrade-modal {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 32px !important;
  max-width: 400px !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
.sl-upgrade-preview-blur {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  opacity: 0.6;
}
.sl-upgrade-headline {
  font-size: 20px;
  font-weight: 700;
  color: #1A1A2E !important;
  margin-bottom: 8px;
}
.sl-upgrade-subtext {
  font-size: 14px;
  color: #757575 !important;
  margin-bottom: 20px;
  line-height: 1.5;
}
.sl-upgrade-earned-prompt {
  background: rgba(33,150,243,0.06) !important;
  border: 1px solid rgba(33,150,243,0.15) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px;
  color: #1A1A2E !important;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════
   13. RESPONSIVE & MOBILE FIRST
═══════════════════════════════════════════════════════ */
/* Touch targets — minimum 44px */
button, a, input[type="submit"], input[type="button"],
[role="button"], .clickable, [class*="-btn"],
nav a, .nav-item, .sn-nav-item {
  min-height: 44px !important;
}

/* Safe area insets for notch phones */
body, #slab-sidebar {
  padding-top: env(safe-area-inset-top);
}
.sl-bottom-sticky, [class*="bottom-cta"], [class*="sticky-footer"] {
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

/* Bottom sheet modals on mobile */
@media (max-width: 768px) {
  .modal, [class*="modal-content"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    max-width: 100% !important;
    transform: none !important;
    animation: sl-sheet-up 0.28s cubic-bezier(0.4,0,0.2,1) both;
  }
  @keyframes sl-sheet-up {
    from { transform: translateY(100%); opacity: 0.8; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /* Sticky CTA at bottom on mobile */
  .sl-mobile-sticky-cta {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid #eeeeee !important;
    z-index: 900 !important;
  }
  .sl-mobile-sticky-cta .btn, .sl-mobile-sticky-cta button {
    width: 100% !important;
  }
}

/* Pull-to-refresh indicator area */
.sl-ptr-zone { min-height: 4px; background: transparent; }

/* ═══════════════════════════════════════════════════════
   14. ASK COACH PRICING ROW STYLING
═══════════════════════════════════════════════════════ */
.sl-ask-coach-row,
tr.ask-coach-row,
tr.ask-coach-highlight-row {
  background: rgba(33,150,243,0.04) !important;
}
.sl-ask-coach-row td:first-child,
tr.ask-coach-row td:first-child,
tr.ask-coach-highlight-row td:first-child {
  font-weight: 600 !important;
  color: #2196F3 !important;
  border-left: 3px solid #2196F3;
  padding-left: 8px !important;
}
.sl-ask-coach-limit {
  font-size: 13px;
  font-weight: 600;
  color: #2196F3;
}
.sl-ask-coach-unlimited {
  font-size: 13px;
  font-weight: 700;
  color: #10B981;
}

/* ═══════════════════════════════════════════════════════
   15. MISC OVERRIDES — common dark remnants
═══════════════════════════════════════════════════════ */
/* Dark inline colors often set via JS */
[style*="background: rgb(10, 10, 15)"],
[style*="background: #0a0a0f"],
[style*="background:#0a0a0f"],
[style*="background-color: #0a0a0f"],
[style*="background-color:#0a0a0f"] {
  background: #ffffff !important;
  color: #1A1A2E !important;
}
[style*="background: #111118"],
[style*="background:#111118"],
[style*="background-color: #111118"],
[style*="background-color:#111118"],
[style*="background: #0d0d16"],
[style*="background:#0d0d16"],
[style*="background: #13131e"],
[style*="background:#13131e"] {
  background: #ffffff !important;
  color: #1A1A2E !important;
}
[style*="background: #222233"],
[style*="background:#222233"] {
  background: #f5f5f5 !important;
  color: #424242 !important;
}
[style*="color: rgb(240, 240, 245)"],
[style*="color:#f0f0f5"],
[style*="color: #f0f0f5"] {
  color: #1A1A2E !important;
}
[style*="background: rgba(10,10,15"],
[style*="background:rgba(10,10,15"] {
  background: rgba(255,255,255,0.95) !important;
}

/* Tier colors — adapt for light mode */
.sn-tier-free    { background: rgba(158,158,158,0.1) !important; color: #757575 !important; }
.sn-tier-basic   { background: rgba(33,150,243,0.1) !important; color: #2196F3 !important; }
.sn-tier-coach   { background: rgba(124,58,237,0.1) !important; color: #7C3AED !important; }
.sn-tier-premium { background: rgba(16,185,129,0.1) !important; color: #059669 !important; }
.sn-tier-executive_coach { background: rgba(33,150,243,0.1) !important; color: #2196F3 !important; }

/* Progress bars */
[class*="progress-bar"], [class*="progress-fill"] {
  background: #2196F3 !important;
}
[class*="progress-track"], [class*="progress-bg"] {
  background: #f0f0f0 !important;
}

/* Check-in page specific */
.ci-main, .checkin-wrap, [class*="check-in"] {
  background: #f8f9fa !important;
}

/* Leaderboard */
[class*="leaderboard-row"]:nth-child(1) { background: rgba(245,158,11,0.05) !important; }
[class*="leaderboard-row"]:nth-child(2) { background: rgba(156,163,175,0.05) !important; }
[class*="leaderboard-row"]:nth-child(3) { background: rgba(217,119,6,0.05) !important; }

/* Analytics charts */
[class*="chart-wrap"], [class*="chart-container"] {
  background: #ffffff !important;
  border: 1px solid #eeeeee !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* SEO: ensure visible for crawlers */
noscript, .sr-only { color: #1A1A2E !important; }

/* ═══════════════════════════════════════════════════════
   16. PAGE-SPECIFIC OVERRIDES — Fix dark remnants
═══════════════════════════════════════════════════════ */

/* ─── Check-in pages (check-in.html + checkin.html) ─── */
.streak-card,
.form-card,
.ci-section {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}

.supp-item,
.sup-row {
  background: #f8f9fa !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}
.supp-item:hover,
.sup-row:hover {
  border-color: #d0d0d0 !important;
}
.supp-item.taken,
.sup-row.taken-row {
  border-color: rgba(16,185,129,0.35) !important;
  background: rgba(16,185,129,0.06) !important;
}
.supp-name,
.sup-name {
  color: #1A1A2E !important;
}
.supp-item.taken .supp-name,
.sup-row.taken-row .sup-name {
  color: #9e9e9e !important;
}
.supp-dosage,
.sup-meta {
  color: #757575 !important;
}
.supp-check {
  border-color: #d0d0d0 !important;
}
.supp-item.taken .supp-check,
.sup-toggle.active {
  background: #2196F3 !important;
  border-color: #2196F3 !important;
}

/* Rating buttons */
.rating-btn {
  background: #f8f9fa !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}
.rating-btn:hover {
  background: #f0f0f0 !important;
  border-color: #d0d0d0 !important;
}
.rating-label {
  color: #757575 !important;
}
/* Keep color-coded selected states */
.rating-btn.selected {
  background: rgba(33,150,243,0.08) !important;
  border-color: #2196F3 !important;
}
.rating-btn[data-val="1"].selected { border-color: #EF4444 !important; background: rgba(239,68,68,0.08) !important; }
.rating-btn[data-val="1"].selected .rating-label { color: #EF4444 !important; }
.rating-btn[data-val="2"].selected { border-color: #F59E0B !important; background: rgba(245,158,11,0.08) !important; }
.rating-btn[data-val="2"].selected .rating-label { color: #F59E0B !important; }
.rating-btn[data-val="3"].selected { border-color: #F59E0B !important; background: rgba(245,158,11,0.08) !important; }
.rating-btn[data-val="3"].selected .rating-label { color: #F59E0B !important; }
.rating-btn[data-val="4"].selected { border-color: #10B981 !important; background: rgba(16,185,129,0.08) !important; }
.rating-btn[data-val="4"].selected .rating-label { color: #10B981 !important; }
.rating-btn[data-val="5"].selected { border-color: #2196F3 !important; background: rgba(33,150,243,0.08) !important; }
.rating-btn[data-val="5"].selected .rating-label { color: #2196F3 !important; }

/* Streak */
.streak-count {
  color: #2196F3 !important;
}
.streak-dot {
  background: #e0e0e0 !important;
}
.streak-dot.done {
  background: #2196F3 !important;
}

/* Notes */
.notes-input {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}
.notes-input:focus {
  border-color: #2196F3 !important;
  background: #ffffff !important;
}

/* Save button */
.save-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
}
.save-btn:hover {
  background: #1976D2 !important;
}
.save-btn:disabled {
  background: #e0e0e0 !important;
  color: #9e9e9e !important;
}

/* Completion overlay */
.done-overlay {
  background: rgba(255,255,255,0.97) !important;
  color: #1A1A2E !important;
}
.done-overlay .done-title,
.done-overlay .done-msg {
  color: #1A1A2E !important;
}

/* ─── Guides page (guides.html) ─── */
.guide-card {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}
.guide-card:hover {
  border-color: #d0d0d0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}
.guide-card.is-free-promo {
  border-color: rgba(245,158,11,0.4) !important;
  background: linear-gradient(160deg, rgba(245,158,11,0.06), #ffffff 60%) !important;
}
.guide-card.is-owned {
  border-color: rgba(33,150,243,0.4) !important;
}
.guide-card.is-free-access {
  border-color: rgba(33,150,243,0.3) !important;
  background: linear-gradient(160deg, rgba(33,150,243,0.04), #ffffff 60%) !important;
}
.guide-card.is-tier-locked {
  border-color: rgba(124,58,237,0.25) !important;
}
.card-thumb {
  background: #f0f0f0 !important;
}
.card-thumb-placeholder {
  background: transparent !important;
}
.hero-badge {
  background: rgba(33,150,243,0.08) !important;
  border-color: rgba(33,150,243,0.25) !important;
  color: #2196F3 !important;
}
.promo-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.03)) !important;
  border-color: rgba(245,158,11,0.3) !important;
}
.promo-text h3 {
  color: #D97706 !important;
}

/* Guides search */
[class*="search-bar"],
.search-input,
.search-wrap input {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}

/* Guide category filters */
.cat-pill,
.filter-btn,
[class*="filter-pill"] {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.cat-pill.active,
.filter-btn.active,
[class*="filter-pill"].active {
  background: #2196F3 !important;
  border-color: #2196F3 !important;
  color: #ffffff !important;
}

/* ─── Badge / milestone cards (community, profile, my-day) ─── */
.badge-card,
.sn-badge-card,
[class*="badge-card"] {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.badge-card:hover,
.sn-badge-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}
.badge-card.earned,
.sn-badge-card.earned {
  border-color: rgba(33,150,243,0.4) !important;
  background: linear-gradient(135deg, #ffffff 0%, rgba(33,150,243,0.04) 100%) !important;
}
.badge-card.locked {
  opacity: 0.5 !important;
}
.badge-label {
  color: #1A1A2E !important;
}
.badge-desc {
  color: #757575 !important;
}

/* ─── My Day page supplements ─── */
.sup-card,
.supplement-card,
.md-supp-card,
[class*="supp-card"],
[class*="supplement-row"] {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}

/* My Day section cards */
.md-card,
.md-section,
[class*="md-card"] {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}

/* ─── Footer ─── */
#slab-footer {
  background: #f8f9fa !important;
  border-top: 1px solid #e0e0e0 !important;
}
#slab-footer .footer-links a {
  color: #2196F3 !important;
}
#slab-footer .footer-links a:hover {
  color: #1976D2 !important;
}
#slab-footer .footer-divider {
  background: #e0e0e0 !important;
}
#slab-footer .footer-copy {
  color: #757575 !important;
}

/* ─── Promo / countdown cards ─── */
.countdown-block,
[class*="countdown"] {
  background: #ffffff !important;
  color: #1A1A2E !important;
}

/* ─── Community page ─── */
.leaderboard-card,
[class*="leaderboard-card"],
.member-card,
[class*="member-card"] {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}

/* ─── Smooth hover animations for cards ─── */
.guide-card,
.badge-card,
.streak-card,
.form-card,
.ci-section,
.supp-item,
.sup-row,
.rating-btn,
.md-card {
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ─── Subtle glow effect on interactive elements ─── */
.supp-item:hover,
.sup-row:hover,
.guide-card:hover,
.badge-card:hover {
  box-shadow: 0 4px 20px rgba(33,150,243,0.08), 0 2px 8px rgba(0,0,0,0.04) !important;
}
.rating-btn:hover {
  box-shadow: 0 2px 12px rgba(33,150,243,0.06) !important;
}

/* ─── Checkin status banner ─── */
.ci-status {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}
.ci-status.done {
  border-color: rgba(16,185,129,0.35) !important;
  background: rgba(16,185,129,0.06) !important;
}
.ci-status .status-icon {
  color: #2196F3 !important;
}

/* ─── Tip of the Day card ─── */
.tip-card,
[class*="tip-card"] {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}
.tip-badge {
  color: #2196F3 !important;
}
.tip-badge-dot {
  background: #2196F3 !important;
}

/* ─── Skeleton loaders on light ─── */
.skel,
[class*="skel-"] {
  background: #f0f0f0 !important;
}

/* ─── Share modals (my-day, profile) ─── */
.share-overlay {
  background: rgba(0,0,0,0.35) !important;
}
.share-modal {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}
.share-modal-close {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #757575 !important;
}
.share-card-preview {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border-color: rgba(33,150,243,0.25) !important;
}
.share-brand { color: #2196F3 !important; }
.share-tip-text { color: #1A1A2E !important; }
.share-cta-txt { color: #757575 !important; }
.share-copy-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
}
.share-dismiss-btn {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #757575 !important;
}

/* Profile share modal */
.sn-share-modal { background: rgba(0,0,0,0.35) !important; }
.sn-share-box {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}
.sn-share-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border-color: rgba(33,150,243,0.3) !important;
}
.sn-share-card-name { color: #2196F3 !important; }
.sn-share-card-brand { color: #757575 !important; }
.sn-share-close {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}

/* ─── Profile page badge items — Premium light-mode cards ─── */
.sn-badge-item {
  background: #ffffff !important;
  border-color: #e8edf4 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
.sn-badge-item::before {
  background: linear-gradient(135deg, rgba(33,150,243,0.02) 0%, transparent 60%) !important;
}
.sn-badge-item.earned {
  border-color: rgba(33,150,243,0.35) !important;
  background: linear-gradient(145deg, rgba(33,150,243,0.04) 0%, #ffffff 60%) !important;
  box-shadow: 0 0 0 1px rgba(33,150,243,0.08), 0 4px 16px rgba(33,150,243,0.06) !important;
}
.sn-badge-item.earned:hover {
  box-shadow: 0 0 0 1px rgba(33,150,243,0.25), 0 8px 24px rgba(33,150,243,0.1) !important;
  border-color: rgba(33,150,243,0.5) !important;
}
.sn-badge-item.earned::after {
  background: linear-gradient(90deg, transparent 0%, rgba(33,150,243,0.03) 50%, transparent 100%) !important;
}
.sn-badge-icon-wrap {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}
.sn-badge-item.earned .sn-badge-icon-wrap {
  background: rgba(33,150,243,0.06) !important;
  border-color: rgba(33,150,243,0.25) !important;
}
.sn-badge-earned-chip {
  background: rgba(33,150,243,0.08) !important;
  color: #2196F3 !important;
  border-color: rgba(33,150,243,0.2) !important;
}
.sn-badge-item.unearned { opacity: 0.45 !important; filter: saturate(0.2) !important; }
.sn-badge-name { color: #1A1A2E !important; }
.sn-badge-date { color: #2196F3 !important; }

/* ─── My Day action cards on light theme ─── */
.action-card {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}
.action-card.morning {
  background: linear-gradient(135deg, rgba(255,180,50,0.08) 0%, rgba(255,130,30,0.04) 100%) !important;
  border: 1px solid rgba(255,180,50,0.2) !important;
}
.action-card.afternoon {
  background: linear-gradient(135deg, rgba(33,150,243,0.06) 0%, rgba(16,185,129,0.04) 100%) !important;
  border: 1px solid rgba(33,150,243,0.2) !important;
}
.action-card.evening {
  background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(33,150,243,0.03) 100%) !important;
  border: 1px solid rgba(124,58,237,0.2) !important;
}
.action-card.done {
  background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(16,185,129,0.02) 100%) !important;
  border: 1px solid rgba(16,185,129,0.25) !important;
}
.ac-cta {
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  color: #1A1A2E !important;
}

/* ─── My Day plan items ─── */
.plan-item {
  background: #ffffff !important;
  border-color: #eeeeee !important;
}
.plan-item.taken {
  border-color: rgba(16,185,129,0.3) !important;
  background: rgba(16,185,129,0.04) !important;
}
.plan-item.taken .item-name {
  color: #9e9e9e !important;
}

/* ─── My Day progress ring ─── */
.ring-track { stroke: #e0e0e0 !important; }
.ring-fill { stroke: #2196F3 !important; }
.ring-pct-num { color: #2196F3 !important; }

/* ─── Upgrade banners / upgrade cards ─── */
.upgrade-banner,
.prot-upgrade-card,
.ldb-upgrade,
.sn-badges-upgrade,
.free-reminder-card {
  background: linear-gradient(135deg, rgba(33,150,243,0.06), rgba(33,150,243,0.02)) !important;
  border-color: rgba(33,150,243,0.2) !important;
}
.upgrade-cta,
.prot-upgrade-cta {
  background: #2196F3 !important;
  color: #ffffff !important;
}
/* ─── Protocol page free tier teaser (light-safe) ─── */
.prot-free-teaser-card {
  background: linear-gradient(135deg, rgba(16,185,129,0.07), rgba(16,185,129,0.02)) !important;
  border-color: rgba(16,185,129,0.28) !important;
}
.prot-free-teaser-title { color: #1A1A2E !important; }
.prot-free-teaser-desc { color: #424242 !important; }
.prot-free-teaser-blur {
  background: #f8fafb !important;
  border-color: #e0e0e0 !important;
}
.prot-free-teaser-row-title { color: #1A1A2E !important; }
.prot-free-teaser-row-supps { color: #666 !important; }
.prot-free-teaser-row-count { color: #2196F3 !important; }
.prot-free-teaser-lock-badge {
  background: rgba(33,150,243,0.12) !important;
  border-color: rgba(33,150,243,0.35) !important;
  color: #1565C0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
}

/* ─── Stacks page ─── */
.stacks-grid .card,
.stack-card,
[class*="stack-card"] {
  background: #ffffff !important;
  border-color: #eeeeee !important;
}

/* ─── Contact / about page ─── */
.value-card,
.contact-method,
.form-card {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}

/* ─── Chat page controls ─── */
.chat-controls,
[class*="chat-controls"] {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* ─── Chat page input area (hardcoded dark bg) ─── */
.input-area {
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid #e0e0e0 !important;
  backdrop-filter: blur(12px) !important;
}
.input-wrapper {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}
.input-wrapper:focus-within {
  border-color: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.08) !important;
}
#chat-input {
  color: #1A1A2E !important;
}
#chat-input::placeholder {
  color: #9e9e9e !important;
}
.send-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
}
.send-btn:hover:not(:disabled) {
  background: #1976D2 !important;
}

/* ─── Chat page controls bar (+ New Chat button) ─── */
#chat-controls-bar,
[id="chat-controls-bar"] {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid #e0e0e0 !important;
  backdrop-filter: blur(12px) !important;
}
#chat-bar-new-btn,
[id="chat-bar-new-btn"],
.chat-new-chat-btn {
  background: #f0f4f8 !important;
  border: 1px solid #d0d8e4 !important;
  color: #2196F3 !important;
}
#chat-bar-new-btn:hover,
.chat-new-chat-btn:hover {
  background: #e3edf8 !important;
  border-color: #2196F3 !important;
  color: #1976D2 !important;
}
#chat-bar-streak,
[id="chat-bar-streak"] {
  background: rgba(255,169,77,0.08) !important;
  border-color: rgba(255,169,77,0.3) !important;
  color: #D97706 !important;
}

/* ─── Chat disclaimer bar ─── */
.disclaimer {
  background: #f8f9fa !important;
  border-bottom: 1px solid #e0e0e0 !important;
  color: #757575 !important;
}
.disclaimer a { color: #2196F3 !important; }

/* ─── Inline dark backgrounds — additional selectors ─── */
[style*="background:#1a1a24"],
[style*="background: #1a1a24"],
[style*="background-color:#1a1a24"],
[style*="background-color: #1a1a24"] {
  background: #f0f4f8 !important;
  color: #424242 !important;
}
[style*="background:#13131c"],
[style*="background: #13131c"],
[style*="background-color:#13131c"],
[style*="background-color: #13131c"] {
  background: #f5f5f5 !important;
}
[style*="border:1px solid #2a2a3d"],
[style*="border: 1px solid #2a2a3d"] {
  border-color: #d0d8e4 !important;
}

/* ─── Settings page rows ─── */
.sn-row:not(:last-child) { border-bottom-color: #eeeeee !important; }
.sn-toggle { background: #e0e0e0 !important; border-color: #d0d0d0 !important; }
.sn-toggle.on {
  background: rgba(33,150,243,0.2) !important;
  border-color: rgba(33,150,243,0.4) !important;
}
.sn-toggle-dot { background: #9e9e9e !important; }
.sn-toggle.on .sn-toggle-dot { background: #2196F3 !important; }

/* ─── Leaderboard widget (my-day) ─── */
.ldb-widget {
  background: #ffffff !important;
  border-color: #eeeeee !important;
}
.ldb-row.current-user {
  background: rgba(33,150,243,0.04) !important;
  border-color: rgba(33,150,243,0.2) !important;
}
.ldb-row.current-user .ldb-avatar {
  background: rgba(33,150,243,0.1) !important;
  border-color: rgba(33,150,243,0.4) !important;
  color: #2196F3 !important;
}
.ldb-row.current-user .ldb-name { color: #2196F3 !important; }
.ldb-val { color: #2196F3 !important; }
.ldb-see-all { color: #2196F3 !important; }
.ldb-avatar {
  background: #f0f0f0 !important;
  border-color: #e0e0e0 !important;
}

/* ─── Protocol page — hardcoded dark overrides ─── */
.prot-skel,
.prot-skel-line {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%) !important;
  background-size: 400px 100% !important;
}
.prot-timing-header {
  background: linear-gradient(135deg, #f5f5f5, #fafafa) !important;
  border-color: #e0e0e0 !important;
}
.prot-supp-item {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}
.prot-supp-item.prot-bought {
  background: linear-gradient(135deg, #f0faf4, #f5f5f5) !important;
}
.prot-tag-pill {
  background: #f0f0f0 !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.prot-supp-name { color: #1A1A2E !important; }
.prot-supp-dosage { color: #424242 !important; }
.prot-supp-reason { color: #757575 !important; }
.prot-timing-count { color: #424242 !important; }
.prot-timing-count span { color: #757575 !important; }
.prot-buy-btn.amazon {
  background: #FF9900 !important;
  color: #ffffff !important;
}
.prot-buy-btn.iherb {
  background: #469B3D !important;
  color: #ffffff !important;
}
.prot-bought-btn {
  background: rgba(16,185,129,0.08) !important;
  color: #059669 !important;
  border-color: rgba(16,185,129,0.3) !important;
}
.prot-modal-overlay {
  background: rgba(0,0,0,0.35) !important;
}
.prot-modal {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}

/* ─── My Program page — hardcoded dark overrides ─── */
.mp-card {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}
.mp-card-desc { color: #424242 !important; }
.mp-phase-name { color: #1A1A2E !important; }
.mp-modal {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}
.mp-skel,
.mp-skel-line {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%) !important;
  background-size: 400px 100% !important;
}

/* ─── My Day page — skeleton and slot items ─── */
.plan-item {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}
.plan-item .item-name { color: #1A1A2E !important; }
.plan-item .item-meta { color: #757575 !important; }
.plan-item .item-pill {
  background: rgba(33,150,243,0.06) !important;
  color: #2196F3 !important;
  border-color: rgba(33,150,243,0.15) !important;
}
.plan-item .amazon-btn {
  background: #FF9900 !important;
  color: #ffffff !important;
}
.plan-item .iherb-btn {
  background: #469B3D !important;
  color: #ffffff !important;
}
.section-hdr { color: #1A1A2E !important; }
.section-title { color: #1A1A2E !important; }
.section-badge {
  background: rgba(33,150,243,0.06) !important;
  color: #2196F3 !important;
}
.empty-slot { color: #9e9e9e !important; }
.md-skel, .md-skel-line, .skel-line,
[class*="skeleton"], [class*="skel-"] {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%) !important;
  background-size: 400px 100% !important;
}

/* ─── Saved Stacks — skeleton and cards ─── */
.skeleton-card {
  background: #f5f5f5 !important;
  border-color: #eeeeee !important;
  border-radius: 12px !important;
}
.stacks-container { color: #1A1A2E !important; }
.page-hero-title { color: #1A1A2E !important; }
.page-hero-desc { color: #757575 !important; }
.page-hero-eyebrow { color: #2196F3 !important; }

/* ─── Milestones / Badges — see Premium section above ─── */
/* Overrides here to ensure cascade precedence over profile.html inline styles */
.sn-badge-item {
  background: #ffffff !important;
  border-color: #e8edf4 !important;
  color: #1A1A2E !important;
}
.sn-badge-item.earned {
  background: linear-gradient(145deg, rgba(33,150,243,0.04) 0%, #ffffff 60%) !important;
  border-color: rgba(33,150,243,0.35) !important;
  box-shadow: 0 0 0 1px rgba(33,150,243,0.08), 0 4px 16px rgba(33,150,243,0.06) !important;
}
.sn-badge-item.unearned {
  opacity: 0.45 !important;
  filter: saturate(0.2) !important;
}
.sn-badge-name { color: #1A1A2E !important; }
.sn-badge-date { color: #2196F3 !important; }

/* ─── Profile page — save button (light mode premium override) ─── */
.sn-save-btn {
  background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(33,150,243,0.3) !important;
}
.sn-save-btn:hover {
  background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%) !important;
  box-shadow: 0 6px 20px rgba(33,150,243,0.4) !important;
  transform: translateY(-1px) !important;
}
.sn-section {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}
.sn-goal-chip {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.sn-goal-chip.selected {
  background: rgba(33,150,243,0.08) !important;
  border-color: rgba(33,150,243,0.4) !important;
  color: #2196F3 !important;
}
/* sn-goal-pill — the actual class used in profile.html */
.sn-goal-pill {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.sn-goal-pill:hover:not(.selected) {
  border-color: #bdbdbd !important;
  color: #1A1A2E !important;
}
.sn-goal-pill.selected {
  background: rgba(33,150,243,0.10) !important;
  border-color: rgba(33,150,243,0.5) !important;
  color: #2196F3 !important;
  box-shadow: 0 0 0 2px rgba(33,150,243,0.12) !important;
}

/* ─── Profile tier pills — light mode ─── */
.sn-avatar-hero {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.sn-avatar {
  background: rgba(33,150,243,0.08) !important;
  border-color: rgba(33,150,243,0.25) !important;
  color: #2196F3 !important;
}
.sn-avatar-name { color: #1A1A2E !important; }
.sn-avatar-email { color: #757575 !important; }
.sn-tier-free {
  background: rgba(0,0,0,0.04) !important;
  color: #757575 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}
.sn-tier-basic {
  background: rgba(33,150,243,0.06) !important;
  color: #1565C0 !important;
  border: 1px solid rgba(33,150,243,0.2) !important;
}
.sn-tier-personal_coach {
  background: rgba(124,58,237,0.06) !important;
  color: #6d28d9 !important;
  border: 1px solid rgba(124,58,237,0.2) !important;
}
.sn-tier-executive_coach {
  background: rgba(33,150,243,0.08) !important;
  color: #1565C0 !important;
  border: 1px solid rgba(33,150,243,0.2) !important;
}
/* Profile card section containers */
.sn-card {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

/* ─── Blur Gate overlay — light mode adjustments ─── */
#blur-gate-modal {
  background: #ffffff !important;
  color: #1A1A2E !important;
  border: 1px solid #e0e0e0 !important;
}

/* ─── Misc dark-bg inline style overrides ─── */
[style*="background: #0a0a0f"],
[style*="background:#0a0a0f"],
[style*="background-color: #0a0a0f"],
[style*="background-color:#0a0a0f"],
[style*="background: #111118"],
[style*="background:#111118"],
[style*="background-color: #111118"],
[style*="background-color:#111118"] {
  background: #ffffff !important;
}

/* ─── Action card (my-day) ─── */
.action-card {
  background: #ffffff !important;
  border: 1px solid #eeeeee !important;
  color: #1A1A2E !important;
}
.action-card.morning { border-left: 3px solid #F59E0B !important; }
.action-card.afternoon { border-left: 3px solid #2196F3 !important; }
.action-card.evening { border-left: 3px solid #7C3AED !important; }
.action-card.done { border-left: 3px solid #10B981 !important; }

/* ─── Onboarding ─── */
.onb-card, .onb-option, .onb-step {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}

/* ─── Premium/Billing page ─── */
.plan-card, .tier-card {
  background: #ffffff !important;
  border-color: #eeeeee !important;
  color: #1A1A2E !important;
}

/* ─── Tag filter bar (stacks/tips) ─── */
.tag-filter-pill {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.tag-filter-pill.active {
  background: rgba(33,150,243,0.08) !important;
  border-color: rgba(33,150,243,0.3) !important;
  color: #2196F3 !important;
}

/* ─── Empty states ─── */
.empty-state, .empty-icon, [class*="empty-"] {
  color: #757575 !important;
}
.empty-cta {
  background: #2196F3 !important;
  color: #ffffff !important;
}

/* ─── Auth wall ─── */
.auth-wall {
  color: #1A1A2E !important;
}

/* ─── Reminder / Notification Toast — light mode ─── */
#sl-reminder-toast {
  background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%) !important;
  border-color: rgba(33,150,243,0.25) !important;
  box-shadow:
    0 2px 0 0 rgba(33,150,243,0.06) inset,
    0 12px 48px rgba(0,0,0,0.12),
    0 0 0 1px rgba(33,150,243,0.05),
    0 4px 16px rgba(33,150,243,0.06) !important;
}
#sl-reminder-toast .sl-toast-title {
  color: #1A1A2E !important;
}
#sl-reminder-toast .sl-toast-dismiss {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #9e9e9e !important;
}
#sl-reminder-toast .sl-toast-dismiss:hover {
  color: #f44336 !important;
  background: rgba(244,67,54,0.06) !important;
  border-color: rgba(244,67,54,0.2) !important;
}
#sl-reminder-toast .sl-item-list {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
#sl-reminder-toast .sl-item-list li {
  color: #757575 !important;
  border-bottom-color: rgba(0,0,0,0.05) !important;
}
#sl-reminder-toast .sl-item-name { color: #424242 !important; }
#sl-reminder-toast .sl-item-dose { color: #9e9e9e !important; }
#sl-reminder-toast .sl-btn-primary {
  background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%) !important;
  box-shadow: 0 4px 12px rgba(33,150,243,0.3) !important;
}
#sl-reminder-toast .sl-btn-primary:hover {
  background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%) !important;
  box-shadow: 0 6px 16px rgba(33,150,243,0.4) !important;
}
#sl-reminder-toast .sl-btn-settings {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #9e9e9e !important;
}
#sl-reminder-toast .sl-btn-settings:hover {
  color: #424242 !important;
  background: rgba(0,0,0,0.05) !important;
}

/* ─── Profile share modal — light mode ─── */
.sn-share-box {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}
.sn-share-card {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%) !important;
  border-color: rgba(33,150,243,0.35) !important;
  color: #1A1A2E !important;
}
.sn-share-card-name { color: #2196F3 !important; }
.sn-share-card-brand { color: #757575 !important; }
.sn-share-close {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #424242 !important;
}
.sn-share-close:hover { background: rgba(0,0,0,0.07) !important; }

/* ─── Profile logout button — light mode ─── */
.sn-logout-btn {
  color: rgba(211, 47, 47, 0.7) !important;
  border-top: 1px solid #f5f5f5 !important;
}
.sn-logout-btn:hover { color: #d32f2f !important; }

/* ═══════════════════════════════════════════════════════
   BLOG — Premium light theme overrides
   Removes hardcoded dark gradients from blog.html + blog-post.html
═══════════════════════════════════════════════════════ */

/* Hero title accent */
.blog-hero h1 span { color: #2196F3 !important; }

/* Blog hero eyebrow pill */
.blog-hero-eyebrow {
  background: rgba(33,150,243,0.08) !important;
  border-color: rgba(33,150,243,0.2) !important;
  color: #2196F3 !important;
}

/* Filter bar */
.filter-bar .filter-label { color: #9e9e9e !important; }
.filter-btn {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.filter-btn:hover {
  border-color: #2196F3 !important;
  color: #2196F3 !important;
}
.filter-btn.active {
  background: rgba(33,150,243,0.08) !important;
  border-color: #2196F3 !important;
  color: #2196F3 !important;
}

/* Search */
.search-input {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #1A1A2E !important;
}
.search-input:focus { border-color: #2196F3 !important; }
.search-input::placeholder { color: #9e9e9e !important; }

/* Post card */
.post-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.post-card:hover {
  border-color: #2196F3 !important;
  box-shadow: 0 4px 20px rgba(33,150,243,0.12) !important;
}

/* Image placeholder — replace dark gradient with light blue */
.post-img {
  background: linear-gradient(135deg, #EBF4FF 0%, #E3F2FD 100%) !important;
  color: #2196F3 !important;
}

/* Category tag inside card */
.post-category { color: #2196F3 !important; }

/* Post title link */
.post-title { color: #1A1A2E !important; }
.post-title:hover { color: #2196F3 !important; }

/* Post excerpt */
.post-excerpt { color: #757575 !important; }

/* Post meta */
.post-meta { color: #9e9e9e !important; }
.post-meta-dot { background: #9e9e9e !important; }

/* Read more link */
.post-read-link { color: #2196F3 !important; }
.post-read-link:hover { color: #1976D2 !important; }

/* Loading skeletons — light shimmer */
.skeleton-card {
  background: #f0f0f0 !important;
  border-color: #e8e8e8 !important;
}

/* Pagination */
.page-btn {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.page-btn:hover:not(:disabled) {
  border-color: #2196F3 !important;
  color: #2196F3 !important;
}
.page-btn.active {
  background: #2196F3 !important;
  border-color: #2196F3 !important;
  color: #ffffff !important;
}

/* Blog CTA banner */
.cta-inner {
  background: linear-gradient(135deg, rgba(33,150,243,0.06) 0%, rgba(25,118,210,0.04) 100%) !important;
  border-color: rgba(33,150,243,0.2) !important;
}
.cta-text h3 { color: #1A1A2E !important; }
.cta-text p { color: #424242 !important; }
.cta-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(33,150,243,0.3) !important;
}
.cta-btn:hover { background: #1976D2 !important; opacity: 1 !important; }

/* ── Blog post page ── */
.post-breadcrumb a { color: #757575 !important; }
.post-breadcrumb a:hover { color: #2196F3 !important; }

.post-category-badge {
  background: rgba(33,150,243,0.08) !important;
  border-color: rgba(33,150,243,0.2) !important;
  color: #2196F3 !important;
}

.post-hero h1 { color: #1A1A2E !important; }
.post-meta-bar { color: #9e9e9e !important; }
.meta-sep { background: #9e9e9e !important; }

/* Featured image placeholder */
.post-featured-placeholder {
  background: linear-gradient(135deg, #EBF4FF 0%, #E3F2FD 100%) !important;
  color: #2196F3 !important;
}

/* Article content */
.post-content { color: #1A1A2E !important; }
.post-content h2 {
  color: #1A1A2E !important;
  border-top-color: #e0e0e0 !important;
}
.post-content h3 { color: #1A1A2E !important; }
.post-content h4 { color: #2196F3 !important; }
.post-content strong { color: #1A1A2E !important; }
.post-content em { color: #424242 !important; }
.post-content a { color: #2196F3 !important; }
.post-content blockquote {
  border-left-color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
  color: #424242 !important;
}
.post-content code {
  background: #f0f4f8 !important;
  border-color: #e0e0e0 !important;
  color: #2196F3 !important;
}
.post-content pre {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}
.post-content hr { border-top-color: #e0e0e0 !important; }
.post-content th {
  background: #f5f5f5 !important;
  color: #757575 !important;
  border-bottom-color: #e0e0e0 !important;
}
.post-content td {
  color: #424242 !important;
  border-bottom-color: #f0f0f0 !important;
}
.post-content tr:hover td { background: #f9fbff !important; }

/* Sidebar */
.post-sidebar .sidebar-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.sidebar-card h4 { color: #9e9e9e !important; }

/* Sidebar CTA card */
.sidebar-cta-card {
  background: linear-gradient(135deg, rgba(33,150,243,0.06) 0%, rgba(25,118,210,0.04) 100%) !important;
  border-color: rgba(33,150,243,0.2) !important;
}
.sidebar-cta-card h3 { color: #1A1A2E !important; }
.sidebar-cta-card p { color: #424242 !important; }
.sidebar-cta-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
}
.sidebar-cta-btn:hover { opacity: 0.9 !important; }

/* TOC links */
#tocList a, #mobileTocList a {
  color: #424242 !important;
}
#tocList a:hover, #mobileTocList a:hover { color: #2196F3 !important; }

/* Mobile CTA */
.mobile-cta-card {
  background: linear-gradient(135deg, rgba(33,150,243,0.06) 0%, rgba(25,118,210,0.04) 100%) !important;
  border-color: rgba(33,150,243,0.2) !important;
}
.mobile-cta-card h3 { color: #1A1A2E !important; }
.mobile-cta-card p { color: #424242 !important; }
.mobile-toc-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}
.mobile-toc-card h4 { color: #9e9e9e !important; }

/* Tags */
.post-tag {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.post-tag:hover {
  border-color: #2196F3 !important;
  color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
}

/* Share buttons */
.share-btn {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #424242 !important;
}
.share-btn:hover {
  border-color: #2196F3 !important;
  color: #2196F3 !important;
}

/* Related posts */
.related-section h2 {
  color: #1A1A2E !important;
  border-bottom-color: #e0e0e0 !important;
}
.related-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.related-card:hover {
  border-color: #2196F3 !important;
  box-shadow: 0 4px 16px rgba(33,150,243,0.1) !important;
}
.related-card-img {
  background: linear-gradient(135deg, #EBF4FF 0%, #E3F2FD 100%) !important;
  color: #2196F3 !important;
}
.related-card-cat { color: #2196F3 !important; }
.related-card-title { color: #1A1A2E !important; }

/* Bottom CTA */
.bottom-cta-inner {
  background: linear-gradient(135deg, rgba(33,150,243,0.07) 0%, rgba(25,118,210,0.05) 100%) !important;
  border-color: rgba(33,150,243,0.2) !important;
}
.bottom-cta-inner h2 { color: #1A1A2E !important; }
.bottom-cta-inner h2 span { color: #2196F3 !important; }
.bottom-cta-inner p { color: #424242 !important; }
.bottom-cta-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(33,150,243,0.3) !important;
}
.bottom-cta-btn:hover { background: #1976D2 !important; opacity: 1 !important; }

/* Error/loading states */
.error-screen h2 { color: #EF4444 !important; }
.error-screen p { color: #757575 !important; }
.error-screen a { color: #2196F3 !important; }
.loading-spinner {
  border-color: #e0e0e0 !important;
  border-top-color: #2196F3 !important;
}

/* ═══════════════════════════════════════════════════════
   CHAT — Light theme overrides
   Fixes dark backgrounds in chat.html input area and + New Chat button
═══════════════════════════════════════════════════════ */

/* Chat input area — was rgba(10,10,15,0.95) black */
.input-area {
  background: #ffffff !important;
  border-top: 1px solid #e0e0e0 !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04) !important;
}

/* Chat input wrapper */
.input-wrapper {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}
.input-wrapper:focus-within {
  border-color: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.1) !important;
}

/* + New Chat button — was dark rgba with dark text */
.chat-new-chat-btn {
  background: #f0f4f8 !important;
  border-color: #d0d5dd !important;
  color: #344054 !important;
}
.chat-new-chat-btn:hover {
  border-color: #2196F3 !important;
  color: #2196F3 !important;
  background: rgba(33,150,243,0.08) !important;
}

/* User menu dropdown items — override JS inline styles */
.user-menu-item:hover {
  background: #f0f4f8 !important;
  color: #1A1A2E !important;
}

/* Chat controls bar */
.chat-controls-bar {
  background: rgba(255,255,255,0.95) !important;
  border-color: #e0e0e0 !important;
}

/* ═══════════════════════════════════════════════════════
   ONBOARDING — Premium light theme
═══════════════════════════════════════════════════════ */
.ob-topnav {
  background: rgba(255,255,255,0.95) !important;
  border-bottom-color: #e0e0e0 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}
.ob-topnav-back { color: #757575 !important; }
.ob-topnav-back:hover { background: #f5f5f5 !important; color: #1A1A2E !important; }
.ob-logo { color: #2196F3 !important; }
.ob-skip { color: #9e9e9e !important; }
.ob-skip:hover { background: #f5f5f5 !important; color: #757575 !important; }
.ob-progress { background: #e0e0e0 !important; }
.ob-progress-fill { background: linear-gradient(90deg, #1976D2, #2196F3) !important; }
.step-eyebrow { color: #2196F3 !important; }
.step-title { color: #1A1A2E !important; }
.step-sub { color: #757575 !important; }
.ob-input {
  background: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  color: #1A1A2E !important;
  border-radius: 12px !important;
}
.ob-input:focus { border-color: #2196F3 !important; box-shadow: 0 0 0 3px rgba(33,150,243,0.1), 0 1px 3px rgba(0,0,0,0.06) !important; }
.ob-input::placeholder { color: #9e9e9e !important; }
.ob-select {
  background-color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  color: #1A1A2E !important;
  border-radius: 12px !important;
}
.ob-select:focus { border-color: #2196F3 !important; box-shadow: 0 0 0 3px rgba(33,150,243,0.1), 0 1px 3px rgba(0,0,0,0.06) !important; }
.ob-label { color: #616161 !important; }
.goal-pill {
  background: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03) !important;
  border-radius: 14px !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.goal-pill:hover {
  border-color: transparent !important;
  background: #f0f7ff !important;
  box-shadow: 0 4px 12px rgba(33,150,243,0.1), 0 1px 4px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px) !important;
}
.goal-pill.selected {
  border-color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
  box-shadow: 0 4px 14px rgba(33,150,243,0.15), 0 0 0 1px rgba(33,150,243,0.12) !important;
}
.goal-pill .gp-label { color: #424242 !important; }
.goal-pill.selected .gp-label { color: #1976D2 !important; font-weight: 600 !important; }
.lang-btn {
  background: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  color: #424242 !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.lang-btn:hover {
  box-shadow: 0 2px 8px rgba(33,150,243,0.1) !important;
  transform: translateY(-1px) !important;
}
.lang-btn.active, .lang-btn.selected {
  border-color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
  color: #2196F3 !important;
  box-shadow: 0 2px 8px rgba(33,150,243,0.15) !important;
  font-weight: 600 !important;
}

/* Onboarding CTA button — blue with white text */
.ob-btn {
  background: linear-gradient(135deg, #2196F3, #1976D2) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(33,150,243,0.3) !important;
}
.ob-btn:hover {
  background: linear-gradient(135deg, #1976D2, #1565C0) !important;
  box-shadow: 0 6px 20px rgba(33,150,243,0.4) !important;
  transform: translateY(-1px) !important;
}
.ob-btn:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(33,150,243,0.2) !important;
}
.ob-btn:disabled {
  background: #bdbdbd !important;
  box-shadow: none !important;
  transform: none !important;
  color: #ffffff !important;
}

/* Outline button — light theme */
.ob-btn-outline {
  background: transparent !important;
  border-color: #e0e0e0 !important;
  color: #757575 !important;
}
.ob-btn-outline:hover {
  border-color: #2196F3 !important;
  color: #2196F3 !important;
}

/* Welcome hero icon — override green pulse to blue */
.welcome-logo-wrap {
  background: rgba(33,150,243,0.08) !important;
  border-color: rgba(33,150,243,0.3) !important;
  box-shadow: 0 0 0 6px rgba(33,150,243,0.06) !important;
  color: #2196F3 !important;
}

/* Welcome title highlight */
.welcome-title .hl { color: #2196F3 !important; }

/* Value prop rows — premium shadow-only */
.vp-row {
  background: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.vp-row:hover {
  border: none !important;
  box-shadow: 0 4px 16px rgba(33,150,243,0.08) !important;
}
.vp-icon { color: #2196F3 !important; }
.vp-text b { color: #1A1A2E !important; }
.vp-text span { color: #757575 !important; }

/* Program cards — premium shadow-only (matches My Day hub cards) */
.prog-card {
  background: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
  padding: 18px !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.prog-card:hover {
  border: none !important;
  box-shadow: 0 8px 28px rgba(33,150,243,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  transform: translateY(-2px) !important;
}
.prog-card.selected {
  border: none !important;
  background: rgba(33,150,243,0.04) !important;
  box-shadow: 0 0 0 2px #2196F3, 0 4px 16px rgba(33,150,243,0.14) !important;
}
.prog-card-name { color: #1A1A2E !important; font-size: 1rem !important; }
.prog-card-tag { color: #616161 !important; }
.prog-card-badge {
  background: linear-gradient(135deg, #2196F3, #1976D2) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(33,150,243,0.25) !important;
}
.prog-card .prog-check {
  border-color: #d0d0d0 !important;
}
.prog-card.selected .prog-check {
  background: #2196F3 !important;
  border-color: #2196F3 !important;
}
.prog-card .pc-buy-link {
  color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
  border-color: rgba(33,150,243,0.15) !important;
}
/* ── Program card internals — remove cell borders for premium look ── */
.prog-card-icon {
  border: none !important;
  background: var(--prog-glow, rgba(33,150,243,0.06)) !important;
  box-shadow: none !important;
}
.prog-card:hover .prog-card-icon {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.prog-card.selected .prog-card-icon {
  border: none !important;
  box-shadow: 0 0 0 2px var(--prog-primary, #2196F3) !important;
}
.prog-card-header {
  border: none !important;
}
.prog-card-meta {
  border: none !important;
}
.prog-card-meta-tag {
  background: #f0f2f5 !important;
  color: #757575 !important;
  border: none !important;
}
.prog-expand-chevron {
  background: #f5f5f5 !important;
  border: none !important;
  color: #9e9e9e !important;
}
.prog-card.expanded .prog-expand-chevron {
  background: rgba(33,150,243,0.08) !important;
  color: #2196F3 !important;
  border: none !important;
}
.prog-card-body {
  border: none !important;
  border-top: none !important;
}
.prog-phase-block {
  background: #f8f9fb !important;
  border: none !important;
  border-radius: 10px !important;
}
.prog-phase-header {
  border: none !important;
}
.prog-phase-badge {
  box-shadow: 0 2px 6px rgba(33,150,243,0.15) !important;
}
.prog-phase-name {
  color: #1A1A2E !important;
}
.prog-phase-weeks {
  color: #9e9e9e !important;
}
.prog-phase-desc {
  color: #616161 !important;
}
.prog-phase-supps-label {
  color: #2196F3 !important;
}
.prog-phase-chip {
  background: rgba(33,150,243,0.07) !important;
  color: #1976D2 !important;
  border: none !important;
}
.prog-phase-chips {
  border: none !important;
}

/* Done step */
.done-checkmark {
  background: linear-gradient(135deg, #2196F3, #1976D2) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(33,150,243,0.35) !important;
}
.done-title { color: #1A1A2E !important; }
.done-sub { color: #757575 !important; }
.done-summary {
  background: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
}
.done-summary-title { color: #9e9e9e !important; }
.done-summary-row {
  border-bottom-color: #f0f0f0 !important;
}
.done-summary-label { color: #757575 !important; }
.done-summary-val { color: #1A1A2E !important; }
.done-redirect { color: #9e9e9e !important; }

/* Timeline slots — premium shadow-only */
.timeline-slot {
  background: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.timeline-slot:hover {
  border: none !important;
  box-shadow: 0 8px 28px rgba(33,150,243,0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
  transform: translateY(-1px) !important;
}

/* Reminder slots */
.reminder-slot {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

/* Toggle switch */
.toggle-row {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}

/* Wizard background — subtle gradient */
.wizard-wrap {
  background: linear-gradient(180deg, #fafbff 0%, #f0f4f8 100%) !important;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM.CSS DARK OVERRIDE — HIGH SPECIFICITY
   Uses body prefix to beat premium.css selectors
═══════════════════════════════════════════════════════ */

/* Score cards — light treatment */
body .score-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%) !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
body .score-card::before {
  background: radial-gradient(circle at 50% 30%, rgba(33,150,243,0.04) 0%, transparent 70%) !important;
}
body .score-card-locked {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(6px) !important;
}

/* Chat message bubbles — light */
body .msg-ai .msg-bubble,
body [class*="msg-ai"] [class*="bubble"],
body .message.assistant .bubble,
body .chat-bubble-ai,
body .ai-bubble {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  color: #1A1A2E !important;
}
body .msg-user .msg-bubble,
body [class*="msg-user"] [class*="bubble"],
body .message.user .bubble,
body .chat-bubble-user,
body .user-bubble {
  background: linear-gradient(135deg, rgba(33,150,243,0.12) 0%, rgba(33,150,243,0.08) 100%) !important;
  border: 1px solid rgba(33,150,243,0.2) !important;
  color: #1A1A2E !important;
}

/* Chat input area — light */
body .chat-input-area,
body .input-area,
body [class*="chat-input-area"] {
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid #e0e0e0 !important;
  backdrop-filter: blur(12px) !important;
}
body .chat-input,
body #chat-input,
body [class*="msg-input"],
body textarea.input-field {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}
body .chat-input:focus,
body #chat-input:focus,
body [class*="msg-input"]:focus {
  border-color: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.1) !important;
  outline: none !important;
}

/* Bottom nav — light */
body #slab-bottomnav,
body .bottom-nav,
body [class*="bottom-nav"],
body [class*="tab-bar"] {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid #e0e0e0 !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
}
body .bottom-nav-item.active,
body [class*="tab-item"].active,
body [class*="nav-tab"].active {
  color: #2196F3 !important;
  filter: none !important;
}

/* Dropdowns — light */
body .dropdown,
body .dropdown-menu,
body [class*="dropdown"],
body [class*="popover"] {
  background: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  color: #1A1A2E !important;
}

/* Option cards — light */
body .option-card,
body .choice-card,
body [class*="option-btn"],
body [class*="choice-btn"] {
  border: 1px solid #e0e0e0 !important;
  background: #ffffff !important;
  color: #1A1A2E !important;
}
body .option-card:hover,
body .choice-card:hover,
body [class*="option-btn"]:hover {
  border-color: rgba(33,150,243,0.3) !important;
  box-shadow: 0 2px 8px rgba(33,150,243,0.08) !important;
}
body .option-card.selected,
body .choice-card.selected,
body [class*="option-btn"].selected,
body [class*="option-btn"].active {
  border-color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
  box-shadow: 0 0 12px rgba(33,150,243,0.1) !important;
}

/* Settings rows — light borders */
body .settings-row,
body .reminder-row,
body [class*="settings-row"],
body [class*="pref-row"] {
  border-bottom: 1px solid #f0f0f0 !important;
}
body .settings-row:hover,
body .reminder-row:hover {
  background: rgba(33,150,243,0.03) !important;
}

/* Toggle tracks — light */
body .toggle-track,
body [class*="toggle-track"] {
  background: #e0e0e0 !important;
}
body .toggle-track.on,
body [class*="toggle-track"].active {
  background: #2196F3 !important;
  box-shadow: 0 0 8px rgba(33,150,243,0.3) !important;
}

/* Send button — blueprint blue */
body .send-btn,
body #send-btn,
body [class*="send-btn"] {
  background: #2196F3 !important;
  box-shadow: 0 2px 8px rgba(33,150,243,0.3) !important;
  color: #ffffff !important;
}
body .send-btn:hover,
body #send-btn:hover {
  background: #1976D2 !important;
  box-shadow: 0 4px 12px rgba(33,150,243,0.4) !important;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM.CSS MODAL/OVERLAY OVERRIDES
═══════════════════════════════════════════════════════ */

/* All modals & overlays — light glass */
body [class*="modal"]:not(.admin-panel *),
body [class*="overlay"]:not(.admin-panel *) {
  color: #1A1A2E !important;
}

/* Gauge track — light */
body .gauge-track {
  stroke: #e0e0e0 !important;
}

/* Profile nudge */
body .profile-nudge {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Avatar — light ring */
body .user-avatar,
body .profile-avatar,
body [class*="avatar"] {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(33,150,243,0.3) !important;
}

/* ═══════════════════════════════════════════════════════
   NAV.JS INJECTED COMPONENT OVERRIDES
   nav.js injects CSS with hardcoded dark values.
   These overrides use body prefix for higher specificity.
═══════════════════════════════════════════════════════ */

/* ── Sidebar (desktop) ── */
body #slab-sidebar {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 1px solid #e0e0e0 !important;
}
body #slab-sidebar .sn-sidebar-logo {
  border-bottom-color: #eeeeee !important;
}
body #slab-sidebar .sn-sidebar-logo-text {
  color: #1A1A2E !important;
}
body #slab-sidebar .sn-sidebar-item {
  color: #757575 !important;
}
body #slab-sidebar .sn-sidebar-item:hover {
  background: rgba(33,150,243,0.04) !important;
  color: #1A1A2E !important;
}
body #slab-sidebar .sn-sidebar-item.active {
  box-shadow: inset 3px 0 0 #2196F3 !important;
  background: rgba(33,150,243,0.08) !important;
  color: #2196F3 !important;
}
body #slab-sidebar .sn-sidebar-label {
  color: inherit !important;
}
body #slab-sidebar .sn-sidebar-lang {
  border-bottom-color: #eeeeee !important;
}
body #slab-sidebar .sn-sidebar-lang-globe {
  color: #757575 !important;
}
body #sn-sidebar-profile .sn-sidebar-name {
  color: #1A1A2E !important;
}
body #sn-sidebar-profile .sn-sidebar-tier {
  color: #757575 !important;
}
body #sn-sidebar-profile {
  border-top-color: #eeeeee !important;
}
body .sn-sidebar-dot {
  background: #2196F3 !important;
}

/* ── Bottom Tabs (mobile) ── */
body #slab-tabs {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid #e0e0e0 !important;
}
body #slab-tabs .sn-tab {
  color: #9e9e9e !important;
}
body #slab-tabs .sn-tab:hover {
  color: #757575 !important;
}
body #slab-tabs .sn-tab.active {
  color: #2196F3 !important;
}
body #slab-tabs .sn-tab.active .sn-tab-icon {
  filter: none !important;
}
body #slab-tabs .sn-tab-profile-icon {
  border-color: #2196F3 !important;
  background: #ffffff !important;
}
body #slab-tabs .sn-tab-signin-cta {
  color: #2196F3 !important;
}
body #slab-tabs .sn-tab-dot {
  background: #2196F3 !important;
}

/* ── Profile Sheet (mobile) ── */
body #sn-profile-sheet {
  background: #ffffff !important;
  border-top: 1px solid #e0e0e0 !important;
  border-radius: 20px 20px 0 0 !important;
}
body #sn-profile-sheet .sn-sheet-handle {
  background: #d0d0d0 !important;
}
body #sn-profile-sheet .sn-sheet-close-btn {
  background: rgba(0,0,0,0.04) !important;
  color: #757575 !important;
}
body #sn-profile-sheet .sn-sheet-divider {
  background: #eeeeee !important;
}
body #sn-profile-sheet a,
body #sn-profile-sheet button {
  color: #424242 !important;
}
body #sn-profile-sheet a:hover,
body #sn-profile-sheet button:hover {
  background: rgba(33,150,243,0.04) !important;
  color: #1A1A2E !important;
}
body #sn-profile-sheet::-webkit-scrollbar-thumb {
  background: #d0d0d0 !important;
}

/* ── Desktop Profile Dropdown ── */
body #sn-profile-dropdown {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
body #sn-profile-dropdown a,
body #sn-profile-dropdown button {
  color: #424242 !important;
}
body #sn-profile-dropdown a:hover,
body #sn-profile-dropdown button:hover {
  background: rgba(33,150,243,0.04) !important;
  color: #1A1A2E !important;
}
body #sn-profile-dropdown .sn-pd-sep {
  background: #eeeeee !important;
}
body #sn-profile-dropdown .sn-pd-danger {
  color: #EF4444 !important;
}

/* ── Auth Modal ── */
body .sn-auth-overlay {
  background: rgba(0,0,0,0.4) !important;
}
body .sn-auth-box {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}
body .sn-auth-title {
  color: #1A1A2E !important;
}
body .sn-auth-subtitle {
  color: #757575 !important;
}
body .sn-auth-input {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}
body .sn-auth-input:focus {
  border-color: #2196F3 !important;
}
body .sn-auth-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
}
body .sn-auth-close {
  color: #9e9e9e !important;
}
body .sn-auth-forgot-link {
  color: #757575 !important;
}
body .sn-auth-msg {
  color: #2196F3 !important;
}
body .sn-auth-tabs {
  border-bottom-color: #e0e0e0 !important;
}
body .sn-auth-tab {
  color: #9e9e9e !important;
}
body .sn-auth-tab.active {
  color: #2196F3 !important;
  border-bottom-color: #2196F3 !important;
}
body .sn-auth-tab:hover:not(.active) {
  color: #424242 !important;
}

/* ── Language Select ── */
body .sn-lang-select {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}

/* ── Landing Nav ── */
body #slab-nav {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid #e0e0e0 !important;
}
body #slab-nav .sn-nav-logo-text {
  color: #1A1A2E !important;
}
body #slab-nav .sn-nav-signin {
  border-color: #e0e0e0 !important;
  color: #757575 !important;
}
body #slab-nav .sn-nav-signin:hover {
  border-color: #2196F3 !important;
  color: #2196F3 !important;
}
body #slab-nav .sn-nav-cta {
  background: #2196F3 !important;
  color: #ffffff !important;
}

/* ── Notification Panel ── */
body #sn-notif-panel {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* ── Help Bubble ── */
body #sn-help-bubble {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #757575 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
body #sn-help-bubble:hover {
  background: rgba(33,150,243,0.08) !important;
  color: #2196F3 !important;
  border-color: rgba(33,150,243,0.3) !important;
}

/* ── Bell badge ── */
body .sn-bell-badge {
  background: #2196F3 !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   APP-NAV.JS COMPONENT OVERRIDES (31 app pages)
   app-nav.js uses #sn-sidebar, #sn-bottom-nav, #sn-drawer
═══════════════════════════════════════════════════════ */

/* ── Sidebar (desktop) ── */
body #sn-sidebar {
  background: rgba(255,255,255,0.97) !important;
  border-right: 1px solid #e0e0e0 !important;
}
body #sn-sidebar-logo {
  border-bottom-color: #eeeeee !important;
}
body #sn-sidebar-logo .sn-logo-text {
  color: #1A1A2E !important;
}
body #sn-sidebar-nav {
  scrollbar-color: #d0d0d0 transparent !important;
}
body #sn-sidebar-nav::-webkit-scrollbar-thumb {
  background: #d0d0d0 !important;
}
body .sn-nav-item {
  color: #757575 !important;
}
body .sn-nav-item:hover {
  background: rgba(33,150,243,0.04) !important;
  color: #1A1A2E !important;
}
body .sn-nav-item.active {
  color: #2196F3 !important;
  background: rgba(33,150,243,0.08) !important;
  border-left-color: #2196F3 !important;
}
body .sn-nav-item.locked {
  color: #9e9e9e !important;
}
body .sn-nav-divider {
  background: #eeeeee !important;
}
body #sn-sidebar-profile {
  border-top-color: #eeeeee !important;
}
body .sn-profile-name {
  color: #1A1A2E !important;
}
body .sn-tier-free {
  background: rgba(0,0,0,0.04) !important;
  color: #9e9e9e !important;
}
body .sn-tier-basic {
  background: rgba(33,150,243,0.1) !important;
  color: #2196F3 !important;
}
body .sn-avatar {
  background: rgba(33,150,243,0.1) !important;
  border-color: rgba(33,150,243,0.3) !important;
  color: #2196F3 !important;
}

/* ── Bottom Nav (mobile) ── */
body #sn-bottom-nav {
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid #e0e0e0 !important;
  backdrop-filter: blur(20px) !important;
}
body .sn-bottom-item {
  color: #9e9e9e !important;
}
body .sn-bottom-item:hover,
body .sn-bottom-item:active {
  color: #757575 !important;
}
body .sn-bottom-item.active {
  color: #2196F3 !important;
}
body .sn-bottom-label {
  color: inherit !important;
}

/* ── Drawer (mobile profile sheet) ── */
body #sn-drawer {
  background: #ffffff !important;
  border-top: 1px solid #e0e0e0 !important;
}
body #sn-drawer-handle {
  background: #d0d0d0 !important;
}
body #sn-drawer-header {
  border-bottom-color: #eeeeee !important;
}
body #sn-drawer-close-btn {
  background: rgba(0,0,0,0.04) !important;
  color: #757575 !important;
}
body #sn-drawer-close-btn:hover {
  background: rgba(0,0,0,0.08) !important;
  color: #1A1A2E !important;
}
body .sn-drawer-item {
  color: #424242 !important;
}
body .sn-drawer-item:active {
  background: rgba(33,150,243,0.04) !important;
}
body .sn-drawer-item.active {
  color: #2196F3 !important;
  background: rgba(33,150,243,0.06) !important;
}
body .sn-drawer-item.locked {
  color: #9e9e9e !important;
}
body .sn-drawer-divider {
  background: #eeeeee !important;
}
body .sn-drawer-locked-badge {
  background: rgba(0,0,0,0.04) !important;
  color: #9e9e9e !important;
}
body .sn-guest-profile {
  border-top-color: #eeeeee !important;
}
body .sn-drawer-guest {
  border-bottom-color: #eeeeee !important;
}
body .sn-signin-sidebar-btn {
  color: #2196F3 !important;
}
body .sn-signin-sidebar-btn:hover {
  background: rgba(33,150,243,0.06) !important;
}
body .sn-drawer-signin-btn {
  color: #2196F3 !important;
}

/* ── Upgrade Modal ── */
body #sn-upgrade-overlay {
  background: rgba(0,0,0,0.4) !important;
}
body #sn-upgrade-modal {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}
body #sn-upgrade-modal h3 {
  color: #1A1A2E !important;
}
body #sn-upgrade-modal p {
  color: #757575 !important;
}
body .sn-upgrade-cta {
  background: #2196F3 !important;
  color: #ffffff !important;
}
body .sn-upgrade-cta:hover {
  background: #1976D2 !important;
}
body .sn-upgrade-cancel {
  color: #757575 !important;
}
body .sn-upgrade-compare {
  color: #757575 !important;
}

/* ── Auth Modal (app-nav.js) ── */
body #sn-auth-overlay {
  background: rgba(0,0,0,0.4) !important;
}
body #sn-auth-modal {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}
body #sn-auth-modal .sn-auth-close {
  color: #9e9e9e !important;
}
body #sn-auth-modal .sn-auth-close:hover {
  color: #1A1A2E !important;
}
body #sn-auth-modal .sn-auth-tabs {
  border-bottom-color: #e0e0e0 !important;
}
body #sn-auth-modal .sn-auth-tab {
  color: #9e9e9e !important;
}
body #sn-auth-modal .sn-auth-tab.active {
  color: #2196F3 !important;
  border-bottom-color: #2196F3 !important;
}
body #sn-auth-modal .sn-auth-input {
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #1A1A2E !important;
}
body #sn-auth-modal .sn-auth-input:focus {
  border-color: #2196F3 !important;
}
body #sn-auth-modal .sn-auth-btn {
  background: #2196F3 !important;
  color: #ffffff !important;
}

/* ── Notification Panel ── */
body #sn-notif-overlay {
  background: rgba(0,0,0,0.3) !important;
}
body #sn-notif-panel {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
}

/* ── Blur Gate Modal ── */
body #blur-gate-overlay {
  background: rgba(0,0,0,0.3) !important;
}
body #blur-gate-modal {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
}
body #blur-gate-modal h2 {
  color: #1A1A2E !important;
}
body #blur-gate-modal p {
  color: #757575 !important;
}
body #blur-gate-modal .bg-cta {
  background: #2196F3 !important;
  color: #ffffff !important;
}
body #blur-gate-modal .bg-cta:hover {
  background: #1976D2 !important;
}
body #blur-gate-modal .bg-secondary {
  color: #757575 !important;
}
body #blur-gate-modal .bg-secondary:hover {
  color: #1A1A2E !important;
}
body #blur-gate-modal .bg-pill {
  background: #f0f4f8 !important;
  border: 1px solid #d0d8e4 !important;
  color: #424242 !important;
}

/* ═══════════════════════════════════════════════════════
   NUCLEAR: CATCH-ALL FOR ANY REMAINING DARK BACKGROUNDS
   Targets inline styles that JS may inject dynamically
═══════════════════════════════════════════════════════ */

/* Body-level dark background reset */
body {
  background-color: #ffffff !important;
  color: #1A1A2E !important;
}

/* Any element with dark inline background */
[style*="background:#0a0a0f"],
[style*="background: #0a0a0f"],
[style*="background-color:#0a0a0f"],
[style*="background-color: #0a0a0f"],
[style*="background:#0a0a"],
[style*="background: #0a0a"] {
  background: #ffffff !important;
  color: #1A1A2E !important;
}
[style*="background:#111118"],
[style*="background: #111118"],
[style*="background-color:#111118"],
[style*="background-color: #111118"] {
  background: #ffffff !important;
  color: #1A1A2E !important;
}
[style*="background:#13131c"],
[style*="background: #13131c"],
[style*="background-color:#13131c"] {
  background: #f5f5f5 !important;
  color: #1A1A2E !important;
}
[style*="background:#1a1a24"],
[style*="background: #1a1a24"],
[style*="background-color:#1a1a24"] {
  background: #f0f4f8 !important;
  color: #1A1A2E !important;
}
[style*="background:#222233"],
[style*="background: #222233"] {
  background: #f5f5f5 !important;
  color: #1A1A2E !important;
}
[style*="border:1px solid #2a2a3d"],
[style*="border: 1px solid #2a2a3d"],
[style*="border:1px solid #222233"],
[style*="border: 1px solid #222233"] {
  border-color: #d0d8e4 !important;
}
[style*="color:#f0f0f5"],
[style*="color: #f0f0f5"],
[style*="color:#8a8a9a"],
[style*="color: #8a8a9a"] {
  color: #1A1A2E !important;
}

/* Admin panel exclusion — keep dark */
.admin-panel, #admin-wrap, [class*="admin-"],
body.admin-page, .admin-page * {
  /* Do not override admin panel */
  all: revert;
}