/* ============================================================
   Lingo Pulse — modern design layer (loads AFTER styles.css)

   Design plan
   - Idea: Swedish vocabulary should feel like Swedish design: bold
     geometry, honest color, lots of air. The flashcard is the one
     memorable object (a "midsommar sun" quarter-circle on a deep
     blueberry card, with a stacked-deck edge behind it). Everything
     else stays quiet: flat surfaces, hairline borders, almost no glow.
   - Palette (light): Blåbär #4F3BE8 · Bläck #14123A · Dis #F2F1FF
     · Midsommar #FFD43B · Mynta #12B886 · Lingon #E5484D
   - Type: Bricolage Grotesque (display: words, numbers, headings)
     + Figtree (UI text). Sentence case everywhere, no tracked caps.
   - Other themes (Dark, Midnight, Forest, ...) keep their own colors
     but inherit every structural change below through shared tokens.
   ============================================================ */

:root, [data-theme="light"] {
  --bg-base: #F2F1FF;
  --bg-surface: #FFFFFF;
  --text-main: #14123A;
  --text-muted: #6A678F;
  --primary: #4F3BE8;
  --secondary: #12B886;
  --accent: #F59F00;
  --danger: #E5484D;
  --sun: #FFD43B;
  --ink: #14123A;
  --border-color: #E4E2F8;
  --shadow: 0 1px 2px rgba(20,18,58,.05), 0 10px 28px -12px rgba(20,18,58,.16);
  --radius-lg: 28px;
  --radius-md: 20px;
  --chrome-bg: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  --card-back-grad: linear-gradient(165deg, #5A47F0 0%, #3A27C9 100%);
  --card-back-text: #FFFFFF;
  --card-back-glow: none;
  --primary-btn-grad: var(--primary);
  --primary-btn-glow: none;
  --progress-fill: var(--primary);
  --progress-bg: rgba(79,59,232,.10);
}

/* Other themes: same shape language, their own colors */

html { -webkit-tap-highlight-color: transparent; background: transparent !important; }
body {
  font-family: 'Figtree', 'Inter', system-ui, sans-serif;
  background-image: none !important; /* drop the aurora blobs: flatter, calmer */
}

h1, h2, h3, .word, .tq-word, .hm-ring-num, .pr-count, .brand-pill .mark,
.hm-hero-status, .hm-words-title, .pr-empty h2 {
  font-family: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* No tracked all-caps anywhere */
.eyebrow, .status-chip { text-transform: none; letter-spacing: 0; }

/* ---------- Header: no boxes, just a wordmark ---------- */
.app-header {
  padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 14px;
  background: linear-gradient(var(--bg-base) 55%, transparent);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.control-btn {
  width: 42px; height: 42px;
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.control-btn:hover { background: color-mix(in srgb, var(--text-main) 7%, transparent); transform: none; }
.brand-pill {
  background: transparent; border: 0; box-shadow: none; padding: 0 4px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.brand-pill .mark { font-weight: 800; font-size: 1.22rem; letter-spacing: -0.03em; }
.brand-pill .mark .hl { color: inherit; position: relative; margin-left: .1em; }
.brand-pill .mark .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: .32em;
  background: var(--sun); z-index: -1; border-radius: 3px; opacity: .9;
}
.brand-pill .mark { position: relative; z-index: 0; }

.due-pill, .test-pill, .pill-label { border-radius: 999px; text-transform: none; letter-spacing: 0; }
.pill-label { border-radius: 0; }

.app-shell { padding: 80px 18px calc(116px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Floating dock ---------- */
.bottom-nav {
  left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; padding: 6px; align-items: center;
  border: 1px solid var(--border-color); border-radius: 30px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  box-shadow: 0 18px 40px -14px rgba(20,18,58,.35);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
.bottom-nav button { padding: 6px 2px 5px; border-radius: 22px; gap: 2px; }
.nav-icon-pill { width: 48px; height: 30px; border-radius: 15px; }
.bottom-nav button.active .nav-icon-pill { background: var(--primary); box-shadow: none; transform: none; }
.bottom-nav button.active .nav-label { color: var(--text-main); }
.bottom-nav .nav-label { font-size: .68rem; }

.bottom-nav .dock-ai {
  flex: none; width: 58px; height: 58px; min-width: 58px; margin: -22px 4px 0; padding: 0; border-radius: 50%;
  border: 4px solid var(--bg-base); cursor: pointer; color: #14123A;
  background: var(--sun); display: grid; place-items: center;
  box-shadow: 0 10px 22px -8px rgba(245,159,0,.65);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.bottom-nav .dock-ai svg { width: 26px; height: 26px; }
.bottom-nav .dock-ai:active { transform: scale(.9) rotate(-8deg); }
.bottom-nav .dock-ai:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------- Home ---------- */
.hm-greet { margin: 6px 2px 18px; }
.hm-greet h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); font-weight: 800; line-height: 1.05; }
.hm-greet p { font-size: .9rem; font-weight: 500; margin-top: 6px; }

.hm-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 16px 16px 14px; gap: 16px;
  background: var(--ink, #14123A); color: #fff; box-shadow: var(--shadow);
}
[data-mode="dark"] .hm-hero {
  background: color-mix(in srgb, var(--primary) 30%, var(--bg-surface));
}
.hm-hero .cal-ring-track { stroke: rgba(255,255,255,.16); }
.hm-hero .cal-ring-bar { stroke: var(--sun); }
.hm-hero .cal-ring-bar.full { stroke: #fff; }
.hm-ring-num { font-size: 2rem; font-weight: 800; }
.hm-hero-status { font-size: 1.28rem; font-weight: 800; }
.hm-hero-sub { font-weight: 500; opacity: .8; }
.hm-cta {
  background: var(--sun); color: #14123A; box-shadow: none; padding: 12px 20px; font-weight: 800;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.hm-chip { background: rgba(255,255,255,.12); font-weight: 700; }

/* Hero: big ring on the left with streak + goal as two compact chips tucked under it. */
.hm-hero-side { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hm-hero-side .hm-chips { width: 100%; margin: 0; gap: 6px; }
.hm-hero-side .hm-chip { flex: 1; min-width: 0; padding: 5px 0; text-align: center; white-space: nowrap; font-size: .76rem; }

.hm-actions { gap: 12px; }
.hm-action {
  flex-direction: row; justify-content: center; gap: 10px; padding: 14px 10px;
  box-shadow: none; border-radius: var(--radius-md);
}
.hm-a-icon { font-size: 1.25rem; }
.hm-a-label { font-size: .92rem; font-weight: 700; }

.hm-words, .week-chart-card {
  box-shadow: none; border-radius: var(--radius-lg); border: 1px solid var(--border-color);
}
.home-section-title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 800; }

/* AI talk card (injected by ai.js) */
.sk-talk-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  margin: 0 0 12px; padding: 16px 18px; font: inherit; color: var(--text-main);
  background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  transition: transform .15s ease, border-color .15s ease;
}
.sk-talk-card:hover { border-color: var(--primary); }
.sk-talk-card:active { transform: scale(.985); }
.sk-talk-ic {
  flex: none; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center;
  background: var(--sun); color: #14123A;
}
.sk-talk-ic svg { width: 24px; height: 24px; }
.sk-talk-t { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 800; font-size: 1.08rem; letter-spacing: -0.02em; }
.sk-talk-s { font-size: .84rem; color: var(--text-muted); margin-top: 2px; font-weight: 500; }

/* ---------- Practice ---------- */
.pr-bar { height: 8px; border-radius: 8px; }
.pr-bar i { background: var(--primary); }
.pr-count { font-weight: 800; }

.flip-card {
  position: relative; isolation: isolate;
  height: clamp(250px, 38vh, 340px); margin-bottom: 16px;
  touch-action: pan-y;
  animation: sk-card-in .34s cubic-bezier(.2,.8,.2,1) both;
}
.flip-card::before, .flip-card::after {
  content: ""; position: absolute; z-index: -1; border-radius: var(--radius-lg);
  background: var(--primary); left: 0; right: 0; top: 0; bottom: 0;
}
.flip-card::before { transform: translateY(12px) scale(.94); opacity: .22; }
.flip-card::after  { transform: translateY(6px) scale(.97);  opacity: .42; }
.flip-card.sk-dragging { animation: none; }
.flip-card.sk-dragging .flip-card-inner { transition: none; }
.flip-card-inner { box-shadow: 0 24px 40px -24px rgba(20,18,58,.55); transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.flip-card:active .flip-card-inner { box-shadow: 0 24px 40px -24px rgba(20,18,58,.55); }
@keyframes sk-card-in { from { opacity: 0; transform: translateX(28px) scale(.97); } to { opacity: 1; transform: none; } }

.flip-face { border-width: 0; padding: clamp(22px, 7vw, 36px); }
.flip-face.front {
  background: var(--card-back-grad); box-shadow: none; align-items: flex-start; text-align: left; justify-content: flex-end;
}
/* No corner disc (it clashed with country themes) and no grid texture from styles.css: a clean gradient face. */
.flip-face.front::before { display: none; }
.flip-face.front .word {
  font-size: clamp(2.5rem, 13vw, 4rem); font-weight: 800; line-height: 1.02; text-shadow: none;
}
.flip-face.front .example { color: rgba(255,255,255,.82); font-style: normal; font-size: clamp(.95rem, 4vw, 1.08rem); margin-top: 14px; }
.flip-face.front .eyebrow { position: absolute; left: 22px; top: 22px; margin: 0; }
.flip-face.front .status-chip { background: rgba(255,255,255,.16); color: #fff; font-weight: 700; margin: 0; padding: 5px 12px; font-size: .78rem; }

.flip-face.front .audio-btn-label, .flip-face.back .audio-btn-label { display: none; }

.flip-face.back { background: var(--panel-bg); border: 1px solid var(--border-color); align-items: flex-start; text-align: left; justify-content: flex-end; }
.flip-face.back[dir="rtl"] { align-items: flex-start; text-align: right; } /* in RTL, flex-start is the right edge */
.flip-face.back .word { font-size: clamp(2.1rem, 11vw, 3.3rem); font-weight: 800; }
.flip-face.back .eyebrow { position: absolute; left: 24px; top: 24px; margin: 0; font-weight: 600; font-size: .85rem; }
.flip-face.back .example { font-style: normal; font-size: clamp(.95rem, 4vw, 1.08rem); color: var(--text-muted); }

.flip-face.back[lang="ur"] .word, .flip-face.back[lang="ar"] .word { font-size: clamp(1.9rem, 9vw, 2.7rem); line-height: 1.7; }
.flip-face.back[lang="ur"] .example, .flip-face.back[lang="ar"] .example { font-size: 1.2rem; line-height: 1.9; }


/* Listen button: ONE fixed spot (top-right, physical) on both faces and in
   every language, so flipping or switching to Urdu/Arabic (RTL) never moves
   it. The yellow sun on the front sits right behind it. */
.flip-face .audio-btn {
  position: absolute; top: 18px; right: 18px; left: auto; bottom: auto; transform: none;
  width: 46px; height: 46px; padding: 0; gap: 0; justify-content: center; align-items: center;
  box-shadow: none; z-index: 4;
}
.flip-face .audio-btn svg { width: 20px; height: 20px; }
.flip-face .audio-btn-label { display: none; }
.flip-face.front .audio-btn { background: #14123A; color: var(--sun); border: 0; }
.flip-face.front .audio-btn:hover { background: #14123A; filter: brightness(1.25); }
.flip-face.back .audio-btn { background: var(--primary); color: #fff; }
/* Titles stay top-left in every language; only the text itself flips for RTL */
.flip-face .eyebrow { left: 22px; right: auto; }
.flip-face.back[dir="rtl"] .word, .flip-face.back[dir="rtl"] .example { padding-right: 0; text-align: right; }

.flip-hint { margin-bottom: 14px; font-weight: 500; }
.flip-card.revealed ~ .pr-hint { opacity: .0; height: 0; margin: 0; overflow: hidden; }

/* Grade buttons: calm tinted tiles instead of glowing gradients */
.grade-buttons { gap: 10px; }
.grade-buttons button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 66px; padding: 10px 4px;
  border-radius: 20px; border: 1.5px solid transparent; font-size: .84rem; font-weight: 700;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.grade-buttons .gr-emoji { font-size: 1.35rem; line-height: 1; }
.btn.grade-again { background: color-mix(in srgb, var(--danger) 13%, var(--panel-bg)); color: var(--danger); box-shadow: none; }
.btn.grade-hard  { background: color-mix(in srgb, var(--accent) 16%, var(--panel-bg)); color: color-mix(in srgb, var(--accent) 80%, var(--text-main)); box-shadow: none; }
.btn.grade-good  { background: color-mix(in srgb, var(--secondary) 16%, var(--panel-bg)); color: color-mix(in srgb, var(--secondary) 85%, var(--text-main)); box-shadow: none; }
.btn.grade-easy  { background: color-mix(in srgb, var(--primary) 14%, var(--panel-bg)); color: var(--primary); box-shadow: none; }
.grade-buttons button:disabled { opacity: .35; }
.grade-buttons button:hover { filter: none; }
.grade-buttons button:not(:disabled):hover { border-color: currentColor; }

/* Swipe feedback */
.flip-card[data-swipe="good"] .flip-face.back { box-shadow: inset 0 0 0 4px var(--secondary); }
.flip-card[data-swipe="again"] .flip-face.back { box-shadow: inset 0 0 0 4px var(--danger); }
.sk-swipe-tag {
  position: absolute; top: 18px; z-index: 5; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: .9rem;
  opacity: 0; pointer-events: none; transform: rotate(-6deg);
}
.sk-swipe-tag.good { right: 18px; background: var(--secondary); color: #fff; }
.sk-swipe-tag.again { left: 18px; background: var(--danger); color: #fff; transform: rotate(6deg); }

/* AI chips under the grade buttons: only once the answer is revealed */
.flip-card:not(.flipped) ~ .sk-ai-row { display: none; }
.flip-card.flipped ~ .sk-ai-row { animation: sk-card-in .3s ease both; }
@media (max-height: 720px) { .flip-card { height: clamp(220px, 34vh, 300px); } .flip-hint { margin-bottom: 8px; } .grade-buttons button { min-height: 56px; } }
/* AI chips under the grade buttons */
.sk-ai-row { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: center; margin-top: 14px; }
.sk-ai-row .sk-chip { padding: 8px 12px; font-size: .82rem; white-space: nowrap; }
.sk-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--text-main);
  background: var(--panel-bg); border: 1px solid var(--border-color);
  transition: transform .14s ease, border-color .14s ease;
}
.sk-chip:hover { border-color: var(--primary); }
.sk-chip:active { transform: scale(.95); }
.sk-chip svg { width: 15px; height: 15px; color: var(--primary); }
.sk-chip.is-sun { background: var(--sun); border-color: var(--sun); color: #14123A; }
.sk-chip.is-sun svg { color: #14123A; }

/* ---------- Test ---------- */
/* Compact layout: smaller prompt card, tighter options, and the Next button
   is sticky just above the dock so it can never end up underneath it. */
.tq-card {
  background: var(--card-back-grad); position: relative; overflow: hidden; justify-content: flex-start; text-align: left;
  min-height: clamp(84px, 13vh, 124px); padding: 16px 18px; margin-bottom: 12px;
}
.tq-word { position: relative; font-weight: 800; text-shadow: none; font-size: clamp(1.6rem, 8vw, 2.3rem); padding-right: 34px; }
.tq-options { counter-reset: sk-opt; gap: 8px; }
.tq-opt {
  counter-increment: sk-opt; text-align: left; padding: 9px 44px 9px 52px; min-height: 50px; font-weight: 600; font-size: 1rem;
  box-shadow: none; border-width: 1.5px; border-radius: 16px;
  transition: transform .14s ease, border-color .14s ease, background .2s;
}
.tq-opt::before {
  content: counter(sk-opt); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: .82rem; font-weight: 800; color: var(--text-muted);
  background: color-mix(in srgb, var(--text-main) 7%, transparent);
}
.tq-opt.correct { animation: sk-pop .35s cubic-bezier(.34,1.56,.64,1); }
.tq-opt.incorrect { animation: sk-shake .35s ease; }
@keyframes sk-pop { 50% { transform: scale(1.03); } }
@keyframes sk-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tq-feedback { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; min-height: 0; margin: 10px 0 2px; font-size: 1rem; }
.tq-feedback:empty { display: none; }
.tq-feedback { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
.sk-why-wrap { display: inline-flex; margin: 0; }
.sk-why-wrap .sk-chip { padding: 6px 12px; font-size: .82rem; }
.tq-next {
  position: sticky; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  margin-top: 10px; scroll-margin-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 10px 24px -8px rgba(20,18,58,.45);
}
.tq-input { min-height: 50px; margin-bottom: 10px; }
@media (max-height: 720px) {
  .tq-card { min-height: 72px; padding: 12px 16px; margin-bottom: 10px; }
  .tq-word { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .tq-opt { min-height: 46px; padding-top: 7px; padding-bottom: 7px; }
  .tq-options { gap: 6px; }
}

.pr-empty-btn, .st-btn-primary {
  border-radius: 999px; font-weight: 800;
}

/* ---------- Toast ---------- */
.toast {
  bottom: calc(100px + env(safe-area-inset-bottom, 0px)); background: var(--ink, #14123A); color: #fff;
  border: 0; font-weight: 600;
}
[data-mode="dark"] .toast { background: var(--text-main); color: var(--bg-base); }

/* ============================================================
   AI sheet (ai.js)
   ============================================================ */
body.sk-sheet-open { overflow: hidden; }
.sk-backdrop {
  position: fixed; inset: 0; z-index: 40; background: rgba(20,18,58,.45); opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sk-backdrop.open { opacity: 1; pointer-events: auto; }
.sk-sheet {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 640px;
  height: min(88vh, 760px); display: flex; flex-direction: column;
  background: var(--bg-base); color: var(--text-main);
  border-radius: 32px 32px 0 0; box-shadow: 0 -20px 60px -20px rgba(20,18,58,.5);
  transform: translateY(105%); transition: transform .38s cubic-bezier(.2,.9,.25,1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sk-sheet.open { transform: none; }
.sk-grab { flex: none; width: 44px; height: 5px; border-radius: 5px; margin: 10px auto 2px; background: color-mix(in srgb, var(--text-main) 18%, transparent); }
.sk-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 18px 12px; }
.sk-head h2 { flex: 1; min-width: 0; font-size: 1.25rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: color-mix(in srgb, var(--text-main) 8%, transparent); color: var(--text-main);
}
.sk-icon-btn svg { width: 18px; height: 18px; }
.sk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sk-compose { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 14px; border-top: 1px solid var(--border-color); background: var(--bg-base); }
.sk-compose textarea {
  flex: 1; min-width: 0; resize: none; max-height: 120px; min-height: 46px; padding: 12px 16px;
  font: inherit; font-size: 1rem; color: var(--text-main); background: var(--panel-bg);
  border: 1.5px solid var(--border-color); border-radius: 23px; outline: none;
}
.sk-compose textarea:focus { border-color: var(--primary); }
.sk-send {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--primary); color: #fff; transition: transform .14s ease, opacity .2s;
}
.sk-send:disabled { opacity: .35; cursor: default; }
.sk-send:active:not(:disabled) { transform: scale(.9); }
.sk-send svg { width: 20px; height: 20px; }

.sk-hub-intro { font-size: 1rem; color: var(--text-muted); margin: 0 0 16px; line-height: 1.45; font-weight: 500; }
.sk-hub-card {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; margin-bottom: 12px;
  padding: 16px; font: inherit; color: var(--text-main); background: var(--panel-bg);
  border: 1px solid var(--border-color); border-radius: 24px;
}
.sk-hub-card:hover { border-color: var(--primary); }
.sk-hub-card .sk-talk-ic { width: 48px; height: 48px; }
.sk-hub-card.alt .sk-talk-ic { background: var(--primary); color: #fff; }
.sk-sub { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 800; font-size: 1.05rem; margin: 22px 0 10px; }
.sk-scenarios { display: flex; flex-wrap: wrap; gap: 8px; }

.sk-msg { max-width: 88%; margin: 0 0 12px; padding: 12px 16px; border-radius: 22px; line-height: 1.5; font-size: 1rem; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.sk-msg.ai { background: var(--panel-bg); border: 1px solid var(--border-color); border-bottom-left-radius: 8px; }
.sk-msg.me { margin-left: auto; background: var(--primary); color: #fff; border-bottom-right-radius: 8px; }
.sk-msg p { margin: 0 0 8px; } .sk-msg p:last-child { margin-bottom: 0; }
.sk-msg ul { margin: 4px 0 8px; padding-left: 20px; }
.sk-msg strong { font-weight: 800; }
.sk-msg .sk-sv { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-weight: 700; font-size: 1.08em; }
.sk-msg.typing { display: inline-flex; gap: 5px; padding: 15px 18px; }
.sk-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: sk-dot 1s infinite ease-in-out; }
.sk-msg.typing i:nth-child(2) { animation-delay: .15s; } .sk-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sk-dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-4px); } }

.sk-tools { display: flex; gap: 6px; margin-top: 8px; }
.sk-tool { border: 0; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.sk-tr { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-color); color: var(--text-muted); font-size: .92rem; }
.sk-fb {
  max-width: 88%; margin: -6px 0 12px auto; padding: 10px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.45;
  background: color-mix(in srgb, var(--sun) 28%, var(--panel-bg)); border: 1px solid color-mix(in srgb, var(--sun) 60%, transparent);
}
.sk-fb.ok { background: color-mix(in srgb, var(--secondary) 14%, var(--panel-bg)); border-color: color-mix(in srgb, var(--secondary) 40%, transparent); }
.sk-words { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; }
.sk-w { padding: 5px 11px; border-radius: 999px; font-size: .85rem; font-weight: 700; background: var(--panel-bg); border: 1px solid var(--border-color); transition: all .25s; }
.sk-w.used { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.sk-w.used::before { content: "✓ "; }
.sk-key { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 24px; padding: 18px; }
.sk-key h3 { font-size: 1.1rem; margin-bottom: 6px; }
.sk-key p { margin: 0 0 12px; font-size: .92rem; color: var(--text-muted); line-height: 1.45; }
.sk-key input { width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 10px; font: inherit; color: var(--text-main); background: var(--bg-base); border: 1.5px solid var(--border-color); border-radius: 14px; }
.sk-btn { border: 0; cursor: pointer; font: inherit; font-weight: 800; padding: 12px 20px; border-radius: 999px; background: var(--primary); color: #fff; }
.sk-err { color: var(--danger); font-size: .9rem; margin: 8px 0 0; }

/* ---------- Focus + motion ---------- */
.sk-sheet button:focus-visible, .sk-chip:focus-visible, .sk-talk-card:focus-visible, .sk-hub-card:focus-visible, .grade-buttons button:focus-visible, .tq-opt:focus-visible {
  outline: 3px solid var(--primary); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .flip-card, .tq-opt.correct, .tq-opt.incorrect, .sk-msg.typing i { animation: none !important; }
  .sk-sheet, .sk-backdrop, .flip-card-inner { transition-duration: .01ms !important; }
}
@media (max-width: 380px) {
  .brand-pill .mark { flex: none; white-space: nowrap; overflow: visible; text-overflow: clip; }
  .badge-group .pill-label { display: none; }
  .grade-buttons button { min-height: 58px; }
}


/* ---------- "Image" link: opens an online image search for the word ---------- */
.img-link {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.img-link svg { width: 20px; height: 20px; flex: none; }
.img-link:active { transform: scale(.92); }
.img-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* On the flashcard: sits just left of the Listen button, same size, both faces */
.flip-face .img-link {
  position: absolute; top: 18px; right: 72px; left: auto; width: 46px; height: 46px; border-radius: 50%; z-index: 4;
}
.flip-face .img-link-label { display: none; }
.flip-face.front .img-link { background: rgba(255,255,255,.16); color: #fff; }
.flip-face.front .img-link:hover { background: rgba(255,255,255,.28); }
.flip-face.back .img-link { background: color-mix(in srgb, var(--primary) 14%, var(--panel-bg)); color: var(--primary); }
.flip-face.back .img-link:hover { filter: brightness(.95); }

/* In the Manage word list: small round button before hide/restore */
.img-link-row {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-color); color: var(--primary);
}
.img-link-row svg { width: 18px; height: 18px; }
.img-link-row .img-link-label { display: none; }

/* AI tutor hub: the link card reuses .sk-hub-card; just reset anchor styling */
a.sk-hub-card { text-decoration: none; color: var(--text-main); }


/* ---------- Admin: AI explanation cache flags ---------- */
.sk-cache-flag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 8px 12px;
  border-radius: 14px; font-size: .78rem; font-weight: 600; line-height: 1.35;
  background: color-mix(in srgb, var(--primary) 8%, var(--panel-bg)); border: 1px dashed var(--border-color); color: var(--text-muted);
}
.sk-cache-flag span { flex: 1 1 100%; }
.sk-cache-flag button {
  font: inherit; font-weight: 700; font-size: .76rem; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--panel-bg); color: var(--text-main);
}
.sk-cache-flag button:disabled { opacity: .5; }
.mg-ai-flag { font-size: .68rem; font-weight: 800; margin-left: 6px; opacity: .55; white-space: nowrap; }
.mg-ai-flag.on { opacity: 1; color: var(--primary); }


/* "Keep your progress safe" prompt (Home, anonymous users only) */
.save-prompt {
  margin: 0 0 16px; padding: 16px 18px;
  background: color-mix(in srgb, var(--primary) 8%, var(--panel-bg));
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
  border-radius: var(--radius-lg); color: var(--text-main);
}
.save-prompt-head { display: flex; gap: 12px; align-items: flex-start; }
.save-prompt-ic { font-size: 1.4rem; line-height: 1.2; }
.save-prompt h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; }
.save-prompt p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-muted); }
.save-prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.save-prompt-actions .st-google { flex: 1 1 200px; margin: 0; }
.save-prompt-alt, .save-prompt-later {
  font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; border-radius: 999px; padding: 10px 16px;
}
.save-prompt-alt { background: transparent; color: var(--primary); border: 1.5px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.save-prompt-later { background: transparent; color: var(--text-muted); border: 0; padding-left: 8px; padding-right: 8px; }
.save-prompt-alt:focus-visible, .save-prompt-later:focus-visible, .save-prompt .st-google:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.save-prompt .st-google:disabled { opacity: .6; cursor: progress; }


/* ---- Auto-play: ONE button on the practice card + switches in Settings ---- */
.pr-top-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ap-ctrl { display: inline-flex; min-width: 0; max-width: 100%; }
.ap-chip { display: inline-flex; align-items: center; gap: 10px; height: 42px; max-width: 100%; padding: 0 16px 0 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--panel-bg); box-shadow: var(--shadow); color: var(--text-main);
  font: inherit; font-size: .9rem; font-weight: 800; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ap-chip-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; }
.ap-chip-ic svg { width: 14px; height: 14px; }
.ap-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-chip[data-state="idle"] { color: var(--text-muted); }
.ap-chip[data-state="idle"] .ap-chip-ic { background: color-mix(in srgb, var(--text-muted) 28%, transparent); color: var(--text-main); }
.ap-chip[data-state="playing"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--panel-bg)); }
.ap-chip[data-state="paused"] .ap-chip-text, .ap-chip[data-state="done"] .ap-chip-text { color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .ap-chip[data-state="playing"] .ap-chip-ic { animation: ap-pulse 1.6s ease-in-out infinite; }
}
@keyframes ap-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
.ap-chip:focus-visible, .ap-switch:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Settings -> Auto-play audio */
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; }
.ap-row-text { display: grid; gap: 2px; min-width: 0; }
.ap-row-label { font-weight: 700; }
.ap-row-hint { margin: 0; }
.ap-switch { flex: 0 0 auto; position: relative; width: 50px; height: 30px; border-radius: 999px; border: 0; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; background: color-mix(in srgb, var(--text-muted) 35%, transparent); transition: background .18s; }
.ap-switch::after { content: ""; position: absolute; inset: -8px -6px; }          /* bigger invisible tap area */
.ap-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.ap-switch.on { background: var(--primary); }
.ap-switch.on i { transform: translateX(20px); }
.ap-switch:disabled { opacity: .5; cursor: not-allowed; }
#autoplay-card select { font-size: 16px; }                                         /* iOS zooms the page for anything smaller */
@media (prefers-reduced-motion: reduce) { .ap-switch, .ap-switch i { transition: none; } }

/* phones / touch */
@media (pointer: coarse) {
  .ap-chip { height: 48px; padding-left: 8px; }
  .ap-chip-ic { width: 34px; height: 34px; }
  .ap-chip-ic svg { width: 16px; height: 16px; }
  .ap-row { padding: 12px 0; }
}
@media (max-width: 400px) { .ap-chip { font-size: .86rem; padding-right: 13px; } }

/* MindFit365 logo in the header's top-left button */
.control-btn.home-logo {
  width: 44px; height: 44px; padding: 0; overflow: hidden; border-radius: 50%;
  background: var(--bg-surface); border: 2px solid color-mix(in srgb, var(--primary) 28%, var(--border-color));
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--primary) 45%, transparent);
}
.control-btn.home-logo:hover { background: var(--bg-surface); transform: scale(1.05); }
.control-btn.home-logo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.control-btn.home-logo .home-fallback { width: 22px; height: 22px; }


/* =====================================================================
   Themed panels — Study circle, This week and Your words share one look:
   soft SHADES of the selected theme (the hero card above stays the solid
   dark colour). Built only from theme tokens, so every country theme and
   dark mode works automatically.
   To add a watermark for a new country, copy one of the [data-theme]
   blocks at the bottom.
   ===================================================================== */
.fr-card {
  position: relative; isolation: isolate; overflow: hidden; --wm: .5;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sun, var(--primary)) 26%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 17%, var(--bg-surface)) 0%, color-mix(in srgb, var(--primary) 6%, var(--bg-surface)) 60%, var(--bg-surface) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border-color));
}
/* thin accent strip in the theme's own progress colours (Sweden: blue → yellow) */
.fr-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1; pointer-events: none;
  background: var(--progress-fill, var(--primary));
}
/* watermark slot (filled per country below) */
.fr-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* This week: title left, Calendar right, both inside the panel */
.wk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 8px; }
.wk-title { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: .95rem; font-weight: 800; color: var(--text-main); }
.wk-title small { margin-left: 6px; font-family: inherit; font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.week-chart-card .cal-open-link { margin-left: 0; flex: none; }

/* Your words: same pill treatment for the "mastered · total" summary */
.hm-words-sub { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); }

/* ---- Country watermarks (kept very faint) ---- */
[data-theme="sweden"] .fr-card::after {
  opacity: var(--wm);
  background:
    linear-gradient(color-mix(in srgb, var(--sun) 40%, transparent), color-mix(in srgb, var(--sun) 40%, transparent)) 74% 0 / 12px 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--sun) 40%, transparent), color-mix(in srgb, var(--sun) 40%, transparent)) 0 56% / 100% 12px no-repeat;
}
[data-theme="pakistan"] .fr-card::after {
  inset: auto 8px -18px auto; width: 120px; height: 120px; opacity: .09;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cdefs%3E%3Cmask%20id=%22m%22%3E%3Crect%20width=%22100%22%20height=%22100%22%20fill=%22%23fff%22/%3E%3Ccircle%20cx=%2262%22%20cy=%2250%22%20r=%2230%22%20fill=%22%23000%22/%3E%3C/mask%3E%3C/defs%3E%3Ccircle%20cx=%2250%22%20cy=%2250%22%20r=%2238%22%20fill=%22%230A6B35%22%20mask=%22url(%23m)%22/%3E%3Cpolygon%20points=%2278.0,31.0%2080.7,38.3%2088.5,38.6%2082.4,43.4%2084.5,50.9%2078.0,46.6%2071.5,50.9%2073.6,43.4%2067.5,38.6%2075.3,38.3%22%20fill=%22%230A6B35%22/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---- Home: hero now also carries the 7-day strip (replaces the old "This week" card) ---- */
.hm-hero { flex-wrap: wrap; }
.hk-week {
  flex: 0 0 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14);
}
.hk-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hk-day:active { transform: scale(.92); }
.hk-day:focus-visible { outline: 2px solid var(--sun, #fff); outline-offset: 2px; border-radius: 10px; }
.hk-dot {
  position: relative; isolation: isolate; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 900; line-height: 1; letter-spacing: -.02em;
}
.hk-dot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: conic-gradient(var(--sun, #FCD34D) calc(var(--p, 0) * 1%), rgba(255,255,255,.16) 0);
  -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px);
          mask: radial-gradient(circle, transparent 13px, #000 14px);
}
.hk-day.is-goal .hk-dot { color: var(--ink, #14123A); }
.hk-day.is-goal .hk-dot::before { background: var(--sun, #FCD34D); -webkit-mask: none; mask: none; }
.hk-dot.is-long { font-size: .68rem; }
.hk-dot.is-zero { opacity: .55; }
.hk-day.is-today .hk-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.hk-lbl { font-size: .68rem; font-weight: 700; opacity: .65; line-height: 1; }
.hk-day.is-today .hk-lbl { opacity: 1; font-weight: 900; }

/* ---- Your words: deliberately plain (no gradient / accent strip) so it reads as a stat, not a feature card ---- */
.hm-words { background: var(--bg-surface); }
.hm-words-title { font-size: 1.15rem; font-weight: 800; }

/* Your words (learners): gains only — words learned, +N this week, bar toward the next milestone */
.hm-gain {
  display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 999px; vertical-align: middle;
  font-size: .74rem; font-weight: 800; letter-spacing: 0;
  color: var(--secondary, #0E9F8E);
  background: color-mix(in srgb, var(--secondary, #0E9F8E) 14%, transparent);
}
.hm-goalrow { display: flex; align-items: center; gap: 10px; }
.hm-goalbar { flex: 1; height: 10px; border-radius: 10px; overflow: hidden; background: var(--progress-bg, rgba(0,0,0,.08)); }
.hm-goalbar i { display: block; height: 100%; border-radius: 10px; background: var(--progress-fill, var(--primary)); transition: width .5s ease; }
.hm-goalnum { flex: none; font-size: .8rem; font-weight: 800; color: var(--text-muted); }


/* Home hero: "your words" now lives inside the daily-progress card (replaces the old status + sub-text) */
.hm-hero-body { align-items: stretch; min-width: 0; }
.hm-hw { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hm-hw:active { transform: scale(.985); }
.hm-hw:focus-visible { outline: 2px solid var(--sun, #fff); outline-offset: 4px; border-radius: 10px; }
.hm-hw-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.hm-hw-num { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.hm-hero .hm-gain { margin: 0; color: var(--sun, #FCD34D); background: rgba(255,255,255,.14); }
.hm-hw-star { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: .85rem; font-weight: 800; background: rgba(255,255,255,.14); }
.hm-hero .hm-goalbar { background: rgba(255,255,255,.18); }
.hm-hero .hm-goalbar i { background: var(--sun, #FCD34D); }
.hm-hero .hm-goalnum { color: rgba(255,255,255,.85); }
.hm-hero-body .hm-cta { align-self: flex-start; margin-top: 12px; }

/* streak now lives inside the daily ring */
.hm-hero .hm-ring-in { gap: 2px; }
.hm-hero .hm-ring-num { font-size: 2rem; }
.hm-ring-streak { margin-top: 4px; font-size: .9rem; font-weight: 800; line-height: 1; white-space: nowrap; }

/* ring centre = streak: flame on top, big number below */
.hm-ring-fire { font-size: 1.2rem; line-height: 1; }
.hm-hero .hm-ring-in { gap: 3px; }

/* Lighter hero panels (Home daily progress + Test page): theme colour instead of the dark "ink" tone.
   Dark mode keeps its own rule above ([data-mode="dark"] .hm-hero is more specific). */
.hm-hero {
  background: var(--hero-bg, linear-gradient(145deg, color-mix(in srgb, var(--primary) 86%, #fff) 0%, var(--primary) 100%));
}


/* "Already know it" button on the practice card (quiet, top-right corner of the front face) */
.know-btn {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  height: 34px; padding: 0 13px 0 10px; border-radius: 999px; gap: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: .78rem; font-weight: 700; line-height: 1;
  background: rgba(255,255,255,.16); color: rgba(255,255,255,.88);
  border: 1.5px solid rgba(255,255,255,.35); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.know-btn svg { width: 15px; height: 15px; flex: none; }
.know-btn:hover { background: rgba(255,255,255,.28); color: #fff; }
.know-btn:active { transform: scale(.92); }
.know-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* toast with an action (Undo / Hide) */
.toast.has-action { display: flex; align-items: center; gap: 14px; pointer-events: auto; padding-right: 10px; }
.toast-act {
  border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: .82rem;
  background: var(--sun, #FCD34D); color: var(--ink, #14123A);
}
[data-mode="dark"] .toast-act { color: #14123A; }


/* ===== Home redesign: one clear action, plain labels, shape-based states ===== */
.hm-hero--home { row-gap: 14px; }
.hm-hero--home .hm-hero-side { width: 96px; }
.hm-hero--home .hm-hero-body { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.hm-hero-label { font-size: .88rem; font-weight: 600; opacity: .92; }
.hm-hero-big { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hm-hero > .hm-cta {
  flex: 0 0 100%; width: 100%; height: 56px; margin: 0; padding: 0 18px; border: 0; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--sun, #FECC02); color: #0B1B2B; font-size: 1.1rem; font-weight: 800; box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.hm-hero > .hm-cta:active { transform: scale(.985); }
.hm-hero > .hm-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* week strip: empty days are dashed (shape, not just colour); today's label reads "Today" */
.hk-dot.is-zero { opacity: 1; color: rgba(255,255,255,.85); }
.hk-dot.is-zero::before { background: none; border: 2px dashed rgba(255,255,255,.5); box-sizing: border-box; -webkit-mask: none; mask: none; }
.hk-lbl { opacity: .8; }

/* Words learned: its own quiet white card */
.hm-learned {
  display: block; width: 100%; margin: 0 0 14px; padding: 16px 18px; text-align: left; font: inherit; color: var(--text-main);
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 24px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hm-learned:active { transform: scale(.99); }
.hm-learned-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hm-learned-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.hm-learned-lbl { font-size: .95rem; font-weight: 600; color: var(--text-muted); }
.hm-learned .hm-gain { margin-left: auto; }

/* Topics: simple rows with big tap targets */
.tp-list { display: flex; flex-direction: column; gap: 8px; }
.tp-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 0 16px; text-align: left; font: inherit;
  color: var(--text-main); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 20px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tp-row:active { transform: scale(.99); }
.tp-row .tp-icon {
  position: static; flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem;
  background: color-mix(in srgb, var(--primary) 12%, var(--bg-surface));
}
.tp-row .tp-name { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; }
.tp-row .tp-due { font-size: .88rem; font-weight: 700; }
.tp-row:not(.has-due) .tp-due { color: var(--text-muted); }
.tp-row .tp-chev { flex: none; color: var(--text-muted); }


/* ===== Practice redesign: clear hierarchy, outcome shown on every grade button ===== */
.pr-bar { height: 10px; border-radius: 10px; }
.pr-count { font-weight: 800; }
.pr-exit { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); display: inline-grid; place-items: center; }
.pr-hint { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: .9rem; font-weight: 600; }

.pr-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr-grades button { min-height: 60px; padding: 8px 2px; border-radius: 16px; gap: 2px; justify-content: center; }
.pr-grades .btn.grade-again,
.pr-grades .btn.grade-hard,
.pr-grades .btn.grade-easy { background: var(--bg-surface); color: var(--text-main); border: 1.5px solid var(--border-color); box-shadow: none; }
.pr-grades .btn.grade-good { background: var(--primary-btn-grad, var(--primary)); color: #fff; border: 1.5px solid transparent; box-shadow: none; }
.pr-grades .gr-label { font-size: .98rem; font-weight: 800; line-height: 1.1; }
.pr-grades .gr-when { font-size: .68rem; font-weight: 600; line-height: 1.1; white-space: nowrap; color: var(--text-muted); }
.pr-grades .btn.grade-good .gr-when { color: rgba(255,255,255,.88); }
.pr-grades button:disabled { opacity: .5; }
.pr-grades button:not(:disabled):hover { border-color: var(--primary); }
.pr-grades .btn.grade-good:not(:disabled):hover { border-color: transparent; }
/* very narrow phones: slightly smaller text so all four stay on one line */
@media (max-width: 360px) { .pr-grades { gap: 6px; } .pr-grades .gr-label { font-size: .9rem; } .pr-grades .gr-when { font-size: .62rem; } }

/* Practice card: word + sentence sit in the middle of BOTH faces (front and translation).
   Extra top/bottom padding keeps the text clear of the corner buttons (Listen, picture, Know it). */
.flip-face.front,
.flip-face.back,
.flip-face.back[dir="rtl"] {
  align-items: center; justify-content: center; text-align: center;
  padding-top: 72px; padding-bottom: 72px;
}
.flip-face.back .word, .flip-face.back .example,
.flip-face.back[dir="rtl"] .word, .flip-face.back[dir="rtl"] .example { text-align: center; padding-right: 0; }
.flip-face.front .example, .flip-face.back .example { max-width: 30ch; margin-left: auto; margin-right: auto; }


/* ===== Test page redesign (matches Home): hero + start, then plain positive stats ===== */
.tt-badge {
  width: 96px; height: 96px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center;
  border: 9px solid rgba(255,255,255,.22); color: #fff;
}
.tt-badge svg { width: 42px; height: 42px; }
.tt-hero.is-hot .tt-badge { border-color: var(--sun, #FECC02); color: var(--sun, #FECC02); }
.tt-hero-sub { font-size: .88rem; font-weight: 500; line-height: 1.3; opacity: .92; margin-top: 2px; }
.tt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.tt-stat {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 20px;
  background: var(--bg-surface); border: 1px solid var(--border-color);
}
.tt-stat b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.tt-stat span { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.tt-stages { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-stage {
  padding: 8px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--text-muted);
  background: var(--bg-surface); border: 1px solid var(--border-color);
}
.tt-stage b { color: var(--text-main); font-weight: 800; }


/* ===== Manage redesign: search + topic on one line, card rows, status in words ===== */
.mg-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.mg-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mg-bar .mg-search { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px; }
.mg-bar .mg-search svg { flex: none; color: var(--text-muted); }
.mg-bar .mg-filters { flex: none; max-width: 44%; margin: 0; }
.mg-bar .pr-cat { margin: 0; }
.mg-chip { min-height: 40px; }

.mg-list { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 8px; }
.mg-row {
  min-height: 64px; padding: 12px 8px 12px 16px; gap: 6px;
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 20px;
}
.mg-row + .mg-row { border-top: 1px solid var(--border-color); }
.mg-sv { font-size: 1.05rem; }
.mg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: .76rem; font-weight: 700; color: var(--text-muted); }
.mg-tag { display: inline-flex; align-items: center; gap: 6px; }
.mg-cat-tag { opacity: 1; }
.mg-act {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center;
  background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0; cursor: pointer;
}
.mg-act:hover { color: var(--text-main); border-color: var(--text-muted); }


/* ===== Settings redesign: same card language as Home / Manage ===== */
.st-title { margin: 0 0 14px; }
.st-me { border-radius: 24px; box-shadow: none; padding: 18px; }
.st-me-avatar { width: 56px; height: 56px; }
.st-card { border-radius: 24px; box-shadow: none; padding: 18px; background: var(--bg-surface); }
/* section icons sit in a small tinted tile, like the topic rows */
.st-card > h3 { gap: 12px; margin-bottom: 14px; font-size: 1.05rem; }
.st-card > h3 > span[aria-hidden="true"]:first-child {
  flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem;
  background: color-mix(in srgb, var(--primary) 12%, var(--bg-surface));
}
/* bigger, easier targets */
.st-btn, .st-google { min-height: 48px; border-radius: 16px; }
.st-mode-btn { min-height: 44px; }
.st-step { width: 56px; height: 56px; }
.st-goal output { font-size: 2.8rem; }
/* daily-goal quick picks */
.st-presets { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.st-preset {
  min-width: 56px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer;
  background: var(--bg-surface); color: var(--text-main); border: 1.5px solid var(--border-color);
}
.st-preset.active { background: var(--primary-btn-grad, var(--primary)); color: #fff; border-color: transparent; }
.st-preset:active { transform: scale(.96); }