:root{
  --bg: #11151c;
  --bg-panel: #171c25;
  --bg-panel-2: #1c2230;
  --hairline: #262e3a;
  --ink: #c9c4b8;
  --ink-dim: #98a2b3;
  --ink-faint: #748094;
  --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; }
/* Explicit view visibility: keeps the redesigned shell from ever overriding the app state. */
.practice-view{ display:block; min-height:100vh; min-height:100dvh; }
.practice-view.hidden{ display:none !important; }
.home-view.hidden{ display:none !important; }
#list{ display:block; min-height:1px; }
/* 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; }
/* ---- Accessibility foundation ---- */
.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
:focus-visible{
  outline:2px solid var(--gold) !important;
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

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;
}
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;
}
#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.65; color:var(--ink); margin-bottom:4px; letter-spacing:.01em; }
.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; min-height:52px;
}
.practice-input-inline{ resize:vertical; font-size:1.25rem; line-height:1.5; }
.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);
}
/* Hide search navigation while the Frases view is active. */
#main.connect-mode ~ #bottom-nav #nav-search-btn{ display:none !important; }

.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; }
body.sheet-locked{ width:100%; overflow:hidden; }
.settings-sheet{ overscroll-behavior:contain; }
.instructions-sheet-el{ max-height:72vh; }
.sheet-handle{ width:36px; height:4px; border-radius:2px; background:var(--hairline); margin:6px auto 14px; }
.sheet-header-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sheet-header-row .sheet-title{ margin-bottom:0; padding-top:4px; }
.sheet-close-btn{
  flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel-2); border:1px solid var(--hairline); color:var(--ink-dim); cursor:pointer;
}
.sheet-close-btn svg{ width:16px; height:16px; }
.sheet-close-btn:active{ color:var(--gold); border-color:var(--gold-dim); }
.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; }

.phonetic-guide{ display:flex; flex-direction:column; gap:16px; margin-bottom:4px; }
.phonetic-item{ padding-bottom:14px; border-bottom:1px solid var(--hairline); }
.phonetic-item:last-child{ border-bottom:none; padding-bottom:0; }
.phonetic-symbol{
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif;
  font-size:1.05rem; font-weight:700; color:var(--gold); margin-bottom:4px; letter-spacing:.02em;
}
.phonetic-desc{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.82rem; line-height:1.55; color:var(--ink-dim); margin:0;
}
.phonetic-desc strong{ color:var(--gold); font-weight:700; }
.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; }
.start-label{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--ink-dim);
}
.start-row{ display:flex; flex-direction:column; gap:10px; }
.start-row .start-go-btn{ width:100%; }
.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;
}
.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); }

.header-icon-btn{
  flex:none; width:32px; height:32px; 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;
  margin-left:auto;
}
.header-icon-btn svg{ width:16px; height:16px; }
.header-icon-btn:hover{ color:var(--gold); border-color:var(--gold-dim); }
.grammar-search-wrap{ max-width:620px; margin:10px auto 0; }
.grammar-search-wrap.hidden{ display:none; }
.grammar-search-wrap input{
  width:100%; height:40px; border-radius:10px; border:1px solid var(--hairline); background:var(--bg-panel);
  color:var(--ink); padding:0 14px; font-size:.92rem; font-family:inherit;
}
.grammar-search-wrap input:focus{ border-color:var(--gold-dim); }
.gi-level-badge{
  flex:none; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:.62rem; font-weight:700;
  color:var(--gold); background:var(--bg-panel-2); border:1px solid var(--hairline); border-radius:6px; padding:2px 6px;
}

