/* ============================================
   ArtVPN — Light Theme
   Темно-светлая, приглушённая палитра. Мягкая для глаз.
   ============================================ */

/* ─── Core Variables ─── */
html[data-theme="light"] {
    --bg: #C5C9D1;
    /* Ещё более тёмный и мягкий серо-синий фон */
    --bg2: #D4D8E0;
    --surface: rgba(255, 255, 255, 0.5);
    --surface2: #B8BCC4;
    --text: #1C2024;
    /* Тёмный, но не режущий глаз текст */
    --muted: #495057;
    --border: rgba(0, 0, 0, 0.15);
    --border2: rgba(0, 80, 160, 0.22);
    --success: #198754;
    --danger: #DC3545;

    /* Переопределяем переменные для тикетов (админка и поддержка) */
    /* Переопределяем переменные для тикетов (админка и поддержка) */
    --chat-bg: #94A3B8 !important;
    /* Ещё темнее, чтобы глаза совсем не напрягались */
    --chat-surface: #CBD5E1 !important;
    /* Темнее для боковой панели и шапки */
    --chat-glass: rgba(148, 163, 184, 0.85) !important;
    --chat-glass-border: rgba(0, 0, 0, 0.1) !important;
    --chat-border: rgba(0, 0, 0, 0.2) !important;
    --msg-client: #FFFFFF !important;
    /* Белые плашки клиента на сером фоне отлично читаются */
    --msg-admin: #F1F5F9 !important;
    /* Слегка сероватые для админа */
}

/* ─── Light Theme Color Accents (ТЁМНЫЕ ВАРИАНТЫ ДЛЯ ЧИТАЕМОСТИ НА БЕЛОМ) ─── */
html[data-theme="light"][data-color="purple"] {
    --accent: #7E22CE !important;
    /* Тёмно-фиолетовый */
    --accent-glow: rgba(126, 34, 206, 0.2) !important;
    --border2: rgba(126, 34, 206, 0.2) !important;
}

html[data-theme="light"][data-color="yellow"] {
    --accent: #B45309 !important;
    /* Тёмно-янтарный */
    --accent-glow: rgba(180, 83, 9, 0.2) !important;
    --border2: rgba(180, 83, 9, 0.2) !important;
}

html[data-theme="light"][data-color="green"] {
    --accent: #15803D !important;
    /* Тёмно-зелёный */
    --accent-glow: rgba(21, 128, 61, 0.2) !important;
    --border2: rgba(21, 128, 61, 0.2) !important;
}

html[data-theme="light"][data-color="cyan"] {
    --accent: #0369A1 !important;
    /* Тёмно-голубой */
    --accent-glow: rgba(3, 105, 161, 0.2) !important;
    --border2: rgba(3, 105, 161, 0.2) !important;
}

html[data-theme="light"][data-color="red"] {
    --accent: #B91C1C !important;
    /* Тёмно-красный */
    --accent-glow: rgba(185, 28, 28, 0.2) !important;
    --border2: rgba(185, 28, 28, 0.2) !important;
}

html[data-theme="light"][data-color="blue"] {
    --accent: #1D4ED8 !important;
    /* Тёмно-синий */
    --accent-glow: rgba(29, 78, 216, 0.2) !important;
    --border2: rgba(29, 78, 216, 0.2) !important;
}

/* ─── Light Theme Premium Colors (Тоже тёмные для читаемости) ─── */
html[data-theme="light"][data-color="discord"] {
    --accent: #4338CA !important;
    /* Тёмный индиго */
    --accent-glow: rgba(67, 56, 202, 0.2) !important;
}

html[data-theme="light"][data-color="sunset"] {
    --accent: #C2410C !important;
    /* Тёмно-оранжевый */
    --accent-glow: rgba(194, 65, 12, 0.2) !important;
}

html[data-theme="light"][data-color="ocean"] {
    --accent: #0F766E !important;
    /* Тёмно-бирюзовый (Океан) */
    --accent-glow: rgba(15, 118, 110, 0.2) !important;
}

/* ─── Изменение самих кнопок (кружков) в настройках ─── */
html[data-theme="light"] #swatch-purple {
    background: #A855F7 !important;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4) !important;
}

