.content.audio-training-route { padding: 0; min-height: 100dvh; }
.audio-training-page { --audio-accent: var(--primary); --audio-soft: var(--purple-soft); display: flex; flex-direction: column; height: 100dvh; min-height: 560px; max-width: 540px; margin: 0 auto; color: var(--text); background: var(--bg); padding: calc(20px + env(safe-area-inset-top)) 20px calc(12px + env(safe-area-inset-bottom)); }
.audio-training-page button { -webkit-tap-highlight-color: transparent; }
.audio-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; flex: none; }
.audio-topbar h2 { margin: 0; font-size: calc(21px * var(--app-text-scale)); font-weight: 800; }
.audio-top-left,.audio-top-right { display: flex; align-items: center; gap: 4px; }
.audio-top-right { justify-content: flex-end; }
.audio-progress { font-size: 14px; white-space: nowrap; }
.audio-icon-button { display: flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 7px; border: 0; background: transparent; color: var(--text); border-radius: 50%; flex: none; }
.audio-icon-button svg,.audio-pronunciation svg,.audio-example svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.audio-icon-button.is-favorite { color: var(--audio-accent); }
.audio-icon-button.is-favorite svg { fill: var(--audio-accent); }
.audio-icon-button.active { color: var(--audio-accent); }
.audio-source { font-size: 11px; color: var(--muted); text-align: center; margin: 10px 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; flex: none; }
.audio-word-content { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; padding: 24px 14px 10px; }
.audio-word { color: var(--audio-accent); font-size: clamp(38px, 11vw, 58px); line-height: 1.15; font-weight: 850; margin: 0 0 18px; overflow-wrap: anywhere; }
.audio-word.long { font-size: clamp(30px, 8vw, 44px); }
.audio-pronunciation { display: flex; align-items: center; gap: 10px; font-size: 19px; color: var(--muted); flex-wrap: wrap; }
.audio-pronunciation button { background: var(--surface-3); color: var(--muted); border: 0; padding: 4px 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 18px; min-height: 32px; }
.audio-pronunciation svg { width: 16px; height: 16px; }
.audio-meaning { font-size: calc(22px * var(--app-text-scale)); line-height: 1.7; margin: 24px 0; white-space: pre-line; }
.audio-example { border-radius: 20px; margin: 28px -8px 10px; padding: 22px; background: var(--surface); box-shadow: var(--shadow); }
.audio-example > p { margin: 0 0 14px; font-size: calc(20px * var(--app-text-scale)); line-height: 1.6; }
.audio-example > p.translation { font-size: calc(17px * var(--app-text-scale)); }
.audio-example footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 15px; color: var(--muted); }
.audio-example small { font-size: 11px; }
.audio-example button { border: 0; background: transparent; color: var(--muted); padding: 5px; }
.audio-content-note { color: var(--muted); font-size: 13px; margin: 30px 0; }
.audio-minimal-view { flex: 1; min-height: 0; display: grid; place-items: center; padding: 20px; }
.audio-player-card { position: relative; width: min(100%, 270px); aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(135deg,var(--surface),var(--audio-soft)); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.audio-record { width: 78%; aspect-ratio: 1; padding: 12px; border-radius: 50%; background: repeating-conic-gradient(from 0deg,color-mix(in srgb, var(--audio-accent) 32%, transparent) 0deg 1deg,transparent 1deg 4deg),var(--surface-3); box-shadow: 0 5px 18px color-mix(in srgb, var(--audio-accent) 18%, transparent); }
.audio-record-label { display: flex; flex-direction: column; gap: 4px; justify-content: center; align-items: center; width: 100%; height: 100%; border-radius: 50%; color: var(--audio-accent); background: var(--surface); border: 1px solid var(--line); font-weight: 800; font-size: 19px; }
.audio-record-label span { font-size: 7px; letter-spacing: 2px; }
.audio-record.spinning { animation: audio-record-spin 12s linear infinite; }
.audio-speaker-dots { position: absolute; bottom: 18px; right: 18px; color: color-mix(in srgb, var(--audio-accent) 35%, var(--muted)); font-size: 12px; letter-spacing: 3px; line-height: .65; }
@keyframes audio-record-spin { to { transform: rotate(360deg); } }
.audio-mode-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 8px 12px; flex: none; }
.audio-mode-chip { border: 0; background: var(--surface); box-shadow: var(--shadow); border-radius: 30px; color: var(--audio-accent); font-size: 12px; padding: 11px 12px; }
.audio-other-book { color: var(--muted); background: none; border: 0; padding: 8px 0; font-size: 11px; }
.audio-controls { flex: none; padding-top: 8px; }
.audio-control-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.audio-primary-control { width: 62px; height: 62px; background: var(--surface-3); }
.audio-primary-control svg { width: 30px; height: 30px; stroke-width: 4; }
.audio-repeat-status { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; margin-top: 17px; }
.audio-repeat-status b { font-size: 11px; color: var(--audio-accent); font-weight: 600; }
.audio-repeat-status i { display: flex; gap: 6px; }
.audio-repeat-status em { height: 5px; width: 5px; border-radius: 50%; background: var(--line); }
.audio-repeat-status em.done { background: var(--audio-accent); }
.audio-play-status { text-align: center; color: var(--muted); font-size: 11px; margin: 10px 0 0; min-height: 16px; }
.audio-sheet { --audio-accent:var(--primary); --audio-soft:var(--purple-soft); padding: 22px 20px calc(30px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: var(--bg); max-height: 90dvh; overflow-y: auto; }
.audio-sheet-heading { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 0 25px; min-height: 42px; }
.audio-sheet-heading h3 { margin: 0; font-size: 22px; text-align: center; }
.audio-sheet-heading > button { position: absolute; right: 0; border: 0; background: var(--surface-3); color: var(--muted); border-radius: 50%; width: 38px; height: 38px; font-size: 28px; line-height: 1; }
.audio-scope-section { margin-bottom: 24px; }
.audio-scope-section h4,.audio-mode-section-title { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
.audio-scope-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.audio-scope-options button { position: relative; min-height: 44px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface); font-size: 13px; }
.audio-scope-options button.selected { border: 2px solid var(--audio-accent); color: var(--audio-accent); font-weight: 800; background: var(--audio-soft); }
.audio-scope-options i { margin-left: 4px; font-style: normal; }
.audio-scope-empty { margin: auto 0; }
.audio-scope-empty p { margin: 8px 0 18px; color: var(--muted); }
.audio-mode-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 26px; }
.audio-mode-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); padding: 16px 3px; min-height: 126px; }
.audio-mode-option > span { font-size: 28px; }
.audio-mode-option b { font-size: 16px; white-space: nowrap; }
.audio-mode-option small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.audio-mode-option.selected { border-color: var(--audio-accent); }
.audio-mode-option i { position: absolute; right: 5px; top: 5px; background: var(--audio-accent); color: white; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; font-style: normal; }
.audio-setting-card { background: var(--surface); border-radius: 20px; overflow: hidden; }
.audio-setting-card section { padding: 20px; }
.audio-setting-card section + section { border-top: 1px solid var(--line); }
.audio-setting-card h4 { margin: 0 0 20px; font-size: 17px; }
.audio-pill-options { display: flex; gap: 0; }
.audio-pill-options button { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 24px; height: 36px; font-size: 16px; }
.audio-pill-options button.selected { color: white; border-color: var(--audio-accent); background: var(--audio-accent); }
.audio-timer-options { display: grid; border-radius: 22px; overflow: hidden; }
.audio-timer-options button { border: 0; border-bottom: 1px solid var(--line); padding: 23px 20px; background: var(--surface); color: var(--text); font-size: 22px; text-align: left; display: flex; justify-content: space-between; }
.audio-timer-options button:last-child { margin-top: 16px; border: 0; border-radius: 22px; }
.audio-timer-options button.selected span { color: var(--audio-accent); }
@media (prefers-reduced-motion: reduce) { .audio-record.spinning { animation: none; } }
@media (max-width: 359px) { .audio-training-page { padding-left: 12px; padding-right: 12px; } .audio-topbar h2 { font-size: 19px; } .audio-icon-button { width: 35px; } .audio-sheet { padding-left: 12px; padding-right: 12px; } }

