* {
  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;
}
#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,
.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(--accent) !important;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  overscroll-behavior-y: contain;
  width: 100%;
}
body {
  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 {
  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(--accent);
  color: #11151c;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---- Header ---- */
header {
  position: sticky;
  top: 0;
  z-index: 5;

  padding: calc(14px + var(--safe-top)) 18px 10px;
}
.title-row {
  margin: 0 auto;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-name {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "PT Serif",
    serif;
  font-weight: 700;
  color: var(--ink);
}

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

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

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

.entry {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--hairline);
  content-visibility: auto;
  contain-intrinsic-size: 220px;
  transition: opacity 0.15s ease;
}
.entry:last-child {
  border-bottom: none;
}
.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;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.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.active,
.action-btn.playing,
.action-btn.listening {
  color: var(--accent);
  border-color: var(--accent-dim);
}
.action-btn.known-btn[aria-pressed="true"] {
  color: #11151c;
  border-color: var(--accent);
}
.action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.action-btn.info-btn {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1;
}

.head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.num {
  min-width: 2em;
  font-variant-numeric: tabular-nums;
}
.word {
  font-weight: 700;
}
.word-pron {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.02em;
}
.known-badge {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-left: auto;
}
.entry.is-known .known-badge {
  display: flex;
}
.known-badge svg {
  width: 11px;
  height: 11px;
}

.ipa-box {
  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: 0.85rem;
  margin-bottom: 4px;
}
.ipa-label {
  flex: none;
  width: 4.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding-top: 0.2em;
}
.ipa-value {
  color: var(--ink);
}
.ipa-note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.ipa-note.ipa-confusable {
  color: var(--ink-faint);
}
.ipa-tag {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 2px;
}

.sentence {
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.entry.practicing .sentence,
.entry.practicing .sentence-pron {
  filter: blur(7px);
  user-select: none;
  transition: filter 0.15s ease;
}
.sentence-pron {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: calc(0.96rem * var(--scale));
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.translation {
  font-size: calc(1.02rem * var(--scale));
}

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

/* ---- Practice / Voice boxes ---- */
.practice-box,
.voice-box {
  margin-top: 12px;
  margin-bottom: 4px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  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: 0.74rem;
  color: var(--ink-faint);
}
.practice-input-inline,
.voice-transcript {
  width: 100%;
  border: 1px solid var(--hairline);
  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(--accent-dim);
}
.voice-transcript {
  min-height: 48px;
  white-space: pre-wrap;
  word-break: break-word;
}
.voice-transcript.listening {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px var(--accent-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: 0.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(--accent), var(--accent-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);
}
@media (hover: hover) {
.practice-reveal-btn:hover,
.voice-stop-btn:hover,
.voice-retry-btn:hover {
  color: var(--ink);
  border-color: var(--accent-dim);
}
}
.practice-entry-result,
.voice-entry-result {
  margin-top: 10px;
  font-size: 0.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(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 3px;
}

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

/* ---- Bottom nav ---- */
.bottom-nav {
  position: fixed;
  z-index: 30;
  display: flex;

  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;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.nav-btn svg {
  width: 22px;
  height: 22px;
}

/* ---- Settings bottom sheet ---- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 0.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;

  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 0.25s ease,
    opacity 0.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 {
  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;
  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(--accent);
  border-color: var(--accent-dim);
}
.sheet-title {
  margin: 0 0 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.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: 0.85rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.sheet-progress-percent {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.progress-track {
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.sheet-progress-sub {
  font-size: 0.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: 0.74rem;
  color: var(--ink-dim);
}
.speed-row label {
  flex: none;
  white-space: nowrap;
}
.speed-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
}
#speed-val {
  flex: none;
  min-width: 3.4em;
  text-align: right;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.font-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.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: 0.76rem;
  cursor: pointer;
  min-height: 36px;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
@media (hover: hover) {
.font-btn:hover {
  color: var(--ink);
  border-color: var(--accent-dim);
}
}
.font-btn:active {
  color: var(--accent);
}

.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: 0.85rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}
.sheet-row-help {
  font-size: 0.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(--accent);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.phonetic-desc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}
.phonetic-desc strong {
  color: var(--accent);
  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: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 38px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
@media (hover: hover) {
.sheet-btn:hover {
  color: var(--ink);
  border-color: var(--accent-dim);
}
}
a.sheet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.sheet-btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-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: 0.78rem;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.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 {
  flex-direction: column;
}

.home-progress-percent {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  color: var(--accent);
  margin-top: 6px;
  text-align: right;
}

/* 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;
}
@media (hover: hover) {
.back-btn:hover {
  color: var(--accent);
}
}

.header-icon-btn {
  flex: none;
  width: 40px;
  height: 40px;
  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: 18px;
  height: 18px;
}
@media (hover: hover) {
.header-icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent-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: 1px solid var(--hairline);
  color: var(--ink);
  padding: 0 14px;
  font-size: 0.92rem;
  font-family: inherit;
}
.gi-level-badge {
  flex: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  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;
  border: 1px solid var(--hairline);
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
}
.connect-mode-btn.active {
  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;
  color: var(--ink-faint);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.72rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.connect-chip.active {
  color: #11151c;
  border-color: var(--accent);
  font-weight: 600;
}

/* ---- Tela de Frases (lista) ---- */
.connect-mode-row {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 10px;
}
.connect-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 0.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;
}
.connect-item {
  flex: none;
}
.connect-item.is-learned {
  opacity: 0.6;
}
.ci-learned-btn[aria-pressed="true"] {
  color: #11151c;
  background: var(--accent);
  border-color: var(--accent);
}
.ci-num {
  flex: none;
}
.ci-body {
  flex: 1;
  min-width: 0;
}
.ci-en {
  color: var(--ink);
}
.ci-en mark {
  background: none;
  color: var(--accent);
  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(--accent);
  font-size: calc(1.02rem * var(--connect-scale, 1));
}
.verb-pt {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: calc(0.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(0.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 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ci-tr {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ci-actions {
  flex: none;
  display: flex;
  align-items: center;
}
.ci-empty {
  color: var(--ink-faint);
  text-align: center;
  padding: 24px 0;
  font-size: 0.85rem;
}
.connect-back-top-btn {
  align-self: center;
  margin-top: 4px;

  font-size: 0.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;
}
@media (hover: hover) {
.connect-back-top-btn:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}
}

/* Botão X nos campos de busca */
.clear-x {
  padding: 8px;
}

.clear-x:active {
  color: var(--accent);
}
@media (hover: hover) {
.clear-x:hover{
  color: var(--accent);
}
}

/* ============================================================
   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;

  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
}

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

.ci-num {
  font-size: 0.72rem;
  padding-top: 0.35em;
}

.ci-en {
  line-height: 1.65;
}

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

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

.ci-actions {
  /* Mesma coluna de botões da tela de Palavras: empilhados à direita, deixando mais largura para a frase. */
  flex-direction: column;
  gap: 8px;
  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 {
  margin: 0 auto;
  padding: 14px 18px calc(32px + var(--safe-bottom));
}
.grammar-level-tabs {
  display: flex;
  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;
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.grammar-level-tab .glt-code {
  font-size: 0.9rem;
  font-weight: 700;
}
.grammar-level-tab .glt-count {
  font-size: 0.62rem;
  color: var(--ink-faint);
}
.grammar-level-tab.active {
  color: #11151c;
  border-color: transparent;
}
.grammar-level-tab.active .glt-count {
  color: #11151c;
  opacity: 0.75;
}

.grammar-level-heading {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "PT Serif",
    serif;
  font-weight: 700;
  color: var(--ink);
}

.grammar-list {
  display: flex;
  flex-direction: column;
}
.grammar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.grammar-item.is-watched {
  opacity: 0.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(--accent);
  border-color: var(--accent);
}
.gi-num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.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);
  color: var(--accent);
  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, 0.78);
}
.video-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  padding-bottom: var(--safe-bottom);
  animation: videoSheetIn 0.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, 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: 0.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(--accent-dim);
}
.video-modal-fs-btn svg,
.video-modal-fs-exit svg {
  width: 17px;
  height: 17px;
}
@media (hover: hover) {
.video-modal-fs-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
}
.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, 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: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-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 ==================== */
.start-mode-select {
  display: block;
  width: 100%;
  padding: 0 68px 0 18px;
  color: var(--ink);
  border: 1.5px solid var(--accent-dim);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
}
.start-mode-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(125, 187, 144, 0.22);
}
.start-mode-select option {
  background: var(--bg-panel-2);
  color: var(--ink);
}

/* ============================================================
   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, 0.085);
  --ink: #f2eee5;
  --ink-dim: #a9b1bf;
  --ink-faint: #7683a0;
  --accent: #8fcaa0;
  --accent-dim: #4f9670;
}

html {
  background: radial-gradient(
      circle at 50% -10%,
      rgba(143, 202, 160, 0.09),
      transparent 34rem
    ),
    #0a0d12;
}
body {
  background: radial-gradient(
      circle at 8% 12%,
      rgba(75, 104, 145, 0.08),
      transparent 26rem
    ),
    radial-gradient(
      circle at 92% 62%,
      rgba(143, 202, 160, 0.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: 0.22;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

/* ---------------- HOME: cinematic landing ---------------- */
.home-view {
  padding-top: clamp(34px, 8vh, 92px);
}
.home-view::before {
  position: absolute;
  width: min(52vw, 520px);
  aspect-ratio: 1;

  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(143, 202, 160, 0.13),
    rgba(143, 202, 160, 0) 67%
  );
  filter: blur(2px);
  pointer-events: none;
}
.home-view::after {
  position: absolute;
  width: 320px;
  height: 320px;
  left: -230px;
  bottom: 2%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(83, 120, 168, 0.11),
    transparent 70%
  );
  pointer-events: none;
}
.start-mode-select {
  min-height: 58px;
  border-radius: 14px;
  border-color: rgba(143, 202, 160, 0.3);
  background: #0c1118;
  font-size: 0.98rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
@media (hover: hover) {
.start-mode-select:hover {
  border-color: rgba(143, 202, 160, 0.55);
}
}
.progress-track {
  height: 7px;
  background: #090d13;
}
.progress-fill {
  background: linear-gradient(90deg, #4f9670, #8fcaa0, #c9ecd4);
  box-shadow: 0 0 16px rgba(143, 202, 160, 0.18);
}

/* ---------------- APP HEADER ---------------- */
header {
  background: rgba(10, 13, 18, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: 0 10px 36px rgba(0, 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: -0.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, 0.09);
  background: rgba(16, 21, 29, 0.88);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
#search:focus,
.grammar-search-wrap input:focus {
  border-color: rgba(143, 202, 160, 0.55);
  box-shadow: 0 0 0 3px rgba(143, 202, 160, 0.08);
}
.filter {
  background: #111720;
  border-color: rgba(255, 255, 255, 0.08);
}
.filter[aria-pressed="true"] {
  background: var(--accent);
}

/* ---------------- 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, 0.065);
}
.entry::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 25px;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(var(--accent), transparent);
  transition: height 0.2s ease;
}
@media (hover: hover) {
.entry:hover::before {
  height: 48px;
}
}
.entry.is-known::before {
  background: linear-gradient(var(--green), transparent);
}
.entry.is-known {
  opacity: 0.72;
}
.entry-main {
  padding-left: 2px;
}
.head {
  margin-bottom: 13px;
  gap: 11px;
}
.num {
  color: #566171;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.word-pron {
  color: #7dbb90;
  font-size: calc(0.86rem * var(--scale));
}
.known-badge {
  color: var(--green);
}
.action-btn {
  width: 38px;
  height: 38px;
  background: #10161f;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
@media (hover: hover) {
.action-btn:hover {
  transform: translateY(-1px);
  color: var(--accent);
  border-color: rgba(143, 202, 160, 0.45);
}
}
.action-btn.known-btn[aria-pressed="true"] {
  background: var(--accent);
}
.ipa-box {
  border-left: 0;
  border-top: 1px solid rgba(143, 202, 160, 0.22);
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(21, 28, 38, 0.92),
    rgba(15, 20, 27, 0.9)
  );
  padding: 13px 15px;
}
.sentence {
  font-size: calc(1.24rem * var(--scale));
  line-height: 1.72;
}
.translation {
  color: #7f8998;
}
.sentence-pron {
  color: #6fae86;
}
.practice-box,
.voice-box {
  background: rgba(16, 21, 29, 0.88);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.practice-input-inline,
.voice-transcript {
  background: #0c1118;
  border-color: rgba(255, 255, 255, 0.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, 0.08);
  color: #8e98a8;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}
@media (hover: hover) {
.connect-mode-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(143, 202, 160, 0.35);
}
}
.connect-mode-btn.active {
  background: linear-gradient(135deg, #8fcaa0, #4f9670);
  box-shadow: 0 8px 22px rgba(143, 202, 160, 0.12);
}
.connect-chip {
  background: #10161f;
  border-color: rgba(255, 255, 255, 0.08);
}
.connect-chip.active {
  background: var(--accent);
}
.connect-item {
  padding: 22px 4px;
  border-bottom-color: rgba(255, 255, 255, 0.065);
}
.ci-num {
  color: #566171;
}
.ci-en {
  font-size: calc(1.24rem * var(--connect-scale, 1));
  letter-spacing: -0.01em;
}
.ci-pron {
  color: #6fae86;
}
.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, 0.08);
}
.grammar-level-tab.active {
  background: linear-gradient(135deg, #8fcaa0, #4f9670);
  box-shadow: 0 8px 22px rgba(143, 202, 160, 0.12);
}
.grammar-level-heading {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin: 9px 2px 14px;
}
.grammar-list {
  gap: 6px;
}
.grammar-item {
  padding: 15px 13px;
  border-radius: 14px;
  background: rgba(16, 21, 29, 0.82);
  border-color: rgba(255, 255, 255, 0.07);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
@media (hover: hover) {
.grammar-item:hover {
  transform: translateX(3px);
  background: #141b24;
  border-color: rgba(143, 202, 160, 0.32);
}
}
.gi-num {
  background: #0b1016;
}
.gi-play {
  background: #0b1016;
  border-color: rgba(255, 255, 255, 0.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, 0.09);
  border-radius: 20px;
  padding: 5px;
  background: rgba(16, 21, 29, 0.88);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-btn {
  position: relative;
  min-height: 50px;
  border-radius: 15px;
  color: #667181;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.nav-btn.active {
  color: #a8dcb6;
  background: rgba(143, 202, 160, 0.09);
}
.nav-btn.active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
@media (hover: hover) {
.nav-btn:hover {
  color: #d6dbe2;
  transform: translateY(-1px);
}
}

/* ---------------- SHEETS / MODALS ---------------- */
.settings-sheet {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
  background: rgba(14, 19, 26, 0.96);
  box-shadow: 0 -30px 80px rgba(0, 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, 0.07);
}
.video-modal-sheet {
  background: #0e131a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------- MICRO-INTERACTIONS ---------------- */
@media (prefers-reduced-motion: no-preference) {
  @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;
  }
  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;
  }
  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) {
  .nav-btn {
    font-size: 0.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:focus-visible {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
}
@media (hover: hover) {
.clear-x:hover{
  color: var(--accent);
  background: rgba(255, 255, 255, 0.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: 0.01em;
  color: var(--ink);
}

/* 2.11.4 — tela principal cabe inteira na tela, sem barra de rolagem */
.home-view {
  box-sizing: border-box;

  padding-top: calc(clamp(14px, 3.5vh, 56px) + var(--safe-top));
  padding-bottom: calc(clamp(12px, 3vh, 40px) + var(--safe-bottom));
}

@media (max-height: 760px) {
  .start-mode-select {
    min-height: 48px;
  }
}

/* 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. */
#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 0.16s ease,
    background 0.16s ease;
}
@media (hover: hover) {
.level-carousel .grammar-level-tab:hover {
  border-color: rgba(143, 202, 160, 0.32);
}
}
.level-carousel .glt-code {
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.level-carousel .glt-name {
  font-size: 0.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: 0.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, 0.07);
  overflow: hidden;
}
.level-carousel .glt-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.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, 0.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, 0.94);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition:
    opacity 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}
.lc-arrow svg {
  width: 17px;
  height: 17px;
}
.lc-prev {
  left: 6px;
}
.lc-next {
  right: 6px;
}
@media (hover: hover) {
.lc-arrow:hover {
  color: var(--accent);
  border-color: rgba(143, 202, 160, 0.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, 0.12);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
}
.video-modal-yt-btn svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
.video-modal-yt-btn:hover {
  color: var(--accent);
  border-color: rgba(143, 202, 160, 0.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 .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(--accent);
  background: radial-gradient(
    circle at 30% 25%,
    rgba(143, 202, 160, 0.22),
    rgba(143, 202, 160, 0.07) 70%
  );
  border: 1px solid rgba(143, 202, 160, 0.2);
}
.combo-icon svg {
  width: 22px;
  height: 22px;
}
.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: -0.015em;
  color: var(--ink);
}
.combo-sub {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #7f8998;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-height: 760px) {
  .combo-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
  .combo-icon svg {
    width: 20px;
    height: 20px;
  }
  .combo-title {
    font-size: 1.08rem;
  }
}
@media (max-height: 620px) {
  .combo-sub {
    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), noite (escuro quente) e nítido (claro, alto contraste).
   "Automático" é resolvido em JS (nítido 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.
   ============================================================ */

/* 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);
}

/* 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);
  --accent: var(--ra);
  --accent-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.active,
:root .practice-view .action-btn.playing,
:root .practice-view .action-btn.listening {
  color: var(--ra);
  border-color: var(--rfb);
}
@media (hover: hover) {
:root .practice-view .action-btn:hover{
  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: 0.8;
}
:root .grammar-view .level-carousel .grammar-level-tab.active .glt-bar {
  background: rgba(0, 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);
}
@media (hover: hover) {
: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);
}
@media (hover: hover) {
: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-accent) {
  background: var(--rp2);
  border-color: var(--rl);
  color: var(--rd);
}
:root .sheet-btn-accent {
  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);
}

/* ---- Seletor de tema (Ajustes) ---- */
.theme-block {
  margin-bottom: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.theme-block-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 3px;
}
.theme-block-help {
  font-size: 0.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 0.7rem/1.1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}
.theme-opt[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.theme-swatch {
  width: 100%;
  max-width: 52px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(128, 128, 128, 0.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, #f3efe4 0 50%, #1e1b18 50% 100%);
}
.sw-auto i {
  background: linear-gradient(90deg, #1a1712 0 50%, #e2d9c9 50% 100%);
}
.sw-night {
  background: #1e1b18;
}
.sw-night i {
  background: #e2d9c9;
}
.sw-night i:last-child {
  background: #a6d6b0;
}
.sw-graphite {
  background: #19202b;
}
.sw-graphite i {
  background: #dcd7cc;
}
.sw-graphite i:last-child {
  background: #a6dab6;
}

.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 0.18s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}
.switch[aria-checked="true"] {
  background: var(--accent-dim);
  border-color: var(--accent-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, 0.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, 0.35);
}
.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: 0.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 0.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;
}
.home-view::before {
  right: -30%;
  top: 14%;
  opacity: 0.8;
}

.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 */

/* Mensagem */

/* Escolha + Iniciar (sem cartão em volta) */
.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;
}

/* Telas baixas: comprime primeiro o texto de apoio, depois o rodapé */
@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, 0.62);
  opacity: 0;
  transition: opacity 0.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, 0.08);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.45);
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.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 0.14s ease;
}

.mp-option.is-active {
  background: rgba(255, 255, 255, 0.04);
}
@media (hover: hover) {
.mp-option:hover{
  background: rgba(255, 255, 255, 0.04);
}
}
.mp-option:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.mp-option[aria-selected="true"] {
  background: rgba(143, 202, 160, 0.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 0.78rem/1.3 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: #8a94a3;
}
.mp-num {
  flex: none;
  width: 24px;
  text-align: center;
  font:
    500 0.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(--accent);
}
.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, 0.08);
  transform: translateY(-6px);
  opacity: 0;
  transition:
    transform 0.16s ease,
    opacity 0.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. */

/* 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). */

/* ============================================================
   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.
   ============================================================ */
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;
}
/* Os enfeites da Home (círculos, paisagem) saem um pouco da tela; sem cortar,
   a página fica mais larga que o celular e o navegador aumenta/diminui o zoom. */
html:has(.home-view:not(.hidden)),
html:has(.home-view:not(.hidden)) body {
  overflow-x: clip !important;
  max-width: 100%;
}
.home-view .hx {
  overflow-x: clip;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
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, 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, 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;
  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;
}
.hx-logo {
  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: -0.02em;
  color: var(--h-ink);
}
.hx-tag {
  margin-top: 3px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--h-green);
  letter-spacing: 0.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;
}
@media (hover: hover) {
.hx-gear:hover {
  background: rgba(143, 202, 160, 0.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: -0.03em;
  color: var(--h-ink);
}
.hx-title em {
  font-style: normal;
  color: var(--h-green);
}
.hx-copy {
  margin: 0;
  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, 0.72);
  color: var(--h-ink);
  border: 1px solid rgba(143, 202, 160, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
@media (hover: hover) {
.hx-select:hover {
  border-color: rgba(143, 202, 160, 0.55);
}
}
.hx-select:focus-visible {
  outline: none !important;
  border-color: var(--h-green);
  box-shadow: 0 0 0 3px rgba(143, 202, 160, 0.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: 0.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 0.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, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.16s ease,
    filter 0.16s ease;
}
@media (hover: hover) {
.hx-go:hover {
  filter: brightness(1.04);
}
}
.hx-go:active {
  transform: scale(0.99);
}
.hx-go span {
  flex: 1;
  text-align: left;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.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, 0.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, 0.1);
}
.hx-ring-bar {
  stroke: var(--h-green);
  stroke-linecap: round;
  stroke-dasharray: 100.53;
  stroke-dashoffset: 100.53;
  transition: stroke-dashoffset 0.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: 0.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, 0.08);
  overflow: hidden;
}
.hx-bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--h-green);
  transition: width 0.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: 0.95rem;
  font-weight: 700;
  color: var(--h-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hx-stat-label {
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--h-faint);
}

.hx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}
.hx-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
@media (hover: hover) {
.hx-mode:hover {
  border-color: rgba(143, 202, 160, 0.35);
  background: rgba(31, 46, 40, 0.85);
}
}
.hx-mode:focus-visible {
  outline: none !important;
  border-color: var(--h-green);
  box-shadow: 0 0 0 3px rgba(143, 202, 160, 0.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: 0.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: 0.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, 0.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, 0.12);
  border-color: rgba(143, 202, 160, 0.22);
  color: var(--h-green);
}

@media (max-width: 360px) {
  .hx {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hx-stat-label {
    font-size: 0.64rem;
  }
  .hx-mode {
    min-height: 140px;
    padding: 12px 12px 34px;
  }
  .hx-mode-desc {
    font-size: 0.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. */
.logo-mark {
  overflow: visible;
}
.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 .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 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}
@media (hover: hover) {
: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, 0.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.
   ============================================================ */
html[data-theme="night"] {
  --rb: #1e1b18;
  --rp: #27231f;
  --rp2: #302b26;
  --rl: rgba(255, 236, 210, 0.09);
  --ri: #e2d9c9;
  --rd: #c4b9a6;
  --rf: #9c917f;
  --ra: #a6d6b0;
  --rfa: #9ad3aa;
  --rfb: #7dbb90;
  --rof: #10231a;
  --rh: rgba(30, 27, 24, 0.9);
  --rs: rgba(0, 0, 0, 0.3);
  --rok: #a9d3a6;
  --rglow: rgba(143, 202, 160, 0.1);
  --rbg-glow: rgba(143, 202, 160, 0.04);
}
/* player de vídeo e pausa para os olhos também no acento verde */
#video-modal,
.eye-break {
  --accent: var(--ra);
  --accent-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);
}
@media (hover: hover) {
#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);
}

/* 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: -0.02em;
}
.grammar-view .grammar-level-heading {
  font-weight: 700;
  letter-spacing: -0.015em;
}
.grammar-view .glt-code {
  font-weight: 800;
}
#video-modal .video-modal-title,
.eye-break-title {
  font-weight: 700;
  letter-spacing: -0.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 {
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --accent-soft: rgba(143, 202, 160, 0.12);
  --green: #8ed4ae;
  --scale: 1;
  --font-list: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --h-bg: #0f1916;
  --h-bg-2: #0b1311;
  --h-card: rgba(27, 40, 35, 0.78);
  --h-card-2: #1b2a25;
  --h-line: rgba(255, 255, 255, 0.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;
  --chip-on-a: #9ad3aa;
  --chip-on-b: #7dbb90;
  --chip-on-text: #10231a;
  --chip-line: rgba(143, 202, 160, 0.24);
  --chip-line-hover: rgba(143, 202, 160, 0.55);
  --chip-text: var(--rd);
  --chip-glow: rgba(125, 187, 144, 0.18);
  --rb: #111b18;
  --rp: #18251f;
  --rp2: #1f2e28;
  --rl: rgba(214, 235, 222, 0.09);
  --ri: #e6e1d6;
  --rd: #b7c3bb;
  --rf: #8a978f;
  --ra: #a6dab6;
  --rfa: #9ad3aa;
  --rfb: #7dbb90;
  --rof: #10231a;
  --rh: rgba(17, 27, 24, 0.9);
  --rs: rgba(0, 0, 0, 0.3);
  --rok: #a9d8bc;
  --rglow: rgba(143, 202, 160, 0.1);
  --rbg-glow: rgba(143, 202, 160, 0.05);
  --logo-a: #4f9670;
  --logo-b: #a8dcb6;
}
.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.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: -0.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;
}
.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, 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,
.practice-view .ci-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.3rem * var(--scale));
  }

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

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

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

  .hx-top {
    gap: 8px;
  }

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

  .hx-tag {
    font-size: 0.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;
  }
}

/* ============================================================
   Paleta verde (verde-sálvia, tema Floresta), base deste arquivo.
   Desde a 2.39.0 existe só esta edição; o antigo "Frequency preto"
   (dourado) foi removido. O tema Grafite (fundo azul-grafite com o
   acento verde) fica no fim do arquivo.
   ============================================================ */

/* ---- Botão de edição no topo da Home ---- */

/* edição atual na frente, maior; a outra atrás, menor */

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

/* ---- Amostras do seletor de tema na edição verde ("Floresta") ---- */
html:root .sw-graphite {
  background: #111b18;
}
html:root .sw-graphite i {
  background: #e6e1d6;
}
html:root .sw-graphite i:last-child {
  background: #a6dab6;
}
html:root .sw-night i:last-child {
  background: #a6d6b0;
}
html:root .sw-auto {
  background: linear-gradient(135deg, #f2f0e8 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: 0.32s;
}

/* ============================================================
   2.21.0 — TEMA "NÍTIDO" (para quem tem astigmatismo)
   Por que claro: com texto escuro sobre fundo claro a pupila se fecha
   e as bordas das letras borram menos do que em temas escuros.
   - Fundo claro e quente, sem branco puro (não ofusca).
   - Texto quase preto; pronúncia, tradução e rótulos com contraste alto.
   - Letras sem serifa, peso médio, um pouco maiores e mais espaçadas.
   - Linhas e bordas mais firmes; sem itálico, brilhos, sombras ou desfoques.
   Vale para as telas de estudo, os Ajustes e o toast; a Home não muda.
   ============================================================ */
html[data-theme="sharp"] {
  --rb: #f2f0e8;
  --rp: #fbfaf5;
  --rp2: #e7e4d8;
  --rl: rgba(28, 30, 26, 0.32);
  --ri: #161816;
  --rd: #2a2d29;
  --rf: #474b45;
  --ra: #1c5233;
  --rfa: #8fcaa0;
  --rfb: #8fcaa0;
  --rof: #0b1d12;
  --rh: #f2f0e8;
  --rs: transparent;
  --rok: #1c5233;
  --rglow: transparent;
  --rbg-glow: transparent;
  --chip-on-a: #8fcaa0;
  --chip-on-b: #8fcaa0;
  --chip-on-text: #0b1d12;
  --chip-line: rgba(22, 24, 22, 0.45);
  --chip-line-hover: rgba(22, 24, 22, 0.75);
  --chip-text: var(--rd);
  --chip-glow: transparent;
}

html[data-theme="sharp"] .practice-view,
html[data-theme="sharp"] .grammar-view {
  --logo-a: #1c5233;
  --logo-b: #1c5233;
}


html[data-theme="sharp"]:has(.home-view.hidden) {
  color-scheme: light;
}
html[data-theme="sharp"]:has(.home-view.hidden) body::before {
  display: none;
}
html[data-theme="sharp"] .sheet-backdrop {
  background: rgba(20, 20, 16, 0.34);
}

/* Letras firmes (data-firm): vale no Nítido e em qualquer tema com o interruptor ligado.
   Letras: sem serifa, peso médio, maiores e mais espaçadas; sem suavização que afina o traço */
html[data-firm] .practice-view,
html[data-firm] .grammar-view,
html[data-firm] .settings-sheet,
html[data-firm] .toast {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
html[data-firm] .practice-view .word {
  font-size: calc(1.52rem * var(--scale));
  font-weight: 800;
  letter-spacing: 0.01em;
}
html[data-firm] .practice-view .word-pron {
  font-weight: 600;
}
html[data-firm] .practice-view .sentence {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  font-size: calc(1.26rem * var(--scale));
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: 0.02em;
}
html[data-firm] .practice-view .sentence-pron {
  font-size: calc(1.02rem * var(--scale));
  font-weight: 600;
  letter-spacing: 0.03em;
}
html[data-firm] .practice-view .translation {
  font-size: calc(1.08rem * var(--scale));
  font-weight: 500;
  letter-spacing: 0.015em;
}
html[data-firm] .practice-view .num {
  font-weight: 600;
}
html[data-firm] .grammar-view p,
html[data-firm] .grammar-view li {
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.72;
}

/* Pesos nas listas (as regras de lista usam #id, então aqui também) */
html[data-firm] #list .word {
  font-weight: 700;
}
html[data-firm] #list .sentence,
html[data-firm] #list .translation,
html[data-firm] #list .practice-correct-sentence,
html[data-firm] #list .voice-correct-sentence,
html[data-firm] #connect-view .ci-en,
html[data-firm] #connect-view .ci-tr,
html[data-firm] #connect-view .verb-pt,
html[data-firm] #grammar-list .gi-topic {
  font-weight: 500;
}
html[data-firm] #list .word-pron,
html[data-firm] #list .sentence-pron,
html[data-firm] #connect-view .ci-pron,
html[data-firm] #connect-view .ci-qa-label,
html[data-firm] #connect-view .verb-inf {
  font-weight: 600;
}
html[data-firm] #connect-view .ci-en {
  letter-spacing: 0.02em;
  line-height: 1.7;
}

/* Nada de itálico, brilho, sombra ou desfoque */
html[data-firm] .practice-view *,
html[data-firm] .grammar-view *,
html[data-firm] .settings-sheet *,
html[data-firm] .toast {
  font-style: normal !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-firm] .practice-view header,
html[data-firm] .grammar-view header {
  box-shadow: none;
  border-bottom: 1.5px solid var(--rl);
}
html[data-firm] .practice-view .entry {
  box-shadow: none;
}

/* Bordas e ícones mais firmes */
html[data-firm] .practice-view .action-btn {
  border-width: 1.5px;
}
html[data-firm] .practice-view .action-btn svg {
  stroke-width: 2.2;
}
html[data-firm] .practice-view .entry.is-known {
  opacity: 0.85;
}

/* Amostra no seletor de tema */
.sw-sharp {
  background: #f2f0e8;
  box-shadow: inset 0 0 0 1.5px #161816;
}
.sw-sharp i {
  background: #161816;
  height: 4px;
}
.sw-sharp i:last-child {
  background: #1c5233;
}

/* Quatro temas: grade de 4 colunas; em telas estreitas, 2 + 2 */
.theme-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 359px) {
  .theme-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.theme-sharp-help {
  margin: 8px 0 0 !important;
}

/* 2.23.0 — Frases alinhadas à esquerda como a tela de Palavras:
   o número sai da coluna própria e entra na primeira linha (como "0002 i" em Palavras),
   e o item usa o mesmo recuo e espaçamento de .entry. */
.practice-view .connect-item {
  padding-left: 2px;
  padding-right: 2px;
  gap: 16px;
  border-radius: 0;
}
.practice-view .ci-body {
  padding-left: 2px;
}
.practice-view .ci-num {
  display: inline-block;
  padding-top: 0;
  margin-right: 0.55em;
  vertical-align: 0.18em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.practice-view .verb-head .ci-num {
  margin-right: 0;
}
@media (min-width: 700px) {
  .practice-view .connect-item {
    padding-left: 4px;
    padding-right: 4px;
  }
}
@media (max-width: 699px) {
  .practice-view .connect-item {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 390px) {
  .practice-view .connect-item {
    gap: 10px;
  }
}

/* ============================================================
   2.24.0 — LETRAS FIRMES NOS TEMAS ESCUROS
   No escuro a pupila dilata e o erro de foco do astigmatismo aumenta:
   letra clara sobre fundo escuro "espalha". Com data-firm num tema
   escuro: texto principal um pouco menos brilhante (sem perder
   contraste), rótulos pequenos mais legíveis, acentos dessaturados
   e chapados (sem degradê), bordas mais visíveis e nenhum brilho.
   Topo e menu inferior ficam opacos, já que o desfoque é desligado.
   ============================================================ */
html[data-firm]:not([data-theme="sharp"]) {
  --rs: transparent;
  --rglow: transparent;
  --rbg-glow: transparent;
  --chip-glow: transparent;
}
/* Floresta (verde) */
html[data-firm][data-theme="graphite"],
html[data-firm][data-theme="slate"] {
  --rh: #111b18;
  --ri: #dcd8ce;
  --rd: #bcc6bf;
  --rf: #9aa69f;
  --rl: rgba(214, 235, 222, 0.16);
  --ra: #abcdb5;
  --rfa: #a3c9ae;
  --rfb: #a3c9ae;
  --rof: #10231a;
  --rok: #abcdb5;
  --chip-on-a: #a3c9ae;
  --chip-on-b: #a3c9ae;
  --chip-on-text: #10231a;
  --chip-line: rgba(171, 205, 181, 0.34);
  --chip-line-hover: rgba(171, 205, 181, 0.62);
}
/* Noite (verde) */
html[data-firm][data-theme="night"] {
  --rh: #1e1b18;
  --ri: #dbd3c5;
  --rd: #c6bcab;
  --rf: #a89d8b;
  --rl: rgba(255, 236, 210, 0.15);
  --ra: #abcdb5;
  --rfa: #a3c9ae;
  --rfb: #a3c9ae;
  --rof: #10231a;
  --rok: #abcdb5;
  --chip-on-a: #a3c9ae;
  --chip-on-b: #a3c9ae;
  --chip-on-text: #10231a;
  --chip-line: rgba(171, 205, 181, 0.3);
  --chip-line-hover: rgba(171, 205, 181, 0.6);
}
html[data-firm][data-theme="graphite"] .practice-view,
html[data-firm][data-theme="slate"] .practice-view,
html[data-firm][data-theme="graphite"] .grammar-view,
html[data-firm][data-theme="slate"] .grammar-view,
html[data-firm][data-theme="night"] .practice-view,
html[data-firm][data-theme="night"] .grammar-view {
  --logo-a: var(--ra);
  --logo-b: var(--ra);
}
/* Sem brilho nos chips e botões, também no escuro */
html[data-firm] .practice-view .filters .filter,
html[data-firm] .practice-view .connect-chips .connect-chip,
html[data-firm] .practice-view .connect-mode-row .connect-mode-btn,
html[data-firm] .practice-view .action-btn,
html[data-firm] .settings-sheet .sheet-btn {
  box-shadow: none !important;
}
.switch:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ============================================================
   2.25.0 — REVISÃO ESPAÇADA
   ============================================================ */
/* Filtro "Revisar" com contador */
.filter-count:empty {
  display: none;
}
.filter-count {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 99px;
  font-size: 0.72em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--ra);
  color: var(--rb);
}
.filter[aria-pressed="true"] .filter-count {
  background: var(--chip-on-text);
  color: var(--chip-on-a);
}

/* Palavra em revisão: a frase em inglês fica escondida até a pessoa tentar lembrar */
.entry.is-review:not(.revealed) .sentence,
.entry.is-review:not(.revealed) .sentence-pron {
  display: none;
}
.review-box {
  margin-top: 10px;
}
.review-hint {
  margin: 0 0 9px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--rf, var(--ink-faint));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.review-reveal-btn,
.review-ok-btn,
.review-again-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
}
.review-reveal-btn,
.review-again-btn {
  background: var(--rp2, var(--bg-panel-2));
  color: var(--ri, var(--ink));
  border: 1px solid var(--rl, var(--hairline));
}
.review-ok-btn {
  background: var(--rfa);
  color: var(--rof);
  border: 1px solid var(--rfa);
}
.review-grade {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.review-grade.hidden,
.review-reveal-btn.hidden,
.review-hint.hidden {
  display: none;
}

/* Home: atalho "N palavras para revisar hoje" dentro do cartão de progresso */
.hx-review {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--h-line);
  background: transparent;
  color: var(--h-ink);
  font: 500 0.86rem/1.3 var(--h-font);
  text-align: left;
  cursor: pointer;
}
.hx-review[hidden] {
  display: none;
}
.hx-review svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--h-green);
}
.hx-review > span:first-of-type {
  flex: 1;
  min-width: 0;
}
.hx-review strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hx-review-go {
  flex: none;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--h-green);
  color: var(--h-on-green);
  font-weight: 700;
  font-size: 0.78rem;
}

/* Ajustes: Exportar / Importar lado a lado */
.sheet-btn-pair {
  display: flex;
  gap: 6px;
  flex: none;
}

/* Palavras em revisão não ficam apagadas como as aprendidas na lista */
.practice-view .entry.is-review.is-known {
  opacity: 1;
}
.practice-view .entry.is-review .known-badge {
  display: none;
}
/* Linha do contador com "Sair da revisão" */
.count-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.review-exit {
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  color: var(--ra);
  font:
    600 0.74rem/1.2 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review-exit[hidden] {
  display: none;
}

/* ============================================================
   2.26.0 — REVISÃO DE FRASES, ATUALIZAÇÃO
   ============================================================ */
/* Frases em revisão: frase e pronúncia escondidas até "Mostrar frase" */
.connect-item.is-review:not(.revealed) .ci-en,
.connect-item.is-review:not(.revealed) .ci-pron {
  display: none;
}
.ci-review-head {
  margin-bottom: 4px;
}
.connect-item .review-box {
  margin-top: 10px;
}

/* Barra "N frases para revisar hoje" / "Revisão de frases" */
.connect-review-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--rl);
  font:
    500 0.84rem/1.35 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: var(--ri);
}
.connect-review-bar[hidden] {
  display: none;
}
.connect-review-bar strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.crb-btn {
  flex: none;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 99px;
  cursor: pointer;
  font:
    700 0.78rem/1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}
