/* Naar workspace · editorial-greeting · existing green identity retained. */
:root{
 --ground:#f1f4f2;--surface:#fff;--raised:#f6f8f6;--active:#e8ede9;
 --line:#e2e7e3;--control:#bbc7bf;--ink:#202b25;--muted:#59685e;
 --green:#176a51;--green-hover:#10543f;--pale:#eaf3ee;--red:#a8303a;
 --radius:16px;--control-radius:8px;--gap:16px;--pad:32px;
 --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:80px;scrollbar-color:#aebdb3 var(--ground)}
html,body{margin:0;padding:0}
body{font:16px/1.65 var(--font);background:var(--ground);color:var(--ink);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
::selection{background:#cce6d8;color:#123c2b}
button,input,textarea,select{font:inherit;caret-color:var(--green)}
button{cursor:pointer;transition:background-color .15s,border-color .15s;color:inherit}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:3px}
#view:focus{outline:0}
a{color:var(--green);text-underline-offset:4px}
button svg{width:20px;height:20px;flex:none;vertical-align:middle}
button{touch-action:manipulation}
[hidden],.hidden{display:none!important}
.skip-link{position:fixed;top:8px;left:240px;transform:translateY(-150%);z-index:500;background:var(--ink);color:white;padding:12px 20px;border-radius:8px}
.skip-link:focus{transform:none}
/* Sheet: 1100px = twelve 77px columns + eleven 16px gutters. */
body.ui-v8[data-page] #app{max-width:none;min-height:calc(100dvh - 16px);margin:8px 8px 8px 228px;padding:48px var(--pad) 64px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
body.ui-v8[data-page] #view{width:100%;max-width:1100px;min-width:0;margin:0 auto}
.app-brand{position:fixed;top:38px;left:28px;width:176px;z-index:30}
.brand-home{padding:0;border:0;background:none;text-align:left;display:block;min-height:56px}
.wordmark{display:block;color:var(--ink);font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.2}
.wordmark>span{color:var(--green)}
.brand-caption{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.brand-scope{position:fixed;bottom:32px;left:28px;font-size:13px;color:var(--muted)}
body.ui-v8[data-page] #tabs{position:fixed;top:152px;left:16px;bottom:auto;right:auto;width:196px;display:flex;flex-direction:column;gap:6px;background:none;border:0;border-radius:0;box-shadow:none;z-index:30;margin:0;max-width:none}
body.ui-v8[data-page] #tabs .tabbtn{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:48px;margin:0;padding:12px 16px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:15px;font-weight:500;line-height:1.3;white-space:nowrap}
body.ui-v8[data-page] #tabs .tabbtn:hover{background:var(--active);color:var(--ink)}
body.ui-v8[data-page] #tabs .tabbtn.active{background:var(--active);color:var(--ink);font-weight:600}
#tabs .tabbtn.active svg{color:var(--green)}
#view h1{font-size:28px;line-height:1.35;font-weight:650;letter-spacing:-.02em;margin:0 0 12px;text-wrap:balance}
#view h2{font-size:18px;line-height:1.45;font-weight:600;margin:0 0 16px}
#view h3{font-size:17px;font-weight:600;line-height:1.5}
p{margin:0 0 16px}
.tabtitle{margin-bottom:24px!important}
.block{padding:24px;margin-bottom:16px;background:var(--raised);border:0;border-radius:var(--radius);min-width:0;box-shadow:none}
.bstatus{font-size:14px;color:var(--muted);margin:0 0 16px;line-height:1.65}
.bstatus:empty{display:none}
.bstatus.ok{color:var(--green)}
.empty{padding:48px 24px;background:var(--raised);border-radius:var(--radius);text-align:center;color:var(--muted);margin:16px 0 24px;line-height:1.7}
/* Daily sequence: lead task across eight columns, related work across four. */
body[data-page=today] #view{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.dayhead{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 20px;margin-bottom:16px;background:none;padding:0;border:0;box-shadow:none;color:var(--ink)}
#view .dayhead h1{grid-column:1;margin:0;font-size:28px}
.day-subtitle{grid-column:1;font-size:14px;color:var(--muted);margin:0}
.streak{grid-column:2;grid-row:1/3;font-size:14px;color:var(--muted);font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
.task-words{grid-column:span 8}.task-review{grid-column:span 4}.task-speaking{grid-column:span 8}.checkin{grid-column:span 4;padding:24px;background:var(--raised);border-radius:var(--radius)}
body[data-page=today] .block{margin:0;align-self:stretch}
body[data-page=today] .task-words:has(.wcard){grid-column:span 8;grid-row:span 2}
.bigbtn,.dkbtn,.nextbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:12px 20px;margin:16px 0 0;border:0;border-radius:var(--control-radius);font-size:16px;font-weight:600;line-height:1.5;color:#fff;background:var(--green);box-shadow:none}
.bigbtn:hover,.dkbtn:hover,.nextbtn:hover{background:var(--green-hover)}
.bigbtn:disabled,.dkbtn.disabled{background:var(--active);color:var(--muted)}
.dkhint{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.6}
.smbtn,.sbtn,.r-btn,.m-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 14px;border:1px solid var(--control);border-radius:var(--control-radius);background:var(--surface);color:var(--ink);font-size:14px;line-height:1.5;font-weight:500;box-shadow:none}
.smbtn:hover,.sbtn:hover,.r-btn:hover,.m-toggle:hover{background:var(--active)}
.sbtn.on,.m-toggle.on{background:var(--pale);color:var(--green);border-color:var(--green)}
.secondary-action{background:var(--raised);color:var(--ink);border:1px solid var(--control)}
.secondary-action:hover{background:var(--active)}
body[data-page=review] #view{max-width:780px}
body[data-page=review] #view>.bigbtn{margin-bottom:16px}
body[data-page=review] #view>div:has(>.empty){max-width:780px}
/* Focused vocabulary card; each action keeps its word, color is supplementary. */
.wcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-width:0}
.wcard-top{display:flex;justify-content:flex-end;margin-bottom:16px}
.w-nlrow{display:flex;align-items:center;justify-content:center;gap:12px;margin:28px 0}
.w-nl{font-size:32px;font-weight:600;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.w-zh{font-size:22px;font-weight:600;text-align:center;margin:16px 0}
.w-exrow{display:flex;align-items:center;gap:12px;background:var(--raised);border-radius:8px;padding:16px;margin:16px 0}
.w-ex{flex:1;min-width:0;font-size:17px;line-height:1.7}
.w-exzh{font-size:14px;color:var(--muted);margin-bottom:24px;text-align:center}
.speak,.r-para-speak,.r-vocab-speak{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;border:1px solid var(--control);border-radius:50%;background:var(--surface);color:var(--green);box-shadow:none}
.speak:hover,.r-para-speak:hover,.r-vocab-speak:hover{background:var(--pale)}
.prog{font-size:14px;color:var(--muted);margin:0 0 12px;font-variant-numeric:tabular-nums}
.grades{display:flex;gap:8px;margin-top:24px}
.gbtn{flex:1;min-height:48px;padding:10px 8px;border-radius:8px;border:1px solid var(--control);font-size:15px;font-weight:600;background:white}
.g-good{background:var(--green);border-color:var(--green);color:white}.g-hard{color:#81520d;background:#fff8e9;border-color:#d8c5a2}.g-again{color:var(--red);background:#fff2f2;border-color:#dec0c1}
.qimg{padding:16px;background:var(--pale);color:#28533d;border-radius:8px;font-size:14px;margin-bottom:16px}
.qnl{font-size:20px;font-weight:600;line-height:1.6;margin-bottom:12px}
.qzh,.ref-zh,.point,.speak-hint{font-size:14px;color:var(--muted);margin:8px 0 16px}
textarea.ans{width:100%;min-height:120px;padding:14px;border:1px solid var(--control);border-radius:8px;background:var(--surface);font-size:16px;resize:vertical;line-height:1.7}
textarea::placeholder,input::placeholder{color:var(--muted);opacity:1}
.feedback{white-space:pre-wrap;line-height:1.7;padding:16px;margin:16px 0;background:var(--pale);border-radius:8px;color:#28533d}
.feedback:empty{display:none}
.btnrow,.r-controls{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.micbtn{background:var(--green);color:white;border-color:var(--green)}
details.ref{margin:16px 0;border-radius:8px;background:var(--surface);padding:0 16px;border:1px solid var(--line)}
details.ref summary{cursor:pointer;min-height:48px;align-content:center;color:var(--green);font-weight:600}
.ref-nl{margin:12px 0;font-size:17px}.mockq{padding:24px 0;border-top:1px solid var(--line)}.parttitle{margin:24px 0 16px}
/* Reading and grammar: real titles, two-column catalogues, one-column reading measure. */
.r-progress{font-size:14px;color:var(--muted);margin:0 0 24px;font-variant-numeric:tabular-nums;text-align:left}
.r-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.r-card{width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0;min-height:168px;padding:24px;border:1px solid var(--line);background:white;border-radius:var(--radius);box-shadow:none}
.r-card:hover{background:var(--raised);border-color:#aebfb3}
.r-card-header,.r-article-header{display:flex;gap:8px;align-items:center;margin-bottom:16px}
.r-level,.r-topic{background:var(--raised);color:var(--muted);font-size:13px;border-radius:4px;padding:2px 8px;font-weight:500;white-space:nowrap}
.r-level{background:var(--pale);color:var(--green)}
.r-done{margin-left:auto;font-size:13px;color:var(--green)}
.r-title-nl{font-size:20px;font-weight:600;line-height:1.4;margin-bottom:8px}
.r-title-zh,.r-article-subtitle{font-size:15px;color:var(--muted);margin-bottom:16px}
.r-meta{font-size:14px;color:var(--muted);margin-top:auto}
.r-back{border:0;background:none;padding:10px 0;min-height:44px;margin:0 0 16px;color:var(--green);font-size:14px;font-weight:500}
#view:has(>.r-article-title){max-width:780px}
#view h1.r-article-title{margin-bottom:8px;overflow-wrap:anywhere}
.r-body{margin:28px 0 40px}
.r-para{position:relative;background:var(--raised);padding:24px 80px 24px 24px;border-radius:var(--radius);margin-bottom:16px}
.r-para:not(:has(.r-para-speak)){padding:24px}
.r-para-nl{display:block;width:100%;font-size:18px;line-height:1.85;border:0;background:none;padding:0;text-align:left;color:var(--ink)}
.r-para-zh{font-size:15px;color:var(--muted);line-height:1.85;padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.r-para-speak{position:absolute;right:20px;top:20px}
.r-section{margin:40px 0}.r-vocab-list{display:flex;flex-direction:column}
.r-vocab-item{display:grid;grid-template-columns:minmax(120px,1fr) minmax(100px,1fr) 44px;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.r-vocab-nl{font-size:16px;font-weight:600;overflow-wrap:anywhere}.r-vocab-zh{font-size:15px;color:var(--muted)}
.r-question{padding:24px;background:var(--raised);border-radius:var(--radius);margin-bottom:16px}
.r-q-text{font-size:18px;font-weight:600;margin:0 0 8px}.r-q-zh{font-size:14px;color:var(--muted);margin:0 0 16px}
.r-options{display:flex;flex-direction:column;gap:8px}
.r-option{text-align:left;min-height:48px;padding:12px 16px;font-size:16px;border:1px solid var(--control);border-radius:8px;background:white}
.r-option:hover{background:var(--active)}.r-option.correct{background:var(--pale);border-color:var(--green);color:var(--green)}.r-option.wrong{background:#fff1f1;border-color:var(--red);color:var(--red)}
.answer-feedback{font-size:14px;margin:16px 0 0;color:var(--ink)}.answer-feedback:empty{display:none}
/* Vocabulary, practice and preferences keep expandable detail close to its label. */
body[data-page=more] #view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
body[data-page=more] .tabtitle{grid-column:1/-1;margin-bottom:8px!important}
body[data-page=more] #view>.block{margin:0;scroll-margin-top:88px}
.more-shortcuts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.more-shortcuts a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:8px;background:var(--raised);color:var(--ink);text-decoration:none;font-size:14px}
.more-shortcuts a:hover{background:var(--active)}
body[data-page=more] .more-vocab{grid-column:1;grid-row:3/6}
body[data-page=more] .more-relearn{grid-column:2;grid-row:3}
body[data-page=more] .more-speaking{grid-column:2;grid-row:4}
body[data-page=more] .more-settings{grid-column:2;grid-row:5}
.cathead{display:block;width:100%;min-height:52px;padding:12px 16px;margin:8px 0;border:1px solid var(--line);border-radius:8px;background:white;text-align:left;font-size:16px;font-weight:500}
.cathead::after{content:'+';float:right;color:var(--muted)}.cathead[aria-expanded=true]::after{content:'−'}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px 44px;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.vrow-nl{font-size:15px;font-weight:600;overflow-wrap:anywhere}.vrow-zh{font-size:14px;color:var(--muted)}
.m-toggle.sm{padding:8px;min-width:44px;min-height:44px}
.llist{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}
.lessonbtn{flex:none;min-height:48px;padding:12px;text-align:left;background:white;border:1px solid var(--line);border-radius:8px}
.setrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 24px}
.voicesel{flex:1;min-width:0;max-width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--control);border-radius:8px;background:white;font-size:14px}
.dangerbtn{min-height:44px;padding:10px 16px;border:1px solid #d4a8ad;border-radius:8px;color:var(--red);background:white;font-size:14px}
.verinfo{font-size:13px;color:var(--muted);line-height:1.7}
#toast{position:fixed;left:calc(50% + 110px);bottom:28px;z-index:300;transform:translate(-50%,12px);max-width:min(520px,90vw);opacity:0;pointer-events:none;background:var(--ink);color:white;border-radius:8px;padding:12px 20px;font-size:14px;transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* Course module keeps original source media and renderer. This layer unifies its shell. */
body.ui-v8[data-page].nn-course-active{background:var(--ground);color:var(--ink)}
body.ui-v8[data-page] .nn7,body.ui-v8[data-page] .nn7-modal{--ink:#202b25;--muted:#59685e;--line:#e2e7e3;--green:#176a51;--pale:#eaf3ee;font-family:var(--font)}
body.ui-v8[data-page] .nn7-header{padding:0 0 20px;margin:0 0 28px;gap:16px;border-bottom:1px solid var(--line);max-width:none}
body.ui-v8[data-page] .nn7-brand,body.ui-v8[data-page] .nn7-eyebrow{display:none}
body.ui-v8[data-page] .nn7-nav{justify-content:flex-start;gap:8px}
body.ui-v8[data-page] .nn7-nav button{min-height:44px;font-size:14px;padding:10px 14px;color:var(--muted)}
body.ui-v8[data-page] .nn7-nav button span{display:inline}
body.ui-v8[data-page] .nn7-nav button.active{color:var(--ink);background:var(--active)}
body.ui-v8[data-page] .nn7-icon{min-height:44px;min-width:44px;width:44px;height:44px;border-radius:8px}
body.ui-v8[data-page] .nn7-body{padding:0;max-width:none}
body.ui-v8[data-page] .nn7 h1{font-size:28px;margin:0}
body.ui-v8[data-page] .nn7-heading p:not(.nn7-eyebrow){font-size:14px;margin-top:10px}
body.ui-v8[data-page] .nn7-summary{font-size:13px}.ui-v8 .nn7-summary b{font-size:28px;font-weight:400}
body.ui-v8[data-page] .nn7-resume{padding:24px;background:var(--raised);border:0;border-radius:16px;margin-bottom:32px;gap:20px}
body.ui-v8[data-page] .nn7-resume small{font-size:13px;color:var(--muted)}
body.ui-v8[data-page] .nn7-resume>img{background:white;object-fit:contain;width:88px;height:80px;border-radius:8px}
body.ui-v8[data-page] .nn7-primary,body.ui-v8[data-page] .nn7-secondary{min-height:44px;border-radius:8px;font-size:14px;padding:10px 16px;line-height:1.5}
body.ui-v8[data-page] .nn7-toolbar{gap:16px}
body.ui-v8[data-page] .nn7-filters{gap:4px}
body.ui-v8[data-page] .nn7-filters button{min-height:44px;font-size:14px;padding:10px 12px;border-radius:8px}
body.ui-v8[data-page] .nn7-search{border-color:var(--control);border-radius:8px;min-height:44px;padding:8px 12px}
body.ui-v8[data-page] .nn7-search input{font-size:14px}
body.ui-v8[data-page] .nn7-count{font-size:14px;margin:24px 0 16px}
body.ui-v8[data-page] .nn7-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body.ui-v8[data-page] .nn7-card{border-radius:16px;border-color:var(--line)}
body.ui-v8[data-page] .nn7-cover{aspect-ratio:1.8}
body.ui-v8[data-page] .nn7-cover>span{font-size:12px;left:12px;bottom:12px;border-color:var(--line);color:var(--ink)}
body.ui-v8[data-page] .nn7-card-copy{padding:20px}
body.ui-v8[data-page] .nn7-card-copy small{font-size:12px;color:var(--muted)}
body.ui-v8[data-page] .nn7-card-copy h3{font-size:17px;min-height:48px;line-height:1.45;margin:8px 0 12px}
body.ui-v8[data-page] .nn7-card-copy p{font-size:13px;margin-bottom:16px}
body.ui-v8[data-page] .nn7-card-arrow{display:none}
body.ui-v8[data-page] .nn7-unit-title h1{font-size:26px}
body.ui-v8[data-page] .nn7-breadcrumb,body.ui-v8[data-page] .nn7-breadcrumb button{font-size:14px;min-height:44px}
body.ui-v8[data-page] .nn7-study{grid-template-columns:190px minmax(0,1fr);gap:32px}
body.ui-v8[data-page] .nn7-stages{top:24px}
body.ui-v8[data-page] .nn7-stage-label{font-size:13px}
body.ui-v8[data-page] .nn7-stages>button{font-size:14px;min-height:44px;padding:10px 8px;gap:8px}
body.ui-v8[data-page] .nn7-stage-number{font-size:12px}
body.ui-v8[data-page] .nn7-stage-head>span{font-size:13px}
body.ui-v8[data-page] .nn7-source .task{border-radius:16px;padding:24px;background:var(--raised);border:0}
body.ui-v8[data-page] .nn7-source .task .task{padding:0;background:none}
body.ui-v8[data-page] .nn7-source .instructions,body.ui-v8[data-page] .nn7-source .nn-lesson__task-instructions{border:0;border-radius:8px;background:var(--pale);font-size:15px}
body.ui-v8[data-page] .nn7-source .translationWrapper,body.ui-v8[data-page] .nn7-source .nn-lesson__theory-translationWrapper{color:var(--muted);font-size:14px}
body.ui-v8[data-page] .nn7-source .nn7-audio,body.ui-v8[data-page] .nn7-record{min-width:44px;min-height:44px;border-radius:8px}
body.ui-v8[data-page] .nn7-source .nn7-answer-group.correct,body.ui-v8[data-page] .nn7-source .nn7-answer-group.wrong{border-left:0;padding-left:0}
body.ui-v8[data-page] .nn7-answer-feedback{font-size:14px}
body.ui-v8[data-page] .nn7-source [data-help]{min-width:44px;min-height:44px}
body.ui-v8[data-page] .nn7-source .nn7-word-picture summary{min-height:44px}
body.ui-v8[data-page] .nn7-history small,body.ui-v8[data-page] .nn7-result-list>button>span:last-child,body.ui-v8[data-page] .nn7-result-stats span{font-size:14px}
body.ui-v8[data-page] .nn7-help-list{gap:16px}.ui-v8 .nn7-help-list>button{border-radius:8px;font-size:14px;min-height:56px}
body.ui-v8[data-page] .nn7-player{left:calc(50% + 110px);bottom:24px;width:min(700px,calc(100% - 280px));border-radius:16px}
body.ui-v8[data-page] .nn7-player select,body.ui-v8[data-page] .nn7-player label{font-size:14px;min-height:44px}
body.ui-v8[data-page] .nn7-player label{display:flex;align-items:center}
body.ui-v8[data-page] .nn7-modal{background:white;border:0;border-radius:16px}
body.ui-v8[data-page] .nn7-modal-head{background:white}
body.ui-v8[data-page] .nn7-modal-body{font-size:16px}
body.ui-v8[data-page] .nn7-resource-list a{font-size:14px;min-height:48px}
@media(max-width:1100px){
 :root{--pad:24px}
 body.ui-v8[data-page] #app{margin-left:204px}.app-brand{left:24px;width:156px}body.ui-v8[data-page] #tabs{width:172px}
 body.ui-v8[data-page] .nn7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.ui-v8[data-page] .nn7-toolbar{align-items:stretch;flex-direction:column}body.ui-v8[data-page] .nn7-search{max-width:none}
 .dayhead{grid-template-columns:1fr}.streak{grid-column:1;grid-row:auto;margin-top:8px}
 body.ui-v8[data-page] .nn7-study{grid-template-columns:160px minmax(0,1fr);gap:20px}
}
@media(max-width:800px){
 body[data-page=more] #view{display:block}
 body[data-page=more] #view>.block{margin-bottom:16px}
 body.ui-v8[data-page] #app{margin:0;min-height:100dvh;padding:28px 24px calc(104px + env(safe-area-inset-bottom));border:0;border-radius:0}
 .app-brand{position:sticky;top:0;left:0;width:100%;height:72px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--line);z-index:30}
 .brand-home{display:flex;align-items:center;gap:12px;min-height:44px}.wordmark{font-size:27px}.brand-caption{margin:0;font-size:13px}.brand-scope{display:none}
 body.ui-v8[data-page] #tabs{left:0;right:0;bottom:0;top:auto;width:100%;flex-direction:row;gap:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border:0;border-top:1px solid var(--line);border-radius:0}
 body.ui-v8[data-page] #tabs .tabbtn{flex:1;flex-direction:column;justify-content:center;gap:5px;min-width:0;min-height:56px;padding:6px 2px;font-size:12px;line-height:1.3;border-radius:8px;margin:0}
 body.ui-v8[data-page] #tabs .tabbtn svg{width:21px;height:21px}
 .skip-link{left:16px}.dayhead{margin-bottom:12px}.day-subtitle{font-size:14px}
 .task-words,.task-review,.task-speaking,.checkin,body[data-page=today] .task-words:has(.wcard){grid-column:1/-1;grid-row:auto}
 .streak{grid-column:1;grid-row:auto;font-size:13px}
 body[data-page=today] .task-review,body[data-page=today] .task-speaking{min-height:0}
 .r-card{padding:20px;min-height:160px}
 body.ui-v8[data-page] .nn7-study{display:block}
 body.ui-v8[data-page] .nn7-stages{position:static;display:flex;overflow:auto;gap:8px;border-top:0;padding:0 0 16px;margin-bottom:24px;border-bottom:1px solid var(--line)}
 body.ui-v8[data-page] .nn7-stage-label{display:none}body.ui-v8[data-page] .nn7-stages>button{flex:none;width:auto;white-space:nowrap}
 body.ui-v8[data-page] .nn7-player{left:50%;bottom:calc(88px + env(safe-area-inset-bottom));width:calc(100% - 32px)}
 #toast{left:50%;bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(max-width:540px){
 body.ui-v8[data-page] #app{padding-left:20px;padding-right:20px}
 .app-brand{padding-left:20px;padding-right:20px}
 #view h1,#view .dayhead h1,body.ui-v8[data-page] .nn7 h1{font-size:26px}
 #view h1.r-article-title{font-size:26px}
 body[data-page=more] #view,.r-list{display:block}
 body[data-page=more] #view>.block,.r-card{margin-bottom:16px}
 .block,.checkin,.wcard{padding:20px}.dayhead{gap:10px}
 .brand-caption{font-size:12px}.brand-home{gap:12px}
 .w-nl{font-size:30px}.w-exrow{padding:12px}.grades{gap:6px}.gbtn{font-size:14px}
 .r-question{padding:20px}.r-para{padding:20px 64px 20px 20px}.r-para-nl{font-size:17px;line-height:1.85}.r-para-speak{top:16px;right:12px}
 .r-vocab-item{gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px}
 .vrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:8px}.vrow>.m-toggle{grid-column:3}.vrow>.speak{grid-row:1;grid-column:3}.vrow>.vrow-zh{grid-column:2}
 .setrow>span{flex-basis:100%}
 body.ui-v8[data-page] .nn7-header{padding-bottom:16px;margin-bottom:24px;gap:4px}body.ui-v8[data-page] .nn7-nav{gap:2px}
 body.ui-v8[data-page] .nn7-nav button{padding:10px;font-size:13px;gap:6px}
 body.ui-v8[data-page] .nn7-nav svg{width:18px;height:18px}
 body.ui-v8[data-page] .nn7-heading{gap:12px;align-items:flex-start}
 body.ui-v8[data-page] .nn7-summary{font-size:12px;gap:6px;align-items:flex-end;line-height:1.4}.ui-v8 .nn7-summary b{font-size:26px}
 body.ui-v8[data-page] .nn7-resume{padding:20px;gap:16px;margin-bottom:24px;flex-wrap:wrap}
 body.ui-v8[data-page] .nn7-resume>img{width:64px;height:64px}
 body.ui-v8[data-page] .nn7-resume>div{flex-basis:calc(100% - 80px)}
 body.ui-v8[data-page] .nn7-resume>.nn7-primary{width:100%;justify-content:space-between}
 body.ui-v8[data-page] .nn7-filters{display:grid;grid-template-columns:1fr 1fr;gap:4px}
 body.ui-v8[data-page] .nn7-filters button{padding:10px 8px;font-size:13px}
 body.ui-v8[data-page] .nn7-grid{grid-template-columns:1fr;gap:16px}
 body.ui-v8[data-page] .nn7-card{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:stretch;border-radius:12px;min-height:150px}
 body.ui-v8[data-page] .nn7-cover{aspect-ratio:auto;min-height:100%;background:white}
 body.ui-v8[data-page] .nn7-cover img{position:absolute;inset:0;height:100%;width:100%;object-fit:contain;padding:12px}
 body.ui-v8[data-page] .nn7-cover>span{left:8px;bottom:8px;font-size:12px;padding:1px 5px}
 body.ui-v8[data-page] .nn7-card-copy{padding:16px 16px 16px 8px}
 body.ui-v8[data-page] .nn7-card-copy small{font-size:13px}
 body.ui-v8[data-page] .nn7-card-copy h3{font-size:16px;min-height:0;margin:6px 0 10px;line-height:1.4}
 body.ui-v8[data-page] .nn7-card-copy p{font-size:13px;margin-bottom:12px}
 body.ui-v8[data-page] .nn7-card-copy p span{padding:0 3px}
 body.ui-v8[data-page] .nn7-source .task{padding:18px 16px}
 body.ui-v8[data-page] .nn7-unit-title h1{font-size:24px}
 body.ui-v8[data-page] .nn7-stage-actions{align-items:stretch;gap:10px}
 body.ui-v8[data-page] .nn7-stage-actions>div{gap:8px;flex:1}
 body.ui-v8[data-page] .nn7-stage-actions .nn7-primary,body.ui-v8[data-page] .nn7-stage-actions .nn7-secondary{font-size:13px;padding:10px}
 body.ui-v8[data-page] .nn7-stage-actions [data-check]{flex-basis:100%}
 body.ui-v8[data-page] .nn7-help-list{grid-template-columns:1fr}
 body.ui-v8[data-page] .nn7-source .word{grid-template-columns:1fr;gap:8px}
 body.ui-v8[data-page] .nn7-player{gap:4px;padding:8px 12px;flex-wrap:wrap}
 body.ui-v8[data-page] .nn7-player [data-pause]{display:none}
 body.ui-v8[data-page] .nn7-player audio{flex:1;min-width:0}
 body.ui-v8[data-page] .nn7-player [data-close-player]{order:3}
 body.ui-v8[data-page] .nn7-player>select{order:5;margin-left:auto}
 body.ui-v8[data-page] .nn7-player>label{order:6}
}
@media(max-width:360px){
 body.ui-v8[data-page] #app{padding-left:16px;padding-right:16px}.app-brand{padding-left:16px;padding-right:16px}
 .block,.checkin,.wcard{padding:16px}body.ui-v8[data-page] .nn7-nav button{padding:8px;font-size:12px}
 body.ui-v8[data-page] .nn7-card{grid-template-columns:88px minmax(0,1fr)}
 body.ui-v8[data-page] .nn7-summary{max-width:58px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}