/* ==========================================================================
   v6.4 — Hoje, Praticar, Sons, Treinos, mini-dicionário, palavras conhecidas.
   Mesma direção do resto: papel e tinta, hairlines, quase sem arredondamento.
   (mobile.css continua sendo o último arquivo e só sobrescreve.)
   ========================================================================== */

/* ---------- alemão marcado como alemão: hifenização dos compostos ---------- */
[lang="de"].reader-body, .flash-context, .journal-body, .drill-sentence, .flash-front, .flip-face .word, .continue-card h3{
  -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word;
}
.pdf-text-layer{ -webkit-hyphens:manual; hyphens:manual; }

/* ---------- navegação ---------- */
.nav-sub{ list-style:none; margin:2px 0 4px; padding:0 0 0 36px; display:flex; flex-direction:column; gap:1px; }
.nav-sublink{ display:block; padding:5px 10px; border-radius:var(--radius-sm); color:var(--ink-faint); font-size:.86rem; text-decoration:none; }
.nav-sublink:hover{ color:var(--ink); background:var(--paper-raised); }
.nav-sublink.active{ color:var(--ink); font-weight:600; }
.focus-side{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border-radius:var(--radius-pill); border:1px solid var(--hairline-strong);
  background:var(--paper); color:var(--ink-soft); font-size:.9rem; cursor:pointer; margin-top:calc(-1 * var(--sp-4));
}
.focus-side:hover, .focus-side.active{ color:var(--ink); border-color:var(--accent); }
.focus-side.is-live{ border-color:var(--accent); color:var(--accent); }
.focus-pill{ display:none; }
.eyebrow-link{ color:inherit; text-decoration:none; }
.eyebrow-link:hover{ color:var(--accent); }
.sub-plain{ color:var(--ink-soft); font-size:.95rem; margin:0 0 var(--sp-3); max-width:68ch; }

/* ---------- IPA ---------- */
.ipa{ font-family:'Charis SIL', 'Doulos SIL', 'Gentium Plus', 'Noto Serif', var(--font-reading); font-size:.96em; color:var(--ink-soft); letter-spacing:.01em; white-space:nowrap; }
.ipa-seg{ color:inherit; text-decoration:none; border-radius:2px; padding:0 .5px; }
.ipa-seg:hover{ color:var(--accent); background:var(--accent-soft); }
.ipa mark{ background:var(--plum-soft); color:var(--plum); border-radius:2px; padding:0 1px; }
.flash-pron{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.flip-face .flash-pron{ justify-content:center; }
.native-btn{ gap:4px; font-size:var(--fs-micro); font-weight:600; color:var(--accent); }
.ipa-field{ display:flex; gap:8px; }
.ipa-preview{ margin-top:4px; min-height:1.2em; }
.flip-face.back{ overflow:auto; justify-content:flex-start; }
.flip-face.back > .word:first-child{ margin-top:auto; }
.flip-face.back > :last-child{ margin-bottom:auto; }

/* trecho do vídeo */
.clip-btn{ align-self:flex-start; gap:6px; }
.rv-extra{ display:flex; justify-content:center; }
.rv-extra[hidden]{ display:none; }
.rv-extra .fc-clip{ display:none; }
.rv-clip, .fc-clip{ width:min(480px, 100%); }
.rv-clip:empty, .fc-clip:empty{ display:none; }
.clip-frame{ position:relative; aspect-ratio:16/9; background:#000; border-radius:var(--radius-md); overflow:hidden; margin-bottom:4px; }
.clip-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- barra de seleção: "Consultar" ---------- */
.selection-toolbar .st-lookup{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--paper) 45%, transparent); }

/* ---------- mini-dicionário ---------- */
.wp-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.wp-word{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; line-height:1.2; }
.wp-body{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-3); min-height:64px; }
.wp-tr{ font-size:1.15rem; }
.wp-meta{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.wp-pron{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; font-size:1.05rem; }
.wp-known{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--fs-small); color:var(--accent); background:var(--accent-soft); padding:6px 10px; border-radius:var(--radius-sm); }

/* ---------- palavras conhecidas no texto ---------- */
mark.kw{ background:none; color:inherit; text-decoration-line:underline; text-decoration-thickness:1.5px; text-underline-offset:.22em; cursor:pointer; border-radius:2px; }
mark.kw-learning{ text-decoration-style:dotted; text-decoration-color:var(--plum); }
mark.kw-known{ text-decoration-style:solid; text-decoration-color:var(--hairline-strong); }
:root[data-gender-colors="on"] mark.kw-der{ text-decoration-color:var(--g-der); }
:root[data-gender-colors="on"] mark.kw-die{ text-decoration-color:var(--g-die); }
:root[data-gender-colors="on"] mark.kw-das{ text-decoration-color:var(--g-das); }
mark.kw:hover{ background:var(--paper-sunken); }