.crb-start {
  background: var(--rfa);
  color: var(--rof);
  border: 1px solid var(--rfa);
}
.crb-exit {
  background: transparent;
  color: var(--ri);
  border: 1px solid var(--rl);
}

/* Revisão de palavras: aviso quando a nota foi dada automaticamente */
.review-auto {
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rok, var(--ra));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Aviso de versão nova: fixo acima do menu inferior, igual em todas as telas */
.update-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: 99px;
  background: #1d232c;
  color: #f2eee7;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font:
    600 0.84rem/1.2 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}
.update-bar[hidden] {
  display: none;
}
.update-bar button {
  min-height: 36px;
  padding: 7px 16px;
  border-radius: 99px;
  border: 0;
  cursor: pointer;
  background: #8fcaa0;
  color: #141a22;
  font:
    700 0.8rem/1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}
html:root .update-bar {
  background: #15221e;
}
html:root .update-bar button {
  background: #8fcaa0;
  color: #10231a;
}

/* 2.26.2 — estado do armazenamento persistente nos Ajustes */
.persist-status:empty {
  display: none;
}
.persist-status {
  margin-top: 4px;
}

/* 2.27.0 — sincronização na nuvem (Ajustes) */
#sheet-row-sync {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
#sheet-row-sync[hidden],
#sheet-row-sync.hidden {
  display: none;
}
#sheet-row-sync .sheet-btn-pair .sheet-btn {
  flex: 1;
}
#sheet-row-sync .sheet-btn[hidden] {
  display: none;
}

