/* Focused study flow: compact cards leave room for the learner's next action. */
  /* Card redesign 2026-07-31: the study "stage" centers as one block (both axes) instead of sitting top-anchored in a mostly-empty column. A receding two-card stack behind the active card (`.deck .ghost`) replaces the old floating "N из M" text as the progress cue — it's a literal deck of words being worked through, not decoration; the segmented `.deck-track` underneath the eyebrow makes the same point numerically. No new color tokens: ghosts reuse `--paper`/`--line` at reduced opacity. */
  .stage-frame{min-height:calc(100vh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0}
  .session-stage{width:100%;max-width:420px}
  .stage-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .stage-close{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--muted)}
  .stage-close:hover{color:var(--ink);border-color:var(--muted)}
  .stage-progress{flex:1}
  .stage-progress .row1{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
  .stage-progress .eyebrow{margin:0}
  .stage-progress .phase{font-weight:800;font-size:12.5px;color:var(--ink)}
  .deck-track{display:flex;gap:4px}
  .deck-track i{flex:1;height:4px;border-radius:3px;background:var(--line);display:block;font-style:normal}
  .deck-track i.done{background:var(--lime)}
  .deck-track i.now{background:var(--blue)}
  /* `.ghost` is `position:absolute`, so without an explicit stacking order it paints above the
     plain in-flow foreground card, not behind it — `.card-scene` only escaped this by accident
     (its `perspective` happens to open a stacking context of its own). Pin both explicitly. */
  .deck{position:relative;margin-bottom:16px}
  .deck>.card-scene,.deck>.recall-card,.deck>.exercise-card{position:relative;z-index:1}
  .deck .ghost{position:absolute;left:6%;right:6%;bottom:-9px;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:20px;transform:scale(.95);z-index:0}
  .deck .ghost.g2{left:11%;right:11%;bottom:-17px;transform:scale(.9);opacity:.7;z-index:-1}
  .stage-actions{display:flex;gap:10px}
  .stage-actions .btn{flex:1}

  .study-wrap{max-width:660px}.card-scene{height:224px;margin-bottom:0}.card-face{padding:20px 22px}.card-back{padding:18px 22px}.word{font-size:42px;margin:14px 0 4px}.translation{font-size:27px;margin:6px 0}.definition{font-size:12.5px}.example{margin-top:14px}.example b{font-size:15px}.sound{width:32px;height:32px}.flashcard .sound[style]{top:22px!important;right:28px!important}.flip-note{bottom:20px;right:22px;font-size:10.5px}.learning-picker{max-width:760px;margin:10px auto}.learning-picker>p{color:var(--muted);margin:8px 0 22px}.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.collection-card{min-height:155px;padding:20px;text-align:left;background:var(--card);border:1px solid var(--soft-border,var(--line));border-radius:18px;box-shadow:var(--shadow)}.collection-card:hover{transform:translateY(-2px);border-color:var(--blue)}.collection-card b{font-size:18px;display:block;margin:16px 0 5px}.collection-card p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}.collection-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#e8efff;color:var(--blue)}.recall-card{background:var(--card);border:1px solid var(--soft-border,var(--line));border-radius:20px;padding:22px 24px;box-shadow:var(--shadow);text-align:left}.recall-card .word{margin:10px 0 4px}.recall-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.recall-options button{min-height:46px;padding:11px 12px;background:var(--card);border:1px solid var(--soft-border,var(--line));border-radius:11px;color:var(--ink);font-size:13.5px;font-weight:800;text-align:left}.recall-options button:hover{border-color:var(--blue);background:#edf2ff}.recall-result{margin-top:14px;padding:12px 13px;border-radius:12px;background:#edf8f0;color:#286b50;font-weight:800;line-height:1.5;font-size:13px}.recall-result.wrong{background:#fff1ee;color:#a6534d}.recall-result .btn{margin-top:10px;background:var(--blue);color:white}.study-complete{text-align:center;padding:40px 20px}.study-complete h2{font:700 34px 'Playfair Display';margin:10px 0}.study-complete p{color:var(--muted)}.exercise-card{padding:22px 24px}.exercise-card h2{font-size:21px;margin:8px 0 12px}.exercise-card .question{font-size:17px;line-height:1.4;margin:14px 0}.exercise-card .options{gap:8px}.exercise-card .option{padding:11px 12px;font-size:13px}.exercise-card .result-box{font-size:12.5px;padding:12px 13px}@media(max-width:800px){.stage-frame{min-height:calc(100vh - 200px);padding:12px 0}.collection-grid,.recall-options{grid-template-columns:1fr}.collection-card{min-height:130px}}
  /* Mode switcher on the collection picker: hidden by study.js when only one mode is available. */
  .mode-switch{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.mode-switch button{padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font:600 12px Manrope,sans-serif;cursor:pointer}.mode-switch button.active{background:var(--blue);border-color:var(--blue);color:#fff}
  /* Input-mode recall task: `translation-choice` still renders `.recall-options`, only `term-typing`/`cloze` reach this. */
  .recall-input{display:flex;gap:10px;margin-top:16px}.recall-input input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font:14px Manrope,sans-serif}.recall-input input:focus{outline:2px solid var(--blue);outline-offset:1px}.recall-input button{white-space:nowrap}@media(max-width:560px){.recall-input{flex-direction:column}.recall-input button{width:100%}}
  /* `.word` is sized for a single term (42px); `term-typing`/`cloze` prompts can be a phrase or a full sentence, so they need a modifier that keeps line-height sane instead of the single-word cap. Scoped to `.recall-card .word` (0,0,2,0) so it beats that rule's `margin` — a bare `.word-sentence` (0,0,1,0) would lose to it despite coming later in the file. */
  .recall-card .word-sentence{font-size:19px;line-height:1.5;margin:10px 0 6px}@media(max-width:800px){.recall-card .word-sentence{font-size:17px}}
  /* Dark-theme control palette: never keep a light-surface control with low-contrast text. */
  body.dark .modes button{background:#26344d;color:#dbe6f7;border:1px solid #3a4b67}
  body.dark .modes button:first-child{background:#324b79;color:#fff;border-color:#4f6fa9}
  body.dark .quick-actions button{background:#202c40;color:#dbe6f7;border-color:#3a4b67}
  body.dark .chat-history button{color:#d5e0f1}
  body.dark .chat-history button:hover{background:#26344d;color:#fff}
/* Результат ответа в повторении (study.js recallResult): подсветка вариантов и панель внизу карточки */
.recall-card{overflow:hidden}
.recall-options.answered button:disabled{cursor:default;transition:opacity .2s,background .2s,border-color .2s}
.recall-options.answered button.is-correct{background:#e5f6ec!important;border-color:var(--green)!important;color:#1f6b45!important}
.recall-options.answered button.is-correct::before{content:'✓ '}
.recall-options.answered button.is-wrong{background:#fdecea!important;border-color:var(--red)!important;color:#a6403a!important}
.recall-options.answered button.is-wrong::before{content:'✗ '}
.recall-options.answered button.is-dim{opacity:.45}
body.dark .recall-options.answered button.is-correct{background:#1d4a3a!important;color:#bcf0d2!important}
body.dark .recall-options.answered button.is-wrong{background:#4a2628!important;color:#ffd4d1!important}
body.dark .recall-options.answered button.is-dim{background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important}
.recall-result{--tone:var(--green);--tone-bg:#edf8f1;--tone-ink:#1f6b45;margin:20px -24px -22px;padding:18px 24px 20px;border-radius:0;border-top:2px solid var(--tone);background:var(--tone-bg);color:var(--ink);font-weight:500;font-size:15px;line-height:1.5;animation:recall-in .22s ease-out}
.recall-result.almost{--tone:var(--orange);--tone-bg:#fff6e6;--tone-ink:#9a5a12}
.recall-result.wrong{--tone:var(--red);--tone-bg:#fff1ee;--tone-ink:#a6403a;background:var(--tone-bg);color:var(--ink);animation:recall-in .22s ease-out,recall-shake .35s .22s}
body.dark .recall-result{--tone-bg:#173a2e;--tone-ink:#9ee6bf}
body.dark .recall-result.almost{--tone-bg:#3d311b;--tone-ink:#ffd08c}
body.dark .recall-result.wrong{--tone-bg:#3d2124;--tone-ink:#ffb3ad}
.recall-result-head{display:flex;gap:14px;align-items:flex-start}
.recall-result-icon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--tone);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:800;animation:recall-pop .3s .1s both}
body.dark .recall-result-icon{color:#101827}
.recall-result-title{font-size:20px;font-weight:800;color:var(--tone-ink);letter-spacing:-.3px}
.recall-result-word{margin-top:2px}.recall-result-word b{font-weight:800}
.recall-result-answer{margin-top:2px;color:var(--muted);font-size:14px}
.recall-result-example{margin-top:6px;padding-left:10px;border-left:3px solid var(--tone);color:var(--muted);font-style:italic;font-size:14px}
.recall-result .recall-next{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;padding:14px 16px;background:var(--tone);color:#fff;font-size:16px;border-radius:12px}
body.dark .recall-result .recall-next{color:#101827}
.recall-result .recall-next:hover{filter:brightness(1.06);transform:translateY(-1px)}
.recall-result .recall-next:focus-visible{outline:3px solid var(--tone);outline-offset:3px}
.recall-next kbd{font:600 11px 'DM Mono',monospace;padding:2px 6px;border-radius:5px;background:#ffffff33;margin-left:6px}
@media(hover:none){.recall-next kbd{display:none}}
@keyframes recall-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes recall-pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes recall-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.recall-result,.recall-result.wrong,.recall-result-icon{animation:none}}
/* Цифра-подсказка на варианте: выбор клавишами 1–4 (study.js keydown) */
.recall-options button{display:flex;align-items:center;gap:8px}.recall-options button>span{flex:1;min-width:0}
.option-key{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:6px;border:1px solid var(--line);color:var(--muted);font:600 11px 'DM Mono',monospace;display:grid;place-items:center}
.recall-options.answered .option-key{visibility:hidden}
@media(hover:none){.option-key{display:none}}
/* Правки по скриншоту владельца (27.10.2026, «Какое слово пропущено?»): предложение унаследовало letter-spacing:-3px
   от крупного .word — буквы слипались; у «Проверить» не было фона (светло-серый браузерный, текст пропадал) */
.recall-card .word-sentence{font-size:24px;letter-spacing:0;word-spacing:1px;line-height:1.45}
@media(max-width:800px){.recall-card .word-sentence{font-size:20px}}
.recall-input .btn{background:var(--blue);color:#fff;padding-inline:20px}
.recall-input .btn:not(:disabled):hover{filter:brightness(1.08)}
.recall-input .btn:disabled{opacity:.45;cursor:default}
body.dark .recall-input .btn{background:#3d63d6;color:#fff}
/* Полка «Знакомства» (study.js previewShelf): пройденные слова мини-карточками над колодой, по 5 в ряд */
.preview-shelf{width:100%;max-width:660px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:22px}
.shelf-card{display:grid;gap:2px;min-width:0;padding:8px 10px;border-radius:11px;background:var(--card);border:1px solid var(--soft-border,var(--line));box-shadow:0 4px 12px rgba(20,37,62,.08);color:var(--ink);text-align:left;transition:transform .15s,border-color .15s}
.shelf-card b,.shelf-card span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf-card b{font:700 14px 'Playfair Display',serif}
.shelf-card span{font-size:11.5px;color:var(--muted)}
.shelf-card:hover{transform:translateY(-2px);border-color:var(--blue)}
.shelf-card.current{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset}
body.dark .shelf-card{background:#1d2940;border-color:var(--line);box-shadow:none}
.stage-actions .stage-back{flex:none;width:48px;padding:0;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.stage-actions .stage-back svg{width:18px;height:18px}
.stage-actions .stage-back:disabled{opacity:.35;cursor:default}
body.dark .stage-actions .stage-back{background:#202c40}
@media(max-width:800px){.preview-shelf{gap:6px;margin-bottom:14px}.shelf-card{padding:6px 7px}.shelf-card b{font-size:12.5px}.shelf-card span{font-size:10.5px}}
/* Активная карточка на полке: в тёмной теме `body.dark .shelf-card` перебивал .current — выделения не было видно */
.preview-shelf .shelf-card.current{background:#e9efff;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue),0 8px 18px rgba(36,82,198,.25);transform:translateY(-3px)}
.preview-shelf .shelf-card.current span{color:var(--blue)}
body.dark .preview-shelf .shelf-card.current{background:#263b60;border-color:#6f95ff;box-shadow:0 0 0 2px #6f95ff,0 8px 20px rgba(0,0,0,.45)}
body.dark .preview-shelf .shelf-card.current span{color:#c7d6ff}
/* Крестик «Закрыть» был смещён вправо: у кнопки оставался браузерный padding, а иконка 24px шире её содержимого */
.stage-close{padding:0;width:36px;height:36px}
.stage-close svg{width:18px;height:18px;display:block}
/* «Практика» (exercises.js): итог сессии, помощь AI после ответа */
.practice-help{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.practice-help .btn{background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:14px;padding:10px 14px}
.practice-help .btn:first-child{color:var(--purple)}
.practice-help .btn:hover{border-color:var(--blue)}
body.dark .practice-help .btn{background:#202c40}
#practiceStage .mini-example{margin-top:12px}
.practice-summary{background:var(--card);border:1px solid var(--soft-border,var(--line));border-radius:20px;padding:28px 24px 24px;box-shadow:var(--shadow);text-align:center;animation:recall-in .25s ease-out}
.practice-medal{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--lime);color:#14253e;display:grid;place-items:center;font-size:28px;animation:recall-pop .35s .1s both}
.practice-summary h2{font:700 30px 'Playfair Display',serif;letter-spacing:-.5px;margin:0 0 4px}
.practice-score{margin:0 0 18px;color:var(--muted);font-size:16px}.practice-score b{color:var(--ink);font-size:20px}
.practice-results{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;text-align:left}
.practice-results li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--line);font-size:15px;line-height:1.45}
.practice-results li small{display:block;color:var(--muted);font-size:13px}
.practice-mark{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:var(--green)}
.practice-results li.wrong{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.practice-results li.wrong .practice-mark{background:var(--red)}
body.dark .practice-mark{color:#101827}
.practice-actions{display:flex;gap:10px}.practice-actions .btn{flex:1}
.practice-home{background:var(--card);border:1px solid var(--line);color:var(--ink)}
body.dark .practice-home{background:#202c40}
/* «Сопоставьте пары»: кнопки стояли в строку и переносились вразнобой — теперь две ровные колонки */
.matching-left,.matching-right{display:grid;gap:8px}
.matching-grid button{width:100%}
/* Оборот карточки «Знакомства»: само слово над переводом, чтобы не переворачивать обратно */
.card-back .back-term{margin-top:8px;font:600 15px 'DM Mono',monospace;color:var(--muted)}
.card-back .back-term+.translation{margin-top:2px}