/* ---------- chips de palavra ---------- */
.word-chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:var(--radius-pill);
  border:1px solid var(--hairline-strong); background:var(--paper-raised); color:var(--ink);
  font-family:var(--font-reading); font-size:.95rem; cursor:pointer; text-decoration:none;
}
.word-chip svg{ color:var(--ink-faint); }
.word-chip:hover{ border-color:var(--accent); }
.word-chip.is-static{ cursor:default; }
.word-chip.is-used{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }

/* ================================================================== Sons */
.snd-section{ margin:var(--sp-6) 0; }
.snd-section h2{ font-size:var(--fs-h2); margin:0 0 var(--sp-3); }
.snd-section h3{ font-size:var(--fs-h3); margin:var(--sp-5) 0 var(--sp-2); }
.snd-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.snd-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); font-size:var(--fs-small); color:var(--ink-soft); margin-bottom:var(--sp-2); }
.snd-legend span{ display:inline-flex; align-items:center; gap:7px; }
.lg{ width:14px; height:14px; border-radius:3px; border:1px solid var(--hairline-strong); background:var(--paper-raised); display:inline-block; }

.snd{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 8px;
  border-radius:var(--radius-sm); border:1px solid var(--hairline-strong); background:var(--paper-raised);
  color:var(--ink); text-decoration:none; font-family:'Charis SIL', 'Doulos SIL', 'Noto Serif', var(--font-reading); font-size:1.12rem;
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.snd:hover{ border-color:var(--accent); transform:translateY(-1px); }
.snd.br-hard, .lg.br-hard{ background:var(--plum-soft); border-color:color-mix(in srgb, var(--plum) 45%, transparent); color:var(--plum); }
.snd.br-trap, .lg.br-trap{ border-style:dashed; border-color:var(--ink-soft); }
.snd.br-easy, .lg.br-easy{ background:var(--accent-soft); border-color:transparent; color:var(--accent); }

.ipa-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--paper-raised); }
.ipa-table{ border-collapse:collapse; width:100%; min-width:720px; }
.ipa-table th{ font-size:var(--fs-micro); font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; padding:8px; text-align:center; }
.ipa-table th[scope="row"]{ text-align:left; white-space:nowrap; }
.ipa-table td{ border-top:1px solid var(--hairline); border-left:1px solid var(--hairline); padding:6px; text-align:center; height:52px; }
.ipa-table td .snd{ margin:2px; }

