/* "Sprout" design system: tokens and components follow design/DESIGN.md. */

/* ===== Tokens ===== */
:root{
  --primary:#2E7D32; --primary-strong:#1B5E20; --secondary:#3B82F6; --tertiary:#F5B301;
  --neutral:#FFF8EC; --mint:#F3F9EC; --surface:#FFFFFF;
  --on-surface:#1F2937; --muted:#4B5563;
  --success:#15803D; --success-ink:#166534; --error:#B91C1C; --listening:#EA580C;

  --font:"Nunito", system-ui, sans-serif;
  --font-display:"Baloo 2", "Nunito", system-ui, sans-serif;
  --font-ipa:"Noto Sans", sans-serif;

  --r-sm:8px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:9999px;
  --s-xs:4px; --s-sm:8px; --s-md:12px; --s-lg:16px; --s-xl:24px;

  --shadow:0 10px 25px -5px rgba(0,0,0,.05), 0 8px 10px -6px rgba(0,0,0,.03);
  --hairline:1px solid rgba(0,0,0,.06);
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; font:400 15px/1.5 var(--font); color:var(--on-surface);
  background:linear-gradient(160deg, var(--neutral) 0%, var(--mint) 100%) fixed;
}
button{font:inherit; color:inherit; cursor:pointer;}
.ipa{font:400 18px/1.4 var(--font-ipa);}

/* ===== Icon buttons: speak / speak-slow ===== */
.btn-icon{
  position:relative; width:48px; height:48px; border:none; border-radius:var(--r-full);
  background:rgba(46,125,50,.1); color:var(--primary);
  display:inline-flex; align-items:center; justify-content:center; font-size:20px;
  transition:transform .12s ease, background .15s ease;
}
.btn-icon:hover{background:rgba(46,125,50,.16);}
.btn-icon:active{transform:scale(.94);}
.btn-icon:focus-visible, .btn-mic:focus-visible, .chip:focus-visible, .sheet-close:focus-visible{outline:3px solid var(--secondary); outline-offset:3px;}
.btn-icon svg{width:22px; height:22px;}
.btn-icon.is-playing{background:var(--primary); color:#fff;}
.btn-icon.is-playing::after{
  content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--primary);
  animation:ring 1.2s ease-out infinite;
}

