/** * Kridopia appearance: light / dark / system (aligned with the Android app). * Load after kids-ui.css. html[data-dk-theme] is set in (FOUC) + kids-theme.js. */ /* ----- Shared token blocks (reused for :root / light / system-light / dark / system-dark) ----- */ :root, html[data-dk-theme="light"] { color-scheme: light; --dk-ink: #14213d; --dk-ink-2: #2b3a67; --dk-stroke: rgba(20, 33, 61, 0.12); --dk-shadow: 0 14px 40px rgba(15, 23, 42, 0.1); --dk-shadow-2: 0 22px 60px rgba(15, 23, 42, 0.14); --dk-page-bg: radial-gradient(900px 520px at 8% -5%, rgba(251, 191, 36, 0.28), transparent 52%), radial-gradient(800px 480px at 92% 8%, rgba(139, 92, 246, 0.18), transparent 50%), radial-gradient(1100px 700px at 10% 0%, rgba(47, 125, 255, 0.22), transparent 55%), radial-gradient(900px 600px at 90% 12%, rgba(37, 199, 217, 0.18), transparent 55%), radial-gradient(900px 600px at 35% 98%, rgba(34, 197, 94, 0.16), transparent 55%), linear-gradient(185deg, #f0f7ff 0%, #e8f4fc 35%, #fdf8ff 70%, #fff9ed 100%); --dk-page-pseudo-bg: radial-gradient(circle at 20px 20px, rgba(20, 33, 61, 0.06) 2px, transparent 3px) 0 0 / 34px 34px, radial-gradient(900px 240px at -10% 10%, rgba(255, 255, 255, 0.65), transparent 60%), radial-gradient(760px 220px at 110% 20%, rgba(255, 255, 255, 0.55), transparent 60%), radial-gradient(820px 240px at -5% 80%, rgba(255, 255, 255, 0.45), transparent 60%), radial-gradient(760px 220px at 105% 85%, rgba(255, 255, 255, 0.42), transparent 60%); --dk-nav-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7)); --dk-nav-ghost-bg: rgba(255, 255, 255, 0.94); --dk-nav-ghost-color: #1f3d77; --dk-nav-ghost-border: rgba(20, 33, 61, 0.12); --dk-nav-ghost-hover-bg: rgba(47, 125, 255, 0.1); --dk-nav-ghost-hover-border: rgba(47, 125, 255, 0.28); --dk-nav-ghost-hover-color: #143a7a; --dk-glass-88: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7)); --dk-glass-92: rgba(255, 255, 255, 0.92); --dk-glass-94: rgba(255, 255, 255, 0.94); --dk-glass-86: rgba(255, 255, 255, 0.86); --dk-glass-70: rgba(255, 255, 255, 0.7); --dk-glass-65: rgba(255, 255, 255, 0.65); --dk-auth-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74)); --dk-auth-header-bg: radial-gradient(520px 220px at 15% 0%, rgba(251, 191, 36, 0.28), transparent 60%), radial-gradient(520px 220px at 90% 10%, rgba(47, 125, 255, 0.22), transparent 60%); --dk-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)); --dk-panel-reward-bg: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(255, 255, 255, 0.86)); --dk-game-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8)); --dk-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84)); --dk-modal-border: rgba(255, 255, 255, 0.22); --dk-modal-divider: rgba(20, 33, 61, 0.1); --dk-category-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72)); --dk-home-hero-border: 2px solid rgba(255, 255, 255, 0.65); --dk-home-hero-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.94) 0%, rgba(224, 242, 254, 0.88) 38%, rgba(237, 233, 254, 0.9) 72%, rgba(254, 249, 231, 0.92) 100% ); --dk-home-hero-shadow: var(--dk-shadow), 0 0 40px rgba(59, 130, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); --dk-grid-item-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)); --dk-quest-bg: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(255, 255, 255, 0.86)); --dk-section-bg: rgba(255, 255, 255, 0.7); --dk-admin-mode-bg: radial-gradient(700px 240px at 10% 0%, rgba(139, 92, 246, 0.22), transparent 60%), radial-gradient(700px 240px at 90% 10%, rgba(47, 125, 255, 0.18), transparent 60%), rgba(255, 255, 255, 0.7); --dk-input-border: rgba(20, 33, 61, 0.18); --dk-text-95: rgba(43, 58, 103, 0.95); --dk-text-92: rgba(43, 58, 103, 0.92); --dk-text-98: rgba(43, 58, 103, 0.98); --dk-text-84: rgba(43, 58, 103, 0.84); --dk-text-88: rgba(43, 58, 103, 0.88); --dk-text-72: rgba(43, 58, 103, 0.72); --dk-text-lead: rgba(20, 33, 61, 0.88); --dk-badge-label: rgba(43, 58, 103, 0.92); --dk-badge-value-bg: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(47, 125, 255, 0.14)); --dk-forgot-link: rgba(30, 90, 220, 1); --dk-forgot-link-hover: rgba(20, 70, 190, 1); --dk-meter-track: rgba(20, 33, 61, 0.1); --dk-meter-border: rgba(20, 33, 61, 0.12); --dk-shine: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); --dk-logo-link-border: rgba(20, 33, 61, 0.11); --dk-home-cat-bg: #ffffff; --dk-home-cat-border: rgba(20, 33, 61, 0.1); --dk-home-cat-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9) inset; --dk-home-cat-media-bg: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%); --dk-home-cat-title-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); --dk-home-cat-title-color: #14213d; } @media (prefers-color-scheme: light) { html[data-dk-theme="system"] { color-scheme: light; --dk-ink: #14213d; --dk-ink-2: #2b3a67; --dk-stroke: rgba(20, 33, 61, 0.12); --dk-shadow: 0 14px 40px rgba(15, 23, 42, 0.1); --dk-shadow-2: 0 22px 60px rgba(15, 23, 42, 0.14); --dk-page-bg: radial-gradient(900px 520px at 8% -5%, rgba(251, 191, 36, 0.28), transparent 52%), radial-gradient(800px 480px at 92% 8%, rgba(139, 92, 246, 0.18), transparent 50%), radial-gradient(1100px 700px at 10% 0%, rgba(47, 125, 255, 0.22), transparent 55%), radial-gradient(900px 600px at 90% 12%, rgba(37, 199, 217, 0.18), transparent 55%), radial-gradient(900px 600px at 35% 98%, rgba(34, 197, 94, 0.16), transparent 55%), linear-gradient(185deg, #f0f7ff 0%, #e8f4fc 35%, #fdf8ff 70%, #fff9ed 100%); --dk-page-pseudo-bg: radial-gradient(circle at 20px 20px, rgba(20, 33, 61, 0.06) 2px, transparent 3px) 0 0 / 34px 34px, radial-gradient(900px 240px at -10% 10%, rgba(255, 255, 255, 0.65), transparent 60%), radial-gradient(760px 220px at 110% 20%, rgba(255, 255, 255, 0.55), transparent 60%), radial-gradient(820px 240px at -5% 80%, rgba(255, 255, 255, 0.45), transparent 60%), radial-gradient(760px 220px at 105% 85%, rgba(255, 255, 255, 0.42), transparent 60%); --dk-nav-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7)); --dk-nav-ghost-bg: rgba(255, 255, 255, 0.94); --dk-nav-ghost-color: #1f3d77; --dk-nav-ghost-border: rgba(20, 33, 61, 0.12); --dk-nav-ghost-hover-bg: rgba(47, 125, 255, 0.1); --dk-nav-ghost-hover-border: rgba(47, 125, 255, 0.28); --dk-nav-ghost-hover-color: #143a7a; --dk-glass-88: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7)); --dk-glass-92: rgba(255, 255, 255, 0.92); --dk-glass-94: rgba(255, 255, 255, 0.94); --dk-glass-86: rgba(255, 255, 255, 0.86); --dk-glass-70: rgba(255, 255, 255, 0.7); --dk-glass-65: rgba(255, 255, 255, 0.65); --dk-auth-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74)); --dk-auth-header-bg: radial-gradient(520px 220px at 15% 0%, rgba(251, 191, 36, 0.28), transparent 60%), radial-gradient(520px 220px at 90% 10%, rgba(47, 125, 255, 0.22), transparent 60%); --dk-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)); --dk-panel-reward-bg: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(255, 255, 255, 0.86)); --dk-game-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8)); --dk-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84)); --dk-modal-border: rgba(255, 255, 255, 0.22); --dk-modal-divider: rgba(20, 33, 61, 0.1); --dk-category-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72)); --dk-home-hero-border: 2px solid rgba(255, 255, 255, 0.65); --dk-home-hero-bg: linear-gradient( 155deg, rgba(255, 255, 255, 0.94) 0%, rgba(224, 242, 254, 0.88) 38%, rgba(237, 233, 254, 0.9) 72%, rgba(254, 249, 231, 0.92) 100% ); --dk-home-hero-shadow: var(--dk-shadow), 0 0 40px rgba(59, 130, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); --dk-grid-item-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)); --dk-quest-bg: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(255, 255, 255, 0.86)); --dk-section-bg: rgba(255, 255, 255, 0.7); --dk-admin-mode-bg: radial-gradient(700px 240px at 10% 0%, rgba(139, 92, 246, 0.22), transparent 60%), radial-gradient(700px 240px at 90% 10%, rgba(47, 125, 255, 0.18), transparent 60%), rgba(255, 255, 255, 0.7); --dk-input-border: rgba(20, 33, 61, 0.18); --dk-text-95: rgba(43, 58, 103, 0.95); --dk-text-92: rgba(43, 58, 103, 0.92); --dk-text-98: rgba(43, 58, 103, 0.98); --dk-text-84: rgba(43, 58, 103, 0.84); --dk-text-88: rgba(43, 58, 103, 0.88); --dk-text-72: rgba(43, 58, 103, 0.72); --dk-text-lead: rgba(20, 33, 61, 0.88); --dk-badge-label: rgba(43, 58, 103, 0.92); --dk-badge-value-bg: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(47, 125, 255, 0.14)); --dk-forgot-link: rgba(30, 90, 220, 1); --dk-forgot-link-hover: rgba(20, 70, 190, 1); --dk-meter-track: rgba(20, 33, 61, 0.1); --dk-meter-border: rgba(20, 33, 61, 0.12); --dk-shine: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); --dk-logo-link-border: rgba(20, 33, 61, 0.11); --dk-home-cat-bg: #ffffff; --dk-home-cat-border: rgba(20, 33, 61, 0.1); --dk-home-cat-shadow: 0 12px 32px rgba(15, 23, 42, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9) inset; --dk-home-cat-media-bg: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%); --dk-home-cat-title-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); --dk-home-cat-title-color: #14213d; } } html[data-dk-theme="dark"] { color-scheme: dark; --dk-ink: #f5f2ff; --dk-ink-2: #c9c2e8; --dk-stroke: rgba(255, 255, 255, 0.14); --dk-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); --dk-shadow-2: 0 22px 60px rgba(0, 0, 0, 0.55); --dk-page-bg: radial-gradient(900px 520px at 8% -5%, rgba(251, 191, 36, 0.12), transparent 52%), radial-gradient(800px 480px at 92% 8%, rgba(139, 92, 246, 0.14), transparent 50%), radial-gradient(1100px 700px at 10% 0%, rgba(47, 125, 255, 0.12), transparent 55%), radial-gradient(900px 600px at 90% 12%, rgba(37, 199, 217, 0.1), transparent 55%), linear-gradient(185deg, #0c0a14 0%, #12101c 42%, #0f1828 100%); --dk-page-pseudo-bg: radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.06) 2px, transparent 3px) 0 0 / 34px 34px, radial-gradient(900px 240px at -10% 10%, rgba(255, 255, 255, 0.04), transparent 60%), radial-gradient(760px 220px at 110% 20%, rgba(255, 255, 255, 0.03), transparent 60%), radial-gradient(820px 240px at -5% 80%, rgba(255, 255, 255, 0.03), transparent 60%), radial-gradient(760px 220px at 105% 85%, rgba(255, 255, 255, 0.025), transparent 60%); --dk-nav-surface: linear-gradient(180deg, rgba(34, 31, 52, 0.94), rgba(22, 20, 36, 0.88)); --dk-nav-ghost-bg: rgba(40, 36, 58, 0.92); --dk-nav-ghost-color: #dbe4ff; --dk-nav-ghost-border: rgba(255, 255, 255, 0.14); --dk-nav-ghost-hover-bg: rgba(47, 125, 255, 0.18); --dk-nav-ghost-hover-border: rgba(147, 197, 253, 0.35); --dk-nav-ghost-hover-color: #eff6ff; --dk-glass-88: linear-gradient(180deg, rgba(34, 31, 52, 0.92), rgba(24, 22, 38, 0.78)); --dk-glass-92: rgba(34, 31, 52, 0.94); --dk-glass-94: rgba(40, 36, 58, 0.96); --dk-glass-86: rgba(34, 31, 52, 0.9); --dk-glass-70: rgba(28, 26, 44, 0.72); --dk-glass-65: rgba(28, 26, 44, 0.65); --dk-auth-card-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.96), rgba(24, 22, 38, 0.88)); --dk-auth-header-bg: radial-gradient(520px 220px at 15% 0%, rgba(251, 191, 36, 0.15), transparent 60%), radial-gradient(520px 220px at 90% 10%, rgba(47, 125, 255, 0.18), transparent 60%); --dk-panel-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.95), rgba(24, 22, 38, 0.82)); --dk-panel-reward-bg: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(34, 31, 52, 0.88)); --dk-game-card-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.95), rgba(28, 26, 44, 0.88)); --dk-modal-surface: linear-gradient(180deg, rgba(40, 36, 58, 0.98), rgba(28, 26, 44, 0.92)); --dk-modal-border: rgba(255, 255, 255, 0.12); --dk-modal-divider: rgba(255, 255, 255, 0.1); --dk-category-card-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.92), rgba(28, 26, 44, 0.82)); --dk-home-hero-border: 1px solid rgba(255, 255, 255, 0.14); --dk-home-hero-bg: linear-gradient(155deg, rgba(34, 31, 52, 0.95) 0%, rgba(30, 58, 88, 0.55) 45%, rgba(34, 31, 52, 0.92) 100%); --dk-home-hero-shadow: var(--dk-shadow), 0 0 36px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); --dk-grid-item-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.94), rgba(28, 26, 44, 0.86)); --dk-quest-bg: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(34, 31, 52, 0.88)); --dk-section-bg: rgba(28, 26, 44, 0.72); --dk-admin-mode-bg: radial-gradient(700px 240px at 10% 0%, rgba(139, 92, 246, 0.2), transparent 60%), radial-gradient(700px 240px at 90% 10%, rgba(47, 125, 255, 0.16), transparent 60%), rgba(28, 26, 44, 0.75); --dk-input-border: rgba(255, 255, 255, 0.18); --dk-text-95: rgba(230, 228, 248, 0.95); --dk-text-92: rgba(210, 205, 240, 0.9); --dk-text-98: rgba(245, 242, 255, 0.98); --dk-text-84: rgba(190, 185, 225, 0.88); --dk-text-88: rgba(200, 195, 235, 0.9); --dk-text-72: rgba(170, 165, 210, 0.78); --dk-text-lead: rgba(220, 218, 245, 0.9); --dk-badge-label: rgba(220, 218, 245, 0.92); --dk-badge-value-bg: linear-gradient(180deg, rgba(139, 92, 246, 0.35), rgba(47, 125, 255, 0.28)); --dk-forgot-link: #93c5fd; --dk-forgot-link-hover: #bfdbfe; --dk-meter-track: rgba(255, 255, 255, 0.08); --dk-meter-border: rgba(255, 255, 255, 0.12); --dk-shine: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%); --dk-logo-link-border: rgba(255, 255, 255, 0.12); --dk-home-cat-bg: linear-gradient(180deg, rgba(40, 36, 58, 0.98) 0%, rgba(28, 26, 44, 0.96) 100%); --dk-home-cat-border: rgba(255, 255, 255, 0.14); --dk-home-cat-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); --dk-home-cat-media-bg: linear-gradient(145deg, rgba(48, 44, 72, 0.95) 0%, rgba(32, 30, 52, 0.92) 100%); --dk-home-cat-title-bg: linear-gradient(180deg, rgba(44, 40, 66, 0.98) 0%, rgba(30, 28, 48, 0.98) 100%); --dk-home-cat-title-color: #f5f2ff; } @media (prefers-color-scheme: dark) { html[data-dk-theme="system"] { color-scheme: dark; --dk-ink: #f5f2ff; --dk-ink-2: #c9c2e8; --dk-stroke: rgba(255, 255, 255, 0.14); --dk-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); --dk-shadow-2: 0 22px 60px rgba(0, 0, 0, 0.55); --dk-page-bg: radial-gradient(900px 520px at 8% -5%, rgba(251, 191, 36, 0.12), transparent 52%), radial-gradient(800px 480px at 92% 8%, rgba(139, 92, 246, 0.14), transparent 50%), radial-gradient(1100px 700px at 10% 0%, rgba(47, 125, 255, 0.12), transparent 55%), radial-gradient(900px 600px at 90% 12%, rgba(37, 199, 217, 0.1), transparent 55%), linear-gradient(185deg, #0c0a14 0%, #12101c 42%, #0f1828 100%); --dk-page-pseudo-bg: radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.06) 2px, transparent 3px) 0 0 / 34px 34px, radial-gradient(900px 240px at -10% 10%, rgba(255, 255, 255, 0.04), transparent 60%), radial-gradient(760px 220px at 110% 20%, rgba(255, 255, 255, 0.03), transparent 60%), radial-gradient(820px 240px at -5% 80%, rgba(255, 255, 255, 0.03), transparent 60%), radial-gradient(760px 220px at 105% 85%, rgba(255, 255, 255, 0.025), transparent 60%); --dk-nav-surface: linear-gradient(180deg, rgba(34, 31, 52, 0.94), rgba(22, 20, 36, 0.88)); --dk-nav-ghost-bg: rgba(40, 36, 58, 0.92); --dk-nav-ghost-color: #dbe4ff; --dk-nav-ghost-border: rgba(255, 255, 255, 0.14); --dk-nav-ghost-hover-bg: rgba(47, 125, 255, 0.18); --dk-nav-ghost-hover-border: rgba(147, 197, 253, 0.35); --dk-nav-ghost-hover-color: #eff6ff; --dk-glass-88: linear-gradient(180deg, rgba(34, 31, 52, 0.92), rgba(24, 22, 38, 0.78)); --dk-glass-92: rgba(34, 31, 52, 0.94); --dk-glass-94: rgba(40, 36, 58, 0.96); --dk-glass-86: rgba(34, 31, 52, 0.9); --dk-glass-70: rgba(28, 26, 44, 0.72); --dk-glass-65: rgba(28, 26, 44, 0.65); --dk-auth-card-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.96), rgba(24, 22, 38, 0.88)); --dk-auth-header-bg: radial-gradient(520px 220px at 15% 0%, rgba(251, 191, 36, 0.15), transparent 60%), radial-gradient(520px 220px at 90% 10%, rgba(47, 125, 255, 0.18), transparent 60%); --dk-panel-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.95), rgba(24, 22, 38, 0.82)); --dk-panel-reward-bg: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(34, 31, 52, 0.88)); --dk-game-card-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.95), rgba(28, 26, 44, 0.88)); --dk-modal-surface: linear-gradient(180deg, rgba(40, 36, 58, 0.98), rgba(28, 26, 44, 0.92)); --dk-modal-border: rgba(255, 255, 255, 0.12); --dk-modal-divider: rgba(255, 255, 255, 0.1); --dk-category-card-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.92), rgba(28, 26, 44, 0.82)); --dk-home-hero-border: 1px solid rgba(255, 255, 255, 0.14); --dk-home-hero-bg: linear-gradient(155deg, rgba(34, 31, 52, 0.95) 0%, rgba(30, 58, 88, 0.55) 45%, rgba(34, 31, 52, 0.92) 100%); --dk-home-hero-shadow: var(--dk-shadow), 0 0 36px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); --dk-grid-item-bg: linear-gradient(180deg, rgba(34, 31, 52, 0.94), rgba(28, 26, 44, 0.86)); --dk-quest-bg: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(34, 31, 52, 0.88)); --dk-section-bg: rgba(28, 26, 44, 0.72); --dk-admin-mode-bg: radial-gradient(700px 240px at 10% 0%, rgba(139, 92, 246, 0.2), transparent 60%), radial-gradient(700px 240px at 90% 10%, rgba(47, 125, 255, 0.16), transparent 60%), rgba(28, 26, 44, 0.75); --dk-input-border: rgba(255, 255, 255, 0.18); --dk-text-95: rgba(230, 228, 248, 0.95); --dk-text-92: rgba(210, 205, 240, 0.9); --dk-text-98: rgba(245, 242, 255, 0.98); --dk-text-84: rgba(190, 185, 225, 0.88); --dk-text-88: rgba(200, 195, 235, 0.9); --dk-text-72: rgba(170, 165, 210, 0.78); --dk-text-lead: rgba(220, 218, 245, 0.9); --dk-badge-label: rgba(220, 218, 245, 0.92); --dk-badge-value-bg: linear-gradient(180deg, rgba(139, 92, 246, 0.35), rgba(47, 125, 255, 0.28)); --dk-forgot-link: #93c5fd; --dk-forgot-link-hover: #bfdbfe; --dk-meter-track: rgba(255, 255, 255, 0.08); --dk-meter-border: rgba(255, 255, 255, 0.12); --dk-shine: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%); --dk-logo-link-border: rgba(255, 255, 255, 0.12); --dk-home-cat-bg: linear-gradient(180deg, rgba(40, 36, 58, 0.98) 0%, rgba(28, 26, 44, 0.96) 100%); --dk-home-cat-border: rgba(255, 255, 255, 0.14); --dk-home-cat-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); --dk-home-cat-media-bg: linear-gradient(145deg, rgba(48, 44, 72, 0.95) 0%, rgba(32, 30, 52, 0.92) 100%); --dk-home-cat-title-bg: linear-gradient(180deg, rgba(44, 40, 66, 0.98) 0%, rgba(30, 28, 48, 0.98) 100%); --dk-home-cat-title-color: #f5f2ff; } } /* Hide gamification HUD on home (script also skips init) */ body.dk-kids.dk-page-home #dk_hud{ display: none !important; } /* ----- Nav theme control ----- */ body.dk-kids .dk-theme-switch { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 3px; border-radius: 999px; border: 1px solid var(--dk-stroke); background: var(--dk-glass-65); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); } body.dk-kids .dk-theme-switch__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--dk-ink); cursor: pointer; transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } body.dk-kids .dk-theme-switch__btn:hover { background: rgba(47, 125, 255, 0.12); } body.dk-kids .dk-theme-switch__btn:active { transform: scale(0.96); } body.dk-kids .dk-theme-switch__btn[aria-pressed="true"] { background: rgba(47, 125, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(47, 125, 255, 0.35); } body.dk-kids .dk-theme-switch__btn svg { display: block; width: 18px; height: 18px; }