/**
 * Copyright © 2023–2026 HoopFrog Inc. All rights reserved.
 * LacusCor™ and LacusCor™ are brands of HoopFrog Inc.
 * (Trademark Application No. 2374073 — CIPO)
 * HoopFrog Inc. — Federal Corp. No. 1467452-9 | Alberta CAN 2126911664
 *
 * PROPRIETARY AND CONFIDENTIAL
 * This file contains trade secrets and proprietary information of HoopFrog Inc.,
 * including but not limited to anti-ghosting processes and matching algorithms.
 * Unauthorized copying, modification, distribution, disclosure, or use of this
 * file or its contents, in whole or in part, via any medium, is strictly
 * prohibited without the express written consent of HoopFrog Inc.
 */
/**
 * LacusCor — Shared Dark Mode  /public/css/dark-mode.css
 * Include on every page. Toggle via html.dark-mode class.
 *
 * U1: Now references tokens.css variables instead of hardcoded hex values,
 * making brand color changes a single-file edit.
 * Requires tokens.css to be loaded first (it always is via <link> ordering).
 */

/* WCAG: Universal focus indicator */
:focus-visible {
    outline: 2px solid #E91E63;
    outline-offset: 2px;
}

/* ── Toggle button ── */
.dark-toggle {
    background: none;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 50%;
    min-width: 44px; min-height: 44px; width: 44px; height: 44px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
    vertical-align: middle;
}
.dark-toggle:hover { border-color: var(--lc-primary, #E91E63); }
html.dark-mode .dark-toggle { border-color: #555; color: #ffd54f; }

/* ═══════ BODY / GLOBAL ═══════ */
html.dark-mode body { background: var(--lc-dark-bg, #1a1a2e) !important; color: var(--lc-dark-text, #e8e8ef) !important; }
/* Hide light-mode ambient orbs in dark mode — dark theme has its own atmosphere */
html.dark-mode .ambient-orb { display: none !important; }



/* ═══════ HEADER ═══════ */
html.dark-mode .header { background: rgba(22,22,42,0.95) !important; border-bottom-color: var(--lc-dark-border, #333355) !important; box-shadow: 0 1px 0 rgba(50,50,80,0.3) !important; }
html.dark-mode .header-btn { color: var(--lc-dark-text-dim, #c8c8d8) !important; border-color: #555 !important; }
html.dark-mode .header-btn:hover { border-color: var(--lc-primary, #E91E63) !important; color: var(--lc-primary, #E91E63) !important; }
/* Logo: logo.png has an opaque white background, so filter tricks create a white box.
 * Solution: embrace the white bg and style it as a deliberate branded pill.
 * The pink border glow ties it to the brand accent colour. */
html.dark-mode .logo {
    background: rgba(255,255,255,0.93);
    border-radius: 10px;
    padding: 2px 10px;
    box-shadow: 0 0 0 1.5px rgba(233,30,99,0.4), 0 3px 14px rgba(233,30,99,0.18);
}
/* Other images inside header links (avatars, icons) get a subtle brightness lift */
html.dark-mode .header a img:not([alt="LacusCor"]) { filter: brightness(1.5); }

/* Theme dropdown */
html.dark-mode .theme-dd-trigger { color: #c8c8d8 !important; border-color: var(--lc-dark-border-hi, #444466) !important; }
html.dark-mode .theme-dd:hover .theme-dd-trigger { border-color: var(--lc-primary, #E91E63) !important; color: var(--lc-primary, #E91E63) !important; }
html.dark-mode .theme-dd-menu { background: var(--lc-dark-raised, #2a2a48) !important; border-color: var(--lc-dark-border-hi, #444466) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important; }
html.dark-mode .theme-dd-heading { color: #555577 !important; }
html.dark-mode .theme-dd-item { color: var(--lc-dark-text-dim, #c8c8d8) !important; }
html.dark-mode .theme-dd-item:hover { background: var(--lc-dark-border, #333355) !important; color: var(--lc-primary, #E91E63) !important; }
html.dark-mode .theme-dd-badge { background: #333355 !important; color: #6666aa !important; }

/* User dropdown */
html.dark-mode .ud-trigger { color: var(--lc-dark-text-dim, #c8c8d8) !important; border-color: var(--lc-dark-border-hi, #444466) !important; }
html.dark-mode .ud-trigger:hover { border-color: var(--lc-primary, #E91E63) !important; }
html.dark-mode .ud-menu { background: var(--lc-dark-raised, #2a2a48) !important; border-color: var(--lc-dark-border-hi, #444466) !important; box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important; }
html.dark-mode .ud-menu-name { color: var(--lc-dark-text, #e8e8ef) !important; }
html.dark-mode .ud-menu-role { background: rgba(233,30,99,0.18) !important; }
html.dark-mode .ud-divider { background: var(--lc-dark-border, #333355) !important; }
html.dark-mode .ud-item { color: var(--lc-dark-text-dim, #c8c8d8) !important; }
html.dark-mode .ud-item:hover { background: var(--lc-dark-border, #333355) !important; }
html.dark-mode .ud-item-desc { color: #6666aa !important; }

/* Navbar (index.html) */
html.dark-mode .navbar { background: rgba(22,22,42,0.95) !important; border-bottom-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode .btn--ghost { color: var(--lc-dark-text-dim, #c8c8d8) !important; border-color: #888 !important; }
html.dark-mode .btn--ghost:hover { border-color: var(--lc-primary, #E91E63) !important; color: var(--lc-primary, #E91E63) !important; }

/* Language dropdown */
html.dark-mode .lang-toggle,
html.dark-mode .lang-toggle-nav { color: var(--lc-dark-text-dim, #c8c8d8) !important; border-color: var(--lc-dark-border-hi, #444466) !important; background: var(--lc-dark-raised, #2a2a48) !important; }
html.dark-mode .lang-menu { background: var(--lc-dark-raised, #2a2a48) !important; border-color: var(--lc-dark-border-hi, #444466) !important; }
html.dark-mode .lang-option:hover { background: var(--lc-dark-border, #333355) !important; }

/* Forms / inputs */
html.dark-mode input, html.dark-mode textarea, html.dark-mode select {
    background: var(--lc-dark-raised, #2a2a48) !important; color: var(--lc-dark-text, #e8e8ef) !important; border-color: var(--lc-dark-border-hi, #444466) !important;
}
html.dark-mode select option { background: var(--lc-dark-raised, #2a2a48); color: var(--lc-dark-text, #e8e8ef); }

/* Cards / containers */
html.dark-mode .content-box { background: var(--lc-dark-card, #222240) !important; border-color: var(--lc-dark-border, #333355) !important; color: #e0e0ea !important; }
html.dark-mode table { border-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode th { background: var(--lc-dark-raised, #2a2a48) !important; color: var(--lc-dark-text-dim, #c8c8d8) !important; border-color: var(--lc-dark-border-hi, #444466) !important; }
html.dark-mode td { background: var(--lc-dark-card, #222240) !important; color: var(--lc-dark-text-dim, #c8c8d8) !important; border-color: var(--lc-dark-border, #333355) !important; }

/* Inline border overrides (handles hardcoded style attrs) */
html.dark-mode [style*="border-bottom:1px solid #eee"] { border-bottom-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode [style*="border-top:1px solid #eee"] { border-top-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode [style*="border:1px solid #eee"] { border-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode [style*="border:1px solid #ddd"] { border-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode [style*="border:1px solid #f0f0f0"] { border-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode [style*="border-color:#ede7e0"] { border-color: var(--lc-dark-border, #333355) !important; }

/* ═══════ SHARED FOOTER ═══════ */
html.dark-mode #lc-shared-footer { background: var(--lc-dark-surface, #16162a) !important; border-top-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode #lc-shared-footer a:hover { color: var(--lc-primary, #E91E63) !important; }
html.dark-mode #lc-shared-footer h3 { color: var(--lc-dark-text-dim, #c8c8d8) !important; border-bottom-color: var(--lc-primary, #E91E63) !important; }
html.dark-mode #lc-shared-footer div[style*="border-top"] { border-top-color: var(--lc-dark-border, #333355) !important; }
/* Footer logo: same pill approach directly on the img (no wrapper class available) */
html.dark-mode #lc-shared-footer img[alt="LacusCor"],
html.dark-mode #lc-footer img[alt="LacusCor"] {
    background: rgba(255,255,255,0.90);
    border-radius: 8px;
    padding: 2px 8px;
    box-shadow: 0 0 0 1px rgba(233,30,99,0.3), 0 2px 10px rgba(233,30,99,0.12);
}

/* ═══════ COOKIE CONSENT ═══════ */
html.dark-mode #lc-cookie-banner .lc-btn-reject { background: var(--lc-dark-raised, #2a2a48) !important; color: var(--lc-dark-text-dim, #c8c8d8) !important; border-color: var(--lc-dark-border-hi, #444466) !important; }
html.dark-mode #lc-cookie-banner .lc-btn-manage { color: var(--lc-accent-cookie, #FF6B9D) !important; border-color: var(--lc-accent-cookie, #FF6B9D) !important; background: transparent !important; }
html.dark-mode #lc-cookie-prefs .lc-cat { border-bottom-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode .pref-card { background: var(--lc-dark-card, #222240) !important; border-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode .pref-card h3 { color: var(--lc-primary, #E91E63) !important; }

/* ═══════ DASHBOARD ═══════ */
html.dark-mode .sidebar { background: var(--lc-dark-surface, #16162a) !important; border-right-color: var(--lc-dark-border, #333355) !important; }
/* Sidebar dark mode: handled by dashboard.html inline styles using correct .menu-item selector */
html.dark-mode .card { background: var(--lc-dark-card, #222240) !important; border-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode .swipe-card { background: var(--lc-dark-card, #222240) !important; }
html.dark-mode .swipe-card .card-info { background: linear-gradient(transparent, var(--lc-dark-bg, #1a1a2e)) !important; }
html.dark-mode .msg-convo-item { background: var(--lc-dark-card, #222240) !important; border-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode #msg-sidebar { background: var(--lc-dark-surface, #16162a) !important; border-right-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode #msg-messages-list { background: var(--lc-dark-bg, #1a1a2e) !important; }
/* System messages (verify requests) in chat */
html.dark-mode #msg-messages-list [style*="background:#FFF3E0"],
html.dark-mode #msg-messages-list [style*="background: #FFF3E0"] { background: rgba(255,152,0,0.12) !important; border-color: rgba(255,152,0,0.25) !important; color: #FFB74D !important; }
/* Shield verify button in chat header — unverified (orange) */
html.dark-mode #msg-verify-shield-btn[style*="background:#FFF3E0"],
html.dark-mode #msg-verify-shield-btn[style*="background: #FFF3E0"] { background: rgba(255,152,0,0.12) !important; border-color: rgba(255,152,0,0.25) !important; color: #FFB74D !important; }
/* Shield verify button — verified (green) */
html.dark-mode #msg-verify-shield-btn[style*="background:#e8f5e9"],
html.dark-mode #msg-verify-shield-btn[style*="background: #e8f5e9"],
html.dark-mode #msg-verify-shield-btn[style*="rgb(232, 245, 233)"] { background: rgba(76,175,80,0.15) !important; border-color: rgba(76,175,80,0.25) !important; color: #81C784 !important; }
/* Slide text hint */
html.dark-mode #msg-verify-slide-text { color: #FFB74D !important; }
html.dark-mode #msg-input-bar { background: var(--lc-dark-card, #222240) !important; border-top-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode .mobile-nav { background: var(--lc-dark-surface, #16162a) !important; border-top-color: var(--lc-dark-border, #333355) !important; }
html.dark-mode .mobile-nav-item { color: #8888a0; }
/* Mobile nav active: top-edge pink bar + colour — Gen-Z style (TikTok, Hinge, Threads) */
html.dark-mode .mobile-nav-item.active {
    color: var(--lc-primary, #E91E63) !important;
    position: relative;
}
html.dark-mode .mobile-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 2.5px;
    background: var(--lc-primary, #E91E63);
    border-radius: 0 0 3px 3px;
}
/* More sheet (A3) */
html.dark-mode .more-sheet { background: var(--lc-dark-surface, #16162a) !important; box-shadow: 0 -8px 40px rgba(0,0,0,0.4); }
html.dark-mode .more-sheet-handle { background: var(--lc-dark-border, #333355); }
html.dark-mode .more-sheet-item { color: var(--lc-dark-text-dim, #c8c8d8); }
html.dark-mode .more-sheet-item:hover,
html.dark-mode .more-sheet-item:active { background: rgba(255,255,255,0.04); }
html.dark-mode .more-sheet-item.active { color: var(--lc-primary, #E91E63); background: rgba(233,30,99,0.12); }
html.dark-mode .more-sheet-backdrop { background: rgba(0,0,0,0.55); }

/* Membership section dark overrides */
html.dark-mode [style*="color:#1A1A2E"] { color: var(--lc-dark-text, #e8e8ef) !important; }

/* Seasonal cards (Cuffing / Link Season) — keep their gradient backgrounds */
html.dark-mode .season-card-cuffing { opacity: 0.92; }
html.dark-mode .season-card-link    { opacity: 0.92; }

/* TRI-STATE THEME SEGMENTED CONTROL (Settings) */
.lc-theme-seg {
    display: inline-flex;
    background: #f3f3f5;
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}
.lc-theme-seg-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 16px;
    border: none; border-radius: 10px;
    background: transparent;
    color: #666;
    font-size: 0.82rem; font-weight: 500;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    white-space: nowrap;
}
.lc-theme-seg-btn:hover { color: #333; background: rgba(0,0,0,0.04); }
.lc-theme-seg-btn.active {
    background: #fff;
    color: var(--lc-primary, #E91E63);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.lc-theme-seg-icon { font-size: 1rem; line-height: 1; }
html.dark-mode .lc-theme-seg { background: #2a2a48; }
html.dark-mode .lc-theme-seg-btn { color: #8888a8; }
html.dark-mode .lc-theme-seg-btn:hover { color: #c0c0d0; background: rgba(255,255,255,0.04); }
html.dark-mode .lc-theme-seg-btn.active {
    background: #3a3a5a;
    color: var(--lc-primary, #E91E63);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
@media (max-width: 600px) {
    .lc-theme-seg { width: 100%; }
    .lc-theme-seg-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 0.78rem; }
}

/* ═══════ BILLING PORTAL (B25) ═══════ */
html.dark-mode #sub-plan-card {
    background: linear-gradient(145deg, #2a1a2e, #22223a) !important;
    border-color: #E91E63 !important;
}
html.dark-mode #sub-plan-name { color: var(--lc-dark-text, #e8e8ef) !important; }
html.dark-mode #sub-plan-price { color: #8888a8 !important; }
html.dark-mode #sub-access-until {
    background: rgba(233,30,99,0.12) !important;
    color: #c8c8d8 !important;
}
html.dark-mode #sub-trial-info {
    background: rgba(25,64,228,0.12) !important;
    border-color: rgba(25,64,228,0.25) !important;
}
html.dark-mode #sub-plan-card ul li { color: #b0b0c0 !important; }
html.dark-mode #sub-next-billing {
    background: rgba(25,64,228,0.08) !important;
}
html.dark-mode #sub-next-billing span { color: #8888a8 !important; }
html.dark-mode #sub-next-date { color: var(--lc-dark-text, #e8e8ef) !important; }
/* Billing history panel */
html.dark-mode #billing-history-list .billing-row {
    border-bottom-color: var(--lc-dark-border, #333355) !important;
}
html.dark-mode #billing-history-more button {
    border-color: var(--lc-dark-border, #333355) !important;
    color: #8888a8 !important;
}
html.dark-mode #billing-history-more button:hover {
    border-color: var(--lc-primary, #E91E63) !important;
    color: var(--lc-primary, #E91E63) !important;
}
/* Cancel trigger button */
html.dark-mode #sub-cancel-trigger {
    border-color: #555 !important;
    color: #8888a8 !important;
}
html.dark-mode #sub-cancel-trigger:hover {
    border-color: #c62828 !important;
    color: #ef5350 !important;
}
/* Cancel subscription modal */
html.dark-mode #cancel-sub-modal > div {
    background: var(--lc-dark-card, #22223a) !important;
}
html.dark-mode #cancel-sub-title { color: var(--lc-dark-text, #e8e8ef) !important; }
html.dark-mode #cancel-modal-body { color: #8888a8 !important; }
html.dark-mode #cancel-reason {
    background: var(--lc-dark-bg, #1a1a2e) !important;
    border-color: var(--lc-dark-border, #333355) !important;
    color: var(--lc-dark-text, #e8e8ef) !important;
}
html.dark-mode #cancel-dismiss-btn {
    border-color: var(--lc-dark-border, #333355) !important;
    color: var(--lc-dark-text, #e8e8ef) !important;
}
html.dark-mode #cancel-dismiss-btn:hover {
    border-color: var(--lc-primary, #E91E63) !important;
}

/* ── R6: Rating Modal (dark mode) ─────────────────────────────────────── */
html.dark-mode #lc-rating-modal > div {
    background: var(--lc-dark-card, #1e1e3a) !important;
}
html.dark-mode #lc-rating-modal h3,
html.dark-mode #lc-rating-modal p {
    color: var(--lc-dark-text, #e8e8ef) !important;
}
html.dark-mode #lc-rating-modal p[data-i18n$="_sub"] {
    color: var(--lc-dark-text-muted, #9999aa) !important;
}
html.dark-mode #lc-rating-feedback-text {
    background: var(--lc-dark-bg, #12122a) !important;
    border-color: var(--lc-dark-border, #333355) !important;
    color: var(--lc-dark-text, #e8e8ef) !important;
}
html.dark-mode .lc-star polygon {
    stroke: #555 !important;
}
html.dark-mode .lc-star.active polygon {
    fill: #FFB400 !important;
    stroke: #FFB400 !important;
}

/* R6: Review prompt (dark mode) */
html.dark-mode #lc-review-prompt > div {
    background: var(--lc-dark-card, #1e1e3a) !important;
}
html.dark-mode #lc-review-prompt p {
    color: var(--lc-dark-text, #e8e8ef) !important;
}

/* ═══════ OAUTH BUTTONS (R1) ═══════ */
html.dark-mode .oauth-section .oauth-divider span {
    background: var(--lc-dark-bg, #1a1a2e) !important;
    color: var(--lc-dark-text-dim, #c8c8d8) !important;
}
html.dark-mode .oauth-section .oauth-divider::before,
html.dark-mode .oauth-section .oauth-divider::after {
    background: var(--lc-dark-border, #333355) !important;
}
html.dark-mode .oauth-btn--apple {
    background: #fff !important;
    color: #000 !important;
    border-color: var(--lc-dark-border-hi, #444466) !important;
}
html.dark-mode .oauth-btn--apple:hover {
    background: #e8e8ef !important;
}
html.dark-mode .oauth-btn--google {
    background: var(--lc-dark-raised, #2a2a48) !important;
    color: var(--lc-dark-text, #e8e8ef) !important;
    border-color: var(--lc-dark-border-hi, #444466) !important;
}
html.dark-mode .oauth-btn--google:hover {
    background: var(--lc-dark-card, #222240) !important;
    border-color: var(--lc-primary, #E91E63) !important;
}

/* ── Field tip icons & popovers (dark mode) ── */
html.dark-mode .field-tip-icon { color: #7BC0E8; }
html.dark-mode .field-tip-icon:hover,
html.dark-mode .field-tip-icon:focus-visible { color: #A0D4F0; }
html.dark-mode .field-tip-popover {
    background: #2a2a48; color: #e0e0ea;
    border-color: #444466;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
html.dark-mode .field-tip-popover::after {
    background: #2a2a48;
    border-color: #444466;
}
html.dark-mode .field-tip-popover .tip-example {
    color: #9898b0;
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ── Events radius slider (dark mode) ── */
html.dark-mode #events-section .radius-wrap {
    background: var(--lc-dark-card, #222240);
    border-color: rgba(233,30,99,0.25);
}
html.dark-mode #events-section .ev-range-slider-track {
    background: #3a3355;
}
/* ── Explore range sliders (dark mode) ── */
html.dark-mode .range-slider-track {
    background: #3a3355;
}
html.dark-mode .range-slider-fill {
    background: var(--lc-primary, #E91E63) !important;
    z-index: 1;
}
html.dark-mode .range-slider-wrap input[type=range] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    color-scheme: light;
    border: none;
    box-shadow: none;
}
html.dark-mode .range-slider-wrap input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent !important;
    border: none;
    box-shadow: none;
    height: 4px;
}
html.dark-mode .range-slider-wrap input[type=range]::-moz-range-track {
    background: transparent !important;
    border: none;
    box-shadow: none;
    height: 4px;
}
html.dark-mode .range-slider-wrap input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    pointer-events: all;
    width: 3px !important;
    height: 20px !important;
    border-radius: 1px !important;
    background: var(--lc-primary, #E91E63) !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    box-shadow: none !important;
    margin-top: -8px;
    position: relative;
    z-index: 2;
}
html.dark-mode .range-slider-wrap input[type=range]::-moz-range-thumb {
    -moz-appearance: none !important;
    appearance: none !important;
    pointer-events: all;
    width: 3px !important;
    height: 20px !important;
    border-radius: 1px !important;
    background: var(--lc-primary, #E91E63) !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    box-shadow: none !important;
}
html.dark-mode .slider-thumb-label {
    color: var(--lc-primary-light, #F06292);
}
/* Discovery panel range sliders (dark mode) */
html.dark-mode .range-display input[type="range"] {
    accent-color: var(--lc-primary, #E91E63);
}
html.dark-mode .range-val {
    color: var(--lc-primary-light, #F06292);
}

/* ── Wellness Timer overlays (dark mode) ───────────────────────────────────── */
/* Overlays use CSS variables (--card, --text, --text-light) so they inherit   */
/* dark mode automatically. These rules fix accent elements that need tweaking. */
html.dark-mode #wellness-settings-card {
    border-color: rgba(255,255,255,0.06);
}
html.dark-mode #wellness-today-pill {
    background: rgba(255,255,255,0.08);
    color: #ccc;
}
html.dark-mode #set-wellness-limit {
    background: var(--lc-card, #2a2a48) !important;
    color: var(--lc-text, #e0e0ea) !important;
    border-color: #444466 !important;
}
html.dark-mode #wellness-limit-row {
    border-color: rgba(255,255,255,0.08);
}
/* Nudge panel bottom sheet */
html.dark-mode #lc-wellness-nudge > div {
    background: var(--lc-card, #1e1e2e);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
html.dark-mode #lc-wellness-nudge .lc-wellness-mins {
    color: #F06292;
}
/* Keep-going button border in dark mode */
html.dark-mode #lc-wellness-nudge button:last-child {
    border-color: rgba(255,255,255,0.15);
    color: var(--lc-text-light, #aaa);
}
/* Adjust daily limit link in dark mode */
html.dark-mode #lc-wellness-nudge a {
    color: var(--lc-text-light, #888) !important;
}
/* Idle + break overlays — card background */
html.dark-mode #lc-idle-overlay > div,
html.dark-mode #lc-break-overlay > div {
    background: var(--lc-card, #1e1e2e);
}
html.dark-mode #lc-idle-overlay h2,
html.dark-mode #lc-break-overlay h2 {
    color: var(--lc-text, #f0f0f0);
}
html.dark-mode .lc-break-countdown {
    color: #F06292;
}

/* ═══ Video Call ═══════════════════════════════════════════════════════════ */
/* Light mode hover for video call btn (replaces inline onmouseover/onmouseout) */
.lc-vid-call-btn:hover,
.lc-vid-call-btn:focus-visible {
    background: rgba(233,30,99,0.1) !important;
    color: #E91E63 !important;
}
/* ═══ Video Call — Dark Mode ════════════════════════════════════════════════ */
/* Incoming call banner — !important to beat inline <style> defaults */
html.dark-mode #lc-video-incoming .lc-vid-incoming-inner {
    background: rgba(22, 22, 34, 0.97) !important;
    color: #f0f0f0 !important;
}
html.dark-mode #lc-vid-caller-name {
    color: #fff !important;
}
html.dark-mode .lc-vid-caller-subtitle {
    color: #aaa !important;
}
/* Muted / camera-off button in dark overlay */
html.dark-mode #lc-vid-mute.lc-vid-btn-off,
html.dark-mode #lc-vid-camera.lc-vid-btn-off {
    color: #ccc !important;
    background: rgba(255,255,255,0.12) !important;
}
/* Video call button in messaging header */
html.dark-mode #msg-video-call-btn {
    color: #aaa !important;
}
html.dark-mode #msg-video-call-btn:hover,
html.dark-mode #msg-video-call-btn:focus-visible {
    color: var(--lc-primary, #E91E63) !important;
}
/* VIP lock button — dark mode */
html.dark-mode .lc-vid-vip-btn {
    background: rgba(100, 181, 246, 0.15) !important;
    color: #90CAF9 !important;
}
html.dark-mode .lc-vid-vip-btn:hover {
    background: rgba(100, 181, 246, 0.25) !important;
}

/* ═══ R2: Selfie Verification ═══════════════════════════════════════════ */
html.dark-mode #lc-verify-card {
    background: rgba(22, 22, 34, 0.85) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode #lc-verify-overlay {
    background: rgba(0,0,0,0.75) !important;
}
html.dark-mode .lc-verify-modal {
    background: #1a1a2e !important;
    color: #e0e0e0 !important;
}
html.dark-mode .lc-verify-btn-secondary {
    background: rgba(255,255,255,0.08) !important;
    color: #ccc !important;
    border-color: rgba(255,255,255,0.15) !important;
}
html.dark-mode .lc-verify-oval {
    border-color: rgba(233,30,99,0.5) !important;
}

/* ── Privacy card (Download My Data hero + DSAR collapsible) ──────────────── */
html.dark-mode .download-data-hero { background: rgba(233,30,99,0.1) !important; }
html.dark-mode .dsar-details { border-color: rgba(255,255,255,0.08) !important; }
html.dark-mode .dsar-details summary { color: #999 !important; }
html.dark-mode #dsar-type { background: var(--lc-card, #2a2a48) !important; color: var(--lc-text, #e0e0ea) !important; border-color: #444466 !important; }
.dsar-details[open] .dsar-chevron { transform: rotate(90deg); }
.dsar-details summary::-webkit-details-marker { display: none; }