/* ===== Mic button ===== */
.btn-mic{
  position:relative; width:64px; height:64px; border:none; border-radius:var(--r-full);
  background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px rgba(46,125,50,.55); transition:transform .12s ease, background .2s ease;
}
.btn-mic svg{width:28px; height:28px;}
.btn-mic:active{transform:scale(.95);}
.btn-mic.is-listening{background:var(--listening); box-shadow:0 8px 20px -6px rgba(234,88,12,.55);}
.btn-mic.is-listening::before, .btn-mic.is-listening::after{
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--listening);
  opacity:.4; z-index:-1; animation:aura 1.6s ease-out infinite;
}
.btn-mic.is-listening::after{animation-delay:.8s;}
.btn-mic[aria-disabled="true"]{background:#9CA3AF; box-shadow:none; opacity:.45; cursor:not-allowed;}
@keyframes aura{ from{transform:scale(1); opacity:.4;} to{transform:scale(1.18); opacity:0;} }
@keyframes ring{ from{transform:scale(1); opacity:.6;} to{transform:scale(1.25); opacity:0;} }

/* ===== Result pill ===== */
.result{
  display:inline-flex; align-items:flex-start; gap:var(--s-sm); max-width:100%;
  padding:var(--s-md) var(--s-lg); border-radius:var(--r-md); font-size:13px; line-height:1.4;
}
.result b{font-weight:600;}
.result.is-correct{background:rgba(22,163,74,.12); color:var(--success-ink);}
.result.is-wrong{background:rgba(185,28,28,.10); color:var(--error);}
.result.is-empty{background:rgba(0,0,0,.05); color:var(--muted);}


/* ===== Chip / tab ===== */
.chip{
  position:relative; text-decoration:none; height:36px; padding:0 var(--s-lg); border:none; border-radius:var(--r-full);
  background:rgba(0,0,0,.05); color:var(--muted); font-size:12px; font-weight:600; line-height:1.2;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
/* Visual height 36px; invisible hit area extends to 44px. */
.chip::after{content:""; position:absolute; inset:-4px 0;}
.chip:hover{background:rgba(0,0,0,.08);}
.chip[aria-selected="true"], .chip.is-active{background:var(--primary); color:#fff;}

/* ===== Level picker + level badge =====
   Levels are app-wide (not per topic), so they use the brand green, never a topic accent. */
.level-picker{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:var(--s-sm); margin:0 0 var(--s-xl);}
@media (min-width:760px){ .level-picker{grid-template-columns:repeat(7,1fr); max-width:840px;} }
.level-chip{height:auto; min-height:44px; padding:6px 4px; white-space:normal; text-align:center; flex-direction:column; justify-content:center; gap:0; line-height:1.2;}
.level-chip::after{display:none;}
.level-chip b{font-size:15px; font-weight:800;}
.level-chip span{font-size:12px; font-weight:600;}
.level-chip.is-soon:not(.is-active){background:transparent; border:1px dashed rgba(0,0,0,.2);}
.level-soon{margin-top:var(--s-lg);}
.topic-section{margin:var(--s-xl) 0 var(--s-md);}
.topic-section:first-child{margin-top:0;}
.level-badge{font-size:12px; font-weight:800; letter-spacing:.04em; line-height:1; padding:5px 8px; border-radius:var(--r-full);
  background:rgba(46,125,50,.12); color:var(--primary-strong);}
.level-badge:empty{display:none;}
.sheet-word .level-badge{vertical-align:middle;}

/* ===== Stat tile ===== */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-md);}
.stat{background:var(--surface); border:var(--hairline); border-radius:var(--r-md); padding:var(--s-md); box-shadow:var(--shadow); text-align:center;}
.stat-num{font-size:22px; font-weight:700; line-height:1.3;}
.stat-lbl{font-size:12px; font-weight:600; color:var(--muted);}
.stat-num.is-success{color:var(--success);}
.stat-num.is-error{color:var(--error);}

/* ===== Progress bar ===== */
.progress-track{height:8px; border-radius:var(--r-full); background:rgba(0,0,0,.08); overflow:hidden;}
.progress-fill{height:100%; border-radius:inherit; background:var(--topic-ink, var(--primary)); transition:width .4s ease;}

/* ===== Topic card (theming rule from DESIGN.md) ===== */
.topic-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-md);}
@media (min-width:760px){ .topic-grid{grid-template-columns:repeat(4,1fr);} }
.topic-card{
  --topic-tint:color-mix(in srgb, var(--topic-accent) 12%, #FFFFFF);
  --topic-ink:color-mix(in srgb, var(--topic-accent) 55%, #000000);
  --topic-border:color-mix(in srgb, var(--topic-accent) 25%, transparent);
  position:relative; aspect-ratio:1 / 1; min-height:150px; text-align:left;
  border:var(--hairline); border-radius:var(--r-xl); padding:18px;
  background:var(--surface); color:var(--on-surface); box-shadow:var(--shadow);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .18s ease;
}
.topic-card:hover{transform:translateY(-3px); border-color:var(--topic-border);}
.topic-card:focus-visible{outline:3px solid var(--topic-accent); outline-offset:3px;}
.topic-icon{width:52px; height:52px; border-radius:var(--r-md); background:var(--topic-tint); display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1;}
.topic-title{font-size:16px; font-weight:800; line-height:1.25; margin-top:var(--s-md); color:var(--topic-ink);}
.topic-sub{font-size:12px; font-weight:600; color:var(--muted);}
.topic-foot{display:flex; flex-direction:column; gap:6px;}
.topic-meta{display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--muted);}
.topic-meta [data-ui="topic-progress-label"]{color:var(--topic-ink);}
.topic-card .progress-track{background:color-mix(in srgb, var(--topic-accent) 18%, #FFFFFF);}

/* ===== Bottom sheet ===== */
.backdrop{position:absolute; inset:0; background:rgba(15,23,42,.4); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
.sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:85%; overflow-y:auto;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:var(--s-xl);
  padding-top:var(--s-md); text-align:left; box-shadow:0 -10px 30px -10px rgba(15,23,42,.25);
}
.sheet-handle{width:40px; height:5px; border-radius:var(--r-full); background:rgba(0,0,0,.15); margin:0 auto var(--s-md);}
.sheet-close{position:absolute; top:10px; right:10px; width:44px; height:44px; border:none; border-radius:var(--r-full);
  background:rgba(0,0,0,.05); color:var(--on-surface); font-size:16px; display:inline-flex; align-items:center; justify-content:center;}
.sheet-word{font-size:22px; font-weight:700; line-height:1.3; margin-top:var(--s-sm);}
.sheet-vi{font-size:18px; font-weight:600; margin:var(--s-xs) 0;}
.sheet-en{font-size:13px; color:var(--muted); margin:0 0 var(--s-lg);}
.sheet-actions{display:flex; gap:var(--s-md); justify-content:center;}

/* ===== Toast ===== */
.toast{
  display:inline-flex; align-items:center; gap:var(--s-sm); max-width:100%;
  background:var(--on-surface); color:#fff; padding:var(--s-md) var(--s-lg); border-radius:var(--r-md);
  font-size:13px; font-weight:600; box-shadow:0 12px 30px -10px rgba(15,23,42,.45);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:opacity .2s linear !important;}
  .btn-mic.is-listening::before{opacity:.25; transform:scale(1.12);}
}

/* ===== App shell ===== */
.stack{display:flex; flex-direction:column; gap:var(--s-md);}
.app{max-width:600px; margin:0 auto; padding:var(--s-xl) var(--s-lg) 48px; display:flex; flex-direction:column; gap:var(--s-lg);}
.storage-note{font-size:12px; color:var(--muted); text-align:center; line-height:1.5; margin:0;}
.section-title{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:var(--s-sm) 0 0;}
.section-title small{font-weight:400; text-transform:none; letter-spacing:0;}
.topic-grid.is-app{grid-template-columns:repeat(2,1fr);}

/* ===== Top bar ===== */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:var(--s-md);}
.btn-back{height:44px; padding:0 var(--s-lg); border:var(--hairline); border-radius:var(--r-full); background:var(--surface);
  font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow);}
