/**
 * Theme overrides — dark mode (public pages + dashboard + admin).
 * Load after style.css. Only applied when html has data-theme="dark".
 *
 * Design system:
 *   - Navy-charcoal base (not pure gray)
 *   - 4-level elevation hierarchy (higher = lighter)
 *   - Near-invisible borders replaced by shadows / elevation
 *   - Primary-color glow on interactive elements
 *   - Glassmorphism on nav bar & dropdowns
 *   - Accent left-borders on alerts
 *   - Recessed (darker-than-card) form inputs
 */

/* ================================================================
   1. ROOT VARIABLES
   ================================================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Core palette */
    --primary_color: #7C9FFF;
    --primary_opacity: rgba(124, 159, 255, 0.15);
    --secondary_color: #22C55E;
    --sidebar_background_color: #151821;
    --cards_background_color: #1A1E2A;
    --elements_text_color: #B0B8C9;
    --text_color: #E1E4EB;
    --text_muted: #6B7280;
    --background_color: #0F1117;
    --success_color: #34D399;
    --star_color: #FBBF24;
    --border_color: #232837;

    /* Public page variables (used by style.css components) */
    --footer_background_color: #151821;
    --card-bg: #1A1E2A;
    --elements-bg: #232837;
    --active-bg: rgba(124, 159, 255, 0.12);
    --text-muted: #6B7280;

    /* Elevation scale */
    --dark-elevation-0: #0F1117;
    --dark-elevation-1: #151821;
    --dark-elevation-2: #1A1E2A;
    --dark-elevation-3: #212636;
    --dark-elevation-4: #282E40;

    /* Glow tokens */
    --dark-glow-primary: rgba(124, 159, 255, 0.25);
    --dark-glow-success: rgba(52, 211, 153, 0.25);
    --dark-glow-danger: rgba(248, 113, 113, 0.25);
    --dark-glow-warning: rgba(251, 191, 36, 0.25);

    /* Border tokens */
    --dark-border-subtle: rgba(255, 255, 255, 0.06);
    --dark-border-medium: rgba(255, 255, 255, 0.1);

    /* Bootstrap overrides */
    --bs-body-bg: #0F1117;
    --bs-body-color: #E1E4EB;
    --bs-border-color: #232837;
    --bs-tertiary-bg: #1A1E2A;
    --bs-secondary-bg: #151821;
}

/* ================================================================
   2. BODY & SCROLLBAR
   ================================================================ */
html[data-theme="dark"] body {
    background-color: var(--dark-elevation-0);
    color: var(--text_color);
}

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 100px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Firefox scrollbar */
html[data-theme="dark"] {
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
    scrollbar-width: thin;
}

/* ================================================================
   3. SIDEBAR LOGO (light vs dark) — shared with light mode
   ================================================================ */
.logo-for-dark,
.qc-gateway-card .logo-for-dark {
    display: none;
}
.logo .logo-for-light,
.qc-gateway-card .logo-for-light {
    display: block;
}
html[data-theme="dark"] .logo .logo-for-light,
html[data-theme="dark"] .payment-img .logo-for-light,
html[data-theme="dark"] .qc-gateway-card .logo-for-light {
    display: none;
}
html[data-theme="dark"] .logo .logo-for-dark,
html[data-theme="dark"] .payment-img .logo-for-dark,
html[data-theme="dark"] .qc-gateway-card .logo-for-dark {
    display: block;
}

/* ================================================================
   4. SIDEBAR
   ================================================================ */
html[data-theme="dark"] .dashboard-sidebar {
    background: var(--dark-elevation-0);
    box-shadow: none;
    border-right: none;
}

html[data-theme="dark"] .dashboard-sidebar-link-title {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .dashboard-sidebar-link.current .dashboard-sidebar-link-title {
    color: var(--primary_color);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .dashboard-sidebar-link:hover .dashboard-sidebar-link-title {
    color: var(--text_color);
    background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .dashboard-sidebar-links-title {
    color: var(--text_muted);
}
html[data-theme="dark"] .dashboard-sidebar-footer {
    border-color: var(--dark-border-subtle);
}

/* ================================================================
   5. NAV BAR (Glassmorphism)
   ================================================================ */
html[data-theme="dark"] .dashboard-nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}
html[data-theme="dark"] .dashboard-welcome-message {
    color: var(--text_color);
}
html[data-theme="dark"] .nav-icon {
    color: var(--elements_text_color);
    transition: color 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="dark"] .nav-icon:hover {
    color: var(--primary_color);
}

/* ================================================================
   6. CARDS (.box)
   ================================================================ */
html[data-theme="dark"] .box {
    background-color: var(--dark-elevation-2);
    border: 1px solid var(--dark-border-subtle);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}
html[data-theme="dark"] .box:hover {
    border-color: rgba(124, 159, 255, 0.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(124, 159, 255, 0.08);
}

html[data-theme="dark"] .counter-title {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .counter-amount {
    color: var(--text_color);
}
html[data-theme="dark"] .dashboard-container {
    background-color: var(--dark-elevation-0);
}

/* ================================================================
   7. STAT COUNTERS
   ================================================================ */
html[data-theme="dark"] .counter .counter-icon {
    background: linear-gradient(135deg, rgba(124, 159, 255, 0.18) 0%, rgba(124, 159, 255, 0.08) 100%);
    box-shadow: 0 4px 20px rgba(124, 159, 255, 0.2);
}

/* ================================================================
   8. TABLES
   ================================================================ */
html[data-theme="dark"] .table {
    color: var(--text_color);
    --bs-table-bg: transparent;
}
html[data-theme="dark"] .table th {
    border-color: var(--dark-border-subtle);
    color: var(--elements_text_color);
}
html[data-theme="dark"] .table td {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .table thead th {
    background-color: rgba(124, 159, 255, 0.06);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--dark-elevation-3) !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover > * {
    --bs-table-bg-state: var(--dark-elevation-3);
    background-color: var(--dark-elevation-3) !important;
}
html[data-theme="dark"] .table-responsive {
    border-color: var(--dark-border-subtle);
}

/* ================================================================
   9. FORMS (Recessed inputs)
   ================================================================ */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] .select-input {
    background-color: var(--dark-elevation-1) !important;
    border: 1px solid var(--dark-border-medium) !important;
    color: var(--text_color) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] .form-select[readonly] {
    background-color: var(--dark-elevation-0) !important;
    color: var(--text_muted) !important;
    opacity: 0.7;
}
html[data-theme="dark"] .form-control::placeholder {
    color: var(--text_muted);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--dark-elevation-1) !important;
    border-color: var(--primary_color) !important;
    color: var(--text_color) !important;
    box-shadow: 0 0 0 3px var(--dark-glow-primary), inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    outline: 0;
}
html[data-theme="dark"] .form-label {
    color: var(--text_color);
}
html[data-theme="dark"] .form-text {
    color: var(--text_muted) !important;
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--dark-elevation-2);
    border-color: var(--dark-border-medium);
    color: var(--elements_text_color);
}

/* ================================================================
   10. SELECT2
   ================================================================ */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--dark-elevation-1) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--text_color) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text_color) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text_muted) transparent transparent transparent !important;
}
html[data-theme="dark"] .select2-dropdown {
    background-color: var(--dark-elevation-3) !important;
    border-color: var(--dark-border-medium) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--dark-border-subtle);
}
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--dark-elevation-1) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--text_color) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .select2-results__option {
    color: var(--text_color) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dark-elevation-4) !important;
    color: var(--primary_color) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--dark-elevation-3) !important;
    color: var(--primary_color) !important;
}

