:root { --bg: #0b1220; --card: #141c2e; --card-hover: #1b2540; --border: #23304d; --text: #eef1f8; --text-dim: #9aa5bd; /* #4c8dff (the old value) only hits 3.2:1 contrast with white text - darkened per the accessibility audit so every solid-fill + white-text use (reveal button, active language toggle) clears WCAG 1.4.3 (4.5:1). */ --accent: #3968d8; --accent-dim: #2c4a86; --amber: #e2a63d; --amber-bg: #3a2c10; --green: #3fbf76; --correct-bg: #103a26; --red: #e2593d; /* Paired with --red the same way --correct-bg is paired with --green - used by the spaced-repetition "I didn't know it" self-assessment button (DN-16) so its fill+text combo has the same contrast-checked shape as the existing correct/wrong visual language, not an ad-hoc new color. */ --wrong-bg: #3a1c16; --header-bg: rgba(11, 18, 32, 0.92); --badge-topic-text: #cfe0ff; --badge-neutral-bg: #24304a; --focus-ring: #7ab0ff; --radius: 12px; font-size: 16px; } /* Light theme - toggled via [data-theme="light"] on . Colors re-tuned (not just inverted) so contrast and the amber/green distinction both hold up on a white background too - see UX review re: color-only signalling. */ [data-theme="light"] { --bg: #f5f7fb; --card: #ffffff; --card-hover: #eef2fb; --border: #d7deec; --text: #1a2233; --text-dim: #5b6478; --accent: #2f6fed; --accent-dim: #dce8ff; /* #92610a (the old value) hit only 4.14:1 against --badge-neutral-bg for the bold ~13.6px exam-timer low-time text - just under the 4.5:1 threshold for text below the "large/bold" 14px cutoff. Darkened slightly per the 2026-08-05 UX review, same reasoning as --green below. */ --amber: #8a5b09; --amber-bg: #fdf1da; /* #17874f (the old value) hits only 4.08:1 against --correct-bg for the bold ~12.5px correct-mark text, just under the 4.5:1 threshold for text that size/weight - darkened per the accessibility audit. */ --green: #0f6b3d; --correct-bg: #e5f7ed; --red: #b8402a; --wrong-bg: #fbe8e3; --header-bg: rgba(245, 247, 251, 0.92); --badge-topic-text: #1e3a8a; --badge-neutral-bg: #dde3ee; --focus-ring: #1e4fd6; } * { box-sizing: border-box; } /* Explicit focus style - the app previously relied entirely on each browser's unstyled default outline. Verified in Chromium this happened to look fine (its "auto" outline paints as an inverted-color ring), but nothing pinned that down, and this app is mostly used on mobile Safari, whose default focus ring behaves differently and wasn't verifiable in this environment. Defined once so it's consistent and guaranteed everywhere. */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color 0.15s ease, color 0.15s ease; } .theme-toggle { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; width: 44px; height: 44px; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } header { position: sticky; top: 0; z-index: 10; background: var(--header-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); /* DN-23: safe-area-inset padding for notched phones (the viewport meta already has viewport-fit=cover in app.html, so these env() values resolve to real insets rather than 0 on devices that have one - a no-op elsewhere). Additive via calc() so the existing spacing is a floor, not replaced. Top/left/right here since header sits at the very top of the layout; main below gets the bottom inset. */ padding: calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left)); } .title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } h1 { font-size: 1.15rem; margin: 0; font-weight: 700; letter-spacing: -0.01em; } .subtitle { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; } /* Replaced the old two-button DE/EN toggle with a