/* ═══════════════════════════════════════════════════════════
   Student panel — modern dark theme (opt-in via data-theme)
   Palette: deep indigo-violet surfaces, high-contrast text
   ═══════════════════════════════════════════════════════════ */

html { color-scheme: light; }

html[data-theme="dark"] {
    color-scheme: dark;

    /* Core */
    --bg: #090b14;
    --white: #14182a;
    --surface: #14182a;
    --surface-2: #1b2035;
    --surface-3: #242a42;
    --surface-elevated: #1e2540;
    --input-bg: #0e1220;

    --text: #f1f5ff;
    --text-muted: #9aa3c2;
    --text-faint: #6b7394;

    --purple-50: #1e1835;
    --purple-100: #2a2148;
    --purple-200: #3b3160;
    --purple-400: #a78bfa;
    --purple-500: #8b5cf6;
    --purple-600: #7c3aed;
    --purple-700: #c4b5fd;
    --purple-900: #ede9fe;

    --glass: rgba(20, 24, 42, 0.92);
    --glass-border: rgba(139, 92, 246, 0.28);
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.55);

    --danger-soft: rgba(248, 113, 113, 0.16);
    --ok-soft: rgba(52, 211, 153, 0.16);
    --warn-soft: rgba(251, 191, 36, 0.16);

    --accent-glow: rgba(124, 58, 237, 0.35);
    --chart-grid: rgba(148, 163, 184, 0.18);
    --chart-label: #a5b0d0;
}

html[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

/* Ambient — softer, richer */
html[data-theme="dark"] .orb-1 {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.42) 0%, transparent 70%);
    opacity: 0.55;
}
html[data-theme="dark"] .orb-2 {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.22) 0%, transparent 70%);
    opacity: 0.4;
}
html[data-theme="dark"] .orb-3 {
    background: radial-gradient(circle, rgba(192, 38, 211, 0.2) 0%, transparent 70%);
    opacity: 0.35;
}
html[data-theme="dark"] .grid-overlay {
    background-image:
        linear-gradient(rgba(139, 92, 246, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, 0.045) 1px, transparent 1px);
    opacity: 0.7;
}

