.app.app--shell.app--reading{display:block;min-height:100dvh;background:var(--bg,#f5f5fc)}.app--reading .app-shell{width:100%;min-width:0}.app--reading .reading-page{padding:32px 24px;max-width:none;width:100%;margin:0}.reading-page{padding:24px}.reading-shell{max-width:1040px;margin:0 auto;background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:22px;padding:28px 36px;color:var(--text,#17213b)}
.reading-top>div{min-width:0}.reading-top h1{overflow-wrap:anywhere}.reading-settings-button{font-size:12px!important;padding:8px 12px;white-space:nowrap}.reading-settings{padding:16px;background:var(--surface-2,#f1f5f9);border-radius:12px;margin:12px 0}.reading-settings label{min-height:32px}.app--reading .reading-shell{min-height:min(720px,calc(100dvh - 64px))}@media(max-width:700px){.app--reading .reading-page{padding:12px 10px}.app--reading .reading-shell{min-height:calc(100dvh - 24px)}.reading-settings-button{padding:8px;font-size:11px!important}.reading-counter{font-size:12px}}
.reading-shell [hidden]{display:none!important}.reading-shell button,.reading-shell select,.reading-shell a{font:inherit}.reading-shell button{cursor:pointer}.reading-shell button:disabled{opacity:.45;cursor:not-allowed}.reading-shell :focus-visible{outline:3px solid var(--primary,#6366f1);outline-offset:4px}.reading-top{display:flex;gap:16px;align-items:center}.reading-top h1{font-size:18px;line-height:1.5;margin:0;font-weight:650}.reading-eyebrow{font-size:12px;color:var(--text-3,#64748b);margin:0 0 6px;letter-spacing:.04em}.reading-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface-2,#f1f5f9);font-size:28px!important;text-decoration:none;color:inherit;flex-shrink:0}.reading-counter{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-3,#64748b);white-space:nowrap;font-size:13px}.reading-progress{display:block;appearance:none;border:0;width:100%;height:5px;border-radius:9px;margin:20px 0 14px;background:var(--primary-soft,#eef2ff);overflow:hidden}.reading-progress::-webkit-progress-bar{background:var(--primary-soft,#eef2ff)}.reading-progress::-webkit-progress-value{background:var(--primary,#6366f1);border-radius:9px}.reading-progress::-moz-progress-bar{background:var(--primary,#6366f1)}
.reading-status{min-height:24px;color:var(--text-2,#475569);font-size:13px;line-height:1.7;margin:8px 0}.reading-status.is-error{color:var(--danger,#c2410c)}.reading-prepare{padding:40px 12px 48px}.reading-prepare h2,.reading-summary h2{font-size:28px;font-weight:650;line-height:1.4;margin:12px 0}.reading-prepare>p{color:var(--text-2,#475569);line-height:1.8}.reading-mode{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0 20px}.reading-mode button{padding:24px;text-align:left;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:var(--surface,#fff);color:inherit;transition:background .15s,border-color .15s}.reading-mode button[aria-pressed=true]{border-color:var(--primary,#6366f1);background:var(--primary-soft,#eef2ff)}.reading-mode b{display:block;font-size:18px;margin-bottom:10px}.reading-mode span{font-size:13px;color:var(--text-2,#475569);line-height:1.7}.reading-primary,.reading-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:10px 19px;border:1px solid transparent;border-radius:10px;text-decoration:none;line-height:1.4}.reading-primary{color:#fff;background:var(--primary,#6366f1)}.reading-primary:hover{background:var(--primary-strong,#4f46e5)}.reading-secondary{color:var(--text-2,#475569);background:var(--surface-2,#f1f5f9);border-color:var(--border,#e5e7eb)}.reading-secondary:hover{color:var(--primary-strong,#4f46e5)}.reading-text-button{border:0;background:none;color:var(--primary-strong,#4f46e5);padding:12px 16px}.reading-note{font-size:12px!important;color:var(--text-3,#64748b)!important;line-height:1.8}.reading-quota{color:var(--primary-strong,#4f46e5);font-size:13px}.reading-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--text-2,#475569)}.reading-toolbar label{display:flex;align-items:center;gap:6px}.reading-toolbar select{background:var(--surface,#fff);color:inherit;border:1px solid var(--border,#e5e7eb);border-radius:8px;padding:8px}.reading-toolbar>button{margin-left:auto;font-size:12px;min-height:36px}.reading-context{max-height:260px;overflow:auto;border:1px solid var(--border,#e5e7eb);border-radius:12px;margin:16px 0;padding:8px}.reading-context button{display:block;width:100%;border:0;background:none;color:inherit;line-height:1.7;text-align:left;padding:10px;border-radius:8px}.reading-context button[aria-current=true]{background:var(--primary-soft,#eef2ff);color:var(--primary-strong,#4f46e5)}
.reading-sentence{text-align:center;padding:44px 12px 10px}.reading-sentence #rd-en{font-size:clamp(26px,3vw,40px);line-height:1.55;margin:16px auto 10px;max-width:880px;text-wrap:pretty;overflow-wrap:anywhere}.reading-sentence #rd-zh{font-size:16px;line-height:1.8;color:var(--text-2,#475569);margin:0 0 20px;min-height:29px}.reading-recorder{margin:28px 0 16px;display:flex;flex-direction:column;align-items:center}.reading-mic{width:70px;height:70px;border-radius:50%;border:0;background:var(--primary,#6366f1);color:#fff;display:grid;place-items:center;transition:transform .15s}.reading-mic:hover{transform:scale(1.04)}.reading-mic svg{width:29px;height:29px}.reading-mic.is-recording{background:var(--danger,#dc2626);animation:reading-pulse 1.2s ease-in-out infinite}.reading-recorder p{font-size:13px;color:var(--text-2,#475569);margin:10px 0 4px}.reading-time{font-size:12px;min-height:18px;font-variant-numeric:tabular-nums;color:var(--text-3,#64748b)}.reading-recording-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.reading-recording-actions button{font-size:12px;min-height:36px}.reading-result{margin:16px auto 24px;max-width:760px}.reading-result>p{font-size:12px;color:var(--text-3,#64748b)}.reading-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.reading-score{border:1px solid var(--border,#e5e7eb);border-radius:13px;padding:18px}.reading-score span{font-size:12px;color:var(--text-3,#64748b)}.reading-score b{display:block;font-size:29px;line-height:1.7}.reading-score:first-child{background:var(--primary-soft,#eef2ff);border-color:transparent}.reading-score:first-child b{color:var(--primary-strong,#4f46e5)}.reading-words{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:25px 0 14px}.reading-words button{font-size:22px;line-height:1.7;background:none;border:0;border-bottom:2px solid currentColor;padding:2px 4px}.reading-good{color:#14815f}.reading-fair{color:#a5670b}.reading-weak{color:#cf3e57}.reading-unknown{color:var(--text-3,#64748b)}.reading-legend{text-align:center;font-size:12px;color:var(--text-3,#64748b)}.reading-word-detail{background:var(--surface-2,#f1f5f9);padding:16px;border-radius:10px;line-height:1.8;font-size:14px}.reading-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border,#e5e7eb);padding-top:20px;margin-top:26px;gap:12px}.reading-bottom span{font-size:12px;color:var(--text-3,#64748b)}.reading-center{text-align:center}.reading-summary{padding:36px 10px;text-align:center}.reading-summary p{line-height:1.8;color:var(--text-2,#475569)}#rd-weak{display:grid;gap:8px;margin:20px 0;text-align:left}#rd-weak button{text-align:left;border:1px solid var(--border,#e5e7eb);border-radius:9px;background:var(--surface-2,#f1f5f9);color:inherit;padding:12px;line-height:1.6}
@keyframes reading-pulse{50%{box-shadow:0 0 0 8px rgba(220,38,38,.08)}}@media(prefers-reduced-motion:reduce){.reading-shell *{animation:none!important;transition:none!important}}@media(max-width:700px){.reading-page{padding:10px}.reading-shell{padding:20px 16px;border-radius:16px}.reading-mode{grid-template-columns:1fr}.reading-prepare{padding:20px 0}.reading-prepare h2,.reading-summary h2{font-size:24px}.reading-sentence{padding:28px 0 8px}.reading-toolbar{gap:10px}.reading-toolbar>button{margin-left:0}.reading-scores{grid-template-columns:repeat(2,1fr);gap:10px}.reading-score{padding:12px 16px}.reading-sentence #rd-zh{font-size:14px}.reading-top h1{font-size:16px}.reading-bottom span{max-width:90px;text-align:center}.reading-top{gap:10px}.reading-words button{font-size:20px}}
/* This reader grows with score details; it must never inherit the one-screen study stage. */
.app.app--shell.app--reading{height:auto;max-height:none;overflow:visible}.app.app--reading>.app-shell{height:auto;max-height:none;overflow:visible}.app--reading .reading-page{overflow:visible;padding-bottom:48px}.reading-status:empty{min-height:0;margin:0}.reading-sentence{padding-top:26px}.reading-recorder{margin-top:20px}.reading-word-detail{overflow-wrap:anywhere}.reading-preparation-dialog{position:fixed;margin:auto;width:min(780px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;border:1px solid var(--border);border-radius:20px;background:var(--surface);padding:32px;color:var(--text)}.reading-preparation-dialog::backdrop{background:#14172566;backdrop-filter:blur(5px)}.reading-dialog-close{position:absolute;right:16px;top:12px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;text-decoration:none;background:var(--surface-2);color:var(--text-3);font-size:24px!important}.reading-preparation-dialog .reading-mode{margin-top:20px}@media(max-width:700px){.reading-preparation-dialog{padding:26px 20px}.app--reading .reading-page{padding-bottom:32px}}
/* Override the shared shell grid even when no sidebar element is rendered. */
.app.app--shell.app--reading{display:block!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important}.app.app--shell.app--reading>.app-shell{grid-column:auto!important;width:100%;min-height:100dvh}
.app.app--shell.app--reading{background:var(--surface-2,#f6f7fc)!important}
#rd-reference kbd{display:inline-block;margin-left:6px;padding:1px 5px;border:1px solid var(--border);border-radius:4px;font-size:11px;font-family:inherit;color:var(--text-3)}

.reading-study-time{display:flex;justify-content:flex-end;margin:8px 0;color:var(--text-3,#64748b)}
/* Subtle score-card decoration; icons supplement the metric names. */
.reading-result>p:first-child{margin-bottom:10px}.reading-score{background:var(--surface,#fff);border-radius:18px;padding:20px 18px 16px;box-shadow:0 3px 5px rgba(30,41,59,.04),0 8px 20px rgba(30,41,59,.035)}.reading-score .reading-score-label{display:flex;align-items:center;gap:7px;margin-bottom:9px;line-height:1.5}.reading-score-label svg{width:18px;height:18px;flex:none;color:var(--text-3,#64748b)}.reading-score b{display:inline-block;font-size:36px;font-weight:700;line-height:1.25;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.reading-score small{font-size:12px;margin-left:6px;color:var(--text-3,#64748b)}.reading-score:first-child{box-shadow:0 4px 14px rgba(99,102,241,.08);border:1px solid var(--primary-soft-2,#e0e7ff)}.reading-score:first-child .reading-score-label svg{color:var(--primary-strong,#4f46e5)}
@media(max-width:700px){.reading-score{padding:16px}.reading-score b{font-size:32px}.reading-score-label svg{width:17px;height:17px}}
/* On-demand guidance remains a compact part of the existing, scrollable result. */
.reading-advice{margin-top:24px;padding:18px 20px;border:1px solid #ccfbf1;border-radius:16px;background:linear-gradient(135deg,#f0fdfa,#fff);text-align:left}
.reading-advice-toggle{display:inline-flex;align-items:center;color:#0f766e;font-weight:650;font-size:15px;cursor:pointer;border:0;background:transparent;padding:4px 0}
.reading-advice-toggle:focus-visible{outline:2px solid #0d9488;outline-offset:5px;border-radius:4px}
.reading-advice-toggle:disabled{opacity:.6;cursor:wait}
.reading-advice>small{display:block;color:#64748b;font-size:12px;margin-top:5px}
.reading-advice-content{margin-top:18px;color:#334155;font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.reading-advice-caption{font-size:12px;color:#64748b;margin-bottom:12px}
.reading-advice-focus{padding:10px 14px;border-left:3px solid #5eead4;border-radius:0 8px 8px 0;background:#fff;margin:10px 0}
.reading-advice-focus b{color:#0f766e}.reading-advice-focus p{margin:3px 0 0}
.reading-advice-content ol{list-style:decimal;padding-left:22px;margin:14px 0}
.reading-advice-comparison{border-top:1px solid #dceeea;padding-top:12px;color:#475569;font-size:12px}
.reading-advice>.reading-note{margin:10px 0 0;line-height:1.7}
@media(max-width:600px){.reading-advice{padding:16px}.reading-advice-content{font-size:14px}}