/* ===== Shell Nav — Shared Navigation Layer ===== */

:root {
    --sn-navy-dark: #0f172a;
    --sn-navy-darker: #0c1322;
    --sn-navy-light: #1e293b;
    --sn-gold: #A08853;
    --sn-gold-light: #c4b391;
    --sn-text-light: #f8fafc;
    --sn-text-muted: #94a3b8;
    --sn-sidebar-collapsed: 72px;
    --sn-sidebar-expanded: 220px;
    --sn-bottombar-height: 70px;
    --sn-miniplayer-height: 48px;
    --sn-bottom-offset: 0px;
    --sn-left-offset: 0px;
    --keyboard-height: 0px;
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
}

/* ===== Capacitor Native Safe Area ===== */
html.capacitor-native body {
    padding-top: 50px;
}

html.capacitor-native .shell-nav-sidebar {
    padding-top: var(--sat);
}

html.capacitor-native .shell-nav-bottombar {
    padding-bottom: var(--sab);
}

html.capacitor-native.keyboard-open .shell-nav-bottombar {
    display: none !important;
}

/* ===== SIDEBAR (Desktop) ===== */
.shell-nav-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sn-sidebar-collapsed);
    background: rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
    transition: width 0.25s ease;
}

.shell-nav-sidebar:hover {
    width: var(--sn-sidebar-expanded);
}

/* Logo area */
.shell-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 56px;
}

.shell-nav-logo img {
    height: 28px;
    flex-shrink: 0;
}

.shell-nav-logo-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--sn-gold);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease 0.05s;
}

.shell-nav-sidebar:hover .shell-nav-logo-text {
    opacity: 1;
}

/* Nav items */
.shell-nav-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    gap: 4px;
}

.shell-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    color: var(--sn-text-muted);
}

.shell-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--sn-text-light);
}

.shell-nav-item.active {
    border-left-color: var(--sn-gold);
    color: var(--sn-gold);
    background: rgba(160, 136, 83, 0.08);
}

.shell-nav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.shell-nav-label {
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    opacity: 0;
    transition: opacity 0.2s ease 0.05s;
}

.shell-nav-sidebar:hover .shell-nav-label {
    opacity: 1;
}

/* Sidebar bottom section */
.shell-nav-bottom {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shell-nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

.shell-nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sn-navy-light);
    border: 2px solid rgba(160, 136, 83, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.shell-nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.shell-nav-avatar svg {
    width: 18px;
    height: 18px;
    color: var(--sn-text-muted);
}

.shell-nav-username {
    font-size: 0.8rem;
    color: var(--sn-text-muted);
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    opacity: 0;
    transition: opacity 0.2s ease 0.05s;
}

.shell-nav-sidebar:hover .shell-nav-username {
    opacity: 1;
}

/* Theme toggle */
.shell-nav-theme-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    color: var(--sn-text-muted);
    border: none;
    background: none;
    width: 100%;
}

.shell-nav-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--sn-text-light);
}

.shell-nav-theme-toggle svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.shell-nav-theme-label {
    font-size: 0.8rem;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease 0.05s;
}

.shell-nav-sidebar:hover .shell-nav-theme-label {
    opacity: 1;
}

/* ===== BOTTOM BAR (Mobile) ===== */
.shell-nav-bottombar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--sn-bottombar-height);
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.shell-nav-bottombar-inner {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
    padding: 6px 4px 0;
}

html.capacitor-native .shell-nav-bottombar {
    height: calc(var(--sn-bottombar-height) + 6px);
}

html.capacitor-native .shell-nav-bottombar-inner {
    padding: 3px 4px 12px;
}