/* ============================================================
   2.30.0 — TELA DE LOGIN (obrigatória) E CONTA NA HOME
   Usa as cores da Home (--h-*), iguais nas duas edições.
   ============================================================ */
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px
    calc(24px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(
    120% 80% at 50% 0%,
    var(--h-bg) 0%,
    var(--h-bg-2) 100%
  );
  color: var(--h-ink);
  font-family: var(--h-font);
  overflow-y: auto;
}
.login-gate[hidden] {
  display: none;
}
html.gated,
html.gated body {
  overflow: hidden;
}
.login-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.login-logo {
  width: 72px;
  height: 72px;
  display: block;
  margin: 0 auto 14px;
}
.login-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.login-tag {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--h-green);
  font-weight: 600;
}
.login-lead {
  margin: 26px 0 28px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--h-dim);
}
.login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #1f1f1f;
  font:
    600 1rem/1 "Roboto",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  cursor: pointer;
}
.login-google[hidden],
.login-retry[hidden] {
  display: none;
}
.login-google:disabled {
  opacity: 0.6;
  cursor: default;
}
.login-google:focus-visible,
.login-retry:focus-visible {
  outline: 3px solid var(--h-green);
  outline-offset: 3px;
}
.g-logo {
  width: 20px;
  height: 20px;
  flex: none;
}
.login-retry {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--h-line);
  background: transparent;
  color: var(--h-ink);
  font: 700 0.95rem/1 var(--h-font);
  cursor: pointer;
}
.login-status {
  min-height: 1.4em;
  margin: 16px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--h-faint);
}

/* Home: conta ao lado do botão de edição */
.hx-top-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hx-account {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 170px;
  min-height: 40px;
  padding: 4px 12px 4px 4px;
  border-radius: 99px;
  border: 1px solid var(--h-line);
  background: var(--h-card);
  color: var(--h-ink);
  font: 600 0.82rem/1 var(--h-font);
  cursor: pointer;
}
.hx-account[hidden] {
  display: none;
}
.acc-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--h-green);
  color: var(--h-on-green);
  font-weight: 800;
  font-size: 0.85rem;
}
.acc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.acc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--h-line);
  background: var(--h-card-2, #1b2a25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  color: var(--h-ink);
  font-family: var(--h-font);
  text-align: left;
}
.account-menu[hidden] {
  display: none;
}
.acc-menu-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
}
.acc-menu-email {
  margin: 2px 0 12px;
  font-size: 0.8rem;
  color: var(--h-dim);
  overflow-wrap: anywhere;
}
.acc-menu-signout {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--h-line);
  background: transparent;
  color: var(--h-ink);
  font: 700 0.84rem/1 var(--h-font);
  cursor: pointer;
}
@media (max-width: 360px) {
  .hx-account .acc-name {
    display: none;
  }
  .hx-account {
    padding: 4px;
  }
}
/* ============================================================
   Frequency 2.31.0 — Reading Comfort / Visual Rest
   Objetivo: reduzir fadiga visual sem deixar a interface "lavada".
   Mantém a estrutura e a lógica existentes.
   ============================================================ */

/* 1. Coluna de leitura: menos movimentos oculares horizontais */
@media (min-width: 700px) {
  main,
.connect-view,
.grammar-main {
    max-width: 720px;
  }
  .entry-main,
.connect-item .ci-body {
    max-width: 68ch;
  }
}

/* 2. Hierarquia mais calma: o conteúdo domina, os controles recuam */
.practice-view .entry {
  padding-top: 28px;
  padding-bottom: 30px;
}
.practice-view .entry-actions {
  opacity: 0.78;
  transition: opacity 0.18s ease;
}

.practice-view .entry:focus-within .entry-actions {
  opacity: 1;
}
@media (hover: hover) {
.practice-view .entry:hover .entry-actions{
  opacity: 1;
}
}
.practice-view .word,
.practice-view .sentence {
  text-rendering: optimizeLegibility;
}
.practice-view .sentence {
  line-height: 1.78;
  max-width: 68ch;
}
.practice-view .translation {
  line-height: 1.62;
  max-width: 68ch;
}
.practice-view .sentence-pron {
  line-height: 1.55;
}

/* 3. Menos contraste de elementos secundários */
.practice-view .num,
.practice-view .count,
.practice-view .mini-progress-label {
  opacity: 0.82;
}
.practice-view .translation,
.practice-view .sentence-pron {
  opacity: 0.9;
}
.practice-view .ipa-box {
  box-shadow: none;
}
.practice-view .practice-box,
.practice-view .voice-box {
  box-shadow: 0 6px 18px var(--rs);
}