.topic-name{font-size:13px; font-weight:600; color:var(--topic-ink); background:var(--topic-tint); border:1px solid var(--topic-border);
  padding:6px var(--s-md); border-radius:var(--r-full);}
.themed{
  --topic-tint:color-mix(in srgb, var(--topic-accent) 12%, #FFFFFF);
  --topic-ink:color-mix(in srgb, var(--topic-accent) 55%, #000000);
  --topic-border:color-mix(in srgb, var(--topic-accent) 25%, transparent);
}

/* ===== Notices ===== */
.notice{display:flex; gap:var(--s-sm); padding:var(--s-md) var(--s-lg); border-radius:var(--r-md); font-size:13px; line-height:1.45;}
.notice.is-warn{background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412;}
.notice.is-error{background:rgba(185,28,28,.08); border:1px solid rgba(185,28,28,.25); color:var(--error);}
.notice b{font-weight:700;}

/* ===== Read aloud (S3) ===== */
.passage-title{font-size:22px; font-weight:700; line-height:1.3; margin:0; text-align:center;}
.read-hint{font-size:13px; color:var(--muted); text-align:center; margin:-8px 0 0;}
.passage{background:var(--surface); border:1px solid var(--topic-border); border-radius:var(--r-xl); padding:var(--s-lg);
  font-size:18px; line-height:1.9; box-shadow:var(--shadow); color:var(--muted);}
.sentence{border-radius:var(--r-sm); cursor:pointer;}
.sentence.is-current{color:var(--on-surface); background:var(--topic-tint); box-shadow:0 0 0 6px var(--topic-tint);}
.word.is-vocab{font-weight:700; border-bottom:2px solid var(--topic-accent);}
.sentence:not(.is-current) .word.is-vocab{border-bottom-color:var(--topic-border);}
.word.is-ok{background:rgba(22,163,74,.15); color:var(--success-ink); border-radius:6px; padding:1px 3px;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;}
.word.is-bad{background:rgba(185,28,28,.12); color:var(--error); border-radius:6px; padding:1px 3px; font-weight:700;
  text-decoration:underline wavy; text-decoration-thickness:1.5px; text-underline-offset:4px;}
.word.is-ok.is-vocab, .word.is-bad.is-vocab{border-bottom:none;}
.status{font-size:13px; color:var(--muted); text-align:center;}
.status b{color:var(--on-surface);}
.reader-controls{display:flex; align-items:center; justify-content:center; gap:var(--s-md);}
.btn-nav{width:44px; height:44px; border:var(--hairline); border-radius:var(--r-full); background:var(--surface); font-size:18px;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow);}
.heard{min-height:48px; display:flex; justify-content:center;}
.heard .result{width:100%;}
.heard.is-live{font-size:15px; color:var(--on-surface); text-align:center; align-items:center; gap:var(--s-sm);}
.live-dot{width:10px; height:10px; border-radius:50%; background:var(--listening); flex:0 0 auto; animation:blink 1s ease-in-out infinite;}
@keyframes blink{50%{opacity:.25;}}
.stats.is-two{grid-template-columns:1fr 1fr;}

/* ===== IPA (S4) ===== */
.ipa-group{display:flex; flex-direction:column; gap:var(--s-sm);}
.ipa-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-sm);}
.phoneme-tile{min-height:72px; border:var(--hairline); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:var(--s-sm) 4px;}
.phoneme-tile .sym{font:600 22px/1.2 var(--font-ipa); color:var(--primary);}
.phoneme-tile .key, .pair-tile .key{font-size:12px; color:var(--muted);}
.pair-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-sm);}
.pair-tile{min-height:64px; border:var(--hairline); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:var(--s-sm);}
.pair-tile .sym{font:600 18px/1.3 var(--font-ipa); color:var(--primary);}

