/* ============================================================ Blitz1v1 — Theme System (Dark / Light) Default: dark. Toggled via [data-theme="light"] on . System preference auto-detected on first visit. ============================================================ */ /* ── DARK THEME (default) ───────────────────────────────────── */ :root, [data-theme="dark"] { --th-bg: #06080c; --th-bg2: #0e121a; --th-panel: rgba(13,17,23,0.70); --th-card: rgba(22,27,34,0.60); --th-border: rgba(255,255,255,0.08); --th-border-hover: rgba(255,255,255,0.15); --th-text: #f1f5f9; --th-muted: #94a3b8; --th-muted2: #64748b; --th-glass: rgba(15,23,42,0.70); --th-shadow: rgba(0,0,0,0.50); --th-shadow-lg: rgba(0,0,0,0.40); --th-scrollbar: rgba(255,255,255,0.12); --th-scrollbar-h: rgba(255,255,255,0.20); --th-input-bg: rgba(255,255,255,0.03); --th-overlay: rgba(0,0,0,0.60); --th-nav-panel: rgba(10,14,22,0.98); --th-footer-link: #94a3b8; --th-footer-h: #fff; --th-logo: #fff; --th-empty-border: rgba(255,255,255,0.05); --th-quote-bg: rgba(30,41,59,0.40); --th-announce-bg: rgba(15,23,42,0.80); --th-vs-box-bg: transparent; --th-vs-bg: #0d1117; /* -- Modal / Dropdown variables (Dark) -- */ --th-modal-bg: linear-gradient(180deg, #0f172a 0%, #06080c 100%); --th-modal-border: rgba(255, 255, 255, 0.08); --th-modal-shadow: 0 30px 90px rgba(0, 0, 0, 0.8); --th-dropdown-bg: rgba(15, 23, 42, 0.98); --th-dropdown-border: rgba(255, 255, 255, 0.1); --th-subtle-bg: rgba(255, 255, 255, 0.03); --th-subtle-border: rgba(255, 255, 255, 0.05); /* -- Skeleton Colors (Dark) -- */ --th-skeleton-bg: #0e121a; --th-skeleton-pulse: #1e293b; /* -- About Page specific (Dark) -- */ --th-feature-bg: rgba(255, 255, 255, 0.03); --th-feature-border: rgba(255, 255, 255, 0.08); --th-step-num: #0b0d12; /* -- Bracket Palette (Dark) -- */ --round-palette-border-1: rgba(16, 185, 129, 0.4); --round-palette-top-1: rgba(16, 185, 129, 0.12); --round-palette-bottom-1: rgba(16, 185, 129, 0.03); --round-palette-accent-1: #10b981; --round-palette-border-2: rgba(59, 130, 246, 0.4); --round-palette-top-2: rgba(59, 130, 246, 0.12); --round-palette-bottom-2: rgba(59, 130, 246, 0.03); --round-palette-accent-2: #3b82f6; --round-palette-border-3: rgba(168, 85, 247, 0.4); --round-palette-top-3: rgba(168, 85, 247, 0.12); --round-palette-bottom-3: rgba(168, 85, 247, 0.03); --round-palette-accent-3: #a855f7; --round-palette-border-4: rgba(249, 115, 22, 0.4); --round-palette-top-4: rgba(249, 115, 22, 0.12); --round-palette-bottom-4: rgba(249, 115, 22, 0.03); --round-palette-accent-4: #f97316; --round-palette-border-5: rgba(244, 63, 94, 0.4); --round-palette-top-5: rgba(244, 63, 94, 0.12); --round-palette-bottom-5: rgba(244, 63, 94, 0.03); --round-palette-accent-5: #f43f5e; --round-palette-border-6: rgba(6, 182, 212, 0.4); --round-palette-top-6: rgba(6, 182, 212, 0.12); --round-palette-bottom-6: rgba(6, 182, 212, 0.03); --round-palette-accent-6: #06b6d4; --bracket-connection-color: #334155; color-scheme: dark; } /* ── LIGHT THEME ────────────────────────────────────────────── */ [data-theme="light"] { --th-bg: #f1f5f9; /* Soft Slate-100 for premium feel */ --th-bg2: #ffffff; --th-panel: #ffffff; --th-card: #ffffff; --th-border: #cbd5e1; /* Strengthened professional stroke (Slate-300) */ --th-border-hover: #94a3b8; /* Slate-400 */ --th-text: #0f172a; /* Improved readability */ --th-muted: #475569; /* Improved readability */ --th-muted2: #64748b; --th-glass: rgba(255, 255, 255, 0.95); --th-shadow: rgba(0,0,0,0.06); --th-shadow-lg: rgba(0,0,0,0.10); --th-scrollbar: #cbd5e1; --th-scrollbar-h: #94a3b8; --th-input-bg: #f8fafc; --th-overlay: rgba(0,0,0,0.40); --th-nav-panel: #ffffff; --th-footer-link: #475569; --th-footer-h: #0f172a; --th-logo: #0f172a; --th-quote-bg: #f8fafc; --th-announce-bg: #ffffff; --th-vs-box-bg: #f1f5f9; --th-vs-bg: #ffffff; --th-subtle-bg: rgba(0, 0, 0, 0.03); --th-subtle-border: rgba(0, 0, 0, 0.05); /* -- Skeleton Colors (Light) -- */ --th-skeleton-bg: #f1f5f9; --th-skeleton-pulse: #e2e8f0; /* -- Bracket Palette (Light) -- */ --round-palette-border-1: rgba(37, 99, 235, 0.35); --round-palette-top-1: rgba(37, 99, 235, 0.08); --round-palette-bottom-1: rgba(37, 99, 235, 0.02); --round-palette-accent-1: #2563eb; --round-palette-border-2: rgba(22, 163, 74, 0.35); --round-palette-top-2: rgba(22, 163, 74, 0.08); --round-palette-bottom-2: rgba(22, 163, 74, 0.02); --round-palette-accent-2: #16a34a; --round-palette-border-3: rgba(147, 51, 234, 0.35); --round-palette-top-3: rgba(147, 51, 234, 0.08); --round-palette-bottom-3: rgba(147, 51, 234, 0.02); --round-palette-accent-3: #9333ea; --round-palette-border-4: rgba(234, 88, 12, 0.35); --round-palette-top-4: rgba(234, 88, 12, 0.08); --round-palette-bottom-4: rgba(234, 88, 12, 0.02); --round-palette-accent-4: #ea580c; --round-palette-border-5: rgba(225, 29, 72, 0.35); --round-palette-top-5: rgba(225, 29, 72, 0.08); --round-palette-bottom-5: rgba(225, 29, 72, 0.02); --round-palette-accent-5: #e11d48; --round-palette-border-6: rgba(8, 145, 178, 0.35); --round-palette-top-6: rgba(8, 145, 178, 0.08); --round-palette-bottom-6: rgba(8, 145, 178, 0.02); --round-palette-accent-6: #0891b2; --bracket-connection-color: #94a3b8; color-scheme: light; /* ── Page-level shared CSS vars (bracket, h2h, results, leaderboard) ── */ --bg: #ffffff; --panel: #ffffff; --panel-soft: #f1f5fb; --border: #d1d9e6; --text: #404145; --muted: #64748b; --primary: #6ea8fe; --success: #10b981; --danger: #ef4444; --glass: rgba(255,255,255,0.75); --glass-border: rgba(0,0,0,0.09); --shadow: 0 8px 24px rgba(0,0,0,0.04); --radius: 16px; /* ── standings-shared.css modal variables ── */ --modal-bg: #ffffff; --modal-surface: rgba(241,245,249,0.80); --modal-border: rgba(0,0,0,0.09); --modal-shadow: 0 20px 50px rgba(0,0,0,0.08); --row-hover: rgba(0,0,0,0.03); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; /* ── challenge.css variables ── */ --oc-bg: #ffffff; --oc-surface: rgba(255,255,255,0.85); --oc-surface-2: rgba(0,0,0,0.03); --oc-surface-hover: rgba(241,245,249,0.95); --oc-border: rgba(0,0,0,0.09); --oc-border-bright: rgba(0,0,0,0.15); --oc-text: #0f172a; --oc-muted: #64748b; --oc-shadow: 0 8px 30px rgba(0,0,0,0.05); /* -- Modal / Dropdown variables (Light) -- */ --th-modal-bg: #ffffff; --th-modal-border: #cbd5e1; /* Match global strong border */ --th-modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); --th-dropdown-bg: #ffffff; --th-dropdown-border: #cbd5e1; --th-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); /* -- About Page specific (Light) -- */ --th-feature-bg: #f8fafc; --th-feature-border: #e2e8f0; --th-step-num: #ffffff; } /* ============================================================ Global Token Synchronization ============================================================ */ :root { --bg-global: var(--th-bg); --panel-global: var(--th-bg2); --border-global: var(--th-border); --border-hover-global:var(--th-border-hover); --text-global: var(--th-text); --muted-global: var(--th-muted); --glass-global: var(--th-glass); --arena-bg: var(--th-panel); --arena-card-bg: var(--th-card); --arena-border: var(--th-border); --arena-border-bright:var(--th-border-hover); --arena-text: var(--th-text); --arena-text-muted: var(--th-muted); } /* ── Body & page background ────────────────────────────── */ html { transition: background-color 0.25s ease, color 0.25s ease; } body { background: var(--th-bg) !important; color: var(--th-text) !important; transition: background-color 0.25s ease, color 0.25s ease; } /* ── Scrollbars ─────────────────────────────────────────────── */ * { scrollbar-color: var(--th-scrollbar) transparent; } ::-webkit-scrollbar-thumb { background: var(--th-scrollbar); } ::-webkit-scrollbar-thumb:hover { background: var(--th-scrollbar-h); } /* ── Quick-nav (header bar) ─────────────────────────────────── */ .quick-nav { background: var(--th-glass) !important; border-color: var(--th-border) !important; box-shadow: 0 10px 30px var(--th-shadow) !important; } .quick-nav-btn { color: var(--th-muted) !important; } .quick-nav-btn:hover { color: var(--th-text) !important; } /* ── Blitz header ───────────────────────────────────────────── */ .blitz-header { background: var(--th-glass) !important; border-color: var(--th-border) !important; box-shadow: 0 10px 30px var(--th-shadow) !important; } [data-theme="light"] .blitz-header h1 { background: linear-gradient(to bottom,#0f172a,#475569) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="light"] .logo-brand { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } /* ── Panels / cards ─────────────────────────────────────────── */ .active-blitz-section, .join-room-section, .create-room-section { background: var(--th-panel) !important; border-color: var(--th-border) !important; box-shadow: 0 16px 40px var(--th-shadow-lg) !important; backdrop-filter: blur(24px) saturate(180%) !important; } .blitz-room-card { background: var(--th-card) !important; border: 1px solid var(--th-border) !important; box-shadow: var(--th-shadow) !important; border-radius: 12px !important; } [data-theme="light"] .blitz-room-card:hover { background: #ffffff !important; border-color: #10b981 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; } .blitz-room-card h4 { color: var(--th-text) !important; } /* ── Input fields ───────────────────────────────────────────── */ .active-search-input, .input-group-premium, .optional-input-wrapper input, .room-form input, .room-form select { background: var(--th-input-bg) !important; border-color: var(--th-border) !important; color: var(--th-text) !important; } .active-search-input::placeholder, .input-main-row input::placeholder { color: var(--th-muted) !important; } [data-theme="light"] .active-search-input:focus { background: rgba(255,255,255,0.9) !important; box-shadow: 0 0 0 4px rgba(16,185,129,0.12) !important; } /* ── Config grid items ──────────────────────────────────────── */ .config-item-glass { background: var(--th-card) !important; border-color: var(--th-border) !important; } .config-input-wrap input, .config-value-display span:first-child { color: var(--th-text) !important; } .unit { color: var(--th-muted) !important; } /* ── Problems section ───────────────────────────────────────── */ .problems-section-premium { background: var(--th-input-bg) !important; border-color: var(--th-border) !important; } .add-problem-btn-premium { background: var(--th-input-bg) !important; border-color: var(--th-border) !important; color: var(--th-muted) !important; } .add-problem-btn-premium:hover { color: var(--th-text) !important; border-color: var(--th-border-hover) !important; } /* ── Toggle side panel btn ──────────────────────────────────── */ .toggle-side-panel-btn { background: var(--th-input-bg) !important; border-color: var(--th-border) !important; color: var(--th-muted) !important; } /* ── Nav/room action buttons ────────────────────────────────── */ .nav-btn, .add-problem-btn-small { background: var(--th-input-bg) !important; border-color: var(--th-border) !important; color: var(--th-text) !important; } .nav-btn:hover, .add-problem-btn-small:hover { background: var(--th-card) !important; } .leave-room-btn, .cancel-game-btn { background: var(--th-input-bg) !important; border-color: var(--th-border) !important; color: var(--th-text) !important; } /* ── Room info bar ──────────────────────────────────────────── */ .room-info-bar { background: var(--th-glass) !important; border-color: var(--th-border) !important; } .room-name, .room-id, .room-players { color: var(--th-text) !important; } /* ── Match status bar ───────────────────────────────────────── */ .match-status-bar { background: var(--th-glass) !important; border-color: var(--th-border) !important; } .match-status { color: var(--th-text) !important; } /* ── VS redesign ────────────────────────────────────────────── */ .vs-players-redesign { background: var(--th-vs-bg) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important; } .vs-player-box { background: var(--th-vs-box-bg) !important; } [data-theme="light"] .vs-player-label { color: #475569 !important; } [data-theme="light"] .vs-player-handle { text-shadow: none !important; color: #0f172a !important; } /* ── Spectator panel ────────────────────────────────────────── */ .spectator-panel { background: var(--th-panel) !important; border-color: var(--th-border) !important; } [data-theme="light"] .spectator-panel h3 { color: var(--th-text) !important; } /* ── Standings ──────────────────────────────────────────────── */ .standings { background: var(--th-panel) !important; border-color: var(--th-border) !important; } [data-theme="light"] .standings-table th, [data-theme="light"] .standings-table td { color: var(--th-text) !important; } /* ── Site footer ────────────────────────────────────────────── */ .site-footer { background: var(--th-glass) !important; border-color: var(--th-border) !important; box-shadow: 0 20px 40px var(--th-shadow-lg) !important; color: var(--th-muted) !important; } .footer-logo, .footer-section h4 { color: var(--th-footer-h) !important; } .footer-links li a { color: var(--th-footer-link) !important; } .footer-links li a:hover { color: var(--th-footer-h) !important; } .footer-copyright { color: var(--th-muted) !important; } .footer-bottom { border-color: var(--th-border) !important; } [data-theme="light"] .footer-logo, [data-theme="light"] .logo-brand { -webkit-text-fill-color: #0f172a !important; } /* ── Mobile nav drawer ──────────────────────────────────────── */ .mobile-nav-drawer-panel { background: var(--th-nav-panel) !important; border-color: var(--th-border) !important; } .mobile-nav-links a { color: var(--th-muted) !important; } .mobile-nav-links a:hover, .mobile-nav-links a.active { color: var(--th-text) !important; } [data-theme="light"] .mobile-nav-drawer-overlay { background: rgba(0,0,0,0.35) !important; } /* ── Auth modals ────────────────────────────────────────────── */ [data-theme="light"] .auth-v-content { background: rgba(255,255,255,0.97) !important; border-color: rgba(0,0,0,0.08) !important; color: #0f172a !important; } [data-theme="light"] .auth-v-modal { background: rgba(0,0,0,0.4) !important; } /* ── Public announcements ───────────────────────────────────── */ [data-theme="light"] .public-announcement { background: rgba(241,245,249,0.95) !important; border-color: rgba(0,0,0,0.12) !important; color: #0f172a !important; } /* ── Handle chip ────────────────────────────────────────────── */ /* ── Handle chip ─────────────────────────────────────────────────────────── */ .global-handle-chip { border-color: var(--th-border) !important; background: var(--th-input-bg) !important; color: var(--th-text) !important; } .global-handle-chip:hover { background: var(--th-card) !important; border-color: var(--th-border-hover) !important; } /* ── Profile list cards ──────────────────────────────────────────────────── */ .profile-list-card { background: var(--th-card) !important; border-color: var(--th-border) !important; color: var(--th-text) !important; } .profile-list-card:hover { background: var(--th-panel) !important; } [data-theme="light"] .plc-presence-dot { border-color: #f0f4f9 !important; } /* ── Find Random Opponent modal ─────────────────────────────── */ .find-random-content { background: var(--th-nav-panel) !important; border-color: var(--th-border) !important; color: var(--th-text) !important; } /* ── Celebration & countdown overlays ──────────────────────── */ [data-theme="light"] .match-countdown-card, [data-theme="light"] .celebration-content { background: rgba(255, 255, 255, 0.72) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: #0f172a !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important; } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ #themeToggleBtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--th-border); background: var(--th-input-bg); color: var(--th-muted); cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; position: relative; overflow: hidden; } #themeToggleBtn:hover { background: rgba(59,130,246,0.12) !important; border-color: rgba(59,130,246,0.35) !important; color: var(--th-text) !important; transform: scale(1.05); } #themeToggleBtn .theme-icon-dark, #themeToggleBtn .theme-icon-light, #themeToggleBtn .theme-icon-system { position: absolute; transition: opacity 0.2s ease, transform 0.3s ease; display: flex; align-items: center; justify-content: center; } /* Default state shows DARK icon (moon) */ #themeToggleBtn .theme-icon-dark { opacity: 1; transform: scale(1); } #themeToggleBtn .theme-icon-light { opacity: 0; transform: scale(0.6); } #themeToggleBtn .theme-icon-system { opacity: 0; transform: scale(0.6); } [data-theme="light"] #themeToggleBtn .theme-icon-dark { opacity: 0; transform: scale(0.6); } [data-theme="light"] #themeToggleBtn .theme-icon-light { opacity: 1; transform: scale(1); } [data-theme="light"] #themeToggleBtn .theme-icon-system { opacity: 0; transform: scale(0.6); } [data-theme-mode="system"] #themeToggleBtn .theme-icon-dark { opacity: 0; transform: scale(0.6); } [data-theme-mode="system"] #themeToggleBtn .theme-icon-light { opacity: 0; transform: scale(0.6); } [data-theme-mode="system"] #themeToggleBtn .theme-icon-system { opacity: 1; transform: scale(1); } /* Tooltip */ #themeToggleBtn::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); right: 0; background: var(--th-bg2); color: var(--th-text); border: 1px solid var(--th-border); font-size: 0.72rem; font-weight: 700; white-space: nowrap; padding: 4px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 9999; } #themeToggleBtn:hover::after { opacity: 1; } /* ── Light mode specific overrides for legibility ───────────── */ [data-theme="light"] .room-controls h2 { color: #0f172a !important; } [data-theme="light"] .active-blitz-empty-state .empty-title { background: linear-gradient(to right,#0f172a,#475569); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="light"] .active-blitz-empty-state .empty-desc { color: #475569 !important; } [data-theme="light"] .empty-quote-card { background: rgba(226,232,240,0.70) !important; border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .input-icon-wrap { background: rgba(0,0,0,0.06) !important; color: #475569 !important; } [data-theme="light"] .mobile-nav-logo { color: #0f172a !important; } [data-theme="light"] .mobile-nav-close { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.08) !important; color: #475569 !important; } [data-theme="light"] .mobile-nav-close:hover { background: rgba(239,68,68,0.10) !important; } [data-theme="light"] .mobile-nav-drawer-header { border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .mobile-nav-footer { border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .site-version-tag { background: rgba(59,130,246,0.08) !important; border-color: rgba(59,130,246,0.2) !important; } [data-theme="light"] .optional-input-toggle { color: #475569 !important; } [data-theme="light"] .blitz-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); } [data-theme="light"] * { scrollbar-color: rgba(0,0,0,0.14) transparent; } /* ============================================================ LIGHT THEME — strong overrides (defeat arena-redesign.css !important) These must appear LAST and use [data-theme="light"] specificity. ============================================================ */ /* Arena panels */ [data-theme="light"] .active-blitz-section, [data-theme="light"] .join-room-section, [data-theme="light"] .create-room-section { background: rgba(255,255,255,0.88) !important; border-color: rgba(0,0,0,0.09) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important; } /* Room cards */ [data-theme="light"] .blitz-room-card { background: rgba(248,250,253,0.95) !important; border-color: rgba(0,0,0,0.09) !important; color: #0f172a !important; } [data-theme="light"] .blitz-room-card:hover { background: rgba(226,232,240,0.98) !important; border-color: rgba(16,185,129,0.35) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important; } /* Text on cards */ [data-theme="light"] .blitz-room-card h4 { color: #0f172a !important; } [data-theme="light"] .room-controls h2, [data-theme="light"] .active-head h2 { color: #0f172a !important; } /* Search input */ [data-theme="light"] .active-search-input { background: rgba(255,255,255,0.80) !important; border-color: rgba(0,0,0,0.12) !important; color: #0f172a !important; } [data-theme="light"] .active-search-input::placeholder { color: #64748b !important; } /* Input group premium */ [data-theme="light"] .input-group-premium { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .input-main-row input { color: #0f172a !important; } [data-theme="light"] .input-main-row input::placeholder { color: #64748b !important; } /* Config item glass */ [data-theme="light"] .config-item-glass { background: rgba(241,245,249,0.95) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .config-label-row { color: #10b981 !important; } [data-theme="light"] .config-input-wrap input, [data-theme="light"] .config-value-display span:first-child { color: #0f172a !important; } [data-theme="light"] .unit { color: #475569 !important; } /* Problems section */ [data-theme="light"] .problems-section-premium { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .add-problem-btn-premium { background: rgba(255,255,255,0.60) !important; border-color: rgba(0,0,0,0.10) !important; color: #475569 !important; } /* Optional input wrapper */ [data-theme="light"] .optional-input-wrapper input { background: rgba(255,255,255,0.80) !important; border-color: rgba(0,0,0,0.10) !important; color: #0f172a !important; } /* Toggle side panel btn */ [data-theme="light"] .toggle-side-panel-btn { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.09) !important; color: #475569 !important; } /* Nav + action buttons */ [data-theme="light"] .nav-btn, [data-theme="light"] .add-problem-btn-small { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.09) !important; color: #0f172a !important; } [data-theme="light"] .leave-room-btn, [data-theme="light"] .cancel-game-btn { background: rgba(255,255,255,0.70) !important; border-color: rgba(0,0,0,0.09) !important; color: #0f172a !important; } /* Live loading dots */ [data-theme="light"] .live-loading { color: #475569 !important; } /* Room handle chips */ [data-theme="light"] .room-handle-chip { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.18) !important; color: #065f46 !important; } [data-theme="light"] .room-handle-chip .user-stats-handle, [data-theme="light"] .room-handle-chip .handle-text, [data-theme="light"] .room-handle-chip span { color: #065f46 !important; } /* VS player box */ [data-theme="light"] .vs-players-redesign { background: linear-gradient(135deg,#e8eef8 60%,#d4dded 100%) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important; } /* Purged redundant VS block */ /* Spectator panel */ [data-theme="light"] .spectator-panel { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .spectator-panel h3 { color: #0f172a !important; } [data-theme="light"] .spectator-count { color: #475569 !important; } /* Find Random Opponent button */ [data-theme="light"] #findRandomOpponentBtn { background: rgba(255,255,255,0.60) !important; border-color: rgba(16,185,129,0.35) !important; } /* Live room cards */ [data-theme="light"] .blitz-room-card.live-room, [data-theme="light"] .blitz-room-card.in-battle { border-color: rgba(16,185,129,0.35) !important; background: rgba(240,253,249,0.95) !important; } /* Share room btn */ [data-theme="light"] .share-room-btn { background: rgba(16,185,129,0.10) !important; border-color: rgba(0,0,0,0.08) !important; } /* Room info bar */ [data-theme="light"] .room-info-bar { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.09) !important; } /* Match status bar */ [data-theme="light"] .match-status-bar { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .match-status { color: #0f172a !important; } [data-theme="light"] .match-timer-display { color: #0f172a !important; } /* Standings */ [data-theme="light"] .standings { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.09) !important; } /* Auth modals */ [data-theme="light"] .auth-v-content.handle-setup-content { background: rgba(255,255,255,0.97) !important; border-color: rgba(0,0,0,0.08) !important; color: #0f172a !important; } [data-theme="light"] #handleSetupTitle { color: #0f172a !important; } [data-theme="light"] #handleSetupSubtitle { color: #475569 !important; } /* Find random modal */ [data-theme="light"] .find-random-content { background: rgba(248,250,253,0.98) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .fro-title { color: #0f172a !important; } [data-theme="light"] .fro-tab { color: #475569 !important; } [data-theme="light"] .fro-tab:hover { color: #0f172a !important; background: rgba(0,0,0,0.04) !important; } /* Lobby grid */ [data-theme="light"] .lobby-compact-grid .config-dashboard, [data-theme="light"] .lobby-compact-grid .validation-section { background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.09) !important; } /* Problems table */ [data-theme="light"] .problems-table th { color: #475569 !important; border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .problems-table td { border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .problems-table { background: transparent !important; } /* Empty state */ [data-theme="light"] .active-blitz-empty-state { border-color: rgba(0,0,0,0.06) !important; } /* ============================================================ COMPREHENSIVE LIGHT THEME - ALL PAGES ============================================================ */ /* -- Body backgrounds (all pages) -- */ [data-theme="light"] body, [data-theme="light"] body.challenge-page, [data-theme="light"] body.leaderboard-page { background: #f0f4f9 !important; color: #0f172a !important; } /* -- Bracket / H2H / Results shared panels -- */ [data-theme="light"] .panel, [data-theme="light"] .stat-card, [data-theme="light"] .table-wrap, [data-theme="light"] .comparison-input-panel, [data-theme="light"] .no-data-card { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .match-card { background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(8px) !important; } [data-theme="light"] .tournament-setup-panel { background: linear-gradient(165deg,rgba(240,244,249,0.95),rgba(225,232,245,0.90)) !important; border-color: rgba(16,185,129,0.2) !important; } /* -- Inputs / textareas -- */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus { background: #ffffff !important; border-color: #6ea8fe !important; } /* -- Type cards (bracket setup) -- */ [data-theme="light"] .type-card { background: rgba(255,255,255,0.90) !important; border-color: var(--th-border) !important; } [data-theme="light"] .type-card:hover { background: #f1f5fb !important; } [data-theme="light"] .type-info h3 { color: #0f172a !important; } [data-theme="light"] .config-group { background: rgba(0,0,0,0.03) !important; border-color: var(--th-border) !important; } [data-theme="light"] .create-problem-item { background: #f8fafc !important; border-color: var(--th-border) !important; } [data-theme="light"] .create-problem-item:hover { background: #f1f5fb !important; } [data-theme="light"] .action-btn-secondary { background: rgba(0,0,0,0.04) !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .textarea-wrapper textarea { background: rgba(0,0,0,0.03) !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .setup-title h2 { color: #0f172a !important; } [data-theme="light"] #shuffledNamesPreview { background: #f1f5fb !important; border-color: var(--th-border) !important; color: #0f172a !important; } /* -- Saved bracket cards -- */ [data-theme="light"] .saved-card, [data-theme="light"] .match-card { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .standings-panel { background: #f1f5fb !important; border-color: var(--th-border) !important; } /* -- H2H Hero section -- */ [data-theme="light"] .h2h-comparison-hero { background: radial-gradient(circle at center,rgba(110,168,254,0.06) 0%,transparent 70%), linear-gradient(90deg,#f0f4f9 0%,rgba(241,245,249,0.5) 50%,#f0f4f9 100%) !important; border-color: var(--th-border) !important; } [data-theme="light"] .h2h-avatar { background: #f1f5fb !important; } [data-theme="light"] .vs-circle { background: #ffffff !important; color: #ffd700; } [data-theme="light"] .match-score { background: #f1f5fb !important; color: #0f172a !important; } [data-theme="light"] .match-card { background: rgba(255,255,255,0.80) !important; border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .match-card:hover { background: rgba(241,245,249,0.95) !important; border-color: var(--round-accent, rgba(110,168,254,0.25)) !important; } [data-theme="light"] .swap-btn { background: #f1f5fb !important; border-color: var(--th-border) !important; color: #64748b !important; } [data-theme="light"] .stat-bar-container { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.05) !important; } [data-theme="light"] .meeting-count { background: #f1f5fb !important; border-color: var(--th-border) !important; color: #64748b !important; } [data-theme="light"] .nav-btn, [data-theme="light"] .primary-btn:not(.search-compare-btn) { background: #f1f5fb !important; border-color: var(--th-border) !important; color: #0f172a !important; } /* -- Results page cards -- */ [data-theme="light"] .result-card { background: linear-gradient(165deg,rgba(255,255,255,0.97),rgba(241,245,249,0.95)) !important; border-color: var(--th-border) !important; color: #0f172a !important; box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important; } [data-theme="light"] .result-card:hover { background: linear-gradient(165deg,#ffffff,#f1f5fb) !important; border-color: rgba(110,168,254,0.35) !important; } [data-theme="light"] .card-player { background: rgba(0,0,0,0.03) !important; } [data-theme="light"] .card-top { border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .results-search-input { background: rgba(255,255,255,0.90) !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .results-search-input:focus { background: #ffffff !important; border-color: #6ea8fe !important; } [data-theme="light"] .cancel-btn, [data-theme="light"] .close-btn, [data-theme="light"] .global-profile-modal-close, [data-theme="light"] .user-profile-change-password-btn { background: #f1f5fb !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .card-select { background: #f0f4f9 !important; } /* -- Results / H2H modals -- */ [data-theme="light"] .modal-content { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .modal-header { background: #f8fafc !important; border-bottom: 1px solid var(--th-border) !important; } [data-theme="light"] .modal-header h2 { background: none !important; -webkit-text-fill-color: #0f172a !important; color: #0f172a !important; font-weight: 800 !important; } [data-theme="light"] .detail-card { background: #f8fafc !important; border-color: var(--th-border) !important; } [data-theme="light"] .detail-card-head { color: #64748b !important; } [data-theme="light"] .detail-card-value { color: #0f172a !important; } [data-theme="light"] .status-badge.tie { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; } [data-theme="light"] .modal-subtitle { color: #0f172a !important; font-weight: 800 !important; } [data-theme="light"] .spectator-row { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #475569 !important; } /* -- Standings table (shared) -- */ [data-theme="light"] .standings-table th, [data-theme="light"] .result-standings-table thead th { background: #f1f5fb !important; color: #64748b !important; border-color: var(--th-border) !important; } [data-theme="light"] .standings-table td { background: #ffffff !important; color: #0f172a !important; border-color: #e8eef7 !important; } [data-theme="light"] .standings-table thead th { background: #f0f4f9 !important; } [data-theme="light"] .standings-standing { background: #f1f5fb !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .standings-table .problem-cell-sub { color: #475569 !important; } /* -- Attempts/Submissions modal -- */ [data-theme="light"] #attemptsModal .modal-content { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] #attemptsModalTitle { background: rgba(241,245,249,0.95) !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .attempts-header-row { background: #f1f5fb !important; border-color: var(--th-border) !important; } [data-theme="light"] .attempt-line:hover { background: rgba(0,0,0,0.02) !important; } [data-theme="light"] .attempt-line { border-color: rgba(0,0,0,0.05) !important; } [data-theme="light"] .attempt-player-link { color: #0f172a !important; } [data-theme="light"] .attempt-player-label { color: #0f172a !important; } [data-theme="light"] .attempt-time { color: #64748b !important; } [data-theme="light"] .problem-rating-chip { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.10) !important; color: #64748b !important; } [data-theme="light"] .modal-footer { background: rgba(241,245,249,0.80) !important; border-color: var(--th-border) !important; } [data-theme="light"] #closeAttemptsModal { background: #0f172a !important; color: #ffffff !important; border-color: transparent !important; } /* -- Challenge page cards -- */ [data-theme="light"] .oc-card { background: rgba(255,255,255,0.88) !important; border-color: rgba(0,0,0,0.09) !important; color: #0f172a !important; } [data-theme="light"] .oc-card:hover { background: rgba(241,245,249,0.98) !important; border-color: rgba(16,185,129,0.30) !important; } /* -- Challenge Drawer (Modernization) -------------------- */ [data-theme="light"] .oc-drawer { background: #ffffff !important; } [data-theme="light"] .oc-drawer-head { background: #ffffff !important; border-bottom: 1px solid #f1f5f9 !important; padding: 16px 24px !important; } [data-theme="light"] .oc-drawer-chat-side { background: #f8fafc !important; } [data-theme="light"] .oc-chat-box { background: transparent !important; } [data-theme="light"] .oc-msg-bubble { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; border-bottom-left-radius: 4px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important; color: #1e293b !important; padding: 12px 16px !important; } [data-theme="light"] .oc-msg-bubble.is-me { background: #10b981 !important; color: #ffffff !important; border: none !important; border-radius: 18px !important; border-bottom-right-radius: 4px !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important; } [data-theme="light"] .oc-msg-bubble.is-me .oc-msg-text { color: #ffffff !important; } [data-theme="light"] .oc-msg-bubble.is-me .oc-msg-time, [data-theme="light"] .oc-msg-bubble.is-me .oc-msg-meta, [data-theme="light"] .oc-msg-bubble.is-me .btn-msg-menu-dots, [data-theme="light"] .oc-msg-bubble.is-me .btn-msg-reply-bottom { color: rgba(255, 255, 255, 0.9) !important; } [data-theme="light"] .oc-msg-bubble.is-me .btn-msg-action-bg { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.2) !important; } [data-theme="light"] .oc-msg-bubble.is-me .btn-msg-reply-bottom { background: rgba(0, 0, 0, 0.2) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; } [data-theme="light"] .oc-msg-bubble:not(.is-me) .oc-msg-handle { color: #10b981 !important; } [data-theme="light"] .oc-edit-area { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; } [data-theme="light"] .oc-msg-bubble.is-me .oc-edit-actions .btn-sm { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; } [data-theme="light"] .oc-msg-bubble.is-me .oc-edit-actions .btn-sm:hover { background: rgba(255, 255, 255, 0.1) !important; } [data-theme="light"] .oc-chat-input-wrap { background: #ffffff !important; border-top: 1px solid #f1f5f9 !important; padding: 16px 24px !important; } [data-theme="light"] .btn-start-match { background: #f1f5f9 !important; color: #94a3b8 !important; } [data-theme="light"] .btn-start-match.ready { background: #10b981 !important; color: #ffffff !important; } [data-theme="light"] .oc-accept-status.waiting { background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fef3c7 !important; } [data-theme="light"] .oc-drawer-section-title { color: #475569 !important; font-weight: 800 !important; } [data-theme="light"] .oc-config-panel { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; } [data-theme="light"] .oc-unified-header { background: rgba(255,255,255,0.80) !important; border-color: rgba(0,0,0,0.09) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.07) !important; } [data-theme="light"] .oc-unified-header:hover { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.12) !important; } [data-theme="light"] .oc-viewers-badge { background: rgba(255,255,255,0.80) !important; border-color: rgba(0,0,0,0.09) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important; } [data-theme="light"] .oc-viewers-badge:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important; border-color: #10b981 !important; } [data-theme="light"] #viewersCount { color: #0f172a !important; } [data-theme="light"] .oc-viewers-label { color: rgba(0,0,0,0.50) !important; } [data-theme="light"] .oc-header-sep { background: rgba(0,0,0,0.12) !important; } [data-theme="light"] .oc-modern-filter { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .filter-btn { color: #64748b !important; } [data-theme="light"] .filter-btn:hover { background: rgba(0,0,0,0.05) !important; color: #0f172a !important; } [data-theme="light"] .filter-btn.active { background: #10b981 !important; color: #fff !important; } [data-theme="light"] .oc-search-wrap input { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .oc-search-wrap input:focus, [data-theme="light"] .oc-search-wrap input:not(:placeholder-shown) { background: #ffffff !important; color: #0f172a !important; } [data-theme="light"] .oc-search-wrap input::placeholder { color: transparent !important; } [data-theme="light"] .oc-search-wrap input:focus::placeholder, [data-theme="light"] .oc-search-wrap input:not(:placeholder-shown)::placeholder { color: #64748b !important; } [data-theme="light"] .oc-f2f-view { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .oc-mirror-divide { background: rgba(0,0,0,0.12) !important; } [data-theme="light"] .oc-mirror-vs { background: #0f172a !important; border-color: rgba(0,0,0,0.15) !important; } [data-theme="light"] .oc-mirror-avatar { background: #f1f5fb !important; border-color: rgba(0,0,0,0.10) !important; } [data-theme="light"] .oc-match-countdown, [data-theme="light"] .oc-expires-countdown { color: #0f172a !important; } [data-theme="light"] .oc-running-footer { border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .oc-tabs { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.09) !important; } [data-theme="light"] .oc-tab-btn { color: #64748b !important; } [data-theme="light"] .oc-tab-btn:hover { color: #0f172a !important; } [data-theme="light"] .oc-tab-btn.active { background: #10b981 !important; color: #fff !important; } [data-theme="light"] .oc-header-left h1 span.oc-title-open, [data-theme="light"] .oc-header-left h1 span.oc-title-challenge { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } /* -- Search suggestion dropdowns -- */ [data-theme="light"] .search-suggestions, [data-theme="light"] .suggestion-dropdown, [data-theme="light"] .autocomplete-dropdown, [data-theme="light"] [class*="suggestion"], [data-theme="light"] [class*="autocomplete"] { background: #ffffff !important; border-color: var(--th-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; color: #0f172a !important; } [data-theme="light"] .search-suggestion-item, [data-theme="light"] .suggestion-item, [data-theme="light"] [class*="suggestion-item"] { color: #0f172a !important; border-color: rgba(0,0,0,0.05) !important; } [data-theme="light"] .search-suggestion-item:hover, [data-theme="light"] .suggestion-item:hover, [data-theme="light"] [class*="suggestion-item"]:hover { background: #f1f5fb !important; } /* -- Profile page -- */ [data-theme="light"] .profile-card, [data-theme="light"] .profile-panel, [data-theme="light"] .profile-section, [data-theme="light"] .profile-stat-card, [data-theme="light"] .user-profile-card { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .profile-handle { color: #0f172a !important; } [data-theme="light"] .profile-rank { color: #64748b !important; } /* -- Leaderboard page -- */ [data-theme="light"] .leaderboard-card, [data-theme="light"] .lb-row, [data-theme="light"] .leaderboard-table-wrap, [data-theme="light"] .leaderboard-panel { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .lb-table th { background: #f1f5fb !important; color: #64748b !important; border-color: var(--th-border) !important; } [data-theme="light"] .lb-table td { background: #ffffff !important; color: #0f172a !important; border-color: #e8eef7 !important; } [data-theme="light"] .lb-table tr:hover td { background: #f8fafc !important; } /* -- About page -- */ [data-theme="light"] .about-section, [data-theme="light"] .about-card, [data-theme="light"] .about-panel { background: #ffffff !important; background-image: none !important; /* Clear dark mode gradients */ border: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; } [data-theme="light"] .feature-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important; } [data-theme="light"] .feature-card:hover { background: #ffffff !important; border-color: #3b82f6 !important; box-shadow: 0 15px 35px rgba(59, 130, 246, 0.12) !important; transform: translateY(-6px) !important; } /* -- Feedback page -- */ [data-theme="light"] .feedback-card, [data-theme="light"] .feedback-panel, [data-theme="light"] .feedback-item, [data-theme="light"] .feedback-table-wrap { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } [data-theme="light"] .feedback-search-input, [data-theme="light"] .fb-search-input { background: rgba(255,255,255,0.90) !important; border-color: var(--th-border) !important; color: #0f172a !important; } /* -- Generic tables across all pages -- */ [data-theme="light"] table th { background: #f1f5fb !important; color: #64748b !important; border-color: var(--th-border) !important; } [data-theme="light"] table td { background: #ffffff !important; color: #0f172a !important; border-color: #e8eef7 !important; } [data-theme="light"] table tr:hover td { background: #f8fafc !important; } /* -- Blitz header on all subpages -- */ [data-theme="light"] .blitz-header { background: rgba(255,255,255,0.88) !important; border: 1px solid var(--th-border) !important; border-radius: var(--arena-radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important; } [data-theme="light"] .blitz-header h1 { color: #0f172a !important; } [data-theme="light"] .subtitle, [data-theme="light"] .logo span { color: #64748b !important; border-color: var(--th-border) !important; } /* -- Quick-nav on subpages (bracket, h2h, results etc use their own quick-nav styles) -- */ [data-theme="light"] .quick-nav { background: rgba(255,255,255,0.88) !important; border-color: var(--th-border) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important; } /* -- Dropdown menus -- */ [data-theme="light"] .dropdown-menu, [data-theme="light"] .more-menu-dropdown, [data-theme="light"] [class*="dropdown"] { background: #ffffff !important; border-color: var(--th-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; } [data-theme="light"] .dropdown-item, [data-theme="light"] [class*="dropdown-item"] { color: #0f172a !important; } [data-theme="light"] .dropdown-item:hover, [data-theme="light"] [class*="dropdown-item"]:hover { background: #f1f5fb !important; } /* -- Tooltips -- */ [data-theme="light"] [class*="tooltip"], [data-theme="light"] [class*="popover"] { background: #0f172a !important; color: #f1f5f9 !important; border-color: transparent !important; } /* -- Notification / announcement banner -- */ [data-theme="light"] .announcement-bar, [data-theme="light"] .public-announcement, [data-theme="light"] .announcement { background: rgba(241,245,249,0.95) !important; border-color: rgba(0,0,0,0.09) !important; color: #0f172a !important; } /* -- Match live area -- */ [data-theme="light"] .match-live-panel, [data-theme="light"] .live-panel { background: rgba(255,255,255,0.88) !important; border-color: var(--th-border) !important; } [data-theme="light"] .problem-table-wrap, [data-theme="light"] .problem-set-wrap { background: #ffffff !important; border-color: var(--th-border) !important; color: #0f172a !important; } /* ============================================================ BATTLE VIEW - LIGHT THEME FIXES (Facebook-style subtle shadows) ============================================================ */ /* -- Facebook-inspired shadow system for light mode ---------- Card: 1px border + 1 soft shadow (no heavy blur) Elevated: border + layered gentle shadow Nav: thin bottom shadow only ----------------------------------------------------------- */ [data-theme="light"] { --fb-shadow-card: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06); --fb-shadow-raised: 0 2px 8px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.06); --fb-shadow-nav: 0 2px 10px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --fb-shadow-modal: 0 4px 24px rgba(0,0,0,0.12), 0 1px 6px rgba(0,0,0,0.06); --fb-border: #e3e8f0; } /* -- Apply FB-style shadows to ALL cards/panels in light mode -- */ [data-theme="light"] .blitz-header, [data-theme="light"] .create-room-section, [data-theme="light"] .join-room-section, [data-theme="light"] .active-blitz-section, [data-theme="light"] .room-info-bar, [data-theme="light"] .config-dashboard, [data-theme="light"] .validation-section, [data-theme="light"] .problems-section, [data-theme="light"] .match-status-bar, [data-theme="light"] .standings, [data-theme="light"] .vs-players, [data-theme="light"] .problem-card, [data-theme="light"] .auth-v-content, [data-theme="light"] .match-countdown-card, [data-theme="light"] .celebration-content, [data-theme="light"] .spectator-panel, [data-theme="light"] .panel, [data-theme="light"] .stat-card, [data-theme="light"] .result-card, [data-theme="light"] .oc-card, [data-theme="light"] .saved-card, [data-theme="light"] .type-card, [data-theme="light"] .blitz-room-card { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-card) !important; backdrop-filter: none !important; } /* Raised panels (arena sections, active room panel) */ [data-theme="light"] .active-blitz-section, [data-theme="light"] .join-room-section, [data-theme="light"] .create-room-section, [data-theme="light"] .arena-redesign-wrap, [data-theme="light"] .match-countdown-card { box-shadow: var(--fb-shadow-raised) !important; } /* Nav bar - thin bottom border like Facebook */ [data-theme="light"] .quick-nav { background: rgba(255,255,255,0.96) !important; border: 1px solid var(--fb-border) !important; box-shadow: none !important; backdrop-filter: blur(8px) !important; transition: box-shadow 0.2s ease !important; } [data-theme="light"] .quick-nav.is-stuck { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; } /* -- Match Status Bar --------------------------------------- */ [data-theme="light"] .match-status-bar { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-card) !important; color: #0f172a !important; } [data-theme="light"] #matchStatusText, [data-theme="light"] .match-status { color: #0f172a !important; font-weight: 700 !important; } [data-theme="light"] .match-timer-display, [data-theme="light"] #matchTimer { color: #0f172a !important; font-weight: 800 !important; } [data-theme="light"] .match-live-domain { color: #475569 !important; } /* -- Room Info Bar ------------------------------------------ */ [data-theme="light"] .room-info-bar { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-card) !important; } [data-theme="light"] .room-name { color: #0f172a !important; font-weight: 700 !important; } [data-theme="light"] .room-id, [data-theme="light"] .room-players { color: #475569 !important; } /* -- Leave / Cancel buttons - MUST be visible --------------- */ [data-theme="light"] .leave-room-btn, [data-theme="light"] .cancel-game-btn, [data-theme="light"] .confirm-btn { background: linear-gradient(180deg, #ff9a9a, #ff7d7d) !important; color: #230505 !important; border: 1px solid #ff6b6b !important; box-shadow: 0 1px 4px rgba(239,68,68,0.20) !important; } [data-theme="light"] .leave-room-btn:hover, [data-theme="light"] .cancel-game-btn:hover { filter: brightness(1.06) !important; box-shadow: 0 2px 8px rgba(239,68,68,0.28) !important; transform: translateY(-1px) !important; } /* Invite / nav buttons inside room bar */ [data-theme="light"] .room-actions .nav-btn, [data-theme="light"] #inviteRoomBtn { background: #f1f5fb !important; border: 1px solid var(--fb-border) !important; color: #0f172a !important; box-shadow: var(--fb-shadow-card) !important; } [data-theme="light"] .room-actions .nav-btn:hover { background: #e4eaf5 !important; } /* -- Standings (in-battle) ---------------------------------- */ [data-theme="light"] .standings { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-card) !important; } [data-theme="light"] .standings h3 { color: #0f172a !important; } [data-theme="light"] .standings .standings-table th { background: #f8fafc !important; color: #475569 !important; border-color: var(--fb-border) !important; } [data-theme="light"] .standings .standings-table td { background: #ffffff !important; color: #0f172a !important; border-color: #edf0f7 !important; } [data-theme="light"] .standings .standings-table tr:hover td { background: #f8fafc !important; } /* -- Problems table (sidebar) ------------------------------- */ [data-theme="light"] .problems-table th { background: #f8fafc !important; color: #64748b !important; border-color: var(--fb-border) !important; } [data-theme="light"] .problems-table td { background: #ffffff !important; color: #0f172a !important; border-color: #edf0f7 !important; } [data-theme="light"] .problems-table { border-color: var(--fb-border) !important; } /* -- Problems Section --------------------------------------- */ [data-theme="light"] .problems-section { background: #ffffff !important; border: 1px solid var(--fb-border) !important; } [data-theme="light"] .problems-section h2, [data-theme="light"] .problems-header-row h2 { color: #0f172a !important; } /* -- Problem Card (right panel in battle) ------------------- */ [data-theme="light"] .problem-card { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-card) !important; } [data-theme="light"] .problem-title-label { color: #64748b !important; } [data-theme="light"] .problem-title, [data-theme="light"] #probName { color: #0f172a !important; } [data-theme="light"] .problem-lock-status { background: rgba(0,0,0,0.04) !important; border-color: var(--fb-border) !important; color: #475569 !important; } [data-theme="light"] .open-problem-btn { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #ffffff !important; border-color: rgba(59,130,246,0.3) !important; box-shadow: 0 1px 4px rgba(59,130,246,0.22) !important; } [data-theme="light"] .open-problem-btn:hover { filter: brightness(1.08) !important; box-shadow: 0 2px 10px rgba(59,130,246,0.28) !important; } /* -- Spectator Panel ---------------------------------------- */ [data-theme="light"] .spectator-panel { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-card) !important; } [data-theme="light"] .spectator-head h3 { color: #0f172a !important; } [data-theme="light"] .spectator-count { color: #64748b !important; } /* Spectator chips - dark hardcoded bg */ [data-theme="light"] .spectator-chip { background: #f1f5fb !important; border: 1px solid var(--fb-border) !important; color: #0f172a !important; } [data-theme="light"] .spectator-chip.is-online { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.25) !important; color: #059669 !important; } [data-theme="light"] .spectator-chip.is-left { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.10) !important; color: #64748b !important; } /* Skeleton chips */ [data-theme="light"] .skeleton-chip { background: linear-gradient(90deg, var(--th-skeleton-bg) 25%, var(--th-skeleton-pulse) 50%, var(--th-skeleton-bg) 75%) !important; border: 1px solid var(--th-skeleton-pulse) !important; background-size: 200% 100% !important; } /* -- VS Players redesign ------------------------------------ */ [data-theme="light"] .vs-players-redesign, [data-theme="light"] .vs-players { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-card) !important; } /* Purged redundant VS block */ [data-theme="light"] .vs-player-handle { color: #0f172a !important; text-shadow: none !important; } [data-theme="light"] .vs-center-vs, [data-theme="light"] .vs-part { color: #0f172a !important; } /* Purged redundant VS block */ /* -- Active blitz section (room list) ---------------------- */ [data-theme="light"] .active-blitz-section { background: #ffffff !important; border: 1px solid var(--fb-border) !important; } [data-theme="light"] .active-head h2 { color: #0f172a !important; } [data-theme="light"] .active-search-input { background: #f1f5fb !important; border: 1px solid var(--fb-border) !important; color: #0f172a !important; } [data-theme="light"] .active-search-input::placeholder { color: #94a3b8 !important; } /* -- Blitz room cards (lobby list) ------------------------- */ [data-theme="light"] .blitz-room-card { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-card) !important; color: #0f172a !important; } [data-theme="light"] .blitz-room-card:hover { border-color: #b0c0dc !important; box-shadow: var(--fb-shadow-raised) !important; } [data-theme="light"] .blitz-room-info h4 { color: #0f172a !important; } [data-theme="light"] .blitz-room-meta, [data-theme="light"] .blitz-room-time { color: #64748b !important; } /* -- Search suggestion popup (site-textarea-suggest-box) --- */ [data-theme="light"] .site-textarea-suggest-box { background: #ffffff !important; border: 1px solid var(--fb-border) !important; box-shadow: var(--fb-shadow-modal) !important; } [data-theme="light"] .site-textarea-suggest-item { color: #0f172a !important; background: transparent !important; } [data-theme="light"] .site-textarea-suggest-item:hover, [data-theme="light"] .site-textarea-suggest-item.active { background: #f1f5fb !important; color: #0f172a !important; } /* -- Arena redesign sections ------------------------------- */ [data-theme="light"] .active-blitz-section[class*="arena"], [data-theme="light"] .active-blitz-section { background: var(--th-panel) !important; } [data-theme="light"] .toggle-side-panel-btn { background: #f1f5fb !important; border: 1px solid var(--fb-border) !important; color: #64748b !important; } [data-theme="light"] .toggle-side-panel-btn:hover { background: rgba(16,185,129,0.08) !important; border-color: #10b981 !important; color: #10b981 !important; } /* -- Config display inputs (read-only) -------------------- */ [data-theme="light"] .config-display { background: #f1f5fb !important; border: 1px solid var(--fb-border) !important; color: #0f172a !important; } [data-theme="light"] .config-dashboard { background: #ffffff !important; border: 1px solid var(--fb-border) !important; } /* -- Break timer -------------------------------------------- */ [data-theme="light"] .break-timer, [data-theme="light"] #breakTimer { color: #f59e0b !important; } /* -- Arena flex layout body bg ----------------------------- */ [data-theme="light"] body, [data-theme="light"] body.in-room, [data-theme="light"] body.in-battle { background: #f0f4f9 !important; background-image: none !important; } /* ============================================================ PRE-BATTLE / LOBBY VIEW - LIGHT THEME FIXES ============================================================ */ /* -- VS Start-Battle outer block --------------------------- */ [data-theme="light"] .vs-start-battle-block { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05) !important; backdrop-filter: none !important; } /* -- VS Players redesign container (both lobby & in-battle) - */ [data-theme="light"] .vs-players-redesign { background: linear-gradient(135deg, #f1f5fb 60%, #e8eef8 100%) !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important; } /* -- Individual player boxes - Borderless premium look --------- */ [data-theme="light"] .vs-player-box { background: #ffffff !important; border: none !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important; border-radius: var(--arena-radius) !important; } [data-theme="light"] .vs-player-box:hover { background: #ffffff !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important; transform: translateY(-4px) scale(1.02) !important; } /* -- VS Letters (V and S) - Neo-Glass White Aesthetic --------- */ [data-theme="light"] .vs-v, [data-theme="light"] .vs-s { color: #ffffff !important; text-shadow: 0 10px 30px rgba(15, 23, 42, 0.25) !important; background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; font-weight: 950 !important; letter-spacing: -4px !important; } /* Hide VS divider slash for a clean flat look */ [data-theme="light"] .vs-slash { display: none !important; } /* -- Player handles ----------------------------------------- */ [data-theme="light"] .vs-player-handle { color: #0f172a !important; } /* -- VS circle redesign (start-battle gold badge) ----------- */ [data-theme="light"] .vs-circle-redesign { background: linear-gradient(135deg, #FFD966, #FF9900) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(255,153,0,0.30) !important; } /* -- VS player input text ------------------------------------ */ [data-theme="light"] .vs-player-input { color: #0f172a !important; } /* -- Player avatar with signature color ring (Consolidated) -- */ [data-theme="light"] .vs-player-avatar { background: #0f172a !important; /* Deep slate background to match dark theme and hug image */ border: 3.5px solid var(--player-border, #10b981) !important; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.22) !important; } /* -- "Waiting for players" status bar ----------------------- */ [data-theme="light"] .battle-start-status { background: rgba(245,158,11,0.08) !important; color: #92400e !important; border: 1px solid rgba(245,158,11,0.25) !important; } /* -- Start battle button ------------------------------------ */ [data-theme="light"] .start-battle-btn { background: #10b981 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16,185,129,0.28) !important; } [data-theme="light"] .start-battle-btn:hover { background: #059669 !important; box-shadow: 0 4px 14px rgba(16,185,129,0.35) !important; } /* -- Battle start controls ----------------------------------- */ [data-theme="light"] .battle-start-controls { background: transparent !important; } /* -- Validation section -------------------------------------- */ [data-theme="light"] .validation-section { background: rgba(255,255,255,0.90) !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; } [data-theme="light"] #validationStatusText { color: #0f172a !important; } [data-theme="light"] .status-msg-highlight { color: #b45309 !important; } [data-theme="light"] .status-divider { color: rgba(0,0,0,0.15) !important; } /* -- Config dashboard (300 min / 13 problems bar) ------------ */ [data-theme="light"] .config-dashboard { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; } [data-theme="light"] .config-block label { color: #64748b !important; } [data-theme="light"] .config-display { background: #f1f5fb !important; border: 1px solid #e3e8f0 !important; color: #0f172a !important; } /* -- Lobby compact grid (left/right sides) ------------------- */ [data-theme="light"] .lobby-compact-grid { background: transparent !important; } [data-theme="light"] .lobby-left-side, [data-theme="light"] .lobby-right-side { background: transparent !important; } /* -- Problems section (Problem Set panel) ------------------- */ [data-theme="light"] .problems-section { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; } [data-theme="light"] .problems-header-row { border-color: #e3e8f0 !important; } [data-theme="light"] .problems-header-row h2 { color: #0f172a !important; } [data-theme="light"] .problems-table-mini-wrap { background: transparent !important; } [data-theme="light"] .problems-table { border-color: #e3e8f0 !important; background: #ffffff !important; } [data-theme="light"] .problems-table th { background: #f8fafc !important; color: #64748b !important; border-color: #e3e8f0 !important; } [data-theme="light"] .problems-table td { background: #ffffff !important; border-color: #edf0f7 !important; } [data-theme="light"] .problems-table tr:hover td { background: #f8fafc !important; } /* -- Room Info Bar action buttons -------------------------- */ [data-theme="light"] #cancelGameBtn, [data-theme="light"] .cancel-game-btn { background: linear-gradient(135deg, #fee2e2, #fca5a5) !important; border: 1px solid #fca5a5 !important; color: #7f1d1d !important; box-shadow: 0 1px 4px rgba(220,38,38,0.15) !important; } [data-theme="light"] #cancelGameBtn:hover, [data-theme="light"] .cancel-game-btn:hover { background: linear-gradient(135deg, #fca5a5, #f87171) !important; color: #450a0a !important; } [data-theme="light"] #autoStartBtn { background: linear-gradient(135deg, #fef3c7, #fcd34d) !important; border: 1px solid #fcd34d !important; color: #78350f !important; box-shadow: 0 1px 4px rgba(245,158,11,0.18) !important; } [data-theme="light"] #autoStartBtn:hover { background: linear-gradient(135deg, #fcd34d, #f59e0b) !important; color: #451a03 !important; } [data-theme="light"] #inviteRoomBtn { background: #f1f5fb !important; border: 1px solid #e3e8f0 !important; color: #0f172a !important; box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important; } [data-theme="light"] #inviteRoomBtn:hover { background: #e4eaf5 !important; border-color: #c7d2e8 !important; } /* -- Join room / Create room side panels --------------------- */ [data-theme="light"] .join-room-section, [data-theme="light"] .create-room-section { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important; backdrop-filter: none !important; } [data-theme="light"] .join-room-section h2, [data-theme="light"] .create-room-section h2 { color: #0f172a !important; } [data-theme="light"] .room-form input, [data-theme="light"] .room-form select { background: #f1f5fb !important; border: 1px solid #e3e8f0 !important; color: #0f172a !important; } [data-theme="light"] .room-form input:focus { background: #ffffff !important; border-color: #6ea8fe !important; } /* -- Input group premium (opponent handle field) ------------- */ [data-theme="light"] .input-group-premium { background: rgba(0,0,0,0.03) !important; border: 1px solid #e3e8f0 !important; } [data-theme="light"] .input-main-row { background: transparent !important; } [data-theme="light"] .input-icon-wrap { color: #64748b !important; } /* -- Create room problem list -------------------------------- */ [data-theme="light"] .problems-list-head { border-color: #e3e8f0 !important; color: #64748b !important; } [data-theme="light"] .create-problem-item { background: #f8fafc !important; border: 1px solid #e3e8f0 !important; } [data-theme="light"] .create-problem-item:hover { background: #f1f5fb !important; } [data-theme="light"] .create-problem-item input, [data-theme="light"] .create-problem-item select { background: #ffffff !important; border-color: #e3e8f0 !important; color: #0f172a !important; } /* -- Add problem premium button ------------------------------ */ [data-theme="light"] .add-problem-btn-premium { background: rgba(16,185,129,0.08) !important; border: 1px dashed rgba(16,185,129,0.35) !important; color: #059669 !important; } [data-theme="light"] .add-problem-btn-premium:hover { background: rgba(16,185,129,0.14) !important; border-color: rgba(16,185,129,0.55) !important; } /* -- Primary btn premium (Create Battle Room) ---------------- */ [data-theme="light"] .primary-btn-premium { background: linear-gradient(135deg, #10b981, #059669) !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(16,185,129,0.28) !important; border: none !important; } [data-theme="light"] .primary-btn-premium span { color: #ffffff !important; } [data-theme="light"] .primary-btn-premium:hover { filter: brightness(1.07) !important; box-shadow: 0 4px 16px rgba(16,185,129,0.35) !important; } /* -- Room validation mini link ------------------------------- */ [data-theme="light"] .room-validation-mini { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.25) !important; color: #059669 !important; } /* -- VS player avatar wrap (pre-battle inner wrap) ----------- */ [data-theme="light"] .vs-player-avatar-wrap { background: linear-gradient(135deg, rgba(0,0,0,0.05), transparent) !important; border: 1px solid #e3e8f0 !important; } /* -- Feature disabled banner -------------------------------- */ [data-theme="light"] .feature-disabled-banner { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.25) !important; color: #92400e !important; } /* -- Create room disabled hint ------------------------------- */ [data-theme="light"] .create-room-disabled-hint { color: #92400e !important; } /* -- Active blitz section (room list panel) ------------------- */ [data-theme="light"] .active-blitz-section { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; backdrop-filter: none !important; } [data-theme="light"] .active-head { border-color: #e3e8f0 !important; } [data-theme="light"] .active-head h2 { color: #0f172a !important; } /* -- VS glow (old VS design fallback) ----------------------- */ [data-theme="light"] .vs-glow { background: #f59e0b !important; color: #fff !important; } /* ============================================================ DURING-BATTLE UI - POLISHED LIGHT THEME (Modern, High Contrast) ============================================================ */ /* -- Room Info Bar - make all text readable ----------------- */ [data-theme="light"] .room-info-bar { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important; } [data-theme="light"] .room-name { color: #0f172a !important; font-weight: 800 !important; } /* Room ID chip - was white text on white bg */ [data-theme="light"] .room-id { background: #f1f5fb !important; border: 1px solid #d1d9e6 !important; color: #475569 !important; } [data-theme="light"] .room-id span { color: #0f172a !important; font-weight: 800 !important; } /* "1 joined" chip */ [data-theme="light"] .room-players { background: rgba(16,185,129,0.08) !important; border: 1px solid rgba(16,185,129,0.25) !important; color: #059669 !important; } /* -- Room Action Buttons (icon-only circles) ---------------- */ [data-theme="light"] .room-actions button { border: 1px solid #d1d9e6 !important; background: #f8fafc !important; } [data-theme="light"] .room-actions button:hover { background: #e4eaf5 !important; border-color: #b0c0dc !important; } /* Leave Room - was almost invisible */ [data-theme="light"] #leaveRoomBtn { background: rgba(239,68,68,0.08) !important; border: 1px solid rgba(239,68,68,0.30) !important; color: #dc2626 !important; } [data-theme="light"] #leaveRoomBtn:hover { background: #ef4444 !important; border-color: #ef4444 !important; color: #ffffff !important; } /* Cancel Game */ [data-theme="light"] #cancelGameBtn { background: rgba(239,68,68,0.06) !important; border: 1px solid rgba(239,68,68,0.25) !important; color: #dc2626 !important; } [data-theme="light"] #cancelGameBtn:hover { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; } /* Auto Start */ [data-theme="light"] #autoStartBtn { background: linear-gradient(135deg,#f59e0b,#d97706) !important; border: none !important; color: #fff !important; box-shadow: 0 2px 8px rgba(245,158,11,0.28) !important; } /* Invite */ [data-theme="light"] #inviteRoomBtn { background: rgba(16,185,129,0.08) !important; border: 1px solid rgba(16,185,129,0.25) !important; color: #059669 !important; } [data-theme="light"] #inviteRoomBtn:hover { background: #10b981 !important; color: #fff !important; border-color: #10b981 !important; } /* -- Problem Card (right panel) ----------------------------- */ [data-theme="light"] .arena-flex-layout .problem-card { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; backdrop-filter: none !important; } /* Problem header border */ [data-theme="light"] .problem-header { border-bottom-color: #e3e8f0 !important; } /* "CURRENT PROBLEM" label */ [data-theme="light"] .problem-title-label { color: #10b981 !important; opacity: 1 !important; } /* Problem title - was hardcoded white */ [data-theme="light"] .problem-title, [data-theme="light"] #probName { color: #0f172a !important; text-shadow: none !important; } /* Rating badge */ [data-theme="light"] .problem-rating-badge { background: #f1f5fb !important; border: 1px solid #d1d9e6 !important; color: #475569 !important; } /* Points badge (gold coin) */ [data-theme="light"] .problem-points-badge { background: rgba(255,215,0,0.10) !important; border: 1px solid rgba(255,196,0,0.30) !important; color: #b45309 !important; } /* "PROBLEM 1/7 - WAITING FOR AC" status - was washed out */ [data-theme="light"] .problem-lock-status { background: rgba(239,68,68,0.06) !important; border: 1px solid rgba(239,68,68,0.22) !important; color: #b91c1c !important; } [data-theme="light"] .problem-lock-status.pending-loading { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.25) !important; color: #92400e !important; } [data-theme="light"] .solved-flash { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.25) !important; color: #065f46 !important; } [data-theme="light"] .break-timer { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.22) !important; color: #065f46 !important; } /* -- Standings Panel ---------------------------------------- */ [data-theme="light"] .standings { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; } [data-theme="light"] .standings h3 { color: #0f172a !important; font-weight: 800 !important; } /* Standings accent bar */ [data-theme="light"] .standings h3::before { background: #10b981 !important; } [data-theme="light"] .standings .standings-table th { background: #f8fafc !important; color: #64748b !important; border-color: #e3e8f0 !important; font-size: 0.72rem !important; font-weight: 800 !important; text-transform: uppercase !important; } [data-theme="light"] .standings .standings-table td { background: #ffffff !important; color: #0f172a !important; border-color: #edf0f7 !important; font-weight: 600 !important; } [data-theme="light"] .standings .standings-table tr:hover td { background: #f8fafc !important; } /* Problem header cells (P1, P2...) */ [data-theme="light"] .standings .standings-table .problem-col-header { color: #3b82f6 !important; } [data-theme="light"] .standings .standings-table .pts-sub { color: #94a3b8 !important; } /* -- Match Status Bar --------------------------------------- */ [data-theme="light"] .match-status-bar { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; } [data-theme="light"] #matchStatusText, [data-theme="light"] .match-status { color: #0f172a !important; font-weight: 700 !important; font-size: 1rem !important; } [data-theme="light"] .match-timer-display, [data-theme="light"] #matchTimer { color: #0f172a !important; font-weight: 900 !important; font-size: 1.6rem !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "JetBrains Mono", monospace !important; } /* -- Spectator Panel ---------------------------------------- */ [data-theme="light"] .spectator-panel { background: #ffffff !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; } [data-theme="light"] .spectator-head h3 { color: #0f172a !important; font-weight: 700 !important; } [data-theme="light"] .spectator-count { color: #64748b !important; font-size: 0.78rem !important; } [data-theme="light"] .spectator-empty { color: #94a3b8 !important; } [data-theme="light"] .spectator-chip { background: #f1f5fb !important; border: 1px solid #d1d9e6 !important; color: #0f172a !important; } [data-theme="light"] .spectator-chip.is-online { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.25) !important; color: #059669 !important; } /* -- VS Block (in-battle arena-flex) ----------------------- */ [data-theme="light"] .arena-flex-layout .vs-players-redesign, [data-theme="light"] .vs-players-redesign { background: linear-gradient(135deg,#f0f4f9 0%,#e8eef8 100%) !important; border: 1px solid #d1d9e6 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important; } /* Consolidated above */ /* -- Blitz Header ------------------------------------------- */ [data-theme="light"] .blitz-header { background: #ffffff !important; border: 1px solid #e3e8f0 !important; border-radius: var(--arena-radius) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; } [data-theme="light"] .logo-brand { color: #0f172a !important; } [data-theme="light"] .logo-brand span { color: #10b981 !important; } /* -- Quick Nav ---------------------------------------------- */ [data-theme="light"] .quick-nav { background: rgba(255,255,255,0.95) !important; border: 1px solid #e3e8f0 !important; box-shadow: 0 1px 0 #e3e8f0 !important; backdrop-filter: blur(10px) !important; } /* -- Match end overlay ---------------------------------------- */ [data-theme="light"] .match-end-overlay { background: rgba(240,244,249,0.96) !important; border: 1px solid #d1d9e6 !important; backdrop-filter: blur(20px) !important; color: #0f172a !important; } /* ============================================================ FIVERR-INSPIRED LIGHT THEME OVERHAUL Design reference: fiverr.com seller dashboard - Page bg: #f5f5f5 (warm light gray) - Cards: #ffffff + 1px #e4e4e4 border, no shadow - Radius: 8px (clean, modern, not rounded-pill) - Text h1: #404145 (warm near-black) - Text body: #62646a (medium warm gray) - Text meta: #95979d (soft gray) - No blur/glass in light mode ============================================================ */ /* -- Remap core light-theme tokens to Fiverr palette ------- */ [data-theme="light"] { /* Page background */ --th-bg: #ffffff; --th-bg2: #f7f9fc; /* Panels / cards */ --th-panel: #ffffff; --th-card: #ffffff; /* Borders - thin, warm gray, no opacity hack */ --th-border: #e4e4e4; --th-border-hover: #c5c6c9; /* Typography - Fiverr palette */ --th-text: #1e293b; --th-muted: #475569; --th-muted2: #95979d; /* No glass / heavy shadow */ --th-glass: #ffffff; --th-shadow: rgba(0,0,0,0.06); --th-shadow-lg: rgba(0,0,0,0.06); --th-input-bg: #ffffff; /* Page-level shared vars */ --bg: #ffffff; --panel: #ffffff; --panel-soft: #fafafa; --border: #e4e4e4; --text: #404145; --muted: #62646a; --shadow: 0 1px 2px rgba(0,0,0,0.06); --radius: 16px; /* Modal / table */ --modal-bg: #ffffff; --modal-surface: #f5f5f5; --modal-border: #e4e4e4; --modal-shadow: 0 4px 20px rgba(0,0,0,0.08); --row-hover: #fafafa; --text-primary: #404145; --text-secondary: #62646a; --text-muted: #95979d; /* Challenge page */ --oc-bg: #ffffff; --oc-surface: #ffffff; --oc-surface-2: #fafafa; --oc-surface-hover: #f5f5f5; --oc-border: #e4e4e4; --oc-border-bright: #c5c6c9; --oc-text: #404145; --oc-muted: #62646a; --oc-shadow: 0 1px 2px rgba(0,0,0,0.06); } /* -- Body & page ------------------------------------------- */ [data-theme="light"] body, [data-theme="light"] body.in-room, [data-theme="light"] body.in-battle { background: #f5f5f5 !important; background-image: none !important; color: #404145 !important; } /* -- All panels/cards - Fiverr flat style ------------------ */ [data-theme="light"] .blitz-header, [data-theme="light"] .panel, [data-theme="light"] .stat-card, [data-theme="light"] .match-status-bar, [data-theme="light"] .room-info-bar, [data-theme="light"] .standings, [data-theme="light"] .problem-card, [data-theme="light"] .spectator-panel, [data-theme="light"] .active-blitz-section, [data-theme="light"] .create-room-section, [data-theme="light"] .join-room-section, [data-theme="light"] .config-dashboard, [data-theme="light"] .validation-section, [data-theme="light"] .problems-section, [data-theme="light"] .result-card, [data-theme="light"] .blitz-room-card, [data-theme="light"] .saved-card, [data-theme="light"] .type-card, [data-theme="light"] .oc-card, [data-theme="light"] .oc-unified-header, [data-theme="light"] .modal-content, [data-theme="light"] .oc-modal-content, [data-theme="light"] .vs-start-battle-block, [data-theme="light"] .arena-flex-layout .problem-card, [data-theme="light"] #attemptsModal .modal-content { background: #ffffff !important; border: 1px solid #e4e5e7 !important; border-radius: var(--arena-radius) !important; /* Standardized radius to match dark theme */ box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #111111 !important; } [data-theme="light"] .modal-header, [data-theme="light"] .modal-footer, [data-theme="light"] .oc-modal-header, [data-theme="light"] .oc-modal-footer { border-color: #e4e5e7 !important; background: transparent !important; } /* Hover: just slightly darken the border */ [data-theme="light"] .result-card:hover, [data-theme="light"] .blitz-room-card:hover, [data-theme="light"] .oc-card:hover { border-color: #c5c6c9 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; transform: translateY(-1px); } /* -- Quick-nav bar ----------------------------------------- */ [data-theme="light"] .quick-nav { background: #ffffff !important; border: 1px solid var(--th-border) !important; border-radius: var(--arena-radius) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; backdrop-filter: blur(10px) !important; } /* -- Suggestion & Dropdowns -------------------------------- */ html[data-theme="light"] .site-textarea-suggest-box, html[data-theme="light"] .search-suggestions, html[data-theme="light"] .suggestion-dropdown, html[data-theme="light"] .autocomplete-suggestions, html[data-theme="light"] .autocomplete-suggestion, html[data-theme="light"] .mention-suggestions, html[data-theme="light"] .quick-nav-more-menu { background: #ffffff !important; border: 1px solid #e4e5e7 !important; box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important; border-radius: 12px !important; padding: 6px !important; color: #111111 !important; } html[data-theme="light"] .quick-nav-more-toggle, html[data-theme="light"] .quick-nav-more-toggle.quick-nav-btn { background: #ffffff !important; color: #444444 !important; border: 1px solid #e4e5e7 !important; border-radius: 20px !important; font-weight: 700 !important; height: auto !important; padding: 8px 16px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; } html[data-theme="light"] .quick-nav-more-toggle:hover { background: #f8fafc !important; color: #111111 !important; border-color: #cbd5e1 !important; } html[data-theme="light"] .quick-nav-more-menu, html[data-theme="light"] .quick-nav-more-menu.portal, html[data-theme="light"] .quick-nav-more-menu.portal-visible { background: #ffffff !important; border: 1px solid #e4e5e7 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important; border-radius: 12px !important; padding: 8px !important; color: #111111 !important; backdrop-filter: none !important; } html[data-theme="light"] .quick-nav-more-menu .quick-nav-btn { color: #444444 !important; background: transparent !important; border: none !important; border-radius: 12px !important; margin: 2px 0 !important; padding: 8px 12px !important; } html[data-theme="light"] .quick-nav-more-menu .quick-nav-btn:hover { background: #f1f5f9 !important; color: #111111 !important; } html[data-theme="light"] .site-textarea-suggest-item, html[data-theme="light"] .suggestion-item, html[data-theme="light"] .search-suggestion-item, html[data-theme="light"] .mention-suggestion-item, html[data-theme="light"] .dropdown-item, html[data-theme="light"] .autocomplete-suggestion { color: #444444 !important; background: transparent !important; border-radius: 12px !important; font-weight: 600 !important; padding: 8px 12px !important; border: none !important; } html[data-theme="light"] .site-textarea-suggest-item:hover, html[data-theme="light"] .site-textarea-suggest-item.active, html[data-theme="light"] .suggestion-item:hover, html[data-theme="light"] .dropdown-item:hover, html[data-theme="light"] .autocomplete-suggestion:hover, html[data-theme="light"] .autocomplete-selected { background: #f1f5f9 !important; color: #111111 !important; } /* -- Typography -------------------------------------------- */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #404145 !important; } [data-theme="light"] p, [data-theme="light"] span, [data-theme="light"] li, [data-theme="light"] div { color: var(--th-text); } [data-theme="light"] label { color: #62646a !important; } [data-theme="light"] .room-id, [data-theme="light"] .room-id span, [data-theme="light"] .subtitle, [data-theme="light"] .muted, [data-theme="light"] .meta, [data-theme="light"] .card-time, [data-theme="light"] .spectator-count, [data-theme="light"] .spectator-empty, [data-theme="light"] .match-live-domain, [data-theme="light"] .winner-subtext, [data-theme="light"] .quote-text { color: var(--th-muted) !important; } /* -- Inputs ------------------------------------------------ */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: #ffffff !important; border: 1px solid var(--th-border) !important; border-radius: 16px !important; color: var(--th-text) !important; box-shadow: none !important; } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: #404145 !important; outline: none !important; box-shadow: none !important; background: #ffffff !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--th-muted2) !important; } /* -- Tables ------------------------------------------------ */ [data-theme="light"] table th { background: #fafafa !important; color: var(--th-muted) !important; border-color: var(--th-border) !important; font-weight: 700 !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } [data-theme="light"] table td { background: #ffffff !important; color: #404145 !important; border-color: #f0f0f0 !important; font-weight: 500 !important; } [data-theme="light"] table tr:hover td { background: #fafafa !important; } /* -- Battle-specific: Match Status Bar --------------------- */ [data-theme="light"] #matchStatusText, [data-theme="light"] .match-status { color: #404145 !important; font-weight: 700 !important; } [data-theme="light"] .match-timer-display, [data-theme="light"] #matchTimer { color: #404145 !important; font-weight: 900 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "JetBrains Mono", monospace !important; } /* -- Room Info Bar ----------------------------------------- */ [data-theme="light"] .room-name { color: #404145 !important; font-weight: 700 !important; } [data-theme="light"] .room-id { background: #f5f5f5 !important; border: 1px solid #e4e4e4 !important; color: #62646a !important; border-radius: 16px !important; } [data-theme="light"] .room-id span { color: #404145 !important; font-weight: 700 !important; } [data-theme="light"] .room-players { background: #f2fbf8 !important; border: 1px solid #b7e8d8 !important; color: #2d7a5b !important; border-radius: 16px !important; } /* Room action icon buttons */ [data-theme="light"] .room-actions button { background: #ffffff !important; border: 1px solid #e4e4e4 !important; border-radius: 16px !important; color: #404145 !important; } [data-theme="light"] .room-actions button:hover { background: #f5f5f5 !important; border-color: #c5c6c9 !important; } [data-theme="light"] #leaveRoomBtn { background: #fff2f2 !important; border: 1px solid #ffd0d0 !important; color: #c0392b !important; } [data-theme="light"] #leaveRoomBtn:hover { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; } [data-theme="light"] #cancelGameBtn { background: #fff2f2 !important; border: 1px solid #ffd0d0 !important; color: #c0392b !important; } [data-theme="light"] #autoStartBtn { background: linear-gradient(135deg,#f59e0b,#d97706) !important; border: none !important; color: #fff !important; } [data-theme="light"] #inviteRoomBtn { background: #f2fbf8 !important; border: 1px solid #b7e8d8 !important; color: #2d7a5b !important; } /* -- Standings table --------------------------------------- */ [data-theme="light"] .standings .standings-table th { background: var(--th-bg2) !important; color: var(--th-muted) !important; border-color: var(--th-border) !important; } [data-theme="light"] .standings .standings-table td { background: #ffffff !important; color: var(--th-text) !important; border-color: var(--th-bg2) !important; } [data-theme="light"] .standings .standings-table tr:hover td { background: var(--th-bg2) !important; } /* -- Problem card ------------------------------------------ */ [data-theme="light"] .problem-title, [data-theme="light"] #probName { color: var(--th-text) !important; text-shadow: none !important; } [data-theme="light"] .problem-title-label { color: #10b981 !important; opacity: 1 !important; } [data-theme="light"] .problem-rating-badge { background: var(--th-bg2) !important; border: 1px solid var(--th-border) !important; color: var(--th-muted) !important; } [data-theme="light"] .problem-header { border-bottom-color: var(--th-border) !important; } [data-theme="light"] .problem-lock-status { background: #fff2f2 !important; border: 1px solid #ffd0d0 !important; color: #c0392b !important; border-radius: 16px !important; } [data-theme="light"] .problem-lock-status.pending-loading { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; } [data-theme="light"] .solved-flash { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; } [data-theme="light"] .problem-points-badge { background: #fffbeb !important; border: 1px solid #fde68a !important; color: #92400e !important; border-radius: 16px !important; } /* -- Spectators -------------------------------------------- */ [data-theme="light"] .spectator-chip { background: var(--th-bg2) !important; border: 1px solid var(--th-border) !important; color: var(--th-text) !important; border-radius: 999px !important; } [data-theme="light"] .spectator-chip.is-online { background: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #166534 !important; } [data-theme="light"] .skeleton-chip { background: linear-gradient(90deg, var(--th-skeleton-bg) 25%, var(--th-skeleton-pulse) 50%, var(--th-skeleton-bg) 75%) !important; border: 1px solid var(--th-skeleton-pulse) !important; background-size: 200% 100% !important; } /* -- VS block ---------------------------------------------- */ [data-theme="light"] .vs-players-redesign, [data-theme="light"] .arena-flex-layout .vs-players-redesign { background: var(--th-bg2) !important; border: 1px solid var(--th-border) !important; border-radius: 16px !important; box-shadow: none !important; } [data-theme="light"] .vs-player-box { background: #ffffff !important; border: 1px solid var(--th-border) !important; border-radius: 16px !important; box-shadow: none !important; } /* Consolidated above */ /* -- Search suggestion popup ------------------------------- */ [data-theme="light"] .site-textarea-suggest-box { background: #ffffff !important; border: 1px solid #e4e4e4 !important; border-radius: 16px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; } [data-theme="light"] .site-textarea-suggest-item { color: #404145 !important; } [data-theme="light"] .site-textarea-suggest-item:hover, [data-theme="light"] .site-textarea-suggest-item.active { background: #f5f5f5 !important; color: #404145 !important; } /* -- Footer / nav links ------------------------------------ */ [data-theme="light"] .footer-link, [data-theme="light"] a.footer-link { color: #62646a !important; } [data-theme="light"] .footer-link:hover { color: #404145 !important; } /* -- Modals ------------------------------------------------ */ [data-theme="light"] #attemptsModalTitle { background: #fafafa !important; border-color: #e4e4e4 !important; color: #404145 !important; } [data-theme="light"] .attempts-header-row { background: #fafafa !important; border-color: #e4e4e4 !important; color: #62646a !important; } [data-theme="light"] .attempt-line { border-color: #f0f0f0 !important; } [data-theme="light"] .attempt-line:hover { background: #fafafa !important; } [data-theme="light"] .modal-footer { background: #fafafa !important; border-color: #e4e4e4 !important; } [data-theme="light"] #closeAttemptsModal { background: #404145 !important; color: #ffffff !important; border-color: transparent !important; border-radius: 16px !important; } /* -- Blitz header logo area -------------------------------- */ [data-theme="light"] .logo-brand { color: #404145 !important; } [data-theme="light"] .logo-brand span { color: #10b981 !important; } [data-theme="light"] .blitz-header .logo span, [data-theme="light"] .subtitle { color: #62646a !important; border-color: #e4e4e4 !important; } /* -- Dropdown & More menu ---------------------------------- */ [data-theme="light"] .dropdown-menu, [data-theme="light"] [class*="dropdown-content"], [data-theme="light"] .more-menu-dropdown { background: #ffffff !important; border: 1px solid #e4e4e4 !important; border-radius: 16px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; } [data-theme="light"] .dropdown-item { color: #404145 !important; } [data-theme="light"] .dropdown-item:hover { background: #f5f5f5 !important; } /* -- Badges / chips / tags --------------------------------- */ [data-theme="light"] .status-badge.ready { background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #bbf7d0 !important; } [data-theme="light"] .status-badge.not-ready { background: #fff2f2 !important; color: #c0392b !important; border: 1px solid #ffd0d0 !important; } [data-theme="light"] .status-badge.tie { background: #fffbeb !important; color: #92400e !important; border: 1px solid #fde68a !important; } [data-theme="light"] .count-badge { background: #f0fdf4 !important; color: #166534 !important; } /* -- Active room cards in lobby ---------------------------- */ [data-theme="light"] .blitz-room-card { background: #ffffff !important; border: 1px solid #e4e4e4 !important; border-radius: 16px !important; box-shadow: none !important; } [data-theme="light"] .blitz-room-info h4 { color: #404145 !important; } [data-theme="light"] .blitz-room-meta { color: #62646a !important; } [data-theme="light"] .live-badge { background: #10b981 !important; color: #000000 !important; } [data-theme="light"] .live-badge .live-text { color: #000000 !important; } /* -- Top Center Timer (Battle Room Card) ------------------- */ [data-theme="light"] .room-timer-badge.top-center-timer { background: #f0fdf4 !important; /* Soft emerald tint instead of pure white */ color: #10b981 !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; border-top: none !important; text-shadow: none !important; } /* -- Validation section ------------------------------------ */ [data-theme="light"] .validation-section { background: #ffffff !important; border: 1px solid #e4e4e4 !important; backdrop-filter: none !important; } [data-theme="light"] #validationStatusText { color: #404145 !important; } /* -- Battle start status ("Waiting for players") ----------- */ [data-theme="light"] .battle-start-status { background: #fffbeb !important; border: 1px solid #fde68a !important; color: #92400e !important; border-radius: 16px !important; } /* -- Fiverr-style tab buttons ------------------------------ */ [data-theme="light"] .filter-btn, [data-theme="light"] .oc-tab-btn { color: #62646a !important; background: transparent !important; border-radius: 12px !important; } [data-theme="light"] .filter-btn.active, [data-theme="light"] .oc-tab-btn.active { background: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; } [data-theme="light"] .filter-btn:hover, [data-theme="light"] .oc-tab-btn:hover { background: #f8fafc !important; color: #10b981 !important; } [data-theme="light"] .filter-btn.active:hover, [data-theme="light"] .oc-tab-btn.active:hover { background: #059669 !important; color: #ffffff !important; } /* -- Primary / action buttons ------------------------------ */ [data-theme="light"] .primary-btn-premium, [data-theme="light"] .start-battle-btn, [data-theme="light"] .generate-btn { background: #10b981 !important; color: #ffffff !important; border: none !important; border-radius: 16px !important; box-shadow: none !important; } [data-theme="light"] .primary-btn-premium span, [data-theme="light"] .start-battle-btn span, [data-theme="light"] .generate-btn span { color: #ffffff !important; } [data-theme="light"] .primary-btn-premium:hover, [data-theme="light"] .start-battle-btn:hover, [data-theme="light"] .generate-btn:hover { background: #059669 !important; box-shadow: none !important; } [data-theme="light"] .open-problem-btn { background: linear-gradient(135deg,#3b82f6,#2563eb) !important; color: #ffffff !important; border-radius: 16px !important; box-shadow: none !important; } /* ============================================================ LIGHT THEME - REDUCE BACKGROUND CONTRAST Background was too dark (#f5f5f5), cards too stark white. Fix: near-white bg + very subtle off-white cards. ============================================================ */ /* Page background: much closer to white */ [data-theme="light"] { --th-bg: #ffffff; --th-bg2: #f7f9fc; --bg: #ffffff; --panel: #ffffff; --panel-soft: #f7f8fa; --oc-bg: #ffffff; } [data-theme="light"] body, [data-theme="light"] body.in-room, [data-theme="light"] body.in-battle { background: #f1f2f5 !important; background-image: none !important; } /* Cards: very slightly off-white so they feel part of the page */ [data-theme="light"] .blitz-header, [data-theme="light"] .panel, [data-theme="light"] .stat-card, [data-theme="light"] .match-status-bar, [data-theme="light"] .room-info-bar, [data-theme="light"] .standings, [data-theme="light"] .problem-card, [data-theme="light"] .spectator-panel, [data-theme="light"] .active-blitz-section, [data-theme="light"] .create-room-section, [data-theme="light"] .join-room-section, [data-theme="light"] .config-dashboard, [data-theme="light"] .validation-section, [data-theme="light"] .problems-section, [data-theme="light"] .result-card, [data-theme="light"] .blitz-room-card, [data-theme="light"] .saved-card, [data-theme="light"] .type-card, [data-theme="light"] .oc-card, [data-theme="light"] .oc-unified-header, [data-theme="light"] .modal-content, [data-theme="light"] .vs-start-battle-block, [data-theme="light"] .arena-flex-layout .problem-card, [data-theme="light"] .quick-nav { background: #ffffff !important; border: 1px solid #e8e9ec !important; } /* Table cells match card */ [data-theme="light"] table td { background: #ffffff !important; } [data-theme="light"] table th { background: #f7f8fa !important; } [data-theme="light"] .standings .standings-table th { background: #f7f8fa !important; } [data-theme="light"] .standings .standings-table td { background: #ffffff !important; } /* VS section: very light warm gray */ [data-theme="light"] .vs-players-redesign, [data-theme="light"] .arena-flex-layout .vs-players-redesign { background: #f7f8fa !important; border: 1px solid #e8e9ec !important; } [data-theme="light"] .vs-player-box { background: #ffffff !important; border: 1px solid #e8e9ec !important; } /* Room ID, player chips */ [data-theme="light"] .room-id { background: #f7f8fa !important; border-color: #e8e9ec !important; } [data-theme="light"] .room-actions button { background: #ffffff !important; border-color: #e8e9ec !important; } /* Spectator chips */ [data-theme="light"] .spectator-chip { background: #f7f8fa !important; border-color: #e8e9ec !important; } /* Skeleton chips */ [data-theme="light"] .skeleton-chip { background: linear-gradient(90deg, var(--th-skeleton-bg) 25%, var(--th-skeleton-pulse) 50%, var(--th-skeleton-bg) 75%) !important; border: 1px solid var(--th-skeleton-pulse) !important; background-size: 200% 100% !important; } /* Search suggestion popup */ [data-theme="light"] .site-textarea-suggest-box { background: #ffffff !important; border-color: #e8e9ec !important; } [data-theme="light"] .site-textarea-suggest-item:hover, [data-theme="light"] .site-textarea-suggest-item.active { background: #f7f8fa !important; } /* Dropdowns */ [data-theme="light"] .dropdown-menu, [data-theme="light"] [class*="dropdown-content"], [data-theme="light"] .more-menu-dropdown { background: #ffffff !important; border-color: #e8e9ec !important; } [data-theme="light"] .dropdown-item:hover { background: #f7f8fa !important; } /* Modals */ [data-theme="light"] #attemptsModalTitle { background: #f7f8fa !important; border-color: #e8e9ec !important; } [data-theme="light"] .attempts-header-row { background: #f7f8fa !important; border-color: #e8e9ec !important; } [data-theme="light"] .modal-footer { background: #f7f8fa !important; border-color: #e8e9ec !important; } [data-theme="light"] table tr:hover td { background: #f7f8fa !important; } /* ============================================================ LIGHT THEME - FLOATING MODALS & DROPDOWNS (Fiverr-Inspired) - Background: Pure White (#ffffff) - Border: Thin Neutral (#e4e4e4) - Text: High Contrast Warm Black (#404145) - No blur / dark overlays ============================================================ */ /* -- Global Modal Container ------------------------------- */ [data-theme="light"] .modal-overlay, [data-theme="light"] .oc-modal-overlay, [data-theme="light"] .auth-v-overlay { background: rgba(15, 23, 42, 0.45) !important; backdrop-filter: blur(8px) !important; } /* -- Generic Modal Content -------------------------------- */ [data-theme="light"] .modal-content, [data-theme="light"] .oc-modal, [data-theme="light"] .find-random-content, [data-theme="light"] .auth-v-content, [data-theme="light"] .celebration-content, [data-theme="light"] #attemptsModal .modal-content { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: var(--arena-radius) !important; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15) !important; color: #0f172a !important; backdrop-filter: none !important; } /* -- Modal Headers / Titles ------------------------------- */ [data-theme="light"] .modal-content h1, [data-theme="light"] .modal-content h2, [data-theme="light"] .modal-content h3, [data-theme="light"] .oc-modal h2, [data-theme="light"] .find-random-content h2, [data-theme="light"] .auth-v-content h2, [data-theme="light"] #attemptsModalTitle { color: #404145 !important; font-weight: 800 !important; } /* "Cancel" / "Close" / "Reset" ghost buttons */ [data-theme="light"] .modal-close-btn, [data-theme="light"] .cancel-btn, [data-theme="light"] .oc-modal-btns .cancel-btn, [data-theme="light"] .global-profile-modal-close, [data-theme="light"] .user-profile-change-password-btn, [data-theme="light"] #closeAttemptsModal, [data-theme="light"] .find-random-footer .close-btn, [data-theme="light"] .find-random-footer .reset-btn { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; box-shadow: none !important; } [data-theme="light"] .modal-close-btn:hover, [data-theme="light"] .cancel-btn:hover, [data-theme="light"] .global-profile-modal-close:hover, [data-theme="light"] .user-profile-change-password-btn:hover, [data-theme="light"] #closeAttemptsModal:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #1e293b !important; } /* Primary Action Buttons (Blue/Green) */ [data-theme="light"] .confirm-btn, [data-theme="light"] .primary-btn, [data-theme="light"] .create-btn, [data-theme="light"] .pick-random-btn, [data-theme="light"] #findRandomModal .pick-random-btn { background: #3b82f6 !important; /* Premium Blue */ color: #ffffff !important; border: none !important; } [data-theme="light"] .confirm-btn:hover, [data-theme="light"] .pick-random-btn:hover { background: #2563eb !important; } /* Success Action (Green) - Join Buttons */ [data-theme="light"] .join-this-room-btn, [data-theme="light"] #joinRoomBtn { background: #10b981 !important; border-color: #10b981 !important; color: #ffffff !important; } [data-theme="light"] .join-this-room-btn:hover, [data-theme="light"] #joinRoomBtn:hover { background: #059669 !important; border-color: #059669 !important; } [data-theme="light"] .quick-nav-more-menu a, [data-theme="light"] .quick-nav-more-menu button, [data-theme="light"] .dropdown-item { color: #404145 !important; padding: 8px 12px !important; border-radius: 16px !important; text-align: left !important; width: 100% !important; display: block !important; background: transparent !important; border: none !important; } [data-theme="light"] .quick-nav-more-menu a:hover, [data-theme="light"] .quick-nav-more-menu button:hover, [data-theme="light"] .dropdown-item:hover { background: #f5f5f5 !important; } /* -- Find Random Modal Specifics -------------------------- */ [data-theme="light"] .find-random-header { border-bottom-color: #e4e4e4 !important; } [data-theme="light"] .find-random-footer { border-top-color: #e4e4e4 !important; } [data-theme="light"] .user-list-placeholder { background: #f5f5f5 !important; border: 1px solid #e4e4e4 !important; color: #95979d !important; border-radius: 16px !important; } [data-theme="light"] .rating-range-row label { color: #62646a !important; } [data-theme="light"] .rating-input-wrap input { background: #ffffff !important; border: 1px solid #e4e4e4 !important; color: #404145 !important; } /* -- OC Modal Specifics ----------------------------------- */ [data-theme="light"] .oc-modal-fields label { color: #62646a !important; } [data-theme="light"] .oc-modal-problems-wrap { background: #f7f8fa !important; border: 1px solid #e4e4e4 !important; border-radius: 16px !important; } [data-theme="light"] .oc-problem-row { border-bottom-color: #e4e4e4 !important; } [data-theme="light"] .oc-problem-row input { background: #ffffff !important; } [data-theme="light"] .oc-remove-problem { color: #ef4444 !important; } /* -- Standings / Submissions Modal ----------------------- */ [data-theme="light"] .standings-modal .standings-table th { background: #fafafa !important; color: #62646a !important; } [data-theme="light"] .standings-modal .standings-table td { background: #ffffff !important; color: #404145 !important; } [data-theme="light"] .verdict-badge { border-radius: 4px !important; font-weight: 700 !important; } /* -- Quick Nav More Toggle -------------------------------- */ [data-theme="light"] .quick-nav-more.open .quick-nav-more-toggle { background: #f1f5f9 !important; color: #111111 !important; border-color: #cbd5e1 !important; } /* -- Deep Modal Overrides (Targeting hardcoded darks) ------ */ [data-theme="light"] #attemptsModalTitle, [data-theme="light"] .attempts-header-row { background: #fafafa !important; border-bottom-color: #e4e4e4 !important; color: #404145 !important; } [data-theme="light"] #attemptsModalTitle a { color: #3b82f6 !important; } [data-theme="light"] .header-col { color: #62646a !important; } [data-theme="light"] .attempt-line { border-bottom-color: #f0f0f0 !important; color: #404145 !important; } [data-theme="light"] .attempt-line:hover { background: #f7f8fa !important; } [data-theme="light"] .attempt-id a { color: #95979d !important; } /* ============================================================ LIGHT THEME ─ PREMIUM REFINEMENTS ============================================================ */ [data-theme="light"] { --th-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); --th-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.06); } /* ── Panels & Sections ─────────────────────────────────── */ [data-theme="light"] .active-blitz-section, [data-theme="light"] .join-room-section, [data-theme="light"] .create-room-section, [data-theme="light"] .panel, [data-theme="light"] .oc-card, [data-theme="light"] .result-card, [data-theme="light"] .tournament-setup-panel, [data-theme="light"] .stat-card, [data-theme="light"] .table-wrap, [data-theme="light"] .standings, [data-theme="light"] .spectator-panel { background: #ffffff !important; border: 1px solid #e4e5e7 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; backdrop-filter: none !important; color: #111111 !important; border-radius: var(--arena-radius) !important; /* Matched to dark theme's --arena-radius */ } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] .panel-title, [data-theme="light"] .config-title { color: #111111 !important; font-weight: 800 !important; } /* ── Cards ─────────────────────────────────────────────── */ [data-theme="light"] .blitz-room-card { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: var(--th-shadow) !important; color: var(--th-text) !important; } [data-theme="light"] .room-info-item span, [data-theme="light"] .room-card-status, [data-theme="light"] .oc-banner-text, [data-theme="light"] .oc-expires-countdown, [data-theme="light"] .oc-match-countdown { color: #444444 !important; /* Solid Charcoal */ font-weight: 700 !important; } [data-theme="light"] .blitz-room-card:hover { background: #ffffff !important; border-color: #10b981 !important; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.08) !important; transform: translateY(-2px); } /* ── Inputs ────────────────────────────────────────────── */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] .active-search-input, [data-theme="light"] .input-group-premium, [data-theme="light"] .optional-input-wrapper input { background: #ffffff !important; border: 1px solid #e4e5e7 !important; color: #111111 !important; border-radius: 12px !important; /* Matched to dark theme inputs */ font-weight: 600 !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #777777 !important; font-weight: 500 !important; } [data-theme="light"] input:focus { background: #ffffff !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.06) !important; } /* ── Navbar & Header ───────────────────────────────────── */ [data-theme="light"] .quick-nav { background: #ffffff !important; border: 1px solid var(--th-border) !important; box-shadow: none !important; border-radius: var(--arena-radius) !important; gap: 6px !important; padding: 10px 20px !important; display: flex !important; align-items: center !important; transition: box-shadow 0.2s ease !important; } [data-theme="light"] .quick-nav.is-stuck { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important; } [data-theme="light"] .blitz-header { background: #ffffff !important; border: 1px solid var(--th-border) !important; } /* Robust Admin Link Visibility Guard: Explicitly hide Admin navigation links unless the JS logic has applied an inline 'display: inline-flex' or 'display: flex' style. This ensures unauthorized users never see the link even if light-theme CSS overrides are aggressive. */ [data-theme="light"] [data-admin-nav-link="desktop"]:not([style*="display: inline-flex"]) { display: none !important; } [data-theme="light"] [data-admin-nav-link="mobile"]:not([style*="display: flex"]) { display: none !important; } /* ── Mobile Menu Toggle (Light Mode) ──────────────────── */ [data-theme="light"] .mobile-menu-toggle { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } [data-theme="light"] .mobile-menu-toggle:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; } /* ── Mobile Nav Drawer (Light Mode) ──────────────────── */ [data-theme="light"] .mobile-nav-drawer-panel { background: #ffffff !important; border-left: 1px solid #cbd5e1 !important; box-shadow: -8px 0 40px rgba(0,0,0,0.08) !important; } [data-theme="light"] .mobile-nav-logo { color: #0f172a !important; } [data-theme="light"] .mobile-nav-close { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } [data-theme="light"] .mobile-nav-close:hover { background: #fee2e2 !important; border-color: #f87171 !important; color: #ef4444 !important; } [data-theme="light"] .mobile-nav-links a { color: #475569 !important; } [data-theme="light"] .mobile-nav-links a:hover { background: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .mobile-nav-links a.active { background: rgba(59, 130, 246, 0.08) !important; color: #3b82f6 !important; } /* Premium Login Button for Light Theme - Modern Dark Slate */ [data-theme="light"] .global-handle-chip.not-verified { background: #0f172a !important; color: #ffffff !important; border: none !important; font-weight: 700 !important; padding: 6px 18px !important; /* Unified padding */ border-radius: 12px !important; /* Unified roundness matching other nav items */ font-size: 0.82rem !important; /* Unified font size */ box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; } [data-theme="light"] .global-handle-chip.not-verified:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25) !important; background: #1e293b !important; } [data-theme="light"] .logo-brand, [data-theme="light"] .footer-logo, [data-theme="light"] .mobile-nav-logo { color: #111111 !important; } [data-theme="light"] .logo-brand span, [data-theme="light"] .footer-logo span, [data-theme="light"] .mobile-nav-logo span { color: #047857 !important; /* Even deeper emerald green for Light Mode */ } /* ── Announcements ─────────────────────────────────────── */ [data-theme="light"] .public-announcement { background: #ffffff !important; border: 1px solid #e4e5e7 !important; color: #111111 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; font-weight: 800 !important; } /* ── Footer ────────────────────────────────────────────── */ [data-theme="light"] .site-footer { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.05) !important; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.03) !important; } /* ── VS Block ──────────────────────────────────────────── */ [data-theme="light"] .vs-players-redesign { background: linear-gradient(135deg, #f8fafc 60%, #f1f5f9 100%) !important; border-color: rgba(0, 0, 0, 0.06) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; } /* Consolidated above */ /* ── Empty State ───────────────────────────────────────── */ [data-theme="light"] .empty-title { color: #222325 !important; background: none !important; -webkit-text-fill-color: #222325 !important; font-weight: 800 !important; } [data-theme="light"] .empty-desc { color: #62646a !important; } [data-theme="light"] .quote-text { color: #222325 !important; font-weight: 600 !important; } [data-theme="light"] .quote-author { color: #62646a !important; } [data-theme="light"] .empty-quote-card { background: #f7f7f7 !important; border: 1px solid #e4e5e7 !important; border-radius: 12px !important; box-shadow: none !important; } /* ── TIP & INFO Bubbles ────────────────────────────────── */ [data-theme="light"] .empty-tip, [data-theme="light"] .empty-info { background: #f7f7f7 !important; border: 1px solid #e4e5e7 !important; color: #62646a !important; box-shadow: none !important; } [data-theme="light"] .tip-badge, [data-theme="light"] .info-badge { background: #e2e8f0 !important; color: #475569 !important; font-weight: 800 !important; } [data-theme="light"] .tip-badge.info, [data-theme="light"] .info-badge.info { background: #dbeafe !important; color: #2563eb !important; } [data-theme="light"] .tip-text, [data-theme="light"] .info-text { color: #475569 !important; font-weight: 600 !important; } [data-theme="light"] .empty-tip a, [data-theme="light"] .empty-info a { color: #2563eb !important; /* High-contrast blue */ font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 2px !important; } [data-theme="light"] .empty-tip a:hover, [data-theme="light"] .empty-info a:hover { color: #1d4ed8 !important; text-decoration-color: #2563eb !important; } /* ── Auth Modals ───────────────────────────────────────── */ [data-theme="light"] .auth-v-content { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.12) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important; color: #1e293b !important; } /* ── Config Grid ───────────────────────────────────────── */ [data-theme="light"] .config-item-glass { background: #f8fafc !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .config-label-row { color: #059669 !important; } [data-theme="light"] .config-input-wrap input, [data-theme="light"] .config-value-display span:first-child { color: #0f172a !important; } /* ── Scrollbars ── */ [data-theme="light"] * { scrollbar-color: rgba(0, 0, 0, 0.1) transparent !important; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2) !important; } /* ── Find Random Opponent Button ───────────────────────── */ [data-theme="light"] #findRandomOpponentBtn { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #10b981 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; } [data-theme="light"] #findRandomOpponentBtn:hover { background: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; } [data-theme="light"] #findRandomOpponentBtn .action-btn-text { color: #10b981 !important; } [data-theme="light"] #findRandomOpponentBtn:hover .action-btn-text { color: #ffffff !important; } /* ── Header Tagline ────────────────────────────────────── */ [data-theme="light"] .header-tagline { color: #111111 !important; opacity: 1 !important; background: #f1f5f9 !important; padding: 6px 16px !important; border-radius: 40px !important; font-size: 0.8rem !important; border: 1px solid #e4e5e7 !important; font-weight: 700 !important; letter-spacing: 0.01em !important; } [data-theme="dark"] .header-tagline { color: var(--th-muted) !important; opacity: 0.8 !important; background: rgba(255,255,255,0.04) !important; padding: 6px 16px !important; border-radius: 40px !important; font-size: 0.8rem !important; border: 1px solid rgba(255,255,255,0.06) !important; font-weight: 600 !important; letter-spacing: 0.01em !important; } /* ── Problem Creation List ─────────────────────────────── */ [data-theme="light"] .problems-section-premium { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .problems-list-head div { color: #475569 !important; font-weight: 800 !important; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; } [data-theme="light"] .create-problem-item { background: #f8fafc !important; border-color: rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .problem-points-create, [data-theme="light"] .problem-rating-create { color: #1e293b !important; font-weight: 700 !important; background: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .add-problem-btn-premium { background: #f1f5f9 !important; border: 1px dashed rgba(0,0,0,0.15) !important; color: #475569 !important; font-weight: 700 !important; } [data-theme="light"] .add-problem-btn-premium:hover { background: #e2e8f0 !important; color: #1e293b !important; } [data-theme="light"] .remove-create-problem { background: #ffffff !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; color: #ef4444 !important; } [data-theme="light"] .remove-create-problem:hover { background: #fef2f2 !important; border-color: #ef4444 !important; } /* ── Codeforces Rank Readability (Light Theme) ────────── */ /* -- CF Rank Colors for Light Theme (Darkened for readability on white) -- */ [data-theme="light"] .rank-newbie { color: #64748b !important; } /* Gray-500 */ [data-theme="light"] .rank-pupil { color: #15803d !important; } /* Green-700 */ [data-theme="light"] .rank-specialist { color: #0f766e !important; } /* Teal-700 */ [data-theme="light"] .rank-expert { color: #1d4ed8 !important; } /* Blue-700 */ [data-theme="light"] .rank-cm { color: #7e22ce !important; } /* Purple-700 */ [data-theme="light"] .rank-master, [data-theme="light"] .rank-im { color: #b45309 !important; } /* Amber-700 */ [data-theme="light"] .rank-gm, [data-theme="light"] .rank-lgm { color: #be123c !important; } /* Rose-700 */ [data-theme="light"] .player-handle-link, [data-theme="light"] .standings-cf-rank, [data-theme="light"] .vs-player-handle, [data-theme="light"] .problem-rating-create { text-shadow: none !important; font-weight: 700 !important; } /* Ensure the selects in Admin also follow these colors */ [data-theme="light"] select.rank-newbie, [data-theme="light"] select.rank-newbie option { color: #64748b !important; } [data-theme="light"] select.rank-pupil, [data-theme="light"] select.rank-pupil option { color: #15803d !important; } [data-theme="light"] select.rank-specialist, [data-theme="light"] select.rank-specialist option { color: #0f766e !important; } [data-theme="light"] select.rank-expert, [data-theme="light"] select.rank-expert option { color: #1d4ed8 !important; } [data-theme="light"] select.rank-cm, [data-theme="light"] select.rank-cm option { color: #7e22ce !important; } [data-theme="light"] select.rank-master, [data-theme="light"] select.rank-master option, [data-theme="light"] select.rank-im, [data-theme="light"] select.rank-im option { color: #b45309 !important; } [data-theme="light"] select.rank-gm, [data-theme="light"] select.rank-gm option, [data-theme="light"] select.rank-lgm, [data-theme="light"] select.rank-lgm option { color: #be123c !important; } /* -- Neutralize Battle UI rank colors (Keep clean black/slate in Battle View) -- */ [data-theme="light"] .standings-table [class*="rank-"], [data-theme="light"] .vs-player-handle, [data-theme="light"] .player-rank, [data-theme="light"] .standings-cf-rank, [data-theme="light"] .player-handle-link { color: #0f172a !important; } [data-theme="light"] .problem-rating-create, [data-theme="light"] .problem-rating-create option { font-weight: 700 !important; } /* ── Rank Readability (Dark Theme) ─────────────────────── */ [data-theme="dark"] .problem-rating-create, [data-theme="dark"] .problem-rating-create option, [data-theme="dark"] .rank-newbie, [data-theme="dark"] .rank-pupil, [data-theme="dark"] .rank-specialist, [data-theme="dark"] .rank-expert, [data-theme="dark"] .rank-cm, [data-theme="dark"] .rank-master, [data-theme="dark"] .rank-im, [data-theme="dark"] .rank-gm, [data-theme="dark"] .rank-lgm { font-weight: 700 !important; } /* ── Sitewide Light Theme Audit & Refinements ─────────── */ /* 1. Feedback & Activity */ [data-theme="light"] .feedback-card, [data-theme="light"] .feedback-create-panel, [data-theme="light"] .activity-log-panel, [data-theme="light"] .feedback-toolbar { background: #ffffff !important; border: 1px solid #e4e5e7 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; color: #111111 !important; border-radius: 20px !important; } [data-theme="light"] .search-wrap, [data-theme="light"] .pill-select, [data-theme="light"] .feedback-status-select, [data-theme="light"] .toolbar-search-filter input { background: #ffffff !important; border: 1px solid #e4e5e7 !important; color: #111111 !important; border-radius: 12px !important; } /* 2. Notices & Banners */ [data-theme="light"] .fro-filter-notice { background: #f0fdf4 !important; border: 1px solid #10b981 !important; color: #065f46 !important; backdrop-filter: none !important; } [data-theme="light"] .feature-disabled-banner { background: #fff1f2 !important; border: 1px solid #fecaca !important; color: #991b1b !important; } [data-theme="light"] .feature-disabled-banner .banner-close { color: #991b1b !important; opacity: 0.7 !important; } [data-theme="light"] .feature-disabled-banner .banner-close:hover { opacity: 1 !important; } /* 3. Chat & Mentions */ [data-theme="light"] .fro-chat-msg.recv { background: #f1f5f9 !important; color: #111111 !important; border-radius: 12px !important; } [data-theme="light"] .fro-chat-msg.sent { background: #dcfce7 !important; color: #111111 !important; border-radius: 12px !important; } [data-theme="light"] .fro-chat-floating { background: #ffffff !important; border: 1px solid #e4e5e7 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important; } /* 4. Action Buttons (Ghost Variants) */ [data-theme="light"] .action-btn.ghost { background: #f1f5f9 !important; color: #444444 !important; border: 1px solid #e4e5e7 !important; } [data-theme="light"] .action-btn.ghost:hover { background: #e2e8f0 !important; color: #111111 !important; } /* 5. Stat Cards & Grids */ [data-theme="light"] .profile-stat-card, [data-theme="light"] .stat-card, [data-theme="light"] .user-profile-card { background: #ffffff !important; border: 1px solid #e4e5e7 !important; color: #111111 !important; border-radius: 20px !important; } /* 6. Selection States */ [data-theme="light"] ::selection { background: #dcfce7; color: #111111; } /* Shared nav fallback: keep the navbar visible even if the JS reveal path fails. */ .bz-global-nav, .quick-nav { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; animation: none !important; }