:root {
  color-scheme: light;
  --navy: #12314f;
  --navy-2: #1b466d;
  --sea: #0f8b8d;
  --sea-dark: #087173;
  --sand: #f5f1e8;
  --paper: #fffefb;
  --ink: #16202a;
  --muted: #62707c;
  --line: #d7dde2;
  --pale-blue: #edf5fa;
  --green: #287a54;
  --red: #a33c32;
  --orange: #f28c28;
  --yellow: #f5a23a;
  --shadow: 0 18px 45px rgba(18, 49, 79, 0.12);
  font-family: Inter, Aptos, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(15, 139, 141, 0.08), transparent 42%),
    var(--sand);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(15, 139, 141, 0.35);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--navy);
  color: white;
  border-radius: 0.6rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus { top: 1rem; }

.welcome-open { overflow: hidden; }
.welcome-open .skip-link { visibility: hidden; }
.brand-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  background: #073c42;
  overflow: auto;
  color: #12314f;
}
.brand-splash[hidden] { display: none; }
.welcome-portrait {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #073c42;
}
.welcome-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0;
  z-index: -2;
}
.welcome-image.ready { opacity: 1; }
.welcome-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,rgba(7,60,66,0) 58%,rgba(7,60,66,.80) 100%);
}
.splash-copy {
  padding: max(24px, env(safe-area-inset-top)) 24px 28px;
  text-align: center;
  background: transparent;
}
.splash-logo {
  display: block;
  width: clamp(150px, 45vw, 230px);
  max-width: 75%;
  height: auto;
  margin: 0 auto 12px;
}
.splash-promise {
  margin: 0;
  color: #12314f;
  font-size: clamp(1.2rem, 4.8vw, 1.5rem);
  font-weight: 650;
  line-height: 1.3;
}
.welcome-action {
  padding: 24px 24px max(32px, env(safe-area-inset-bottom));
  text-align: center;
}
.welcome-button {
  width: 100%;
  max-width: 320px;
  min-height: 56px;
  padding: 15px 24px;
  border: 0;
  border-radius: 14px;
  background: #12314f;
  box-shadow: inset 0 0 0 2px #fffefb;
  color: #fffefb;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
}
.welcome-button:focus-visible { outline: none; background: #1b466d; }
.welcome-status { margin: 0 0 12px; color: #fffefb; font-size: 1rem; line-height: 1.4; }
.welcome-status:empty { display: none; }
@media (min-width: 700px) {
  .welcome-portrait { width: min(100%, 66.666667dvh); }
  .welcome-image { object-position: 50% 50%; }
}
@media (max-height: 540px) {
  .splash-copy { padding-top: 12px; padding-bottom: 12px; }
  .splash-logo { width: 130px; margin-bottom: 6px; }
  .splash-promise { font-size: 1.125rem; }
  .welcome-action { padding-top: 12px; padding-bottom: 16px; }
}

.app-shell {
  width: min(100% - 2rem, 820px);
  margin: 0 auto;
  padding: 1.1rem 0 calc(2rem + env(safe-area-inset-bottom));
  overflow-x: clip;
}

.app-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  margin: 0.35rem 0 1.35rem;
  padding: clamp(0.72rem, 3vw, 1rem) clamp(1rem, 4vw, 1.6rem);
  border-radius: 1.25rem;
  border: 1px solid rgba(18,49,79,0.12);
  background: #fff8ec;
  box-shadow: 0 10px 25px rgba(18, 49, 79, 0.18);
}
.app-header::after {
  content: "";
  position: absolute;
  left: 2rem;
  bottom: -0.7rem;
  width: 1.45rem;
  height: 1.45rem;
  background: #fff8ec;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.brand-heading { min-width: 0; }
.header-logo { display: block; width: clamp(9.5rem, 34vw, 12rem); height: auto; }
.menu-button {
  flex: 0 0 2rem;
  display: grid;
  place-content: center;
  gap: 0.3rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.menu-button span { display: block; width: 1.2rem; height: 2px; border-radius: 2px; background: var(--navy); }

.eyebrow {
  margin: 0 0 0.15rem;
  color: var(--sea-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.12; }
h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
h2 { font-size: clamp(1.45rem, 4vw, 2rem); }
h3 { font-size: 1.35rem; }

.lower-progress {
  min-width: 175px;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(18, 49, 79, 0.12);
  border-radius: 0.85rem;
  background: rgba(255, 254, 251, 0.75);
  color: var(--muted);
  font-size: 0.9rem;
}
.lower-progress strong { color: var(--navy); font-size: inherit; }
.achievement-title { margin: 0; color: var(--navy); font-size: 0.95rem; font-weight: 800; }
.achievement-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.achievement-count { margin-left: 0.35rem; color: var(--muted); font-size: inherit; font-weight: 500; font-variant-numeric: tabular-nums; }
.achievement-heading .text-button { color: var(--navy-2); font-size: 0.95rem; text-decoration: none; }
.progress-track {
  height: 0.45rem;
  margin-top: 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(18, 49, 79, 0.12);
}
.progress-track div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sea), #34b7a2);
  transition: width 220ms ease;
}

.primary-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding: 0.4rem;
  border: 1px solid rgba(18, 49, 79, 0.13);
  border-radius: 1rem;
  background: rgba(255, 254, 251, 0.93);
  box-shadow: 0 7px 22px rgba(18, 49, 79, 0.08);
  backdrop-filter: blur(14px);
}

.tab-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.7rem;
  border: 0;
  border-radius: 0.72rem;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
}
.tab-button.active { background: var(--navy); color: white; }