/* ===== Sheets (S5–S7) ===== */
.sheet-head{text-align:center; padding:var(--s-sm) 44px 0;}
.sheet-phoneme{font:600 44px/1.2 var(--font-ipa); color:var(--primary);}
.sheet-tip{font-size:15px; line-height:1.5; text-align:center; margin:var(--s-sm) 0 0;}
.sheet h4{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:var(--s-xl) 0 var(--s-sm);}
.practice-row{display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s-sm) var(--s-md);
  padding:var(--s-md); border:var(--hairline); border-radius:var(--r-md); background:var(--surface); margin-bottom:var(--s-sm);}
.practice-row .w{font-size:15px; font-weight:700;}
.practice-row .ipa{font-size:15px; color:var(--muted); margin-left:6px;}
.row-btns{display:flex; gap:var(--s-sm);}
.btn-mic.is-sm{width:48px; height:48px; box-shadow:0 6px 14px -6px rgba(46,125,50,.55);}
.btn-mic.is-sm svg{width:22px; height:22px;}
.practice-row .result{grid-column:1 / -1; width:100%;}
.pair-block{background:rgba(0,0,0,.035); border-radius:var(--r-lg); padding:var(--s-sm); margin-bottom:var(--s-md);}
.pair-block .practice-row:last-child{margin-bottom:0;}
.pair-vs{font-size:12px; font-weight:600; color:var(--muted); text-align:center; margin:-2px 0 6px;}
.quiz{display:flex; flex-direction:column; align-items:stretch; gap:var(--s-md);}
.btn-primary{height:48px; border:none; border-radius:var(--r-full); background:var(--primary); color:#fff; font-size:15px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-sm); padding:0 var(--s-xl);}
.quiz-choices{display:grid; grid-template-columns:1fr 1fr auto; gap:var(--s-sm); align-items:center;}
.quiz-choice{height:56px; border:2px solid rgba(0,0,0,.08); border-radius:var(--r-full); background:var(--surface);
  font-size:18px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:6px;}
.quiz-choice:disabled{color:#6B7280; background:rgba(0,0,0,.03); border-style:dashed;}
.quiz-choice.is-correct{border-color:var(--success); background:rgba(22,163,74,.12); color:var(--success-ink);}
.quiz-choice.is-wrong{border-color:var(--error); background:rgba(185,28,28,.10); color:var(--error);}
.quiz-hint{font-size:13px; color:var(--muted); text-align:center; margin:0;}
.sheet-word{text-align:center;}
.sheet-example{font-size:15px; font-style:italic; line-height:1.5; background:rgba(0,0,0,.035); border-radius:var(--r-md);
  padding:var(--s-md) var(--s-lg); margin:0 0 var(--s-lg);}
.sheet-center{text-align:center;}
.heard-live{display:flex; align-items:center; gap:var(--s-sm); font-size:15px; color:var(--on-surface);}

/* Main tabs: equal segments that fit 390px on one row, full 44px touch height. */
/* Topic cards grow with 2-line titles instead of overflowing a fixed square. */
.topic-card{aspect-ratio:auto; min-height:176px; gap:var(--s-md);}
/* Reading focus: other sentences recede (still AA: #6B7280 on white 4.83:1). */
.passage{color:#6B7280;}
.sentence.is-current{background:color-mix(in srgb, var(--topic-accent) 20%, #FFFFFF); box-shadow:0 0 0 5px color-mix(in srgb, var(--topic-accent) 20%, #FFFFFF);}
[data-ui="quiz-result"] .result{width:100%;}

/* ===== Flashcard deck (S2) ===== */
.toolbar{display:flex; flex-wrap:wrap; gap:var(--s-sm); justify-content:center;}
.toolbar .chip{height:44px;}
.toolbar .chip::after{display:none;}
.toolbar .chip.is-active{background:var(--primary); color:#fff;}
.flashcard{
  position:relative; height:380px; border-radius:var(--r-xl); padding:var(--s-xl);
  background:var(--surface); border:1px solid var(--topic-border); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--s-sm);
}
.flashcard.is-back{background:var(--topic-tint);}
.fc-tags{position:absolute; top:var(--s-lg); left:var(--s-lg); display:flex; gap:6px; align-items:center;}
.fc-pos{font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--topic-ink); background:var(--topic-tint); padding:4px 10px; border-radius:var(--r-full);}
.fc-status{position:absolute; top:var(--s-md); right:var(--s-lg); font-size:20px;}
.fc-emoji{font-size:52px; line-height:1;}
.fc-word{font-size:32px; font-weight:800; line-height:1.2; color:var(--on-surface);}
.fc-controls{display:flex; align-items:center; gap:var(--s-md); margin-top:var(--s-sm);}
.fc-check{min-height:44px; width:100%; display:flex; justify-content:center; align-items:center;}
.fc-check .result{width:100%; justify-content:center;}
.fc-hint{position:absolute; bottom:var(--s-md); font-size:12px; color:var(--muted);}
.fc-back-word{font-size:22px; font-weight:700; color:var(--topic-ink);}
.fc-vi{font-size:22px; font-weight:700; line-height:1.3;}
.fc-en{font-size:15px; color:var(--muted); line-height:1.5; margin:0;}
.fc-ex{font-size:15px; font-style:italic; line-height:1.5; margin:0; background:rgba(255,255,255,.7); border-radius:var(--r-md); padding:var(--s-sm) var(--s-md);}
.fc-syn{font-size:13px; color:var(--muted);}
.fc-syn b{color:var(--on-surface);}
.mark-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-md);}
.btn-mark{height:48px; border-radius:var(--r-full); font-size:15px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px;}
.btn-mark.is-unknown{background:rgba(185,28,28,.06); border:1.5px solid rgba(185,28,28,.35); color:var(--error);}
.btn-mark.is-known{background:rgba(22,163,74,.08); border:1.5px solid rgba(21,128,61,.4); color:var(--success-ink);}
.btn-mark.is-unknown[aria-pressed="true"]{background:var(--error); border-color:var(--error); color:#fff;}
.btn-mark.is-known[aria-pressed="true"]{background:var(--success); border-color:var(--success); color:#fff;}
.nav-row{display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s-sm);}
.btn-soft{height:44px; padding:0 var(--s-lg); border:var(--hairline); border-radius:var(--r-full); background:var(--surface);
  font-size:15px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px; box-shadow:var(--shadow);}
.counter{font-size:13px; color:var(--muted); text-align:center;}
.done-banner{padding:var(--s-md) var(--s-lg); border-radius:var(--r-xl); background:#EAF5E4; border:1px solid rgba(46,125,50,.2);}
.done-banner b{font-weight:700;}
.empty-state{min-height:380px; border-radius:var(--r-xl); border:2px dashed var(--topic-border); background:rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; padding:var(--s-xl);}
.shortcuts{background:var(--surface); border:var(--hairline); border-radius:var(--r-md); padding:0 var(--s-lg); font-size:13px; color:var(--muted);}
.shortcuts summary{min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--on-surface); cursor:pointer;}
.shortcuts dl{display:grid; grid-template-columns:1fr auto; gap:6px var(--s-md); margin:0 0 var(--s-md);}
.shortcuts dd{margin:0; text-align:right;}
kbd{font:600 12px/1 var(--font); background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.1); border-radius:6px; padding:3px 6px; color:var(--on-surface);}

/* ===== App runtime layers (sheet overlay, floating toast, card flip) ===== */
.sheet-layer{position:fixed; inset:0; z-index:40;}
.sheet-layer .sheet{margin:0 auto; max-width:480px; max-height:85vh; animation:sheetUp .22s ease;}
@keyframes sheetUp{from{transform:translateY(40px); opacity:0;} to{transform:none; opacity:1;}}
.toast.is-floating{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:50; width:max-content; max-width:calc(100% - 32px);}
.fc-scene{perspective:1400px;}
.fc-inner{position:relative; height:380px; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.4,0,.2,1); cursor:pointer;}
.fc-inner.is-flipped{transform:rotateY(180deg);}
.fc-inner .flashcard{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.fc-inner .flashcard.is-back{transform:rotateY(180deg); overflow-y:auto;}
[hidden]{display:none !important;}
.loading{padding:48px 0; text-align:center; color:var(--muted);}

/* ===== Shell: top nav (desktop) + bottom nav (phone) ===== */
.topnav{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:var(--hairline);}
.topnav-inner{max-width:1120px; margin:0 auto; padding:10px var(--s-lg); display:flex; align-items:center; justify-content:space-between; gap:var(--s-lg);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--on-surface);}
.brand-mark{font-size:30px; line-height:1;}
.brand-name{font:800 20px/1.1 var(--font-display); color:var(--primary-strong);}
.brand-tag{font-size:12px; color:var(--muted);}
.nav-links{display:flex; gap:6px;}
.nav-link{min-height:44px; padding:0 14px; border-radius:var(--r-md); display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; color:var(--muted); font-weight:700; font-size:15px;}
.nav-link:hover{background:rgba(46,125,50,.06); color:var(--on-surface);}
.nav-link[aria-current="page"]{background:rgba(46,125,50,.1); color:var(--primary-strong);}
.bottomnav{display:none;}
@media (max-width:760px){
  .topnav .nav-links{display:none;}
  .brand-tag{display:none;}
  .bottomnav{display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:rgba(255,255,255,.96); border-top:var(--hairline); padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
  .bottomnav .nav-link{flex-direction:column; gap:2px; min-height:52px; justify-content:center; padding:0 4px; font-size:12px;}
  .bottomnav .nav-ico{font-size:20px;}
  body{padding-bottom:76px;}
}
.page-wide{max-width:1120px; margin:0 auto; padding:var(--s-xl) var(--s-lg) 48px;}
.page-head{margin:0 0 var(--s-lg);}
.page-head h1{font:800 28px/1.2 var(--font-display); color:var(--primary-strong); margin:0;}
.page-head p{margin:4px 0 0; color:var(--muted);}
.page-wide .topic-grid.is-app{grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:var(--s-lg);}

/* ===== Home dashboard ===== */
.card{background:var(--surface); border:var(--hairline); border-radius:var(--r-xl); box-shadow:var(--shadow); padding:var(--s-xl);}
.card-title{display:flex; align-items:center; justify-content:space-between; gap:var(--s-sm); margin:0 0 var(--s-lg);
  font:800 18px/1.3 var(--font); color:var(--on-surface);}
.card-title a{font-size:13px; font-weight:700; color:var(--primary); text-decoration:none;}
.home-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-lg);}
.home-grid > *{min-width:0;}
@media (min-width:900px){ .home-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);} }
.hero{position:relative; overflow:hidden; display:grid; grid-template-columns:1fr; gap:var(--s-lg); align-items:center;
  background:radial-gradient(600px 300px at 80% 30%, rgba(245,179,1,.12), transparent 60%), linear-gradient(135deg, #F4FAEC 0%, #FFFDF6 70%);}
@media (min-width:640px){ .hero{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); padding-bottom:0;} .hero > div:first-child{padding-bottom:var(--s-xl);} .hero-art{align-self:end;} .hero-art img{max-height:300px; display:block;} }
.hero-art{display:flex; justify-content:center; align-items:center; min-height:180px;}
.hero-art img{max-width:100%; max-height:260px; object-fit:contain;}
.art-fallback{font-size:96px; line-height:1; filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));}
.hero h1{font:800 34px/1.15 var(--font-display); margin:0 0 var(--s-md); color:var(--on-surface);}
.hero h1 .accent{color:var(--primary); white-space:nowrap;}
@media (min-width:1024px){ .hero h1{font-size:40px;} }
@media (max-width:639px){ .hero-art{min-height:0;} .hero-art img{max-height:170px;} .hero .art-fallback{font-size:72px;} }
.hero ul{list-style:none; padding:0; margin:0 0 var(--s-xl); display:flex; flex-direction:column; gap:6px; color:var(--muted); font-weight:600;}
.hero li::before{content:"✓"; color:var(--primary); font-weight:800; margin-right:8px;}
.btn-primary{text-decoration:none; font-weight:800;}
.today-list{display:flex; flex-direction:column; gap:var(--s-md);}
.today-item{display:flex; align-items:center; gap:var(--s-md); padding:var(--s-md); border-radius:var(--r-lg); border:var(--hairline);
  background:var(--surface); text-decoration:none; color:var(--on-surface); min-height:64px; transition:transform .15s ease;}