html[data-theme="light"] #swatch-yellow {
    background: #EAB308 !important;
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.4) !important;
}

html[data-theme="light"] #swatch-green {
    background: #22C55E !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4) !important;
}

html[data-theme="light"] #swatch-cyan {
    background: #06B6D4 !important;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4) !important;
}

html[data-theme="light"] #swatch-red {
    background: #EF4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
}

html[data-theme="light"] #swatch-blue {
    background: #3B82F6 !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4) !important;
}

/* Премиум кружки */
html[data-theme="light"] #swatch-discord {
    background: linear-gradient(135deg, #4F46E5, #6366F1) !important;
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.4) !important;
}

html[data-theme="light"] #swatch-sunset {
    background: linear-gradient(135deg, #F97316, #FB923C) !important;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4) !important;
}

html[data-theme="light"] #swatch-ocean {
    background: linear-gradient(135deg, #14B8A6, #2DD4BF) !important;
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.4) !important;
}

/* ─── Body & Background ─── */
html[data-theme="light"] body {
    background: var(--bg);
}

html[data-theme="light"] .bg-grid {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* ─── Scrollbars ─── */
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border: 2px solid var(--bg);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* ─── Typography ─── */
html[data-theme="light"] .hero h1 {
    background: linear-gradient(135deg, #1A1D20, #495057);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, #212529, #495057);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── Glass Components ─── */
html[data-theme="light"] .glass {
    background: rgba(235, 237, 240, 0.85);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(12px);
}

html[data-theme="light"] .glass-glow {
    border-color: rgba(0, 80, 160, 0.15);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
}

/* ─── Navigation ─── */
html[data-theme="light"] nav {
    background: rgba(207, 211, 217, 0.92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(16px);
}

html[data-theme="light"] .mobile-bottom-nav {
    background: rgba(207, 211, 217, 0.94);
    border-top-color: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(16px);
}

/* ─── Buttons ─── */
html[data-theme="light"] .btn-primary {
    color: #FFFFFF !important;
    /* Белый текст на тёмном акценте */
    box-shadow: 0 2px 8px var(--accent-glow);
}

html[data-theme="light"] .btn-primary:hover {
    color: #FFFFFF !important;
}

html[data-theme="light"] .btn-ghost {
    color: var(--text);
    border-color: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .btn-ghost:hover {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .btn-outline {
    border-color: rgba(0, 80, 160, 0.2);
    background: rgba(0, 80, 160, 0.05);
}

html[data-theme="light"] .btn-outline:hover {
    background: rgba(0, 80, 160, 0.12);
}

html[data-theme="light"] .btn-danger {
    border-color: rgba(220, 53, 69, 0.25);
    color: #DC3545;
    background: rgba(220, 53, 69, 0.08);
}

html[data-theme="light"] .btn-danger:hover {
    background: rgba(220, 53, 69, 0.15);
}

/* ─── Section Tag ─── */
html[data-theme="light"] .section-tag {
    background: rgba(0, 80, 160, 0.08);
    border-color: rgba(0, 80, 160, 0.16);
}

/* ─── Notification Bell & Panel ─── */
html[data-theme="light"] .notif-bell {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .notif-bell:hover {
    background: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .notif-panel {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .notif-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .notif-item.unread {
    background: rgba(0, 80, 160, 0.06);
}

/* ─── Toast Notifications ─── */
html[data-theme="light"] .toast {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    color: var(--text);
}

/* ─── Cookie Banner ─── */
html[data-theme="light"] #cookie-banner {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* ─── Settings Panel ─── */
html[data-theme="light"] .settings-btn {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text);
}

html[data-theme="light"] .settings-btn:hover {
    background: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .settings-btn.active {
    background: var(--border2);
    border-color: var(--accent);
}

html[data-theme="light"] .color-swatch {
    border-color: rgba(0, 0, 0, 0.15);
}

/* ─── Gallery Cards (Reviews) ─── */
html[data-theme="light"] .gallery-card {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ─── Footer ─── */
html[data-theme="light"] footer {
    border-top-color: rgba(0, 0, 0, 0.1);
}

/* ─── Confirm Modal ─── */
html[data-theme="light"] #custom-confirm>.glass {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

/* ═══════════════════════════════════════
   FLOATING TELEGRAM WIDGET
   ═══════════════════════════════════════ */

html[data-theme="light"] .floating-tg-widget {
    background: rgba(207, 211, 217, 0.92) !important;
    border-color: rgba(0, 80, 160, 0.25) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .floating-tg-widget:hover {
    border-color: rgba(0, 80, 160, 0.4) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] .floating-tg-widget * {
    color: var(--text);
}

html[data-theme="light"] .tg-mini-btn {
    background: rgba(207, 211, 217, 0.94) !important;
    border-color: rgba(0, 80, 160, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .tg-mini-btn:hover {
    border-color: rgba(0, 80, 160, 0.5) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="light"] .tg-btn {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .tg-btn:hover {
    background: rgba(0, 0, 0, 0.14) !important;
}

html[data-theme="light"] .floating-tg-widget [style*="rgba(14,14,22"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* ═══════════════════════════════════════
   DASHBOARD (dashboard.html)
   ═══════════════════════════════════════ */

html[data-theme="light"] .sidebar-card {
    background: #CBD5E1;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .section-card {
    background: #CBD5E1;
    border-color: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .premium-modal-overlay {
    background: rgba(0, 0, 0, 0.4);
}

html[data-theme="light"] .premium-modal-box {
    background: #E5E7EB;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .premium-modal-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 20px;
}

html[data-theme="light"] .premium-modal-title {
    background: linear-gradient(90deg, #1A1D20, #495057);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .premium-modal-subtitle {
    color: rgba(0, 0, 0, 0.6);
}

html[data-theme="light"] .premium-modal-close {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .premium-modal-close:hover {
    background: rgba(220, 53, 69, 0.12);
}

html[data-theme="light"] .premium-modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .premium-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .premium-modal-icon-wrap {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(59, 130, 246, 0.1));
    border-color: rgba(168, 85, 247, 0.2);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.1);
}

html[data-theme="light"] .premium-setting-card {
    background: #F3F4F6;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border-radius: 16px;
}

html[data-theme="light"] .premium-setting-card:hover {
    border-color: rgba(168, 85, 247, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .premium-setting-card::before {
    background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.05), transparent 70%);
}

html[data-theme="light"] .c-select-trigger {
    background: #E5E7EB;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    font-weight: 600;
}

html[data-theme="light"] .c-select-trigger:hover {
    background: #D1D5DB;
}

html[data-theme="light"] .c-options {
    background: #F9FAFB;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .c-optgroup {
    background: rgba(0, 0, 0, 0.03);
}

html[data-theme="light"] .c-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .c-options {
    background: #E4E7EB;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .c-options::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .c-options::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .c-option:hover {
    background: rgba(168, 85, 247, 0.1);
}

html[data-theme="light"] .c-option.selected {
    background: rgba(168, 85, 247, 0.12);
}

html[data-theme="light"] .limit-badge {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .limit-badge:hover {
    background: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .limit-modal-overlay {
    background: rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .limit-modal-box {
    background: #D9DCE1;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .key-card {
    background: #B0BEC5;
    border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .badge-count {
    color: #1A1D20;
}

/* ═══════════════════════════════════════
   INLINE DARK BACKGROUNDS
   ═══════════════════════════════════════ */

html[data-theme="light"] [style*="rgba(0,0,0,0.8)"],
html[data-theme="light"] [style*="rgba(0,0,0,0.85)"],
html[data-theme="light"] [style*="rgba(0,0,0,0.75)"],
html[data-theme="light"] [style*="rgba(0,0,0,0.6)"] {
    background: rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="light"] [style*="background:#0E0E16"],
html[data-theme="light"] [style*="background: #0E0E16"],
html[data-theme="light"] [style*="#1a1a2e"],
html[data-theme="light"] [style*="#0a0a12"],
html[data-theme="light"] [style*="#0f0f1a"],
html[data-theme="light"] [style*="#0c0c16"],
html[data-theme="light"] [style*="background: linear-gradient(145deg, rgba(15,15,25"],
html[data-theme="light"] [style*="background:linear-gradient(145deg, rgba(15,15,25"],
html[data-theme="light"] [style*="linear-gradient(180deg, #1a1a2e"] {
    background: #D9DCE1 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] [style*="background: rgba(20, 20, 30"],
html[data-theme="light"] [style*="background:rgba(20,20,30"],
html[data-theme="light"] [style*="background: rgba(14, 14, 22"],
html[data-theme="light"] [style*="background:rgba(14,14,22"] {
    background: rgba(207, 211, 217, 0.9) !important;
}

html[data-theme="light"] [style*="background:rgba(0,0,0,0.25)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.2)"],
html[data-theme="light"] [style*="background:rgba(0,0,0,0.3)"],
html[data-theme="light"] [style*="background: rgba(0,0,0,0.3)"] {
    background: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] [style*="background:rgba(255,255,255,0.02)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.02)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.03)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"],
html[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.05)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.07)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.07)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.08)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.08)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.12)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.12)"] {
    background: rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.0"] {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255,0.0"] {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="border-top: 1px solid rgba(255,255,255,0.0"] {
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* ОВЕРРАЙДЫ ДЛЯ ЦВЕТА ТЕКСТА (Privacy, Agreement, Posts) */
html[data-theme="light"] .legal-doc,
html[data-theme="light"] .legal-doc * {
    color: var(--text) !important;
}

html[data-theme="light"] .legal-doc [style*="background"] {
    background-color: transparent !important;
}

html[data-theme="light"] .post-body,
html[data-theme="light"] .post-content-card,
html[data-theme="light"] .legal-content {
    color: var(--text) !important;
}

html[data-theme="light"] .post-body p,
html[data-theme="light"] .post-body span,
html[data-theme="light"] .post-body li,
html[data-theme="light"] .post-body h1,
html[data-theme="light"] .post-body h2,
html[data-theme="light"] .post-body h3 {
    color: var(--text) !important;
}

/* Исправление наведения в разделах новостей */
html[data-theme="light"] .section-card:hover {
    color: var(--text) !important;
}

html[data-theme="light"] [style*="linear-gradient(135deg, rgba(0,229,255,0.08), rgba(191,90,242,0.06)"] {
    background: linear-gradient(135deg, rgba(0, 100, 180, 0.08), rgba(168, 85, 247, 0.07)) !important;
}

html[data-theme="light"] [style*="box-shadow: 0 30px 80px rgba(0,0,0"],
html[data-theme="light"] [style*="box-shadow: 0 40px 100px rgba(0,0,0"] {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

/* ═══════════════════════════════════════
   SHOP (shop.html)
   ═══════════════════════════════════════ */

html[data-theme="light"] .plan {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .plan:hover {
    border-color: rgba(0, 80, 160, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .plan.featured {
    background: rgba(0, 150, 200, 0.06);
    box-shadow: 0 2px 16px rgba(0, 150, 200, 0.08);
}

html[data-theme="light"] .auto-ping {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .tab {
    color: var(--muted);
}

html[data-theme="light"] .tab.active {
    color: #fff;
}

html[data-theme="light"] .plan-badge {
    color: #fff;
}

html[data-theme="light"] .plan-btn {
    color: #1A1D20 !important;
}

html[data-theme="light"] .tabs {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .tab-info {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════
   INDEX / HOME (index.html)
   ═══════════════════════════════════════ */

html[data-theme="light"] .pricing-preview-card {
    background: linear-gradient(135deg, rgba(0, 100, 180, 0.06), rgba(168, 85, 247, 0.05));
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .pricing-preview-card::before {
    background: radial-gradient(ellipse at center, rgba(0, 100, 180, 0.04), transparent 60%);
}

/* Удален конфликтный класс .step, который делал "белые прямоугольники" на главной */

/* ═══════════════════════════════════════
   LOGIN / REGISTER PAGES
   ═══════════════════════════════════════ */

html[data-theme="light"] .auth-card,
html[data-theme="light"] .register-card {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #1A1D20 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    border-color: var(--accent) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.1) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: rgba(0, 0, 0, 0.45) !important;
}

/* ═══════════════════════════════════════
   FAQ (faq.html)
   ═══════════════════════════════════════ */

html[data-theme="light"] .faq-item {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .faq-item:hover {
    border-color: rgba(0, 80, 160, 0.2);
}

/* ═══════════════════════════════════════
   APPS PAGE (apps.html)
   ═══════════════════════════════════════ */

html[data-theme="light"] .app-card {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════
   USER DETAIL (user_detail.html)
   ═══════════════════════════════════════ */
html[data-theme="light"] .user-header,
html[data-theme="light"] .card {
    background: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    color: #1C2024 !important;
}

html[data-theme="light"] .action-box,
html[data-theme="light"] .sub-card {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #1C2024 !important;
}

html[data-theme="light"] .user-avatar {
    color: #1C2024 !important;
}

html[data-theme="light"] .action-box h3,
html[data-theme="light"] .sub-card [style*="color:var(--muted)"],
html[data-theme="light"] .card [style*="color:var(--muted)"] {
    color: #4B5563 !important;
}

html[data-theme="light"] .card span[style*="background:rgba(0,0,0,0.3)"] {
    background: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    color: #4B5563 !important;
}

html[data-theme="light"] .user-header span[style*="color:#fff"],
html[data-theme="light"] .card span[style*="color:#fff"],
html[data-theme="light"] .user-header span[style*="color: #fff"],
html[data-theme="light"] .card span[style*="color: #fff"] {
    color: #1C2024 !important;
}

/* ═══════════════════════════════════════
   INDEX PAGE (index.html)
   ═══════════════════════════════════════ */
html[data-theme="light"] .hero-badge {
    background: var(--accent-glow) !important;
    border-color: var(--border2) !important;
    color: var(--accent) !important;
}

html[data-theme="light"] div[style*="color:#34d399"] {
    background: rgba(21, 128, 61, 0.1) !important;
    border-color: rgba(21, 128, 61, 0.3) !important;
    color: #15803D !important;
}

html[data-theme="light"] div[style*="color:#f59e0b"] {
    background: rgba(180, 83, 9, 0.1) !important;
    border-color: rgba(180, 83, 9, 0.3) !important;
    color: #B45309 !important;
}

html[data-theme="light"] .hero h1 .h-accent {
    background: transparent !important;
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
}

html[data-theme="light"] .step-num {
    background: var(--accent) !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] .btn-hero-primary {
    background: var(--accent) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px var(--accent-glow) !important;
}

/* ═══════════════════════════════════════
   TICKET DETAIL (ticket_detail.html)
   ═══════════════════════════════════════ */

html[data-theme="light"] .ticket-chat {
    background: #E4E7EB;
}

html[data-theme="light"] .chat-bubble {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .chat-bubble.staff {
    background: rgba(0, 100, 180, 0.08);
    border-color: rgba(0, 100, 180, 0.15);
}

html[data-theme="light"] .client-avatar-inner {
    background: #DFE1E5 !important;
    color: var(--text) !important;
}

/* Hardcoded dark backgrounds in ticket details */
html[data-theme="light"] [style*="rgba(18, 18, 28"],
html[data-theme="light"] [style*="rgba(18,18,28"] {
    background: rgba(255, 255, 255, 0.6) !important;
}

/* Color for the ticket messages text */
html[data-theme="light"] .msg-text,
html[data-theme="light"] .msg-body {
    color: #1C2024 !important;
}

html[data-theme="light"] .msg-author-name,
html[data-theme="light"] .msg-time {
    color: #495057 !important;
}

html[data-theme="light"] .system-msg {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #1C2024 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Fix ticket client typing row */
html[data-theme="light"] #client-typing-row .msg-body {
    background: #FFFFFF !important;
}

/* Fix sidebar and chat layout */
html[data-theme="light"] .chat-container {
    background: #FFFFFF !important;
    border-color: #DCE3EC !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"] .chat-main {
    background: #F5F7FB !important;
}

html[data-theme="light"] .chat-sidebar {
    background: #F8FAFC !important;
    border-color: #DCE3EC !important;
}

html[data-theme="light"] .chat-topbar,
html[data-theme="light"] .chat-bottom {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: #DCE3EC !important;
}

html[data-theme="light"] .theme-switcher {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

html[data-theme="light"] .theme-btn.active {
    border-color: #334155 !important;
}

html[data-theme="light"] .chat-topbar-title {
    color: #1C2024 !important;
}

/* Force ALL divs with inline white text in the topbar to be dark grey */
html[data-theme="light"] .chat-topbar div[style*="color"] {
    color: #495057 !important;
}

html[data-theme="light"] .chat-topbar-id {
    color: #495057 !important;
}

html[data-theme="light"] .chat-topbar .chat-topbar-title {
    color: #1C2024 !important;
}

html[data-theme="light"] .agent-name,
html[data-theme="light"] .client-name,
html[data-theme="light"] .ticket-card-subject,
html[data-theme="light"] .ticket-meta-val,
html[data-theme="light"] .info-val,
html[data-theme="light"] .rating-block h4 {
    color: #0F172A !important;
}

html[data-theme="light"] .ticket-card-label,
html[data-theme="light"] .ticket-meta-key,
html[data-theme="light"] .info-key,
html[data-theme="light"] .rating-block p,
html[data-theme="light"] .chat-closed-banner,
html[data-theme="light"] .chat-container [style*="color:rgba(255,255,255"] {
    color: #475569 !important;
}

html[data-theme="light"] .ticket-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .rating-block {
    background: #FFFFFF !important;
    border-color: #D8E0EA !important;
}

html[data-theme="light"] .reaction-picker {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] .reaction-btn {
    background: #E9EEF5 !important;
}

html[data-theme="light"] .youtube-player {
    border-color: #CBD5E1 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .youtube-player-link {
    background: #F1F5F9 !important;
    color: #334155 !important;
}

/* Fix Close Ticket Modal */
html[data-theme="light"] .close-modal-box {
    background: #CBD5E1 !important;
}

html[data-theme="light"] .close-modal-box h3 {
    color: #1C2024 !important;
}

html[data-theme="light"] .close-modal-box p {
    color: #495057 !important;
}

html[data-theme="light"] .close-modal-box textarea {
    background: #FFFFFF !important;
    color: #1C2024 !important;
    border-color: #94A3B8 !important;
}

html[data-theme="light"] .close-modal-box textarea::placeholder {
    color: #94A3B8 !important;
}

html[data-theme="light"] .close-modal-box button[style*="rgba(255,255,255,0.6)"] {
    background: #94A3B8 !important;
    color: #1C2024 !important;
    border-color: #64748B !important;
}

html[data-theme="light"] .close-modal-box button[style*="#fbbf24"] {
    background: #FEF3C7 !important;
    color: #D97706 !important;
    border-color: #FDE68A !important;
}

html[data-theme="light"] .chat-text-input {
    color: #1A1D20 !important;
}

html[data-theme="light"] .chat-input-wrap {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}

html[data-theme="light"] .chat-input-wrap:focus-within {
    border-color: var(--accent) !important;
    background: #FFFFFF !important;
}

html[data-theme="light"] .chat-text-input::placeholder {
    color: #6B7280 !important;
}

html[data-theme="light"] .chat-action {
    color: #6B7280 !important;
}

html[data-theme="light"] .info-key,
html[data-theme="light"] .chat-sidebar-back,
html[data-theme="light"] .chat-topbar-id {
    color: #4B5563 !important;
}

/* Fix Email Mockup in Light Theme */
html[data-theme="light"] #esm-mockup {
    background: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] #esm-mockup>div:first-child {
    background: #CBD5E1 !important;
    border-bottom-color: #94A3B8 !important;
}

html[data-theme="light"] #esm-mockup [style*="background: rgba(0,229,255,0.06)"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--accent) !important;
}

html[data-theme="light"] #esm-mockup [style*="background: rgba(255,255,255,0.03)"] {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] #esm-mockup [style*="background: rgba(255,255,255,0.02)"] {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] #esm-body-text {
    color: var(--text) !important;
}

/* Fix Status Badges */
html[data-theme="light"] .status-pending {
    background: #FEF3C7 !important;
    color: #D97706 !important;
}

html[data-theme="light"] .status-closed {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

html[data-theme="light"] .status-open {
    background: #D1FAE5 !important;
    color: #059669 !important;
}

/* Fix Sidebar and Topbar Buttons */
html[data-theme="light"] .sidebar-btn-close {
    background: #FEF3C7 !important;
    border-color: #FDE68A !important;
    color: #D97706 !important;
}

html[data-theme="light"] .sidebar-btn-take {
    background: #E0F2FE !important;
    border-color: #BAE6FD !important;
    color: #0284C7 !important;
}

html[data-theme="light"] .mobile-close-btn {
    background: #FEE2E2 !important;
    border-color: #FECACA !important;
    color: #DC2626 !important;
}

html[data-theme="light"] .chat-sidebar .client-block {
    background: transparent !important;
}

html[data-theme="light"] [style*="rgba(255,255,255,0.05)"] {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* ═══════════════════════════════════════
   AGREEMENT & PRIVACY
   ═══════════════════════════════════════ */

html[data-theme="light"] .legal-content {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════
   OWNER ADMIN DASHBOARD
   ═══════════════════════════════════════ */

html[data-theme="light"] .stats .stat {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .card {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .tab-btn {
    color: var(--muted);
}

html[data-theme="light"] .tab-btn.active {
    color: #fff;
}

html[data-theme="light"] .ow-table tr:hover td {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .fi {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text);
}

html[data-theme="light"] .fi:focus {
    background: #FFFFFF;
    border-color: var(--accent);
}

html[data-theme="light"] .fi option {
    background: #E4E7EB;
    color: var(--text);
}

html[data-theme="light"] .sw {
    background: rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════
   NEWS PAGES
   ═══════════════════════════════════════ */

html[data-theme="light"] .news-card {
    background: #E4E7EB;
    border-color: rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════
   BANNED PAGE
   ═══════════════════════════════════════ */

html[data-theme="light"] .banned-card {
    background: #E4E7EB;
    border-color: rgba(220, 53, 69, 0.22);
}

/* ═══════════════════════════════════════
   MISC UTILITY OVERRIDES
   ═══════════════════════════════════════ */

html[data-theme="light"] .notif-badge {
    border-color: var(--bg);
}

html[data-theme="light"] .data-table th {
    background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .data-table td {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .badge-accent {
    color: #1A1D20 !important;
    /* Чёрный текст на акцентном бейдже */
}

html[data-theme="light"] .review-text {
    color: #212529;
}

html[data-theme="light"] .review-text::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .swal2-popup {
    background: #D9DCE1 !important;
    color: var(--text) !important;
}

html[data-theme="light"] .swal2-input {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .ref-code-box,
html[data-theme="light"] .ref-link-box {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .qr-view-overlay {
    background: rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="light"] .keep-active-card {
    background: #E4E7EB;
}

html[data-theme="light"] .price-new {
    color: var(--text);
}

html[data-theme="light"] .pbadge-ok {
    background: rgba(25, 135, 84, 0.15);
    color: #198754;
}

html[data-theme="light"] .pbadge-no {
    background: rgba(220, 53, 69, 0.15);
    color: #DC3545;
}

/* ═══════════════════════════════════════
   CUSTOM CHAT WIDGET (Поддержка ArtVPN)
   ═══════════════════════════════════════ */

html[data-theme="light"] #chat-window {
    background: #D9DCE1 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    color: var(--text) !important;
}

html[data-theme="light"] .chat-header-mini {
    background: linear-gradient(135deg, rgba(0, 100, 180, 0.1), transparent) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .chat-footer-mini {
    background: rgba(207, 211, 217, 0.9) !important;
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* Кнопки внутри чата (FAQ, частые вопросы) - делаем их белыми для чёткости */
html[data-theme="light"] .faq-btn {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1A1D20 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .faq-btn:hover {
    background: #F8F9FA !important;
    border-color: var(--accent) !important;
    transform: translateY(-1px);
}

/* Плашки ответов в чате */
html[data-theme="light"] .chat-answer-rich {
    background: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .chat-answer-rich .answer-step {
    background: #F8F9FA !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .chat-no-response {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), transparent) !important;
    border-color: rgba(168, 85, 247, 0.15) !important;
}

html[data-theme="light"] #chat-mini-body [style*="rgba(0,229,255,0.08)"] {
    background: rgba(0, 100, 180, 0.06) !important;
    border-color: rgba(0, 100, 180, 0.15) !important;
}

html[data-theme="light"] #chat-mini-body [style*="rgba(245,158,11,0.1)"] {
    background: rgba(192, 120, 0, 0.08) !important;
    border-color: rgba(192, 120, 0, 0.18) !important;
}

/* ═══════════════════════════════════════
   SETTINGS MODAL (light theme)
   ═══════════════════════════════════════ */

/* Основной фон модалки настроек: чуть темнее, чтобы не слепило */
html[data-theme="light"] #settings-modal > div {
    background: #C8CDD5 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

/* Шапка модалки настроек (sticky header) */
html[data-theme="light"] #settings-modal > div > div:first-child {
    background: #C8CDD5 !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Кнопка закрытия */
html[data-theme="light"] #settings-modal button[onclick*="closeSettingsModal"] {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Иконки уведомлений: повышаем контрастность фона, чтобы они не сливались */
html[data-theme="light"] .notify-details {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .notify-details[open] {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] .notify-details[open] .notify-summary {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] .notify-item {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Иконки в уведомлениях: усиливаем фон, чтобы не сливались с белым */
html[data-theme="light"] #settings-modal [style*="border-radius:10px"][style*="display:flex"][style*="font-size:16px"] {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Тоглы (неактивные) — были полупрозрачные белые, теперь серые */
html[data-theme="light"] #settings-modal button[style*="background:rgba(255,255,255,0.12)"] {
    background: rgba(0, 0, 0, 0.12) !important;
}

/* Карточки внутри настроек (Аккаунт, Безопасность) */
html[data-theme="light"] #settings-modal [style*="background:rgba(255,255,255,0.03)"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] #settings-modal [style*="background:rgba(255,255,255,0.07)"] {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Кнопки Сменить пароль / Включить 2FA */
html[data-theme="light"] #settings-modal button[style*="background:rgba(255,255,255,0.03)"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] #settings-modal button[style*="background:rgba(255,255,255,0.03)"]:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* ═══════════════════════════════════════
   SUBSCRIPTION / KEY MODALS — центрирование
   ═══════════════════════════════════════ */

/* Подписка modal-sub: фикс центрирования */
html[data-theme="light"] #modal-sub {
    justify-content: center !important;
    align-items: center !important;
}

/* Подписка modal-sub: фон карточки */
html[data-theme="light"] #modal-sub > div {
    background: #C8CDD5 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

/* modal-key: фон карточки */
html[data-theme="light"] #modal-key > div {
    background: #C8CDD5 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

/* Оба модала: центрирование при одновременном открытии */
html[data-theme="light"] #modal-config {
    justify-content: center !important;
    align-items: center !important;
}
/* Dashboard: high-contrast status chips and purchase-limit explanations. */
html[data-theme="light"] .whitelist-buy-btn span {
    background: #7c2d12 !important;
    color: #fff7ed !important;
    border: 1px solid #9a3412 !important;
}

html[data-theme="light"] .limit-modal-highlight {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: #111827 !important;
}

html[data-theme="light"] .limit-modal-highlight b,
html[data-theme="light"] .limit-modal-explainer,
html[data-theme="light"] .limit-modal-explainer b {
    color: #111827 !important;
}

html[data-theme="light"] .limit-modal-explainer {
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
}

/* Shop payment flow: keep every choice readable on the light palette even
   though the base template also carries dark-theme inline fallbacks. */
html[data-theme="light"] #pay-modal .modal-box {
    background: #dce4ee !important;
    border-color: #aebccd !important;
    color: #0f172a !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .22) !important;
}

html[data-theme="light"] #pay-modal .payment-balance-card,
html[data-theme="light"] #pay-modal .payment-choice-balance,
html[data-theme="light"] #pay-modal .method-card,
html[data-theme="light"] #pay-modal .modal-actions-row > button:first-child {
    background: #cbd6e2 !important;
    border-color: #aebccd !important;
    color: #0f172a !important;
}

html[data-theme="light"] #pay-modal .payment-choice-balance:hover,
html[data-theme="light"] #pay-modal .method-card:hover {
    background: #becbd9 !important;
    border-color: #7c3aed !important;
}

html[data-theme="light"] #pay-modal #promo-code-input {
    background: #edf2f7 !important;
    border-color: #aebccd !important;
    color: #0f172a !important;
}

html[data-theme="light"] #pay-modal .payment-confirm-summary strong,
html[data-theme="light"] #pay-modal .payment-confirm-summary span {
    color: #0f172a !important;
}

html[data-theme="light"] #pay-modal .payment-choice-online {
    color: #ffffff !important;
}