.panel {
  margin-top: 1rem;
  padding: clamp(1rem, 4vw, 1.55rem);
  border: 1px solid rgba(18, 49, 79, 0.12);
  border-radius: 1.2rem;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.panel[hidden] { display: none; }

.control-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0.75rem;
}
.control-grid.single-control { grid-template-columns: 1fr; }
label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}
select {
  width: 100%;
  min-height: 2.8rem;
  margin-top: 0.3rem;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: white;
  color: var(--ink);
}

.deck-options, .section-heading, .scenario-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.deck-options { margin: 0.9rem 0; }
.card-direction-row { margin: -0.25rem 0 0.7rem; }
.card-direction-row .segmented { width: 100%; }
.card-direction-row .segmented button { flex: 1; }

.segmented {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 0.75rem;
  background: var(--pale-blue);
}
.segmented button {
  min-height: 2.25rem;
  padding: 0.42rem 0.65rem;
  border: 0;
  border-radius: 0.58rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 750;
}
.segmented button.active { background: white; color: var(--navy); box-shadow: 0 2px 8px rgba(18,49,79,0.11); }

.counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--pale-blue);
  color: var(--navy-2);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.flashcard {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 320px;
  margin: 0.55rem 0 1rem;
  padding: 2rem clamp(1.1rem, 5vw, 2.5rem);
  overflow: visible;
  border: 1px solid #cbd8e2;
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 100% 0, rgba(15, 139, 141, 0.13), transparent 34%),
    linear-gradient(160deg, #ffffff, #f3f8fb);
  text-align: center;
  touch-action: pan-y;
  user-select: none;
}
.flashcard::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.35rem;
  background: linear-gradient(var(--sea), var(--navy));
  border-radius: 1.05rem 0 0 1.05rem;
}
.card-number { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.8rem; font-weight: 750; }
.card-prompt { margin: 0; color: var(--navy); font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 820; line-height: 1.08; }
.card-answer { margin-top: 1.2rem; }
.card-answer > p { margin: 0; font-size: 1.22rem; font-weight: 750; }
.example-block { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.example-block p { margin: 0.15rem 0; }
#exampleSpanish { font-weight: 720; }
#exampleEnglish { color: var(--muted); font-style: italic; }
.reveal-hint { position: absolute; left: 1rem; bottom: 0.6rem; margin: 0; color: var(--muted); font-size: 0.95rem; font-weight: 700; }
.known-check {
  position: absolute;
  right: 1rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
}
.known-check input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--green); }
.glitter-particle {
  position: absolute;
  right: 6rem;
  bottom: 2.2rem;
  z-index: 3;
  width: var(--glitter-size);
  height: var(--glitter-size);
  pointer-events: none;
  border-radius: var(--glitter-rounding);
  background: var(--glitter-colour);
  box-shadow: 0 0 7px var(--glitter-colour);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.4);
  animation: glitter-burst 1250ms cubic-bezier(0.14, 0.72, 0.2, 1) var(--glitter-delay) forwards;
}
@keyframes glitter-burst {
  15% { opacity: 1; }
  70% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(var(--glitter-x), var(--glitter-y)) rotate(var(--glitter-spin)) scale(0.1); }
}
.flashcard.swipe-cue { animation: swipe-cue 900ms ease-in-out; }
@keyframes swipe-cue { 0%, 100% { transform: none; } 34% { transform: translateX(-7px) rotate(-0.15deg); } 68% { transform: translateX(7px) rotate(0.15deg); } }

