/* Increase type without scaling viewport, spacing, or touch targets. */
body { font-size: 20px; }
.student-vault-dialog { display: flex; flex-direction: column; overflow: hidden !important; padding: 0 !important; }
.student-vault-header { display: flex; align-items: center; gap: 12px; padding: 16px; flex: 0 0 auto; background: #edf6f3; border-bottom: 1px solid #e2ece7; }
.student-vault-header h3 { flex: 1; min-width: 0; margin: 0; font-size: 18px; }
.student-vault-header [data-dialog-close] { float: none; flex: 0 0 36px; height: 36px; font-size: 20px; color: #52756c; }
.student-vault-dialog #admin-words { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 12px; margin: 0; }
#word-list-container { background: white; border: 1px solid #e5ebef; border-radius: 14px; overflow: hidden; }
#word-list-container > .compact-word { margin: 0; border-bottom: 1px solid #edf1f3; }
.compact-word:last-child { border-bottom: 0 !important; }
.compact-word > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; cursor: pointer; }
.compact-word > summary::-webkit-details-marker { display: none; }
.compact-word > summary b { flex: 1; min-width: 0; font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.compact-word > summary span { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.compact-word > summary::after { content: '›'; color: #94a3b8; font-size: 20px; }
.compact-word[open] > summary { background: #edf8f4; }
.compact-word[open] > summary::after { transform: rotate(90deg); }
.compact-word-body { padding: 6px 14px 14px; font-size: 14px; line-height: 1.6; }
.compact-word-body p { margin: 8px 0; }
.compact-word-body button { min-height: 36px; }
html { touch-action: manipulation; }
html, body { overscroll-behavior: none; }
body { position: relative; width: 100%; }
.app-container > header { position: sticky; top: 0; z-index: 40; touch-action: none; }
.app-container > main { overscroll-behavior-y: none; }
.app-starting .app-container { visibility: hidden; }
#app-startup { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #f5faf8; color: #0f766e; }
#app-startup strong { font-size: 32px; }
#app-startup span { font-size: 14px; color: #7b8e88; }
#app-startup button { background: #0f766e; color: white; border-radius: 12px; padding: 10px 20px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
/* Match the standalone iOS canvas to the navigation safe area. */
html, body { background-color: #fff; }
@media (display-mode: standalone) {
 .app-container { width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
 .app-container > header { padding-top: max(44px, env(safe-area-inset-top)); }
}
.text-\[9px\] { font-size: 11.25px !important; }
.text-\[10px\] { font-size: 12.5px !important; }
.text-\[11px\] { font-size: 13.75px !important; }
.text-xs { font-size: 15px !important; line-height: 1.25 !important; }
.text-sm { font-size: 17.5px !important; line-height: 1.25 !important; }
.text-base { font-size: 20px !important; line-height: 1.2 !important; }
.text-lg { font-size: 22.5px !important; line-height: 1.2 !important; }
.text-xl { font-size: 25px !important; line-height: 1.15 !important; }
.text-2xl { font-size: 30px !important; line-height: 1.15 !important; }
.text-3xl { font-size: 37.5px !important; line-height: 1.1 !important; }
button,input,select,textarea { font-family: inherit; }
button,select,summary { overflow-wrap: anywhere; }
input,select,textarea { min-width: 0; max-width: 100%; }
.app-container { max-width: 600px; }
.app-container > header { padding: 5px 10px; gap: 5px; }
.app-container > header h1 { font-size: 17.5px !important; }
.app-container > header > div { min-width: 0; }
.app-container > header > div:last-child { gap: 4px; }
.app-container > main > section { padding: 7px 10px; }
.app-container > nav { padding-top: 3px; }
.nav-tab-btn { line-height: 1.1 !important; }
#tab-home > * + *, #tab-settings > * + *, #tab-words > * + * { margin-top: 6px; }
#tab-home .p-4, #tab-settings .p-4, #tab-words .p-4 { padding: 10px; }
#calendar-grid { gap: 2px; }
.calendar-day { min-height: 23px; font-size: 12.5px; }
.section-choice { font-size: 15px; padding: 7px 9px; }
.section-details { margin-top: 5px; }
.section-details summary { padding: 5px 0; }
.unit-row { padding: 4px 0; line-height: 1.25; }
.target-opt-btn { padding-inline: 2px; }
#tab-study:not(.hidden) { padding: 5px 8px; }
#tab-study > div:first-child { margin-bottom: 3px; flex-wrap: wrap; gap: 3px; }
#tab-study > div:nth-child(2) { gap: 4px; }
#tab-study > div:nth-child(2) > div:first-child { padding: 7px; }
#tab-study .text-center.my-2 { margin: 4px 0; }
#study-card-stage-badge { font-size: 12.5px !important; max-width: 60%; }
#study-word { font-size: 29.25px !important; line-height: 1.08 !important; }
#study-phonetic { font-size: 13.75px !important; line-height: 1.2 !important; }
#study-context-box { padding: 5px 7px; }
#study-sentence { font-size: 15px !important; line-height: 1.25 !important; }
#study-sentence-cn, #study-mnemonic-box { font-size: 13.75px !important; line-height: 1.3 !important; }
#study-mnemonic-box { padding: 6px 7px; margin-top: 4px; }
#choices { gap: 4px; }
#choices > [data-answer] { font-size: 15px !important; line-height: 1.2; min-height: 46px; padding: 7px 8px; }
#unknown { padding: 4px; }
#voice-status { margin-top: 2px; }
#mnemonic-next { font-size: 22.5px !important; min-height: 52px !important; }
.completion-card { text-align:center; background:linear-gradient(145deg,#ecfdf5,#f0fdfa); border:1px solid #99f6e4; border-radius:18px; padding:28px 18px; box-shadow:0 8px 20px rgba(13,148,136,.12); }
.completion-emoji { font-size:48px; line-height:1; margin-bottom:10px; }
.completion-card h2 { font-size:24px; font-weight:800; color:#0f766e; margin:0 0 10px; }
.completion-card p { font-size:16px; margin:6px 0; color:#334155; }
.completion-card .completion-encourage { color:#b45309; font-weight:700; margin-bottom:20px; }
.completion-card button { min-height:48px; font-size:16px; }
#auth-modal > div { max-height: 90dvh; overflow-y: auto; }
#daily-summary { color: #fff !important; }
.app-container > nav { gap: 4px; padding: 3px 8px clamp(3px, env(safe-area-inset-bottom), 22px); background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -4px 18px rgba(15,23,42,.04); }
.app-container > nav .nav-tab-btn { flex: 1 1 0; min-width: 0; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; color: #8795a8 !important; font-size: 12px !important; font-weight: 500 !important; border-radius: 14px; transition: background-color .15s, color .15s; }
.nav-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 28px; border-radius: 12px; }
.nav-icon svg { width: 25px; height: 25px; }
.app-container > nav .nav-tab-btn.hidden { display: none !important; }
.app-container > nav .nav-selected { color: #0f766e !important; font-weight: 700 !important; }
.nav-selected .nav-icon { background: #d9f3ec; }
.nav-tab-btn:active .nav-icon { transform: scale(.94); }
.nav-tab-btn:focus-visible { outline: 2px solid #0d9488; outline-offset: -2px; }
@media (display-mode: standalone) {
 .app-container > nav { position: absolute; bottom: 0; left: 0; right: 0; height: 74px; min-height: 0; padding: 3px 8px 22px; align-items: flex-end; }
 .app-container > nav .nav-tab-btn { height: 46px; min-height: 46px; flex-grow: 1; }
 .app-container > main { margin-bottom: 74px; }
}
#new-class-form input { flex: 1 1 0; min-width: 0; width: 50%; }
.student-account-actions { display: flex; gap: 8px; }
html.home-screen-app, .home-screen-app body { height: var(--app-visible-height, 100%); }
.home-screen-app .app-container { height: var(--app-visible-height, 100%); max-height: none; max-width: none; border-radius: 0; }
.home-screen-app .app-container > nav { position: fixed; bottom: 0; left: 0; right: 0; height: 68px; min-height: 0; padding: 3px 8px 16px; align-items: flex-end; }
.home-screen-app .app-container > main { margin-bottom: 68px; }
.home-screen-app .app-container > header { padding-top: max(44px, env(safe-area-inset-top)); }
.student-account-actions > button { flex: 1 1 0; min-width: 0; min-height: 40px; overflow-wrap: anywhere; }
#tab-settings { background: #f5f8fa; }
.teacher-page { background: #f5f8fa; }
#tab-admin.teacher-loading { position: relative; min-height: 180px; }
#tab-admin.teacher-loading > * { visibility: hidden; }
#tab-admin.teacher-loading::before { content: '正在加载教师管理…'; position: absolute; top: 48px; left: 0; right: 0; text-align: center; color: #7b8e88; font-size: 14px; }
.teacher-page > h2 { font-size: 24px !important; margin: 4px 2px; }
.teacher-student-heading { font-size: 17px; font-weight: 700; margin: 20px 2px 8px; }
.teacher-student summary small { font-size: 12px; font-weight: 500; color: #8795a8; margin-left: 6px; }
.teacher-student summary em { font-style: normal; color: #a87826; margin-left: 10px; }
.teacher-student summary em.complete { color: #0f9480; }
.teacher-library-button { background: #eff6f5; color: #16766c; padding: 10px; border: 1px solid #d8e9e5; font-size: 14px; }
.teacher-account-fold > summary { color: #8795a8; font-size: 13px; padding: 8px 0; cursor: pointer; }
.teacher-page #teacher-classes { padding: 0; border: 0; }
.teacher-page #new-class-form { flex-wrap: wrap; }
.teacher-page #new-class-form button { width: 100%; }
.teacher-page #class-list { line-height: 2; color: #64748b; }
#tab-settings > h2 { margin: 4px 2px 0; font-size: 24px !important; }
.settings-intro { color: #7b8796; font-size: 13px; margin: 4px 2px 16px !important; }
.settings-group { background: #fff; border: 1px solid #e5ebef; border-radius: 18px; overflow: hidden; margin-top: 10px !important; }
.settings-group > summary { list-style: none; padding: 16px 42px 16px 16px; cursor: pointer; position: relative; }
.settings-group > summary { background: #edf6f3; }
.settings-group-body { background: #fff; }
[data-calendar] { min-height: 365px; overflow-anchor: none; }
[data-calendar][aria-busy="true"] { pointer-events: none; opacity: .65; }
[data-calendar] [data-day-detail] { min-height: 42px; }
.offline-secondary-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.offline-secondary-actions > button { width: 100%; min-width: 0; font-weight: 600; box-shadow: none; }
.offline-secondary-actions #offline-check { background: #eef2ff; color: #5263a0; border: 1px solid #dce3fa; }
.offline-secondary-actions #offline-sync { background: #fff5e6; color: #99702b; border: 1px solid #f1dfbc; }
.offline-secondary-actions #offline-check:hover { background: #e3e9fc; }
.offline-secondary-actions #offline-sync:hover { background: #fceccc; }
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary strong { display: block; font-size: 17px; color: #24433f; }
.settings-group > summary span { display: block; margin-top: 4px; font-size: 12px; color: #82909c; }
.settings-group > summary::after { content: '›'; position: absolute; right: 18px; top: 18px; color: #93a4ad; font-size: 24px; transition: transform .15s; }
.settings-group[open] > summary::after { transform: rotate(90deg); }
.settings-group[open] > summary { border-bottom: 1px solid #edf1f3; }
.settings-group-body { padding: 14px; display: grid; gap: 12px; }
.settings-group-body > .bg-white { border: 0; padding: 0 !important; box-shadow: none; }
.settings-group-body p { font-size: 13px; line-height: 1.55; color: #73818e; margin: 8px 0; }
.settings-group-body button, .settings-group-body select, .settings-group-body input:not([type=checkbox]):not([type=file]) { min-height: 40px; border-radius: 11px; }
.settings-group-body #offline-download { margin: 10px 0; }
.settings-group-body #offline-status { background: #edf8f4; color: #157568; padding: 10px; border-radius: 10px; }
.settings-group-body #class-panel { margin: 0; }
/* Shared visual finish; layout and interaction remain unchanged. */
:root { --app-ink: #203a36; --app-muted: #80918b; --app-line: #e7eeeb; --app-surface: #f3f6f5; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.app-container { color: var(--app-ink); }
.app-container > header { background: linear-gradient(115deg, #155d54, #12776a); box-shadow: 0 2px 12px #163b3310; border-bottom: 1px solid #ffffff12; }
.app-container > header h1 { letter-spacing: .3px; font-weight: 700 !important; }
.app-container > header p { color: #b9dcd3; letter-spacing: .3px; }
.app-container > header > div:first-child > div:first-child { background: #f2d58b; color: #234d43; box-shadow: none; border-radius: 11px; }
#btn-user-auth { background: #ffffff10; border-color: #ffffff26; color: #f0faf6; }
.app-container > main, #tab-settings, .teacher-page { background: var(--app-surface); }
#tab-home > .bg-white, #tab-words > .bg-white { border-color: var(--app-line); border-radius: 18px; box-shadow: 0 3px 14px #244b3b04; }
#tab-home > .bg-white { padding: 12px; }
#tab-home > .bg-gradient-to-br { background: linear-gradient(135deg, #177d70, #135c53); border: 1px solid #ffffff20; border-radius: 22px; box-shadow: 0 8px 24px #165e4f16; }
#dash-today-target { letter-spacing: -.5px; }
#dash-review-count, #dash-done-count, #dash-mastered-count { font-variant-numeric: tabular-nums; font-size: 25px !important; font-weight: 650; }
#btn-start-study-main { background: #f1d388; color: #254a3d; border: 1px solid #ffe6a6; box-shadow: 0 3px 8px #073e3918; border-radius: 13px; }
#btn-start-study-main { flex-shrink: 0; white-space: nowrap; overflow-wrap: normal; }
#btn-start-study-main > span { white-space: nowrap; }
#btn-create-custom-book { background: #eff7f3; border-color: #dceae3; color: #2a7865; }
#calendar-month-title { background: #edf5f0; color: #417b68; }
.calendar-day { border-radius: 7px; font-variant-numeric: tabular-nums; }
.app-container > nav { border-top-color: var(--app-line); box-shadow: 0 -3px 14px #244b3b05; }
.app-container > nav .nav-selected { color: #167562 !important; }
.nav-selected .nav-icon { background: #e3f1e9; }
.nav-icon svg { stroke-width: 1.65; }
.settings-group { border-color: var(--app-line); box-shadow: 0 2px 9px #244b3b03; }
.settings-group > summary { background: #d8eae2; border-left: 4px solid #7caa95; }
.settings-group > summary strong { font-weight: 700; color: #214c3e; }
.settings-group > summary span { color: #536e61; }
.settings-group > summary::after { color: #436c59; }
.settings-group[open] > summary { background: #cce3d7; }
.settings-group { border-color: #c9dbd1; }
.settings-group[open] > summary { border-bottom-color: var(--app-line); }
.settings-group-body input:not([type=checkbox]):not([type=file]), .settings-group-body select, #class-filter, #word-search-input { background-color: #f8faf9; border-color: #e1e9e5; color: #36554a; box-shadow: none; }
.settings-group-body .bg-teal-600, .teacher-page .bg-teal-600 { background-color: #217e6b; box-shadow: none; }
.teacher-student summary em { padding: 2px 6px; background: #faf1df; border-radius: 6px; }
.teacher-student summary em.complete { background: #e0f1e7; color: #26745a; }
.teacher-account-fold { border-top: 1px solid var(--app-line); padding-top: 4px; }
.student-account-actions > button { background: #fff; }
.compact-word > summary { padding-inline: 16px; }
.compact-word[open] > summary { background: #edf5f0; }
.compact-word-body { background: #fcfdfc; color: #496057; }
#study-card { border-color: var(--app-line); border-radius: 20px; box-shadow: 0 4px 16px #244b3b05; }
#study-word { color: #254e43; letter-spacing: -.5px; }
#study-context-box { border-radius: 12px; }
#study-phonetic { color: #899990; }
#choices > [data-answer] { border-radius: 13px; box-shadow: 0 2px 5px #244b3b03; }
#pwa-install-banner { background: #eaf3ee; border-color: #d7e8de; color: #3e7460; box-shadow: none; }
#pwa-install-banner button { color: #678b79; }
#dismiss-install-banner { flex: 0 0 36px; min-width: 36px; min-height: 40px; padding: 0; }
.student-vault-header { background: #edf4f0; }
button { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
button:focus-visible, summary:focus-visible { outline: 2px solid #639f89; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { button, .nav-icon { transition: none; } }
/* Reading can scroll independently; answer controls remain above navigation. */
#tab-study:not(.hidden) { overflow: hidden; min-height: 0; }
#tab-study #study-body { flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; justify-content: stretch; justify-items: stretch; gap: 8px; overflow: hidden; }
#study-reading { width: 100%; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#tab-study #study-card { min-height: 0; padding: 10px; justify-content: flex-start; }
#quiz-options-container { width: 100%; min-width: 0; margin: 0; }
#study-card, #choices, #answer-feedback { width: 100%; min-width: 0; }
#quiz-options-container > * + * { margin-top: 5px; }
#answer-feedback { display: grid; grid-template-rows: 24px 52px; gap: 4px; }
#answer-feedback-message { margin: 0; font-size: 14px; line-height: 24px; text-align: center; overflow: hidden; }
#answer-feedback #mnemonic-next { margin: 0; min-height: 52px !important; }
#mnemonic-next:disabled { background: #e2e8f0; color: #64748b; cursor: default; }
#choices { grid-template-rows: repeat(4, 54px) 30px; gap: 5px; }
#choices > [data-answer] { min-height: 0; max-height: 54px; overflow-y: auto; }
#quiz-options-container .completion-card { margin: 0; }
@media (max-height: 650px) {
 #choices { grid-template-rows: repeat(4, 44px) 26px; gap: 4px; }
 #answer-feedback { grid-template-rows: 22px 44px; gap: 3px; }
 #answer-feedback #mnemonic-next { min-height: 44px !important; }
}
@media (max-width: 370px) {
 .app-container > header { flex-wrap: wrap; }
 .app-container > header > div:last-child { margin-left: auto; }
 #study-card-stage-badge { max-width: 55%; }
}