@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap');

/* ============================================================
   Theme system — three switchable themes, same structure used
   across the MindFit365 suite (Solar Mint / Dark / Neuro).
   ============================================================ */

:root, [data-theme="light"] {
  color-scheme: light;
  --bg-base: #F0EDFF;
  --bg-surface: #FFFFFF;
  --text-main: #1A0A3C;
  --text-muted: #6B57A0;
  --primary: #7C3AED;
  --secondary: #059669;
  --accent: #D97706;
  --danger: #DC2626;
  --border-color: #DDD6FE;
  --shadow: 0 8px 32px -4px rgba(124,58,237,0.12), 0 0 0 1px rgba(124,58,237,0.08);
  --radius-lg: 20px;
  --radius-md: 14px;
  --panel-bg: var(--bg-surface);
  --chrome-bg: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  --progress-fill: linear-gradient(90deg, #7C3AED, #059669);
  --progress-bg: rgba(124,58,237,0.1);
  --card-back-grad: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #8B5CF6 100%);
  --card-back-text: #FFFFFF;
  --card-back-glow: 0 2px 16px rgba(109,40,217,0.45);
  --grid-line: rgba(255,255,255,0.15);
  --primary-btn-grad: linear-gradient(135deg, #7C3AED, #A78BFA);
  --primary-btn-glow: 0 0 16px rgba(167,139,250,0.35);
  --good-grad: linear-gradient(135deg, #059669, #34D399);
  --good-glow: 0 0 16px rgba(52,211,153,0.35);
  --retry-grad: linear-gradient(135deg, #DC2626, #F87171);
  --retry-glow: 0 0 16px rgba(248,113,113,0.35);
  --hard-grad: linear-gradient(135deg, #D97706, #FBBF24);
  --hard-glow: 0 0 16px rgba(251,191,36,0.35);
  --easy-grad: linear-gradient(135deg, #2563EB, #60A5FA);
  --easy-glow: 0 0 16px rgba(96,165,250,0.35);
  --due-grad: linear-gradient(135deg, #F59E0B, #EF4444);
  --due-glow: 0 0 14px rgba(239,68,68,0.4);
}

/* Bluish — the original "Dark" theme, renamed. Indigo/cyan-tinted dark
   mode. Kept as its own distinct option now that "Dark" (below) is the
   neutral grayscale one. */
[data-theme="bluish"] {
  color-scheme: dark;
  --bg-base: #05060F;
  --bg-surface: #0D0F1E;
  --text-main: #E0F2FE;
  --text-muted: #93A5C4;
  --primary: #818CF8;
  --secondary: #22D3EE;
  --accent: #A78BFA;
  --danger: #F87171;
  --border-color: rgba(129,140,248,0.22);
  --shadow: 0 20px 40px -8px rgba(0,0,0,0.8), 0 0 0 1px rgba(129,140,248,0.15), 0 0 30px rgba(34,211,238,0.06);
  --radius-lg: 20px;
  --radius-md: 14px;
  --panel-bg: var(--bg-surface);
  --chrome-bg: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  --progress-fill: linear-gradient(90deg, var(--secondary), var(--accent));
  --progress-bg: rgba(255,255,255,0.06);
  --card-back-grad: linear-gradient(135deg, #312E81 0%, #1E1152 60%, #080520 100%);
  --card-back-text: #E0E7FF;
  --card-back-glow: 0 4px 24px rgba(129,140,248,0.55);
  --grid-line: rgba(129,140,248,0.14);
  --primary-btn-grad: linear-gradient(135deg, #4F46E5, #818CF8);
  --primary-btn-glow: 0 0 16px rgba(129,140,248,0.35);
  --good-grad: linear-gradient(135deg, #0E7490, #22D3EE);
  --good-glow: 0 0 16px rgba(34,211,238,0.35);
  --retry-grad: linear-gradient(135deg, #B91C1C, #F87171);
  --retry-glow: 0 0 16px rgba(248,113,113,0.3);
  --hard-grad: linear-gradient(135deg, #B45309, #FBBF24);
  --hard-glow: 0 0 16px rgba(251,191,36,0.3);
  --easy-grad: linear-gradient(135deg, #4F46E5, #818CF8);
  --easy-glow: 0 0 16px rgba(129,140,248,0.3);
  --due-grad: linear-gradient(135deg, #B45309, #F87171);
  --due-glow: 0 0 14px rgba(248,113,113,0.35);
}

/* Dark — a proper neutral dark mode: charcoal/graphite surfaces with no
   blue or neon tint, brand purple kept only as the accent color, the
   way "just turn off the lights" dark mode usually looks. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #121212;
  --bg-surface: #1E1E1E;
  --text-main: #F2F2F2;
  --text-muted: #A6A6AE;
  --primary: #A78BFA;
  --secondary: #34D399;
  --accent: #FBBF24;
  --danger: #F87171;
  --border-color: rgba(255,255,255,0.12);
  --shadow: 0 20px 40px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  --radius-lg: 20px;
  --radius-md: 14px;
  --panel-bg: var(--bg-surface);
  --chrome-bg: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  --progress-fill: linear-gradient(90deg, #A78BFA, #34D399);
  --progress-bg: rgba(255,255,255,0.08);
  --card-back-grad: linear-gradient(135deg, #262626 0%, #303030 50%, #181818 100%);
  --card-back-text: #F2F2F2;
  --card-back-glow: 0 4px 20px rgba(0,0,0,0.5);
  --grid-line: rgba(255,255,255,0.06);
  --primary-btn-grad: linear-gradient(135deg, #7C3AED, #A78BFA);
  --primary-btn-glow: 0 0 16px rgba(167,139,250,0.3);
  --good-grad: linear-gradient(135deg, #059669, #34D399);
  --good-glow: 0 0 16px rgba(52,211,153,0.3);
  --retry-grad: linear-gradient(135deg, #DC2626, #F87171);
  --retry-glow: 0 0 16px rgba(248,113,113,0.3);
  --hard-grad: linear-gradient(135deg, #B45309, #FBBF24);
  --hard-glow: 0 0 16px rgba(251,191,36,0.3);
  --easy-grad: linear-gradient(135deg, #2563EB, #60A5FA);
  --easy-glow: 0 0 16px rgba(96,165,250,0.3);
  --due-grad: linear-gradient(135deg, #B45309, #DC2626);
  --due-glow: 0 0 14px rgba(220,38,38,0.35);
}

[data-theme="neuro"] {
  color-scheme: dark;
  --bg-base: #0B0F19;
  --bg-surface: rgba(255,255,255,0.07);
  --text-main: #FFFFFF;
  --text-muted: #8FA0C0;
  --primary: #00F0FF;
  --secondary: #39FF14;
  --accent: #FF007F;
  --danger: #FF2B6D;
  --border-color: rgba(0,240,255,0.28);
  --shadow: 0 0 20px rgba(0,240,255,0.25), 0 0 40px rgba(255,0,127,0.1);
  --radius-lg: 20px;
  --radius-md: 14px;
  --panel-bg: rgba(255,255,255,0.07);
  --chrome-bg: rgba(11,15,25,0.85);
  /* Neon gradients on grade/audio buttons run bright at one end — white
     text there sits under ~2:1 contrast, which fails for anyone in
     sunlight on a phone screen. Buttons in this theme get dark text
     instead (see the override block near the end of this file). */
  --btn-text-on-neon: #051019;
  --progress-fill: linear-gradient(90deg, #FF007F, #00F0FF);
  --progress-bg: rgba(255,255,255,0.1);
  --card-back-grad: linear-gradient(135deg, #0B0F19 0%, #131A2B 55%, #0B0F19 100%);
  --card-back-text: #00F0FF;
  --card-back-glow: 0 0 24px rgba(0,240,255,0.35);
  --grid-line: rgba(0,240,255,0.1);
  --primary-btn-grad: linear-gradient(135deg, #00A8B5, #00F0FF);
  --primary-btn-glow: 0 0 16px rgba(0,240,255,0.4);
  --good-grad: linear-gradient(135deg, #1F9E0E, #39FF14);
  --good-glow: 0 0 16px rgba(57,255,20,0.4);
  --retry-grad: linear-gradient(135deg, #B5124A, #FF2B6D);
  --retry-glow: 0 0 16px rgba(255,43,109,0.4);
  --hard-grad: linear-gradient(135deg, #B8860B, #FFD700);
  --hard-glow: 0 0 16px rgba(255,215,0,0.4);
  --easy-grad: linear-gradient(135deg, #0080A0, #00F0FF);
  --easy-glow: 0 0 16px rgba(0,240,255,0.4);
  --due-grad: linear-gradient(135deg, #B8860B, #FF2B6D);
  --due-glow: 0 0 16px rgba(255,43,109,0.4);
}

/* Ubuntu — dark Aubergine (Canonical's brand purple, same family used in
   the Ubuntu login screen and terminal) with Ubuntu Orange for actions,
   for anyone who wants their flashcards to feel like their desktop. */
[data-theme="ubuntu"] {
  color-scheme: dark;
  --bg-base: #2C001E;
  --bg-surface: #3D0A2C;
  --text-main: #F7EFEB;
  --text-muted: #B49BAE;
  --primary: #E95420;
  --secondary: #77216F;
  --accent: #FCA321;
  --danger: #DF382C;
  --border-color: rgba(233,84,32,0.22);
  --shadow: 0 20px 40px -8px rgba(0,0,0,0.7), 0 0 0 1px rgba(233,84,32,0.12);
  --radius-lg: 20px;
  --radius-md: 14px;
  --panel-bg: var(--bg-surface);
  --chrome-bg: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  --progress-fill: linear-gradient(90deg, #E95420, #77216F);
  --progress-bg: rgba(233,84,32,0.12);
  --card-back-grad: linear-gradient(135deg, #2C001E 0%, #5E2750 50%, #77216F 100%);
  --card-back-text: #F7EFEB;
  --card-back-glow: 0 2px 20px rgba(233,84,32,0.35);
  --grid-line: rgba(233,84,32,0.08);
  --primary-btn-grad: linear-gradient(135deg, #E95420, #FF7C3D);
  --primary-btn-glow: 0 0 16px rgba(233,84,32,0.4);
  --good-grad: linear-gradient(135deg, #2E7D32, #66BB6A);
  --good-glow: 0 0 16px rgba(102,187,106,0.35);
  --retry-grad: linear-gradient(135deg, #C7162B, #DF382C);
  --retry-glow: 0 0 16px rgba(223,56,44,0.35);
  --hard-grad: linear-gradient(135deg, #A8580C, #F0B429);
  --hard-glow: 0 0 16px rgba(240,180,41,0.35);
  --easy-grad: linear-gradient(135deg, #1B6FA8, #4FC3F7);
  --easy-glow: 0 0 16px rgba(79,195,247,0.35);
  --due-grad: linear-gradient(135deg, #E95420, #DF382C);
  --due-glow: 0 0 14px rgba(223,56,44,0.4);
}

* { box-sizing: border-box; }

html {
  height: 100%;
  overscroll-behavior-y: contain; /* prevent the browser's pull-to-refresh gesture from firing inside what should feel like a self-contained app */
  -webkit-tap-highlight-color: transparent; /* remove the default gray flash-on-tap — our own :active states provide feedback instead */
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg-base);
  color: var(--text-main);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s ease, color 0.4s ease;
  -webkit-user-select: none;
  user-select: none; /* UI chrome shouldn't be selectable text, like a native app's controls aren't */
}
html { height: 100%; }
body { min-height: 100vh; }

/* ...but actual text content people might want to copy (a word, an
   example sentence, a quiz question) and anything editable stays
   selectable — the rule above is about buttons/labels/nav, not content. */
.word, .example, .quiz-word, input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

button, .btn, a, select, .bottom-nav button, .control-btn {
  touch-action: manipulation; /* skip the ~300ms double-tap-zoom delay browsers add by default on tappable elements */
}

body:not([data-theme="dark"]):not([data-theme="bluish"]):not([data-theme="neuro"]):not([data-theme="ubuntu"]) {
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(124,58,237,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(5,150,105,0.07) 0%, transparent 50%);
}
/* Bluish keeps the indigo/cyan glow the old "Dark" theme had. */
[data-theme="bluish"] body,
[data-theme="bluish"] {
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(129,140,248,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(34,211,238,0.06) 0%, transparent 50%);
}
/* Dark is the neutral grayscale mode — just a faint, colorless vignette
   so it still reads as "designed" without tinting the charcoal surfaces. */
[data-theme="dark"] body,
[data-theme="dark"] {
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.045) 0%, transparent 60%);
}

[data-theme="neuro"] body,
[data-theme="neuro"] {
  background-image:
    linear-gradient(rgba(0,240,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

[data-theme="ubuntu"] body,
[data-theme="ubuntu"] {
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(233,84,32,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(119,33,111,0.35) 0%, transparent 55%);
}

h1, h2, h3 { font-family: 'Inter', sans-serif; font-weight: 900; letter-spacing: -0.01em; margin: 0; }
button { font-family: inherit; }
a { color: var(--primary); text-decoration: none; font-weight: 600; }
a:hover, a:focus { text-decoration: underline; } /* keep the affordance for pointer users; touch users get the color/weight cue instead */

/* Frosted-glass chrome everywhere, not just Neuro — the header, tab bar
   and round icon buttons now use a translucent --chrome-bg (see theme
   blocks above), so blur them all so content scrolling underneath
   reads as "behind glass" rather than "abruptly clipped", matching the
   native iOS/Android tab-bar feel on a phone. */
.app-header,
.bottom-nav,
.control-btn,
.brand-pill {
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

/* ---------- Shell / header ---------- */

.app-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 84px 20px calc(84px + env(safe-area-inset-bottom, 0px));
  position: relative;
}

.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  max-width: 640px;
  margin: 0 auto;
  padding: 15px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 5;
}

.control-btn {
  background: var(--chrome-bg);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  flex: none;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text-main);
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), background-color 0.2s;
}
.control-btn:hover { transform: translateY(-2px); }
.control-btn:active { transform: scale(0.95); }
.control-btn svg { width: 20px; height: 20px; }

.brand-pill {
  flex: 1;
  min-width: 0;
  background: var(--chrome-bg);
  border: 1px solid var(--border-color);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand-pill .mark {
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.2px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-pill .mark .hl { color: var(--primary); }

.badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.due-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--due-grad);
  box-shadow: var(--due-glow);
  border: none;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  animation: duePillPulse 1.8s ease-in-out infinite;
}
.due-pill:hover, .due-pill:focus-visible { filter: brightness(1.08); }
.due-pill:active { transform: scale(0.97); }
.due-pill.is-clear {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--secondary) 16%, transparent);
  box-shadow: none;
  animation: none;
}
.due-pill-icon { font-size: 0.85em; }

@keyframes duePillPulse {
  0%, 100% { box-shadow: var(--due-glow); }
  50% { box-shadow: 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .due-pill { animation: none; }
}

.grade-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* Below ~360px, four columns squeeze each label into a sliver too
   narrow to comfortably aim a thumb at. Two rows of two gives each
   button roughly double the tap area at the width phones actually are. */
@media (max-width: 380px) {
  .grade-buttons { grid-template-columns: repeat(2, 1fr); }
}
.grade-buttons button {
  border-radius: 12px;
  border: none;
  padding: 12px 4px;
  min-height: 48px;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.grade-buttons button:hover { filter: brightness(1.08); }
.grade-buttons button:active { transform: scale(0.96); }
.grade-buttons button:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.grade-again { background: var(--retry-grad); box-shadow: var(--retry-glow); }
.btn.grade-hard { background: var(--hard-grad); box-shadow: var(--hard-glow); }
.btn.grade-good { background: var(--good-grad); box-shadow: var(--good-glow); }
.btn.grade-easy { background: var(--easy-grad); box-shadow: var(--easy-glow); }
.grade-hint {
  text-align: center;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 10px;
}

.status-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.status-new { background: color-mix(in srgb, var(--text-muted) 20%, transparent); color: var(--text-muted); }
.status-learning { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.status-review { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.status-mastered { background: color-mix(in srgb, var(--secondary) 18%, transparent); color: var(--secondary); }

.due-note {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Card-front eyebrow already contains a status chip; keep it legible
   against the gradient rather than the flat chip colors above. */
.flip-face.front .status-chip {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
}

code {
  background: color-mix(in srgb, var(--text-main) 8%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ---------- Tab bar (segmented control, bottom-stack style) ---------- */

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  background: var(--chrome-bg);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -8px 24px -8px rgba(0,0,0,0.15);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 8;
}

.bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 8px 4px 7px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

/* The active indicator is a filled pill BEHIND the icon (Material 3
   navigation-bar pattern) — a color change alone reads as too subtle
   at this size on a phone; a solid shape people can spot at a glance
   doesn't. */
.nav-icon-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 30px;
  border-radius: 15px;
  transition: background 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-icon-pill svg {
  width: 22px;
  height: 22px;
  transition: color 0.15s ease;
}
.bottom-nav button:active .nav-icon-pill { transform: scale(0.88); }

.bottom-nav .nav-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1px;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

.bottom-nav button.active .nav-icon-pill {
  background: var(--primary-btn-grad);
  box-shadow: var(--primary-btn-glow);
  transform: translateY(-2px);
}
.bottom-nav button.active .nav-icon-pill svg {
  color: #fff;
}
.bottom-nav button.active .nav-label {
  color: var(--primary);
  font-weight: 800;
}

section.view { display: none; }
section.view.active { display: block; }

/* ---------- Panels / info states ---------- */

.info-box {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
  color: var(--text-muted);
  line-height: 1.55;
}
.info-box strong { color: var(--text-main); }

/* ---------- Daily practice ---------- */

.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.progress-track {
  flex: 1;
  height: 10px;
  background: var(--progress-bg);
  border-radius: 10px;
  margin: 0 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.progress-fill {
  height: 100%;
  background: var(--progress-fill);
  border-radius: 10px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

.flip-card {
  perspective: 1200px;
  /* Was a flat 280px — too tall on short/landscape phone viewports
     (forces scrolling to reach the grade buttons) and wastes space
     on taller ones. Scales with viewport height instead, clamped to
     a sane range. */
  height: clamp(220px, 38vh, 300px);
  margin-bottom: 20px;
  cursor: pointer;
}
.flip-card:active .flip-card-inner { box-shadow: var(--shadow), 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s ease;
  transform-style: preserve-3d;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(18px, 6vw, 32px);
  box-sizing: border-box;
}

.flip-face.front {
  background: var(--card-back-grad);
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(124,58,237,0.15);
  border-color: transparent;
  z-index: 2;
}
.flip-face.front::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.flip-face.front .eyebrow, .flip-face.front .word, .flip-face.front .example { position: relative; }
.flip-face.front .eyebrow { color: rgba(255,255,255,0.7); }
.flip-face.front .word {
  color: var(--card-back-text);
  text-shadow: var(--card-back-glow);
}
.flip-face.front .example {
  color: rgba(255,255,255,0.85);
}

.flip-face.back {
  transform: rotateY(180deg);
  background: var(--panel-bg);
}
.flip-face.back .word { color: var(--text-main); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
  color: var(--text-muted);
}
.word {
  font-family: 'Inter', sans-serif;
  /* Fluid instead of fixed: a long Swedish compound word (e.g.
     "sammanträde", "förutsättning") no longer risks overflowing the
     card or wrapping awkwardly on a narrow phone. */
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.15;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.flip-face .example {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: clamp(0.82rem, 3.6vw, 0.95rem);
  font-style: italic;
  max-width: 42ch;
}

.audio-btn {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.audio-btn svg { width: 18px; height: 18px; flex: none; }
.audio-btn-label { white-space: nowrap; }
.audio-btn:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.24); }
.audio-btn:active { filter: brightness(0.94); }
.audio-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.flip-face.front .audio-btn {
  background: #fff;
  color: var(--primary);
}
.flip-face.front .audio-btn:hover { background: #fff; filter: brightness(0.97); }
.flip-face.back .audio-btn {
  background: var(--primary);
  color: #fff;
}
.flip-face.back .audio-btn:hover { filter: brightness(1.08); }
.audio-btn.speaking {
  animation: audio-glow 0.6s ease-in-out infinite;
}
@keyframes audio-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
  50% { box-shadow: 0 4px 20px 4px color-mix(in srgb, var(--primary) 55%, transparent); }
}

.flip-hint {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.answer-buttons { display: flex; gap: 12px; }

.btn {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--panel-bg);
  color: var(--text-main);
  padding: 13px 18px;
  min-height: 48px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  flex: 1;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Keyboard/switch-control users need a visible focus ring; mouse/touch
   users never trigger :focus-visible so this doesn't add clutter to
   the tap experience. */
.btn:focus-visible,
.control-btn:focus-visible,
.option-btn:focus-visible,
.bottom-nav button:focus-visible,
.theme-pick-btn:focus-visible,
.profile-pick-btn:focus-visible,
input:focus-visible,
select:focus-visible,
.cat-count-row-action:focus-visible,
.due-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--primary-btn-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--primary-btn-glow);
}
.btn-primary:hover { background: var(--primary-btn-grad); filter: brightness(1.08); }

.btn-outline { background: transparent; }

.btn-good {
  background: var(--good-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--good-glow);
}
.btn-good:hover { filter: brightness(1.08); }

.btn-retry {
  background: var(--retry-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--retry-glow);
}
.btn-retry:hover { filter: brightness(1.08); }

.btn-block { width: 100%; }

/* ---------- Test / quiz ---------- */

.quiz-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 26px;
}

.quiz-prompt {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.quiz-word {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 6.5vw, 1.9rem);
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 22px;
  overflow-wrap: break-word;
}

.quiz-options { display: grid; gap: 10px; }

.option-btn {
  text-align: left;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--text-main);
  border-radius: 12px;
  padding: 13px 16px;
  min-height: 48px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.option-btn:active:not(:disabled) { transform: scale(0.98); }
.option-btn:hover { border-color: var(--primary); }
.option-btn.correct { background: color-mix(in srgb, var(--secondary) 18%, transparent); border-color: var(--secondary); color: var(--text-main); }
.option-btn.incorrect { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: var(--danger); color: var(--text-main); }
.option-btn:disabled { cursor: default; }

.fill-blank-input {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  font-family: inherit;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-base);
  color: var(--text-main);
  margin-bottom: 14px;
}
.fill-blank-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* These two fields are built with inline styles in app.js that inherit
   a small label font-size; !important is needed here because inline
   style attributes otherwise always win over the stylesheet. Same
   iOS auto-zoom issue as above. */
#ai-category, #ai-count {
  font-size: 16px !important;
  min-height: 40px;
}
.fill-blank-input.correct { border-color: var(--secondary); background: color-mix(in srgb, var(--secondary) 12%, transparent); }
.fill-blank-input.incorrect { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }

.feedback-line { margin-top: 12px; font-size: 0.85rem; font-weight: 700; min-height: 20px; }
.feedback-line.correct { color: var(--secondary); }
.feedback-line.incorrect { color: var(--danger); }

.quiz-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
}
.quiz-footer .quiz-index { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }

/* Results */

.result-score {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.4rem, 12vw, 3.2rem);
  font-weight: 900;
  color: var(--text-main);
  line-height: 1;
}
.result-score span { font-size: 1.4rem; color: var(--text-muted); font-weight: 700; }

.result-list { margin-top: 20px; border-top: 1px solid var(--border-color); }
.result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.85rem;
}
.result-row .tag {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tag.correct { background: color-mix(in srgb, var(--secondary) 18%, transparent); color: var(--secondary); }
.tag.incorrect { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.tag.demoted { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.tag.promoted { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); }

/* Per-word mastery bar + tags on the test results screen */
.result-row { flex-wrap: wrap; }
.result-row-main {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.result-row-word {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-row-tags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: none;
}
.progress-track.mini {
  height: 5px;
  margin: 0;
  max-width: 220px;
}

/* Celebration banner for newly-mastered / leveled-up words after a test */
.celebrate-banner {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--secondary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* Test-entry stats row: tests taken / best / last / hot streak */
.test-stats-bar {
  display: flex;
  gap: 10px;
  margin: -4px 0 16px;
}
.test-stat {
  flex: 1;
  text-align: center;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 6px;
}
.test-stat-num {
  display: block;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text-main);
}
.test-stat-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-top: 2px;
}
.test-stat-hot .test-stat-num { color: var(--accent); }

/* Test-entry mastery nudge: progress bar + status chips + callout */
.mastery-nudge {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.mastery-nudge .progress-row { margin-bottom: 12px; }
.mastery-nudge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mastery-callout {
  margin: 12px 0 0;
  font-size: 0.84rem;
  color: var(--text-main);
  line-height: 1.4;
}

.category-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.category-bar label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.category-bar select {
  flex: 1;
  min-height: 44px;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--panel-bg);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  /* Native select arrows look inconsistent between iOS and Android,
     and clash with the app's own rounded/pill visual language. A
     drawn chevron keeps it consistent everywhere. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B57A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
[data-theme="bluish"] .category-bar select,
[data-theme="neuro"] .category-bar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A5C4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] .category-bar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A6AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="ubuntu"] .category-bar select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B49BAE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.category-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}

.manage-subnav {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.manage-subnav button {
  flex: 1;
  min-height: 42px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 5px);
  padding: 10px 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.manage-subnav button.active {
  background: var(--primary-btn-grad);
  color: #fff;
  box-shadow: var(--primary-btn-glow);
}

.cat-count-list { display: flex; flex-direction: column; gap: 8px; }
.cat-count-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}
.cat-count-row-action {
  width: 100%;
  text-align: left;
  font: inherit;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 6%, var(--panel-bg));
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.cat-count-row-action:hover,
.cat-count-row-action:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 25%, transparent);
  transform: translateY(-1px);
}
.cat-count-row-action:active {
  transform: translateY(0) scale(0.99);
  background: color-mix(in srgb, var(--primary) 14%, var(--panel-bg));
}
.cat-count-label { flex: 1; min-width: 0; }
.cat-count-right { display: flex; align-items: center; gap: 8px; flex: none; }
.cat-count-new {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #fff;
  background: var(--primary);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.cat-count-done {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.cat-count-num {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}
.cat-count-chevron {
  color: var(--primary);
  font-weight: 800;
}

.profile-active-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-base);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
}
.account-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--secondary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent);
  margin-bottom: 10px;
  font-size: 0.88rem;
}
.profile-pick-avatar { font-size: 1.3rem; line-height: 1; }
.profile-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.profile-pick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.profile-pick-btn:hover { border-color: var(--primary); }
.profile-pick-btn.active {
  background: var(--primary-btn-grad);
  color: #fff;
  border-color: transparent;
  cursor: default;
}
.profile-pick-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}
.theme-pick-btn {
  padding: 12px 6px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-base);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .theme-pick-btn { font-size: 0.72rem; padding: 10px 4px; }
}
.theme-pick-btn.active {
  background: var(--primary-btn-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--primary-btn-glow);
}

/* ---------- Home / dashboard ---------- */

.home-greeting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.home-greeting h1 {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text-main);
  margin: 0 0 4px;
  line-height: 1.25;
}
.hg-date {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}
.hg-dot { opacity: 0.5; margin: 0 1px; }
.hg-goal-line { color: var(--primary); font-weight: 700; }
.home-done-today { margin-bottom: 16px; }

/* Compact "today's goal" ring — lives in the header, top-right of the
   name, instead of its own separate panel (see renderHome). Tapping it
   goes to Settings, where the goal itself is adjusted. */
.hg-goal-ring {
  flex: none;
  position: relative;
  width: 52px;
  height: 52px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hg-goal-ring:hover, .hg-goal-ring:focus-visible { filter: brightness(1.08); }
.hg-goal-ring:active { transform: scale(0.96); }
.hg-goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hg-goal-ring circle {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
.hg-goal-ring .ring-track { stroke: var(--border-color); }
.hg-goal-ring .ring-progress {
  stroke: var(--primary);
  transition: stroke-dashoffset 0.4s ease;
}
.hg-goal-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--text-main);
}

.primary-suggestion {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 20px;
  background: var(--primary-btn-grad);
  box-shadow: var(--primary-btn-glow), var(--shadow);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.primary-suggestion:hover, .primary-suggestion:focus-visible { filter: brightness(1.06); transform: translateY(-1px); }
.primary-suggestion:active { transform: translateY(0) scale(0.99); }
.ps-icon { flex: none; font-size: 1.8rem; line-height: 1; }
.ps-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ps-title { font-size: 1.02rem; font-weight: 800; color: #fff; }
.ps-desc { font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.88); line-height: 1.35; }
.ps-cta {
  flex: none;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,0.18);
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Segmented "catalog progress" ring — composition of the whole visible
   catalog by learning stage (new / learning / review / mastered). Colors
   are pulled straight from the existing status-chip palette (see
   .status-new / .status-learning / .status-review / .status-mastered)
   so this card, its legend, and the chips in Manage → Browse all agree. */
.progress-hero {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--card-back-text);
  border: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  background: var(--card-back-grad);
  box-shadow: var(--card-back-glow), var(--shadow);
  padding: 16px 16px 18px;
  margin-bottom: 22px;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.progress-hero:hover, .progress-hero:focus-visible { filter: brightness(1.05); transform: translateY(-1px); }
.progress-hero:active { transform: translateY(0) scale(0.99); }

.ph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.ph-head-title { font-size: 0.92rem; font-weight: 800; }
.ph-head-sub { font-size: 0.74rem; font-weight: 600; opacity: 0.82; }

.progress-hero-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel-bg);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.ph-ring { position: relative; flex: none; width: 104px; height: 104px; }
.ph-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ph-ring circle { fill: none; }
.ph-track { stroke: var(--border-color); stroke-width: 12; }
.ph-seg { stroke-width: 12; stroke-linecap: round; }
.ph-new { stroke: var(--text-muted); }
.ph-new.ph-dot { background: var(--text-muted); }
.ph-learning { stroke: var(--accent); }
.ph-learning.ph-dot { background: var(--accent); }
.ph-review { stroke: var(--primary); }
.ph-review.ph-dot { background: var(--primary); }
.ph-mastered { stroke: var(--secondary); }
.ph-mastered.ph-dot { background: var(--secondary); }

.ph-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ph-pct { font-size: 1.35rem; font-weight: 900; color: var(--text-main); line-height: 1.1; }
.ph-pct-label { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

.ph-streak-flame {
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(255, 106, 32, 0.4));
  animation: phFlameFlicker 2.6s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.ph-streak-num {
  margin-top: 1px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.05;
  background: linear-gradient(135deg, #FF9A3D 0%, #FF4D4D 60%, #E0247A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ph-streak-label { margin-top: 1px; font-size: 0.6rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

@keyframes phFlameFlicker {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50% { transform: scale(1.1) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ph-streak-flame { animation: none; }
}

.ph-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.ph-legend-item { display: flex; align-items: center; gap: 8px; }
.ph-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.ph-legend-label { flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-legend-count { flex: none; font-size: 0.82rem; font-weight: 800; color: var(--text-main); }

@media (max-width: 360px) {
  .progress-hero-card { gap: 12px; padding: 14px 12px; }
  .ph-ring { width: 88px; height: 88px; }
  .ph-pct { font-size: 1.1rem; }
  .ph-streak-flame { font-size: 1rem; }
  .ph-streak-num { font-size: 1.25rem; }
}

/* Slim "due today" chip — the one home-page number that's genuinely
   time-sensitive (it changes what to do *right now*, unlike the
   vocabulary card's counts, which are stable across a session). Shown
   only when something is actually due, so an empty state doesn't add
   a "0 due" line to look at. */
.due-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 22px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.due-chip:hover, .due-chip:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.due-chip:active { transform: translateY(0) scale(0.99); }
.due-chip-icon {
  flex: none;
  font-size: 1rem;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.due-chip-text { flex: 1; font-size: 0.86rem; font-weight: 600; color: var(--text-main); }
.due-chip-text strong { font-weight: 900; color: var(--accent); }
.due-chip-arrow { flex: none; color: var(--text-muted); font-weight: 800; }

/* 7-day activity bar chart */
.week-chart-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  padding: 16px 14px 10px;
  margin-bottom: 22px;
}
.week-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 96px; }
.week-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.week-bar-track { flex: 1; width: 100%; max-width: 26px; display: flex; align-items: flex-end; }
.week-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 6px 6px 3px 3px;
  background: color-mix(in srgb, var(--primary) 22%, var(--panel-bg));
  transition: height 0.3s ease;
}
.week-bar.is-today { background: var(--primary-btn-grad); box-shadow: var(--primary-btn-glow); }
.week-bar-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); }
.week-bar-label.is-today { color: var(--primary); }
.week-bar-count {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1;
  height: 10px;
}
.week-bar-count.is-today { color: var(--primary); }

.home-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.home-section-sub {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
}

.suggestion-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.suggestion-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.suggestion-card:hover, .suggestion-card:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 22%, transparent);
  transform: translateY(-1px);
}
.suggestion-card:active { transform: translateY(0) scale(0.99); }
.sc-icon { flex: none; font-size: 1.3rem; line-height: 1; }
.sc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-title { font-size: 0.88rem; font-weight: 700; color: var(--text-main); }
.sc-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.35; }
.sc-cta {
  flex: none;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}

@media (max-width: 380px) {
  .home-greeting h1 { font-size: 1.12rem; }
  .ps-desc, .sc-desc { display: none; }
  .hg-goal-ring { width: 44px; height: 44px; }
  .hg-goal-pct { font-size: 0.64rem; }
  .hg-date { font-size: 0.76rem; }
}

/* ---------- Manage ---------- */
.voice-diagnostic { display: flex; flex-direction: column; gap: 6px; }
.voice-diagnostic-row {
  font-size: 0.82rem;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.4;
}
.voice-diagnostic-ok {
  background: color-mix(in srgb, var(--secondary) 12%, var(--panel-bg));
  color: var(--text-main);
}
.voice-diagnostic-missing {
  background: color-mix(in srgb, var(--danger) 12%, var(--panel-bg));
  color: var(--text-main);
}
.btn.speaking { opacity: 0.7; }

/* ---------- Focus session (Manage → counter → Practice) ---------- */

.focus-session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.focus-session-tag { font-size: 0.82rem; font-weight: 700; color: var(--text-main); }
.btn-link {
  background: none;
  border: none;
  padding: 4px 6px;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
}

.add-word-form {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 26px;
}
.add-word-form h3 { font-size: 0.95rem; font-weight: 800; margin-bottom: 12px; }

.field-row { display: flex; gap: 10px; margin-bottom: 10px; }
.field-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-base);
  color: var(--text-main);
  /* Must stay ≥16px: iOS Safari auto-zooms the whole viewport on focus
     for any input under that size, which then requires the user to
     manually pinch back out — a jarring, very mobile-specific bug. */
  font-size: 16px;
  font-family: inherit;
}
.field-row input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-hint { font-size: 0.76rem; color: var(--text-muted); }

.word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
.word-row .sv { font-weight: 800; }
.word-row .en { color: var(--text-muted); font-size: 0.88rem; }
.word-row .meta { flex: 1; min-width: 0; }
.word-row .miss-count { font-size: 0.72rem; font-weight: 700; color: var(--danger); }
.word-row button.remove {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 9px 12px;
  min-height: 40px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.word-row button.remove:hover { border-color: var(--primary); color: var(--primary); }

.empty-row { color: var(--text-muted); font-size: 0.88rem; padding: 16px 0; }

.toast {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .flip-card-inner, .btn, .toast, .control-btn, .nav-icon-pill, .option-btn, .progress-fill { transition: none !important; }
}

@media (max-width: 480px) {
  .brand-pill { padding: 8px 12px; gap: 6px; }
  .brand-pill .mark { font-size: 0.82rem; }
  .due-pill { font-size: 0.68rem; padding: 4px 7px; }
  /* Panels look generous on a laptop but eat too much of a 375px
     screen edge-to-edge; trim inner padding a touch on phones. */
  .quiz-card, .add-word-form, .info-box { padding: 16px; }
  .app-shell { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 400px) {
  /* The streak label used to be hidden here, leaving just a bare
     flame + number with nothing to say what it counts — easy to
     misread as some other stat (e.g. "studied"). Keep it visible,
     just tighter, so the streak pill always reads unambiguously. */
  .pill-label { font-size: 0.62rem; }
  .brand-pill .mark { font-size: 0.76rem; }
}

/* ---------- Neuro theme: contrast fix for neon-gradient buttons ----------
   White text on the bright end of these neon gradients (lime green,
   gold, cyan) drops well under WCAG AA contrast — hard to read at a
   glance, especially outdoors. Dark text keeps the neon-on-black look
   intact while staying legible. */
[data-theme="neuro"] .btn.grade-good,
[data-theme="neuro"] .btn.grade-hard,
[data-theme="neuro"] .btn.grade-easy,
[data-theme="neuro"] .btn-good,
[data-theme="neuro"] .btn-primary,
[data-theme="neuro"] .flip-face.back .audio-btn,
[data-theme="neuro"] .theme-pick-btn.active,
[data-theme="neuro"] .profile-pick-btn.active,
[data-theme="neuro"] .manage-subnav button.active,
[data-theme="neuro"] .bottom-nav button.active .nav-icon-pill svg {
  color: var(--btn-text-on-neon);
}
[data-theme="neuro"] .cat-count-new {
  color: var(--btn-text-on-neon);
}
/* Cyan text on a plain white pill (the front-of-card "Listen" button)
   is close to unreadable — swap to the theme's own dark surface so the
   cyan has something dark to sit on, same as everywhere else in Neuro. */
[data-theme="neuro"] .flip-face.front .audio-btn {
  background: #0B0F19;
  color: var(--primary);
  border: 1px solid var(--border-color);
}