:root{
  --bg: #11151c;
  --bg-panel: #171c25;
  --bg-panel-2: #1c2230;
  --hairline: #262e3a;
  --ink: #f1ede3;
  --ink-dim: #98a2b3;
  --ink-faint: #5b6675;
  --gold: #e0a458;
  --gold-dim: #a9824f;
  --scale: 1;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
.hidden{ display:none !important; }
/* Guard against horizontal overflow without overflow-x:hidden on body/html,
   which is known to silently break touch-scrolling on iOS Safari. */
.word, .sentence, .sentence-pron, .translation, .home-title, .home-copy, .ipa-value{ overflow-wrap:break-word; word-break:break-word; }
html,body{margin:0;padding:0; overscroll-behavior-y:contain; width:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  user-select:none;
  -webkit-user-select:none;
}
input, textarea{ user-select:text; -webkit-user-select:text; }
button, [role="button"]{ touch-action:manipulation; }
.ui, input, button, .meta, .num, .translation, .empty, .count, .footnote{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--gold); color:#11151c; padding:10px 16px; border-radius:0 0 8px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.85rem; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---- Header ---- */
header{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(var(--bg) 82%, transparent);
  padding:calc(14px + var(--safe-top)) 18px 10px;
  border-bottom:1px solid var(--hairline);
}
.title-row{ max-width:620px; margin:0 auto; }
.brand-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.logo-mark{ flex:none; width:48px; height:16px; }
.brand-name{
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif;
  font-size:1.3rem; font-weight:700; letter-spacing:.01em; color:var(--ink);
}
.steps-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.7rem; letter-spacing:.02em;
}
.steps-row .step{ color:var(--gold); }
.steps-row .arrow{ color:var(--ink-faint); }