.dictation-mode-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dictation-mode-options .audio-mode-option { justify-content: center; min-height: 106px; }
.dictation-mode-options .audio-mode-option b { font-size: 22px; }
.dictation-mode-options .audio-mode-option small { font-size: 15px; }
.dictation-auto-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dictation-auto-next h4 { margin: 0; }
.dictation-auto-next .toggle.on { background: var(--audio-accent); }
.dictation-start-button { width: 100%; border: 0; border-radius: 18px; background: var(--audio-accent); color: white; margin-top: 26px; min-height: 56px; font-size: 20px; }

.spelling-training-page { min-height: 0; overflow: hidden; }
.spelling-progress { height: 6px; margin: 4px 0 0; overflow: hidden; border-radius: 99px; background: var(--line); }
.spelling-progress i { display: block; height: 100%; border-radius: inherit; background: var(--audio-accent); transition: width .25s ease; }
.spelling-main { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; padding: 12px 4px 8px; }
.spelling-sound,.spelling-meaning { display: grid; min-height: 148px; place-content: center; justify-items: center; gap: 15px; padding: 14px 10px; text-align: center; }
.spelling-sound small,.spelling-meaning small { color: var(--muted); font-size: 14px; }
.spelling-sound > button { display: grid; width: 132px; height: 132px; place-content: center; justify-items: center; gap: 10px; border: 0; border-radius: 50%; color: white; background: linear-gradient(145deg,var(--audio-accent),color-mix(in srgb, var(--audio-accent) 72%, #222)); box-shadow: 0 16px 32px color-mix(in srgb, var(--audio-accent) 25%, transparent); }
.spelling-sound svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; }
.spelling-sound span { color: var(--muted); font-size: 11px; }
.spelling-meaning p { margin: 0; font-size: calc(24px * var(--app-text-scale)); line-height: 1.55; white-space: pre-line; }
.spelling-form { display: grid; gap: 10px; margin: 18px 0 10px; }
.spelling-form label { color: var(--muted); font-size: 12px; }
.spelling-form input { width: 100%; height: 58px; padding: 0 16px; border: 2px solid var(--line); border-radius: 16px; color: var(--text); background: var(--surface); font: inherit; font-size: 20px; outline: none; }
.spelling-form input:focus { border-color: var(--audio-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--audio-accent) 12%, transparent); }
.spelling-feedback { display: grid; gap: 6px; margin-top: 12px; padding: 14px; border-radius: 15px; }
.spelling-feedback.correct { color: var(--success-1); background: color-mix(in srgb, var(--success-1) 10%, var(--surface)); }
.spelling-feedback.wrong { color: var(--danger-1); background: color-mix(in srgb, var(--danger-1) 9%, var(--surface)); }
.spelling-feedback strong { color: var(--text); font-size: 23px; overflow-wrap: anywhere; }
.spelling-feedback span { color: var(--muted); font-size: 12px; }
.spelling-score { display: flex; justify-content: center; gap: 24px; padding: 15px 0 0; color: var(--muted); font-size: 12px; }
.spelling-score b { color: var(--audio-accent); }
.spelling-mode-sheet .audio-mode-option { min-height: 92px; justify-content: center; padding: 12px 4px; }
.spelling-finish { display: grid; flex: 1; align-content: center; gap: 14px; text-align: center; }
.spelling-finish h1 { margin: 0; }
.spelling-finish p { margin: 0 0 14px; color: var(--muted); }

body.keyboard-open .spelling-training-page { padding-top: calc(8px + env(safe-area-inset-top)); }
body.keyboard-open .spelling-training-page .audio-source { margin: 3px 0; }
body.keyboard-open .spelling-main { padding-top: 2px; }
body.keyboard-open .spelling-form { margin: 4px 0 6px; gap: 6px; }
body.keyboard-open .spelling-form input { height: 50px; }
body.keyboard-open .spelling-form .primary-btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
body.keyboard-open .spelling-sound,
body.keyboard-open .spelling-meaning { min-height: 92px; padding: 7px 5px; }
body.keyboard-open .spelling-meaning p { font-size: calc(18px * var(--app-text-scale)); line-height: 1.38; }