.app-menu {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(155deg, var(--navy), #10263b 70%);
  color: white;
}
.app-menu::backdrop { background: var(--navy); }
.menu-shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: calc(1.2rem + env(safe-area-inset-top)) 0 2rem; }
.menu-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.2); }
.menu-heading p { margin: 0; }
.menu-logo { display: block; width: clamp(5.8rem, 23vw, 7.5rem); height: auto; }
.menu-close { width: 2.8rem; height: 2.8rem; padding: 0; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; background: rgba(255,255,255,0.1); color: white; font-size: 2rem; line-height: 1; }
.menu-links { display: grid; padding: 0; }
.menu-links button { padding: 0.85rem 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.14); background: transparent; color: white; text-align: left; font-size: clamp(1.25rem, 4vw, 1.65rem); }
.menu-links button::after { content: "›"; float: right; color: var(--yellow); }
.theme-toggle { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; border-bottom: 1px solid rgba(255,255,255,0.18); color: white; font-size: clamp(1.25rem, 4vw, 1.65rem); }
.theme-toggle input { position: relative; width: 2.8rem; height: 1.55rem; margin: 0; appearance: none; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; background: rgba(255,255,255,0.16); }
.theme-toggle input::after { content: ""; position: absolute; top: 0.18rem; left: 0.2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: white; transition: transform 180ms ease; }
.theme-toggle input:checked { border-color: var(--sea); background: var(--sea); }
.theme-toggle input:checked::after { transform: translateX(1.15rem); }
.menu-settings { border-bottom: 1px solid rgba(255,255,255,0.18); }
.menu-settings summary { padding: 0.85rem 0; cursor: pointer; color: white; font-size: clamp(1.25rem, 4vw, 1.65rem); list-style: none; }
.menu-settings summary::-webkit-details-marker { display: none; }
.menu-settings summary::after { content: "+"; float: right; color: var(--yellow); }
.menu-settings[open] summary::after { content: "−"; }
.menu-settings[open] { padding-bottom: 1.15rem; }
.menu-settings label { display: grid; gap: 0.5rem; padding: 0.15rem 0 1rem; color: rgba(255,255,255,0.78); }
.menu-settings select { margin: 0; border-color: rgba(255,255,255,0.25); background-color: white; }
.menu-inline-link { padding: 0; border: 0; background: transparent; color: white; font: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.menu-note { margin: 0 0 0.75rem; color: rgba(255,255,255,0.68); font-size: 0.9rem; }
.donation-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; padding-bottom: 1rem; }
.donation-options button, .share-options a, .share-options button {
  min-height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 0.7rem;
  background: rgba(255,255,255,0.09);
  color: white;
  text-decoration: none;
}
.donation-choice { display: grid; align-content: start; gap: 0.28rem; text-align: center; }
.donation-choice button { width: 100%; height: 2.75rem; min-height: 2.75rem; }
.donation-choice small { color: white; font-size: 0.76rem; line-height: 1.15; }
.donation-options .other-donation { grid-column: 1 / -1; width: 100%; }
.donation-options .recommended-donation { width: 100%; border-color: white; background: white; color: var(--navy); font-size: 1.1rem; font-weight: 850; }
.recommended-donation strong, .recommended-donation span { display: block; text-align: center; }
.recommended-donation span { margin-top: 0.08rem; font-size: 0.68rem; font-weight: 750; line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.share-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; padding: 0.15rem 0 1rem; }
.menu-notice { min-height: 1.3rem; margin: 0.8rem 0 0; color: var(--yellow); font-size: 0.9rem; }
.language-menu { margin-top: 1.25rem; }
.language-menu h2 { color: white; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; }
.language-menu p { display: flex; justify-content: space-between; margin: 0.7rem 0 0; color: rgba(255,255,255,0.9); }
.language-menu span { color: rgba(255,255,255,0.58); font-size: 0.9rem; }