/* 4. Cabeçalho menos "presente" durante a leitura */
.practice-view header {
  box-shadow: 0 5px 18px var(--rs);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.practice-view .mini-progress-row {
  opacity: 0.9;
}

/* 5. Espaçamento respirável em telas pequenas */
@media (max-width: 620px) {
  .practice-view main {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(96px + var(--safe-bottom));
  }
  .practice-view .entry {
    padding: 24px 2px 28px;
    gap: 14px;
  }
  .practice-view .head {
    margin-bottom: 12px;
  }
  .practice-view .sentence {
    font-size: calc(1.16rem * var(--scale));
    line-height: 1.76;
  }
  .practice-view .translation {
    font-size: calc(0.98rem * var(--scale));
    line-height: 1.62;
  }
  .practice-view .entry-actions {
    gap: 7px;
  }
}

/* 6. Modo "descanso": o diálogo vira uma experiência tranquila,
      não um alerta agressivo. */
.eye-break {
  background: rgba(7, 10, 12, 0.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.eye-break-card {
  width: min(390px, 100%);
  padding: 32px 26px 24px;
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.eye-break-ring {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}
.eye-break-ring circle {
  stroke-width: 5;
}
.eye-break-count {
  font-size: 2.05rem;
}
.eye-break-title {
  font-size: 1.35rem;
  margin-bottom: 8px;
}
.eye-break-text {
  max-width: 31ch;
  margin: 0 auto 22px;
  font-size: 0.92rem;
  line-height: 1.65;
}
.eye-break-actions {
  margin-top: 2px;
}
.eye-break-btn {
  min-width: 112px;
  min-height: 46px;
  border-radius: 14px;
}
.eye-break-btn.primary {
  box-shadow: 0 6px 18px var(--rglow);
}

/* 7. Durante a pausa, evitar qualquer sensação de tarefa */
.eye-break-card::before {
  content: "20 · 20 · 20";
  display: block;
  margin-bottom: 10px;
  font:
    700 0.68rem/1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  letter-spacing: 0.16em;
  color: var(--ra);
  opacity: 0.8;
}

/* 8. Tema nítido: papel quente em vez de branco puro.
      Isso reduz o brilho percebido mantendo contraste. */
html[data-theme="sharp"] {
  --rbg-glow: rgba(90, 105, 95, 0.025);
}
html[data-theme="sharp"] .practice-view .entry {
  border-bottom-color: rgba(45, 55, 48, 0.13);
}
html[data-theme="sharp"] .practice-view header {
  box-shadow: 0 5px 18px rgba(35, 40, 36, 0.08);
}

/* 9. Preferência de sistema: animações discretas */
@media (prefers-reduced-motion: reduce) {
  .practice-view .entry-actions {
    transition: none;
  }
}

/* 10. Telas grandes: evita linhas excessivamente longas */
@media (min-width: 1200px) {
  .practice-view main,
.grammar-main {
    max-width: 760px;
  }
}

/* ============================================================
   Frequency 2.32.0 — Reading Focus Mode
   ============================================================ */
.count-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.focus-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--rl);
  border-radius: 12px;
  background: var(--rp);
  color: var(--rd);
  font:
    700 0.76rem/1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}
@media (hover: hover) {
.focus-toggle:hover {
  border-color: var(--rfb);
  transform: translateY(-1px);
}
}
.focus-toggle[aria-pressed="true"] {
  background: var(--rfa);
  border-color: var(--rfa);
  color: var(--rof);
  box-shadow: 0 5px 16px var(--rglow);
}
.focus-icon {
  font-size: 1rem;
  line-height: 1;
}
.practice-view.reading-focus header .mini-progress-row,
.practice-view.reading-focus header .count,
.practice-view.reading-focus header .search-wrap,
.practice-view.reading-focus .bottom-nav {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
}
.practice-view.reading-focus header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.practice-view.reading-focus .title-row {
  min-height: 42px;
}
.practice-view.reading-focus .brand-row {
  opacity: 0.72;
}
.practice-view.reading-focus .entry {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 32px;
  padding-bottom: 34px;
}
.practice-view.reading-focus .entry-actions {
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.practice-view.reading-focus .entry:focus-within .entry-actions {
  opacity: 0.82;
  transform: none;
  pointer-events: auto;
}
.practice-view.reading-focus .entry:hover .entry-actions{
  opacity: 0.82;
  transform: none;
  pointer-events: auto;
}
.practice-view.reading-focus .sentence {
  font-size: calc(1.34rem * var(--scale));
  line-height: 1.82;
  letter-spacing: 0.005em;
  max-width: 66ch;
}
.practice-view.reading-focus .translation {
  margin-top: 9px;
  font-size: calc(1rem * var(--scale));
  line-height: 1.68;
  opacity: 0.78;
}
.practice-view.reading-focus .sentence-pron {
  margin-top: 5px;
  opacity: 0.64;
}
.practice-view.reading-focus .num {
  opacity: 0.48;
}
.practice-view.reading-focus .word {
  font-size: calc(1.34rem * var(--scale));
}
.practice-view.reading-focus .word-pron {
  opacity: 0.68;
}
.practice-view.reading-focus .known-badge {
  opacity: 0.72;
}
@media (max-width: 620px) {
  .count-actions {
    gap: 6px;
  }
  .focus-toggle {
    min-height: 34px;
    padding: 7px 9px;
  }
  .focus-toggle .focus-label {
    font-size: 0.7rem;
  }
  .practice-view.reading-focus .entry {
    padding-top: 28px;
    padding-bottom: 32px;
  }
  .practice-view.reading-focus .sentence {
    font-size: calc(1.18rem * var(--scale));
    line-height: 1.82;
  }
  .practice-view.reading-focus .word {
    font-size: calc(1.24rem * var(--scale));
  }
}
@media (prefers-reduced-motion: reduce) {
  .focus-toggle,
.practice-view.reading-focus .entry-actions {
    transition: none;
  }
}

/* ============================================================
   Frequency 2.33.0 — Immersive Focus
   No modo Foco, a interface desaparece e o conteúdo ocupa a viewport.
   ESC ou o botão "voltar" do celular retornam ao modo normal.
   ============================================================ */
.practice-view.reading-focus {
  min-height: 100dvh;
  height: 100dvh;
  overflow: auto;
}
.practice-view.reading-focus header {
  display: none !important;
}
.practice-view.reading-focus .bottom-nav,
.practice-view.reading-focus .focus-toggle,
.practice-view.reading-focus .count-actions,
.practice-view.reading-focus .entry-actions,
.practice-view.reading-focus .known-badge {
  display: none !important;
}
/* 2.33.1 — botão flutuante de saída: o toggle normal fica dentro do
   header (escondido no modo imersivo), então sem isto não havia como
   sair no celular (sem teclado/Esc). Fica fora do header, sempre alcançável. */
.focus-exit {
  display: none;
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 60;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--rl);
  background: var(--rp);
  color: var(--rd);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.focus-exit:focus-visible {
  opacity: 1;
}
@media (hover: hover) {
.focus-exit:hover{
  opacity: 1;
}
}
.focus-exit:active {
  transform: scale(0.94);
}
.practice-view.reading-focus .focus-exit {
  display: flex;
}
@media (prefers-reduced-motion: reduce) {
  .focus-exit {
    transition: none;
  }
}
.practice-view.reading-focus main {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: clamp(32px, 6vh, 72px) clamp(24px, 5vw, 80px) clamp(48px, 8vh, 96px);
  margin: 0;
}
.practice-view.reading-focus #list {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
.practice-view.reading-focus .entry {
  width: min(100%, 1240px);
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(34px, 5vh, 64px) 0;
}
.practice-view.reading-focus .entry-main {
  width: 100%;
  max-width: none;
}
.practice-view.reading-focus .sentence {
  width: 100%;
  max-width: 96ch;
  margin-left: 0;
  margin-right: auto;
  font-size: clamp(1.3rem, 2.15vw, 2rem);
  line-height: 1.82;
}
.practice-view.reading-focus .translation {
  max-width: 96ch;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.72;
}
.practice-view.reading-focus .word {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}
.practice-view.reading-focus .num {
  display: none;
}
.practice-view.reading-focus #sentinel {
  height: 1px;
}
@media (max-width: 620px) {
  .practice-view.reading-focus main {
    padding: 24px 20px 56px;
  }
  .practice-view.reading-focus .entry {
    padding: 28px 0;
  }
  .practice-view.reading-focus .sentence {
    max-width: none;
    font-size: calc(1.2rem * var(--scale));
    line-height: 1.8;
  }
  .practice-view.reading-focus .translation {
    max-width: none;
    font-size: calc(0.98rem * var(--scale));
  }
}

/* ============================================================
   2.33.2 — Modo Foco também na tela de Frases (Starters, Perguntas,
   Conectores, Verbos). Essa tela usa sua própria marcação
   (.connect-item, .ci-*), então as regras acima — pensadas para a
   tela de Palavras (.entry) — não a alcançavam: sobravam os botões
   de ouvir/marcar como aprendido e a largura continuava travada em
   68ch mesmo em telas grandes.
   ============================================================ */
.practice-view.reading-focus .ci-actions {
  display: none !important;
}
.practice-view.reading-focus .connect-view {
  width: 100%;
  max-width: none;
}
.practice-view.reading-focus .connect-item {
  width: min(100%, 1240px);
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.practice-view.reading-focus .ci-body {
  max-width: none;
}
.practice-view.reading-focus .ci-en,
.practice-view.reading-focus .ci-tr,
.practice-view.reading-focus .ci-pron {
  max-width: 96ch;
}

/* ---- Desbloqueio por fases (src/unlocks.js) ---- */
.lock-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--h-green);
  background: color-mix(in srgb, var(--h-green) 14%, transparent);
}
.lock-badge svg {
  width: 14px;
  height: 14px;
}
/* Home: cards de modo bloqueados */
.hx-mode.is-locked {
  border-style: dashed;
}
.hx-mode.is-locked .hx-mode-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--h-dim) !important;
  box-shadow: none !important;
}
.hx-mode.is-locked .hx-mode-title {
  color: var(--h-dim);
}
.hx-mode.is-locked .hx-arrow {
  display: none;
}
.hx-unlock {
  display: block;
  margin-top: 10px;
  padding-right: 44px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--h-ink);
}
.hx-mode .hx-lock {
  position: absolute;
  right: 14px;
  bottom: 12px;
}
.hx-next {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--h-dim);
}
.hx-next strong {
  color: var(--h-green);
  font-weight: 800;
}
/* Seletor "O que estudar" */
.mp-option.is-locked .combo-icon {
  opacity: 0.45;
}
.mp-option.is-locked .mp-title {
  color: var(--h-dim);
}
.mp-option.is-locked .mp-sub {
  color: var(--h-green);
}
.mp-option.is-locked .mp-num,
.mp-option.is-locked .mp-check {
  display: none;
}
.mp-option .mp-lock {
  width: 28px;
  height: 28px;
  margin-left: auto;
}
/* Folha que explica o bloqueio */
.lock-sheet-panel {
  padding: 8px 22px calc(18px + var(--safe-bottom));
  font-family: var(--h-font);
  color: var(--h-ink);
}
.lock-badge-lg {
  width: 52px;
  height: 52px;
  margin: 6px 0 14px;
}
.lock-badge-lg svg {
  width: 24px;
  height: 24px;
}
.lock-sheet-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--h-ink);
}
.lock-sheet-text {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--h-dim);
}
.lock-sheet-count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
}
.lock-sheet-count strong {
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lock-sheet-count span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--h-dim);
}
.lock-sheet-track {
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.lock-sheet-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--h-green);
}
.lock-sheet-action,
.lock-sheet-close {
  display: block;
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.lock-sheet-action {
  margin-top: 22px;
  border: 0;
  color: var(--h-on-green);
  background: linear-gradient(90deg, var(--h-green), var(--h-green-2));
}
.lock-sheet-close {
  margin-top: 8px;
  border: 1px solid var(--h-line);
  background: transparent;
  color: var(--h-dim);
  font-weight: 700;
}
.lock-sheet-action:focus-visible,
.lock-sheet-close:focus-visible {
  outline: 3px solid var(--h-green);
  outline-offset: 2px;
}
/* Frases: grupos bloqueados e progresso de blocos */
.connect-mode-btn.is-locked {
  border-style: dashed;
  background: transparent;
  color: var(--rf, var(--ink-soft));
}
.connect-mode-btn.is-locked > svg:not(.cm-lock) {
  opacity: 0.55;
}
.connect-mode-btn .cm-rule {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ra, var(--accent));
}
.connect-mode-btn .cm-rule .cm-lock {
  width: 11px;
  height: 11px;
}
.connect-unlock-note {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--rp, var(--bg-panel));
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--rd, var(--ink-soft));
}
.connect-unlock-note strong {
  color: var(--ri, var(--ink));
}
/* Lições: níveis bloqueados */
.grammar-level-tab.is-locked {
  border-style: dashed;
  background: transparent;
}
.grammar-level-tab.is-locked .glt-code,
.grammar-level-tab.is-locked .glt-name {
  opacity: 0.6;
}
.grammar-level-tab.is-locked .glt-bar {
  visibility: hidden;
}
.glt-rule {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ra, var(--accent));
  font-weight: 700;
}
.glt-lock {
  width: 11px;
  height: 11px;
}
.lock-sheet .lock-sheet-panel {
  background: #15221e;
  border-color: var(--h-line);
}


/* ---- Sessão de hoje (src/session.js, src/session-ui.js) ---- */
.hx-go-sub {
  margin: 10px 4px 0;
  text-align: center;
  font-family: var(--h-font);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--h-dim);
  text-wrap: balance;
}
.hx-go-sub:empty {
  display: none;
}
.hx-go-sub strong {
  color: var(--h-ink);
  font-weight: 800;
}
.hx-go.is-complete {
  background: transparent;
  color: var(--h-ink);
  border: 1px solid color-mix(in srgb, var(--h-green) 45%, transparent);
  box-shadow: none;
}
.hx-go.is-complete .hx-play {
  color: var(--h-green);
}
.hx-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 6px 12px;
  font-family: var(--h-font);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--h-dim);
}
.hx-or::before,
.hx-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--h-line);
}
.hx-choose {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--h-green) 35%, transparent);
  background: transparent;
  font-family: var(--h-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--h-ink);
  cursor: pointer;
}
.hx-choose > svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--h-green);
}
.hx-choose > span {
  flex: 1;
  text-align: left;
}
.hx-choose:focus-visible {
  outline: 3px solid var(--h-green);
  outline-offset: 2px;
}
/* Sessão de hoje concluída: o botão de escolher vira o principal. */
.hx-choose.is-highlight {
  border: 0;
  background: linear-gradient(180deg, #9ad3aa, var(--h-green-2));
  color: var(--h-on-green);
  box-shadow:
    0 10px 26px rgba(125, 187, 144, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hx-choose.is-highlight > svg {
  color: var(--h-on-green);
}
.hx-progress {
  margin-top: 22px;
}
#home-review {
  display: none !important;
}
/* Sessão no cabeçalho: a barrinha do topo vira a barra de etapas */
body.in-session #mini-progress-row.hidden {
  display: flex !important;
}
body.in-session #mini-progress-row > .mini-progress-track,
body.in-session #mini-progress-row > .mini-progress-label,
body.in-session #count {
  display: none !important;
}
.session-head {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.session-head[hidden],
.session-count[hidden] {
  display: none !important;
}
.session-head-steps {
  flex: 1;
  display: flex;
  gap: 4px;
}
.session-head-steps i {
  height: 4px;
  border-radius: 2px;
  background: var(--rl);
  overflow: hidden;
}
.session-head-steps i b {
  display: block;
  height: 100%;
  background: var(--ra);
  border-radius: inherit;
  transition: width 0.3s ease;
}
.session-head-steps i.done {
  background: color-mix(in srgb, var(--ra) 70%, transparent);
}
.session-head-label {
  font-size: 0.74rem;
  color: var(--rf);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.session-head-label strong {
  color: var(--rd);
  font-weight: 600;
  margin-right: 3px;
}
.session-head-exit {
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--rf);
  font: inherit;
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.session-head-exit:focus-visible {
  outline: 2px solid var(--ra);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Resumo no fim da sessão */
.session-done-rows {
  margin-top: 16px;
  padding: 2px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--h-line);
}
.session-done-rows div {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--h-line);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--h-dim);
}
.session-done-rows div:first-child {
  border-top: 0;
}
.session-done-rows strong {
  color: var(--h-ink);
  font-weight: 800;
}
.session-done-next {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--h-green) 10%, transparent);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--h-ink);
}
.session-done-next strong {
  color: var(--h-green);
}
/* Ajustes: palavras novas por dia */
.newday-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.74rem;
  color: var(--ink-dim);
}
.newday-btns {
  display: flex;
  gap: 6px;
}
.newday-btn {
  min-width: 44px;
  min-height: 36px;
  border-radius: 7px;
  border: 1px solid var(--hairline);
  background: var(--bg-panel-2);
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.newday-btn[aria-pressed="true"] {
  border-color: var(--accent, var(--ra));
  color: var(--ink);
}
/* ---- Tema Grafite (2.39.0): fundo azul-grafite com o acento verde ---- */
html:root[data-theme="slate"] {
  --rb: #19202b;
  --rp: #212a37;
  --rp2: #263141;
  --rl: rgba(255, 255, 255, 0.1);
  --ri: #dcd7cc;
  --rd: #b0b8c4;
  --rf: #8a93a1;
  --ra: #a6dab6;
  --rfa: #9ad3aa;
  --rfb: #7dbb90;
  --rof: #10231a;
  --rh: rgba(25, 32, 43, 0.9);
  --rs: rgba(0, 0, 0, 0.28);
  --rok: #a9d8bc;
  --rglow: rgba(143, 202, 160, 0.1);
  --rbg-glow: rgba(143, 202, 160, 0.05);
  --chip-on-a: #9ad3aa;
  --chip-on-b: #7dbb90;
  --chip-on-text: #10231a;
  --chip-line: rgba(143, 202, 160, 0.24);
  --chip-line-hover: rgba(143, 202, 160, 0.55);
  --chip-glow: rgba(125, 187, 144, 0.18);
}
html:root[data-firm][data-theme="slate"] {
  --rh: #19202b;
  --ri: #d6d2c8;
  --rd: #b6bdc8;
  --rf: #9aa2ae;
  --rl: rgba(255, 255, 255, 0.16);
  --ra: #abcdb5;
  --rfa: #a3c9ae;
  --rfb: #a3c9ae;
  --rof: #10231a;
  --rok: #abcdb5;
  --chip-on-a: #a3c9ae;
  --chip-on-b: #a3c9ae;
  --chip-on-text: #10231a;
  --chip-line: rgba(171, 205, 181, 0.34);
  --chip-line-hover: rgba(171, 205, 181, 0.62);
}
html:root .sw-slate {
  background: #19202b;
}
html:root .sw-slate i {
  background: #dcd7cc;
}
html:root .sw-slate i:last-child {
  background: #a6dab6;
}
/* Cinco temas: Automático ocupa a linha de cima, os outros quatro embaixo. */
.theme-opt[data-theme-opt="auto"] {
  grid-column: 1 / -1;
}

/* ---- Ditado (etapa da sessão) ---- */
.entry.is-dictation:not(.dict-done) .sentence,
.entry.is-dictation:not(.dict-done) .sentence-pron,
.entry.is-dictation:not(.dict-done) .translation,
.entry.is-dictation .entry-actions {
  display: none;
}
.entry.is-dictation.dict-done .dict-hidden,
.entry.is-dictation.dict-done .dict-listen,
.entry.is-dictation.dict-done .dict-input,
.entry.is-dictation.dict-done .practice-entry-actions,
.entry.is-dictation.dict-done .practice-hint {
  display: none;
}
.dict-box {
  margin: 10px 0 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dict-hidden {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 14px;
  border: 1.5px dashed var(--rl);
  border-radius: 14px;
}
.dict-hidden i {
  height: 12px;
  border-radius: 6px;
  background: var(--rp2, var(--rp));
}
.dict-tag {
  display: inline-block;
  margin-bottom: 4px;
  font: 700 0.7rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ra);
}
.dict-listen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.dict-listen button,
.voice-compare button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rl);
  background: var(--rp);
  color: var(--ri);
  font: 600 0.85rem -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.dict-listen button svg,
.voice-compare button svg {
  width: 14px;
  height: 14px;
}
.dict-listen .dict-play {
  border-color: var(--ra);
  color: var(--ra);
}
.dict-listen button.playing,
.voice-compare button.playing {
  border-color: var(--ra);
  color: var(--ra);
}
.dict-listen button:disabled {
  opacity: 0.5;
  cursor: default;
}
.entry.is-dictation.dict-done .dict-result {
  margin-bottom: 8px;
}

/* ---- Comparar vozes (shadowing) ---- */
.voice-compare {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--rp);
  border: 1px solid var(--rl);
}
.voice-compare p {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--rf);
}
.voice-compare-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.voice-compare button.recording {
  border-color: #d9776b;
  color: #d9776b;
}
.voice-compare button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Caixas de escrever e de falar ocupam a largura inteira da palavra,
   abaixo da coluna de botões (2.40.2). */
html:root .entry {
  flex-wrap: wrap;
  row-gap: 0;
}
html:root .entry > .practice-box,
html:root .entry > .voice-box {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
}
html:root .entry > .practice-box .practice-input-inline,
html:root .entry > .voice-box .voice-transcript {
  width: 100%;
  box-sizing: border-box;
}

/* Celular: linha da frase mais larga (2.40.3). Mantém letra e entrelinha da
   2.40, mas volta às margens da 2.24 (16 px), para quebrar menos a frase. */
@media (max-width: 620px) {
  .practice-view main {
    padding-left: 16px;
    padding-right: 16px;
  }
  .practice-view .entry {
    padding-left: 0;
    padding-right: 0;
    column-gap: 10px;
  }
  .practice-view .entry::before {
    left: -10px;
  }
}

/* Leitura fácil nos temas Grafite e Noite: um pouco mais clara, para chegar
   ao contraste mínimo de texto corrido (APCA Lc 75). Com "Letras firmes" o
   texto é mais grosso e o tom mais suave continua valendo. (2.40.4) */