/* ================================================================
   11. DROPDOWNS (Glassmorphism)
   ================================================================ */
html[data-theme="dark"] .drop-down-menu {
    background-color: rgba(33, 38, 54, 0.92);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--dark-border-medium);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--dark-border-subtle);
}
html[data-theme="dark"] .drop-down-item {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .drop-down-item:hover {
    background-color: var(--dark-elevation-4);
    color: var(--primary_color);
}
html[data-theme="dark"] .user-title.text-dark {
    color: var(--text_color) !important;
}
html[data-theme="dark"] .user-text.text-muted {
    color: var(--text_muted) !important;
}

/* Bootstrap dropdowns */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--dark-elevation-3);
    border: 1px solid var(--dark-border-medium);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--dark-elevation-4);
    color: var(--primary_color);
}
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--dark-border-subtle);
}

/* ================================================================
   12. BREADCRUMB
   ================================================================ */
html[data-theme="dark"] .breadcrumb-item a {
    color: var(--primary_color);
}
html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text_muted);
}
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text_muted);
}
html[data-theme="dark"] h3 {
    color: var(--text_color);
}

/* ================================================================
   13. ALERTS (Accent left border)
   ================================================================ */
html[data-theme="dark"] .alert-warning {
    background-color: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.12);
    border-left: 3px solid #FBBF24;
    color: #FDE68A;
}
html[data-theme="dark"] .alert-danger {
    background-color: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.12);
    border-left: 3px solid #F87171;
    color: #FCA5A5;
}
html[data-theme="dark"] .alert-success {
    background-color: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.12);
    border-left: 3px solid #34D399;
    color: #6EE7B7;
}
html[data-theme="dark"] .alert-info {
    background-color: rgba(124, 159, 255, 0.08);
    border: 1px solid rgba(124, 159, 255, 0.12);
    border-left: 3px solid var(--primary_color);
    color: #BFDBFE;
}
html[data-theme="dark"] .alert-primary {
    background-color: rgba(124, 159, 255, 0.08);
    border: 1px solid rgba(124, 159, 255, 0.12);
    border-left: 3px solid var(--primary_color);
    color: #BFDBFE;
}

/* ================================================================
   14. BUTTONS (Glow halos on hover)
   ================================================================ */
html[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 6px 24px var(--dark-glow-primary);
}
html[data-theme="dark"] .btn-success:hover {
    box-shadow: 0 6px 24px var(--dark-glow-success);
}
html[data-theme="dark"] .btn-danger:hover {
    box-shadow: 0 6px 24px var(--dark-glow-danger);
}
html[data-theme="dark"] .btn-warning:hover {
    box-shadow: 0 6px 24px var(--dark-glow-warning);
}

html[data-theme="dark"] .btn-outline-primary {
    color: var(--primary_color);
    border-color: var(--primary_color);
}
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--elements_text_color);
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--dark-elevation-3);
    color: var(--text_color);
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .btn-light {
    background-color: var(--dark-elevation-3);
    border-color: var(--dark-border-medium);
    color: var(--text_color);
}
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--dark-elevation-4);
    border-color: var(--dark-border-medium);
    color: var(--text_color);
}

/* ================================================================
   15. PAGINATION
   ================================================================ */
html[data-theme="dark"] .pagination .page-link {
    background-color: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
    color: var(--elements_text_color);
}
html[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--dark-elevation-3);
    border-color: var(--dark-border-medium);
    color: var(--primary_color);
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--primary_color);
    border-color: var(--primary_color);
    color: #fff;
    box-shadow: 0 4px 16px var(--dark-glow-primary);
}
html[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--dark-elevation-1);
    border-color: var(--dark-border-subtle);
    color: var(--text_muted);
    opacity: 0.5;
}

/* ================================================================
   16. BADGES (Subtle glow)
   ================================================================ */
html[data-theme="dark"] .badge.bg-primary,
html[data-theme="dark"] .badge.text-bg-primary {
    box-shadow: 0 0 12px var(--dark-glow-primary);
}
html[data-theme="dark"] .badge.bg-success,
html[data-theme="dark"] .badge.text-bg-success {
    box-shadow: 0 0 12px var(--dark-glow-success);
}
html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .badge.text-bg-danger {
    box-shadow: 0 0 12px var(--dark-glow-danger);
}
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.text-bg-warning {
    box-shadow: 0 0 12px var(--dark-glow-warning);
}
html[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--dark-elevation-3) !important;
    color: var(--elements_text_color);
}
html[data-theme="dark"] .badge.bg-light {
    background-color: var(--dark-elevation-3) !important;
    color: var(--elements_text_color);
}

/* ================================================================
   17. THEME SWITCHER — light-mode base (shared)
   ================================================================ */
.theme-switcher-btn {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0;
    cursor: pointer;
}
.theme-switcher-btn .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary_color);
    background: var(--primary_opacity);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
    transition: color 0.2s, background 0.2s;
}
.theme-switcher-btn:hover .nav-icon {
    background: color-mix(in srgb, var(--primary_color) 20%, transparent);
}

/* Public nav: white icon over hero, primary when sticky */
.nav:not(.nav-sticky) .theme-switcher-btn .nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}
.nav:not(.nav-sticky) .theme-switcher-btn:hover .nav-icon {
    background: rgba(255, 255, 255, 0.25);
}
.nav.nav-sticky .theme-switcher-btn .nav-icon {
    color: var(--primary_color);
    background: var(--primary_opacity);
}