.vowel-chart{ position:relative; max-width:560px; aspect-ratio:1.45; margin:0 auto; padding:0; }
.vowel-chart svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vowel-chart polygon{ fill:var(--paper-raised); stroke:var(--hairline-strong); stroke-width:.5; vector-effect:non-scaling-stroke; }
.vowel-chart line{ stroke:var(--hairline); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:3 3; }
.vowel-dot{ position:absolute; transform:translate(-50%, -50%); min-width:34px; height:34px; z-index:1; }
.vowel-dot.is-round{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.vc-label{ position:absolute; font-size:var(--fs-micro); color:var(--ink-faint); }
.vc-front{ top:-26px; left:0; } .vc-back{ top:-26px; right:0; }
.vc-close{ top:6px; left:-4px; transform:translateX(-100%); } .vc-open{ bottom:-4px; left:29%; transform:translateX(-100%); }

.br-list{ display:flex; flex-direction:column; border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--paper-raised); }
.br-item{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-3) var(--sp-4); color:inherit; text-decoration:none; border-top:1px solid var(--hairline); }
.br-item:first-child{ border-top:none; }
.br-item:hover{ background:var(--paper-sunken); }
.br-sym{ flex:none; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-family:'Charis SIL', 'Noto Serif', var(--font-reading); font-size:1.6rem; border:1px solid var(--hairline-strong); }
.br-sym.br-hard{ background:var(--plum-soft); color:var(--plum); border-color:transparent; }
.br-sym.br-easy{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.br-sym.br-trap{ border-style:dashed; }
.br-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.br-ex{ font-family:var(--font-reading); color:var(--ink-soft); }
.br-tip{ font-size:var(--fs-small); color:var(--ink-faint); }
.br-go{ color:var(--ink-faint); flex:none; }

.phen p{ max-width:70ch; }
.phen-pitfall{ font-size:var(--fs-small); color:var(--ink-soft); border-left:2px solid var(--plum); padding-left:10px; }
.phen-group{ display:inline-flex; align-items:center; gap:6px; }
.phen-vs{ color:var(--ink-faint); }

.pair-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--sp-2); margin:var(--sp-3) 0; }
.pair-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  padding:var(--sp-3); border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); background:var(--paper-raised); cursor:pointer; color:var(--ink);
}
.pair-card.active{ border-color:var(--accent); background:var(--accent-soft); }
.pair-label{ font-family:'Charis SIL', 'Noto Serif', var(--font-reading); font-size:1.15rem; font-weight:600; }
.pair-ex{ font-family:var(--font-reading); color:var(--ink-soft); }
.pair-stat{ font-size:var(--fs-micro); color:var(--ink-faint); }
.pair-actions{ display:flex; gap:var(--sp-2); justify-content:flex-end; flex-wrap:wrap; }
.pair-stage{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); padding:var(--sp-4) 0; }
.pair-stage .review-progress{ width:min(520px, 100%); }
.pair-listen{ min-width:220px; }
.pair-options{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); width:min(520px, 100%); }
.pair-opt{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:var(--sp-5) var(--sp-3);
  border:1px solid var(--hairline-strong); border-radius:var(--radius-md); background:var(--paper-raised); cursor:pointer; color:var(--ink);
}
.pair-opt:hover:not(:disabled){ border-color:var(--accent); }
.pair-word{ font-family:var(--font-display); font-size:1.6rem; font-weight:600; }
.pair-mean{ font-size:var(--fs-small); color:var(--ink-faint); }
.pair-opt.is-right{ border-color:var(--accent); background:var(--accent-soft); }
.pair-opt.is-wrong{ border-color:var(--danger); background:var(--danger-soft); }
.pair-opt:disabled{ cursor:default; }
.pair-feedback{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; justify-content:center; text-align:center; }
.pair-feedback.ok{ color:var(--accent); } .pair-feedback.bad{ color:var(--danger); }
.pair-feedback .word-chip{ color:var(--ink); }

