/* * athlete/css/dark.css — Theme token + dark-mode override sheet. * * Replaces the runtime JS injection (buildDarkComponentOverrides + * injectDarkModeCss in athlete/modules/theme.js, removed v210). Static CSS * applies before first paint when the tag is in , eliminating * the cold-start theme flicker. Engineering Playbook §7.4. * * Three scope keys cover every theme state: * html[data-theme="light"] — explicit light pick * html[data-theme="dark"] — explicit dark pick * html[data-theme="auto"] — follow OS (default for new users) * html:not([data-theme]) — pre-JS first paint (same as auto) * * theme.js still reads localStorage to set the data-theme attribute as soon * as it runs (tiny inline op, can't be CSS-only). This sheet handles every * declarative consequence of that attribute. * * Team-color tinting (var(--team-primary) etc.) is set elsewhere by * SCv2.applyTeamTheme — that's runtime-aware because it depends on which * team is active, and it slots in regardless of light/dark. */ /* ─── Accent vars: light mode (default) ─────────────────────────────────── */ :root, html[data-theme="light"] { --accent-green: #16a34a; --accent-green-2: rgba(22, 163, 74, 0.28); --accent-amber: #d97706; --accent-amber-2: rgba(217, 119, 6, 0.28); --accent-red: #dc2626; --accent-red-2: rgba(220, 38, 38, 0.28); --failure-ink: #7f1d1d; /* Note: --surface-elevated, --accent-soft, --live-soft moved to athlete/css/shared.css May 20 2026 — single source of truth for all light-mode design tokens. */ } /* ─── Surface + accent vars: explicit dark ──────────────────────────────── */ html[data-theme="dark"] { --bg: #0a0d14; --surface: #12161f; --surface-elevated: #1e2433; --ink: #ffffff; --ink-muted: #a1a1aa; --ink-faint: #71717a; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25); /* Brighter accent set so the same semantic colors stay vivid on dark surfaces */ --accent-green: #22c55e; --accent-green-2: rgba(34, 197, 94, 0.32); --accent-amber: #f59e0b; --accent-amber-2: rgba(245, 158, 11, 0.32); --accent-red: #ef4444; --accent-red-2: rgba(239, 68, 68, 0.32); --failure-ink: #fecaca; /* Soft-tint vars rebalanced for dark surfaces — translucent overlays work where opaque pastels (light-mode #dcfce7/#fee2e2) would clash. */ --accent-soft: rgba(34, 197, 94, 0.16); --live-soft: rgba(239, 68, 68, 0.18); } html[data-theme="dark"], html[data-theme="dark"] body { background: var(--bg); color: var(--ink); } /* ─── Auto / no preference: follow OS ───────────────────────────────────── */ @media (prefers-color-scheme: dark) { html[data-theme="auto"], html:not([data-theme]) { --bg: #0a0d14; --surface: #12161f; --surface-elevated: #1e2433; --ink: #ffffff; --ink-muted: #a1a1aa; --ink-faint: #71717a; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25); --accent-green: #22c55e; --accent-green-2: rgba(34, 197, 94, 0.32); --accent-amber: #f59e0b; --accent-amber-2: rgba(245, 158, 11, 0.32); --accent-red: #ef4444; --accent-red-2: rgba(239, 68, 68, 0.32); --failure-ink: #fecaca; --accent-soft: rgba(34, 197, 94, 0.16); --live-soft: rgba(239, 68, 68, 0.18); } html[data-theme="auto"], html[data-theme="auto"] body, html:not([data-theme]), html:not([data-theme]) body { background: var(--bg); color: var(--ink); } } /* ─── Status-bar tint + smooth toggle ───────────────────────────────────── */ html { color-scheme: light dark; transition: background-color 0.3s ease, color 0.3s ease; } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * Per-component dark-mode overrides. * * Many per-page CSS blocks bake in hardcoded rgba(255,255,255,*) / #ffffff * surfaces that token-level vars can't override. Each rule below targets * the specific class with explicit dark colors. Three scope blocks because * every rule needs to apply for `dark`, `auto + OS dark`, and `unset + OS dark`. * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ─── Block 1: explicit dark ────────────────────────────────────────────── */ html[data-theme="dark"] .app-header, html[data-theme="dark"] .thread-header, html[data-theme="dark"] .game-header { background: rgba(18, 22, 31, 0.92); border-bottom-color: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .bottom-nav { background: rgba(18, 22, 31, 0.94); border-top-color: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] nav.bottom-nav .bn-item { color: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] nav.bottom-nav .bn-item svg { stroke: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] nav.bottom-nav .bn-item.active { color: #ffffff; } html[data-theme="dark"] nav.bottom-nav .bn-item.active svg { stroke: #ffffff; } /* v315 May 24 2026: composer is now a unified rounded CARD (Claude-style) that uses --surface for its bg automatically. composer-bar uses --bg directly. No more --composer-bg var, no more backdrop-filter, no more transparent-composer-inheriting-bar tricks. The composer-input is transparent (inherits the card's surface) and the card itself owns the visible boundary via its border. */ html[data-theme="dark"] .composer-input { color: #ffffff; } html[data-theme="dark"] .composer-input::placeholder { color: rgba(255, 255, 255, 0.45); } html[data-theme="dark"] .composer-attach { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.65); } /* v316: .quick-replies + .qr-chip dark override DELETED — chips removed. */ html[data-theme="dark"] .btn-primary { background: rgba(255, 255, 255, 0.10); color: #ffffff; border-color: rgba(255, 255, 255, 0.14); } html[data-theme="dark"] .btn-primary:hover { background: rgba(255, 255, 255, 0.16); } html[data-theme="dark"] .btn-secondary { background: rgba(255, 255, 255, 0.04); color: #ffffff; border-color: rgba(255, 255, 255, 0.10); } html[data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, 0.06); color: #ffffff; border-color: rgba(255, 255, 255, 0.14); } html[data-theme="dark"] .btn-ghost:hover, html[data-theme="dark"] .btn-ghost:active, html[data-theme="dark"] .btn-ghost:focus { background: rgba(255, 255, 255, 0.12); color: #ffffff; } html[data-theme="dark"] .volunteer-btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: #ffffff; } html[data-theme="dark"] .volunteer-btn:hover { border-color: rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .volunteer-btn:active { background: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .volunteer-btn svg { color: #ffffff; } html[data-theme="dark"] .new-msg-btn { background: var(--team-primary, #22c55e); color: #ffffff; } html[data-theme="dark"] .field-card-dir { background: rgba(255, 255, 255, 0.10); color: #ffffff; } html[data-theme="dark"] .gh-back { border-color: rgba(255, 255, 255, 0.14); color: #ffffff; background: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .lineup-card > div { color: rgba(255, 255, 255, 0.65); } html[data-theme="dark"] .gh-action, html[data-theme="dark"] .gh-cta { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: #ffffff; } /* v312 venue-card dark mode — Directions pill inverts white-on-dark the same way the old .field-map-directions did. */ html[data-theme="dark"] .venue-card-cta { background: rgba(255, 255, 255, 0.10); color: #ffffff; } html[data-theme="dark"] .venue-card-map { background: rgba(255, 255, 255, 0.04); } /* Keep #gameFieldMap (used by athlete/game.html, separate surface). */ html[data-theme="dark"] #gameFieldMap, html[data-theme="dark"] #weekScheduleMap { background: rgba(255, 255, 255, 0.04); } html[data-theme="dark"] #heroFieldMap.no-coords-fallback > div, html[data-theme="dark"] #gameFieldMap.no-coords-fallback > div { background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(59, 130, 246, 0.06)); color: rgba(255, 255, 255, 0.65); } html[data-theme="dark"] .gh-cta-primary, html[data-theme="dark"] .gh-cta-secondary { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: rgba(255, 255, 255, 0.10); } html[data-theme="dark"] .msg-row:not(.self) .msg-bubble { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); color: #ffffff; } html[data-theme="dark"] .msg-sender { color: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] .msg-time { color: rgba(255, 255, 255, 0.35); } html[data-theme="dark"] .day-divider span { color: rgba(255, 255, 255, 0.45); } html[data-theme="dark"] .day-divider::before, html[data-theme="dark"] .day-divider::after { background: rgba(255, 255, 255, 0.10); opacity: 1; } html[data-theme="dark"] .msg-read-receipt { color: rgba(255, 255, 255, 0.55); opacity: 0.9; } html[data-theme="dark"] .venue-card, html[data-theme="dark"] .field-card, html[data-theme="dark"] .week-map-card, html[data-theme="dark"] .settings-group, html[data-theme="dark"] .athlete-list .athlete-card, html[data-theme="dark"] .profile-card, html[data-theme="dark"] .game-card, html[data-theme="dark"] .stat-block, html[data-theme="dark"] .gbg-row, html[data-theme="dark"] .hero-card, html[data-theme="dark"] .pinned-thread, html[data-theme="dark"] .thread { background: var(--surface); border-color: var(--border); } /* Carlos May 23 feedback: stat-block-header keeps its white gradient as an intentional label band on the dark card. Text inside (Passing / Receiving / Defense + games count) needs to be DARK in dark mode so it reads on the white band — without this override --ink resolves to white and the title disappears. */ html[data-theme="dark"] .stat-block-title { color: #111; } html[data-theme="dark"] .stat-block-games { color: #555; } html[data-theme="dark"] .athlete-switcher { background: #1a1f2b; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .athlete-switcher-name { color: #ffffff; } html[data-theme="dark"] .athlete-switcher-sub { color: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] .athlete-switcher-caret { color: rgba(255, 255, 255, 0.45); } html[data-theme="dark"] .am-team { color: #ffffff; } html[data-theme="dark"] .am-athlete { color: rgba(255, 255, 255, 0.65); } html[data-theme="dark"] .am-header { color: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] .am-add { color: rgba(255, 255, 255, 0.75); } html[data-theme="dark"] .am-add:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .am-row:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .am-divider { background: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .am-logo { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); } html[data-theme="dark"] .am-row.active { background: color-mix(in srgb, var(--team-primary, #1d4ed8) 16%, transparent); } html[data-theme="dark"] .theme-seg { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .filter-pill { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); } html[data-theme="dark"] .filter-pill.active { background: var(--team-primary, #22c55e); color: #ffffff; border-color: transparent; } html[data-theme="dark"] .filter-time-btn.active { background: var(--team-primary, #22c55e); color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .filter-time-btn { color: rgba(255, 255, 255, 0.78); } html[data-theme="dark"] .filter-type-btn { color: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] .filter-type-btn.active { color: #ffffff; } html[data-theme="dark"] .filter-type-sep { color: rgba(255, 255, 255, 0.25); } html[data-theme="dark"] #sc-fg-toast { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30); } /* ─── Block 2: auto + OS dark ───────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { html[data-theme="auto"] .app-header, html[data-theme="auto"] .thread-header, html[data-theme="auto"] .game-header, html:not([data-theme]) .app-header, html:not([data-theme]) .thread-header, html:not([data-theme]) .game-header { background: rgba(18, 22, 31, 0.92); border-bottom-color: rgba(255, 255, 255, 0.06); } html[data-theme="auto"] .bottom-nav, html:not([data-theme]) .bottom-nav { background: rgba(18, 22, 31, 0.94); border-top-color: rgba(255, 255, 255, 0.06); } html[data-theme="auto"] nav.bottom-nav .bn-item, html:not([data-theme]) nav.bottom-nav .bn-item { color: rgba(255, 255, 255, 0.55); } html[data-theme="auto"] nav.bottom-nav .bn-item svg, html:not([data-theme]) nav.bottom-nav .bn-item svg { stroke: rgba(255, 255, 255, 0.55); } html[data-theme="auto"] nav.bottom-nav .bn-item.active, html:not([data-theme]) nav.bottom-nav .bn-item.active { color: #ffffff; } html[data-theme="auto"] nav.bottom-nav .bn-item.active svg, html:not([data-theme]) nav.bottom-nav .bn-item.active svg { stroke: #ffffff; } /* v315 — composer is now a unified rounded CARD; --surface handles its bg in all themes. composer-input inherits the card's surface and just sets text color. */ html[data-theme="auto"] .composer-input, html:not([data-theme]) .composer-input { color: #ffffff; } html[data-theme="auto"] .composer-input::placeholder, html:not([data-theme]) .composer-input::placeholder { color: rgba(255, 255, 255, 0.45); } html[data-theme="auto"] .composer-attach, html:not([data-theme]) .composer-attach { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.65); } /* v316: .qr-chip auto-dark override DELETED — chips removed. */ html[data-theme="auto"] .btn-primary, html:not([data-theme]) .btn-primary { background: rgba(255, 255, 255, 0.10); color: #ffffff; border-color: rgba(255, 255, 255, 0.14); } html[data-theme="auto"] .btn-primary:hover, html:not([data-theme]) .btn-primary:hover { background: rgba(255, 255, 255, 0.16); } html[data-theme="auto"] .btn-secondary, html:not([data-theme]) .btn-secondary { background: rgba(255, 255, 255, 0.04); color: #ffffff; border-color: rgba(255, 255, 255, 0.10); } html[data-theme="auto"] .btn-ghost, html:not([data-theme]) .btn-ghost { background: rgba(255, 255, 255, 0.06); color: #ffffff; border-color: rgba(255, 255, 255, 0.14); } html[data-theme="auto"] .btn-ghost:hover, html[data-theme="auto"] .btn-ghost:active, html[data-theme="auto"] .btn-ghost:focus, html:not([data-theme]) .btn-ghost:hover, html:not([data-theme]) .btn-ghost:active, html:not([data-theme]) .btn-ghost:focus { background: rgba(255, 255, 255, 0.12); color: #ffffff; } html[data-theme="auto"] .volunteer-btn, html:not([data-theme]) .volunteer-btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: #ffffff; } html[data-theme="auto"] .volunteer-btn:hover, html:not([data-theme]) .volunteer-btn:hover { border-color: rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.08); } html[data-theme="auto"] .volunteer-btn:active, html:not([data-theme]) .volunteer-btn:active { background: rgba(255, 255, 255, 0.12); } html[data-theme="auto"] .volunteer-btn svg, html:not([data-theme]) .volunteer-btn svg { color: #ffffff; } html[data-theme="auto"] .new-msg-btn, html:not([data-theme]) .new-msg-btn { background: var(--team-primary, #22c55e); color: #ffffff; } html[data-theme="auto"] .field-card-dir, html:not([data-theme]) .field-card-dir { background: rgba(255, 255, 255, 0.10); color: #ffffff; } html[data-theme="auto"] .gh-back, html:not([data-theme]) .gh-back { border-color: rgba(255, 255, 255, 0.14); color: #ffffff; background: rgba(255, 255, 255, 0.04); } html[data-theme="auto"] .lineup-card > div, html:not([data-theme]) .lineup-card > div { color: rgba(255, 255, 255, 0.65); } html[data-theme="auto"] .gh-action, html[data-theme="auto"] .gh-cta, html:not([data-theme]) .gh-action, html:not([data-theme]) .gh-cta { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: #ffffff; } /* v312 venue-card dark mode (auto + no-theme branches) */ html[data-theme="auto"] .venue-card-cta, html:not([data-theme]) .venue-card-cta { background: rgba(255, 255, 255, 0.10); color: #ffffff; } html[data-theme="auto"] .venue-card-map, html:not([data-theme]) .venue-card-map { background: rgba(255, 255, 255, 0.04); } /* game.html surface kept */ html[data-theme="auto"] #gameFieldMap, html[data-theme="auto"] #weekScheduleMap, html:not([data-theme]) #gameFieldMap, html:not([data-theme]) #weekScheduleMap { background: rgba(255, 255, 255, 0.04); } html[data-theme="auto"] #gameFieldMap.no-coords-fallback > div, html:not([data-theme]) #gameFieldMap.no-coords-fallback > div { background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(59, 130, 246, 0.06)); color: rgba(255, 255, 255, 0.65); } html[data-theme="auto"] .gh-cta-primary, html[data-theme="auto"] .gh-cta-secondary, html:not([data-theme]) .gh-cta-primary, html:not([data-theme]) .gh-cta-secondary { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: rgba(255, 255, 255, 0.10); } html[data-theme="auto"] .msg-row:not(.self) .msg-bubble, html:not([data-theme]) .msg-row:not(.self) .msg-bubble { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); color: #ffffff; } html[data-theme="auto"] .msg-sender, html:not([data-theme]) .msg-sender { color: rgba(255, 255, 255, 0.55); } html[data-theme="auto"] .msg-time, html:not([data-theme]) .msg-time { color: rgba(255, 255, 255, 0.35); } html[data-theme="auto"] .day-divider span, html:not([data-theme]) .day-divider span { color: rgba(255, 255, 255, 0.45); } html[data-theme="auto"] .day-divider::before, html[data-theme="auto"] .day-divider::after, html:not([data-theme]) .day-divider::before, html:not([data-theme]) .day-divider::after { background: rgba(255, 255, 255, 0.10); opacity: 1; } html[data-theme="auto"] .msg-read-receipt, html:not([data-theme]) .msg-read-receipt { color: rgba(255, 255, 255, 0.55); opacity: 0.9; } html[data-theme="auto"] .venue-card, html[data-theme="auto"] .field-card, html[data-theme="auto"] .week-map-card, html[data-theme="auto"] .settings-group, html[data-theme="auto"] .athlete-list .athlete-card, html[data-theme="auto"] .profile-card, html[data-theme="auto"] .game-card, html[data-theme="auto"] .stat-block, html[data-theme="auto"] .gbg-row, html[data-theme="auto"] .hero-card, html[data-theme="auto"] .pinned-thread, html[data-theme="auto"] .thread, html:not([data-theme]) .venue-card, html:not([data-theme]) .field-card, html:not([data-theme]) .week-map-card, html:not([data-theme]) .settings-group, html:not([data-theme]) .athlete-list .athlete-card, html:not([data-theme]) .profile-card, html:not([data-theme]) .game-card, html:not([data-theme]) .stat-block, html:not([data-theme]) .gbg-row, html:not([data-theme]) .hero-card, html:not([data-theme]) .pinned-thread, html:not([data-theme]) .thread { background: var(--surface); border-color: var(--border); } /* Same stat-block-header fix as data-theme="dark" branch above — white gradient label band needs dark text in dark mode. */ html[data-theme="auto"] .stat-block-title, html:not([data-theme]) .stat-block-title { color: #111; } html[data-theme="auto"] .stat-block-games, html:not([data-theme]) .stat-block-games { color: #555; } html[data-theme="auto"] .athlete-switcher, html:not([data-theme]) .athlete-switcher { background: #1a1f2b; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } html[data-theme="auto"] .athlete-switcher-name, html:not([data-theme]) .athlete-switcher-name { color: #ffffff; } html[data-theme="auto"] .athlete-switcher-sub, html:not([data-theme]) .athlete-switcher-sub { color: rgba(255, 255, 255, 0.55); } html[data-theme="auto"] .athlete-switcher-caret, html:not([data-theme]) .athlete-switcher-caret { color: rgba(255, 255, 255, 0.45); } html[data-theme="auto"] .am-team, html:not([data-theme]) .am-team { color: #ffffff; } html[data-theme="auto"] .am-athlete, html:not([data-theme]) .am-athlete { color: rgba(255, 255, 255, 0.65); } html[data-theme="auto"] .am-header, html:not([data-theme]) .am-header { color: rgba(255, 255, 255, 0.55); } html[data-theme="auto"] .am-add, html:not([data-theme]) .am-add { color: rgba(255, 255, 255, 0.75); } html[data-theme="auto"] .am-add:hover, html:not([data-theme]) .am-add:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); } html[data-theme="auto"] .am-row:hover, html:not([data-theme]) .am-row:hover { background: rgba(255, 255, 255, 0.06); } html[data-theme="auto"] .am-divider, html:not([data-theme]) .am-divider { background: rgba(255, 255, 255, 0.08); } html[data-theme="auto"] .am-logo, html:not([data-theme]) .am-logo { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); } html[data-theme="auto"] .am-row.active, html:not([data-theme]) .am-row.active { background: color-mix(in srgb, var(--team-primary, #1d4ed8) 16%, transparent); } html[data-theme="auto"] .theme-seg, html:not([data-theme]) .theme-seg { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } html[data-theme="auto"] .filter-pill, html:not([data-theme]) .filter-pill { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); } html[data-theme="auto"] .filter-pill.active, html:not([data-theme]) .filter-pill.active { background: var(--team-primary, #22c55e); color: #ffffff; border-color: transparent; } html[data-theme="auto"] .filter-time-btn.active, html:not([data-theme]) .filter-time-btn.active { background: var(--team-primary, #22c55e); color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } html[data-theme="auto"] .filter-time-btn, html:not([data-theme]) .filter-time-btn { color: rgba(255, 255, 255, 0.78); } html[data-theme="auto"] .filter-type-btn, html:not([data-theme]) .filter-type-btn { color: rgba(255, 255, 255, 0.55); } html[data-theme="auto"] .filter-type-btn.active, html:not([data-theme]) .filter-type-btn.active { color: #ffffff; } html[data-theme="auto"] .filter-type-sep, html:not([data-theme]) .filter-type-sep { color: rgba(255, 255, 255, 0.25); } html[data-theme="auto"] #sc-fg-toast, html:not([data-theme]) #sc-fg-toast { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30); } }