/* Recompensated — light-mode component overrides. * Loaded AFTER custom.css so these win via load-order, not specificity overrides. * Rules here only run when . * * Zero specificity-override policy — if you're tempted, raise specificity instead. * Document any allowlist exception inline with a // justification comment. * * Organized by surface, not by append-order: * 1. Foundation — header, nav, ticker * 2. Cards & forms — shared primitives * 3. Dashboard & earn — streak, quest, homepage, rewards, leaderboard, VIP badges * 4. Chat & social — chatbox, online users * 5. Admin — DataTables, forms * 6. Landing — public homepage (landing.css) */ /* ========================================================================= * 1. FOUNDATION * ========================================================================= */ /* 1a. Header ----------------------------------------------------------- */ [data-theme="light"] .site-header { background: var(--bg-card); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); } [data-theme="light"] .site-header__brand, [data-theme="light"] .site-header__logo-icon { color: var(--text-primary); } [data-theme="light"] .top-nav-link { color: var(--text-muted); } [data-theme="light"] .top-nav-link:hover, [data-theme="light"] .top-nav-link.is-active { color: var(--accent); background: var(--accent-dim); } [data-theme="light"] .account-trigger { background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-primary); } [data-theme="light"] .account-trigger:hover { background: var(--bg-surface-hover); } [data-theme="light"] .account-trigger__name { color: var(--text-primary); } [data-theme="light"] .account-dropdown { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } [data-theme="light"] .account-dropdown__item { color: var(--text-body); } [data-theme="light"] .account-dropdown__item:hover { background: var(--bg-surface); color: var(--text-primary); } [data-theme="light"] .notif-bell { border-color: var(--border-subtle); color: var(--text-muted); } [data-theme="light"] .notif-bell__badge { border-color: var(--bg-card); } [data-theme="light"] .notif-dropdown { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } [data-theme="light"] .notif-dropdown__header { color: var(--text-primary); border-color: var(--border-subtle); } [data-theme="light"] .notif-item { border-color: var(--border-subtle); } [data-theme="light"] .notif-item:hover { background: var(--bg-surface); } [data-theme="light"] .notif-item.is-unread { background: var(--accent-dim); } [data-theme="light"] .notif-item__title { color: var(--text-primary); } [data-theme="light"] .notif-item__msg { color: var(--text-muted); } [data-theme="light"] .notif-item__time { color: var(--text-faint); } [data-theme="light"] .notif-dropdown__mark-read { color: var(--accent); } [data-theme="light"] .theme-toggle__dark, [data-theme="light"] .theme-toggle__light { color: var(--text-muted); } [data-theme="light"] .theme-toggle__dark { display: none; } [data-theme="light"] .theme-toggle__light { display: inline; } /* 1b. Points pill + Withdraw button ------------------------------------ */ [data-theme="light"] .points-pill { background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-primary); } [data-theme="light"] .points-pill__value, [data-theme="light"] .points-pill__value small, [data-theme="light"] .points-pill__value strong { color: var(--money); } /* Withdraw button — money gradient, the one exception to indigo-for-primary */ [data-theme="light"] .btn-withdraw, [data-theme="light"] a.btn-withdraw { background: linear-gradient(180deg, var(--money-strong), var(--money)); border: 1px solid transparent; color: #ffffff; box-shadow: var(--shadow-sm); transition: box-shadow 160ms ease, transform 160ms ease; } [data-theme="light"] .btn-withdraw:hover, [data-theme="light"] a.btn-withdraw:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: #ffffff; } /* 1c. Ticker bar ------------------------------------------------------- */ [data-theme="light"] .ticker-bar { background: var(--ticker-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="light"] .ticker-item { color: #d8def0; } [data-theme="light"] .ticker-item strong { color: #34f0b5; } /* ========================================================================= * 2. CARDS & FORMS * ========================================================================= */ /* 2a. Cards (.panel-card, widgets, .support-hero) ---------------------- */ [data-theme="light"] .panel-card, [data-theme="light"] .support-hero, [data-theme="light"] .dashboard-widget, [data-theme="light"] .stat-card, [data-theme="light"] .content-card { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); color: var(--text-body); } /* Hero treatments — withdraw landing, onboarding welcome, VIP current tier */ [data-theme="light"] .panel-card--hero, [data-theme="light"] .withdraw-hero, [data-theme="light"] .vip-current-card, [data-theme="light"] .onboarding-quest__header { box-shadow: var(--shadow-md); } [data-theme="light"] .panel-card h1, [data-theme="light"] .panel-card h2, [data-theme="light"] .panel-card h3, [data-theme="light"] .page-title, [data-theme="light"] .page-kicker { color: var(--text-primary); } [data-theme="light"] .page-subtitle { color: var(--text-muted); } /* Generic Tailwind neutralizers (only where they clash in light mode) */ [data-theme="light"] body.bg-gray-800, [data-theme="light"] .bg-gray-800 { background: var(--bg-base); } [data-theme="light"] .bg-gray-900 { background: var(--bg-base); } [data-theme="light"] .bg-gray-700 { background: var(--bg-card); } [data-theme="light"] .text-white { color: var(--text-primary); } [data-theme="light"] .text-gray-100 { color: var(--text-primary); } [data-theme="light"] .text-gray-200 { color: var(--text-primary); } [data-theme="light"] .text-gray-300 { color: var(--text-body); } [data-theme="light"] .text-gray-400 { color: var(--text-muted); } [data-theme="light"] .text-gray-500 { color: var(--text-muted); } [data-theme="light"] .border-gray-900, [data-theme="light"] .border-gray-800, [data-theme="light"] .border-t.border-gray-900 { border-color: var(--border-subtle); } [data-theme="light"] .hover\:bg-gray-900:hover { background: var(--bg-surface); } /* 2b. Forms (.field-input, .input_text, textarea, select) -------------- */ [data-theme="light"] .field-input, [data-theme="light"] .input_text, [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="search"], [data-theme="light"] textarea, [data-theme="light"] select { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-primary); transition: border-color 160ms ease, box-shadow 160ms ease; } [data-theme="light"] .field-input:focus, [data-theme="light"] .input_text:focus, [data-theme="light"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } [data-theme="light"] .field-input::placeholder, [data-theme="light"] .input_text::placeholder, [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-faint); } [data-theme="light"] .field-input.is-error, [data-theme="light"] .input_text.is-error, [data-theme="light"] input.is-error { border-color: var(--danger); } [data-theme="light"] .field-input.is-error:focus, [data-theme="light"] input.is-error:focus:not([type="checkbox"]):not([type="radio"]) { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35); } [data-theme="light"] .chip-link { background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-body); } [data-theme="light"] .chip-link:hover, [data-theme="light"] .chip-link.is-active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); } /* ========================================================================= * 3. DASHBOARD & EARN * ========================================================================= */ /* 3a. Daily streak widget ---------------------------------------------- */ [data-theme="light"] .streak-widget, [data-theme="light"] .daily-bonus-card { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } [data-theme="light"] .streak-widget__label, [data-theme="light"] .daily-bonus-card__label { color: var(--text-muted); } [data-theme="light"] .streak-widget__value, [data-theme="light"] .streak-count { color: var(--text-primary); } [data-theme="light"] .streak-widget__multiplier, [data-theme="light"] .streak-multiplier-value { color: var(--money); } [data-theme="light"] .streak-freeze-badge { background: rgba(110, 86, 248, 0.10); color: #4c3bcf; border: 1px solid rgba(110, 86, 248, 0.30); } [data-theme="light"] .streak-flame, [data-theme="light"] .flame-icon { background: var(--money-dim); color: var(--money); } [data-theme="light"] .claim-button, [data-theme="light"] #dailyClaimButton { background: linear-gradient(180deg, var(--money-strong), var(--money)); color: #ffffff; border: 1px solid transparent; box-shadow: var(--shadow-sm); } [data-theme="light"] .claim-button:hover:not(:disabled), [data-theme="light"] #dailyClaimButton:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translateY(-1px); } [data-theme="light"] .claim-button:disabled, [data-theme="light"] #dailyClaimButton:disabled { background: var(--bg-surface); color: var(--text-faint); box-shadow: none; } /* 3b. Onboarding quest ------------------------------------------------- */ [data-theme="light"] .onboarding-quest { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } [data-theme="light"] .onboarding-quest__title { color: var(--text-primary); } [data-theme="light"] .onboarding-quest__subtitle { color: var(--text-muted); } [data-theme="light"] .onboarding-quest__dismiss { color: var(--text-faint); } [data-theme="light"] .onboarding-quest__dismiss:hover { color: var(--text-body); background: var(--bg-surface); } [data-theme="light"] .onboarding-quest__progress { background: var(--bg-surface); border-radius: 999px; overflow: hidden; } [data-theme="light"] .onboarding-quest__progress-fill { background: linear-gradient(90deg, var(--money-strong), var(--money)); } [data-theme="light"] .onboarding-quest__phase-title { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; } [data-theme="light"] .onboarding-quest__step { background: var(--bg-card); border: 1px solid var(--border-subtle); } [data-theme="light"] .onboarding-quest__step:hover { background: var(--bg-surface); } [data-theme="light"] .onboarding-quest__step.is-complete { background: var(--money-dim); border-color: var(--money-border); } [data-theme="light"] .onboarding-quest__step-title { color: var(--text-primary); } [data-theme="light"] .onboarding-quest__step-desc { color: var(--text-muted); } [data-theme="light"] .onboarding-quest__step-done { color: var(--money); font-weight: 600; } [data-theme="light"] .onboarding-quest__step-cta { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #ffffff; border: 1px solid transparent; box-shadow: var(--shadow-xs); } [data-theme="light"] .onboarding-quest__step-cta:hover { box-shadow: var(--shadow-sm); background: linear-gradient(180deg, var(--accent), var(--accent-hover)); } [data-theme="light"] .onboarding-quest__step-icon { background: var(--accent-dim); color: var(--accent); } [data-theme="light"] .onboarding-quest__step-icon--discord { background: rgba(88, 101, 242, 0.12); color: #5865f2; } [data-theme="light"] .onboarding-quest__step-icon--instagram { background: rgba(225, 48, 108, 0.10); color: #e1306c; } [data-theme="light"] .onboarding-quest__step-icon--tiktok { background: var(--bg-surface); color: var(--text-primary); } /* ============================================================ 3c. Homepage metrics + info cards ------------------------------------------------------------ */ [data-theme="light"] .homepage-metric { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); color: var(--text-primary); } [data-theme="light"] .homepage-metric__label { color: var(--text-muted); } [data-theme="light"] .homepage-metric__value { color: var(--text-primary); } [data-theme="light"] .homepage-metric__value--money { color: var(--money); } [data-theme="light"] .homepage-info-card { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } [data-theme="light"] .homepage-info-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); transition: all 180ms ease; } [data-theme="light"] .homepage-info-card__title { color: var(--text-primary); } [data-theme="light"] .homepage-info-card__copy { color: var(--text-body); } /* ============================================================ 3d. Rewards / withdraw grid ------------------------------------------------------------ */ [data-theme="light"] .withdraw-card { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); transition: box-shadow 180ms ease, transform 180ms ease; } [data-theme="light"] .withdraw-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } [data-theme="light"] .withdraw-card__label { color: var(--text-muted); } [data-theme="light"] .withdraw-card__value { color: var(--text-primary); } [data-theme="light"] .withdraw-card__icon, [data-theme="light"] .processor-icon { background: var(--bg-surface); border: 1px solid var(--border-subtle); } /* Bonus code redeem section */ [data-theme="light"] .bonus-code-form, [data-theme="light"] .coupon-redeem { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } [data-theme="light"] .bonus-code-form__label, [data-theme="light"] .coupon-redeem__label { color: var(--text-muted); } [data-theme="light"] .bonus-code-form button, [data-theme="light"] .coupon-redeem button { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #ffffff; border: 1px solid transparent; box-shadow: var(--shadow-sm); } /* ============================================================ 3e. Leaderboard table ------------------------------------------------------------ */ [data-theme="light"] .leaderboard-table, [data-theme="light"] .leaderboard table { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); border-radius: 10px; overflow: hidden; } [data-theme="light"] .leaderboard-table thead, [data-theme="light"] .leaderboard table thead { background: var(--bg-surface); } [data-theme="light"] .leaderboard-table th, [data-theme="light"] .leaderboard table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 600; border-bottom: 1px solid var(--border-subtle); } [data-theme="light"] .leaderboard-table td, [data-theme="light"] .leaderboard table td { color: var(--text-body); border-bottom: 1px solid var(--border-subtle); } [data-theme="light"] .leaderboard-table tbody tr:nth-child(even) td, [data-theme="light"] .leaderboard table tbody tr:nth-child(even) td { background: var(--bg-surface); } [data-theme="light"] .leaderboard-table tbody tr:hover td, [data-theme="light"] .leaderboard table tbody tr:hover td { background: var(--bg-surface-hover); } /* Medal rows — medal tints — allowlist for task 18 */ [data-theme="light"] .leaderboard-row--1 td, [data-theme="light"] .leaderboard-row--rank-1 td { background: var(--money-dim); } [data-theme="light"] .leaderboard-row--2 td, [data-theme="light"] .leaderboard-row--rank-2 td { background: rgba(148, 163, 184, 0.12); /* silver medal tint — allowlist for task 18 */ } [data-theme="light"] .leaderboard-row--3 td, [data-theme="light"] .leaderboard-row--rank-3 td { background: rgba(217, 119, 6, 0.12); /* bronze medal tint — allowlist for task 18 */ } /* Tab bar */ [data-theme="light"] .leaderboard-tabs { border-bottom: 1px solid var(--border-subtle); } [data-theme="light"] .leaderboard-tab { color: var(--text-muted); border-bottom: 2px solid transparent; } [data-theme="light"] .leaderboard-tab:hover { color: var(--text-primary); } [data-theme="light"] .leaderboard-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); } /* Referral leaderboard section */ [data-theme="light"] #referralSection { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } /* ============================================================ 3f. VIP tier badges ------------------------------------------------------------ */ [data-theme="light"] .vip-tier-badge, [data-theme="light"] .chat-vip-badge { border: 1px solid transparent; box-shadow: var(--shadow-xs); font-weight: 600; } /* Tier tints are semantic — allowlist for task 18 */ [data-theme="light"] .vip-tier-badge--silver, [data-theme="light"] .chat-vip-badge--silver { background: rgba(148, 163, 184, 0.14); color: #475569; border-color: rgba(148, 163, 184, 0.32); } [data-theme="light"] .vip-tier-badge--gold, [data-theme="light"] .chat-vip-badge--gold { background: rgba(217, 119, 6, 0.14); color: #b45309; border-color: rgba(217, 119, 6, 0.32); } [data-theme="light"] .vip-tier-badge--platinum, [data-theme="light"] .chat-vip-badge--platinum { background: rgba(139, 92, 246, 0.14); color: #6d28d9; border-color: rgba(139, 92, 246, 0.32); } /* Platinum rainbow animation — legible on white card bg. Hex values are brand-animation allowlist for task 18. */ [data-theme="light"] .chat-name--rainbow { background: linear-gradient(90deg, #dc2626, #d97706, #059669, #0284c7, #8b5cf6, #dc2626); background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: chatRainbow 4s linear infinite; } /* ========================================================================= * 4. CHAT & SOCIAL * ========================================================================= */ /* 4a. Chatbox sidebar -------------------------------------------------- */ /* Sidebar frame */ [data-theme="light"] .live-panel, [data-theme="light"] #chatbox_sidebar { background: var(--bg-card); border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); color: var(--text-body); } [data-theme="light"] .live-panel__title, [data-theme="light"] .live-panel__kicker { color: var(--text-primary); } [data-theme="light"] .live-panel__header { background: var(--bg-card); border-color: var(--border-subtle); } [data-theme="light"] .live-panel__online { background: var(--money-dim); border-color: var(--money-border); color: var(--money); } [data-theme="light"] .live-panel__online-label { color: var(--money); } [data-theme="light"] .live-panel__close { border-color: var(--border-subtle); background: var(--bg-surface); color: var(--text-muted); } /* Tabs */ [data-theme="light"] .live-tabs { border-color: var(--border-subtle); } [data-theme="light"] .live-tabs__button { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-surface); } [data-theme="light"] .live-tabs__button:hover { color: var(--text-primary); } [data-theme="light"] .live-tabs__button.is-active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); } /* Moderation toolbar — semantic status hex (danger red, mute purple, muted pink, info blue) are interim hardcodes; allowlist for task 18. */ [data-theme="light"] .chat_moderation_tools { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); } [data-theme="light"] .chat_tool_btn--danger { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.22); color: #dc2626; } [data-theme="light"] .chat_tool_btn--toggle { background: var(--money-dim); border-color: var(--money-border); color: var(--money-strong); } [data-theme="light"] .chat_tool_btn--mute { background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.22); color: #7c3aed; } [data-theme="light"] .chat_tool_btn--mute.is-muted { background: rgba(236, 72, 153, 0.08); border-color: rgba(236, 72, 153, 0.22); color: #be185d; } [data-theme="light"] .chat_tool_btn--info { background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.22); color: #2563eb; } /* Online panel */ [data-theme="light"] .chat-online-panel { background: var(--bg-surface); border-color: var(--border-subtle); } [data-theme="light"] .chat-online-panel__header { color: var(--text-muted); border-color: var(--border-subtle); } [data-theme="light"] .chat-online-panel__header strong { color: var(--money); } [data-theme="light"] .chat-online-user { background: var(--bg-card); border-color: var(--border-subtle); color: var(--text-body); } /* Messages */ [data-theme="light"] .message { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); } [data-theme="light"] .message__body b, [data-theme="light"] .message__text { color: var(--text-primary); } [data-theme="light"] .message__time { color: var(--text-faint); } [data-theme="light"] .message__name b { color: var(--text-primary); } [data-theme="light"] .chat-message-action { color: var(--text-muted); } [data-theme="light"] .chat-message-action:hover { color: var(--text-primary); } /* Chat media */ [data-theme="light"] .chat-media-btn { border-color: var(--border-subtle); background: var(--bg-surface); color: var(--text-body); } [data-theme="light"] .chat-media-panel { background: var(--bg-surface); border-color: var(--border-subtle); } [data-theme="light"] .chat-media-preview { border-color: var(--border-subtle); background: var(--bg-surface); } [data-theme="light"] .chat-media-hint { color: var(--text-muted); } /* Chat status messages */ [data-theme="light"] .chat-status { color: #dc2626; } [data-theme="light"] .chat-status.is-success { color: var(--money-strong); } [data-theme="light"] .chat-status.is-warning { color: #d97706; } /* Chat empty state */ [data-theme="light"] .chat-empty-hint, [data-theme="light"] .live-chat-list .text-center { color: var(--text-faint); } /* FAQ bot — emerald left border */ [data-theme="light"] .faq-bot { background: var(--bg-surface); } [data-theme="light"] .faq-bot__msg--bot .faq-bot__bubble { background: var(--bg-surface); color: var(--text-body); } [data-theme="light"] .faq-bot__msg--user .faq-bot__bubble { background: var(--money-dim); color: var(--text-primary); } [data-theme="light"] .faq-bot__topic-btn { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-body); } [data-theme="light"] .faq-bot__composer input { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-subtle); } [data-theme="light"] .support-bot-card, [data-theme="light"] .support-bot-answer, [data-theme="light"] .support-staff-note { background: var(--bg-surface); border-color: var(--border-subtle); } [data-theme="light"] .support-bot-card h3, [data-theme="light"] .support-bot-answer strong { color: var(--text-primary); } [data-theme="light"] .support-bot-card p, [data-theme="light"] .support-bot-answer p { color: var(--text-body); } /* GIF picker */ [data-theme="light"] #gif_picker_panel, [data-theme="light"] #emoji_picker_panel, [data-theme="light"] .chat-picker-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } [data-theme="light"] .chat-picker-search input { background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-primary); } [data-theme="light"] .chat-picker-search input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; } /* Input area */ [data-theme="light"] #message, [data-theme="light"] .input_text { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-primary); } [data-theme="light"] #message:focus, [data-theme="light"] .input_text:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; } /* Send button */ [data-theme="light"] #chat_submit_btn { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); color: #ffffff; border: 1px solid transparent; box-shadow: var(--shadow-sm); } /* Chat admin badge */ [data-theme="light"] .chat-admin-badge { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); color: #dc2626; } /* ============================================================ 4b. Online users panel ------------------------------------------------------------ */ [data-theme="light"] .online-users-panel, [data-theme="light"] #onlineUsersPanel { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } [data-theme="light"] .online-users-panel__header, [data-theme="light"] #onlineUsersPanel .panel-header { color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); } [data-theme="light"] .online-user-row, [data-theme="light"] #onlineUsersPanel .user-row { border-bottom: 1px solid var(--border-subtle); color: var(--text-body); } [data-theme="light"] .online-user-row:hover { background: var(--bg-surface); } [data-theme="light"] .online-presence-dot { background: var(--money); box-shadow: 0 0 0 3px var(--money-dim); } [data-theme="light"] .online-presence-dot--inactive { background: var(--text-faint); box-shadow: none; } /* ========================================================================= * 5. ADMIN * ========================================================================= */ /* 5a. Admin DataTables ------------------------------------------------- */ /* Note: admin uses Bootstrap 4 + DataTables 1.10.10. */ [data-theme="light"] .dataTables_wrapper { color: var(--text-body); } [data-theme="light"] table.dataTable thead th, [data-theme="light"] table.dataTable thead td { background: var(--bg-surface); color: var(--text-primary); border-bottom: 1px solid var(--border-medium); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; } [data-theme="light"] table.dataTable tbody tr { background: var(--bg-card); } [data-theme="light"] table.dataTable tbody tr:hover { background: var(--bg-surface-hover); } [data-theme="light"] table.dataTable tbody td { color: var(--text-body); border-top: 1px solid var(--border-subtle); } /* Pagination */ [data-theme="light"] .dataTables_paginate .paginate_button { color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border-subtle); } [data-theme="light"] .dataTables_paginate .paginate_button.current, [data-theme="light"] .dataTables_paginate .paginate_button:hover { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); } /* Search + length controls */ [data-theme="light"] .dataTables_filter input, [data-theme="light"] .dataTables_length select { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-primary); } [data-theme="light"] .dataTables_filter input:focus, [data-theme="light"] .dataTables_length select:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; } [data-theme="light"] .dataTables_info { color: var(--text-muted); } /* Filter bar */ [data-theme="light"] .admin-filter-bar, [data-theme="light"] .filter-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } /* Bootstrap badges used in admin */ [data-theme="light"] .badge { border: 1px solid transparent; box-shadow: var(--shadow-xs); } /* 5b. Admin forms ------------------------------------------------------ */ [data-theme="light"] .admin-form-section, [data-theme="light"] .card.admin-card, [data-theme="light"] .admin-page .card { background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); } [data-theme="light"] .admin-form-section label, [data-theme="light"] .admin-page .form-group label, [data-theme="light"] .admin-page label { color: var(--text-muted); font-weight: 600; } [data-theme="light"] .admin-page .form-control { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-primary); } [data-theme="light"] .admin-page .form-control:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; } [data-theme="light"] .admin-page .btn-primary { background: linear-gradient(180deg, var(--accent-strong), var(--accent)); border: 1px solid transparent; color: #ffffff; box-shadow: var(--shadow-sm); } [data-theme="light"] .admin-page .btn-primary:hover { background: linear-gradient(180deg, var(--accent), var(--accent-hover)); box-shadow: var(--shadow-md); } /* danger gradient start — brand invariant, allowlist for task 18 */ [data-theme="light"] .admin-page .btn-danger { background: linear-gradient(180deg, #ef4444, var(--danger)); border: 1px solid transparent; color: #ffffff; box-shadow: var(--shadow-sm); } /* VIP management hero on user-edit page */ [data-theme="light"] .vip-management-section, [data-theme="light"] .admin-vip-card { border-top: 3px solid var(--accent); box-shadow: var(--shadow-md); } /* ── 5.x Skin Shop ──────────────────────────────────── */ [data-theme="light"] .skin-hero__balance { background: var(--bg-surface); border-color: var(--border-subtle); } [data-theme="light"] .skin-hero__balance span { color: var(--text-primary); } [data-theme="light"] .skin-hero__balance small { color: var(--text-muted); } [data-theme="light"] .skin-shop-info__cell { color: var(--text-body); } [data-theme="light"] .skin-card { background: linear-gradient(180deg, var(--bg-card), var(--bg-card-end)); border-color: var(--border-subtle); } [data-theme="light"] .skin-card__name { color: var(--text-primary); } [data-theme="light"] .skin-card__media { background: radial-gradient(ellipse at center, rgba(15,23,42,0.05), transparent 70%); } [data-theme="light"] .skin-card__points { color: #b45309; } [data-theme="light"] .skin-card__usd { color: var(--text-muted); } [data-theme="light"] .skin-card__usd s { color: rgba(15,23,42,0.35); } [data-theme="light"] .skin-trade-warning { background: rgba(244, 162, 97, 0.06); border-color: rgba(244, 162, 97, 0.4); } [data-theme="light"] .skin-trade-warning p { color: var(--text-body); } [data-theme="light"] .skin-order-card__img, [data-theme="light"] .skin-modal__preview img { background: var(--bg-surface); } [data-theme="light"] .skin-order-card__meta { color: var(--text-muted); } [data-theme="light"] .skin-order-card__note, [data-theme="light"] .skin-order-card__hint { color: var(--text-body); } /* ========================================================================= * 6. LANDING — public homepage * Most landing rules use tokens directly (see public/css/landing.css), so * light mode mostly inherits. Only the body backdrop gradient and a few * surface tweaks need explicit light variants. * ========================================================================= */ [data-theme="light"] body:has(.landing-v3) { background-image: radial-gradient(circle at 20% 4%, var(--money-dim), transparent 26rem), radial-gradient(circle at 88% 12%, var(--accent-dim), transparent 30rem), linear-gradient(180deg, #f6f9fc, #eef3fa); } [data-theme="light"] .reward-console { background: radial-gradient(circle at top left, var(--money-dim), transparent 26rem), var(--bg-card); box-shadow: var(--shadow-lg); } [data-theme="light"] .landing-button--secondary { background: var(--bg-card); border-color: var(--accent-border); color: var(--accent); } [data-theme="light"] .balance-card__coin { background: var(--money-dim); } [data-theme="light"] .balance-card, [data-theme="light"] .bonus-card, [data-theme="light"] .live-card, [data-theme="light"] .landing-stats, [data-theme="light"] .ways-panel, [data-theme="light"] .way-card, [data-theme="light"] .reward-tile, [data-theme="light"] .trust-panel, [data-theme="light"] .hero-pill, [data-theme="light"] .payment-chip { box-shadow: var(--shadow-sm); }