html:root[data-theme="slate"]:not([data-firm]) .practice-view .sentence-pron,
html:root[data-theme="slate"]:not([data-firm]) .ci-pron {
  color: #aadcba;
}
html:root[data-theme="night"]:not([data-firm]) .practice-view .sentence-pron,
html:root[data-theme="night"]:not([data-firm]) .ci-pron {
  color: #aedab7;
}
/* Instruções: seção Descanso da vista */
.instr-heading {
  margin: 26px 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink, var(--ri));
}
.eye-guide .phonetic-symbol {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ---- Revisão em cartões (src/review-deck.js, 2.41.0) ---- */
body.deck-on #list,
body.deck-on #count,
body.deck-on #review-exit,
body.deck-on .search-wrap,
body.deck-on .filters {
  display: none !important;
}
.review-deck[hidden] {
  display: none;
}
.review-deck {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 6px 0 110px;
}
.rv-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 0.8rem;
  color: var(--rf);
}
.rv-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--rl);
  overflow: hidden;
}
.rv-track b {
  display: block;
  height: 100%;
  background: var(--ra);
  transition: width 0.3s ease;
}
.rv-count strong {
  color: var(--rd);
  font-weight: 600;
  margin-right: 3px;
}
.rv-exit,
.rv-link {
  border: 0;
  background: none;
  font: inherit;
  color: var(--rf);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 32px;
}
.rv-card {
  padding: 22px 20px;
  border-radius: 22px;
  background: var(--rp);
  border: 1px solid var(--rl);
}
.rv-num {
  font-size: 0.75rem;
  color: var(--rf);
}
.rv-word {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 12px;
}
.rv-word b {
  font-size: calc(1.55rem * var(--scale, 1));
  font-weight: 500;
  color: var(--ri);
}
.rv-word span {
  color: var(--ra);
  font-size: 1rem;
}
.rv-pt {
  margin: 8px 0 0;
  font-size: calc(1.05rem * var(--scale, 1));
  line-height: 1.55;
  color: var(--rd);
}
.rv-hide {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 6px;
  padding: 16px;
  border: 1.5px dashed var(--rl);
  border-radius: 14px;
}
.rv-hide i {
  height: 13px;
  border-radius: 7px;
  background: var(--rl);
}
.rv-ask {
  margin: 14px 0 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--rf);
}
.rv-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid var(--rl);
  background: transparent;
  color: var(--ri);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.rv-btn svg {
  width: 18px;
  height: 18px;
  color: var(--ra);
}
.rv-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.rv-mic {
  display: inline-flex;
}
.rv-mic.listening svg {
  color: #e0a397;
}
.rv-card .voice-box {
  margin-top: 12px;
}
.rv-writebox {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.rv-writebox.hidden,
.rv-ask-area.hidden,
.rv-answer.hidden,
.rv-grade.hidden,
.rv-auto.hidden {
  display: none;
}
.rv-input {
  width: 100%;
  box-sizing: border-box;
}
.rv-link {
  display: block;
  margin: 14px auto 0;
  color: var(--rd);
  font-size: 0.9rem;
}
.rv-en {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
}
.rv-en div {
  flex: 1;
}
.rv-en p {
  margin: 0;
  font-size: calc(1.2rem * var(--scale, 1));
  line-height: 1.55;
  color: var(--ri);
}
.rv-en small {
  display: block;
  margin-top: 4px;
  font-size: calc(0.9rem * var(--scale, 1));
  line-height: 1.5;
  color: var(--ra);
  letter-spacing: 0.02em;
}
.rv-play {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rl);
  background: transparent;
  color: var(--ri);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rv-play svg {
  width: 16px;
  height: 16px;
}
.rv-said {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ra) 9%, transparent);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--rf);
}
.rv-said[hidden] {
  display: none;
}
.rv-said-text {
  color: var(--rd);
}
.rv-diff {
  margin-top: 6px;
  font-size: 0.95rem;
}
.rv-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.rv-g {
  min-height: 62px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--rl);
  background: transparent;
  color: var(--ri);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.rv-g small {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--rf);
}
.rv-g.ok {
  background: var(--rfa);
  border-color: transparent;
  color: var(--rof);
}
.rv-g.ok small {
  color: var(--rof);
  opacity: 0.8;
}
.rv-auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  color: var(--ra);
  font-weight: 600;
}
.rv-auto .rv-btn {
  min-height: 44px;
}
.rv-done {
  text-align: center;
  padding: 30px 20px;
}
.rv-big {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ra) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ra);
  font-size: 30px;
}
.rv-done h2 {
  margin: 0;
  color: var(--ri);
  font-size: 1.5rem;
}
.rv-done p {
  color: var(--rd);
  margin: 8px 0 0;
  line-height: 1.5;
}
.rv-rows {
  margin: 18px 0;
  text-align: left;
  border-radius: 16px;
  border: 1px solid var(--rl);
}
.rv-rows div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--rl);
  color: var(--rd);
}
.rv-rows div:first-child {
  border-top: 0;
}
.rv-rows b {
  color: var(--ri);
}
.rv-prim {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--rfa);
  color: var(--rof);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Na sessão, o cabeçalho já mostra o progresso: esconde a barra do cartão. */
body.in-session .rv-top {
  display: none;
}

/* ---- Lugares: "Onde você está?" (src/places.js, 2.43.0) ---- */
.connect-mode-btn.connect-mode-places {
  grid-column: 1 / -1;
}
@media (min-width: 621px) {
  .connect-mode-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .connect-mode-btn.connect-mode-places {
    grid-column: auto;
  }
}
.places-view[hidden] {
  display: none;
}
.places-view {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 4px 0 110px;
}
.pl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 12px;
  font-size: 0.8rem;
  color: var(--rf);
}
.pl-head b {
  color: var(--ri);
  font-size: 1rem;
}
.pl-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ra) 14%, transparent);
  color: var(--ra);
  font-weight: 700;
  font-size: 0.78rem;
}
.pl-frame {
  margin: 4px 0 0;
  font-size: calc(1.25rem * var(--scale, 1));
  line-height: 1.5;
  color: var(--ri);
}
.pl-slot {
  display: inline-block;
  min-width: 92px;
  border-bottom: 2px dashed var(--ra);
}
.pl-obj {
  color: var(--ra);
  border-bottom: 2px dashed color-mix(in srgb, var(--ra) 60%, transparent);
}
.pl-pron {
  margin: 4px 0 0;
  font-size: calc(0.9rem * var(--scale, 1));
  color: var(--ra);
  letter-spacing: 0.02em;
}
.pl-frames,
.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pl-frame-btn,
.pl-chip {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--rl);
  background: transparent;
  color: var(--rd);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.pl-frame-btn.on {
  border-color: var(--ra);
  color: var(--ra);
}
.pl-chip.on {
  border-color: transparent;
  background: var(--rfa);
  color: var(--rof);
  font-weight: 600;
}
.pl-chip.said:not(.on)::after {
  content: " ✓";
  color: var(--ra);
}
.pl-places {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.pl-place {
  text-align: left;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--rl);
  background: transparent;
  color: var(--ri);
  font: inherit;
  cursor: pointer;
}
.pl-place b {
  display: block;
  font-size: 0.95rem;
}
.pl-place small {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--rf);
  line-height: 1.35;
}
.pl-sub {
  margin: 16px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rf);
}
.pl-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--rl);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--rd);
}
.pl-note b {
  color: var(--ra);
}
.pl-card .voice-box {
  margin-top: 12px;
}
.pl-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.pl-mic {
  display: inline-flex;
}
.pl-progress {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--rf);
}
.pl-progress strong {
  color: var(--ri);
}

/* ---- Mude o tempo na Revisão (src/tenses.js, 2.44.0) ---- */
.rv-tense-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ra) 14%, transparent);
  color: var(--ra);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: 1px;
}
.rv-base {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ra) 8%, transparent);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--rd);
}
.rv-base b {
  color: var(--ri);
  font-weight: 600;
}
.rv-ask b {
  color: var(--ra);
}

/* ==== Frases: monte a frase, peça por peça (src/frases.js, 2.45.0) ==== */
/* Nesta tela o cabeçalho e a navegação inferior saem: a tela tem o próprio
   cabeçalho e a própria barra de ações. Na sessão de hoje, a barra de etapas
   continua visível no topo. */
.practice-view.fr-mode .bottom-nav {
  display: none !important;
}
.practice-view.fr-mode header .brand-row,
.practice-view.fr-mode header .search-wrap,
.practice-view.fr-mode header .count-row {
  display: none !important;
}
body:not(.in-session) .practice-view.fr-mode #mini-progress-row {
  display: none !important;
}
.practice-view.fr-mode header {
  border: 0;
  padding-top: calc(6px + var(--safe-top));
  padding-bottom: 0;
  box-shadow: none;
  background: transparent;
}
body:not(.in-session) .practice-view.fr-mode header {
  padding-top: var(--safe-top);
  min-height: 0;
}
.practice-view.fr-mode main {
  padding-bottom: calc(120px + var(--safe-bottom));
}

#connect-view.connect-view {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fr-start: #d9b26f;
  --fr-ask: #c9a7b8;
  --fr-link: #6fd0b4;
  --fr-place: #d9b26f;
}
html[data-theme="sharp"] #connect-view.connect-view {
  --fr-start: #7a5410;
  --fr-ask: #7d5068;
  --fr-link: #0d5c47;
  --fr-place: #7a5410;
}
.fr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--rl);
}
.fr-back {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ri);
  cursor: pointer;
}
.fr-back svg {
  width: 22px;
  height: 22px;
}
.fr-titles {
  flex: 1;
  min-width: 0;
}
.fr-titles h2 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ri);
}
.fr-titles p {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--rf);
}
.fr-size {
  flex: none;
  display: inline-flex;
  gap: 6px;
}
.fr-size-btn {
  width: 40px;
  height: 36px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 7px;
  border-radius: 999px;
  border: 1px solid var(--rl);
  background: transparent;
  color: var(--rd);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.fr-size-btn small {
  font-size: 0.8rem;
  margin-left: 1px;
}
.fr-size-btn:active {
  border-color: var(--ra);
  color: var(--ra);
}

.fr-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ra) 12%, transparent);
  color: var(--rd);
  font-size: 0.9rem;
}
.fr-review strong {
  color: var(--ra);
}
.fr-review-btn {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--rfa);
  color: var(--rof);
  font: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}

/* A palavra fica fixa no topo, ao lado do número, enquanto a tela rola. */
.fr-word {
  position: sticky;
  top: var(--fr-sticky-top, 0px);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 14px 0 12px;
  padding: 10px 0;
  background: var(--rb);
  /* a faixa de fundo cobre as laterais sem criar rolagem horizontal */
  box-shadow: -24px 0 0 var(--rb), 24px 0 0 var(--rb);
  border-bottom: 1px solid var(--rl);
}
.fr-num {
  font-size: 0.95rem;
  color: var(--rf);
  font-variant-numeric: tabular-nums;
}
.fr-w {
  font-size: calc(1.15rem * var(--connect-scale, 1));
  line-height: 1.2;
  font-weight: 700;
  color: var(--ri);
  overflow-wrap: anywhere;
}
.fr-wp {
  font-size: calc(0.95rem * var(--connect-scale, 1));
  color: var(--ra);
  letter-spacing: 0.03em;
}
.fr-nav {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  align-self: center;
}
.fr-nav button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rl);
  background: transparent;
  color: var(--rd);
  cursor: pointer;
}
.fr-nav button svg {
  width: 18px;
  height: 18px;
}
.fr-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

.fr-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.fr-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
  border: 0;
  background: transparent;
  color: var(--rf);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.fr-seg i {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--rl);
}
.fr-seg.is-done i {
  background: color-mix(in srgb, var(--ra) 55%, var(--rb));
}
.fr-seg.is-on i {
  background: var(--ra);
}
.fr-seg.is-on span {
  color: var(--ri);
  font-weight: 700;
}

.fr-tenses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 5px;
  border-radius: 18px;
  border: 1px solid var(--rl);
}
.fr-tense {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--rd);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.fr-tense.is-on {
  background: var(--rfa);
  color: var(--rof);
  font-weight: 700;
}
.fr-tense:disabled {
  cursor: default;
  color: var(--rf);
  opacity: 0.45;
}
.fr-tense.is-on:disabled {
  opacity: 0.55;
}
.fr-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--rf);
}

.fr-cards {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 16px;
}
.fr-card {
  --pc: var(--rd);
  max-width: 100%;
  padding: 8px 16px 10px;
  border-radius: 16px;
  border: 1.5px solid color-mix(in srgb, var(--pc) 55%, transparent);
  background: transparent;
}
.fr-k-starter {
  --pc: var(--fr-start);
}
.fr-k-frase {
  --pc: var(--rd);
}
.fr-k-conector,
.fr-k-frase2,
.fr-k-resposta {
  --pc: var(--fr-link);
}
.fr-k-pergunta {
  --pc: var(--fr-ask);
}
.fr-k-lugar {
  --pc: var(--fr-place);
}
.fr-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fr-tag b {
  color: var(--pc);
  font-weight: 800;
}
.fr-tag em {
  font-style: normal;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rfa);
  color: var(--rof);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.fr-text {
  margin: 2px 0 0;
  font-size: calc(1.08rem * var(--connect-scale, 1));
  line-height: 1.35;
  color: color-mix(in srgb, var(--pc) 35%, var(--ri));
  overflow-wrap: anywhere;
}
.fr-k-frase .fr-text,
.fr-k-frase2 .fr-text {
  color: var(--ri);
}
.fr-text u {
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--pc);
}

.fr-place {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 8px;
  color: var(--fr-place);
}
.fr-place span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.fr-place b {
  font-size: calc(1.05rem * var(--connect-scale, 1));
  font-weight: 700;
}
.fr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}
.fr-chip {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--rl);
  background: transparent;
  color: var(--rd);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.fr-chip.is-on {
  border-color: transparent;
  background: var(--rfa);
  color: var(--rof);
  font-weight: 700;
}
.fr-chip.is-seen {
  border-color: color-mix(in srgb, var(--ra) 60%, transparent);
  color: var(--ra);
}
.fr-pron {
  margin: 0 0 10px;
  font-size: calc(0.98rem * var(--connect-scale, 1));
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ra);
}
.fr-pt {
  margin: 0;
  font-size: calc(0.98rem * var(--connect-scale, 1));
  line-height: 1.5;
  color: var(--rd);
}
.fr-empty {
  margin: 40px 0;
  text-align: center;
  color: var(--rf);
  line-height: 1.5;
}

.fr-bar {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 14px calc(12px + var(--safe-bottom));
  background: var(--rb);
  border-top: 1px solid var(--rl);
  box-sizing: border-box;
}
.fr-act,
.fr-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid var(--rl);
  background: transparent;
  color: var(--ri);
  font: inherit;
  font-size: 0.98rem;
  cursor: pointer;
}
.fr-act:disabled {
  opacity: 0.4;
  cursor: default;
}
.fr-act {
  padding: 0 12px;
  gap: 6px;
  font-size: 0.92rem;
  white-space: nowrap;
}
.fr-act svg,
.fr-main svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.fr-icon {
  width: 48px;
  padding: 0;
}
.fr-main {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  font-weight: 700;
  border: 0;
  background: var(--rfa);
  color: var(--rof);
}
.fr-main.fr-finish {
  background: color-mix(in srgb, var(--ra) 14%, var(--rb));
  border: 1.5px solid var(--ra);
  color: var(--ra);
}
.fr-learned.is-on {
  border-color: var(--ra);
  background: color-mix(in srgb, var(--ra) 18%, transparent);
  color: var(--ra);
}
.fr-bar button:focus-visible,
.fr-head button:focus-visible,
.fr-size button:focus-visible,
.fr-steps button:focus-visible,
.fr-tenses button:focus-visible,
.fr-chips button:focus-visible {
  outline: 2px solid var(--ra);
  outline-offset: 2px;
}
@media (max-width: 380px) {
  .fr-act:not(.fr-icon) span {
    display: none;
  }
  .fr-act:not(.fr-icon) {
    width: 52px;
    padding: 0;
  }
}

/* Modo foco: só a palavra, a frase e os botões. */
.practice-view.reading-focus .fr-tenses,
.practice-view.reading-focus .fr-note,
.practice-view.reading-focus .fr-steps,
.practice-view.reading-focus .fr-review {
  display: none;
}
.practice-view.reading-focus .fr-head {
  display: none;
}
.practice-view.reading-focus .fr-bar {
  display: flex;
}
.practice-view.reading-focus .fr-text {
  font-size: calc(1.3rem * var(--connect-scale, 1));
}

#sheet-row-admin[hidden] {
  display: none !important;
}


/* ==== Frases: busca igual à da Gramática (2.46.0) ==== */
#connect-view .fr-head .header-icon-btn {
  margin-left: 0;
  background: var(--rp);
  border-color: var(--rl);
  color: var(--rd);
}
#connect-view .fr-search-wrap {
  margin: 10px 0 0;
  max-width: none;
}
#connect-view .fr-search-wrap input {
  background: var(--rp);
  border-color: var(--rl);
  color: var(--ri);
  box-shadow: none;
}
#connect-view .fr-search-wrap input::placeholder {
  color: var(--rf);
}
#connect-view .fr-results.grammar-view {
  min-height: 0;
}
#connect-view .fr-results[hidden] {
  display: none;
}
#connect-view .fr-results .grammar-level-heading {
  margin: 14px 2px 12px;
}
#connect-view .fr-results .grammar-list {
  padding-bottom: calc(32px + var(--safe-bottom));
}
#connect-view .fr-results .gi-topic {
  font-family: var(--font-list);
  font-weight: 400;
}
html[data-firm] #connect-view .fr-results .gi-topic {
  font-weight: 500;
}
#connect-view .fr-results .gi-word-pron {
  margin-left: 6px;
  font-size: 0.85em;
  color: var(--ra);
  letter-spacing: 0.03em;
}
#connect-view .fr-results .gi-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--rf);
  letter-spacing: 0;
}
#connect-view .fr-results .grammar-item {
  cursor: pointer;
}
#connect-view .fr-results .grammar-item.is-locked {
  opacity: 0.55;
}
#connect-view .fr-results .gi-flag {
  pointer-events: none;
}
/* Com resultados na tela, some o resto (palavra, peças, barra de ações). */
#connect-view.fr-searching .fr-body,
#connect-view.fr-searching .fr-bar {
  display: none;
}


