/* Porcelain blue palette. Red is reserved for the current step, seal, review count and focus. */
:root{color-scheme:light;--bg:#f7f8fa;--white:#ffffff;--ink:#1a2233;--muted:#5a6578;--green:#27408b;--accent:#c0392b;--light:#e8ecf7;--line:#dce1eb;--on-brand:#ffffff;--shadow:0 5px 24px #1a223306}
:root[data-theme="dark"]{color-scheme:dark;--bg:#10141d;--white:#181e2b;--ink:#e8edf7;--muted:#aab5c8;--green:#8fa8ee;--accent:#e5695a;--light:#252f47;--line:#343f54;--on-brand:#10141d;--shadow:0 5px 24px #00000012}
body{background:var(--bg);color:var(--ink)}
button,input,select,textarea,.sidebar,.pill,.stats,.card,.practice-card,.panel,.bubble{background:var(--white);color:var(--ink)}
header{background:var(--bg);color:var(--muted);gap:12px}
nav a,.nav-label,.slash,footer,.hero .ko,.hero-meta,.answer p,.sentence-pinyin{color:var(--muted)}
.brand-icon,.primary,button.primary,.tabs button.selected,#toast,button.coral{background:var(--green);color:var(--on-brand);border-color:var(--green)}
.eyebrow,.practice-card .number,.pinyin,.card a,.stat strong{color:var(--green)}
.hero,.banner,.sound-orb,.answer,.notice,.offline,.lesson-choice.selected{background:var(--light)}
.hero{border:0;padding:36px 38px;box-shadow:var(--shadow)}
.hero .hero-art{min-width:0}.hero .sentence-pinyin{font-size:15px;margin:0 0 8px}
.hero .hero-art .sentence-pinyin{font-size:13px;max-width:230px;letter-spacing:0}
.bubble{border-color:var(--line);box-shadow:var(--shadow)}
.round{border-color:var(--line)}
.round:after{content:'学';top:-24px;right:0;bottom:auto;border:2px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent);width:48px;height:48px;transform:rotate(8deg)}
.stats,.card,.panel{border-color:transparent;box-shadow:var(--shadow)}
.card .icon,.card:nth-child(2) .icon,.card:nth-child(3) .icon{background:var(--light);color:var(--green)}
.lesson-choice.selected{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.progress{background:var(--light)}.progress i{background:var(--green)}
.prompt-ko{background:var(--bg)}
.notice{color:var(--muted);border-left-color:var(--green)}
.recording{background:var(--green)!important;color:var(--on-brand)!important;outline:2px solid var(--green);outline-offset:3px}
.stat:last-child strong,#review-count,.current-step{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
input[type="checkbox"]{accent-color:var(--green)}
.header-actions{display:flex;align-items:center;gap:12px}.theme-toggle{font-size:12px;padding:8px 12px;white-space:nowrap}
@media(max-width:760px){header{height:auto;min-height:58px;padding:12px 18px;flex-wrap:wrap}.header-actions{gap:8px}.hero{padding:26px}.hero h1{font-size:26px}.hero .sentence-pinyin{font-size:14px}.sidebar select#grade{position:static;width:100%;margin-top:16px}.sidebar #lesson-select{margin-top:8px}.brand small{display:block;margin-left:0}.academy-name{font-size:21px}}

.board-item{display:block;width:100%;text-align:left;margin:0 0 12px;padding:20px}.board-item strong{display:block;margin:12px 0;overflow-wrap:anywhere}.board-item small{display:block;overflow-wrap:anywhere}.board-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;font-size:16px}
:root .locked .sidebar, :root .locked header, :root .locked footer {display:none}
:root .locked .shell {margin-left:0;max-width:760px;margin-inline:auto;padding-top:60px}
.account-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 32px;font-size:13px}
.account-strip #sync-status{flex:1}.student-card{padding:20px 0;border-bottom:1px solid var(--border,#dce2ec)}
.student-card summary{cursor:pointer;line-height:2}.student-card progress{width:100%;accent-color:#27408b}
#invite-result input{font-family:monospace;font-size:18px}

/* Shared phone/tablet layout, including authentication and teacher forms. */
main,.shell,.panel,.card,.student-card,.account-strip>*,.dialog-line>*,.row>*{min-width:0}
.panel,.card,.answer,.prompt-ko,.zh,.student-card,.account-strip{overflow-wrap:anywhere}
.auth-panel{max-width:600px;margin-inline:auto}.auth-panel input{width:100%;font-size:16px}
.auth-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.auth-links button{font-size:13px}
.auth-panel #auth-status{color:var(--accent)}
.recovery-dialog{max-width:min(600px,calc(100vw - 32px));border:1px solid var(--line);border-radius:16px;background:var(--white);color:var(--ink);padding:24px}
.recovery-dialog::backdrop{background:#10141d99}.recovery-dialog input{font-family:monospace;width:100%}
@media(max-width:760px){
 .sidebar{padding-top:max(16px,env(safe-area-inset-top));border-right:0}
 .sidebar select#grade,.sidebar select#lesson-select{position:static;width:100%;font-size:16px;min-height:44px}
 nav{overscroll-behavior-x:contain;scroll-padding:10px;scrollbar-width:thin}
 nav a{min-height:44px;flex-shrink:0;align-items:center}
 button,.sign-in,input,select{min-height:44px}input,select,textarea{font-size:16px}
 .small,button.small,.theme-toggle{min-height:44px}
 header{gap:8px}.header-actions{flex-wrap:wrap}.account-strip{padding:12px 18px;gap:10px}
 .account-strip #sync-status{flex-basis:100%;order:2;font-size:12px}
 .account-strip button{flex:1 1 auto}.page-heading{flex-wrap:wrap}
 .practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stat{padding:0 9px}.stat span{display:block}
 .dialog-line{grid-template-columns:36px minmax(0,1fr)}.dialog-line>button{grid-column:2;justify-self:start}
 .hero-meta{flex-wrap:wrap}.tabs button{flex:1 1 auto}.wordcard .word{overflow-wrap:anywhere}
 .locked .shell{padding-top:12px!important}.auth-links button{flex:1 1 auto}
 footer{padding-bottom:max(20px,env(safe-area-inset-bottom))}
 #toast{max-width:calc(100vw - 32px);width:max-content;bottom:max(20px,env(safe-area-inset-bottom));overflow-wrap:anywhere}
}
@media(max-width:360px){.practice-grid{grid-template-columns:1fr}.panel{padding:16px}.hero{padding:20px}.header-actions .pill{display:none}}
@media(prefers-reduced-motion:reduce){button,.progress i{transition:none}button:hover{transform:none}}

.recording-item audio{width:100%;margin:12px 0}.record-consent{display:flex;gap:10px;text-align:left;align-items:flex-start;margin:18px 0;line-height:1.65}.record-consent input{width:22px;height:22px;flex-shrink:0}.recording-file{margin:16px 0}.feedback-text{white-space:pre-wrap;overflow-wrap:anywhere}.recording-item form{margin-top:20px}.recording-item textarea{width:100%;box-sizing:border-box}