/* detalhe de um som */
.snd-nav{ display:flex; gap:4px; }
.snd-hero{ display:flex; align-items:center; gap:var(--sp-5); margin:var(--sp-2) 0 var(--sp-5); }
.snd-hero h1{ margin:0 0 4px; }
.snd-hero > div{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.snd-big{
  flex:none; width:128px; height:128px; border-radius:var(--radius-md); cursor:pointer;
  border:1px solid var(--hairline-strong); background:var(--paper-raised); color:var(--ink);
  font-family:'Charis SIL', 'Doulos SIL', 'Noto Serif', var(--font-reading); font-size:2.8rem;
  transition:transform var(--dur-fast) var(--ease);
}
.snd-big:hover{ transform:scale(1.03); }
.snd-big:active{ transform:scale(.98); }
.snd-big.br-hard{ background:var(--plum-soft); color:var(--plum); border-color:transparent; }
.snd-big.br-easy{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.snd-big.br-trap{ border-style:dashed; }
.br-badge.br-hard{ background:var(--plum-soft); color:var(--plum); border-color:transparent; }
.br-badge.br-easy{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.snd-facts{ display:flex; flex-direction:column; gap:var(--sp-3); margin:0; }
.snd-facts > div{ display:grid; grid-template-columns:170px 1fr; gap:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--hairline); }
.snd-facts dt{ font-size:var(--fs-small); color:var(--ink-faint); font-weight:600; }
.snd-facts dd{ margin:0; line-height:1.55; }
.snd-facts .is-pitfall dd{ color:var(--plum); }
.ex-list{ display:flex; flex-direction:column; border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--paper-raised); }
.ex-row{ display:grid; grid-template-columns:auto minmax(90px, 1.1fr) minmax(90px, 1fr) 1fr auto; align-items:center; gap:var(--sp-3); padding:6px var(--sp-3); border-top:1px solid var(--hairline); }
.ex-row:first-child{ border-top:none; }
.ex-word{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; }
.ex-pt{ color:var(--ink-faint); font-size:var(--fs-small); }
.ex-pick{ font-size:var(--fs-micro); }
.rec-box{ margin-top:var(--sp-4); padding:var(--sp-4); border:1px dashed var(--hairline-strong); border-radius:var(--radius-md); display:flex; flex-direction:column; gap:var(--sp-2); }
.rec-title{ font-size:.95rem; }
.rec-row{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.rec-btn.is-recording{ border-color:var(--danger); color:var(--danger); animation:rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse{ 50%{ box-shadow:0 0 0 4px var(--danger-soft); } }
.snd-cards{ display:flex; flex-direction:column; gap:2px; }
.snd-card{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:4px 0; border-bottom:1px solid var(--hairline); }
.snd-card-front{ font-family:var(--font-display); font-weight:600; }
.snd-card-back{ color:var(--ink-faint); font-size:var(--fs-small); margin-right:auto; }
.shadow-rec{ font-size:var(--fs-small); gap:var(--sp-2); }

/* ================================================================ Praticar */
.practice-group{ margin-bottom:var(--sp-6); }
.practice-group h2{ font-size:var(--fs-h2); margin:0 0 var(--sp-2); }
.practice-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:var(--sp-3); }
.practice-tile{
  display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-4);
  border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--paper-raised);
  color:inherit; text-decoration:none; transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.practice-tile:hover{ border-color:var(--accent); transform:translateY(-1px); }
.practice-tile.is-primary{ border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.practice-tile.is-disabled{ opacity:.55; pointer-events:none; }
.pt-icon{ flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:var(--paper-sunken); color:var(--accent); }
.pt-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pt-body b{ font-family:var(--font-display); font-size:1.08rem; }
.pt-body span{ color:var(--ink-soft); font-size:var(--fs-small); }
.pt-body small{ color:var(--ink-faint); font-size:var(--fs-micro); }

/* ==================================================================== Hoje */
.today-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--sp-4); }
.today-card{
  display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start;
  padding:var(--sp-5); border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--paper-raised);
  color:inherit; text-decoration:none; min-width:0;
}
.today-card h2{ margin:0; font-size:1.55rem; }
.today-card h3{ margin:0; font-size:1.15rem; font-family:var(--font-display); }
.today-card p{ margin:0; color:var(--ink-soft); }
.today-main{ grid-column:span 4; }
.today-main.has-queue{ border-left:3px solid var(--accent); }
.today-continue{ grid-column:span 2; justify-content:flex-start; }
.today-continue:hover{ border-color:var(--accent); }
.today-continue .progress-track{ width:100%; margin-top:auto; }
.today-sound{ grid-column:span 3; }
.today-write{ grid-column:span 3; }
.tc-eyebrow{ display:flex; align-items:center; gap:6px; font-size:var(--fs-micro); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.tc-done{ color:var(--accent); text-transform:none; letter-spacing:0; }
.tc-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; margin-top:var(--sp-2); }
.ts-row{ display:flex; align-items:center; gap:var(--sp-4); }
.ts-sym{ flex:none; display:flex; align-items:center; justify-content:center; min-width:74px; height:74px; padding:0 8px; border-radius:var(--radius-md);
  font-family:'Charis SIL', 'Noto Serif', var(--font-reading); font-size:1.9rem; text-decoration:none; color:var(--ink); border:1px solid var(--hairline-strong); }