.shell-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 6px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
    transition: color 0.2s;
    color: var(--sn-text-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.shell-nav-tab.active {
    color: var(--sn-gold);
}

.shell-nav-tab svg {
    width: 22px;
    height: 22px;
}

.shell-nav-tab-label {
    font-size: 0.65rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.02em;
}


/* ===== MINI-PLAYER ===== */
.shell-nav-miniplayer {
    position: fixed;
    bottom: 0;
    left: var(--sn-sidebar-collapsed);
    right: 0;
    height: var(--sn-miniplayer-height);
    background: rgba(12, 19, 34, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(160, 136, 83, 0.2);
    display: none;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    z-index: 9998;
    font-family: 'Poppins', sans-serif;
}

.shell-nav-miniplayer.visible {
    display: flex;
}

.shell-nav-miniplayer-btn {
    background: none;
    border: none;
    color: var(--sn-gold);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.shell-nav-miniplayer-btn:hover {
    opacity: 0.8;
}

.shell-nav-miniplayer-btn svg {
    width: 20px;
    height: 20px;
}

.shell-nav-miniplayer-title {
    font-size: 0.8rem;
    color: var(--sn-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.shell-nav-miniplayer-progress {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.shell-nav-miniplayer-progress-fill {
    height: 100%;
    background: var(--sn-gold);
    border-radius: 2px;
    width: 0%;
    transition: width 0.2s linear;
}

.shell-nav-miniplayer-time {
    font-size: 0.7rem;
    color: var(--sn-text-muted);
    font-family: monospace;
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

.shell-nav-miniplayer-close {
    background: none;
    border: none;
    color: var(--sn-text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.shell-nav-miniplayer-close:hover {
    color: var(--sn-text-light);
}

.shell-nav-miniplayer-close svg {
    width: 16px;
    height: 16px;
}

/* Mini-player artwork */
.shell-nav-mp-artwork {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(160, 136, 83, 0.25);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shell-nav-mp-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shell-nav-mp-artwork svg {
    width: 18px;
    height: 18px;
    color: var(--sn-gold);
}

/* Mini-player skip buttons */
.shell-nav-mp-skip {
    background: none;
    border: none;
    color: var(--sn-text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.shell-nav-mp-skip:hover {
    color: var(--sn-gold);
}

.shell-nav-mp-skip svg {
    width: 18px;
    height: 18px;
}

/* ===== RESPONSIVE — MOBILE ===== */
@media (max-width: 768px) {
    .shell-nav-sidebar {
        display: none;
    }

    .shell-nav-bottombar {
        display: block;
    }

    /* Mini-player adjusts for mobile */
    .shell-nav-miniplayer {
        left: 0;
        bottom: var(--sn-bottombar-height);
    }

    .shell-nav-miniplayer-title {
        max-width: 120px;
    }

    .shell-nav-mp-artwork {
        display: none;
    }
}

/* Desktop: mini-player active adjustments */
@media (min-width: 769px) {
    html.sn-miniplayer-active .shell-nav-miniplayer {
        bottom: 0;
    }
}


/* ================================================================
   LIGHT THEME
   ================================================================ */

/* --- Shell Nav variables --- */
html.light-theme {
    --sn-navy-dark: #faf8f5;
    --sn-navy-darker: #f0ece6;
    --sn-navy-light: #ffffff;
    --sn-text-light: #2d2a26;
    --sn-text-muted: #6b6560;
    --sn-gold: #A08853;
    --sn-gold-light: #c4b391;
}

/* --- Shell nav component overrides --- */
html.light-theme .shell-nav-sidebar {
    background: rgba(250, 248, 245, 0.97);
    border-right-color: rgba(0, 0, 0, 0.08);
}

html.light-theme .shell-nav-logo {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

html.light-theme .shell-nav-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

html.light-theme .shell-nav-item.active {
    background: rgba(160, 136, 83, 0.1);
}

html.light-theme .shell-nav-bottom {
    border-top-color: rgba(0, 0, 0, 0.06);
}

html.light-theme .shell-nav-avatar {
    background: #f0ece6;
    border-color: rgba(160, 136, 83, 0.3);
}

html.light-theme .shell-nav-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

html.light-theme .shell-nav-bottombar {
    background: rgba(250, 248, 245, 0.98);
    border-top-color: rgba(0, 0, 0, 0.08);
}

html.light-theme .shell-nav-miniplayer {
    background: rgba(245, 242, 237, 0.98);
    border-top-color: rgba(160, 136, 83, 0.25);
}

html.light-theme .shell-nav-miniplayer-progress {
    background: rgba(0, 0, 0, 0.08);
}


/* ================================================================
   LIGHT THEME — Page-level overrides
   Override CSS variables that pages define in their own :root
   ================================================================ */

html.light-theme {
    --navy-dark: #faf8f5;
    --navy-darker: #f0ece6;
    --navy-light: #ffffff;
    --text-light: #2d2a26;
    --text-muted: #6b6560;
    --gold: #A08853;
    --gold-light: #c4b391;
    --success: #0d9668;
    --danger: #dc2626;
    --border-color: rgba(0, 0, 0, 0.1);
}

/* --- Body --- */
html.light-theme body {
    background-color: #faf8f5 !important;
    color: #2d2a26 !important;
}

/* --- Background elements (stars, blobs, gradients) --- */
html.light-theme .background-stars,
html.light-theme .background-blob {
    display: none !important;
}

html.light-theme .orb,
html.light-theme .orb-1,
html.light-theme .orb-2,
html.light-theme .orb-3 {
    display: none !important;
}

/* --- Sidebar (page-level, e.g. dashboard weeks, community groups) --- */
html.light-theme .sidebar {
    background: #f0ece6 !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .sidebar .week-item,
html.light-theme .sidebar .group-item {
    color: #4a4540;
}

html.light-theme .sidebar .week-item:hover,
html.light-theme .sidebar .group-item:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #2d2a26;
}

html.light-theme .sidebar .week-item.active {
    background: rgba(160, 136, 83, 0.1) !important;
    color: #A08853;
}

html.light-theme .sidebar .phase-header {
    color: #A08853;
}

html.light-theme .sidebar .logo-area {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Mobile sidebar */
@media (max-width: 900px) {
    html.light-theme .sidebar {
        background: #f0ece6 !important;
    }
}

/* --- Top bars / headers --- */
html.light-theme .top-bar,
html.light-theme .top-nav,
html.light-theme .chat-header {
    background: rgba(250, 248, 245, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* --- Main content areas --- */
html.light-theme .main-content,
html.light-theme .main-area,
html.light-theme .chat-container,
html.light-theme .page-container,
html.light-theme .scroll-area {
    background: transparent;
}

/* --- Cards (dashboard, community, content) --- */
html.light-theme .card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html.light-theme .card:hover {
    border-color: rgba(160, 136, 83, 0.3) !important;
}

html.light-theme .card-header {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .card-title {
    color: #A08853;
}

/* --- Task items (dashboard) --- */
html.light-theme .task-item {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .task-item:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .task-item.completed {
    background: rgba(0, 0, 0, 0.02) !important;
}

html.light-theme .task-text {
    color: #2d2a26;
}

html.light-theme .task-sub {
    color: #6b6560;
}

/* --- Media items (dashboard) --- */
html.light-theme .media-item {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #2d2a26;
}

html.light-theme .media-item:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .media-icon-box {
    background: rgba(160, 136, 83, 0.12);
}

/* --- Chat messages --- */
html.light-theme .message {
    background: transparent;
}

html.light-theme .message.assistant .message-content {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #2d2a26;
}

html.light-theme .message.user .message-content {
    background: rgba(160, 136, 83, 0.1);
    color: #2d2a26;
}

html.light-theme .message.assistant .message-content strong {
    color: #A08853;
}

/* --- Chat sidebar --- */
html.light-theme .chat-sidebar,
html.light-theme #chatSidebar {
    background: #f0ece6 !important;
    border-right-color: rgba(0, 0, 0, 0.08);
}

html.light-theme .chat-sidebar .sidebar-item,
html.light-theme .chat-sidebar .history-item {
    color: #4a4540;
}

html.light-theme .chat-sidebar .sidebar-item:hover,
html.light-theme .chat-sidebar .history-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* --- Chat input area --- */
html.light-theme .chat-input-area {
    background: rgba(250, 248, 245, 0.95) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme input[type="text"],
html.light-theme textarea,
html.light-theme select {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #2d2a26 !important;
}

html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
    color: #9c9690 !important;
}

/* --- Community specific --- */
html.light-theme .post-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html.light-theme .post-card:hover {
    border-color: rgba(160, 136, 83, 0.3) !important;
}

html.light-theme .create-post-area,
html.light-theme .new-post-container {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

html.light-theme .badge-card,
html.light-theme .streak-card {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* --- Content page modules --- */
html.light-theme .module-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .module-card:hover {
    border-color: rgba(160, 136, 83, 0.4) !important;
}

/* --- Audio player --- */
html.light-theme .premium-audio-player {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(160, 136, 83, 0.3) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

html.light-theme .premium-audio-player::before {
    opacity: 0.4;
}

html.light-theme .audio-title {
    color: #A08853;
}

html.light-theme .time-display {
    color: #6b6560;
}

html.light-theme .progress-container {
    background: rgba(0, 0, 0, 0.08);
}

/* --- Modals / overlays --- */
html.light-theme .modal-overlay,
html.light-theme .drawer-overlay,
html.light-theme .sidebar-overlay,
html.light-theme .onboarding-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
}

html.light-theme .modal-content,
html.light-theme .modal-body,
html.light-theme .modal-box,
html.light-theme .modal,
html.light-theme .drawer-content,
html.light-theme .avatar-crop-modal,
html.light-theme .search-modal-content,
html.light-theme .heatmap-modal-content,
html.light-theme .voice-modal-content,
html.light-theme .milestone-modal-box {
    background: #faf8f5 !important;
    color: #2d2a26 !important;
    border-color: rgba(160, 136, 83, 0.25) !important;
}

html.light-theme .modal-header {
    background: rgba(160, 136, 83, 0.08) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .modal-footer {
    background: rgba(0, 0, 0, 0.03) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .modal-title,
html.light-theme .modal-header h3,
html.light-theme .avatar-crop-modal h3,
html.light-theme .voice-modal-header h3 {
    color: #A08853 !important;
}

html.light-theme .modal-body p,
html.light-theme .modal-body span,
html.light-theme .modal-body label,
html.light-theme .modal-body div {
    color: #4a4540 !important;
}

html.light-theme .modal-close,
html.light-theme .modal-close-x,
html.light-theme .close-modal-btn,
html.light-theme .voice-modal-close {
    color: #9c9690 !important;
}

/* JS-generated dashboard modals (inline styles use #1e293b / var(--navy-light)) */
html.light-theme #lockedModal > div,
html.light-theme #detailsModal > div {
    background: #faf8f5 !important;
    border-color: rgba(160, 136, 83, 0.3) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

html.light-theme #lockedModal,
html.light-theme #detailsModal {
    background: rgba(0, 0, 0, 0.35) !important;
}

html.light-theme #detailsModal > div div {
    color: #4a4540 !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Error overlay */
html.light-theme .error-overlay {
    background: rgba(250, 248, 245, 0.95) !important;
}

/* Regen loading overlay */
html.light-theme .regen-loading-overlay {
    background: rgba(0, 0, 0, 0.35) !important;
}

/* Tour backdrop */
html.light-theme .tour-backdrop {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Onboarding content inside overlay */
html.light-theme .onboarding-overlay > div {
    background: #faf8f5 !important;
    color: #2d2a26 !important;
}

/* Top bar (content page) */
html.light-theme .top-bar {
    background: rgba(250, 248, 245, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* --- Dashboard progress bar --- */
html.light-theme .dashboard-progress-bar {
    background: rgba(0, 0, 0, 0.08);
}

html.light-theme .dashboard-progress-label {
    color: #6b6560;
}

/* --- Dashboard week header --- */
html.light-theme .week-title {
    color: #2d2a26;
}

html.light-theme .week-label {
    color: #A08853;
}

html.light-theme .week-header {
    color: #2d2a26;
}

/* --- Checkbox in dashboard --- */
html.light-theme .checkbox {
    border-color: #9c9690;
}

/* --- Buttons --- */
html.light-theme .btn-primary,
html.light-theme .send-btn {
    background: #A08853;
    color: #ffffff;
}

html.light-theme .btn-secondary,
html.light-theme button.secondary {
    background: #f0ece6;
    color: #2d2a26;
    border-color: rgba(0, 0, 0, 0.1);
}

/* --- Misc inline dark backgrounds --- */
html.light-theme .ai-audio-player-container {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* --- Text colors --- */
html.light-theme .header-title {
    color: #A08853;
}

html.light-theme .avatar {
    color: #1e1e1e;
}

/* --- Toast --- */
html.light-theme .toast {
    background: #ffffff;
    color: #2d2a26;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- Scrollbar --- */
html.light-theme ::-webkit-scrollbar-track {
    background: #f0ece6;
}

html.light-theme ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

html.light-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* --- Reflexió / textarea areas in dashboard --- */
html.light-theme .reflexio-area,
html.light-theme .text-area-container {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

/* --- Settings icon, misc SVGs --- */
html.light-theme .settings-icon,
html.light-theme .mobile-menu-btn {
    color: #6b6560;
}

/* --- Week status dots --- */
html.light-theme .week-status {
    background: rgba(0, 0, 0, 0.1);
}

/* --- Streak/fire badge --- */
html.light-theme .streak-badge {
    color: #A08853;
}

/* --- Content page top nav --- */
html.light-theme .nav-tab {
    color: #6b6560;
}

html.light-theme .nav-tab.active,
html.light-theme .nav-tab:hover {
    color: #A08853;
}

/* --- Locked overlay in dashboard --- */
html.light-theme .lock-overlay {
    background: rgba(250, 248, 245, 0.7) !important;
}

/* --- Placeholder and empty states --- */
html.light-theme .empty-state {
    color: #6b6560;
}