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