.card-actions, .drill-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}
.card-actions { grid-template-columns: 1fr 1fr; }
#revealCard { font-size: 1.05rem; }
.drill-actions { grid-template-columns: 1fr 1.4fr 0.8fr; margin-top: 0.85rem; }
.primary-button, .secondary-button, .success-button, .quiet-button, .icon-button {
  min-height: 2.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.72rem;
  font-weight: 780;
}
.primary-button { border: 1px solid var(--navy); background: var(--navy); color: white; }
.primary-button:hover { background: var(--navy-2); }
.secondary-button { border: 1px solid #d6aaa5; background: #fff5f3; color: var(--red); }
.success-button { border: 1px solid #9fcbb5; background: #eff9f3; color: var(--green); }
.quiet-button { border: 1px solid var(--line); background: white; color: var(--navy); }
.icon-button { border: 1px solid #a9cdd2; background: #effafa; color: var(--sea-dark); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--navy-2); text-decoration: underline; }

.navigation-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}
.navigation-row p { margin: 0; }
.card-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-counter-row { margin-bottom: 0.15rem; }
.swipe-guidance { text-align: right; }
.lower-group-control { margin-top: 0.8rem; }
.action-explainer { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.82rem; text-align: center; }

.section-heading { align-items: start; }
.section-intro { margin: 0.65rem 0 1.2rem; color: var(--muted); }
.drill-card {
  min-height: 275px;
  padding: clamp(1.25rem, 5vw, 2.3rem);
  border: 1px solid #cbd8e2;
  border-radius: 1rem;
  background: linear-gradient(145deg, var(--navy), #1b5870);
  color: white;
  text-align: center;
}
.drill-card .counter-row { color: rgba(255,255,255,0.72); }
.drill-card .status-pill { background: rgba(255,255,255,0.14); color: white; }
.drill-cue { margin: 2rem 0 0.6rem; color: rgba(255,255,255,0.74); font-size: 1.05rem; }
.drill-spanish { margin: 0; font-size: clamp(1.7rem, 7vw, 2.75rem); font-weight: 820; line-height: 1.16; }
.small-note { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.83rem; }

.scenario-tabs {
  display: flex;
  gap: 0.45rem;
  margin: 0.7rem -0.2rem 1rem;
  padding: 0.2rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.scenario-tabs button {
  flex: 0 0 auto;
  min-height: 2.5rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--navy);
  font-weight: 750;
}
.scenario-tabs button.active { border-color: var(--sea); background: var(--pale-blue); color: var(--sea-dark); }
.scenario-card { padding-top: 0.2rem; }
.dialogue-lines { display: grid; gap: 0.55rem; margin-top: 1rem; }
.dialogue-line {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: white;
}
.dialogue-line.you { border-left: 0.32rem solid var(--sea); background: #f5fbfb; }
.speaker { color: var(--muted); font-size: 0.76rem; font-weight: 850; text-transform: uppercase; }
.line-spanish { margin: 0; font-weight: 720; }
.line-english { margin: 0.18rem 0 0; color: var(--muted); font-size: 0.88rem; }
.line-speak {
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid #a9cdd2;
  border-radius: 50%;
  background: #effafa;
  color: var(--sea-dark);
}


.how-dialog {
  width: min(calc(100% - 2rem), 620px);
  max-height: min(82vh, 760px);
  padding: clamp(1.2rem, 5vw, 2rem);
  overflow-y: auto;
  border: 1px solid rgba(18, 49, 79, 0.18);
  border-radius: 1.2rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 26px 80px rgba(18, 49, 79, 0.3);
}
.how-dialog::backdrop { background: rgba(10, 25, 40, 0.56); backdrop-filter: blur(3px); }
.how-dialog h2 { margin-bottom: 0.9rem; }
.how-dialog h3 { margin-top: 1.35rem; font-size: 1.15rem; }
.how-dialog p, .how-dialog ol { color: var(--muted); }
.how-dialog li + li { margin-top: 0.55rem; }
.dialog-close { float: right; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--navy); font-size: 1.5rem; line-height: 1; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --sand: #0d1721;
  --paper: #172532;
  --ink: #edf4f8;
  --muted: #afbec9;
  --line: #3a4b59;
  --pale-blue: #1d3445;
  --navy: #63b8d1;
  --navy-2: #8bcde0;
  --sea-dark: #63d2cf;
  --green: #64c993;
  --red: #f09a91;
}
:root[data-theme="dark"] body { background: linear-gradient(135deg, rgba(15,139,141,0.13), transparent 42%), var(--sand); }
:root[data-theme="dark"] .app-header,
:root[data-theme="dark"] .app-header::after { background: #fff8ec; }
:root[data-theme="dark"] .app-menu { background: linear-gradient(155deg, #102d46, #0b1b29 70%); }
:root[data-theme="dark"] .app-menu::backdrop { background: #102d46; }
:root[data-theme="dark"] .primary-tabs { background: rgba(23,37,50,0.94); }
:root[data-theme="dark"] .tab-button.active { background: #27627f; }
:root[data-theme="dark"] .primary-button { border-color: #3b85a7; background: #27627f; }
:root[data-theme="dark"] .donation-options .recommended-donation { color: #12314f; }
:root[data-theme="dark"] .lower-progress,
:root[data-theme="dark"] .panel { background: rgba(23,37,50,0.86); }
:root[data-theme="dark"] .flashcard { border-color: var(--line); background: radial-gradient(circle at 100% 0, rgba(15,139,141,0.2), transparent 34%), linear-gradient(160deg, #1b2d3c, #13222f); }
:root[data-theme="dark"] .segmented button.active,
:root[data-theme="dark"] .quiet-button,
:root[data-theme="dark"] .scenario-tabs button,
:root[data-theme="dark"] .dialogue-line,
:root[data-theme="dark"] .dialog-close { background: #223746; color: var(--ink); }
:root[data-theme="dark"] .secondary-button { border-color: #76504e; background: #3a2929; }
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .dialogue-line.you { background: #183538; }

@media (max-width: 620px) {
  .app-shell { width: min(100% - 1rem, 820px); padding-top: 0.55rem; }
  .app-header { margin-top: 0.2rem; }
  .header-logo { width: 10rem; }
  .panel { margin-top: 0.65rem; border-radius: 1rem; }
  .control-grid { grid-template-columns: 1fr; }
  .card-counter-row { font-size: 0.8rem; }
  .deck-options { align-items: stretch; flex-direction: column; }
  .segmented { display: grid; grid-template-columns: 1fr 1fr; }
  .flashcard { min-height: 300px; }
  .drill-actions { grid-template-columns: 1fr 1fr; }
  #stopAudio { grid-column: 1 / -1; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .scenario-title-row { align-items: start; }
  .dialogue-line { grid-template-columns: 3rem 1fr auto; gap: 0.5rem; padding: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .glitter-particle { display: none; }
  .brand-splash { transition: none; }
}