.ts-sym.br-hard{ background:var(--plum-soft); color:var(--plum); border-color:transparent; }
.ts-sym.br-easy{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.ts-words, .tw-words{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.ts-tip{ font-size:var(--fs-small); }
.tw-task{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; }

.today-heat{ margin-top:var(--sp-6); padding:var(--sp-5); border:1px solid var(--hairline); border-radius:var(--radius-md); }
.th-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.th-head h2{ margin:0; font-size:var(--fs-h2); }
.th-stats{ display:flex; gap:var(--sp-5); flex-wrap:wrap; color:var(--ink-soft); font-size:var(--fs-small); }
.th-stats b{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink); }
.th-keep{ color:var(--plum); }
.heatmap{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
.hm-days{ display:grid; grid-template-rows:repeat(7, 14px); gap:3px; font-size:.62rem; color:var(--ink-faint); line-height:14px; }
.hm-grid{ display:flex; gap:3px; }
.hm-col{ display:grid; grid-template-rows:repeat(7, 14px); gap:3px; }
.hm-cell{ width:14px; height:14px; border-radius:2px; background:var(--paper-sunken); display:inline-block; }
/* intensidade = tinta no papel */
.hm-cell.l1{ background:color-mix(in srgb, var(--accent) 22%, var(--paper)); }
.hm-cell.l2{ background:color-mix(in srgb, var(--accent) 45%, var(--paper)); }
.hm-cell.l3{ background:color-mix(in srgb, var(--accent) 70%, var(--paper)); }
.hm-cell.l4{ background:var(--accent); }
.hm-cell.is-future{ background:transparent; }
.hm-cell.is-today{ box-shadow:0 0 0 1.5px var(--ink); }
.hm-legend{ display:flex; align-items:center; gap:3px; font-size:var(--fs-micro); color:var(--ink-faint); margin:var(--sp-2) 0; }
.hm-legend span:first-child{ margin-right:4px; } .hm-legend span:last-child{ margin-left:4px; }

/* ================================================================= Treinos */
.drill-view .reader-head{ align-items:flex-end; }
.drill-opt{ display:flex; align-items:center; gap:6px; font-size:var(--fs-small); color:var(--ink-soft); white-space:nowrap; }
#dr-body{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
#dr-body .review-progress{ width:100%; }
.drill-count{ align-self:flex-start; }
.drill-card{
  width:100%; min-height:170px; padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2);
  background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md); text-align:center;
}
.drill-word{ font-family:var(--font-display); font-size:2rem; font-weight:600; line-height:1.2; }
.drill-hint{ color:var(--ink-faint); font-size:var(--fs-small); }
.drill-sentence{ font-family:var(--font-reading); font-size:1.3rem; line-height:1.6; }
.cloze-gap{ display:inline-block; color:var(--accent); letter-spacing:.06em; font-weight:600; }
.drill-form{ display:flex; gap:var(--sp-2); width:100%; max-width:520px; }
.drill-form input{ flex:1; font-size:1.1rem; }
.drill-form input.is-right{ border-color:var(--accent); background:var(--accent-soft); }
.drill-form input.is-wrong{ border-color:var(--danger); background:var(--danger-soft); }
.drill-fb{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center; min-height:24px; }
.drill-fb.ok > div:first-child{ color:var(--accent); font-weight:600; }
.drill-fb.bad > div:first-child{ color:var(--danger); font-weight:600; }
.drill-answer{ font-family:var(--font-reading); font-size:1.15rem; line-height:1.5; }
.drill-answer b{ color:var(--accent); }
.gender-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); width:100%; max-width:520px; }
.gender-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:var(--sp-4) var(--sp-2);
  border:1px solid var(--hairline-strong); border-radius:var(--radius-md); background:var(--paper-raised); cursor:pointer;
  font-family:var(--font-display); font-size:1.5rem;
}
.gender-btn small{ font-family:var(--font-ui); font-size:var(--fs-micro); color:var(--ink-faint); }
.gender-btn:hover:not(:disabled){ border-color:var(--ink-soft); }
.gender-btn.is-right{ border-color:var(--accent); background:var(--accent-soft); }
.gender-btn.is-wrong{ border-color:var(--danger); background:var(--danger-soft); opacity:.8; }
.gender-btn:disabled{ cursor:default; }
.drill-fb .art{ font-family:var(--font-display); }

/* ================================================================== Diário */
.jr-prompt{ border:1px solid var(--hairline); border-left:3px solid var(--plum); border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3); background:var(--paper-raised); }
.jr-prompt-head{ display:flex; align-items:center; gap:var(--sp-2); }
.jr-prompt-head .btn{ margin-left:auto; }
.jr-prompt-body p{ margin:var(--sp-2) 0 0; font-family:var(--font-display); font-style:italic; color:var(--ink-soft); }
.jr-prompt.is-min .jr-prompt-body{ display:none; }

@media (max-width: 980px){
  .today-main, .today-continue, .today-sound, .today-write{ grid-column:span 6; }
}
@media (max-width: 880px) and (min-width: 721px){
  .focus-side{ width:auto; margin-top:0; }
  .nav-sub{ display:none; }
}

/* atributo hidden sempre vence (antes, um .btn com hidden continuava visível — ex.: "Mostrar resposta" depois de virar o cartão) */
[hidden]{ display:none !important; }
a.btn{ text-decoration:none; }
.snd-tabs{ overflow-x:auto; scrollbar-width:none; }
.snd-tabs .tab{ white-space:nowrap; flex:none; }
.vowel-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:30px 24px 28px 64px; }
.ipa-table td{ white-space:nowrap; }
.ipa-table th[scope="row"]{ position:sticky; left:0; background:var(--paper-raised); z-index:2; }