/* ── Shell / chrome ── */
html[data-theme="dark"] .mobile-topbar,
html[data-theme="dark"] .mobile-bottom-nav {
    background: rgba(9, 11, 20, 0.94);
    border-color: var(--glass-border);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .sidebar { background: var(--glass); }
html[data-theme="dark"] .mobile-topbar-brand strong,
html[data-theme="dark"] .topbar-right h1 { color: var(--text); }
html[data-theme="dark"] .topbar-right p { color: var(--text-muted); }

html[data-theme="dark"] .nav-group { background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .nav-group.tone-violet { background: rgba(124, 58, 237, 0.14); border-color: rgba(167, 139, 250, 0.22); }
html[data-theme="dark"] .nav-group.tone-teal { background: rgba(13, 148, 136, 0.14); border-color: rgba(45, 212, 191, 0.22); }
html[data-theme="dark"] .nav-group.tone-emerald { background: rgba(16, 185, 129, 0.14); border-color: rgba(52, 211, 153, 0.22); }
html[data-theme="dark"] .nav-group.tone-amber { background: rgba(245, 158, 11, 0.14); border-color: rgba(251, 191, 36, 0.22); }
html[data-theme="dark"] .nav-group.tone-sky { background: rgba(14, 165, 233, 0.14); border-color: rgba(56, 189, 248, 0.22); }
html[data-theme="dark"] .nav-group.tone-rose { background: rgba(244, 63, 94, 0.14); border-color: rgba(251, 113, 133, 0.22); }
html[data-theme="dark"] .nav-group.tone-slate { background: rgba(100, 116, 139, 0.14); border-color: rgba(148, 163, 184, 0.2); }
html[data-theme="dark"] .nav-group.tone-indigo { background: rgba(99, 102, 241, 0.14); border-color: rgba(129, 140, 248, 0.22); }

html[data-theme="dark"] .nav-group-label,
html[data-theme="dark"] .nav-group.tone-violet .nav-group-label { color: #c4b5fd; }
html[data-theme="dark"] .nav-group.tone-teal .nav-group-label { color: #5eead4; }
html[data-theme="dark"] .nav-group.tone-emerald .nav-group-label { color: #6ee7b7; }
html[data-theme="dark"] .nav-group.tone-amber .nav-group-label { color: #fbbf24; }
html[data-theme="dark"] .nav-group.tone-sky .nav-group-label { color: #7dd3fc; }
html[data-theme="dark"] .nav-group.tone-rose .nav-group-label { color: #fb7185; }
html[data-theme="dark"] .nav-group.tone-slate .nav-group-label { color: #cbd5e1; }

html[data-theme="dark"] .nav-item { color: var(--text-muted); }
html[data-theme="dark"] .nav-item:hover:not(.disabled) {
    background: var(--purple-50);
    color: #e9d5ff;
}
html[data-theme="dark"] .mob-nav-item { color: var(--text-muted); }
html[data-theme="dark"] .mob-nav-item.active {
    background: var(--purple-50);
    color: #e9d5ff;
}
html[data-theme="dark"] .nav-soon,
html[data-theme="dark"] .nav-item:not(.active) .nav-badge {
    background: var(--purple-100);
    color: #c4b5fd;
}
html[data-theme="dark"] .quick-svc-trigger,
html[data-theme="dark"] .quick-svc-menu-btn {
    background: var(--surface-2);
    color: #c4b5fd;
    border-color: var(--glass-border);
}
html[data-theme="dark"] .quick-svc-panel,
html[data-theme="dark"] .quick-svc-dropdown {
    background: var(--surface-elevated) !important;
    color: var(--text);
    border-color: var(--glass-border);
}

/* Account menu */
html[data-theme="dark"] .panel-account-trigger,
html[data-theme="dark"] .panel-account-btn {
    background: var(--surface-2);
    color: #e9d5ff;
    border-color: var(--glass-border);
}
html[data-theme="dark"] .panel-account-icon {
    background: var(--purple-50);
    color: #c4b5fd;
}
html[data-theme="dark"] .panel-account-dropdown {
    background: var(--surface-elevated);
    border-color: var(--glass-border);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .panel-account-dropdown-name,
html[data-theme="dark"] .panel-account-dropdown-item,
html[data-theme="dark"] .panel-theme-toggle {
    color: var(--text);
}
html[data-theme="dark"] .panel-account-dropdown-item:hover,
html[data-theme="dark"] .panel-theme-toggle:hover {
    background: var(--purple-50);
}
html[data-theme="dark"] .panel-theme-toggle-state { color: var(--text-muted); }
html[data-theme="dark"] .panel-theme-toggle-icon {
    background: var(--purple-100);
    color: #c4b5fd;
}
html[data-theme="dark"] .panel-account-dropdown-item.is-danger { color: #fca5a5; }
html[data-theme="dark"] .panel-account-dropdown-item.is-danger:hover { background: var(--danger-soft); }

/* Auth */
html[data-theme="dark"] .auth-gate { background: var(--bg); }
html[data-theme="dark"] .auth-gate-card {
    background: var(--surface-2);
    color: var(--text);
}
html[data-theme="dark"] .auth-login-form input,
html[data-theme="dark"] .auth-register-form select,
html[data-theme="dark"] .account-field input {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--glass-border);
}
html[data-theme="dark"] .account-field input.readonly {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}
html[data-theme="dark"] .auth-exam-chip {
    background: var(--surface-3);
    border-color: var(--glass-border);
    color: var(--text);
}
html[data-theme="dark"] .auth-exam-empty {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}
html[data-theme="dark"] .account-badge {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}
html[data-theme="dark"] .credentials-status.ok { background: var(--ok-soft); color: #6ee7b7; }
html[data-theme="dark"] .credentials-status.warn { background: var(--warn-soft); color: #fbbf24; }

html[data-theme="dark"] .live-badge {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}
html[data-theme="dark"] .panel-live-chip,
html[data-theme="dark"] .dash-live-timer-chip {
    color: #f5e8ff;
    background: linear-gradient(135deg, rgba(91, 33, 182, 0.7), rgba(157, 23, 77, 0.45));
    border-color: rgba(196, 181, 253, 0.35);
}

/* Sheets / modals / menus */
html[data-theme="dark"] .sheet-backdrop,
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .pers-backdrop,
html[data-theme="dark"] .mood-note-backdrop {
    background: rgba(0, 0, 0, 0.68);
}
html[data-theme="dark"] .sheet-header,
html[data-theme="dark"] .sheet-footer,
html[data-theme="dark"] .sheet-body,
html[data-theme="dark"] .sheet-panel,
html[data-theme="dark"] .bottom-sheet,
html[data-theme="dark"] .planner-sheet,
html[data-theme="dark"] .detail-sheet,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .mood-note-card,
html[data-theme="dark"] .pers-modal,
html[data-theme="dark"] .pers-sheet,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .menu-panel,
html[data-theme="dark"] .submenu,
html[data-theme="dark"] .context-menu {
    background: var(--surface-elevated) !important;
    color: var(--text) !important;
    border-color: var(--glass-border) !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: var(--input-bg) !important;
    color: var(--text) !important;
    border-color: var(--glass-border) !important;
    color-scheme: dark;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-faint) !important;
    opacity: 1;
}

/* Generic cards / bars / chips — kill leftover light surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .dash-sub-card,
html[data-theme="dark"] .dash-clock-card,
html[data-theme="dark"] .dash-sleep-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .month-cal-card,
html[data-theme="dark"] .month-stat-cell,
html[data-theme="dark"] .session-card,
html[data-theme="dark"] .report-card,
html[data-theme="dark"] .planner-card,
html[data-theme="dark"] .week-card,
html[data-theme="dark"] .cal-card,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .group-card,
html[data-theme="dark"] .level-card,
html[data-theme="dark"] .water-card,
html[data-theme="dark"] .mood-card,
html[data-theme="dark"] .film-card,
html[data-theme="dark"] .orbit-card,
html[data-theme="dark"] .analyzer-card,
html[data-theme="dark"] .progress-card,
html[data-theme="dark"] .study-card,
html[data-theme="dark"] .pers-card,
html[data-theme="dark"] .account-form-card,
html[data-theme="dark"] .account-hero-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tab-bar,
html[data-theme="dark"] .segmented,
html[data-theme="dark"] .map-stats-ribbon,
html[data-theme="dark"] .map-stat,
html[data-theme="dark"] .view-switch,
html[data-theme="dark"] .mode-switch,
html[data-theme="dark"] .chip-row .chip,
html[data-theme="dark"] .pill:not(.nav-badge),
html[data-theme="dark"] .tag:not(.nav-badge):not(.nav-soon),
html[data-theme="dark"] .week-day,
html[data-theme="dark"] .cal-day,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .seg-btn,
html[data-theme="dark"] .view-tab,
html[data-theme="dark"] .chip {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--glass-border) !important;
}

html[data-theme="dark"] .seg-btn.active,
html[data-theme="dark"] .view-tab.active,
html[data-theme="dark"] .chip.active,
html[data-theme="dark"] .filter-chip.active {
    background: linear-gradient(135deg, var(--purple-600), #a855f7) !important;
    color: #fff !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .dash-svc-group.tone-violet { background: linear-gradient(160deg, rgba(76, 29, 149, 0.4), rgba(20, 24, 42, 0.95)); }
html[data-theme="dark"] .dash-svc-group.tone-teal { background: linear-gradient(160deg, rgba(13, 148, 136, 0.32), rgba(20, 24, 42, 0.95)); }
html[data-theme="dark"] .dash-svc-group.tone-emerald { background: linear-gradient(160deg, rgba(16, 185, 129, 0.28), rgba(20, 24, 42, 0.95)); }
html[data-theme="dark"] .dash-svc-group.tone-amber { background: linear-gradient(160deg, rgba(180, 83, 9, 0.3), rgba(20, 24, 42, 0.95)); }
html[data-theme="dark"] .dash-svc-group.tone-sky { background: linear-gradient(160deg, rgba(3, 105, 161, 0.3), rgba(20, 24, 42, 0.95)); }
html[data-theme="dark"] .dash-svc-group.tone-rose { background: linear-gradient(160deg, rgba(190, 18, 60, 0.28), rgba(20, 24, 42, 0.95)); }
html[data-theme="dark"] .dash-svc-group.tone-slate { background: linear-gradient(160deg, rgba(51, 65, 85, 0.4), rgba(20, 24, 42, 0.95)); }
html[data-theme="dark"] .dash-svc-link {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .dash-svc-link:hover { background: rgba(139, 92, 246, 0.16) !important; }

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-color: var(--glass-border); color: var(--text); }
html[data-theme="dark"] th { background: var(--surface-3); }
html[data-theme="dark"] td { background: var(--surface); }
html[data-theme="dark"] tr:nth-child(even) td { background: var(--surface-2); }

/* Charts */
html[data-theme="dark"] .mood-line-chart .mood-zero-line { stroke: #4c1d95; }
html[data-theme="dark"] .mood-line-chart .mood-line-dot { stroke: var(--surface); }
html[data-theme="dark"] .mood-line-chart .mood-line-dot-bg { fill: var(--surface-2); stroke: #f9a8d4; }
html[data-theme="dark"] .mood-line-chart .mood-axis-label,
html[data-theme="dark"] .mood-line-chart .mood-y-label { fill: var(--chart-label); }
html[data-theme="dark"] .mood-analysis { color: #e9d5ff; }
html[data-theme="dark"] .bar-chart-svg text,
html[data-theme="dark"] .line-chart-svg text,
html[data-theme="dark"] .study-chart-svg text { fill: var(--chart-label) !important; }
html[data-theme="dark"] .chart-grid-line { stroke: var(--chart-grid) !important; }

/* ════════════ Feature: Answer sheet ════════════ */
html[data-theme="dark"] .as-breadcrumb,
html[data-theme="dark"] .as-live-bar,
html[data-theme="dark"] .as-timer-bar,
html[data-theme="dark"] .as-status-bar,
html[data-theme="dark"] [class*="as-"][class*="bar"],
html[data-theme="dark"] .as-panel,
html[data-theme="dark"] .as-card,
html[data-theme="dark"] .as-q-card,
html[data-theme="dark"] .as-option:not(.selected):not(.correct):not(.wrong) {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--glass-border) !important;
}
html[data-theme="dark"] .as-crumb,
html[data-theme="dark"] .as-crumb-sep { color: var(--text-muted) !important; }
html[data-theme="dark"] .as-crumb.current {
    background: var(--purple-100) !important;
    color: #e9d5ff !important;
}
html[data-theme="dark"] .as-crumb:hover:not(.current) {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #f3f0ff !important;
}

/* ════════════ Feature: Planner ════════════ */
html[data-theme="dark"] .planner-body {
    --map-bg: #0c101c;
    --map-road: rgba(139, 92, 246, 0.14);
    --map-pin-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    --sheet-bg: #171c2f;
    --planner-surface: #171c2f;
    --surface: #171c2f;
}
html[data-theme="dark"] .planner-body .day-canvas,
html[data-theme="dark"] .planner-body .week-canvas,
html[data-theme="dark"] .planner-body .map-canvas,
html[data-theme="dark"] .planner-body .timeline-board,
html[data-theme="dark"] .planner-body .schedule-board {
    background: var(--map-bg) !important;
}
html[data-theme="dark"] .planner-body .hour-label,
html[data-theme="dark"] .planner-body .time-label,
html[data-theme="dark"] .planner-body .week-col-head {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .planner-body .period-chip,
html[data-theme="dark"] .planner-body .cycle-chip,
html[data-theme="dark"] .planner-body [class*="period-label"],
html[data-theme="dark"] .planner-body [class*="cycle-pill"] {
    background: rgba(244, 63, 94, 0.16) !important;
    color: #fda4af !important;
    border-color: rgba(251, 113, 133, 0.4) !important;
}

/* ════════════ Feature: Calendar ════════════ */
html[data-theme="dark"] .cal-body,
html[data-theme="dark"] body.cal-body {
    --cal-surface: #171c2f;
    --cal-border: rgba(45, 212, 191, 0.22);
    --cal-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    --cal-accent-soft: rgba(13, 148, 136, 0.18);
    background: var(--bg) !important;
}
html[data-theme="dark"] .cal-mode-switch,
html[data-theme="dark"] .cal-view-tabs,
html[data-theme="dark"] .cal-toggle-row,
html[data-theme="dark"] .cal-toolbar,
html[data-theme="dark"] .cal-board,
html[data-theme="dark"] .cal-timeline,
html[data-theme="dark"] .cal-day-canvas,
html[data-theme="dark"] .cal-week-board {
    background: var(--surface-2) !important;
    border-color: var(--cal-border, var(--glass-border)) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .cal-mode-switch button,
html[data-theme="dark"] .cal-view-tab,
html[data-theme="dark"] .cal-tab {
    background: var(--surface-3) !important;
    color: var(--text-muted) !important;
    border-color: var(--glass-border) !important;
}
html[data-theme="dark"] .cal-mode-switch button.active,
html[data-theme="dark"] .cal-view-tab.active,
html[data-theme="dark"] .cal-tab.active {
    background: linear-gradient(135deg, #0d9488, #14b8a6) !important;
    color: #fff !important;
}
html[data-theme="dark"] .cal-desktop-topbar .topbar-right h1,
html[data-theme="dark"] .cal-desktop-topbar .topbar-right p {
    color: var(--text) !important;
}
html[data-theme="dark"] .cal-desktop-topbar .topbar-right p { color: var(--text-muted) !important; }

/* ════════════ Feature: AI Chat ════════════ */
html[data-theme="dark"] {
    --chat-accent: #8b5cf6;
    --chat-accent-soft: #241b3d;
    --chat-bot: #1b2035;
    --chat-border: rgba(139, 92, 246, 0.22);
    --chat-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    --chat-user: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}
html[data-theme="dark"] .chat-main,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .inbox-main,
html[data-theme="dark"] .chat-composer,
html[data-theme="dark"] .chat-input-bar {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--chat-border) !important;
}
html[data-theme="dark"] .chat-header-info h1,
html[data-theme="dark"] .inbox-header-info h1,
html[data-theme="dark"] .inbox-name,
html[data-theme="dark"] .msg-text,
html[data-theme="dark"] .bot-msg,
html[data-theme="dark"] .chat-bubble.bot {
    color: var(--text) !important;
}
html[data-theme="dark"] .chat-header-info p,
html[data-theme="dark"] .inbox-header-info p,
html[data-theme="dark"] .inbox-preview,
html[data-theme="dark"] .inbox-time,
html[data-theme="dark"] .inbox-loading,
html[data-theme="dark"] .inbox-empty {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .inbox-item {
    color: var(--text);
    border-bottom-color: var(--chat-border);
}
html[data-theme="dark"] .inbox-item:hover {
    background: rgba(139, 92, 246, 0.12) !important;
}
html[data-theme="dark"] .chat-bubble.bot,
html[data-theme="dark"] .msg.bot,
html[data-theme="dark"] .assistant-bubble {
    background: var(--chat-bot) !important;
    color: var(--text) !important;
    border-color: var(--chat-border) !important;
}
html[data-theme="dark"] .chat-back-btn,
html[data-theme="dark"] .chat-icon-btn {
    background: var(--surface-3) !important;
    color: #c4b5fd !important;
    border-color: var(--glass-border) !important;
}

/* ════════════ Feature: Messenger ════════════ */
html[data-theme="dark"] {
    --ms-ink: #f1f5ff;
    --ms-ink-soft: #1b2035;
    --ms-accent-soft: rgba(13, 148, 136, 0.2);
    --ms-line: rgba(148, 163, 184, 0.18);
    --ms-muted: #9aa3c2;
    --ms-theirs: #1b2035;
    --ms-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .ms-body,
html[data-theme="dark"] .ms-main,
html[data-theme="dark"] .ms-theme {
    background: var(--bg) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .ms-header,
html[data-theme="dark"] .ms-composer,
html[data-theme="dark"] .ms-sidebar,
html[data-theme="dark"] .ms-room-card,
html[data-theme="dark"] .ms-inbox-item {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--ms-line) !important;
}
html[data-theme="dark"] .ms-inbox-item .title,
html[data-theme="dark"] .ms-room-title,
html[data-theme="dark"] .ms-name {
    color: var(--text) !important;
}
html[data-theme="dark"] .ms-preview,
html[data-theme="dark"] .ms-meta { color: var(--text-muted) !important; }
html[data-theme="dark"] .ms-bubble.theirs,
html[data-theme="dark"] .ms-msg.theirs {
    background: var(--ms-theirs) !important;
    color: var(--text) !important;
}

/* ════════════ Feature: Leveling ════════════ */
html[data-theme="dark"] .leveling-theme {
    --lvl-ink: #f1f5ff;
    --lvl-muted: #9aa3c2;
    --lvl-faint: #6b7394;
    --lvl-surface: #171c2f;
    --lvl-border: rgba(148, 163, 184, 0.22);
    --lvl-accent-soft: rgba(234, 88, 12, 0.2);
    --lvl-study-soft: rgba(13, 148, 136, 0.18);
    --lvl-console-soft: rgba(37, 99, 235, 0.18);
    --lvl-ai-soft: rgba(124, 58, 237, 0.18);
    --lvl-company-soft: rgba(192, 38, 211, 0.16);
}
html[data-theme="dark"] .leveling-theme .lvl-hero,
html[data-theme="dark"] .leveling-theme .lvl-card,
html[data-theme="dark"] .leveling-theme .lvl-check-card,
html[data-theme="dark"] .leveling-theme .lvl-check-group,
html[data-theme="dark"] .leveling-theme .lvl-status,
html[data-theme="dark"] .leveling-theme [class*="lvl-"][class*="card"] {
    background: var(--lvl-surface) !important;
    color: var(--lvl-ink) !important;
    border-color: var(--lvl-border) !important;
}
html[data-theme="dark"] .leveling-theme h1,
html[data-theme="dark"] .leveling-theme h2,
html[data-theme="dark"] .leveling-theme h3,
html[data-theme="dark"] .leveling-theme .lvl-title,
html[data-theme="dark"] .leveling-theme .lvl-hero-title {
    color: var(--lvl-ink) !important;
}
html[data-theme="dark"] .leveling-theme .lvl-muted,
html[data-theme="dark"] .leveling-theme .lvl-sub,
html[data-theme="dark"] .leveling-theme p {
    color: var(--lvl-muted) !important;
}
html[data-theme="dark"] .leveling-theme .lvl-pill,
html[data-theme="dark"] .leveling-theme .lvl-badge {
    background: var(--surface-3) !important;
    color: var(--text) !important;
    border-color: var(--lvl-border) !important;
}

/* ════════════ Feature: Water ════════════ */
html[data-theme="dark"] .water-theme {
    --w-ink: #e0f2fe;
    --w-muted: #94a3b8;
    --w-surface: #152033;
    --w-border: rgba(56, 189, 248, 0.22);
    --w-soft: rgba(14, 165, 233, 0.16);
    --w-line: rgba(56, 189, 248, 0.28);
    background:
        radial-gradient(900px 500px at 90% -5%, rgba(14, 165, 233, 0.18), transparent 55%),
        radial-gradient(700px 420px at -10% 100%, rgba(6, 182, 212, 0.1), transparent 50%),
        var(--bg) !important;
}
html[data-theme="dark"] .water-theme .water-hero,
html[data-theme="dark"] .water-theme .water-card,
html[data-theme="dark"] .water-theme .water-view-tabs,
html[data-theme="dark"] .water-theme .water-nav-btn,
html[data-theme="dark"] .water-theme .water-log-item,
html[data-theme="dark"] .water-theme .water-panel,
html[data-theme="dark"] .water-theme [class*="water-"][class*="card"] {
    background: var(--w-surface) !important;
    color: var(--w-ink) !important;
    border-color: var(--w-border) !important;
}
html[data-theme="dark"] .water-theme .water-log-item,
html[data-theme="dark"] .water-theme .log-row,
html[data-theme="dark"] .water-theme .water-entry {
    background: var(--surface-3) !important;
    color: #e0f2fe !important;
}
html[data-theme="dark"] .water-theme h1,
html[data-theme="dark"] .water-theme h2,
html[data-theme="dark"] .water-theme h3,
html[data-theme="dark"] .water-theme strong { color: var(--w-ink) !important; }
html[data-theme="dark"] .water-theme small,
html[data-theme="dark"] .water-theme .water-muted,
html[data-theme="dark"] .water-theme p { color: var(--w-muted) !important; }
html[data-theme="dark"] .water-theme .water-help-btn {
    background: linear-gradient(145deg, #0c4a6e, #164e63) !important;
    color: #e0f2fe !important;
}
html[data-theme="dark"] .water-theme .chart-axis text,
html[data-theme="dark"] .water-theme svg text {
    fill: #94a3b8 !important;
}

/* ════════════ Feature: Mood / period ════════════ */
html[data-theme="dark"] .mood-body,
html[data-theme="dark"] body.mood-body {
    background: var(--bg) !important;
}
html[data-theme="dark"] .mood-card,
html[data-theme="dark"] .mood-panel,
html[data-theme="dark"] .mood-hero,
html[data-theme="dark"] .cycle-card,
html[data-theme="dark"] .period-card,
html[data-theme="dark"] .mood-note-card,
html[data-theme="dark"] [class*="cycle-"],
html[data-theme="dark"] [class*="period-card"] {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--glass-border) !important;
}
html[data-theme="dark"] .mood-card h2,
html[data-theme="dark"] .mood-card h3,
html[data-theme="dark"] .cycle-card h2,
html[data-theme="dark"] .cycle-card strong,
html[data-theme="dark"] .period-card h2,
html[data-theme="dark"] .period-card strong {
    color: var(--text) !important;
}
html[data-theme="dark"] .mood-card p,
html[data-theme="dark"] .cycle-card p,
html[data-theme="dark"] .period-card p,
html[data-theme="dark"] .mood-card small,
html[data-theme="dark"] .cycle-card small {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .period-chip,
html[data-theme="dark"] .cycle-pill,
html[data-theme="dark"] .mood-chip,
html[data-theme="dark"] [class*="period"][class*="pill"],
html[data-theme="dark"] [class*="cycle"][class*="pill"] {
    background: rgba(244, 63, 94, 0.18) !important;
    color: #fda4af !important;
    border-color: rgba(251, 113, 133, 0.4) !important;
}

/* Notes section (mood notes list etc.) */
html[data-theme="dark"] .notes-panel,
html[data-theme="dark"] .notes-card,
html[data-theme="dark"] .note-group,
html[data-theme="dark"] [class*="note"][class*="section"] {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .notes-panel h2,
html[data-theme="dark"] .notes-panel h3 { color: var(--text) !important; }
html[data-theme="dark"] .notes-panel p,
html[data-theme="dark"] .notes-panel small { color: var(--text-muted) !important; }

/* Soft pastel leftovers → dark tinted */
html[data-theme="dark"] .bg-soft,
html[data-theme="dark"] .soft-box,
html[data-theme="dark"] .pastel-card {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .text-success,
html[data-theme="dark"] .ok-text { color: #34d399 !important; }
html[data-theme="dark"] .text-warning,
html[data-theme="dark"] .warn-text { color: #fbbf24 !important; }
html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .err-text { color: #f87171 !important; }

/* Breadcrumb / back links across features */
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .page-back,
html[data-theme="dark"] a.dash-back,
html[data-theme="dark"] .account-back-link {
    color: #c4b5fd !important;
}

/* Readable menus & submenus globally */
html[data-theme="dark"] [role="menu"],
html[data-theme="dark"] [role="listbox"],
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .select-menu,
html[data-theme="dark"] .option-list {
    background: var(--surface-elevated) !important;
    color: var(--text) !important;
    border-color: var(--glass-border) !important;
}
html[data-theme="dark"] [role="menuitem"],
html[data-theme="dark"] [role="option"] {
    color: var(--text) !important;
}

html[data-theme="dark"] * {
    scrollbar-color: #3d3560 transparent;
}