/* ============================================================ Dark Theme Override ? FotMob Style Applied when is set ============================================================ */ [data-theme="dark"] { --lb-bg: #1c1c1e; --lb-surface: #2c2c2e; --lb-surface2: #3a3a3c; --lb-border: #3a3a3c; --lb-muted: #8e8e93; --lb-text: #ffffff; } /* Background */ [data-theme="dark"] .bg-lb-bg, [data-theme="dark"] body, [data-theme="dark"] #root > div { background-color: #1c1c1e !important; } /* Surfaces */ [data-theme="dark"] .bg-lb-surface { background-color: #2c2c2e !important; } [data-theme="dark"] .bg-lb-surface2 { background-color: #3a3a3c !important; } [data-theme="dark"] .border-lb-border { border-color: #3a3a3c !important; } /* Accent ? neutral white instead of purple/cyan */ [data-theme="dark"] .bg-lb-purple { background-color: #48484a !important; } [data-theme="dark"] .text-lb-purple { color: #ffffff !important; } [data-theme="dark"] .bg-lb-cyan { background-color: #636366 !important; } [data-theme="dark"] .text-lb-cyan { color: #ffffff !important; } [data-theme="dark"] .bg-lb-pink { background-color: #636366 !important; } [data-theme="dark"] .text-lb-pink { color: #ffffff !important; } [data-theme="dark"] .bg-lb-purpleDeep { background-color: #3a3a3c !important; } [data-theme="dark"] .ring-lb-cyan, [data-theme="dark"] .ring-lb-pink, [data-theme="dark"] .ring-lb-purple { --tw-ring-color: #8e8e93 !important; } /* Match card vibrant gradients ? dark */ [data-theme="dark"] .from-\[\#FF9DD6\]\/90, [data-theme="dark"] .from-\[\#5BC8FF\]\/90, [data-theme="dark"] .from-\[\#6FE0D0\]\/90, [data-theme="dark"] .from-\[\#7B8CFF\]\/90 { --tw-gradient-from: #2c2c2e !important; } [data-theme="dark"] .via-\[\#FF6FB0\]\/85, [data-theme="dark"] .via-\[\#8C9BFF\]\/85, [data-theme="dark"] .via-\[\#5B9CFF\]\/85, [data-theme="dark"] .via-\[\#B07CFF\]\/85 { --tw-gradient-via: #242426 !important; } [data-theme="dark"] .to-\[\#9D6BFF\]\/90, [data-theme="dark"] .to-\[\#D17BFF\]\/90, [data-theme="dark"] .to-\[\#8B7CFF\]\/90, [data-theme="dark"] .to-\[\#FF7DC9\]\/90 { --tw-gradient-to: #1c1c1e !important; } [data-theme="dark"] .ring-white\/20 { --tw-ring-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .from-white\/35 { --tw-gradient-from: rgba(255,255,255,0.03) !important; } /* lb-rank-pill (match card list + percentile banner) */ [data-theme="dark"] .lb-rank-pill { background: #2c2c2e !important; border: 1px solid #3a3a3c !important; } /* BottomNav */ [data-theme="dark"] .dock-nav { background-color: #1c1c1e !important; border-color: rgba(255,255,255,0.06) !important; } [data-theme="dark"] .dock-item-active { background: linear-gradient(135deg, #48484a 0%, #636366 100%) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .dock-item-active::after { background: linear-gradient(135deg, #48484a 0%, #636366 100%) !important; } [data-theme="dark"] .bg-\[\#1E1E1E\] { background-color: #2c2c2e !important; } /* Tab underline */ [data-theme="dark"] .bg-lb-purple.rounded-full { background-color: #ffffff !important; } /* "???????? ???" spinning border */ [data-theme="dark"] .important-title { background: conic-gradient(from var(--imp-angle), #48484a, #8e8e93, #636366, #48484a) !important; } [data-theme="dark"] .important-title > span { background: #1c1c1e !important; } /* Page backgrounds */ [data-theme="dark"] .bg-\[\#11041d\], [data-theme="dark"] .bg-\[#11041d\] { background-color: #1c1c1e !important; } [data-theme="dark"] .leaderboard-page { background: #1c1c1e !important; } /* Header gradient ? dark */ [data-theme="dark"] .from-wc-accent, [data-theme="dark"] .via-wc-primary, [data-theme="dark"] .from-wc-primary { background-image: none !important; background-color: #1c1c1e !important; } [data-theme="dark"] .bg-gradient-to-b.from-wc-accent { background: #1c1c1e !important; } /* Profile settings items */ [data-theme="dark"] .border-lb-border.bg-lb-surface .bg-lb-surface2 { background-color: #3a3a3c !important; color: #ffffff !important; } /* Podium burst ? gold stays, ring colors ? grey */ [data-theme="dark"] .podium-burst { background: repeating-conic-gradient( from 0deg, rgba(245,200,75,0.28) 0deg 4deg, transparent 4deg 18deg ) !important; }