/* Theme switcher dropdown menu */
.theme-switcher-menu.dropdown-menu {
    width: auto;
    min-width: 140px;
    padding: 4px;
    border-radius: 10px;
}
.theme-switcher-menu .dropdown-item {
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.theme-switcher-option.active {
    background-color: var(--primary_opacity);
    color: var(--primary_color);
}

/* Theme switcher — dark-mode overrides */
html[data-theme="dark"] .theme-switcher-menu {
    background-color: var(--dark-elevation-3);
    border: 1px solid var(--dark-border-medium);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .theme-switcher-option {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .theme-switcher-option:hover {
    background-color: var(--dark-elevation-4);
    color: var(--primary_color);
}
html[data-theme="dark"] .theme-switcher-option.active {
    background-color: var(--dark-elevation-4);
    color: var(--primary_color);
}
html[data-theme="dark"] .theme-switcher-btn {
    background: transparent !important;
}
html[data-theme="dark"] .theme-switcher-btn .nav-icon {
    color: var(--primary_color);
    background: var(--primary_opacity);
}
/* In dark mode sticky nav, keep primary color icon */
html[data-theme="dark"] .nav.nav-sticky .theme-switcher-btn .nav-icon {
    color: var(--primary_color);
    background: var(--primary_opacity);
}
/* In dark mode non-sticky nav (hero), keep white icons */
html[data-theme="dark"] .nav:not(.nav-sticky) .theme-switcher-btn .nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .nav:not(.nav-sticky) .language .language-button,
html[data-theme="dark"] .nav:not(.nav-sticky) .nav-menu-button,
html[data-theme="dark"] .nav:not(.nav-sticky) .pin-mailcard-btn {
    color: #fff;
}
html[data-theme="dark"] .nav:not(.nav-sticky) .language .language-icon {
    stroke: #fff;
}

/* Mobile nav: compact sizing */
@media (max-width: 1199.98px) {
    .nav .nav-inner .logo img {
        height: 48px;
    }
    .theme-switcher-btn .nav-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
        border-radius: 7px;
    }
}

/* ================================================================
   19. MODALS
   ================================================================ */
html[data-theme="dark"] .modal-content {
    background-color: var(--dark-elevation-3);
    border: 1px solid var(--dark-border-medium);
    color: var(--text_color);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--dark-border-subtle);
}
html[data-theme="dark"] .modal-header {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .modal-footer {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
html[data-theme="dark"] .modal-backdrop {
    background-color: rgba(5, 7, 12, 0.65);
}
html[data-theme="dark"] .modal .modal-content {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--dark-border-subtle);
}

/* ================================================================
   20. MISC OVERRIDES
   ================================================================ */

/* .bg-light override */
html[data-theme="dark"] .bg-light {
    background-color: var(--dark-elevation-1) !important;
}

/* Horizontal rule */
html[data-theme="dark"] hr {
    border-color: var(--dark-border-subtle);
    opacity: 1;
}

/* Text selection */
html[data-theme="dark"] ::selection {
    background: rgba(124, 159, 255, 0.3);
    color: #fff;
}

/* .text-dark override */
html[data-theme="dark"] .text-dark {
    color: var(--text_color) !important;
}
html[data-theme="dark"] .text-muted {
    color: var(--text_muted) !important;
}

/* List group */
html[data-theme="dark"] .list-group-item {
    background-color: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
    color: var(--text_color);
}
html[data-theme="dark"] .list-group-item:hover {
    background-color: var(--dark-elevation-3);
}
html[data-theme="dark"] .list-group-item.active {
    background-color: var(--primary_color);
    border-color: var(--primary_color);
}

/* Card component (Bootstrap) */
html[data-theme="dark"] .card {
    background-color: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
    color: var(--text_color);
}
html[data-theme="dark"] .card-header {
    background-color: var(--dark-elevation-3);
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .card-footer {
    background-color: var(--dark-elevation-1);
    border-color: var(--dark-border-subtle);
}

/* Tabs / Nav tabs */
html[data-theme="dark"] .nav-tabs {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--dark-border-medium);
    color: var(--primary_color);
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
    border-bottom-color: var(--dark-elevation-2);
    color: var(--primary_color);
}
html[data-theme="dark"] .nav-pills .nav-link {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--primary_color);
    color: #fff;
}

/* Accordion */
html[data-theme="dark"] .accordion-item {
    background-color: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .accordion-button {
    background-color: var(--dark-elevation-2);
    color: var(--text_color);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--dark-elevation-3);
    color: var(--primary_color);
}
html[data-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(2);
}

/* Tooltip */
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--dark-elevation-4);
    color: var(--text_color);
}
html[data-theme="dark"] .tooltip .tooltip-arrow::before {
    border-top-color: var(--dark-elevation-4);
}