/* ==== Frases sem caixas: palavras juntas, cor só na peça nova (2.47.0) ==== */
.fr-seg:nth-child(1) {
  --pc: var(--fr-start);
}
.fr-seg:nth-child(2) {
  --pc: var(--fr-link);
}
.fr-seg:nth-child(3) {
  --pc: var(--fr-ask);
}
.fr-seg:nth-child(4) {
  --pc: var(--fr-place);
}
.fr-seg.is-on i {
  background: var(--pc, var(--ra));
}
.fr-seg.is-done i {
  background: color-mix(in srgb, var(--pc, var(--ra)) 45%, var(--rb));
}
.fr-flow {
  margin: 20px 0 0;
}
.fr-flow-line {
  margin: 0 0 12px;
  font-size: calc(1.08rem * var(--connect-scale, 1));
  line-height: 1.55;
  color: var(--ri);
  overflow-wrap: anywhere;
}
.fr-flow-line .pc {
  --c: var(--ra);
  color: color-mix(in srgb, var(--c) 85%, var(--ri));
  background: none;
  font-weight: 700;
}
.fr-flow-line .pc-start {
  --c: var(--fr-start);
}
.fr-flow-line .pc-link {
  --c: var(--fr-link);
}
.fr-flow-line .pc-ask {
  --c: var(--fr-ask);
}
.fr-flow-line u {
  text-decoration-thickness: 2.5px;
  text-underline-offset: 5px;
  text-decoration-color: var(--fr-place);
  font-weight: 700;
}


/* ==== Lista filtrada: sinalização no contador (2.48.1) ==== */
.practice-view .count.is-filtered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ra, currentColor);
}
.practice-view .count.is-filtered::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.5 10 19 14 21 14 12.5 22 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.5 10 19 14 21 14 12.5 22 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
#filter-clear {
  white-space: nowrap;
}
.practice-view .count.is-filtered {
  min-width: 0;
  line-height: 1.3;
}

/* ==== Busca de Palavras igual à de Gramática (2.48.3) ==== */
.practice-view .search-field {
  border-radius: 13px;
}
.practice-view #search {
  height: 40px;
  min-height: 0;
  padding: 0 14px;
  font-family: inherit;
  font-size: 0.92rem;
  border-radius: 13px;
}

/* O anel de foco da busca de Palavras não pode ser cortado pelo contêiner
   (overflow: hidden só serve para a animação de recolher). */
.search-wrap:not(.hidden) {
  overflow: visible;
}

/* Botão "Tentar de novo" da tela de erro ao carregar as palavras */
.retry-load {
  margin-top: 14px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Palavras ditas/escritas a mais, mostradas depois da frase certa */
.diff-extra {
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.75;
  white-space: normal;
}

/* Ditado: a frase verificada some da lista (ver finishDictationEntry em app.js) */
.entry.dict-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .entry.dict-leaving {
    transition: none;
  }
}