.mini-progress-row{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.mini-progress-track{
  flex:1; height:5px; border-radius:3px; background:var(--bg-panel-2); overflow:hidden;
}
.mini-progress-fill{
  height:100%; width:0%; border-radius:3px;
  background:linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition:width .3s ease;
}
.mini-progress-label{
  flex:none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.68rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

.search-wrap{
  position:relative;
  max-height:120px;
  overflow:hidden;
  transition:max-height .22s ease, opacity .22s ease, margin .22s ease;
}
.search-wrap.hidden{ max-height:0; opacity:0; margin:0; pointer-events:none; }
#search{
  width:100%; background:var(--bg-panel); border:1px solid var(--hairline);
  color:var(--ink); font-size:1.05rem; padding:12px 14px; border-radius:8px; outline:none;
}
#search::placeholder{ color:var(--ink-faint); }
#search:focus{ border-color:var(--gold-dim); }
.filters{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.filter{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg-panel-2); color:var(--ink-dim); border:1px solid var(--hairline);
  border-radius:999px; padding:6px 12px; font-size:.72rem; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.filter[aria-pressed="true"]{ color:#11151c; background:var(--gold); border-color:var(--gold); font-weight:600; }
.count{ font-size:.72rem; color:var(--ink-faint); margin-top:8px; }

/* ---- Main list ---- */
main{
  max-width:620px; margin:0 auto;
  padding:8px 18px calc(88px + var(--safe-bottom));
}

.entry{
  display:flex; align-items:flex-start; gap:12px; padding:20px 0;
  border-bottom:1px solid var(--hairline);
  content-visibility:auto; contain-intrinsic-size:220px;
  transition:opacity .15s ease;
}
.entry:last-child{ border-bottom:none; }
.entry.is-known{ opacity:.6; }
.entry-main{ flex:1; min-width:0; }
.entry-actions{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:2px;
}
.action-btn{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--hairline); background:var(--bg-panel-2); color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.action-btn svg{ width:15px; height:15px; }
.action-btn svg.fill{ fill:currentColor; }
.action-btn svg.stroke{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.action-btn:hover{ color:var(--ink); border-color:var(--gold-dim); }
.action-btn.active, .action-btn.playing, .action-btn.listening{ color:var(--gold); border-color:var(--gold-dim); }
.action-btn.known-btn[aria-pressed="true"]{ color:#11151c; background:var(--gold); border-color:var(--gold); }
.action-btn:disabled{ opacity:.4; cursor:default; }
.action-btn.info-btn{ font-family: Georgia, serif; font-style:italic; font-size:.78rem; line-height:1; }

.head{ display:flex; align-items:baseline; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.num{ font-size:.7rem; color:var(--ink-faint); min-width:2em; font-variant-numeric:tabular-nums; }
.word{ font-size:calc(1.42rem * var(--scale)); font-weight:700; color:var(--ink); }
.word-pron{
  font-size:calc(.92rem * var(--scale)); color:var(--gold);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; letter-spacing:.02em;
}
.known-badge{
  display:none; align-items:center; gap:4px; font-size:.65rem; color:var(--gold);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing:.03em; text-transform:uppercase; margin-left:auto;
}
.entry.is-known .known-badge{ display:flex; }
.known-badge svg{ width:11px; height:11px; }

.ipa-box{
  background:var(--bg-panel); border-left:2px solid var(--gold-dim); border-radius:4px;
  padding:10px 14px; margin-bottom:12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ipa-box.hidden{ display:none; }
.ipa-line{ display:flex; gap:10px; font-size:.85rem; margin-bottom:4px; }
.ipa-label{ flex:none; width:4.2em; color:var(--ink-faint); text-transform:uppercase; font-size:.68rem; letter-spacing:.04em; padding-top:.2em; }
.ipa-value{ color:var(--ink); }
.ipa-note{ margin:10px 0 0; font-size:.8rem; line-height:1.5; color:var(--ink-dim); }
.ipa-note.ipa-confusable{ color:var(--ink-faint); }
.ipa-tag{ display:block; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:2px; }

.sentence{ font-size:calc(1.18rem * var(--scale)); line-height:1.5; color:var(--ink-dim); margin-bottom:4px; }
.entry.practicing .sentence, .entry.practicing .sentence-pron{ filter:blur(7px); user-select:none; transition:filter .15s ease; }
.sentence-pron{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:calc(.96rem * var(--scale)); letter-spacing:.03em; color:var(--gold); margin-bottom:12px;
}
.translation{ font-size:calc(1.02rem * var(--scale)); color:var(--ink-dim); }

#sentinel{ height:1px; }
.empty{ text-align:center; color:var(--ink-faint); font-size:.9rem; padding:60px 20px; }

/* ---- Practice / Voice boxes ---- */
.practice-box, .voice-box{
  margin-top:12px; margin-bottom:4px; padding:12px 14px;
  background:var(--bg-panel); border:1px solid var(--hairline); border-radius:10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.practice-box.hidden, .voice-box.hidden{ display:none; }
.practice-hint, .voice-hint{ margin:0 0 8px; font-size:.74rem; color:var(--ink-faint); }
.practice-input-inline, .voice-transcript{
  width:100%; background:var(--bg-panel-2); border:1px solid var(--hairline); border-radius:8px;
  color:var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:1.05rem; line-height:1.45; padding:12px 12px; outline:none; min-height:52px;
}
.practice-input-inline{ resize:vertical; }
.practice-input-inline:focus{ border-color:var(--gold-dim); }
.voice-transcript{ min-height:48px; white-space:pre-wrap; word-break:break-word; }
.voice-transcript.listening{ border-color:var(--gold-dim); box-shadow:0 0 0 1px var(--gold-dim); }
.voice-transcript .interim{ color:var(--ink-faint); font-style:italic; }
.practice-entry-actions, .voice-entry-actions{ display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.practice-check-btn, .practice-reveal-btn, .voice-check-btn, .voice-stop-btn, .voice-retry-btn{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.76rem; font-weight:600; padding:9px 14px; border-radius:7px; cursor:pointer; min-height:36px;
}
.practice-check-btn, .voice-check-btn{ background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#11151c; border:none; }
.practice-reveal-btn, .voice-stop-btn, .voice-retry-btn{ background:var(--bg-panel-2); color:var(--ink-dim); border:1px solid var(--hairline); }
.practice-reveal-btn:hover, .voice-stop-btn:hover, .voice-retry-btn:hover{ color:var(--ink); border-color:var(--gold-dim); }
.practice-entry-result, .voice-entry-result{ margin-top:10px; font-size:.85rem; }
.practice-entry-result:empty, .voice-entry-result:empty{ margin-top:0; }
.practice-box-msg, .voice-box-msg{ margin-bottom:6px; }
.practice-box-msg.ok, .voice-box-msg.ok{ color:#a9d8bc; }
.practice-box-msg.bad, .voice-box-msg.bad{ color:var(--ink-dim); }
.practice-correct-sentence, .voice-correct-sentence{
  line-height:1.7; font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif; font-size:1.02rem;
}
.diff-word{ margin-right:3px; }
.diff-word.diff-ok{ color:var(--ink-dim); }
.diff-word.diff-bad{ color:var(--gold); font-weight:700; text-decoration:underline; text-decoration-color:var(--gold-dim); text-underline-offset:3px; }

::selection{ background:var(--gold-dim); color:#11151c; }

/* ---- Bottom nav ---- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:rgba(23,28,37,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--hairline); padding-bottom:var(--safe-bottom);
}
.nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 0 8px; background:none; border:none; color:var(--ink-faint);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.66rem; letter-spacing:.01em; cursor:pointer; min-height:48px;
}
.nav-btn svg{ width:22px; height:22px; }
.nav-btn.active{ color:var(--gold); }

/* ---- Settings bottom sheet ---- */
.sheet-backdrop{
  position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.5); opacity:1; transition:opacity .22s ease;
}
.sheet-backdrop.hidden{ opacity:0; pointer-events:none; }
.settings-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:36; max-width:620px; margin:0 auto;
  background:var(--bg-panel); border:1px solid var(--hairline); border-bottom:none;
  border-radius:18px 18px 0 0; padding:10px 20px calc(24px + var(--safe-bottom));
  max-height:85vh; overflow-y:auto;
  transform:translateY(0); transition:transform .25s ease, opacity .25s ease;
}
.settings-sheet.hidden{ transform:translateY(100%); opacity:0; pointer-events:none; }
.sheet-handle{ width:36px; height:4px; border-radius:2px; background:var(--hairline); margin:6px auto 14px; }
.sheet-title{
  margin:0 0 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.95rem; font-weight:600; color:var(--ink);
}
.sheet-progress{ margin-bottom:18px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.sheet-progress-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:.85rem; color:var(--ink); margin-bottom:8px; }
.sheet-progress-percent{ color:var(--gold); font-variant-numeric:tabular-nums; }
.progress-track{ height:6px; border-radius:3px; background:var(--bg-panel-2); overflow:hidden; }
.progress-fill{ height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg, var(--gold-dim), var(--gold)); transition:width .3s ease; }
.sheet-progress-sub{ font-size:.72rem; color:var(--ink-faint); margin-top:8px; }

.speed-row{ display:flex; align-items:center; gap:10px; margin-top:0; margin-bottom:18px; font-size:.74rem; color:var(--ink-dim); }
.speed-row label{ flex:none; white-space:nowrap; }
.speed-row input[type="range"]{ flex:1; accent-color: var(--gold); height:4px; }
#speed-val{ flex:none; min-width:3.4em; text-align:right; color:var(--gold); font-variant-numeric: tabular-nums; }
.font-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; font-size:.74rem; color:var(--ink-dim); }
.font-row-label{ flex:none; white-space:nowrap; }
.font-btns{ display:flex; gap:6px; }
.font-btn{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg-panel-2); color:var(--ink-dim); border:1px solid var(--hairline);
  border-radius:7px; padding:8px 12px; font-size:.76rem; cursor:pointer; min-height:36px;
  transition:border-color .15s ease, color .15s ease;
}
.font-btn:hover{ color:var(--ink); border-color:var(--gold-dim); }
.font-btn:active{ color:var(--gold); }

.sheet-divider{ height:1px; background:var(--hairline); margin:4px 0 16px; }
.sheet-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.sheet-row-title{ font-size:.85rem; color:var(--ink); font-weight:600; margin-bottom:2px; }
.sheet-row-help{ font-size:.72rem; color:var(--ink-faint); margin:0; }
.sheet-btn{
  flex:none; background:var(--bg-panel-2); color:var(--ink-dim); border:1px solid var(--hairline);
  border-radius:8px; padding:9px 14px; font-size:.78rem; font-weight:600; cursor:pointer; min-height:38px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition:border-color .15s ease, color .15s ease;
}
.sheet-btn:hover{ color:var(--ink); border-color:var(--gold-dim); }
.sheet-btn-gold{ background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#11151c; border:none; }
.install-btn{ display:none; }
.install-btn.show{ display:inline-flex; align-items:center; }

/* ---- Toast ---- */
.toast{
  position:fixed; left:50%; bottom:calc(76px + var(--safe-bottom)); transform:translate(-50%, 12px);
  background:var(--bg-panel-2); color:var(--ink); border:1px solid var(--hairline);
  padding:10px 18px; border-radius:999px; font-size:.78rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:40;
  max-width:88vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

@media (max-width:480px){
  .word{ font-size:calc(1.26rem * var(--scale)); }
  .sentence{ font-size:calc(1.08rem * var(--scale)); }
  .action-btn{ width:32px; height:32px; }
}

/* ==================== HOME SCREEN ==================== */
.home-view{
  min-height:100vh; min-height:100dvh;
  padding:calc(28px + var(--safe-top)) 24px calc(40px + var(--safe-bottom));
  display:flex; flex-direction:column; justify-content:center;
}
.home-inner{ max-width:480px; margin:0 auto; width:100%; }
.home-brand-row{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.logo-mark{ flex:none; width:48px; height:16px; }
.logo-mark-lg{ width:56px; height:19px; }
.home-eyebrow{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  margin-bottom:10px;
}
.home-title{
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif;
  font-size:clamp(1.8rem, 7vw, 2.4rem); line-height:1.2; font-weight:700; color:var(--ink);
  margin:0 0 14px;
}
.home-title em{ color:var(--gold); font-style:normal; }
.home-copy{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.95rem; line-height:1.55; color:var(--ink-dim); margin:0 0 24px;
}
.home-actions{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.btn-primary, .btn-secondary{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:1rem; font-weight:700; padding:15px 20px; border-radius:12px; cursor:pointer;
  min-height:52px; text-align:center;
}
.btn-primary{ background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#11151c; border:none; }
.btn-secondary{ background:var(--bg-panel-2); color:var(--ink); border:1px solid var(--hairline); }
.btn-secondary:hover{ border-color:var(--gold-dim); }

.home-card{
  background:var(--bg-panel); border:1px solid var(--hairline); border-radius:14px;
  padding:18px 20px; margin-bottom:14px;
}
.home-card-eyebrow{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dim);
  margin-bottom:8px;
}
.home-card-copy{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.85rem; line-height:1.5; color:var(--ink-dim); margin:0;
}
.home-progress-number{
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif;
  font-size:1.7rem; font-weight:700; color:var(--ink); margin-bottom:2px;
}
.home-progress-of{ font-size:1rem; color:var(--ink-faint); font-weight:400; }
.home-progress-card .progress-track{ margin-top:12px; }
.home-progress-percent{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.72rem; color:var(--gold); margin-top:6px; text-align:right;
}
.method-steps{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.method-step{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.85rem; color:var(--ink-dim);
}
.method-step b{ color:var(--gold); margin-right:8px; }
.home-footer{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.68rem; color:var(--ink-faint); text-align:center; margin-top:8px;
}

/* Back button (practice header) */
.back-btn{
  flex:none; width:30px; height:30px; border-radius:50%; border:none; background:transparent;
  color:var(--ink-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  margin-right:2px;
}
.back-btn svg{ width:20px; height:20px; }
.back-btn:hover{ color:var(--gold); }