/* ---- Conectando Frases (Baby Steps / Método Noah) ---- */
.connect-view{
  display:flex; flex-direction:column;
  padding-top:4px; padding-bottom:8px;
}
.connect-mode-btn{
  flex:1; height:40px; border-radius:10px; border:1px solid var(--hairline);
  background:var(--bg-panel-2); color:var(--ink-dim); cursor:pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.82rem; font-weight:600;
}
.connect-mode-btn.active{ background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#11151c; border-color:transparent; }

.connect-chips{ flex:none; display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.connect-chip{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg-panel-2); color:var(--ink-faint); border:1px solid var(--hairline);
  border-radius:999px; padding:6px 12px; font-size:.72rem; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.connect-chip.active{ color:#11151c; background:var(--gold); border-color:var(--gold); font-weight:600; }

.connect-card{
  flex:0 1 auto; min-height:0; background:var(--bg-panel); border:1px solid var(--hairline); border-radius:18px;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:var(--gold-dim) transparent;
}
.connect-card::-webkit-scrollbar{ width:8px; }
.connect-card::-webkit-scrollbar-track{ background:transparent; }
.connect-card::-webkit-scrollbar-thumb{ background:var(--gold-dim); border-radius:8px; }
.connect-card-top{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:12px 18px 4px; position:sticky; top:0; z-index:1; background:var(--bg-panel); }
.connect-progress{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.68rem; letter-spacing:.05em; color:var(--ink-faint); text-transform:uppercase;
}
.connect-progress b{ color:var(--gold); }

.connect-split{ flex:none; display:flex; flex-direction:column; padding:2px 0; }
.connect-half{
  flex:none; padding:10px 22px; font-size:calc(1.18rem * var(--connect-scale, 1)); line-height:1.4; color:var(--ink);
}
.connect-half.hidden{ display:none; }
.connect-half-pron{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:calc(.78rem * var(--connect-scale, 1)); line-height:1.4; color:var(--ink-dim); margin-top:6px; letter-spacing:.01em;
}

.connect-zone{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 22px; margin:2px 0;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.connect-zone.no-top{ border-top:none; }
.connect-badge{
  background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#11151c;
  padding:5px 15px; border-radius:999px; font-weight:700; font-size:calc(.78rem * var(--connect-scale, 1));
  white-space:nowrap; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.connect-badge-pron{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:calc(.7rem * var(--connect-scale, 1)); color:var(--ink-faint); letter-spacing:.01em;
}

.connect-meta{ flex:none; padding:10px 22px 12px; border-top:1px solid var(--hairline); }
.connect-translation{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:calc(.83rem * var(--connect-scale, 1)); line-height:1.4; color:var(--ink-faint);
}

.connect-advance-btn{
  position:fixed; left:18px; right:18px; max-width:584px; margin:0 auto;
  height:46px; border-radius:14px; border:none; cursor:pointer; z-index:15;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.92rem; font-weight:600;
  background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#11151c;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.connect-advance-btn:active{ transform:scale(.98); }


/* ---- Tela de Frases (lista) ---- */
.connect-head{ flex:none; margin:2px 0 12px; }
.connect-title{ margin:0; font-size:1.55rem; color:var(--ink); }
.connect-sub{ margin:4px 0 0; font-size:.8rem; line-height:1.4; color:var(--ink-dim); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.connect-mode-row{ flex:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; margin-bottom:10px; }
.connect-mode-btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; height:38px; border-radius:999px; font-size:.78rem; padding:0 8px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.connect-mode-btn svg{ width:14px; height:14px; flex:none; }
.connect-list{
  display:flex; flex-direction:column; gap:10px;
}
.connect-item{ flex:none; display:flex; align-items:flex-start; gap:12px; padding:14px; background:var(--bg-panel); border:1px solid var(--hairline); border-radius:14px; }
.connect-item.is-learned{ opacity:.6; }
.ci-learned-btn[aria-pressed="true"]{ color:#11151c; background:var(--gold); border-color:var(--gold); }
.ci-num{ flex:none; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:calc(.72rem * var(--connect-scale,1)); color:var(--ink-faint); padding-top:.35em; }
.ci-body{ flex:1; min-width:0; }
.ci-en{ font-size:calc(1.08rem * var(--connect-scale,1)); line-height:1.35; color:var(--ink); }
.ci-en mark{ background:none; color:var(--gold); font-weight:600; }
.ci-qa-label{ color:var(--ink-dim); font-weight:700; }
.ci-qa-answer{ display:block; margin-top:4px; }
.verb-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.verb-inf{ font-weight:700; color:var(--gold); font-size:calc(1.02rem * var(--connect-scale,1)); }
.verb-pt{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:calc(.8rem * var(--connect-scale,1)); color:var(--ink-faint); }
.verb-forms{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:8px; }
.verb-forms .vf{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:calc(.76rem * var(--connect-scale,1)); color:var(--ink-dim); }
.verb-forms .vf b{ color:var(--ink-faint); font-weight:600; margin-right:3px; }
.ci-pron{ margin-top:4px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:calc(.74rem * var(--connect-scale,1)); color:var(--ink-dim); }
.ci-tr{ margin-top:3px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:calc(.82rem * var(--connect-scale,1)); color:var(--ink-faint); }
.ci-actions{ flex:none; display:flex; align-items:center; gap:4px; }
.ci-empty{ color:var(--ink-faint); text-align:center; padding:24px 0; font-size:.85rem; }
.connect-back-top-btn{
  align-self:center; margin-top:4px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:.78rem; font-weight:600; color:var(--ink-dim);
  background:var(--bg-panel); border:1px solid var(--hairline); border-radius:999px;
  padding:10px 18px; cursor:pointer;
}
.connect-back-top-btn:hover{ color:var(--gold); border-color:var(--gold-dim); }

/* Botão X nos campos de busca */
.clearable{ position:relative; width:100%; }
.clearable input{ padding-right:42px !important; }
.clearable input::-webkit-search-cancel-button, .clearable input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; }
.clear-x{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; padding:8px; border:none; border-radius:50%;
  background:transparent; color:var(--ink-faint); cursor:pointer;
}
.clear-x svg{ width:100%; height:100%; }
.clear-x:hover, .clear-x:active{ color:var(--gold); }


/* ============================================================
   Frequency 2.4.4 — Frases: alinhamento com o layout principal
   Tipografia, espaçamento e largura seguem o mesmo ritmo visual
   usado na tela principal de conteúdo.
   ============================================================ */

.connect-list{
  gap:0;
  padding-right:0;
}

.connect-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:20px 0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--hairline);
  border-radius:0;
}

.connect-item:last-child{
  border-bottom:none;
}

.ci-num{
  font-size:.72rem;
  padding-top:.35em;
}

.ci-en{
  font-size:calc(1.18rem * var(--connect-scale, 1));
  line-height:1.65;
  letter-spacing:.01em;
}

.ci-pron{
  margin-top:0;
  margin-bottom:12px;
  font-size:calc(.96rem * var(--connect-scale, 1));
  line-height:1.4;
  letter-spacing:.03em;
}

.ci-tr{
  margin-top:0;
  font-size:calc(1.02rem * var(--connect-scale, 1));
  line-height:1.45;
}

.ci-actions{
  padding-top:2px;
}

@media (max-width:480px){
  .ci-en{
    font-size:calc(1.08rem * var(--connect-scale, 1));
  }
}

/* ==================== GRAMMAR SCREEN ==================== */
.grammar-view{ min-height:100vh; min-height:100dvh; }
.grammar-main{
  max-width:620px; margin:0 auto;
  padding:14px 18px calc(32px + var(--safe-bottom));
}
.grammar-level-tabs{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.grammar-level-tabs::-webkit-scrollbar{ display:none; }
.grammar-level-tab{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:76px; padding:10px 12px; border-radius:12px; border:1px solid var(--hairline);
  background:var(--bg-panel-2); color:var(--ink-dim); cursor:pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.grammar-level-tab .glt-code{ font-size:.9rem; font-weight:700; }
.grammar-level-tab .glt-count{ font-size:.62rem; color:var(--ink-faint); }
.grammar-level-tab.active{ background:linear-gradient(135deg, var(--gold), var(--gold-dim)); color:#11151c; border-color:transparent; }
.grammar-level-tab.active .glt-count{ color:#11151c; opacity:.75; }

.grammar-level-heading{
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif;
  font-size:1.05rem; font-weight:700; color:var(--ink); margin:6px 2px 12px;
}

.grammar-list{ display:flex; flex-direction:column; gap:8px; }
.grammar-item{
  display:flex; align-items:center; gap:12px; padding:14px; background:var(--bg-panel);
  border:1px solid var(--hairline); border-radius:14px; cursor:pointer; text-align:left;
  width:100%; font-family:inherit; color:inherit;
}
.grammar-item:hover{ border-color:var(--gold-dim); }
.grammar-item.is-watched{ opacity:.6; }
.gi-flag{
  flex:none; width:30px; height:30px; 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;
}
.gi-flag svg{ width:14px; height:14px; }
.gi-flag[aria-pressed="true"]{ color:#11151c; background:var(--gold); border-color:var(--gold); }
.gi-num{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--bg-panel-2);
  color:var(--ink-faint); display:flex; align-items:center; justify-content:center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.72rem; font-weight:600;
}
.gi-topic{ flex:1; min-width:0; font-size:1rem; color:var(--ink); }
.gi-play{
  flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline);
  background:var(--bg-panel-2); color:var(--gold); display:flex; align-items:center; justify-content:center;
}
.gi-play svg{ width:15px; height:15px; margin-left:2px; }
.gi-play svg.fill{ fill:currentColor; }

/* ==================== VIDEO MODAL ==================== */
.video-modal{
  position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
}
.video-modal.hidden{ display:none; }
.video-modal-backdrop{ position:absolute; inset:0; background:rgba(10,12,16,.78); }
.video-modal-sheet{
  position:relative; width:100%; max-width:640px; background:var(--bg-panel);
  border-radius:18px 18px 0 0; overflow:hidden;
  padding-bottom:var(--safe-bottom);
  animation:videoSheetIn .22s ease;
}
@keyframes videoSheetIn{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.video-modal-frame-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-modal-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal-close{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2;
}
.video-modal-close svg{ width:17px; height:17px; }
.video-modal-info{ padding:16px 20px 20px; display:flex; align-items:center; gap:12px; }
.video-modal-info-text{ flex:1; min-width:0; }
.video-modal-fs-btn, .video-modal-fs-exit{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; flex:none;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.8rem; font-weight:600;
}
.video-modal-fs-btn{
  min-height:40px; padding:0 14px; border-radius:10px;
  background:var(--bg-panel-2); color:var(--ink); border:1px solid var(--gold-dim);
}
.video-modal-fs-btn svg, .video-modal-fs-exit svg{ width:17px; height:17px; }
.video-modal-fs-btn:hover{ border-color:var(--gold); color:var(--gold); }
.video-modal-fs-exit{
  position:absolute; top:calc(10px + var(--safe-top)); left:10px; z-index:3;
  min-height:36px; padding:0 12px; border-radius:18px; border:none;
  background:rgba(0,0,0,.6); color:#fff;
}
.video-modal-frame-wrap.pseudo-fs{
  position:fixed; inset:0; z-index:70; width:100vw; height:100vh; height:100dvh; aspect-ratio:auto;
}
.video-modal-frame-wrap.is-fs .video-modal-close{ display:none; }
/* Em pé (retrato): gira o player 90° para ele preencher a tela toda, como uma tela cheia em paisagem.
   Ao girar o celular (paisagem) a regra deixa de valer e o player só preenche a tela. */
@media (orientation:portrait){
  .video-modal-frame-wrap.pseudo-fs{
    inset:auto; top:0; left:0; right:auto; bottom:auto;
    width:100vh; width:100dvh; height:100vw;
    transform-origin:top left;
    transform:translateX(100vw) rotate(90deg);
  }
  .video-modal-frame-wrap.pseudo-fs .video-modal-fs-exit{ top:12px; left:12px; }
}
.video-modal.is-fs .video-modal-sheet{ animation:none; }
.video-modal-level{
  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:6px;
}
.video-modal-title{
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif;
  font-size:1.15rem; font-weight:700; color:var(--ink);
}

@media (max-width:480px){
  .grammar-level-tab{ min-width:66px; padding:8px 10px; }
}

/* ==================== HOME: COMBOBOX ==================== */
.combo{ position:relative; width:100%; }
.start-mode-select{
  display:block; width:100%; min-height:56px; padding:0 68px 0 18px;
  background:var(--bg-panel-2); color:var(--ink);
  border:1.5px solid var(--gold-dim); border-radius:12px;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:1.05rem; font-weight:600; cursor:pointer;
  -webkit-appearance:none; appearance:none; text-overflow:ellipsis;
}
.start-mode-select:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(224,164,88,.22); }
.start-mode-select option{ background:var(--bg-panel-2); color:var(--ink); }
.combo-arrow{
  position:absolute; top:0; right:0; bottom:0; width:54px;
  display:flex; align-items:center; justify-content:center;
  border-left:1px solid var(--hairline); border-radius:0 11px 11px 0;
  background:rgba(224,164,88,.14); color:var(--gold); pointer-events:none;
}
.combo-arrow svg{ width:22px; height:22px; }

/* ============================================================
   FREQUENCY 2.11.1 — VISUAL REDESIGN
   Direction: Midnight Editorial / Learning Studio
   Keep the semantic HTML and application behavior intact; this
   layer changes hierarchy, depth, rhythm and interaction cues.
   ============================================================ */
:root{
  --bg:#0a0d12;
  --bg-panel:#10151d;
  --bg-panel-2:#151c26;
  --hairline:rgba(255,255,255,.085);
  --ink:#f2eee5;
  --ink-dim:#a9b1bf;
  --ink-faint:#667181;
  --gold:#f0b45e;
  --gold-dim:#9e713a;
  --gold-soft:rgba(240,180,94,.12);
  --green:#8ed4ae;
  --scale:1;
}

html{
  background:
    radial-gradient(circle at 50% -10%, rgba(240,180,94,.09), transparent 34rem),
    #0a0d12;
}
body{
  background:
    radial-gradient(circle at 8% 12%, rgba(75,104,145,.08), transparent 26rem),
    radial-gradient(circle at 92% 62%, rgba(240,180,94,.045), transparent 30rem),
    #0a0d12;
}

/* A very subtle studio grid gives the app a designed canvas without
   competing with reading content. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, black, transparent 78%);
}

/* ---------------- HOME: cinematic landing ---------------- */
.home-view{
  position:relative;
  overflow:hidden;
  justify-content:flex-start;
  padding-top:clamp(34px,8vh,92px);
}
.home-view::before{
  content:"";
  position:absolute;
  width:min(52vw,520px);
  aspect-ratio:1;
  right:-22%;
  top:8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,180,94,.13), rgba(240,180,94,0) 67%);
  filter:blur(2px);
  pointer-events:none;
}
.home-view::after{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  left:-230px;
  bottom:2%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(83,120,168,.11), transparent 70%);
  pointer-events:none;
}
.home-inner{ max-width:720px; position:relative; z-index:1; }
.home-brand-row{
  gap:12px;
  margin-bottom:clamp(34px,7vh,72px);
}
.home-brand-row::after{
  content:"LEARNING STUDIO";
  margin-left:auto;
  padding:7px 10px;
  border:1px solid var(--hairline);
  border-radius:999px;
  color:var(--ink-faint);
  font:600 .58rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.16em;
}
.logo-mark-lg{ width:70px; height:23px; }
.home-brand-row .brand-name{ font-size:1.45rem; letter-spacing:-.02em; }
.home-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.65rem;
  letter-spacing:.18em;
  color:var(--gold);
}
.home-eyebrow::before{
  content:"";
  width:30px;
  height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.home-title{
  max-width:720px;
  margin-bottom:18px;
  font-size:clamp(2.5rem,7vw,5.25rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.home-title em{
  display:block;
  background:linear-gradient(100deg,#f0b45e 5%,#ffe1a5 45%,#b77b35 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.home-copy{
  max-width:590px;
  font-size:1rem;
  line-height:1.7;
  color:#9ca6b4;
  margin-bottom:36px;
}
.home-actions{
  max-width:650px;
  padding:18px;
  margin-bottom:18px;
  background:rgba(16,21,29,.74);
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  box-shadow:0 24px 80px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.start-label{
  color:#7e8999;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.62rem;
}
.start-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 132px;
  gap:8px;
}
.start-mode-select{
  min-height:58px;
  border-radius:14px;
  border-color:rgba(240,180,94,.3);
  background:#0c1118;
  font-size:.98rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.start-mode-select:hover{ border-color:rgba(240,180,94,.55); }
.combo-arrow{ border-left-color:rgba(240,180,94,.16); background:rgba(240,180,94,.07); }
.btn-primary{
  min-height:58px;
  border-radius:14px;
  background:linear-gradient(135deg,#f5c16f,#b97c36);
  box-shadow:0 10px 28px rgba(240,180,94,.15);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 14px 34px rgba(240,180,94,.2); }
.home-progress-card{
  max-width:650px;
  position:relative;
  overflow:hidden;
  margin-bottom:16px;
  padding:20px 22px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(16,21,29,.95),rgba(21,28,38,.72));
  border-color:rgba(255,255,255,.075);
}
.home-progress-card::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-65px;
  top:-95px;
  border-radius:50%;
  border:1px solid rgba(240,180,94,.12);
  box-shadow:0 0 0 20px rgba(240,180,94,.018),0 0 0 40px rgba(240,180,94,.012);
}
.home-progress-number{ font-size:2.15rem; letter-spacing:-.04em; }
.home-progress-of{ font-size:.95rem; }
.home-card-copy{ color:#7f8998; }
.progress-track{ height:7px; background:#090d13; }
.progress-fill{ background:linear-gradient(90deg,#9e713a,#f0b45e,#ffe0a4); box-shadow:0 0 16px rgba(240,180,94,.18); }
.home-footer{ text-align:left; padding-left:4px; color:#566171; }

/* ---------------- APP HEADER ---------------- */
header{
  background:rgba(10,13,18,.82);
  border-bottom:1px solid rgba(255,255,255,.065);
  box-shadow:0 10px 36px rgba(0,0,0,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding-top:calc(12px + var(--safe-top));
}
.title-row{ max-width:780px; }
.brand-row{ margin-bottom:8px; }
.brand-name{ font-size:1.16rem; letter-spacing:-.015em; }
.mini-progress-row{ margin-left:auto; max-width:330px; }
.mini-progress-track{ height:4px; background:#171e28; }
.mini-progress-label{ color:#707b8b; }

/* Search feels like a command bar rather than a form field. */
#search,.grammar-search-wrap input{
  border-color:rgba(255,255,255,.09);
  background:rgba(16,21,29,.88);
  border-radius:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#search:focus,.grammar-search-wrap input:focus{ border-color:rgba(240,180,94,.55); box-shadow:0 0 0 3px rgba(240,180,94,.08); }
.filter{ background:#111720; border-color:rgba(255,255,255,.08); }
.filter[aria-pressed="true"]{ background:var(--gold); }

/* ---------------- WORDS: editorial reading column ---------------- */
main{ max-width:780px; padding-left:22px; padding-right:22px; }
.entry{
  position:relative;
  gap:18px;
  padding:25px 4px 26px;
  border-bottom-color:rgba(255,255,255,.065);
}
.entry::before{
  content:"";
  position:absolute;
  left:-22px;
  top:25px;
  width:2px;
  height:0;
  border-radius:2px;
  background:linear-gradient(var(--gold),transparent);
  transition:height .2s ease;
}
.entry:hover::before{ height:48px; }
.entry.is-known::before{ background:linear-gradient(var(--green),transparent); }
.entry.is-known{ opacity:.72; }
.entry-main{ padding-left:2px; }
.head{ margin-bottom:13px; gap:11px; }
.num{ color:#566171; font-size:.62rem; letter-spacing:.04em; }
.word{ font-size:calc(1.58rem * var(--scale)); letter-spacing:-.025em; }
.word-pron{ color:#d99b4d; font-size:calc(.86rem * var(--scale)); }
.known-badge{ color:var(--green); }
.action-btn{
  width:38px;
  height:38px;
  background:#10161f;
  border-color:rgba(255,255,255,.08);
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
.action-btn:hover{ transform:translateY(-1px); color:var(--gold); border-color:rgba(240,180,94,.45); }
.action-btn.known-btn[aria-pressed="true"]{ background:var(--gold); }
.ipa-box{
  border-left:0;
  border-top:1px solid rgba(240,180,94,.22);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(21,28,38,.92),rgba(15,20,27,.9));
  padding:13px 15px;
}
.sentence{ font-size:calc(1.24rem * var(--scale)); line-height:1.72; }
.translation{ color:#7f8998; }
.sentence-pron{ color:#c48c48; }
.practice-box,.voice-box{
  background:rgba(16,21,29,.88);
  border-color:rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.practice-input-inline,.voice-transcript{ background:#0c1118; border-color:rgba(255,255,255,.09); border-radius:11px; }

/* ---------------- CONNECT: phrase studio ---------------- */
.connect-view{ max-width:780px; }
.connect-mode-row{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.connect-mode-btn{
  height:42px;
  background:#10161f;
  border-color:rgba(255,255,255,.08);
  color:#8e98a8;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.connect-mode-btn:hover{ transform:translateY(-1px); border-color:rgba(240,180,94,.35); }
.connect-mode-btn.active{ background:linear-gradient(135deg,#f0b45e,#a87237); box-shadow:0 8px 22px rgba(240,180,94,.12); }
.connect-chip{ background:#10161f; border-color:rgba(255,255,255,.08); }
.connect-chip.active{ background:var(--gold); }
.connect-item{ padding:22px 4px; border-bottom-color:rgba(255,255,255,.065); }
.ci-num{ color:#566171; }
.ci-en{ font-size:calc(1.24rem * var(--connect-scale,1)); letter-spacing:-.01em; }
.ci-pron{ color:#c48c48; }
.ci-tr{ color:#7f8998; }

/* ---------------- GRAMMAR: library / catalogue ---------------- */
.grammar-main{ max-width:780px; padding-left:22px; padding-right:22px; }
.grammar-level-tabs{ gap:7px; padding-bottom:14px; }
.grammar-level-tab{
  min-width:82px;
  padding:11px 13px;
  border-radius:13px;
  background:#10161f;
  border-color:rgba(255,255,255,.08);
}
.grammar-level-tab.active{ background:linear-gradient(135deg,#f0b45e,#a87237); box-shadow:0 8px 22px rgba(240,180,94,.12); }
.grammar-level-heading{ font-size:1.2rem; letter-spacing:-.02em; margin:9px 2px 14px; }
.grammar-list{ gap:6px; }
.grammar-item{
  padding:15px 13px;
  border-radius:14px;
  background:rgba(16,21,29,.82);
  border-color:rgba(255,255,255,.07);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.grammar-item:hover{ transform:translateX(3px); background:#141b24; border-color:rgba(240,180,94,.32); }
.gi-num{ background:#0b1016; }
.gi-play{ background:#0b1016; border-color:rgba(255,255,255,.08); }

/* ---------------- BOTTOM NAV: floating dock ---------------- */
.bottom-nav{
  left:50%;
  right:auto;
  bottom:calc(10px + var(--safe-bottom));
  width:min(620px,calc(100% - 24px));
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  padding:5px;
  background:rgba(16,21,29,.88);
  box-shadow:0 18px 50px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.nav-btn{
  position:relative;
  min-height:50px;
  border-radius:15px;
  color:#667181;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav-btn.active{ color:#f3c170; background:rgba(240,180,94,.09); }
.nav-btn.active::after{
  content:"";
  position:absolute;
  bottom:4px;
  width:16px;
  height:2px;
  border-radius:2px;
  background:var(--gold);
}
.nav-btn:hover{ color:#d6dbe2; transform:translateY(-1px); }

/* ---------------- SHEETS / MODALS ---------------- */
.settings-sheet{
  border:1px solid rgba(255,255,255,.08);
  border-bottom:0;
  background:rgba(14,19,26,.96);
  box-shadow:0 -30px 80px rgba(0,0,0,.4);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}
.sheet-handle{ width:42px; height:4px; border-radius:999px; background:#394352; }
.sheet-close-btn{ background:#151c26; border-color:rgba(255,255,255,.07); }
.video-modal-sheet{ background:#0e131a; border:1px solid rgba(255,255,255,.08); }

/* ---------------- MICRO-INTERACTIONS ---------------- */
@media (prefers-reduced-motion:no-preference){
  .home-inner > *{ animation:freqReveal .55s cubic-bezier(.2,.8,.2,1) both; }
  .home-inner > :nth-child(2){ animation-delay:.04s; }
  .home-inner > :nth-child(3){ animation-delay:.08s; }
  .home-inner > :nth-child(4){ animation-delay:.12s; }
  .home-inner > :nth-child(5){ animation-delay:.16s; }
  .home-inner > :nth-child(6){ animation-delay:.2s; }
  @keyframes freqReveal{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
}

@media (min-width:900px){
  .home-view{ padding-left:48px; padding-right:48px; }
  .home-inner{ max-width:900px; }
  .home-title{ max-width:820px; }
  .home-copy{ max-width:650px; }
  .home-actions{ width:650px; }
  .home-progress-card{ width:650px; }
  main,.grammar-main{ max-width:820px; }
  .entry{ padding-left:10px; padding-right:10px; }
  .entry::before{ left:-14px; }
}

@media (max-width:620px){
  .home-view{ padding-left:18px; padding-right:18px; }
  .home-brand-row::after{ display:none; }
  .home-title{ font-size:clamp(2.35rem,12vw,3.7rem); }
  .home-copy{ font-size:.92rem; }
  .start-row{ grid-template-columns:1fr; }
  .start-row .start-go-btn{ width:100%; }
  .home-actions{ padding:14px; border-radius:18px; }
  main,.grammar-main{ padding-left:18px; padding-right:18px; }
  .entry::before{ left:-12px; }
  .connect-mode-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bottom-nav{ width:calc(100% - 16px); bottom:calc(6px + var(--safe-bottom)); }
}

@media (max-width:380px){
  .home-title{ font-size:2.25rem; }
  .home-progress-number{ font-size:1.9rem; }
  .nav-btn{ font-size:.61rem; }
}

/* 2.11.2 — botão de limpar busca */
.search-field{ position:relative; }
.search-field input{ padding-right:44px !important; }
.clear-x{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:transparent; color:var(--ink-faint); cursor:pointer;
}
.clear-x[hidden]{ display:none; }
.clear-x svg{ width:16px; height:16px; }
.clear-x:hover,.clear-x:focus-visible{ color:var(--gold); background:rgba(255,255,255,.05); }

/* 2.11.3/2.11.5 — palavra-título no mesmo tamanho e na mesma cor da frase */
.word{
  font-size:calc(1.24rem * var(--scale));
  letter-spacing:.01em;
  color:var(--ink);
}

/* 2.11.4 — tela principal cabe inteira na tela, sem barra de rolagem */
html:has(.home-view:not(.hidden)),
html:has(.home-view:not(.hidden)) body{ overflow:hidden; height:100%; }
.home-view{
  box-sizing:border-box;
  height:100vh; height:100dvh;
  min-height:0;
  overflow:hidden;
  justify-content:center;
  padding-top:calc(clamp(14px,3.5vh,56px) + var(--safe-top));
  padding-bottom:calc(clamp(12px,3vh,40px) + var(--safe-bottom));
}
.home-brand-row{ margin-bottom:clamp(14px,4.5vh,64px); }
.home-title{ font-size:min(clamp(2.35rem,7vw,5.25rem), 8.4vh); margin-bottom:clamp(10px,2vh,18px); }
.home-copy{ margin-bottom:clamp(14px,3.6vh,36px); }
.home-actions{ margin-bottom:clamp(10px,2vh,18px); }
.home-progress-card{ margin-bottom:clamp(8px,1.8vh,16px); }

@media (max-height:760px){
  .home-copy{ font-size:.88rem; line-height:1.5; }
  .home-actions{ padding:12px; gap:8px; }
  .start-mode-select,.home-actions .btn-primary{ min-height:48px; }
  .home-progress-card{ padding:14px 18px; }
  .home-progress-number{ font-size:1.7rem; }
  .home-progress-card .progress-track{ margin-top:8px; }
}
@media (max-height:620px){
  .home-copy{ display:none; }
  .home-eyebrow{ margin-bottom:6px; }
}
@media (max-height:460px){
  .home-eyebrow,.home-footer{ display:none; }
  .home-brand-row{ margin-bottom:10px; }
  .home-title{ font-size:min(2.1rem, 9vh); }
  .home-progress-card{ padding:10px 16px; }
  .home-card-copy{ display:none; }
}

/* 2.11.6 — branco mais suave nas listas de Palavras e Frases */
#list, #connect-view{ --ink:#d3cec3; }

/* 2.11.7 — frases das listas em Roboto, sem negrito.
   Vale para Palavras, Frases e a lista de aulas de Gramática/Vocabulário/Tópicos;
   a tela inicial e os títulos continuam com a tipografia original. */
:root{ --font-list:'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
#list .word, #list .word-pron, #list .sentence, #list .sentence-pron, #list .translation,
#list .practice-correct-sentence, #list .voice-correct-sentence, #list .diff-word,
#connect-view .ci-en, #connect-view .ci-en mark, #connect-view .ci-qa-label,
#connect-view .ci-pron, #connect-view .ci-tr,
#connect-view .verb-inf, #connect-view .verb-pt, #connect-view .verb-forms .vf, #connect-view .verb-forms .vf b,
#grammar-list .gi-topic{
  font-family:var(--font-list);
  font-weight:400;
}

/* 2.11.7 — carrossel dos cards de nível (Gramática, Vocabulário, Tópicos) */
.level-carousel{
  position:relative;
  margin:0 -22px 4px;
}
.level-carousel .grammar-level-tabs{
  position:relative;
  gap:8px;
  padding:4px 22px 14px;
  scroll-snap-type:x proximity;
  scroll-padding-inline:22px;
  overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg, var(--lc-fade-l, #000) 0, #000 44px, #000 calc(100% - 44px), var(--lc-fade-r, #000) 100%);
          mask-image:linear-gradient(90deg, var(--lc-fade-l, #000) 0, #000 44px, #000 calc(100% - 44px), var(--lc-fade-r, #000) 100%);
}
.level-carousel.can-prev{ --lc-fade-l:transparent; }
.level-carousel.can-next{ --lc-fade-r:transparent; }
.level-carousel .grammar-level-tab{
  scroll-snap-align:start;
  flex:0 0 136px; min-width:0;
  align-items:flex-start; gap:3px;
  padding:13px 14px 12px;
  border-radius:16px;
  text-align:left;
  transition:border-color .16s ease, background .16s ease;
}
.level-carousel .grammar-level-tab:hover{ border-color:rgba(240,180,94,.32); }
.level-carousel .glt-code{ font-size:1.25rem; line-height:1.1; letter-spacing:-.01em; color:var(--ink); }
.level-carousel .glt-name{
  font-size:.74rem; line-height:1.25; color:var(--ink-dim); max-width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.level-carousel .glt-count{ font-size:.66rem; margin-top:auto; padding-top:4px; }
.level-carousel .glt-bar{
  display:block; width:100%; height:3px; margin-top:6px; border-radius:3px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.level-carousel .glt-bar > span{ display:block; height:100%; border-radius:3px; background:var(--gold); }
.level-carousel .grammar-level-tab.active .glt-code,
.level-carousel .grammar-level-tab.active .glt-name{ color:#11151c; }
.level-carousel .grammar-level-tab.active .glt-bar{ background:rgba(17,21,28,.22); }
.level-carousel .grammar-level-tab.active .glt-bar > span{ background:#11151c; }

.lc-arrow{
  position:absolute; top:calc(50% - 5px); transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  background:rgba(16,21,29,.94); color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:opacity .16s ease, color .16s ease, border-color .16s ease;
}
.lc-arrow svg{ width:17px; height:17px; }
.lc-prev{ left:6px; }
.lc-next{ right:6px; }
.lc-arrow:hover{ color:var(--gold); border-color:rgba(240,180,94,.45); }
.lc-arrow:disabled{ opacity:0; pointer-events:none; }

@media (max-width:620px){
  .level-carousel{ margin-left:-18px; margin-right:-18px; }
  .level-carousel .grammar-level-tabs{ padding-left:18px; padding-right:18px; scroll-padding-inline:18px; }
  .level-carousel .grammar-level-tab{ flex-basis:128px; }
}

/* 2.11.7 — botão "Abrir no YouTube" no player */
.video-modal-yt-btn{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  min-height:40px; padding:0 12px; border-radius:10px; text-decoration:none;
  background:transparent; color:var(--ink-dim); border:1px solid rgba(255,255,255,.12);
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.8rem; font-weight:600;
}
.video-modal-yt-btn svg{ width:16px; height:16px; }
.video-modal-yt-btn:hover{ color:var(--gold); border-color:rgba(240,180,94,.45); }
.video-modal.is-fs .video-modal-yt-btn{ display:none; }
@media (max-width:420px){
  .video-modal-info{ flex-wrap:wrap; }
  .video-modal-info-text{ flex-basis:100%; }
}

/* 2.11.8 — combobox da Home redesenhado.
   O <select> nativo fica por cima, invisível: o toque abre o seletor do sistema,
   e a "face" desenhada abaixo mostra a escolha com ícone, nome e descrição. */
.combo{ position:relative; width:100%; min-width:0; isolation:isolate; }
.combo .start-mode-select{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; min-height:0 !important; margin:0; padding:0;
  opacity:0; cursor:pointer; border:0; font-size:16px;
}
.combo-face{
  position:relative;
  display:flex; align-items:center; gap:14px;
  min-height:68px; padding:10px 12px 10px 10px;
  border-radius:16px;
  background:
    linear-gradient(135deg, rgba(240,180,94,.075), rgba(240,180,94,0) 55%),
    #0c1118;
  border:1px solid rgba(240,180,94,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.18);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.combo:hover .combo-face{ border-color:rgba(240,180,94,.48); }
.combo .start-mode-select:focus-visible + .combo-face,
.combo .start-mode-select:focus + .combo-face{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(240,180,94,.16), inset 0 1px 0 rgba(255,255,255,.035);
}
.combo .start-mode-select:focus-visible{ outline:none !important; }
.combo-icon{
  flex:none; width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  background:radial-gradient(circle at 30% 25%, rgba(240,180,94,.22), rgba(240,180,94,.07) 70%);
  border:1px solid rgba(240,180,94,.2);
}
.combo-icon svg{ width:22px; height:22px; }
.combo-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.combo-title{
  font-family:Georgia, 'Iowan Old Style', 'Palatino Linotype', 'PT Serif', serif;
  font-size:1.18rem; line-height:1.15; font-weight:700; letter-spacing:-.015em; color:var(--ink);
}
.combo-sub{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.76rem; line-height:1.3; color:#7f8998;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.combo-step{
  flex:none;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:.68rem; font-variant-numeric:tabular-nums; color:var(--ink-faint);
}
.combo-chevron{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); background:rgba(240,180,94,.08);
  transition:background .18s ease, transform .18s ease;
}
.combo-chevron svg{ width:18px; height:18px; }
.combo:hover .combo-chevron{ background:rgba(240,180,94,.16); }
.start-row{ align-items:stretch; }
.start-row .start-go-btn{ min-height:68px; }

@media (max-width:620px){
  .start-row{ grid-template-columns:minmax(0,1fr); }
  .combo-face{ gap:12px; }
  .start-row .start-go-btn{ min-height:54px; }
}
@media (max-height:760px){
  .combo-face{ min-height:58px; padding-top:7px; padding-bottom:7px; }
  .combo-icon{ width:40px; height:40px; border-radius:11px; }
  .combo-icon svg{ width:20px; height:20px; }
  .combo-title{ font-size:1.08rem; }
  .start-row .start-go-btn{ min-height:48px; }
}
@media (max-height:620px){
  .combo-sub{ display:none; }
  .combo-face{ min-height:52px; }
}
@media (max-width:360px){ .combo-step{ display:none; } }

/* ============================================================
   2.12.0 — CONFORTO VISUAL (temas de leitura)
   Vale para as telas de estudo, sheets e toast. A Home não muda.
   Temas: grafite (padrão), papel (claro quente), noite (escuro quente).
   "Automático" é resolvido em JS (papel de dia / noite no escuro do sistema)
   e grava o tema efetivo em <html data-theme>.
   Contrastes calibrados em APCA: texto de leitura Lc 75–90 (no escuro,
   nunca acima de Lc 90, para evitar o "brilho" em quem tem astigmatismo);
   pronúncia e tradução ≥ Lc 60; números e rótulos ≥ Lc 40.
   ============================================================ */
:root{
  --rb:#19202b; --rp:#212a37; --rp2:#263141; --rl:rgba(255,255,255,.1);
  --ri:#dcd7cc; --rd:#b0b8c4; --rf:#8a93a1; --ra:#dba463;
  --rfa:#f0b45e; --rfb:#a87237; --rof:#141a22;
  --rh:rgba(25,32,43,.9); --rs:rgba(0,0,0,.28); --rok:#9fd9b8; --rglow:rgba(240,180,94,.1);
  --rbg-glow:rgba(240,180,94,.06);
}
html[data-theme="paper"]{
  --rb:#ebe5d9; --rp:#f5f1e8; --rp2:#e2dbcc; --rl:rgba(70,52,28,.15);
  --ri:#2b2721; --rd:#534d44; --rf:#7a7266; --ra:#7c4a0e;
  --rfa:#e2b067; --rfb:#c98a3a; --rof:#2b2110;
  --rh:rgba(235,229,217,.9); --rs:rgba(80,60,30,.12); --rok:#2f6b47; --rglow:rgba(201,138,58,.14);
  --rbg-glow:rgba(201,138,58,.07);
}
html[data-theme="night"]{
  --rb:#1e1b18; --rp:#27231f; --rp2:#302b26; --rl:rgba(255,236,210,.09);
  --ri:#e2d9c9; --rd:#c4b9a6; --rf:#9c917f; --ra:#eab574;
  --rfa:#e8ae66; --rfb:#b98044; --rof:#1e1b18;
  --rh:rgba(30,27,24,.9); --rs:rgba(0,0,0,.3); --rok:#a9d3a6; --rglow:rgba(234,181,116,.1);
  --rbg-glow:rgba(234,181,116,.05);
}

/* Fundo da página fora da Home */
html:has(.home-view.hidden),
html:has(.home-view.hidden) body{
  background:radial-gradient(circle at 50% -10%, var(--rbg-glow), transparent 34rem), var(--rb);
}
html[data-theme="paper"]:has(.home-view.hidden) body::before{ display:none; }
html[data-theme="paper"]:has(.home-view.hidden){ color-scheme:light; }

/* Tokens do app redirecionados para o tema dentro das telas de estudo */
.practice-view, .grammar-view, .toast, .bottom-nav, .settings-sheet,
:root #list, :root #connect-view{
  --bg:var(--rb); --bg-panel:var(--rp); --bg-panel-2:var(--rp2); --hairline:var(--rl);
  --ink:var(--ri); --ink-dim:var(--rd); --ink-faint:var(--rf);
  --gold:var(--ra); --gold-dim:var(--rfb);
}

/* Cabeçalho */
:root .practice-view header, :root .grammar-view header{
  background:var(--rh); border-bottom-color:var(--rl); box-shadow:0 8px 28px var(--rs);
}
:root .practice-view .brand-name, :root .grammar-view .brand-name{ color:var(--ri); }
:root .practice-view .back-btn, :root .grammar-view .back-btn{ color:var(--rd); }
:root .grammar-view .header-icon-btn{ background:var(--rp); border-color:var(--rl); color:var(--rd); }
:root .practice-view .mini-progress-track{ background:var(--rp2); }
:root .practice-view .mini-progress-label, :root .practice-view .count{ color:var(--rf); }

/* Busca e filtros */
:root .practice-view #search, :root .grammar-view .grammar-search-wrap input{
  background:var(--rp); border-color:var(--rl); color:var(--ri); box-shadow:none;
}
:root .practice-view #search::placeholder, :root .grammar-view .grammar-search-wrap input::placeholder{ color:var(--rf); }
:root .practice-view .filter{ background:var(--rp); border-color:var(--rl); color:var(--rd); }
:root .practice-view .filter[aria-pressed="true"]{ background:var(--rfa); border-color:var(--rfa); color:var(--rof); }

/* Palavras */
:root .practice-view .entry{ border-bottom-color:var(--rl); }
:root .practice-view .num{ color:var(--rf); }
:root .practice-view .word, :root .practice-view .sentence{ color:var(--ri); }
:root .practice-view .word-pron, :root .practice-view .sentence-pron{ color:var(--ra); }
:root .practice-view .translation{ color:var(--rd); }
:root .practice-view .known-badge{ color:var(--rok); }
:root .practice-view .action-btn{ background:var(--rp); border-color:var(--rl); color:var(--rd); box-shadow:0 3px 10px var(--rs); }
:root .practice-view .action-btn:hover, :root .practice-view .action-btn.active,
:root .practice-view .action-btn.playing, :root .practice-view .action-btn.listening{ color:var(--ra); border-color:var(--rfb); }
:root .practice-view .action-btn.known-btn[aria-pressed="true"]{ background:var(--rfa); border-color:var(--rfa); color:var(--rof); }
:root .practice-view .ipa-box{ background:var(--rp); border-top-color:var(--rfb); }
:root .practice-view .ipa-value{ color:var(--ri); }
:root .practice-view .ipa-label, :root .practice-view .ipa-note.ipa-confusable{ color:var(--rf); }
:root .practice-view .ipa-note{ color:var(--rd); }
:root .practice-view .ipa-tag{ color:var(--ra); }
:root .practice-view .practice-box, :root .practice-view .voice-box{ background:var(--rp); border-color:var(--rl); box-shadow:0 8px 22px var(--rs); }
:root .practice-view .practice-input-inline, :root .practice-view .voice-transcript{ background:var(--rb); border-color:var(--rl); color:var(--ri); }
:root .practice-view .practice-check-btn, :root .practice-view .voice-check-btn{ background:linear-gradient(135deg,var(--rfa),var(--rfb)); color:var(--rof); }
:root .practice-view .practice-reveal-btn, :root .practice-view .voice-stop-btn, :root .practice-view .voice-retry-btn{ background:var(--rp2); border-color:var(--rl); color:var(--rd); }
:root .practice-view .practice-box-msg.ok, :root .practice-view .voice-box-msg.ok{ color:var(--rok); }
:root .practice-view .diff-word.diff-bad{ color:var(--ra); }

/* Frases */
:root .practice-view .connect-mode-btn{ background:var(--rp); border-color:var(--rl); color:var(--rd); }
:root .practice-view .connect-mode-btn.active{ background:linear-gradient(135deg,var(--rfa),var(--rfb)); color:var(--rof); border-color:transparent; box-shadow:0 6px 18px var(--rglow); }
:root .practice-view .connect-chip{ background:var(--rp); border-color:var(--rl); color:var(--rd); }
:root .practice-view .connect-chip.active{ background:var(--rfa); border-color:var(--rfa); color:var(--rof); }
:root .practice-view .connect-item{ border-bottom-color:var(--rl); }
:root .practice-view .ci-num{ color:var(--rf); }
:root .practice-view .ci-en{ color:var(--ri); }
:root .practice-view .ci-en mark, :root .practice-view .verb-inf{ color:var(--ra); }
:root .practice-view .ci-pron{ color:var(--ra); }
:root .practice-view .ci-tr, :root .practice-view .verb-pt, :root .practice-view .ci-qa-label{ color:var(--rd); }
:root .practice-view .verb-forms .vf{ color:var(--rd); }
:root .practice-view .verb-forms .vf b{ color:var(--rf); }
:root .practice-view .ci-learned-btn[aria-pressed="true"]{ background:var(--rfa); border-color:var(--rfa); color:var(--rof); }
:root .practice-view .connect-back-top-btn, :root .grammar-view .connect-back-top-btn{ background:var(--rp); border-color:var(--rl); color:var(--rd); }
:root .practice-view .ci-empty, :root .grammar-view .ci-empty, :root .practice-view .empty{ color:var(--rf); }

/* Gramática / Vocabulário / Tópicos */
:root .grammar-view .grammar-level-heading{ color:var(--ri); }
:root .grammar-view .level-carousel .grammar-level-tab{ background:var(--rp); border-color:var(--rl); color:var(--rd); box-shadow:none; }
:root .grammar-view .level-carousel .grammar-level-tab .glt-code{ color:var(--ri); }
:root .grammar-view .level-carousel .grammar-level-tab .glt-name{ color:var(--rd); }
:root .grammar-view .level-carousel .grammar-level-tab .glt-count{ color:var(--rf); opacity:1; }
:root .grammar-view .level-carousel .grammar-level-tab .glt-bar{ background:var(--rp2); }
:root .grammar-view .level-carousel .grammar-level-tab .glt-bar > span{ background:var(--rfb); }
:root .grammar-view .level-carousel .grammar-level-tab.active{ background:linear-gradient(135deg,var(--rfa),var(--rfb)); border-color:transparent; box-shadow:0 8px 20px var(--rglow); }
:root .grammar-view .level-carousel .grammar-level-tab.active .glt-code,
:root .grammar-view .level-carousel .grammar-level-tab.active .glt-name,
:root .grammar-view .level-carousel .grammar-level-tab.active .glt-count{ color:var(--rof); }
:root .grammar-view .level-carousel .grammar-level-tab.active .glt-count{ opacity:.8; }
:root .grammar-view .level-carousel .grammar-level-tab.active .glt-bar{ background:rgba(0,0,0,.15); }
:root .grammar-view .level-carousel .grammar-level-tab.active .glt-bar > span{ background:var(--rof); }
:root .grammar-view .lc-arrow{ background:var(--rp); border-color:var(--rl); color:var(--ri); box-shadow:0 4px 14px var(--rs); }
:root .grammar-view .grammar-item{ background:var(--rp); border-color:var(--rl); }
:root .grammar-view .grammar-item:hover{ background:var(--rp2); border-color:var(--rfb); }
:root .grammar-view .gi-topic{ color:var(--ri); }
:root .grammar-view .gi-num{ background:var(--rp2); color:var(--rf); }
:root .grammar-view .gi-play{ background:var(--rp2); border-color:var(--rl); color:var(--ra); }
:root .grammar-view .gi-flag{ background:var(--rp2); border-color:var(--rl); color:var(--rd); }
:root .grammar-view .gi-flag[aria-pressed="true"]{ background:var(--rfa); border-color:var(--rfa); color:var(--rof); }
:root .grammar-view .gi-level-badge{ background:var(--rp2); border-color:var(--rl); color:var(--ra); }

/* Dock inferior */
:root .bottom-nav{ background:var(--rh); border-color:var(--rl); box-shadow:0 14px 40px var(--rs); }
:root .nav-btn{ color:var(--rf); }
:root .nav-btn:hover{ color:var(--ri); }
:root .nav-btn.active{ color:var(--ra); background:var(--rglow); }
:root .nav-btn.active::after{ background:var(--ra); }

/* Sheets (Ajustes / Instruções) e toast */
:root .settings-sheet{ background:var(--rp); border-color:var(--rl); box-shadow:0 -24px 60px var(--rs); }
:root .sheet-handle{ background:var(--rl); }
:root .sheet-close-btn, :root .font-btn, :root .sheet-btn:not(.sheet-btn-gold){ background:var(--rp2); border-color:var(--rl); color:var(--rd); }
:root .sheet-btn-gold{ background:linear-gradient(135deg,var(--rfa),var(--rfb)); color:var(--rof); }
:root .settings-sheet .progress-track{ background:var(--rp2); box-shadow:none; }
:root .phonetic-symbol, :root .phonetic-desc strong{ color:var(--ra); }
:root .toast{ background:var(--rp2); border-color:var(--rl); color:var(--ri); }
html[data-theme="paper"] .sheet-backdrop{ background:rgba(40,30,15,.28); }

/* ---- Seletor de tema (Ajustes) ---- */
.theme-block{ margin-bottom:18px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.theme-block-title{ font-size:.85rem; font-weight:600; color:var(--ink); margin:0 0 3px; }
.theme-block-help{ font-size:.72rem; line-height:1.45; color:var(--ink-faint); margin:0 0 10px; }
.theme-options{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.theme-opt{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 4px 7px; border-radius:12px; cursor:pointer;
  background:var(--bg-panel-2); border:1px solid var(--hairline); color:var(--ink-dim);
  font:500 .7rem/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.theme-opt[aria-pressed="true"]{ border-color:var(--gold); color:var(--ink); box-shadow:0 0 0 1px var(--gold) inset; }
.theme-swatch{
  width:100%; max-width:52px; height:30px; border-radius:7px; border:1px solid rgba(128,128,128,.25);
  display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 7px;
}
.theme-swatch i{ display:block; height:3px; border-radius:2px; }
.theme-swatch i:last-child{ width:60%; }
.sw-auto{ background:linear-gradient(135deg,#ebe5d9 0 50%,#1e1b18 50% 100%); }
.sw-auto i{ background:linear-gradient(90deg,#2b2721 0 50%,#e2d9c9 50% 100%); }
.sw-paper{ background:#ebe5d9; } .sw-paper i{ background:#2b2721; } .sw-paper i:last-child{ background:#7c4a0e; }
.sw-night{ background:#1e1b18; } .sw-night i{ background:#e2d9c9; } .sw-night i:last-child{ background:#eab574; }
.sw-graphite{ background:#19202b; } .sw-graphite i{ background:#dcd7cc; } .sw-graphite i:last-child{ background:#dba463; }

.switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.switch{
  position:relative; flex:none; width:46px; height:28px; border-radius:999px; cursor:pointer; padding:0;
  background:var(--bg-panel-2); border:1px solid var(--hairline); transition:background .18s ease;
}
.switch::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--ink-faint); transition:transform .18s ease, background .18s ease;
}
.switch[aria-checked="true"]{ background:var(--gold-dim); border-color:var(--gold-dim); }
.switch[aria-checked="true"]::after{ transform:translateX(18px); background:#fff; }

/* ---- Pausa para os olhos ---- */
.eye-break{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(12,10,8,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.eye-break.hidden{ display:none; }
.eye-break-card{
  width:min(360px,100%); text-align:center; padding:28px 24px 22px; border-radius:24px;
  background:var(--rp); color:var(--ri); border:1px solid var(--rl);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.eye-break-ring{ position:relative; width:112px; height:112px; margin:0 auto 18px; }
.eye-break-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.eye-break-ring circle{ fill:none; stroke-width:6; }
.eye-break-ring .track{ stroke:var(--rp2); }
.eye-break-ring .bar{ stroke:var(--ra); stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.eye-break-count{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:400 2.2rem/1 Georgia,'Iowan Old Style',serif; color:var(--ri); font-variant-numeric:tabular-nums;
}
.eye-break-title{ margin:0 0 6px; font:700 1.25rem/1.25 Georgia,'Iowan Old Style',serif; color:var(--ri); }
.eye-break-text{ margin:0 0 20px; font-size:.9rem; line-height:1.55; color:var(--rd); }
.eye-break-actions{ display:flex; gap:8px; justify-content:center; }
.eye-break-btn{
  min-height:44px; padding:0 18px; border-radius:12px; cursor:pointer;
  font:600 .85rem/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--rp2); color:var(--rd); border:1px solid var(--rl);
}
.eye-break-btn.primary{ background:linear-gradient(135deg,var(--rfa),var(--rfb)); color:var(--rof); border:none; }
@media (prefers-reduced-motion:reduce){ .eye-break-ring .bar{ transition:none; } }
.theme-cycle-btn + .header-icon-btn{ margin-left:8px; }

/* ============================================================
   2.12.2 — HOME REDESENHADA
   Estrutura: cabeçalho (marca + progresso) · grupo principal
   (mensagem + escolha) · rodapé. Nada de cartão dentro de cartão:
   a escolha e o botão ficam soltos na página, e o espaço livre
   é repartido pelos espaçadores flexíveis acima e abaixo do grupo.
   Ritmo vertical em múltiplos de 4/8 px; grupos relacionados ficam
   próximos (8–12 px) e grupos diferentes, afastados (32–48 px).
   ============================================================ */
.home-view{
  justify-content:flex-start !important;
  padding:calc(18px + var(--safe-top)) 24px calc(16px + var(--safe-bottom)) !important;
}
.home-view::after{ display:none; }
.home-view::before{ right:-30%; top:14%; opacity:.8; }
.home-brand-row::after{ content:none !important; display:none !important; }

.hv{
  flex:1; min-height:0; width:100%; max-width:560px; margin:0 auto;
  display:flex; flex-direction:column;
}
.hv > *{ animation:none !important; }

/* Cabeçalho */
.hv-top{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; }
.hv-brand{ margin:0 !important; gap:10px; }
.hv-brand .brand-name{ font-size:1.22rem !important; }
.hv-brand .logo-mark-lg{ width:52px; height:18px; }
.hv-stat{ display:flex; align-items:center; gap:10px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
.hv-stat-text{ font-size:.74rem; color:#7f8998; font-variant-numeric:tabular-nums; }
.hv-stat-text strong{ color:var(--ink); font-weight:600; }
.hv-ring{ position:relative; width:38px; height:38px; flex:none; }
.hv-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hv-ring circle{ fill:none; stroke-width:3; }
.hv-ring-track{ stroke:rgba(255,255,255,.09); }
.hv-ring-bar{ stroke:var(--gold); stroke-linecap:round; stroke-dasharray:100.53; stroke-dashoffset:100.53; transition:stroke-dashoffset .6s ease; }
.hv-ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums; }

.hv-spacer{ flex:1 1 0; min-height:16px; }
.hv-main{ flex:none; display:flex; flex-direction:column; }

/* Mensagem */
.hv-hero{ display:flex; flex-direction:column; }
.hv-eyebrow{ margin:0 0 14px !important; padding:0 !important; font-size:.62rem !important; letter-spacing:.12em !important; gap:10px; }
.hv-eyebrow::before{ width:22px !important; }
.hv-title{
  margin:0 0 16px !important;
  font-size:max(2rem, min(9.2vw, 7vh, 4.4rem)) !important;
  line-height:1.03 !important; letter-spacing:-.035em !important;
}
.hv-copy{
  margin:0; max-width:32ch;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:.95rem; line-height:1.6; color:#9ca6b4;
}

/* Escolha + Iniciar (sem cartão em volta) */
.hv-action{ display:flex; flex-direction:column; margin-top:clamp(28px, 5.2vh, 48px); }
.hv-label{
  display:block; margin:0 0 10px 2px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:.78rem; font-weight:500; letter-spacing:.01em; color:#8a94a3;
}
.hv .start-mode-select{
  position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border:0 !important; opacity:0 !important;
  pointer-events:none !important; overflow:hidden !important;
}
.hv-trigger{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  min-height:68px; padding:10px 12px 10px 10px; border-radius:16px;
  color:inherit; font:inherit;
  background:linear-gradient(135deg, rgba(240,180,94,.07), rgba(240,180,94,0) 60%), #0e131a;
  border:1px solid rgba(240,180,94,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.hv-trigger:hover{ border-color:rgba(240,180,94,.5); }
.hv-trigger:focus-visible{ outline:none !important; border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,180,94,.18); }
.hv-trigger[aria-expanded="true"] .combo-chevron{ transform:rotate(180deg); }
.hv-go{ width:100%; margin-top:10px; min-height:56px !important; border-radius:16px !important; }
.hv-progress{ display:none; margin-top:20px; }
.hv-progress-row{ margin-bottom:8px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:.78rem; color:#8a94a3; }
.hv-progress-row strong{ color:var(--ink); font-weight:600; }
.hv-progress .progress-track{ height:3px; background:rgba(255,255,255,.08); margin:0; }

.hv-foot{ flex:none; margin:0 !important; padding:0 2px !important; text-align:left !important; font-size:.62rem !important; color:#4f5a69 !important; }

/* Telas baixas: comprime primeiro o texto de apoio, depois o rodapé */
@media (max-height:700px){
  .hv-title{ margin-bottom:12px !important; }
  .hv-action{ margin-top:24px; }
  .hv-trigger{ min-height:60px; }
  .hv-go{ min-height:50px !important; }
}
@media (max-height:600px){
  .hv-copy, .hv-foot{ display:none; }
}
@media (max-height:460px){
  .hv-eyebrow{ display:none; }
  .hv-title{ font-size:2rem !important; }
}
@media (min-width:900px){
  .hv{ max-width:600px; }
}

/* ---------- Seletor (folha inferior no celular, lista suspensa em tela larga) ---------- */
.mode-picker{ position:fixed; inset:0; z-index:80; }
.mode-picker.hidden{ display:none !important; }
.mode-picker-backdrop{ position:absolute; inset:0; background:rgba(4,6,9,.62); opacity:0; transition:opacity .18s ease; }
.mode-picker.is-open .mode-picker-backdrop{ opacity:1; }
.mode-picker-panel{
  position:absolute; left:0; right:0; bottom:0; max-width:560px; margin:0 auto;
  max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain;
  padding:8px 10px calc(12px + var(--safe-bottom));
  background:#121821; color:var(--ink);
  border:1px solid rgba(255,255,255,.08); border-bottom:0; border-radius:26px 26px 0 0;
  box-shadow:0 -24px 70px rgba(0,0,0,.45);
  transform:translateY(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.mode-picker.is-open .mode-picker-panel{ transform:none; }
.mode-picker-handle{ width:38px; height:4px; border-radius:999px; background:#394352; margin:4px auto 10px; }
.mode-picker-title{
  margin:0; padding:4px 12px 12px;
  font:700 1.12rem/1.2 Georgia,'Iowan Old Style','Palatino Linotype',serif; color:var(--ink);
}
.mode-picker-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.mp-option{
  display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 12px; border-radius:16px;
  cursor:pointer; outline:none; transition:background .14s ease;
}
.mp-option:hover, .mp-option.is-active{ background:rgba(255,255,255,.04); }
.mp-option:focus-visible{ box-shadow:inset 0 0 0 2px var(--gold); }
.mp-option[aria-selected="true"]{ background:rgba(240,180,94,.09); }
.mp-option .combo-icon{ width:42px; height:42px; border-radius:12px; }
.mp-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mp-title{ font:700 1.05rem/1.2 Georgia,'Iowan Old Style','Palatino Linotype',serif; color:var(--ink); }
.mp-sub{ font:400 .78rem/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#8a94a3; }
.mp-num{ flex:none; width:24px; text-align:center; font:500 .72rem/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:#566171; font-variant-numeric:tabular-nums; }
.mp-check{ display:none; flex:none; width:22px; height:22px; color:var(--gold); }
.mp-option[aria-selected="true"] .mp-num{ display:none; }
.mp-option[aria-selected="true"] .mp-check{ display:block; }

.mode-picker.is-popover .mode-picker-backdrop{ background:transparent; }
.mode-picker.is-popover .mode-picker-panel{
  right:auto; bottom:auto; margin:0; max-width:none;
  padding:8px; border-radius:18px; border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-6px); opacity:0; transition:transform .16s ease, opacity .16s ease;
}
.mode-picker.is-popover.is-open .mode-picker-panel{ transform:none; opacity:1; }
.mode-picker.is-popover .mode-picker-handle, .mode-picker.is-popover .mode-picker-title{ display:none; }
@media (prefers-reduced-motion:reduce){
  .mode-picker-panel, .mode-picker-backdrop{ transition:none !important; }
}

/* 2.12.3 — frase de impacto em 4 linhas ("Aprenda / inglês. / Uma palavra / por vez.")
   O tamanho final é calculado em src/fit-title.js; o valor abaixo é só o ponto de partida. */
.hv-title{
  font-size:max(2rem, min(15.5vw, 7.6vh, 5.75rem)) !important;
  line-height:.98 !important; letter-spacing:-.04em !important;
  margin-bottom:18px !important;
}
.hv-title .tl{ display:block; white-space:nowrap; }
.hv-title em.tl{ font-style:normal; padding-bottom:.04em; margin-bottom:-.04em; }
.hv-eyebrow{ margin-bottom:16px !important; }

/* 2.12.4 — simetria vertical: os três vãos (cabeçalho→mensagem,
   mensagem→escolha, escolha→rodapé) são iguais e o título cresce
   até não sobrar espaço em branco (ver src/fit-title.js). */
.hv-main{ display:contents; }
.hv-action{ margin-top:0 !important; }
.hv-spacer, .hv-spacer-top, .hv-spacer-mid, .hv-spacer-bottom{ flex:1 1 0 !important; min-height:20px; }
@media (max-height:700px){ .hv-spacer{ min-height:16px; } }
@media (max-height:460px){ .hv-spacer{ min-height:8px; } }

/* ============================================================
   2.13.0 — NOVA HOME ("Studio verde")
   Baseada no mockup: paisagem ao entardecer, verde-sálvia como cor
   de ação, cartão de progresso com anel e estatísticas, atalhos em
   grade 2×2 e navegação inferior fixa. A Home volta a rolar (a
   barra de rolagem fica escondida) porque o conteúdo é de painel.
   ============================================================ */
:root{
  --h-bg:#0f1916; --h-bg-2:#0b1311;
  --h-card:rgba(27,40,35,.78); --h-card-2:#1b2a25; --h-line:rgba(255,255,255,.075);
  --h-ink:#eee9df; --h-dim:#aab6af; --h-faint:#7f8d86;
  --h-green:#8fcaa0; --h-green-2:#7dbb90; --h-on-green:#10231a;
  --h-font:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html:has(.home-view:not(.hidden)),
html:has(.home-view:not(.hidden)) body{
  overflow:visible !important; height:auto !important;
  background:var(--h-bg-2) !important;
  scrollbar-width:none;
}
html:has(.home-view:not(.hidden))::-webkit-scrollbar{ display:none; }
html:has(.home-view:not(.hidden)) body::before{ display:none; }

.home-view{
  position:relative; display:block !important;
  height:auto !important; min-height:100vh !important; min-height:100dvh !important;
  overflow:visible !important; padding:0 !important;
  background:linear-gradient(180deg, var(--h-bg) 0%, #0e1815 45%, var(--h-bg-2) 100%);
  font-family:var(--h-font); color:var(--h-ink);
}
.home-view::before, .home-view::after{ display:none !important; content:none !important; }
.home-view.hidden{ display:none !important; }

/* Paisagem */
.hx-bg{
  position:absolute; top:calc(44px + var(--safe-top)); width:100%; max-width:760px; height:min(80vw, 470px);
  left:50%; transform:translateX(-50%);
  pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 30%, #000 62%), linear-gradient(180deg, transparent 0%, #000 26%, #000 72%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 30%, #000 62%), linear-gradient(180deg, transparent 0%, #000 26%, #000 72%, transparent 100%);
          mask-composite:intersect;
}
.hx-scene{ position:absolute; inset:0; width:100%; height:100%; }

.hx{
  position:relative; z-index:1; max-width:560px; margin:0 auto;
  padding:calc(18px + var(--safe-top)) 20px calc(28px + var(--safe-bottom));
}

/* Topo */
.hx-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hx-brand{ display:flex; align-items:center; gap:12px; }
.hx-logo{ width:64px; height:21px; flex:none; }
.hx-brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.hx-name{ font-size:1.55rem; font-weight:700; letter-spacing:-.02em; color:var(--h-ink); }
.hx-tag{ margin-top:3px; font-size:.86rem; font-weight:500; color:var(--h-green); letter-spacing:.005em; }
.hx-gear{
  flex:none; width:44px; height:44px; margin:-2px -6px 0 0; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:transparent; color:var(--h-green);
}
.hx-gear svg{ width:26px; height:26px; }
.hx-gear:hover{ background:rgba(143,202,160,.1); }

/* Mensagem */
.hx-hero{ margin-top:clamp(28px, 6vh, 48px); }
.hx-rule{ display:block; width:26px; height:3px; border-radius:2px; background:var(--h-green); margin-bottom:18px; }
.hx-title{
  margin:0 0 14px; font-family:var(--h-font); font-weight:800;
  font-size:clamp(2.15rem, 9.4vw, 3.4rem); line-height:1.04; letter-spacing:-.03em; color:var(--h-ink);
}
.hx-title em{ font-style:normal; color:var(--h-green); }
.hx-copy{ margin:0; max-width:25ch; font-size:.98rem; line-height:1.5; color:#c9cfc8; font-weight:400; }

/* Seleção + ação */
.hx-actions{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.hx .start-mode-select{
  position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border:0 !important; opacity:0 !important; pointer-events:none !important;
}
.hx-select{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:0 18px;
  border-radius:999px; cursor:pointer; text-align:left; font:inherit;
  background:rgba(22,34,30,.72); color:var(--h-ink); border:1px solid rgba(143,202,160,.28);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .16s ease, background .16s ease;
}
.hx-select:hover{ border-color:rgba(143,202,160,.55); }
.hx-select:focus-visible{ outline:none !important; border-color:var(--h-green); box-shadow:0 0 0 3px rgba(143,202,160,.2); }
.hx-select-icon{ display:flex; color:var(--h-green); }
.hx-select-icon svg{ width:24px; height:24px; }
.hx-select-text{ flex:1; min-width:0; font-size:.93rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hx-select.is-empty .hx-select-text{ font-weight:500; color:#c9cfc8; }
.hx-chevron{ width:20px; height:20px; flex:none; color:var(--h-green); transition:transform .18s ease; }
.hx-select[aria-expanded="true"] .hx-chevron{ transform:rotate(180deg); }

.hx-go{
  display:flex; align-items:center; gap:14px; width:100%; min-height:58px; padding:0 20px;
  border:0; border-radius:999px; cursor:pointer; font:inherit;
  background:linear-gradient(180deg, #9ad3aa, var(--h-green-2)); color:var(--h-on-green);
  box-shadow:0 10px 26px rgba(125,187,144,.18), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .16s ease, filter .16s ease;
}
.hx-go:hover{ filter:brightness(1.04); }
.hx-go:active{ transform:scale(.99); }
.hx-go span{ flex:1; text-align:left; font-size:1.06rem; font-weight:700; letter-spacing:-.005em; }
.hx-play{ width:22px; height:22px; flex:none; }
.hx-go .hx-arrow{ width:22px; height:22px; }

/* Cartões */
.hx-card{
  background:var(--h-card); border:1px solid var(--h-line); border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.hx-progress{ margin-top:18px; padding:16px 16px 14px; }
.hx-progress-head{ display:flex; align-items:center; gap:16px; }
.hx-ring{ position:relative; width:76px; height:76px; flex:none; }
.hx-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.hx-ring circle{ fill:none; stroke-width:3.4; }
.hx-ring-track{ stroke:rgba(255,255,255,.1); }
.hx-ring-bar{ stroke:var(--h-green); stroke-linecap:round; stroke-dasharray:100.53; stroke-dashoffset:100.53; transition:stroke-dashoffset .6s ease; }
.hx-ring-pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:600; color:var(--h-ink); font-variant-numeric:tabular-nums; }
.hx-progress-body{ flex:1; min-width:0; }
.hx-progress-title{ margin:0 0 4px; font-size:1.02rem; font-weight:600; color:var(--h-ink); }
.hx-progress-count{ margin:0 0 10px; font-size:.84rem; color:var(--h-dim); }
.hx-progress-count strong{ color:var(--h-ink); font-weight:700; }
.hx-bar{ height:7px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.hx-bar-fill{ height:100%; width:0; border-radius:inherit; background:var(--h-green); transition:width .6s ease; }
.hx-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:14px; padding-top:12px; border-top:1px solid var(--h-line); }
.hx-stat{ display:flex; align-items:center; gap:8px; min-width:0; padding:0 6px; }
.hx-stat + .hx-stat{ border-left:1px solid var(--h-line); }
.hx-stat:first-child{ padding-left:0; }
.hx-stat svg{ width:22px; height:22px; flex:none; color:var(--h-green); }
.hx-stat > div{ display:flex; flex-direction:column; min-width:0; }
.hx-stat-value{ font-size:.95rem; font-weight:700; color:var(--h-ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.hx-stat-label{ font-size:.7rem; line-height:1.2; color:var(--h-faint); }

.hx-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.hx-mode{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding:14px 14px 38px; min-height:150px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .16s ease, background .16s ease;
}
.hx-mode:hover{ border-color:rgba(143,202,160,.35); background:rgba(31,46,40,.85); }
.hx-mode:focus-visible{ outline:none !important; border-color:var(--h-green); box-shadow:0 0 0 3px rgba(143,202,160,.2); }
.hx-mode-icon{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#eef3ee; margin-bottom:12px; }
.hx-mode-icon svg{ width:22px; height:22px; }
.hx-mode-icon.is-green{ background:#3c7a5b; }
.hx-mode-icon.is-teal{ background:#2d6d67; }
.hx-mode-icon.is-bronze{ background:#8d6b46; }
.hx-mode-icon.is-violet{ background:#574d7c; }
.hx-mode-title{ font-size:1.02rem; font-weight:700; color:var(--h-ink); margin-bottom:4px; }
.hx-mode-desc{ font-size:.8rem; line-height:1.4; color:var(--h-dim); }
.hx-mode .hx-arrow{ position:absolute; right:14px; bottom:14px; width:20px; height:20px; color:var(--h-green); }

.hx-foot{ margin:18px 0 0; text-align:center; font-size:.66rem; color:#56645d; }

/* Seletor da Home no verde da Home */
.home-view .mode-picker-panel{ background:#15221e; border-color:var(--h-line); font-family:var(--h-font); }
.home-view .mode-picker-title, .home-view .mp-title{ font-family:var(--h-font); font-weight:700; color:var(--h-ink); }
.home-view .mp-sub{ font-family:var(--h-font); color:var(--h-dim); }
.home-view .mp-option[aria-selected="true"]{ background:rgba(143,202,160,.12); }
.home-view .mp-option:focus-visible{ box-shadow:inset 0 0 0 2px var(--h-green); }
.home-view .mp-check{ color:var(--h-green); }
.home-view .mp-option .combo-icon{ background:rgba(143,202,160,.12); border-color:rgba(143,202,160,.22); color:var(--h-green); }

@media (max-width:360px){
  .hx{ padding-left:16px; padding-right:16px; }
  .hx-stat-label{ font-size:.64rem; }
  .hx-mode{ min-height:140px; padding:12px 12px 34px; }
  .hx-mode-desc{ font-size:.76rem; }
}
@media (min-width:700px){
  .hx-scene{ width:100%; }
  .hx-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hx{ max-width:760px; }
}

/* 2.14.0 — logo único do sistema: onda sonora verde (pacote de onda com eco).
   As cores vêm de --logo-a/--logo-b, então o mesmo desenho se adapta ao tema. */
:root{ --logo-a:#5fa37c; --logo-b:#a8dcb6; }
html[data-theme="paper"] .practice-view,
html[data-theme="paper"] .grammar-view{ --logo-a:#2f7a52; --logo-b:#3f9466; }
.logo-mark{ width:58px !important; height:17px !important; overflow:visible; }
.hx-logo{ width:72px !important; height:22px !important; }
.practice-view .logo-mark, .grammar-view .logo-mark{ width:62px !important; height:19px !important; }
.practice-view .logo-mark path:not(.logo-echo), .grammar-view .logo-mark path:not(.logo-echo){ stroke-width:3.2; }
.hx-logo path:not(.logo-echo){ stroke-width:3; }

/* 2.14.1 — chips no verde-sálvia da Home
   Vale para os filtros de Palavras (Todas / Não aprendidas / Aprendidas),
   os modos de Frases (Starters, Perguntas, Conectores, Verbos) e as
   categorias de Frases. Selecionado: preenchimento verde com texto
   verde-escuro; não selecionado: borda com leve tom verde. */
:root{
  --chip-on-a:#9ad3aa; --chip-on-b:#7dbb90; --chip-on-text:#10231a;
  --chip-line:rgba(143,202,160,.24); --chip-line-hover:rgba(143,202,160,.55); --chip-text:var(--rd);
  --chip-glow:rgba(125,187,144,.18);
}
html[data-theme="paper"]{
  --chip-on-a:#8cc9a0; --chip-on-b:#6aae84; --chip-on-text:#0f2419;
  --chip-line:rgba(47,122,82,.28); --chip-line-hover:rgba(47,122,82,.55);
  --chip-glow:rgba(47,122,82,.16);
}
:root .practice-view .filters .filter,
:root .practice-view .connect-chips .connect-chip,
:root .practice-view .connect-mode-row .connect-mode-btn{
  border:1px solid var(--chip-line); color:var(--chip-text);
  transition:background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
:root .practice-view .filters .filter:hover,
:root .practice-view .connect-chips .connect-chip:hover,
:root .practice-view .connect-mode-row .connect-mode-btn:hover{ border-color:var(--chip-line-hover); color:var(--ri); }
:root .practice-view .filters .filter[aria-pressed="true"],
:root .practice-view .connect-chips .connect-chip.active,
:root .practice-view .connect-mode-row .connect-mode-btn.active{
  background:linear-gradient(180deg, var(--chip-on-a), var(--chip-on-b));
  border-color:transparent; color:var(--chip-on-text); font-weight:600;
  box-shadow:0 6px 16px var(--chip-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
:root .practice-view .filters .filter:focus-visible,
:root .practice-view .connect-chips .connect-chip:focus-visible,
:root .practice-view .connect-mode-row .connect-mode-btn:focus-visible{ outline-color:var(--chip-on-b) !important; }

/* ============================================================
   2.15.0 — HARMONIA COM A TELA PRINCIPAL
   As telas de estudo passam a falar a língua visual da Home:
   - acento verde-sálvia no lugar do dourado (botões, anéis, barras,
     pronúncia, cards ativos, foco);
   - novo tema "Floresta" (chave interna: graphite), com o mesmo
     verde-escuro da Home — é o tema escuro do modo Automático;
   - Papel e Noite mantêm o fundo, mas com o acento verde;
   - títulos e controles em Manrope, como na Home. As frases de
     estudo continuam em Roboto.
   ============================================================ */
:root{
  --rb:#111b18; --rp:#18251f; --rp2:#1f2e28; --rl:rgba(214,235,222,.09);
  --ri:#e6e1d6; --rd:#b7c3bb; --rf:#8a978f; --ra:#a6dab6;
  --rfa:#9ad3aa; --rfb:#7dbb90; --rof:#10231a;
  --rh:rgba(17,27,24,.9); --rs:rgba(0,0,0,.3); --rok:#a9d8bc; --rglow:rgba(143,202,160,.1);
  --rbg-glow:rgba(143,202,160,.05);
}
html[data-theme="paper"]{
  --rb:#e8e6dc; --rp:#f4f3ec; --rp2:#dfddd1; --rl:rgba(40,70,52,.14);
  --ri:#2b2721; --rd:#534d44; --rf:#7a7266; --ra:#28623f;
  --rfa:#8cc9a0; --rfb:#6aae84; --rof:#0f2419;
  --rh:rgba(232,230,220,.9); --rs:rgba(30,60,40,.1); --rok:#2f6b47; --rglow:rgba(47,122,82,.12);
  --rbg-glow:rgba(47,122,82,.05);
}
html[data-theme="night"]{
  --rb:#1e1b18; --rp:#27231f; --rp2:#302b26; --rl:rgba(255,236,210,.09);
  --ri:#e2d9c9; --rd:#c4b9a6; --rf:#9c917f; --ra:#a6d6b0;
  --rfa:#9ad3aa; --rfb:#7dbb90; --rof:#10231a;
  --rh:rgba(30,27,24,.9); --rs:rgba(0,0,0,.3); --rok:#a9d3a6; --rglow:rgba(143,202,160,.1);
  --rbg-glow:rgba(143,202,160,.04);
}
/* player de vídeo e pausa para os olhos também no acento verde */
#video-modal, .eye-break{ --gold:var(--ra); --gold-dim:var(--rfb); }
#video-modal .video-modal-sheet{ background:var(--rp); border-color:var(--rl); }
#video-modal .video-modal-level{ color:var(--ra); }
#video-modal .video-modal-title{ color:var(--ri); }
#video-modal .video-modal-fs-btn{ background:var(--rp2); color:var(--ri); border-color:var(--rfb); }
#video-modal .video-modal-fs-btn:hover, #video-modal .video-modal-yt-btn:hover{ color:var(--ra); border-color:var(--rfb); }
#video-modal .video-modal-yt-btn{ color:var(--rd); border-color:var(--rl); }

/* Barras de progresso e controles que ainda usavam dourado fixo */
:root .practice-view .mini-progress-fill,
:root .settings-sheet .progress-fill{ background:linear-gradient(90deg, var(--rfb), var(--rfa)); box-shadow:none; }
:root .settings-sheet .speed-row input[type="range"]{ accent-color:var(--rfb); }
:root .settings-sheet #speed-val, :root .settings-sheet .sheet-progress-percent{ color:var(--ra); }
:root .settings-sheet .theme-opt[aria-pressed="true"]{ border-color:var(--rfb); box-shadow:0 0 0 1px var(--rfb) inset; }
:root .settings-sheet .switch[aria-checked="true"]{ background:var(--rfb); border-color:var(--rfb); }
.practice-view ::selection, .grammar-view ::selection{ background:var(--rfb); color:var(--rof); }
:root .practice-view .connect-badge{ background:linear-gradient(135deg,var(--rfa),var(--rfb)); color:var(--rof); }
:root .practice-view .connect-advance-btn{ background:linear-gradient(180deg,var(--rfa),var(--rfb)); color:var(--rof); }

/* Tipografia de interface igual à da Home */
.practice-view .brand-name, .grammar-view .brand-name,
.grammar-view .grammar-level-heading,
.grammar-view .glt-code, .grammar-view .glt-name, .grammar-view .glt-count,
.grammar-view .gi-num, .grammar-view .gi-level-badge,
.practice-view .num, .practice-view .count, .practice-view .mini-progress-label,
.practice-view .filter, .practice-view .connect-chip, .practice-view .connect-mode-btn,
.practice-view .nav-btn, .bottom-nav .nav-btn,
.practice-view .practice-check-btn, .practice-view .practice-reveal-btn,
.practice-view .voice-check-btn, .practice-view .voice-stop-btn, .practice-view .voice-retry-btn,
.practice-view .practice-hint, .practice-view .voice-hint,
.connect-back-top-btn, .ci-num,
.settings-sheet, .settings-sheet .sheet-title, .settings-sheet .sheet-row-title, .settings-sheet .sheet-row-help,
.settings-sheet .theme-block, .settings-sheet .theme-opt, .settings-sheet .font-btn, .settings-sheet .sheet-btn,
.settings-sheet .speed-row, .settings-sheet .font-row, .settings-sheet .phonetic-symbol, .settings-sheet .phonetic-desc,
#video-modal .video-modal-title, #video-modal .video-modal-level, #video-modal button, #video-modal a,
.eye-break-card, .eye-break-title, .eye-break-count, .toast{
  font-family:var(--h-font) !important;
}
.practice-view .brand-name, .grammar-view .brand-name{ font-weight:700; letter-spacing:-.02em; }
.grammar-view .grammar-level-heading{ font-weight:700; letter-spacing:-.015em; }
.grammar-view .glt-code{ font-weight:800; }
#video-modal .video-modal-title, .eye-break-title{ font-weight:700; letter-spacing:-.01em; }
.settings-sheet .phonetic-symbol{ font-weight:800; }


/* 2.16.0 — logo "Equalizador": cinco barras de áudio, mais altas no centro.
   Mesmo desenho em todo o sistema; as cores vêm de --logo-a (base) e --logo-b (topo). */
:root{ --logo-a:#4f9670; --logo-b:#a8dcb6; }
html[data-theme="paper"] .practice-view,
html[data-theme="paper"] .grammar-view{ --logo-a:#2f7a52; --logo-b:#5fa37c; }
.logo-mark{ width:26px !important; height:26px !important; flex:none; }
.practice-view .logo-mark, .grammar-view .logo-mark{ width:26px !important; height:26px !important; }
.hx-logo{ width:44px !important; height:44px !important; }
.hx-brand{ gap:12px; }

/* ============================================================
   2.17.0 — PALETA DA 2.12.5 NO LAYOUT ATUAL
   (2.19.0: vale só para a edição "Frequency preto", a padrão)
   Mesmo layout (Home com paisagem, progresso e cartões; telas de
   estudo; logo Equalizador), com as cores da versão 2.12.5:
   preto-azulado profundo, dourado como acento e os temas de
   leitura Grafite / Papel / Noite originais.
   ============================================================ */

/* ---- Home ---- */
html:not([data-edition="verde"]){
  --h-bg:#0c1016; --h-bg-2:#0a0d12;
  --h-card:rgba(17,23,32,.82); --h-line:rgba(255,255,255,.075);
  --h-ink:#f2eee7; --h-dim:#9ca6b4; --h-faint:#6f7a8a;
  --h-green:#f0b45e; --h-green-2:#c98a3a; --h-on-green:#11151c;
}
html:not([data-edition="verde"]) .home-view{ background:linear-gradient(180deg, #0c1016 0%, #0b0f14 45%, #0a0d12 100%); }
html:not([data-edition="verde"]) .hx-copy{ color:#b9c0ca; }
html:not([data-edition="verde"]) .hx-gear:hover{ background:rgba(240,180,94,.1); }
html:not([data-edition="verde"]) .hx-select{ background:rgba(16,22,31,.78); border-color:rgba(240,180,94,.26); }
html:not([data-edition="verde"]) .hx-select:hover{ border-color:rgba(240,180,94,.55); }
html:not([data-edition="verde"]) .hx-select:focus-visible{ box-shadow:0 0 0 3px rgba(240,180,94,.2); }
html:not([data-edition="verde"]) .hx-select.is-empty .hx-select-text{ color:#b9c0ca; }
html:not([data-edition="verde"]) .hx-go{
  background:linear-gradient(135deg, #f5c47a, #d99a4a 55%, #b77b35);
  box-shadow:0 10px 26px rgba(240,180,94,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
html:not([data-edition="verde"]) .hx-mode:hover{ border-color:rgba(240,180,94,.35); background:rgba(22,29,40,.9); }
html:not([data-edition="verde"]) .hx-mode:focus-visible{ box-shadow:0 0 0 3px rgba(240,180,94,.2); }
html:not([data-edition="verde"]) .hx-mode-icon.is-green{ background:#a0703a; }
html:not([data-edition="verde"]) .hx-mode-icon.is-teal{ background:#355f78; }
html:not([data-edition="verde"]) .hx-mode-icon.is-bronze{ background:#7d5b3a; }
html:not([data-edition="verde"]) .hx-mode-icon.is-violet{ background:#574d7c; }
html:not([data-edition="verde"]) .hx-bar{ background:rgba(255,255,255,.07); }
html:not([data-edition="verde"]) .hx-bar-fill{ background:linear-gradient(90deg, #c98a3a, #f0b45e); }
html:not([data-edition="verde"]) .hx-foot{ color:#4f5a69; }
html:not([data-edition="verde"]) .home-view .mode-picker-panel{ background:#121821; }
html:not([data-edition="verde"]) .home-view .mp-option[aria-selected="true"]{ background:rgba(240,180,94,.1); }
html:not([data-edition="verde"]) .home-view .mp-option:focus-visible{ box-shadow:inset 0 0 0 2px var(--h-green); }
html:not([data-edition="verde"]) .home-view .mp-option .combo-icon{ background:rgba(240,180,94,.1); border-color:rgba(240,180,94,.22); color:var(--h-green); }

/* ---- Temas de leitura (valores da 2.12.5) ---- */
html:not([data-edition="verde"]){
  --rb:#19202b; --rp:#212a37; --rp2:#263141; --rl:rgba(255,255,255,.1);
  --ri:#dcd7cc; --rd:#b0b8c4; --rf:#8a93a1; --ra:#dba463;
  --rfa:#f0b45e; --rfb:#a87237; --rof:#141a22;
  --rh:rgba(25,32,43,.9); --rs:rgba(0,0,0,.28); --rok:#9fd9b8; --rglow:rgba(240,180,94,.1);
  --rbg-glow:rgba(240,180,94,.06);
}
html:not([data-edition="verde"])[data-theme="paper"]{
  --rb:#ebe5d9; --rp:#f5f1e8; --rp2:#e2dbcc; --rl:rgba(70,52,28,.15);
  --ri:#2b2721; --rd:#534d44; --rf:#7a7266; --ra:#7c4a0e;
  --rfa:#e2b067; --rfb:#c98a3a; --rof:#2b2110;
  --rh:rgba(235,229,217,.9); --rs:rgba(80,60,30,.12); --rok:#2f6b47; --rglow:rgba(201,138,58,.14);
  --rbg-glow:rgba(201,138,58,.07);
}
html:not([data-edition="verde"])[data-theme="night"]{
  --rb:#1e1b18; --rp:#27231f; --rp2:#302b26; --rl:rgba(255,236,210,.09);
  --ri:#e2d9c9; --rd:#c4b9a6; --rf:#9c917f; --ra:#eab574;
  --rfa:#e8ae66; --rfb:#b98044; --rof:#1e1b18;
  --rh:rgba(30,27,24,.9); --rs:rgba(0,0,0,.3); --rok:#a9d3a6; --rglow:rgba(234,181,116,.1);
  --rbg-glow:rgba(234,181,116,.05);
}

/* ---- Chips em dourado ---- */
html:not([data-edition="verde"]){
  --chip-on-a:#f5c47a; --chip-on-b:#d99a4a; --chip-on-text:#11151c;
  --chip-line:rgba(240,180,94,.22); --chip-line-hover:rgba(240,180,94,.5); --chip-glow:rgba(240,180,94,.16);
}
html:not([data-edition="verde"])[data-theme="paper"]{
  --chip-on-a:#e8b56c; --chip-on-b:#c98a3a; --chip-on-text:#2b2110;
  --chip-line:rgba(124,74,14,.24); --chip-line-hover:rgba(124,74,14,.5); --chip-glow:rgba(201,138,58,.16);
}
html:not([data-edition="verde"])[data-theme="night"]{
  --chip-on-a:#eebb78; --chip-on-b:#c98f4d; --chip-on-text:#1e1b18;
  --chip-line:rgba(234,181,116,.22); --chip-line-hover:rgba(234,181,116,.5); --chip-glow:rgba(234,181,116,.14);
}

/* ---- Logo Equalizador em dourado ---- */
html:not([data-edition="verde"]){ --logo-a:#a9824f; --logo-b:#f0b45e; }
html:not([data-edition="verde"])[data-theme="paper"] .practice-view,
html:not([data-edition="verde"])[data-theme="paper"] .grammar-view{ --logo-a:#8a5a1c; --logo-b:#c98a3a; }
html:not([data-edition="verde"])[data-theme="night"] .practice-view,
html:not([data-edition="verde"])[data-theme="night"] .grammar-view{ --logo-a:#b98044; --logo-b:#eab574; }


/* ============================================================
   2.18.0 — LAYOUT REFINEMENT
   Objetivo: hierarquia visual mais clara, melhor uso de espaço
   em desktop e leitura mais confortável no mobile.
   ============================================================ */

/* ---------- App shell ---------- */
body{
  --layout-max: 760px;
}
.practice-view,
.home-view{
  width:100%;
}

/* ---------- Study header ---------- */
.practice-view header{
  background:linear-gradient(
    to bottom,
    color-mix(in srgb, var(--rb, var(--bg)) 96%, transparent) 72%,
    transparent
  );
  border-bottom:0;
  padding-top:calc(12px + var(--safe-top));
  padding-bottom:12px;
}
.practice-view .title-row{
  max-width:760px;
}
.practice-view main{
  max-width:760px;
  padding-left:20px;
  padding-right:20px;
  padding-top:4px;
}
.practice-view .brand-row{
  min-height:36px;
  margin-bottom:8px;
}
.practice-view .mini-progress-row{
  margin:0 0 4px 42px;
  max-width:620px;
}

/* ---------- Word list: clearer content rhythm ---------- */
.practice-view .entry{
  position:relative;
  gap:16px;
  padding:22px 2px;
}
.practice-view .entry-main{
  max-width:660px;
}
.practice-view .head{
  gap:10px;
  margin-bottom:10px;
}
.practice-view .word{
  letter-spacing:-.015em;
}
.practice-view .sentence{
  max-width:62ch;
  line-height:1.58;
}
.practice-view .translation{
  max-width:68ch;
  line-height:1.5;
}
.practice-view .ipa-box,
.practice-view .practice-box,
.practice-view .voice-box{
  max-width:680px;
}
.practice-view .entry-actions{
  padding-top:0;
}

/* ---------- Search ---------- */
.practice-view .search-field{
  border-radius:12px;
}
.practice-view #search{
  border-radius:12px;
  min-height:46px;
}
.practice-view .filters{
  gap:8px;
  margin-top:10px;
}

/* ---------- Phrase screen ---------- */
.practice-view .connect-view{
  max-width:760px;
  margin:0 auto;
}
.practice-view .connect-mode-row{
  gap:8px;
  margin-bottom:12px;
}
.practice-view .connect-list{
  gap:12px;
}
.practice-view .connect-item{
  padding:16px 18px;
  border-radius:16px;
}
.practice-view .ci-en{
  line-height:1.45;
}
.practice-view .connect-chips{
  gap:8px;
}

/* ---------- Bottom navigation ---------- */
.practice-view .bottom-nav{
  border-top-color:var(--rl, var(--hairline));
}
.practice-view .nav-btn{
  min-height:56px;
}

/* ---------- Home: stronger editorial hierarchy ---------- */
.hx{
  max-width:760px;
  padding-left:24px;
  padding-right:24px;
}
.hx-hero{
  max-width:620px;
}
.hx-title{
  max-width:13ch;
}
.hx-copy{
  max-width:46ch;
  font-size:1rem;
  line-height:1.58;
}
.hx-actions{
  max-width:620px;
}
.hx-progress{
  max-width:620px;
}
.hx-grid{
  max-width:760px;
  gap:14px;
}
.hx-mode{
  min-height:154px;
  padding:16px 16px 40px;
}
.hx-mode-desc{
  max-width:28ch;
}
.hx-foot{
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- Wide screens ---------- */
@media (min-width:700px){
  .practice-view header{
    padding-left:24px;
    padding-right:24px;
  }

  .practice-view main{
    padding-left:24px;
    padding-right:24px;
    padding-bottom:calc(96px + var(--safe-bottom));
  }

  .practice-view .entry{
    padding-left:4px;
    padding-right:4px;
  }

  .hx{
    padding-top:calc(28px + var(--safe-top));
    padding-left:32px;
    padding-right:32px;
  }

  .hx-hero{
    margin-top:clamp(34px, 7vh, 64px);
  }

  .hx-actions{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    align-items:stretch;
    gap:12px;
  }

  .hx-actions .hx-select,
  .hx-actions .hx-go{
    min-height:60px;
  }

  .hx-progress{
    padding:18px 20px 16px;
  }

  .hx-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* ---------- Compact mobile ---------- */
@media (max-width:699px){
  .practice-view header{
    padding-left:16px;
    padding-right:16px;
  }

  .practice-view main{
    padding-left:16px;
    padding-right:16px;
  }

  .practice-view .mini-progress-row{
    margin-left:0;
  }

  .practice-view .entry{
    padding:20px 0;
  }

  .practice-view .entry-actions{
    gap:7px;
  }

  .practice-view .action-btn{
    width:36px;
    height:36px;
  }

  .hx{
    padding-left:20px;
    padding-right:20px;
  }

  .hx-hero{
    margin-top:34px;
  }

  .hx-title{
    max-width:12ch;
    font-size:clamp(2.2rem, 10.5vw, 3rem);
  }

  .hx-progress-head{
    gap:14px;
  }

  .hx-ring{
    width:68px;
    height:68px;
  }

  .hx-grid{
    gap:10px;
  }

  .hx-mode{
    min-height:148px;
  }
}

/* ---------- Very small screens ---------- */
@media (max-width:390px){
  .practice-view .entry{
    gap:10px;
  }

  .practice-view .word{
    font-size:calc(1.30rem * var(--scale));
  }

  .practice-view .sentence{
    font-size:calc(1.08rem * var(--scale));
  }

  .practice-view .translation{
    font-size:calc(.95rem * var(--scale));
  }

  .hx{
    padding-left:16px;
    padding-right:16px;
  }

  .hx-top{
    gap:8px;
  }

  .hx-name{
    font-size:1.4rem;
  }

  .hx-tag{
    font-size:.78rem;
  }

  .hx-grid{
    grid-template-columns:1fr;
  }

  .hx-mode{
    min-height:118px;
    padding-bottom:34px;
  }

  .hx-mode-desc{
    max-width:42ch;
  }
}

/* Respect users who prefer less visual motion. */
@media (prefers-reduced-motion: reduce){
  .hx-ring-bar,
  .hx-bar-fill,
  .mini-progress-fill{
    transition:none;
  }
}

/* ============================================================
   2.19.0 — DUAS EDIÇÕES: FREQUENCY PRETO E FREQUENCY VERDE
   O botão do topo da Home troca a edição (<html data-edition>).
   - preto (padrão): paleta da 2.17.0, bloco escopado acima.
   - verde: paleta da 2.15/2.16 (verde-sálvia, tema Floresta), que é
     a base deste arquivo; aqui ficam só a paisagem e as amostras.
   O layout (2.18.0) é o mesmo nas duas.
   ============================================================ */

/* ---- Botão de edição no topo da Home ---- */
.hx-edition{ position:relative; }
.hx-edition .ed-dot{
  position:absolute; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), left .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.hx-edition .ed-dot-preto{ background:#0a0d12; box-shadow:0 0 0 2px #f0b45e; }
.hx-edition .ed-dot-verde{ background:linear-gradient(180deg,#a8dcb6,#6fb489); box-shadow:0 0 0 2px #0f1916; }
/* edição atual na frente, maior; a outra atrás, menor */
.hx-edition[data-edition="preto"] .ed-dot-preto{ left:9px; z-index:2; transform:scale(1); }
.hx-edition[data-edition="preto"] .ed-dot-verde{ left:19px; z-index:1; transform:scale(.8); }
.hx-edition[data-edition="verde"] .ed-dot-verde{ left:9px; z-index:2; transform:scale(1); box-shadow:0 0 0 2px #0f1916, 0 0 0 3px rgba(168,220,182,.35); }
.hx-edition[data-edition="verde"] .ed-dot-preto{ left:19px; z-index:1; transform:scale(.8); }
.hx-edition:active .ed-dot{ transform:scale(.9); }

/* ---- Paisagem da Home na edição verde ---- */
html[data-edition="verde"] #hxGlow stop:nth-child(3){ stop-color:#0f1916; }
html[data-edition="verde"] #hxFar stop:nth-child(1){ stop-color:#5f8272; }
html[data-edition="verde"] #hxFar stop:nth-child(2){ stop-color:#35503f; }
html[data-edition="verde"] #hxMid stop:nth-child(1){ stop-color:#3a584b; }
html[data-edition="verde"] #hxMid stop:nth-child(2){ stop-color:#203730; }
html[data-edition="verde"] #hxNear stop:nth-child(1){ stop-color:#1d3129; }
html[data-edition="verde"] #hxNear stop:nth-child(2){ stop-color:#12201b; }
html[data-edition="verde"] #hxLake stop:nth-child(1){ stop-color:#34463c; }
html[data-edition="verde"] #hxLake stop:nth-child(2){ stop-color:#1b2b25; }
html[data-edition="verde"] #hxLake stop:nth-child(3){ stop-color:#0f1916; }
html[data-edition="verde"] #hxMist stop{ stop-color:#9fb8a6; }
html[data-edition="verde"] #hxMist stop:nth-child(2){ stop-opacity:.16; }
html[data-edition="verde"] .hx-trees{ fill:#0f1c18; }

/* ---- Amostras do seletor de tema na edição verde ("Floresta") ---- */
html[data-edition="verde"] .sw-graphite{ background:#111b18; } html[data-edition="verde"] .sw-graphite i{ background:#e6e1d6; } html[data-edition="verde"] .sw-graphite i:last-child{ background:#a6dab6; }
html[data-edition="verde"] .sw-paper{ background:#e8e6dc; } html[data-edition="verde"] .sw-paper i:last-child{ background:#28623f; }
html[data-edition="verde"] .sw-night i:last-child{ background:#a6d6b0; }
html[data-edition="verde"] .sw-auto{ background:linear-gradient(135deg,#e8e6dc 0 50%,#111b18 50% 100%); }

/* Troca de edição com um cruzamento suave (View Transitions, quando houver). */
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.32s; }