/* ---- Janela "Boca": sons da palavra (src/boca.js, 2.50.0) ---- */
.bw,
.bw-head {
  cursor: pointer;
  border-radius: 5px;
  -webkit-tap-highlight-color: transparent;
}
.bw {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(166, 218, 182, 0.45);
  text-decoration-color: color-mix(in srgb, var(--ra, #a6dab6) 45%, transparent);
}
@media (hover: hover) {
.bw:hover,
.bw-head:hover {
  background: rgba(166, 218, 182, 0.14);
  background: color-mix(in srgb, var(--ra, #a6dab6) 16%, transparent);
}
}
.bw:focus-visible,
.bw-head:focus-visible {
  outline: 2px solid var(--ra, #a6dab6);
  outline-offset: 2px;
}
/* Enquanto a frase está escondida (escrever, ditado, revisão) as palavras não respondem. */
.entry.practicing .bw,
.entry.is-dictation:not(.revealed) .bw {
  pointer-events: none;
}
.boca-panel {
  padding: 8px 16px calc(14px + var(--safe-bottom));
  background: var(--rp, #18251f);
  color: var(--ri, #e6e1d6);
  border-color: var(--rl, rgba(214, 235, 222, 0.09));
  font-family: var(--h-font, system-ui, sans-serif);
}
.boca-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.boca-title {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
.boca-title b {
  font-size: 1.5rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.boca-ipa {
  font-size: 1.1rem;
  color: var(--ra, #a6dab6);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.boca-pron {
  font-size: 0.9rem;
  color: var(--rd, #b7c3bb);
}
.boca-x {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rl, rgba(214, 235, 222, 0.09));
  border-radius: 50%;
  background: transparent;
  color: var(--ri, #e6e1d6);
  cursor: pointer;
}
.boca-x svg {
  width: 16px;
  height: 16px;
}
.boca-stage {
  margin: 12px 0 8px;
  padding: 6px;
  border-radius: 14px;
  background: var(--rb, #111b18);
}
.boca-svg {
  display: block;
  width: 100%;
  max-height: min(40vh, 340px);
}
.boca-cap {
  margin: 4px 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--rd, #b7c3bb);
}
.boca-timeline {
  position: relative;
  height: 30px;
  margin: 4px 2px 2px;
  border-radius: 8px;
  overflow: hidden;
}
.boca-timeline b {
  position: absolute;
  top: 2px;
  bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--rl, rgba(214, 235, 222, 0.09));
  border-radius: 6px;
  background: var(--rp, #18251f);
  color: var(--ri, #e6e1d6);
  font-size: 0.9rem;
  font-weight: 600;
}
.boca-timeline b.on {
  background: var(--ra, #a6dab6);
  border-color: var(--ra, #a6dab6);
  color: var(--rof, #10231a);
}
.boca-ph {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #e0a526;
  opacity: 0;
  pointer-events: none;
}
.boca-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
}
.boca-tag {
  padding: 2px 10px;
  border: 1px solid var(--rl, rgba(214, 235, 222, 0.09));
  border-radius: 20px;
  font-size: 0.78rem;
  color: var(--rd, #b7c3bb);
}
.boca-tag.is-new {
  border-color: var(--ra, #a6dab6);
  color: var(--ra, #a6dab6);
}
.boca-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.boca-chip {
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  border: 1px solid var(--rl, rgba(214, 235, 222, 0.09));
  border-radius: 12px;
  background: var(--rb, #111b18);
  color: var(--ri, #e6e1d6);
  font-size: 1.25rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.boca-chip.on {
  background: var(--ra, #a6dab6);
  border-color: var(--ra, #a6dab6);
  color: var(--rof, #10231a);
}
.boca-tip {
  min-height: 3em;
  margin: 8px 0 12px;
  font-size: 1rem;
  line-height: 1.5;
}
.boca-status {
  margin: -4px 0 10px;
  font-size: 0.88rem;
  color: var(--rd, #b7c3bb);
}
.boca-status[hidden] {
  display: none;
}
.boca-btns {
  display: flex;
  gap: 10px;
}
.boca-btns button {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid var(--ra, #a6dab6);
  background: transparent;
  color: var(--ra, #a6dab6);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.boca-btns .boca-play {
  background: var(--ra, #a6dab6);
  color: var(--rof, #10231a);
}
.boca-btns button:disabled {
  opacity: 0.45;
  cursor: default;
}
.boca-btns svg {
  width: 16px;
  height: 16px;
}
.boca-chip:focus-visible,
.boca-btns button:focus-visible,
.boca-x:focus-visible {
  outline: 2px solid var(--ra, #a6dab6);
  outline-offset: 2px;
}

/* Boca: sons de teste do administrador (Original x Teste, Ouvir normal) */
.boca-test {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--rl, rgba(214, 235, 222, 0.15));
}
.boca-test[hidden] {
  display: none;
}
.boca-test-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rd, #b7c3bb);
}
.boca-test-btns {
  display: flex;
  gap: 8px;
}
.boca-test-btns button {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--rl, rgba(214, 235, 222, 0.2));
  background: transparent;
  color: var(--ri, #e6e1d6);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0 6px;
  cursor: pointer;
}
.boca-test-btns button[aria-pressed="true"] {
  background: var(--ra, #a6dab6);
  border-color: var(--ra, #a6dab6);
  color: var(--rof, #10231a);
}
.boca-test-btns button:focus-visible {
  outline: 2px solid var(--ra, #a6dab6);
  outline-offset: 2px;
}
.boca-chip.is-test {
  position: relative;
}
.boca-chip.is-test::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0b429;
}

/* ---- Caixa de confirmação própria (no lugar do confirm() nativo) ---- */
.confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.confirm-dialog-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--bg-panel);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 18px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.confirm-dialog-message {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}
.confirm-dialog-actions {
  display: flex;
  gap: 10px;
}
.confirm-dialog-actions .sheet-btn {
  flex: 1;
  min-height: 46px;
  font-size: 0.9rem;
}
.confirm-dialog-ok {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #11151c;
  border: none;
}

/* ===== 2.50.54 — tela "Sons": os 44 sons do inglês em cartões (src/sons.js) =====
   Tudo em uma tela, sem rolagem. As medidas são em em: o tamanho da letra acompanha a altura
   da janela e src/sons.js reduz a letra (fit) se algo ainda passar da altura. */
.hx-mode-icon.is-clay {
  background: #a65a47;
}
.hx-mode[data-mode="sons"] {
  grid-column: 1 / -1;
  border-color: rgba(143, 202, 160, 0.4);
}
.sons-view {
  position: fixed;
  inset: 0;
  z-index: 30;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-size: clamp(12.5px, 2.15vh, 16px);
  font-size: clamp(12.5px, 2.15dvh, 16px);
  line-height: 1.35;
  font-family: var(--h-font);
  color: var(--h-ink);
  background: linear-gradient(180deg, var(--h-bg) 0%, var(--h-bg-2) 100%);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.sons-view [hidden] {
  display: none !important;
}
.sons-view button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sons-view button:focus-visible {
  outline: 3px solid rgba(143, 202, 160, 0.5);
  outline-offset: 2px;
}
.sons-wrap {
  max-width: 460px;
  margin: 0 auto;
  height: 100%;
  padding: 0.7em 1em 0.8em;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sons-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sons-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.6em;
  flex: none;
}
.sons-bar h2 {
  flex: 1;
  margin: 0;
  font-size: 1em;
  font-weight: 700;
}
.sons-ib {
  width: 2.6em;
  height: 2.6em;
  min-width: 44px;
  min-height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--h-line);
  background: var(--h-card);
}
.sons-ib svg {
  width: 1.2em;
  height: 1.2em;
}
.sons-ib[aria-pressed="false"] {
  opacity: 0.55;
}
.sons-t {
  margin: 0 0 0.35em;
  flex: none;
  font-family: var(--h-font);
  font-weight: 800;
  font-size: 1.9em;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.sons-t em {
  font-style: normal;
  color: var(--h-green);
}
.sons-cp {
  margin: 0 0 0.7em;
  flex: none;
  font-size: 0.9em;
  color: var(--h-dim);
}
.sons-stats {
  display: flex;
  gap: 0.6em;
  margin: 0.4em 0 0.7em;
  flex: none;
}
.sons-stat {
  flex: 1;
  padding: 0.55em 0.4em;
  text-align: center;
  border-radius: 1em;
  background: var(--h-card);
  border: 1px solid var(--h-line);
}
.sons-stat b {
  display: block;
  font: 400 2em/1 Georgia, "Iowan Old Style", serif;
}
.sons-stat span {
  font-size: 0.74em;
  color: var(--h-dim);
}
.sons-stat.is-total b {
  color: var(--h-green);
}
.sons-box {
  flex: none;
  margin-bottom: 0.6em;
  padding: 0.7em 0.8em;
  border-radius: 1em;
  background: var(--h-card);
  border: 1px solid var(--h-line);
  font-size: 0.82em;
  line-height: 1.38;
  color: var(--h-dim);
}
.sons-box b {
  color: var(--h-ink);
}
.sons-box.is-lead {
  font-size: 1.02em;
  line-height: 1.45;
  color: #c9d3cc;
}
.sons-sp {
  flex: 1;
  min-height: 0;
}
.sons-go {
  flex: none;
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  border: 0;
  border-radius: 1em;
  background: var(--h-green);
  color: var(--h-on-green);
  font-weight: 800;
  font-size: 1.02em;
}
.sons-go svg {
  width: 1.2em;
  height: 1.2em;
}
.sons-ghost {
  flex: none;
  width: 100%;
  min-height: 48px;
  margin-top: 0.5em;
  border-radius: 1em;
  border: 1px solid var(--h-line);
  background: var(--h-card);
  font-weight: 700;
  font-size: 0.92em;
}
.sons-prog {
  display: flex;
  gap: 4px;
  margin-bottom: 0.2em;
  flex: none;
}
.sons-prog i {
  display: block;
  height: 5px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.sons-prog i b {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--h-green);
}
.sons-prog .is-v {
  flex: 20;
}
.sons-prog .is-c {
  flex: 24;
}
.sons-pl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
  flex: none;
  font-size: 0.66em;
  color: var(--h-dim);
}
.sons-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.8em;
  border-radius: 1.3em;
  background: var(--h-card);
  border: 1px solid var(--h-line);
  touch-action: pan-y;
}
.sons-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em;
  flex: none;
}
.sons-pill {
  padding: 2px 0.6em;
  border-radius: 999px;
  border: 1px solid var(--h-line);
  font-size: 0.66em;
  color: var(--h-dim);
  white-space: nowrap;
}
.sons-pill.is-kind {
  color: var(--h-green);
  border-color: rgba(143, 202, 160, 0.4);
}
.sons-pill.is-new {
  color: #f1c9a8;
  border-color: rgba(241, 201, 168, 0.4);
}
.sons-hero {
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex: none;
}
.sons-sym {
  width: 4.2em;
  height: 4.2em;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.2em;
  background: #4f9670;
  color: #f4fbf6;
  font: 400 2em/1 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}
.sons-sym.is-long {
  font-size: 1.6em;
}
.sons-wd {
  font: 400 2.3em/1.05 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  letter-spacing: 0.01em;
}
.sons-wd span {
  opacity: 0.5;
}
.sons-wd b {
  font-weight: 400;
  color: var(--h-green);
  border-bottom: 3px solid var(--h-green);
}
.sons-wi {
  margin-top: 0.15em;
  font-size: 0.95em;
  color: var(--h-dim);
}
.sons-wi b {
  padding: 0 3px;
  border-radius: 6px;
  background: rgba(143, 202, 160, 0.22);
  color: var(--h-ink);
  font-weight: 700;
}
.sons-face {
  flex: 1;
  min-height: 7em;
  display: flex;
  overflow: hidden;
  border-radius: 0.9em;
  background: #d9a98d;
}
.sons-face svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sons-tip {
  flex: none;
  margin: 0;
  font-size: 0.86em;
  line-height: 1.35;
}
.sons-status {
  flex: none;
  margin: 0;
  font-size: 0.8em;
  color: #f1c9a8;
}
.sons-btns {
  display: flex;
  gap: 0.45em;
  flex: none;
}
.sons-btns button {
  flex: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  border-radius: 0.9em;
  border: 1px solid var(--h-line);
  background: var(--h-card-2);
  font-size: 0.84em;
  font-weight: 700;
}
.sons-btns button.is-main {
  background: var(--h-green);
  border-color: var(--h-green);
  color: var(--h-on-green);
}
.sons-btns button[aria-pressed="true"] {
  background: rgba(143, 202, 160, 0.22);
  border-color: var(--h-green);
}
.sons-btns svg {
  width: 1.1em;
  height: 1.1em;
}
.sons-nav {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.55em;
  flex: none;
}
.sons-nav button {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  border-radius: 0.9em;
  border: 1px solid var(--h-line);
  background: var(--h-card);
  font-size: 0.88em;
  font-weight: 700;
}
.sons-nav .sons-idx {
  flex: none;
  min-width: 7em;
  background: var(--h-card-2);
}
.sons-nav svg {
  width: 1.1em;
  height: 1.1em;
}
.sons-sheet {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5, 9, 8, 0.78);
}
.sons-panel {
  width: 100%;
  max-width: 460px;
  max-height: 94vh;
  max-height: 94dvh;
  overflow: auto;
  padding: 0.8em 0.9em calc(0.9em + env(safe-area-inset-bottom, 0px));
  border-radius: 1.3em 1.3em 0 0;
  background: #142019;
  border: 1px solid var(--h-line);
}
.sons-panel h3 {
  margin: 0;
  font-size: 1em;
}
.sons-panel p {
  margin: 0.2em 0 0.5em;
  font-size: 0.76em;
  color: var(--h-dim);
}
.sons-gh {
  margin: 0.5em 0 0.35em;
  font-size: 0.74em;
  font-weight: 800;
  color: var(--h-green);
}
.sons-gc {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35em;
}
.sons-gc button {
  position: relative;
  min-height: 44px;
  border-radius: 0.7em;
  border: 1px solid var(--h-line);
  background: var(--h-card);
  font: 400 1.05em Georgia, serif;
}
.sons-gc button small {
  position: absolute;
  top: 2px;
  left: 5px;
  font: 0.55em var(--h-font);
  color: var(--h-dim);
}
.sons-gc button.is-cur {
  border-color: var(--h-green);
  background: rgba(143, 202, 160, 0.2);
}
.sons-done {
  align-items: center;
  text-align: center;
}
.sons-ok {
  width: 6em;
  height: 6em;
  margin: auto 0 1em;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #3c7a5b;
  color: #f4fbf6;
  animation: sons-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.sons-ok svg {
  width: 3em;
  height: 3em;
}
.sons-done .sons-t {
  font-size: 1.7em;
}
.sons-done .sons-cp {
  max-width: 24em;
}
.sons-done .sons-box {
  text-align: left;
}
.sons-done .sons-go,
.sons-done .sons-ghost {
  max-width: 24em;
}
.sons-done .sons-sp {
  flex: 0 0 0.6em;
}
.sons-done .sons-end {
  margin-bottom: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@keyframes sons-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sons-ok {
    animation: none;
  }
}

/* ---- Ajustes: efeito de clique (2.50.60) ----
   O app desliga o destaque nativo do toque (-webkit-tap-highlight-color), então os botões
   dos Ajustes não davam nenhum sinal ao apertar. Agora afundam um pouco e mudam de cor. */
.settings-sheet .sheet-close-btn,
.settings-sheet .font-btn,
.settings-sheet .theme-opt,
.settings-sheet .newday-btn,
.settings-sheet .sheet-btn,
.settings-sheet .switch,
.confirm-dialog-actions .sheet-btn {
  transition:
    transform 0.09s ease,
    opacity 0.09s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    background 0.18s ease;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.settings-sheet .sheet-close-btn:not(:disabled):active,
.settings-sheet .font-btn:not(:disabled):active,
.settings-sheet .theme-opt:not(:disabled):active,
.settings-sheet .newday-btn:not(:disabled):active,
.settings-sheet .sheet-btn:not(:disabled):active,
.confirm-dialog-actions .sheet-btn:not(:disabled):active {
  transform: scale(0.94);
  opacity: 0.8;
  border-color: var(--accent, var(--ra));
  color: var(--accent, var(--ra));
}
.settings-sheet .sheet-btn-accent:not(:disabled):active {
  color: #11151c;
  filter: brightness(0.9);
}
.settings-sheet .switch:not(:disabled):active {
  transform: scale(0.94);
}
.settings-sheet .switch:not(:disabled):active::after {
  width: 24px;
}
.settings-sheet .switch[aria-checked="true"]:not(:disabled):active::after {
  transform: translateX(14px);
}

/* ---- Tour guiado (2.50.61) ---- */
.tour-root {
  position: fixed;
  inset: 0;
  z-index: 2600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.tour-hole {
  position: fixed;
  border: 2px solid var(--accent, #8fcaa0);
  border-radius: 16px;
  box-shadow: 0 0 0 2400px rgba(8, 13, 10, 0.74);
  pointer-events: none;
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.tour-ball {
  position: fixed;
  background: #fffdf8;
  color: #1b1f1c;
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.tour-pill {
  display: inline-block;
  background: #dff1e4;
  color: #2c6246;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 99px;
}
.tour-title {
  margin: 6px 0 4px;
  font-size: 15.5px;
  line-height: 1.25;
  font-weight: 700;
}
.tour-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #3b423d;
}
.tour-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tour-skip {
  background: none;
  border: 0;
  color: #6a726c;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 6px;
  cursor: pointer;
}
.tour-skip[hidden] {
  display: none;
}
.tour-next {
  margin-left: auto;
  border: 0;
  background: linear-gradient(135deg, #8fcaa0, #6fb487);
  color: #10241a;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 99px;
  min-height: 40px;
  cursor: pointer;
  transition: transform 0.09s ease, opacity 0.09s ease;
}
.tour-next:active,
.tour-skip:active {
  transform: scale(0.94);
  opacity: 0.8;
}
.tour-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fffdf8;
  transform: rotate(45deg);
}
.tour-arrow.is-up {
  top: -7px;
}
.tour-arrow.is-down {
  bottom: -7px;
}
@media (prefers-reduced-motion: reduce) {
  .tour-hole {
    transition: none;
  }
}

.tour-finger {
  position: fixed;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(166, 218, 182, 0.45);
  border: 2px solid var(--accent, #8fcaa0);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .tour-finger {
    animation: tour-tap 1.3s ease-in-out infinite;
  }
}
@keyframes tour-tap {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(0.86); }
}


/* ============================================================
   FREQUENCY 2.0 — FINAL LAYOUT SYSTEM
   Consolidated visual layer: hierarchy, rhythm, responsive grid,
   study cards, states and the Sounds experience.
   ============================================================ */
:root {
  --f-bg: #0a1210;
  --f-bg-soft: #0e1915;
  --f-panel: rgba(20, 34, 28, .86);
  --f-panel-solid: #14231d;
  --f-panel-2: #1a2c24;
  --f-line: rgba(214, 235, 222, .11);
  --f-line-strong: rgba(143, 202, 160, .30);
  --f-text: #f0eee7;
  --f-text-2: #b5c0b9;
  --f-text-3: #7f8e86;
  --f-green: #a8dcb6;
  --f-green-2: #8fcaa0;
  --f-green-dark: #173124;
  --f-max: 1180px;
  --f-radius: 18px;
  --f-radius-sm: 13px;
  --f-shadow: 0 22px 60px rgba(0,0,0,.24);
}

/* ---------- Home shell ---------- */
.home-view {
  background:
    radial-gradient(circle at 82% 12%, rgba(116,164,128,.13), transparent 28%),
    linear-gradient(180deg, #0c1713 0%, #0a1210 62%, #08100e 100%) !important;
  color: var(--f-text) !important;
}
.home-view .hx-bg {
  top: 0;
  max-width: none;
  height: min(58vw, 560px);
  opacity: .92;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.9) 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.9) 42%, transparent 100%);
}
.home-view .hx {
  max-width: var(--f-max);
  padding: calc(22px + var(--safe-top)) 24px calc(42px + var(--safe-bottom));
}
.home-view .hx-top {
  min-height: 48px;
  align-items: center;
  padding-bottom: 6px;
}
.home-view .hx-brand { gap: 12px; }
.home-view .hx-name { font-size: 1.55rem; letter-spacing: -.025em; }
.home-view .hx-tag {
  color: var(--f-text-3);
  font-size: .72rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.home-view .hx-hero {
  margin-top: clamp(48px, 9vh, 92px);
  max-width: 650px;
}
.home-view .hx-rule { width: 34px; height: 3px; margin-bottom: 16px; }
.home-view .hx-eyebrow,
.home-view .hx-section-kicker {
  margin: 0 0 10px;
  font: 700 .68rem/1.2 var(--h-font);
  letter-spacing: .14em;
  color: var(--f-green-2);
}
.home-view .hx-title {
  margin-bottom: 16px;
  max-width: 12ch;
  font-size: clamp(2.45rem, 6.4vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.home-view .hx-title em { color: var(--f-green); }
.home-view .hx-copy {
  max-width: 48ch;
  color: #c0cbc4;
  font-size: 1rem;
  line-height: 1.65;
}
.home-view .hx-actions {
  max-width: 650px;
  margin-top: 30px;
  gap: 10px;
}
.home-view .hx-go {
  min-height: 62px;
  padding: 0 22px;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(125,187,144,.16), inset 0 1px 0 rgba(255,255,255,.28);
}
.home-view .hx-go span { font-size: 1rem; }
.home-view .hx-go-sub { margin: -2px 4px 0; color: var(--f-text-3); font-size: .76rem; }
.home-view .hx-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: #63716a;
  font: 600 .67rem/1 var(--h-font);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.home-view .hx-or::before,
.home-view .hx-or::after { content:""; height:1px; flex:1; background:var(--f-line); }
.home-view .hx-choose {
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid var(--f-line);
  background: rgba(16,28,23,.58);
  color: var(--f-text-2);
}
.home-view .hx-choose:hover { border-color: var(--f-line-strong); color: var(--f-text); }

/* ---------- Progress: primary decision surface ---------- */
.home-view .hx-progress {
  margin-top: 34px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(25,43,35,.92), rgba(15,27,22,.90));
  border-color: var(--f-line);
  box-shadow: var(--f-shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.home-view .hx-progress-head { gap: 18px; }
.home-view .hx-ring { width: 86px; height: 86px; }
.home-view .hx-ring circle { stroke-width: 2.8; }
.home-view .hx-ring-pct { font-size: 1.12rem; }
.home-view .hx-progress-title { font-size: 1.12rem; letter-spacing: -.01em; }
.home-view .hx-progress-count { color: var(--f-text-3); }
.home-view .hx-progress-count strong { color: var(--f-text); }
.home-view .hx-bar { height: 6px; background: rgba(255,255,255,.07); }
.home-view .hx-stats { margin-top: 18px; padding-top: 16px; }
.home-view .hx-stat { padding: 0 12px; }
.home-view .hx-stat-value { font-size: .9rem; }
.home-view .hx-stat-label { font-size: .67rem; text-transform: uppercase; letter-spacing: .04em; }
.home-view .hx-review { margin-top: 14px; }

/* ---------- Study areas ---------- */
.home-view .hx-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 38px;
  margin-bottom: 13px;
}
.home-view .hx-section-head h2 {
  margin: 0;
  font: 700 1.35rem/1.1 var(--h-font);
  letter-spacing: -.025em;
  color: var(--f-text);
}
.home-view .hx-section-kicker { display:block; margin-bottom:7px; }
.home-view .hx-section-help {
  color: var(--f-text-3);
  font: 500 .72rem/1.4 var(--h-font);
  text-align: right;
}
.home-view .hx-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 0;
}
.home-view .hx-mode {
  min-height: 190px;
  padding: 18px 18px 17px;
  border-radius: var(--f-radius);
  background: linear-gradient(145deg, rgba(23,39,32,.88), rgba(15,27,22,.84));
  border-color: var(--f-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.home-view .hx-mode[data-mode="sons"] { grid-column: auto; }
.home-view .hx-mode-icon {
  width: 42px; height: 42px; margin-bottom: 20px; border-radius: 13px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.home-view .hx-mode-title { font-size: 1rem; margin-bottom: 5px; }
.home-view .hx-mode-desc { max-width: 34ch; font-size: .78rem; line-height: 1.48; color: var(--f-text-2); }
.home-view .hx-mode-meta {
  display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 15px;
  color: var(--f-text-3); font: 600 .65rem/1 var(--h-font); letter-spacing: .02em;
}
.home-view .hx-mode-meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--f-green-2); }
.home-view .hx-mode .hx-arrow { right: 16px; top: 18px; bottom: auto; width: 18px; height: 18px; color: #688676; }
.home-view .hx-mode:hover .hx-arrow { color: var(--f-green); }
.home-view .hx-mode.is-locked { opacity: .62; filter: saturate(.72); }
.home-view .hx-mode.is-locked .hx-mode-icon { filter: grayscale(.3); }
.home-view .hx-mode .hx-lock { position:absolute; top:17px; right:16px; color:var(--f-text-3); }
.home-view .hx-mode .hx-unlock { margin-top:8px; color:#bda987; font:500 .62rem/1.35 var(--h-font); }
.home-view .hx-foot { margin-top: 28px; color: #52625a; }

/* ---------- Desktop composition ---------- */
@media (min-width: 900px) {
  .home-view .hx {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    column-gap: clamp(38px, 6vw, 90px);
    align-items: start;
  }
  .home-view .hx-top { grid-column: 1 / -1; }
  .home-view .hx-hero { grid-column: 1; grid-row: 2; margin-top: clamp(72px, 11vh, 120px); }
  .home-view .hx-actions { grid-column: 1; grid-row: 3; }
  .home-view .hx-progress { grid-column: 2; grid-row: 2 / span 2; margin-top: clamp(72px, 11vh, 120px); align-self: start; }
  .home-view .hx-section-head { grid-column: 1 / -1; grid-row: 4; }
  .home-view .hx-grid { grid-column: 1 / -1; grid-row: 5; grid-template-columns: repeat(5, minmax(0,1fr)); }
  .home-view .hx-mode { min-height: 205px; }
  .home-view .hx-foot { grid-column: 1 / -1; grid-row: 6; }
  .home-view .hx-bg { height: 680px; }
}
@media (min-width: 1180px) {
  .home-view .hx { padding-left: 0; padding-right: 0; }
  .home-view .hx-grid { gap: 12px; }
}

/* ---------- Mobile compression ---------- */
@media (max-width: 600px) {
  .home-view .hx { padding-left: 18px; padding-right: 18px; }
  .home-view .hx-bg { height: 480px; opacity: .72; }
  .home-view .hx-hero { margin-top: 42px; }
  .home-view .hx-title { font-size: clamp(2.3rem, 12vw, 3.1rem); }
  .home-view .hx-progress { margin-top: 28px; padding: 17px; }
  .home-view .hx-ring { width: 74px; height: 74px; }
  .home-view .hx-section-head { margin-top: 30px; }
  .home-view .hx-section-help { display:none; }
  .home-view .hx-grid { gap: 8px; }
  .home-view .hx-mode { min-height: 180px; padding: 15px; }
  .home-view .hx-mode-desc { font-size: .75rem; }
}
@media (max-width: 390px) {
  .home-view .hx { padding-left: 14px; padding-right: 14px; }
  .home-view .hx-title { font-size: 2.15rem; }
  .home-view .hx-copy { font-size: .92rem; }
  .home-view .hx-stats { gap: 0; }
  .home-view .hx-stat { padding: 0 7px; gap: 5px; }
  .home-view .hx-stat svg { width: 18px; height: 18px; }
  .home-view .hx-stat-value { font-size: .82rem; }
  .home-view .hx-grid { grid-template-columns: 1fr; }
  .home-view .hx-mode { min-height: 150px; }
}

/* ---------- Study list / navigation refinement ---------- */
.practice-view main { max-width: 820px; }
.practice-view .entry {
  padding: 20px 2px;
  border-bottom-color: rgba(214,235,222,.08);
}
.practice-view .word { font-size: clamp(1.3rem, 3vw, 1.65rem); }
.practice-view .translation { color: var(--f-text-2); }
.practice-view .entry-actions { gap: 7px; }
.practice-view .action-btn { border-radius: 11px; }
.practice-view .ipa-box,
.practice-view .practice-box,
.practice-view .voice-box {
  border-radius: 15px;
  border-color: var(--f-line);
  background: rgba(20,34,28,.62);
}
.practice-view .filter { border-radius: 999px; }
.practice-view .filter[aria-pressed="true"] { box-shadow: 0 4px 14px rgba(125,187,144,.12); }

/* ---------- Bottom nav ---------- */
.practice-view .bottom-nav {
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(100%, 820px);
  padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + var(--safe-bottom));
  border: 1px solid rgba(214,235,222,.08);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: rgba(9,17,14,.92);
  box-shadow: 0 -14px 36px rgba(0,0,0,.24);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.practice-view .nav-btn { min-height: 52px; border-radius: 14px; }
.practice-view .nav-btn svg { width: 20px; height: 20px; }
.practice-view .nav-btn span { font-size: .67rem; }
.practice-view .nav-btn.active { background: rgba(143,202,160,.10); color: var(--f-green); }
.practice-view .nav-btn.active::after { bottom: 3px; width: 14px; }

/* ---------- Sheets and dialogs ---------- */
.settings-sheet,
.confirm-dialog,
.mode-picker-panel {
  box-shadow: 0 -24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03);
}
.sheet-handle { background: #4a5a51; }

/* ---------- Sounds: make the learning card the hero ---------- */
.sons-view {
  background:
    radial-gradient(circle at 75% 12%, rgba(143,202,160,.10), transparent 30%),
    linear-gradient(180deg, #0b1511 0%, #09110f 100%);
}
.sons-wrap { max-width: 520px; padding-left: 14px; padding-right: 14px; }
.sons-bar { margin-bottom: .7em; }
.sons-bar h2 { font-size: 1.05em; letter-spacing: -.015em; }
.sons-ib { background: rgba(22,38,31,.86); border-color: var(--f-line); }
.sons-t { font-size: 2.05em; letter-spacing: -.045em; }
.sons-cp { color: var(--f-text-3); }
.sons-prog { gap: 5px; margin-bottom: .25em; }
.sons-prog i { height: 4px; background: rgba(255,255,255,.08); }
.sons-card {
  padding: .9em;
  gap: .62em;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(25,43,35,.96), rgba(14,26,21,.94));
  border-color: var(--f-line);
  box-shadow: var(--f-shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.sons-meta { padding-bottom: .05em; }
.sons-pill { background: rgba(255,255,255,.025); }
.sons-hero { gap: 1em; }
.sons-sym {
  width: 4.65em; height: 4.65em; border-radius: 16px;
  background: linear-gradient(145deg, #5a9e78, #3f765b);
  box-shadow: 0 10px 22px rgba(63,118,91,.22);
}
.sons-wd { font-size: 2.45em; letter-spacing: -.02em; }
.sons-face {
  min-height: 9em;
  border-radius: 15px;
  background: linear-gradient(145deg, #e2b398, #c8896e);
  box-shadow: inset 0 0 0 1px rgba(61,20,24,.08);
}
.sons-tip {
  padding: .72em .8em;
  border-radius: 12px;
  background: rgba(143,202,160,.055);
  border: 1px solid rgba(143,202,160,.10);
  color: #c9d4cd;
}
.sons-btns { gap: 8px; }
.sons-btns button { min-height: 48px; border-radius: 13px; background: #1a2c24; }
.sons-btns button.is-main { background: linear-gradient(180deg,#a8dcb6,#8fcaa0); }
.sons-nav { gap: 8px; }
.sons-nav button { min-height: 46px; border-radius: 13px; }
.sons-nav .sons-idx { color: var(--f-text-2); }

/* ---------- Consistent states ---------- */
.hx-mode.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,.012) 8px 9px);
  pointer-events: none;
}

/* ---------- Touch targets / motion ---------- */
@media (hover: hover) {
  .home-view .hx-mode,
  .home-view .hx-go,
  .home-view .hx-choose,
  .sons-btns button,
  .sons-nav button { transition: transform .16s ease, border-color .16s ease, background .16s ease, filter .16s ease; }
  .home-view .hx-mode:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035); }
  .home-view .hx-go:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-view .hx-mode:hover,
  .home-view .hx-go:hover { transform: none; }
}

/* ================================================================
   FREQUENCY 2.1 — PRODUCT POLISH
   Micro-hierarchy, tactile feedback, focus states and responsive density.
   ================================================================ */

:root {
  --f-green-soft: #b8dfbd;
  --f-green-wash: rgba(143,202,160,.085);
  --f-surface-2: rgba(21,37,30,.78);
  --f-surface-3: rgba(27,46,37,.68);
  --f-line-strong: rgba(196,224,205,.16);
  --f-shadow-soft: 0 18px 48px rgba(0,0,0,.18);
}

/* Global tactile language */
button, select, input { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(184,223,189,.88);
  outline-offset: 3px;
}

/* ---------- Home: editorial hero ---------- */
.home-view .hx-top { position: relative; z-index: 3; }
.home-view .hx-brand { transition: opacity .2s ease, transform .2s ease; }
.home-view .hx-brand:hover { transform: translateY(-1px); }
.home-view .hx-tag {
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .72;
}
.home-view .hx-hero { max-width: 720px; }
.home-view .hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid rgba(184,223,189,.10);
  border-radius: 999px;
  background: rgba(10,22,17,.38);
  color: #9bb8a4;
  backdrop-filter: blur(12px);
}
.home-view .hx-eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--f-green-soft);
  box-shadow: 0 0 0 4px rgba(184,223,189,.08);
}
.home-view .hx-title {
  text-wrap: balance;
  text-shadow: 0 10px 34px rgba(0,0,0,.20);
}
.home-view .hx-copy { max-width: 48ch; text-wrap: pretty; }

/* ---------- Home: primary action ---------- */
.home-view .hx-go {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 58px;
  border: 1px solid rgba(218,241,220,.20);
  box-shadow: 0 14px 32px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.22);
}
.home-view .hx-go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.13) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
@media (hover:hover) {
  .home-view .hx-go:hover::before { transform: translateX(120%); }
}
.home-view .hx-go:active { transform: translateY(1px) scale(.995); }
.home-view .hx-go.is-complete { filter: saturate(.88); }
.home-view .hx-go-sub {
  min-height: 1.3em;
  margin-top: 8px;
  color: #7f9688;
  font-size: .72rem;
  line-height: 1.4;
}
.home-view .hx-go-sub strong { color: #b7cfbd; font-weight: 700; }

/* ---------- Home: progress card ---------- */
.home-view .hx-progress {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(143,202,160,.10), transparent 38%),
    linear-gradient(145deg, rgba(23,42,33,.92), rgba(12,23,18,.90));
  box-shadow: var(--f-shadow-soft), inset 0 1px 0 rgba(255,255,255,.035);
}
.home-view .hx-progress::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -100px;
  top: -110px;
  border: 1px solid rgba(184,223,189,.08);
  border-radius: 50%;
  pointer-events: none;
}
.home-view .hx-ring svg { overflow: visible; }
.home-view .hx-ring-bar {
  transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);
}
.home-view .hx-stat { transition: background .18s ease; border-radius: 12px; }
.home-view .hx-stat:hover { background: rgba(255,255,255,.025); }
.home-view .hx-next { color: #8ca597; }
.home-view .hx-next strong { color: #b9d9c1; }
.home-view .hx-review {
  border-color: rgba(184,223,189,.12);
  background: rgba(143,202,160,.055);
}
.home-view .hx-review:hover { background: rgba(143,202,160,.095); }

/* ---------- Home: learning cards ---------- */
.home-view .hx-section-head { align-items: end; }
.home-view .hx-section-kicker { letter-spacing: .16em; }
.home-view .hx-mode {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.home-view .hx-mode::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(184,223,189,.035), transparent 52%);
  pointer-events: none;
}
.home-view .hx-mode::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--f-green-soft) 0 28%, rgba(255,255,255,.055) 28% 100%);
  opacity: .55;
  transform-origin: left;
}
.home-view .hx-mode:nth-child(2)::after { background: linear-gradient(90deg, var(--f-green-soft) 0 20%, rgba(255,255,255,.055) 20% 100%); }
.home-view .hx-mode:nth-child(3)::after { background: linear-gradient(90deg, var(--f-green-soft) 0 18%, rgba(255,255,255,.055) 18% 100%); }
.home-view .hx-mode:nth-child(4)::after { background: linear-gradient(90deg, var(--f-green-soft) 0 12%, rgba(255,255,255,.055) 12% 100%); }
.home-view .hx-mode:nth-child(5)::after { background: linear-gradient(90deg, var(--f-green-soft) 0 10%, rgba(255,255,255,.055) 10% 100%); }
.home-view .hx-mode-icon { transition: transform .18s ease, filter .18s ease; }
.home-view .hx-mode:hover .hx-mode-icon { transform: scale(1.045); }
.home-view .hx-mode-title { letter-spacing: -.015em; }
.home-view .hx-mode-desc { text-wrap: pretty; }
.home-view .hx-mode-meta { text-transform: uppercase; letter-spacing: .065em; }
.home-view .hx-mode-meta i { box-shadow: 0 0 0 4px rgba(143,202,160,.06); }
.home-view .hx-mode.is-locked::after { opacity: .3; }

/* ---------- Practice: turn lists into calm study surfaces ---------- */
.practice-view main { scrollbar-gutter: stable; }
.practice-view header {
  box-shadow: 0 8px 26px rgba(0,0,0,.14);
}
.practice-view .title-row { min-height: 58px; }
.practice-view .mini-progress-row {
  border-top: 1px solid rgba(214,235,222,.045);
  background: rgba(8,16,13,.72);
}
.practice-view .mini-progress-track { box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.practice-view .filter {
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.practice-view .filter:active { transform: scale(.97); }
.practice-view .entry {
  position: relative;
  transition: background .18s ease, border-color .18s ease;
}
.practice-view .entry::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .18s ease;
}
.practice-view .entry.is-known::before { background: rgba(143,202,160,.65); }
.practice-view .entry:hover { background: rgba(255,255,255,.012); }
.practice-view .known-badge { box-shadow: 0 0 0 4px rgba(143,202,160,.055); }
.practice-view .action-btn { transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.practice-view .action-btn:active { transform: scale(.94); }
.practice-view .word-pron, .practice-view .sentence-pron { color: #89a493; }

/* ---------- Grammar ---------- */
.grammar-view .grammar-item {
  border-color: rgba(214,235,222,.085);
  background: rgba(17,30,24,.48);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.grammar-view .grammar-item:hover { transform: translateY(-1px); background: rgba(24,41,33,.62); }
.grammar-view .grammar-item:active { transform: translateY(0) scale(.997); }
.grammar-view .gi-play { transition: transform .14s ease, background .14s ease; }
.grammar-view .gi-play:active { transform: scale(.92); }

/* ---------- Bottom navigation: clear active state ---------- */
.practice-view .bottom-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 48px;
  height: 1px;
  transform: translateX(-50%);
  background: rgba(184,223,189,.25);
}
.practice-view .nav-btn { transition: color .16s ease, background .16s ease, transform .16s ease; }
.practice-view .nav-btn:active { transform: scale(.94); }

/* ---------- Sheets: premium surfaces ---------- */
.settings-sheet, .confirm-dialog, .mode-picker-panel {
  border-color: rgba(214,235,222,.11);
}
.mode-picker-list button {
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.mode-picker-list button:active { transform: scale(.985); }

/* ---------- Mobile density ---------- */
@media (max-width: 600px) {
  .home-view .hx-hero { max-width: 100%; }
  .home-view .hx-eyebrow { font-size: .58rem; }
  .home-view .hx-copy { max-width: 38ch; }
  .home-view .hx-progress { border-radius: 18px; }
  .home-view .hx-mode { min-height: 166px; }
  .home-view .hx-mode::after { left: 15px; right: 15px; bottom: 11px; }
  .practice-view .entry { padding-top: 18px; padding-bottom: 18px; }
}
@media (max-width: 390px) {
  .home-view .hx-hero { margin-top: 34px; }
  .home-view .hx-eyebrow { padding: 5px 8px; }
  .home-view .hx-mode { min-height: 142px; }
  .home-view .hx-mode-desc { max-width: 30ch; }
}

@media (min-width: 900px) {
  .home-view .hx-progress { max-width: 560px; margin-left: auto; }
  .home-view .hx-actions { max-width: 620px; }
  .home-view .hx-mode { min-height: 214px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-view .hx-ring-bar,
  .home-view .hx-go::before,
  .home-view .hx-mode,
  .home-view .hx-mode-icon,
  .practice-view .entry,
  .practice-view .action-btn,
  .grammar-view .grammar-item,
  .grammar-view .gi-play,
  .practice-view .nav-btn { transition: none !important; }
}

/* ---------- Streak feedback ---------- */
.home-view.has-streak .hx-stat:first-child svg {
  filter: drop-shadow(0 0 8px rgba(184,223,189,.20));
}
.home-view.has-long-streak .hx-stat:first-child svg {
  animation: freq-streak-pulse 2.8s ease-in-out infinite;
}
@keyframes freq-streak-pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-view.has-long-streak .hx-stat:first-child svg { animation: none; }
}


/* ================================================================
   Frequency 2.2 — product polish
   ================================================================ */
:root {
  --f-focus: rgba(184,223,189,.52);
  --f-surface-strong: rgba(20,38,30,.88);
  --f-surface-glass: rgba(12,25,19,.72);
  --f-line-soft: rgba(214,235,222,.085);
  --f-green-glow: rgba(184,223,189,.14);
}

/* A quieter, more tactile interaction language. */
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--f-focus);
  outline-offset: 3px;
}

/* Home hero: make the first screen feel intentional rather than dense. */
.home-view .hx-hero {
  isolation: isolate;
}
.home-view .hx-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(42vw, 360px);
  height: min(42vw, 360px);
  right: -12%;
  top: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,223,189,.085), transparent 68%);
  pointer-events: none;
}
.home-view .hx-title {
  text-wrap: balance;
  max-width: 13ch;
}
.home-view .hx-copy {
  max-width: 46ch;
  text-wrap: pretty;
}

/* Cards gain a more physical surface without becoming glossy. */
.home-view .hx-mode {
  background:
    linear-gradient(145deg, rgba(28,49,39,.76), rgba(12,25,19,.72));
  border-color: rgba(214,235,222,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.028);
}
.home-view .hx-mode:hover {
  transform: translateY(-2px);
  border-color: rgba(184,223,189,.20);
  box-shadow: 0 16px 34px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.035);
}
.home-view .hx-mode:active {
  transform: translateY(0) scale(.992);
}
.home-view .hx-mode.is-locked {
  opacity: .68;
  filter: saturate(.78);
}
.home-view .hx-mode.is-locked:hover {
  transform: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.028);
}

/* Progress becomes the visual anchor of the home screen. */
.home-view .hx-progress {
  border-color: rgba(184,223,189,.13);
}
.home-view .hx-progress-count strong {
  letter-spacing: -.025em;
}
.home-view .hx-bar-fill {
  box-shadow: 0 0 14px rgba(184,223,189,.12);
}
.home-view .hx-stat {
  border: 1px solid transparent;
}
.home-view .hx-stat:hover {
  border-color: rgba(214,235,222,.055);
}

/* Primary continuation action: one unmistakable action per session. */
.home-view .hx-go {
  min-height: 64px;
  border: 1px solid rgba(236,250,239,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 0 0 0 rgba(184,223,189,0);
}
.home-view .hx-go:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,.22), 0 0 0 4px rgba(184,223,189,.055);
}
.home-view .hx-go:focus-visible {
  outline-color: rgba(234,249,237,.75);
}

/* Practice surfaces: clearer grouping and less visual noise. */
.practice-view .entry {
  border-color: var(--f-line-soft);
  background: linear-gradient(135deg, rgba(19,35,28,.58), rgba(10,20,16,.50));
}
.practice-view .entry:hover {
  border-color: rgba(184,223,189,.13);
  background: linear-gradient(135deg, rgba(24,43,34,.66), rgba(11,23,18,.58));
}
.practice-view .entry.is-known {
  background: linear-gradient(135deg, rgba(26,48,37,.62), rgba(11,24,18,.54));
}
.practice-view .action-btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* Empty/loading states: preserve the visual language when content is delayed. */
.freq-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.045);
  border-radius: 10px;
}
.freq-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent);
  animation: freq-skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes freq-skeleton-shimmer {
  to { transform: translateX(100%); }
}

/* Update bar is part of the product, not an alert bolted on afterward. */
.update-bar {
  border: 1px solid rgba(184,223,189,.18) !important;
  background: rgba(14,30,23,.96) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
}
.update-bar button {
  border-radius: 12px;
  font-weight: 750;
  transition: transform .14s ease, filter .14s ease;
}
.update-bar button:hover { filter: brightness(1.06); }
.update-bar button:active { transform: scale(.97); }

/* Bottom navigation gets a subtle glass separation from study content. */
.practice-view .bottom-nav {
  background: rgba(7,17,13,.88);
  border-top-color: rgba(214,235,222,.08);
  box-shadow: 0 -12px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(18px) saturate(1.08);
}
.practice-view .nav-btn.active {
  text-shadow: 0 0 14px rgba(184,223,189,.12);
}

/* Desktop: let the app breathe instead of merely scaling the mobile UI. */
@media (min-width: 1000px) {
  .home-view .hx-hero {
    padding-top: 72px;
  }
  .home-view .hx-grid {
    gap: 14px;
  }
  .home-view .hx-mode {
    min-height: 220px;
  }
  .home-view .hx-progress {
    box-shadow: 0 20px 48px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .freq-skeleton::after { animation: none; }
  .home-view .hx-mode,
  .home-view .hx-go,
  .update-bar button { transition: none !important; }
}

/* Frequency 2.4 — mapa de domínio e revisão inteligente */
.hx-mastery{margin:0 0 28px;padding:20px;border:1px solid rgba(255,255,255,.09);border-radius:26px;background:linear-gradient(145deg,rgba(22,38,33,.82),rgba(11,19,17,.74));box-shadow:0 18px 44px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(16px)}
.hx-mastery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.hx-mastery-head h2{margin:4px 0 5px;font-family:var(--font-serif,Georgia,serif);font-size:1.25rem;letter-spacing:-.025em}.hx-mastery-head p{max-width:590px;margin:0;font-size:.75rem;line-height:1.55;opacity:.55}.hx-mastery-badge{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(185,216,138,.2);border-radius:999px;background:rgba(185,216,138,.07);font-size:.67rem;font-weight:800;letter-spacing:.04em;color:var(--accent,#b9d88a)}
.hx-mastery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:18px}.hx-skill{padding:12px 12px 11px;border:1px solid rgba(255,255,255,.055);border-radius:16px;background:rgba(255,255,255,.025)}.hx-skill>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:9px}.hx-skill span{font-size:.71rem;opacity:.68}.hx-skill strong{font-size:.72rem;font-weight:800}.hx-skill-track{height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}.hx-skill-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent,#b9d88a),rgba(185,216,138,.48));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.hx-smart-review{display:flex;align-items:center;gap:12px;margin-top:11px;padding:12px 13px;border-radius:17px;background:rgba(185,216,138,.055);border:1px solid rgba(185,216,138,.12)}.hx-smart-review-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(185,216,138,.1);color:var(--accent,#b9d88a);font-size:1.05rem}.hx-smart-review-copy{display:grid;gap:2px;min-width:0;flex:1}.hx-smart-review-copy strong{font-size:.77rem}.hx-smart-review-copy span{font-size:.69rem;opacity:.6;line-height:1.35}.hx-smart-review-btn{border:1px solid rgba(185,216,138,.22);border-radius:11px;background:rgba(185,216,138,.1);color:inherit;padding:8px 11px;font:700 .68rem inherit;cursor:pointer;white-space:nowrap}.hx-smart-review-btn:hover{background:rgba(185,216,138,.16);transform:translateY(-1px)}
@media (max-width:760px){.hx-mastery{padding:16px;border-radius:21px}.hx-mastery-head{display:block}.hx-mastery-badge{display:inline-block;margin-top:11px}.hx-mastery-grid{grid-template-columns:1fr 1fr;gap:7px}.hx-skill{padding:10px}.hx-skill:last-child{grid-column:1/-1}.hx-smart-review{align-items:flex-start}.hx-smart-review-btn{margin-left:auto}}
@media (prefers-reduced-motion:reduce){.hx-skill-track i,.hx-smart-review-btn{transition:none}}

/* Sem zoom por pinça; rolagem normal continua. */
html, body { touch-action: pan-x pan-y; }