/* Popover */
html[data-theme="dark"] .popover {
    background-color: var(--dark-elevation-3);
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .popover-header {
    background-color: var(--dark-elevation-4);
    border-color: var(--dark-border-subtle);
    color: var(--text_color);
}
html[data-theme="dark"] .popover-body {
    color: var(--elements_text_color);
}

/* Toast */
html[data-theme="dark"] .toast {
    background-color: var(--dark-elevation-3);
    border-color: var(--dark-border-medium);
    color: var(--text_color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .toast-header {
    background-color: var(--dark-elevation-4);
    border-color: var(--dark-border-subtle);
    color: var(--text_color);
}

/* Progress bar */
html[data-theme="dark"] .progress {
    background-color: var(--dark-elevation-1);
}

/* Close button / x */
html[data-theme="dark"] [data-bs-theme] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Offcanvas */
html[data-theme="dark"] .offcanvas {
    background-color: var(--dark-elevation-2);
    color: var(--text_color);
    border-color: var(--dark-border-subtle);
}

/* Drag-and-drop handle (dd-item) */
html[data-theme="dark"] .handle {
    background: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
    color: var(--elements_text_color);
}
html[data-theme="dark"] .handle:hover {
    background: var(--dark-elevation-4);
    color: var(--primary_color);
}

/* Empty state component */
html[data-theme="dark"] .empty-state {
    color: var(--text_muted);
}

/* Form check / switch */
html[data-theme="dark"] .form-check-input {
    background-color: var(--dark-elevation-1);
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary_color);
    border-color: var(--primary_color);
}
html[data-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--dark-glow-primary);
    border-color: var(--primary_color);
}
html[data-theme="dark"] .form-check-label {
    color: var(--text_color);
}

/* ================================================================
   21. AUTH MODALS
   ================================================================ */
html[data-theme="dark"] #loginModal .modal-content,
html[data-theme="dark"] #registerModal .modal-content,
html[data-theme="dark"] #forgotPasswordModal .modal-content {
    background-color: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .modal .sign-with .sign-with-divider span {
    background-color: var(--dark-elevation-2);
}
html[data-theme="dark"] .modal .sign-with .sign-with-divider::before {
    background-color: var(--dark-border-medium);
}
html[data-theme="dark"] .auth-modal-success i {
    color: var(--success_color);
}
html[data-theme="dark"] .auth-input {
    border-color: var(--dark-border-medium);
    background: var(--dark-elevation-1);
    color: #fff;
}
html[data-theme="dark"] .auth-input:hover {
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .auth-input:focus {
    border-color: var(--secondary_color);
}
html[data-theme="dark"] .auth-input-wrap .password-toggle {
    color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .auth-input-wrap .password-toggle:hover {
    color: rgba(255, 255, 255, 0.8);
}
html[data-theme="dark"] .email-history-popup-loading {
    background: rgba(30, 33, 43, 0.7);
}

/* Auth Pages (Sign-in/Register/Reset) — Dark Mode */
html[data-theme="dark"] .sign-page::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--primary_color) 18%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 20%, rgba(124, 159, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 35% at 80% 15%, rgba(147, 51, 234, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, var(--dark-elevation-0) 0%, #0a0c14 100%);
}
html[data-theme="dark"] .sign-box .box {
    background: rgba(26, 30, 42, 0.7);
    border-color: var(--dark-border-subtle);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 12px 24px rgba(0, 0, 0, 0.12);
}
html[data-theme="dark"] .sign-with .sign-with-divider::before {
    background-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .sign-with .sign-with-divider span {
    background-color: rgba(26, 30, 42, 0.7);
    color: var(--text_muted);
}
html[data-theme="dark"] .sign-page h3 {
    color: var(--text_color);
}
html[data-theme="dark"] .sign-page .text-muted {
    color: var(--text_muted) !important;
}
html[data-theme="dark"] .sign-page a:not(.btn):not(.logo) {
    color: var(--primary_color);
}
html[data-theme="dark"] .sign-page .form-control {
    background: var(--dark-elevation-1);
    border-color: var(--dark-border-medium);
    color: var(--text_color);
}
html[data-theme="dark"] .sign-page .form-control:focus {
    border-color: var(--primary_color);
    box-shadow: 0 0 0 3px rgba(124, 159, 255, 0.15);
}
html[data-theme="dark"] .sign-page .form-label,
html[data-theme="dark"] .sign-page .form-check-label {
    color: var(--text_color);
}
html[data-theme="dark"] .sign-page .table {
    color: var(--text_color);
}
html[data-theme="dark"] .sign-page .table-bordered {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .sign-page .table-bordered th,
html[data-theme="dark"] .sign-page .table-bordered td {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .sign-page .btn-google {
    background: var(--dark-elevation-3);
    border-color: var(--dark-border-medium);
    color: var(--text_color);
}
/* Auth floating theme switcher — dark */
html[data-theme="dark"] .auth-theme-switcher .auth-theme-toggle {
    background: rgba(26, 30, 42, 0.7);
    border-color: var(--dark-border-subtle);
    color: var(--elements_text_color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .auth-theme-switcher .auth-theme-toggle:hover {
    background: rgba(33, 38, 54, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .auth-theme-switcher .theme-switcher-menu {
    background: rgba(33, 38, 54, 0.92);
    border-color: var(--dark-border-medium);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .auth-theme-switcher .dropdown-item {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .auth-theme-switcher .dropdown-item:hover {
    background: var(--dark-elevation-4);
    color: var(--primary_color);
}
html[data-theme="dark"] .auth-theme-switcher .dropdown-item.active {
    background: var(--primary_color);
    color: #fff;
}

/* Quick Checkout Popup — Dark Mode */
html[data-theme="dark"] .quick-checkout-popup-loading {
    background: rgba(30, 33, 43, 0.7);
}
html[data-theme="dark"] .quick-checkout-popup-panel {
    background: var(--dark-elevation-2);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .qc-interval-tabs {
    background: var(--dark-elevation-1);
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .qc-tab-btn {
    color: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .qc-tab-btn.active {
    background: var(--secondary_color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .qc-plan-card {
    border-color: var(--dark-border-medium);
    background: var(--dark-elevation-1);
}
html[data-theme="dark"] .qc-plan-card:hover {
    border-color: var(--secondary_color);
}
html[data-theme="dark"] .qc-plan-card.featured {
    background: rgba(var(--bs-primary-rgb, 99, 102, 241), 0.08);
}
html[data-theme="dark"] .qc-plan-card-radio {
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .qc-plan-card-save {
    background: rgba(25, 135, 84, 0.2);
}
html[data-theme="dark"] .qc-tab-save {
    background: rgba(25, 135, 84, 0.25);
}
html[data-theme="dark"] .qc-summary {
    background: var(--dark-elevation-1);
}
html[data-theme="dark"] .qc-summary-total {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .qc-email-input {
    border-color: var(--dark-border-medium);
    background: var(--dark-elevation-1);
    color: #fff;
}
html[data-theme="dark"] .qc-email-input:hover {
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .qc-email-input:focus {
    border-color: var(--secondary_color);
}
html[data-theme="dark"] .qc-gateway-card {
    border-color: var(--dark-border-medium);
    background: var(--dark-elevation-1);
}
html[data-theme="dark"] .qc-gateway-card:hover {
    border-color: var(--secondary_color);
}
html[data-theme="dark"] .qc-gateway-radio {
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .qc-gateway-logo {
    filter: brightness(1.1);
}

/* QR popup dark overrides */
html[data-theme="dark"] .qr-popup-link-section {
    border-color: var(--dark-border-subtle);
}

/* Change email popup dark overrides */
html[data-theme="dark"] .change-email-popup-panel {
    background: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .change-email-popup-close {
    background: var(--dark-elevation-3);
    color: var(--text_color);
}
html[data-theme="dark"] .change-email-popup-close:hover {
    background: var(--dark-elevation-4);
}
html[data-theme="dark"] .change-email-field .input-group .btn-outline-primary {
    border-color: var(--primary_color);
    color: var(--primary_color);
}
html[data-theme="dark"] .change-email-field .input-group .btn-outline-primary:hover {
    background: var(--primary_color);
    color: #fff;
}
html[data-theme="dark"] .lifespan-presets {
    background: var(--dark-elevation-1);
}
html[data-theme="dark"] .lifespan-presets .lifespan-btn:hover:not(.locked):not(.active) {
    background: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .lifespan-presets .lifespan-btn.active {
    background: var(--dark-elevation-3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px var(--dark-border-subtle);
}
html[data-theme="dark"] .change-email-notice {
    background: var(--dark-elevation-1);
    border-left-color: var(--primary_color);
}
html[data-theme="dark"] .change-email-notice-text {
    color: var(--text_muted);
}
html[data-theme="dark"] .change-email-premium-hint .smart-cta__link {
    background: rgba(124, 159, 255, 0.1);
    color: var(--primary_color);
}
/* Dark mode: history */
html[data-theme="dark"] .email-history-popup-footer {
    border-top-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .email-history-popup-body {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .mail-history-day-header {
    background-color: var(--dark-elevation-1) !important;
}
html[data-theme="dark"] .mail-history-day-header p {
    color: #999 !important;
}
html[data-theme="dark"] .mail-history-item:hover {
    background-color: var(--dark-elevation-1) !important;
}
html[data-theme="dark"] .history-item-expired .badge-expired {
    background: var(--dark-elevation-2);
    color: #888;
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .history-item-expired .email {
    color: #777 !important;
}
html[data-theme="dark"] .change-email-premium-hint .smart-cta__link:hover {
    background: rgba(124, 159, 255, 0.18);
}

/* Smart CTA dark overrides */
html[data-theme="dark"] .smart-cta__appreciation {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-color: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
html[data-theme="dark"] .smart-cta__trial-badge {
    background: rgba(124, 159, 255, 0.12);
    color: var(--primary_color);
}
html[data-theme="dark"] .smart-cta__save-badge {
    background: #16a34a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Plan Switcher dark overrides (homepage) */
html[data-theme="dark"] .plan-switcher {
    background: var(--dark-elevation-1, #1e2330);
}
html[data-theme="dark"] .plan-switcher .plan-switcher-item {
    color: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .plan-switcher .plan-switcher-item:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .plan-switcher .plan-switcher-item.active {
    background: var(--dark-elevation-2, #252b3b);
    color: var(--primary_color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Pricing card dark overrides (homepage) */
html[data-theme="dark"] .pricing-card {
    background: var(--dark-elevation-1, #1e2330);
    border-color: var(--dark-border-subtle, rgba(255, 255, 255, 0.06));
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .pricing-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .pricing-card.popular {
    border-color: var(--primary_color);
}
html[data-theme="dark"] .pricing-card-free {
    background: var(--dark-elevation-0, #161a26);
    border-color: var(--dark-border-subtle, rgba(255, 255, 255, 0.06));
}
html[data-theme="dark"] .btn-cta-secondary {
    background: var(--dark-elevation-2, #252b3b);
    border-color: var(--dark-border-medium, rgba(255, 255, 255, 0.1));
    color: rgba(255, 255, 255, 0.85) !important;
}
html[data-theme="dark"] .btn-cta-secondary:hover {
    border-color: var(--primary_color);
    background: rgba(76, 127, 255, 0.1);
}
html[data-theme="dark"] .plan-price .savings-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.25);
}
html[data-theme="dark"] .plan-trust-indicators {
    border-top-color: var(--dark-border-subtle, rgba(255, 255, 255, 0.06));
}
html[data-theme="dark"] .plan-trust-indicators .trust-item {
    color: rgba(255, 255, 255, 0.4);
}
html[data-theme="dark"] .pricing-guarantee-banner .guarantee-content {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.02) 100%);
    border-color: rgba(34, 197, 94, 0.12);
}

/* ================================================================
   PUBLIC PAGE — DARK MODE OVERRIDES
   ================================================================ */

/* --- Navigation (sticky) --- */
html[data-theme="dark"] .nav.nav-sticky {
    background: rgba(15, 17, 23, 0.85);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: 0 1px 0 var(--dark-border-subtle);
}
html[data-theme="dark"] .nav.nav-sticky .nav-inner .nav-menu .nav-links a,
html[data-theme="dark"] .nav.nav-sticky .nav-inner .nav-menu .nav-drop .nav-drop-btn,
html[data-theme="dark"] .nav.nav-sticky .language .language-button,
html[data-theme="dark"] .nav.nav-sticky .nav-inner .nav-menu-button {
    color: var(--text_color);
}
html[data-theme="dark"] .nav.nav-sticky .nav-inner .nav-menu .nav-actions .btn-outline-secondary {
    border-color: var(--dark-border-medium) !important;
    color: var(--text_color) !important;
}
html[data-theme="dark"] .nav.nav-sticky .nav-inner .nav-menu .nav-actions .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* --- Navigation dropdown menu --- */
html[data-theme="dark"] .nav .nav-drop .nav-drop-menu {
    background-color: var(--dark-elevation-3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--dark-border-subtle);
}
html[data-theme="dark"] .nav .nav-drop .nav-drop-menu .nav-link {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .nav .nav-drop .nav-drop-menu .nav-link:hover {
    color: var(--primary_color);
}

/* --- Mobile nav menu --- */
@media (max-width: 1199.98px) {
    html[data-theme="dark"] .nav .nav-inner .nav-menu .nav-menu-scroller {
        background: var(--dark-elevation-1);
    }
    html[data-theme="dark"] .nav .nav-inner .nav-menu .nav-links .nav-link {
        color: var(--text_color);
    }
    html[data-theme="dark"] .nav .nav-drop .nav-drop-btn {
        color: var(--text_color);
    }
    html[data-theme="dark"] .nav .nav-inner .nav-menu .nav-actions .btn-outline-light {
        color: var(--text_color);
    }
}

/* --- Language menu --- */
html[data-theme="dark"] .language .language-menu {
    background-color: var(--dark-elevation-3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .language .language-menu::before {
    background-color: var(--dark-elevation-3);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .language .language-menu a {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .language .language-menu a:hover {
    background-color: var(--dark-elevation-4);
    color: var(--primary_color);
}

/* --- Footer --- */
html[data-theme="dark"] .footer {
    background-color: var(--dark-elevation-0);
}
html[data-theme="dark"] .footer-section-title {
    color: var(--text_color);
}
html[data-theme="dark"] .footer-links a {
    color: var(--text_muted);
}
html[data-theme="dark"] .social-icons a {
    color: var(--elements_text_color);
}
/* Footer logo switching */
.footer-logo-light {
    display: none;
}
html[data-theme="dark"] .footer-logo-dark {
    display: none;
}
html[data-theme="dark"] .footer-logo-light {
    display: block;
}

/* --- Section titles & badges --- */
html[data-theme="dark"] .section-description {
    color: var(--text_muted);
}

/* --- Cookies banner --- */
html[data-theme="dark"] .cookies {
    background-color: var(--dark-elevation-2);
    box-shadow: 0 7px 29px rgba(0, 0, 0, 0.4);
    color: var(--text_color);
}

/* --- Mail card & components (glassmorphism) --- */
html[data-theme="dark"] .mail-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
@supports not (backdrop-filter: blur(24px)) {
    html[data-theme="dark"] .mail-card {
        background: rgba(26, 30, 42, 0.95);
    }
}
html[data-theme="dark"] .mail-card .mail-header {
    background-color: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .mail-card .mail-sidebar {
    background-color: rgba(255, 255, 255, 0.03);
    border-right-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .mail-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .mail-item-content {
    background: rgb(255 255 255 / 9%);
}
html[data-theme="dark"] .mail-item:hover .mail-item-content,
html[data-theme="dark"] .mail-item.active .mail-item-content {
    background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .mail-card .btn {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text_color);
}
html[data-theme="dark"] .mail-card .btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="dark"] .mail-selection-placeholder {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .mail-content .mail-header {
    border-top-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] #mail-inbox .mail-inbox-header {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .current-email {
    background: transparent;
    color: var(--text_color);
}

/* --- Email dropdown & options --- */
html[data-theme="dark"] .dropdown-header {
    background: linear-gradient(135deg, rgba(124, 159, 255, 0.2) 0%, rgba(124, 159, 255, 0.1) 100%);
    color: var(--text_color);
}
html[data-theme="dark"] .dropdown-header h6 {
    color: var(--text_color);
}
html[data-theme="dark"] .dropdown-header p {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .dropdown-footer {
    background-color: var(--dark-elevation-1);
    border-top-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .email-option:hover {
    background-color: var(--dark-elevation-3);
}
html[data-theme="dark"] .email-option.selected {
    background-color: rgba(124, 159, 255, 0.08);
    border-left-color: var(--primary_color);
}
html[data-theme="dark"] .email-domain {
    color: var(--text_muted);
}

/* --- Email bottom sheet (mobile) --- */
html[data-theme="dark"] .email-bottom-sheet-panel {
    background: var(--dark-elevation-2);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .email-bottom-sheet-close {
    background: var(--dark-elevation-3);
    color: var(--text_color);
}
html[data-theme="dark"] .email-bottom-sheet-close:hover {
    background: var(--dark-elevation-4);
}

/* --- Confirm delete popup --- */
html[data-theme="dark"] .confirm-delete-popup-panel {
    background: var(--dark-elevation-2);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .confirm-delete-popup-close {
    background: var(--dark-elevation-3);
    color: var(--text_color);
}
html[data-theme="dark"] .confirm-delete-popup-close:hover {
    background: var(--dark-elevation-4);
}

/* --- Email history popup --- */
html[data-theme="dark"] .email-history-popup-panel {
    background: var(--dark-elevation-2);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .email-history-popup-close {
    background: var(--dark-elevation-3);
    color: var(--text_color);
}
html[data-theme="dark"] .email-history-popup-close:hover {
    background: var(--dark-elevation-4);
}

/* --- Accordion (FAQ section) --- */
html[data-theme="dark"] .accordion-item {
    background: var(--dark-elevation-2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .accordion-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .accordion-button {
    background: var(--dark-elevation-2);
    color: var(--text_color);
}
html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: var(--dark-elevation-3);
    color: var(--primary_color);
}
html[data-theme="dark"] .accordion-button::after {
    background: rgba(124, 159, 255, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%237C9FFF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    filter: none;
}
html[data-theme="dark"] .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14'/%3E%3C/svg%3E");
    background-color: var(--primary_color);
    filter: none;
}
html[data-theme="dark"] .accordion-body {
    color: var(--elements_text_color);
}

/* --- Blog cards --- */
html[data-theme="dark"] .blog-post {
    border-color: var(--dark-border-subtle);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .blog-card-premium {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
html[data-theme="dark"] .blog-card-premium:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

/* --- Features section (glassmorphism) --- */
html[data-theme="dark"] .features-section-glass::after {
    background: linear-gradient(to bottom, transparent 0%, var(--background_color) 100%);
}

/* --- Plan description & feature text --- */
html[data-theme="dark"] .plan-description {
    color: var(--text_muted);
}
html[data-theme="dark"] .plan-feature span {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .plan-feature.feature-disabled span {
    color: var(--text_muted);
}
html[data-theme="dark"] .plan-feat-icon-v2 i {
    background: var(--dark-elevation-3);
}
html[data-theme="dark"] .plan-title {
    color: var(--text_color);
}
html[data-theme="dark"] .price-main strong {
    color: var(--text_color);
}
html[data-theme="dark"] .price-interval {
    color: var(--text_muted);
}
html[data-theme="dark"] .price-equivalent {
    color: var(--text_muted);
}

/* --- Skeleton loaders --- */
html[data-theme="dark"] .skeleton-line {
    background: linear-gradient(90deg, var(--dark-elevation-3) 25%, var(--dark-elevation-4) 50%, var(--dark-elevation-3) 75%);
    background-size: 200% 100%;
}
html[data-theme="dark"] .skeleton-avatar {
    background: linear-gradient(90deg, var(--dark-elevation-3) 25%, var(--dark-elevation-4) 50%, var(--dark-elevation-3) 75%);
    background-size: 200% 100%;
}

/* --- Progress bar --- */
html[data-theme="dark"] .progress-bar-custom {
    background: var(--dark-elevation-3);
}

/* --- Random code input --- */
html[data-theme="dark"] #random_code {
    background-color: var(--dark-elevation-1) !important;
    border-color: var(--dark-border-medium) !important;
    color: var(--elements_text_color);
}

/* --- Chart mockup --- */
html[data-theme="dark"] .chart-mockup {
    background: var(--dark-elevation-2);
}

/* --- Popular badge override for homepage --- */
html[data-theme="dark"] .popular-badge {
    box-shadow: 0 6px 20px rgba(124, 159, 255, 0.35);
}

/* ================================================================
   PUBLIC PAGE — DARK MODE OVERRIDES (Phase 2)
   Covers: header, glassmorphism, FAQ, testimonials, timeline,
   contact, viewbox, sticky ad, swiper, blog detail, about panels
   ================================================================ */

/* --- Glassmorphism variables (features section) --- */
html[data-theme="dark"] {
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-hover: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.15);
    --glass-shadow: rgba(0, 0, 0, 0.25);
    --glass-shadow-hover: rgba(0, 0, 0, 0.35);
    --border-color: #232837;
}

/* Glass fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    html[data-theme="dark"] .feature-glass-card {
        background: rgba(26, 30, 42, 0.95);
        border: 1px solid var(--dark-border-medium);
    }
    html[data-theme="dark"] .feature-glass-icon {
        background: rgba(124, 159, 255, 0.15);
        border: 1px solid rgba(124, 159, 255, 0.25);
    }
    html[data-theme="dark"] .feature-swiper-btn {
        background: rgba(26, 30, 42, 0.95);
        border: 1px solid var(--dark-border-medium);
    }
}

/* Glass icon in dark mode */
html[data-theme="dark"] .feature-glass-icon {
    background: rgba(124, 159, 255, 0.1);
    border-color: rgba(124, 159, 255, 0.2);
}
html[data-theme="dark"] .feature-glass-icon::before {
    background: linear-gradient(135deg, var(--primary_color), rgba(124, 159, 255, 0.3));
    opacity: 0.15;
}

/* --- Header (hero) — radial gradient glow (no bg image) --- */
html[data-theme="dark"] .header {
    background-color: var(--dark-elevation-0);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--primary_color) 18%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 20% 20%, rgba(124, 159, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 35% at 80% 15%, rgba(147, 51, 234, 0.06) 0%, transparent 50%);
    background-size: 100% 100vh, 100% 100vh, 100% 100vh;
    background-repeat: no-repeat;
    background-position: top center;
}

/* --- Section boundary gradient orbs (dark mode only) ---
   Decorative radial glows at junctions between sections.
   Uses ::before on receiving sections (top glow bleeding from previous).
   Positions alternate: center, left, right for an organic feel. */

/* Shared base for all section glow orbs */
html[data-theme="dark"] .features-section-glass::before,
html[data-theme="dark"] .key-features-section::before,
html[data-theme="dark"] .how-section-timeline::before,
html[data-theme="dark"] .testimonials-section-premium::before,
html[data-theme="dark"] .faq-section::after,
html[data-theme="dark"] .blog-section-premium::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -200px;
    height: 400px;
    pointer-events: none;
    z-index: 0;
}

/* Ensure parent sections allow vertical overflow for gradient orbs */
html[data-theme="dark"] .features-section-glass,
html[data-theme="dark"] .key-features-section,
html[data-theme="dark"] .how-section-timeline,
html[data-theme="dark"] .testimonials-section-premium,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .blog-section-premium {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    
    overflow: hidden;
    background: linear-gradient(135deg, var(--background_color) 0%, rgba(76, 127, 255, 0.03) 50%, var(--background_color) 100%);
}

/* 1. → Features: primary glow, center-right */
html[data-theme="dark"] .features-section-glass::before {
    background: radial-gradient(ellipse 60% 50% at 65% 50%, color-mix(in srgb, var(--primary_color) 12%, transparent), transparent 70%);
}

/* 2. → Key features: purple glow, left */
html[data-theme="dark"] .key-features-section::before {
    background: radial-gradient(ellipse 50% 50% at 25% 50%, rgba(147, 51, 234, 0.08), transparent 70%);
}

/* 3. → How-it-works: blue glow, right */
html[data-theme="dark"] .how-section-timeline::before {
    background: radial-gradient(ellipse 50% 50% at 75% 50%, rgba(124, 159, 255, 0.09), transparent 70%);
}

/* 4. → Testimonials: primary glow, center */
html[data-theme="dark"] .testimonials-section-premium::before {
    background: radial-gradient(ellipse 55% 50% at 50% 50%, color-mix(in srgb, var(--primary_color) 10%, transparent), transparent 70%);
}

/* 5. FAQ bottom → : teal glow, center-left */
html[data-theme="dark"] .faq-section::after {
    top: auto;
    bottom: -200px;
    background: radial-gradient(ellipse 50% 50% at 35% 50%, rgba(52, 211, 153, 0.07), transparent 70%);
}

/* 6. → Blog: blue-purple glow, right */
html[data-theme="dark"] .blog-section-premium::before {
    background: radial-gradient(ellipse 50% 50% at 70% 50%, rgba(124, 159, 255, 0.08), transparent 70%);
}

/* --- FAQ section --- */
html[data-theme="dark"] .faq-section {
    background: linear-gradient(180deg, var(--dark-elevation-0) 0%, var(--dark-elevation-1) 100%);
}
html[data-theme="dark"] .faq-section::before {
    background-image: radial-gradient(rgba(124, 159, 255, 0.04) 1px, transparent 1px);
}
html[data-theme="dark"] .faq-section .section-header .section-description {
    color: var(--text_muted);
}

/* --- Testimonial cards (old style) --- */
html[data-theme="dark"] .testimonial-card {
    background-color: var(--dark-elevation-1);
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .testimonial-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .testimonial-card .testimonial-card-stars {
    color: rgba(255, 255, 255, 0.12);
}

/* --- Testimonial cards (premium style) --- */
html[data-theme="dark"] .testimonial-card-premium {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .testimonial-card-premium:hover {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .testimonial-card-premium .testimonial-card-stars {
    color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .testimonial-source {
    background: var(--dark-elevation-1);
}
html[data-theme="dark"] .testimonial-card-premium .testimonial-source {
    background: var(--background_color);
}

/* --- How-it-works timeline --- */
html[data-theme="dark"] .how-timeline-content {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .how-timeline-content:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .how-timeline-node {
    box-shadow: 0 4px 20px rgba(124, 159, 255, 0.25);
}

/* --- Contact page --- */
html[data-theme="dark"] .contact-info-card {
    background: var(--dark-elevation-1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .contact-info-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .contact-form-card {
    background: var(--dark-elevation-1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .contact-form-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .info-footer {
    border-top-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .social-links a {
    background: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
    color: var(--elements_text_color);
}
html[data-theme="dark"] .point-icon.blue {
    background: rgba(124, 159, 255, 0.15);
}
html[data-theme="dark"] .point-icon.green {
    background: rgba(52, 211, 153, 0.15);
}
html[data-theme="dark"] .point-icon.purple {
    background: rgba(147, 51, 234, 0.15);
}
html[data-theme="dark"] .file-upload-area {
    border-color: var(--dark-border-medium);
    background-color: var(--dark-elevation-1);
}
html[data-theme="dark"] .file-upload-area:hover {
    border-color: var(--primary_color);
    background-color: rgba(124, 159, 255, 0.05);
}
html[data-theme="dark"] .file-preview-item {
    background: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .context-info-display {
    background: var(--dark-elevation-1);
}
html[data-theme="dark"] #contact-form-alert.alert-success {
    background-color: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.2);
    color: #6EE7B7;
}
html[data-theme="dark"] #contact-form-alert.alert-danger {
    background-color: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.2);
    color: #FCA5A5;
}

/* --- Viewbox (email view page) --- */
html[data-theme="dark"] .viewbox {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--dark-border-subtle);
}
html[data-theme="dark"] .viewbox .viewbox-body {
    background-color: var(--dark-elevation-1);
}
html[data-theme="dark"] .viewbox-attachments {
    border-bottom-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .viewbox-attachments i {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .attachment-card-compact {
    background-color: var(--dark-elevation-0);
}
html[data-theme="dark"] .attachment-file-ext {
    background-color: var(--dark-elevation-3);
}
html[data-theme="dark"] .attachment-file-size {
    color: var(--text_muted);
}
html[data-theme="dark"] .attachment-grid-container::-webkit-scrollbar-track {
    background: var(--dark-elevation-0);
}
html[data-theme="dark"] .attachment-grid-container::-webkit-scrollbar-thumb {
    background: var(--dark-elevation-3);
}
html[data-theme="dark"] .attachment-grid-container::-webkit-scrollbar-thumb:hover {
    background: var(--dark-elevation-4);
}

/* --- Sticky ad banner --- */
html[data-theme="dark"] .sticky-adlobage {
    background-color: var(--dark-elevation-1);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .sticky-adlobage-close {
    background-color: var(--dark-elevation-1);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .sticky-adlobage .sticky-adlobage-close svg {
    fill: var(--text_color);
}

/* --- Plans swiper navigation --- */
html[data-theme="dark"] .plans-swiper-btn {
    border-color: var(--dark-border-medium);
    background: var(--dark-elevation-2);
    color: var(--elements_text_color);
}
html[data-theme="dark"] .plans-swiper-btn:hover:not(:disabled) {
    background: var(--dark-elevation-3);
    color: var(--text_color);
    border-color: var(--dark-border-medium);
}

/* --- Swiper pagination bullets --- */
html[data-theme="dark"] .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.2) !important;
}
html[data-theme="dark"] .swiper-pagination-bullet-active {
    background: var(--primary_color) !important;
}

/* --- Blog comments --- */
html[data-theme="dark"] .comments .comment {
    background-color: var(--dark-elevation-1);
}

/* --- Post meta --- */
html[data-theme="dark"] .post-meta .post-meta-item {
    color: var(--text_muted);
}
html[data-theme="dark"] .post-meta .post-meta-item:not(:last-child)::after {
    background-color: var(--text_muted);
}
html[data-theme="dark"] .post-meta i {
    color: var(--text_muted);
}

/* --- Blog sidebar list group --- */
html[data-theme="dark"] .list-group-item.list-group-item-action {
    border-bottom-color: var(--dark-border-subtle);
}

/* --- Blog card detail page --- */
html[data-theme="dark"] .card.card-blog {
    background-color: var(--dark-elevation-1);
    border-color: var(--dark-border-subtle);
}

/* --- About section panels --- */
html[data-theme="dark"] .about-panel {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

/* --- CTA section — full dark treatment --- */
html[data-theme="dark"] .cta-section-premium {
    background: var(--dark-elevation-0);
}
html[data-theme="dark"] .cta-premium-card {
    background: linear-gradient(135deg, var(--dark-elevation-2) 0%, var(--dark-elevation-1) 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 80px color-mix(in srgb, var(--primary_color) 8%, transparent);
    border: 1px solid var(--dark-border-medium);
}
html[data-theme="dark"] .cta-premium-content {
    color: var(--text_color);
}
html[data-theme="dark"] .cta-premium-badge {
    background: var(--primary_opacity);
    border-color: color-mix(in srgb, var(--primary_color) 25%, transparent);
    color: var(--primary_color);
}
html[data-theme="dark"] .cta-premium-title {
    color: #fff;
}
html[data-theme="dark"] .cta-premium-lead {
    color: var(--elements_text_color);
}
html[data-theme="dark"] .cta-premium-btn {
    background: var(--primary_color);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--primary_color) 35%, transparent);
}
html[data-theme="dark"] .cta-premium-btn:hover {
    background: color-mix(in srgb, var(--primary_color) 85%, white);
    color: #fff;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--primary_color) 45%, transparent);
}
html[data-theme="dark"] .cta-premium-motif--tl img,
html[data-theme="dark"] .cta-premium-motif--br img {
    opacity: 0.15;
}

/* --- Download button (browser extensions) --- */
html[data-theme="dark"] .download-btn {
    background-color: var(--dark-elevation-2);
}

/* --- Section badge utility --- */
html[data-theme="dark"] .badge-soft {
    background: rgba(124, 159, 255, 0.15);
}

/* --- Dark mode nav logo switching --- */
/* Sticky nav in dark mode has dark bg → show light logo (.white-logo) */
html[data-theme="dark"] .nav-sticky .dark-logo {
    display: none !important;
}
html[data-theme="dark"] .nav-sticky .white-logo {
    display: block !important;
}
html[data-theme="dark"] .nav:not(.nav-sticky) .dark-logo {
    display: none !important;
}
html[data-theme="dark"] .nav:not(.nav-sticky) .white-logo {
    display: block !important;
}

/* --- Intro definition quote block --- */
html[data-theme="dark"] .intro-premium .intro-definition {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

/* --- How-it-works section shadows --- */
html[data-theme="dark"] .how-section.how-section-timeline {
    background: linear-gradient(180deg, var(--background_color) 0%, color-mix(in srgb, var(--primary_color) 4%, transparent) 50%, var(--background_color) 100%);
}

/* --- Inline .bg-white2 utility --- */
html[data-theme="dark"] .bg-white2 {
    background-color: var(--dark-elevation-1) !important;
}

/* --- Browser extensions / blog section bg-white wrapper --- */
html[data-theme="dark"] .section.blog-section.bg-white {
    background-color: var(--dark-elevation-0) !important;
}
html[data-theme="dark"] .section.blog-section .section-card {
    background-color: var(--dark-elevation-2);
    border: 1px solid var(--dark-border-subtle);
}

/* --- Mail history (inside history popup) --- */
html[data-theme="dark"] .mail-history {
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .mail-history .mail-history-day .mail-history-day-header {
    background-color: var(--dark-elevation-2);
}
html[data-theme="dark"] .mail-history .mail-history-day .mail-history-item:hover {
    background-color: var(--dark-elevation-2);
}
html[data-theme="dark"] .mail-history-item span {
    color: var(--text_muted);
}

/* --- QR code popup --- */
html[data-theme="dark"] .qr-popup-panel {
    background: var(--dark-elevation-2);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .qr-popup-close {
    background: var(--dark-elevation-3);
    color: var(--text_color);
}
html[data-theme="dark"] .qr-popup-close:hover {
    background: var(--dark-elevation-4);
}
html[data-theme="dark"] .qr-popup-canvas {
    background: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .qr-popup-link-section {
    border-top-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .qr-popup-link-input {
    background: var(--dark-elevation-1) !important;
    border-color: var(--dark-border-medium);
    color: var(--text_muted);
}

/* --- Public Nav User Dropdown --- */
html[data-theme="dark"] .pub-user-trigger {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .pub-user-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--dark-border-medium);
}
html[data-theme="dark"] .nav-sticky .pub-user-trigger {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .nav-sticky .pub-user-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .pub-user-name {
    color: #e2e8f0;
}
html[data-theme="dark"] .pub-user-chevron {
    color: var(--text_muted);
}
html[data-theme="dark"] .pub-user-plan-badge {
    background: rgba(124, 159, 255, 0.12);
    color: #93b4ff;
}
/* Dropdown panel */
html[data-theme="dark"] .drop-down-menu.pub-user-dropdown {
    background: var(--dark-elevation-2);
    border-color: var(--dark-border-subtle);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .pub-user-dropdown-name {
    color: #e2e8f0;
}
html[data-theme="dark"] .pub-user-dropdown-email {
    color: var(--text_muted);
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-divider {
    background: var(--dark-border-subtle);
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-item {
    color: #d1d5db;
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-item i {
    color: #9ca3af;
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f9fafb;
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-item:hover i {
    color: #d1d5db;
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-item.pub-user-logout {
    color: #f87171;
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-item.pub-user-logout i {
    color: #f87171;
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-item.pub-user-logout:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}
html[data-theme="dark"] .pub-user-dropdown .pub-user-item.pub-user-logout:hover i {
    color: #fca5a5;
}
/* Mobile slide-out */
html[data-theme="dark"] .pub-user-mobile {
    border-bottom-color: var(--dark-border-subtle);
}
html[data-theme="dark"] .pub-user-mobile-name {
    color: var(--text_color);
}
html[data-theme="dark"] .pub-user-mobile-link {
    color: #d1d5db;
}
html[data-theme="dark"] .pub-user-mobile-link i {
    color: #9ca3af;
}
html[data-theme="dark"] .pub-user-mobile-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f9fafb;
}
html[data-theme="dark"] .pub-user-mobile-link:hover i {
    color: #d1d5db;
}
html[data-theme="dark"] .pub-user-mobile-link.pub-user-logout {
    color: #f87171;
}
html[data-theme="dark"] .pub-user-mobile-link.pub-user-logout i {
    color: #f87171;
}
html[data-theme="dark"] .pub-user-mobile-link.pub-user-logout:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
}
html[data-theme="dark"] .pub-user-mobile-link.pub-user-logout:hover i {
    color: #fca5a5;
}

/* --- Preloader --- */
html[data-theme="dark"] .preloader {
    background: var(--dark-elevation-0);
}