.today-item:hover{transform:translateX(3px);}
.today-ico{width:44px; height:44px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 auto;}
.today-ico.is-purple{background:#F3EEFE;} .today-ico.is-blue{background:#EAF1FC;} .today-ico.is-green{background:#EAF5E4;}
.today-text{flex:1; min-width:0;}
.today-text b{display:block; font-size:15px;}
.today-text span{font-size:13px; color:var(--muted);}
.today-arrow{color:var(--muted); font-size:20px;}
.word-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:var(--s-md);}
.word-card{position:relative; text-align:left; border:none; border-radius:var(--r-lg); padding:var(--s-lg); min-height:120px;
  display:flex; flex-direction:column; gap:2px; background:var(--wc-bg); color:var(--wc-ink);}
.word-card.is-green{--wc-bg:#EAF5E4; --wc-ink:#2E7D32;} .word-card.is-pink{--wc-bg:#FDEEF3; --wc-ink:#BE185D;} .word-card.is-blue{--wc-bg:#EAF1FC; --wc-ink:#1D4ED8;}
.word-card .wc-word{font:800 18px/1.25 var(--font); color:var(--wc-ink);}
.word-card .wc-pos{font-size:12px; color:var(--muted);}
.word-card .wc-vi{margin-top:auto; font-size:14px; color:var(--on-surface); padding-right:52px;}
.word-card .btn-icon{position:absolute; right:10px; bottom:10px; background:rgba(255,255,255,.75); color:var(--wc-ink);}
.pron-word{display:flex; align-items:center; justify-content:space-between; gap:var(--s-sm);}
.pron-word b{font:800 22px/1.2 var(--font);}
.pron-controls{display:flex; align-items:center; gap:var(--s-sm);}
.wave{display:flex; align-items:center; gap:3px; height:40px; margin:var(--s-md) 0;}
.wave span{flex:1; border-radius:3px; background:rgba(46,125,50,.35); height:var(--h);}
.wave.is-live span{animation:wave 0.9s ease-in-out infinite; animation-delay:var(--d); background:var(--listening);}
@keyframes wave{50%{transform:scaleY(.35);}}
.pron-result{min-height:44px; margin-bottom:var(--s-md);}
.pron-result .result{width:100%;}
.today-card{display:flex; flex-direction:column;}
.mascot{margin-top:auto; padding-top:var(--s-lg); display:flex; align-items:flex-end; justify-content:flex-end; gap:var(--s-sm);}
.mascot-bubble{max-width:200px; background:var(--surface); border:2px solid var(--primary-strong); border-radius:20px;
  padding:10px 14px; font:700 14px/1.35 var(--font-display); color:var(--primary-strong); margin-bottom:28px; position:relative;}
.mascot-bubble::after{content:""; position:absolute; right:-10px; bottom:14px; border:8px solid transparent; border-left-color:var(--primary-strong);}
.mascot-art{width:96px; flex:0 0 auto; display:flex; justify-content:center;}
.mascot-art img{width:96px; height:auto;}
.mascot .art-fallback{font-size:64px;}
@media (max-width:639px){
  .word-cards{grid-auto-flow:column; grid-auto-columns:72%; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px;}
  .word-card{scroll-snap-align:start;}
}

/* ===== Sprout: single-topic pages ===== */
.topic-head{display:flex; flex-direction:column; gap:var(--s-sm);}
.crumb{align-self:flex-start; min-height:44px; padding:0 var(--s-md) 0 0; border:none; background:none; font-weight:800; font-size:14px; color:var(--primary);}
.crumb:hover{text-decoration:underline;}
.topic-head-main{display:flex; align-items:center; gap:var(--s-md);}
.topic-head-icon{width:56px; height:56px; border-radius:var(--r-lg); background:var(--topic-tint); display:flex; align-items:center; justify-content:center; font-size:30px; flex:0 0 auto;}
.topic-head h1{font:800 28px/1.15 var(--font-display); color:var(--topic-ink); margin:0;}
.topic-head p{margin:2px 0 0; color:var(--muted); font-weight:600; font-size:14px;}
.passage-title{font-family:var(--font-display); font-weight:800;}
.flashcard{border-radius:var(--r-xl);}
.fc-word{font-family:var(--font); font-weight:800;}
.fc-back-word{font-family:var(--font-display);}
.btn-mark, .btn-soft{font-weight:800;}

/* Mascot cheer (done states, perfect reading) */
.cheer{display:flex; align-items:center; gap:var(--s-md); width:100%;}
.cheer-art{width:84px; flex:0 0 auto; display:flex; justify-content:center;}
.cheer-art img{width:84px; height:auto;}
.cheer .art-fallback{font-size:56px;}
.cheer-bubble{position:relative; flex:1; background:var(--surface); border:2px solid var(--primary-strong); border-radius:20px;
  padding:10px 14px; font-size:14px; line-height:1.45; color:var(--on-surface);}
.cheer-bubble b{font:800 16px/1.3 var(--font-display); color:var(--primary-strong);}
.cheer-bubble::before{content:""; position:absolute; left:-10px; top:50%; margin-top:-8px; border:8px solid transparent; border-right-color:var(--primary-strong);}
.heard .cheer{max-width:460px;}

/* IPA tiles in the Sprout look */
.phoneme-tile, .pair-tile{border-radius:var(--r-lg); transition:transform .15s ease, border-color .15s ease;}
.phoneme-tile:hover, .pair-tile:hover{border-color:rgba(46,125,50,.35);}
.page-wide .ipa-grid{grid-template-columns:repeat(auto-fill, minmax(84px,1fr));}
.page-wide .pair-grid{grid-template-columns:repeat(auto-fill, minmax(160px,1fr));}
.section-title{font:800 15px/1.3 var(--font); text-transform:none; letter-spacing:0; color:var(--on-surface); margin-top:var(--s-lg);}