:root{--ink:#253f38;--muted:#748078;--line:#e1e6dc;--paper:#f8faf5;--blue:#006e95;--red:#ad3936;--green:#29723c;--purple:#754095;--teacher:#257b6b;--mine:#d48636}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.65 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #d9e0d5;background:#fff;color:var(--ink);border-radius:10px;padding:9px 14px;transition:background .15s}button:hover:not(:disabled){background:#eaf0e2}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #de9e3f;outline-offset:3px}button.active{background:#e5ecda;border-color:#a9bb98}button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}button.primary:hover:not(:disabled){background:#3b5c50}button.recording{background:#ad3936;border-color:#ad3936}.text-button{border:0;background:transparent;padding:5px 8px;font-size:14px}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid var(--line);background:#fffefa}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:22px;font-weight:650}.brand b{background:var(--ink);color:#e9efd4;border-radius:12px;font-size:29px;width:38px;height:38px;line-height:34px;text-align:center}.brand small{font-size:14px;color:var(--muted);font-weight:400;margin-left:5px}.local-pill{font-size:14px;color:#607754;border:1px solid #dbe4ce;padding:6px 11px;border-radius:20px}main{display:grid;grid-template-columns:225px minmax(0,1fr);max-width:1600px;margin:auto;gap:30px;padding:26px 32px}.sidebar{border-right:1px solid var(--line);padding-right:22px}.eyebrow{font-size:14px;letter-spacing:2px;color:#7a8a6e;margin:0 0 7px;font-weight:600}h1{font-size:25px;font-weight:600;margin:12px 0 0;letter-spacing:-1px}.muted{color:var(--muted)}.small{font-size:14px}.progress{font-size:14px;color:var(--muted);margin:22px 0}.progress>div{height:4px;background:#e4eadb;margin-top:9px;border-radius:3px}.progress i{display:block;background:#6c8b5b;height:100%}nav{display:grid;gap:6px}nav button{display:flex;gap:9px;text-align:left;font-size:14px;padding:10px 8px;border:0;background:transparent;align-items:flex-start}nav button.active{background:#e9efdf}nav .number{font-size:14px;color:#89927f;min-width:17px;padding-top:2px}nav em{font-style:normal;color:var(--green);margin-left:auto}.topline{display:flex;justify-content:space-between;align-items:center;gap:10px}.workspace>.topline{margin-bottom:10px}.sentence-card{background:#eff3e5;border:1px solid #e0e7d4;border-radius:17px;padding:20px 24px}.segmented{display:inline-flex;background:#e6ecdd;border-radius:9px;padding:3px;gap:2px}.segmented button{font-size:14px;padding:5px 12px;border:0;background:transparent;border-radius:7px}.segmented button.active{background:#fff;box-shadow:0 1px 3px #263f3810}.badge{font-size:14px;color:#788269}.sentence{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;margin:20px 0 10px}.token{display:inline-flex;flex-direction:column;align-items:flex-start;padding:4px 7px;border:0;background:#ffffff80;font-size:27px;font-weight:600;line-height:1.4}.token small{font-size:14px;font-weight:400;opacity:.75;margin-top:3px}.subject{color:var(--blue)}.verb{color:var(--red)}.rest{color:var(--green)}.question{color:var(--purple)}#translation{margin:8px 0 13px;color:#6a7661}.legend{display:flex;gap:17px;flex-wrap:wrap;font-size:14px}#wordInfo{margin:7px 0 15px;min-height:18px}.hide-hints .token small,.hide-hints .legend{display:none}.hide-hints #sentence .token{color:var(--ink)}.transport{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-top:1px solid #dae2cf;padding-top:17px}.large{min-height:55px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px}.large>span{font-size:20px}kbd{font:12px monospace;opacity:.55;border:1px solid currentColor;border-radius:3px;padding:1px 4px}.transport-options{display:flex;align-items:center;gap:15px;flex-wrap:wrap;font-size:14px;margin-top:8px;color:#738067}.transport-options label{display:flex;gap:6px;align-items:center}select{border:0;border-radius:5px;background:#f5f7f0;padding:4px;color:var(--ink);font-size:14px}#recordClock{color:var(--red);font-variant-numeric:tabular-nums}#notice{font-size:14px;color:#9a562f;min-height:0}#notice:not(:empty){margin-top:7px}.practice-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);gap:20px;margin-top:20px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:15px;padding:21px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}h2{font-size:18px;font-weight:600;margin:0}h3{font-size:14px;margin:0;font-weight:600}.chart-meta{display:flex;gap:23px;font-size:14px;margin:22px 0 8px}.chart-meta b{font-weight:400;font-variant-numeric:tabular-nums}.teacher-key{color:var(--teacher)}.mine-key{color:var(--mine)}.chart-wrap{height:200px;background:#f8faf5;border:1px solid #ecf0e7;border-radius:10px;position:relative}canvas{width:100%;height:200px;display:block}#chartEmpty{position:absolute;left:15px;right:15px;top:90px;text-align:center;color:#89957f;font-size:14px;pointer-events:none;background:#f8faf5cc}.chart-options{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;margin-top:10px}#chartHelp{min-height:34px;margin:9px 0 18px}.word-section{border-top:1px solid var(--line);padding-top:16px}.word-strip{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:12px 0;font-size:14px}.word-strip .row-label{font-size:14px;color:var(--muted);min-width:44px}.word-strip button{font-size:14px;border:0;border-bottom:2px solid #e0e7d7;border-radius:5px;padding:3px 6px}.word-strip button.unmatched{border-bottom-style:dashed;border-bottom-color:#b79054}.word-strip button.selected{background:#fff0d2;border-bottom-color:#b47f2c}.model-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:#f2f5ed;border-radius:10px;padding:13px;margin-top:17px}.model-card>div{flex:1;min-width:150px}.model-card b{font-size:14px}.model-card p{font-size:14px;color:var(--muted);margin:4px 0 0}.model-card button{font-size:14px}.model-card progress{width:100%;height:6px;accent-color:#648958}.technical{font-size:14px;color:var(--muted);margin-top:10px}summary{cursor:pointer}.variant-preview{display:flex;flex-wrap:wrap;gap:4px;border-left:3px solid #91a979;background:#f4f7ee;padding:13px 10px;margin:16px 0}.variant-preview .token{font-size:20px;background:transparent;padding:2px 5px}.variant-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.variant-actions button{font-size:14px}.grammar-note{font-size:14px;margin:20px 0;padding:13px 15px;background:#faf8f1;border-radius:9px}.grammar-note b{font-size:14px;color:#8c7951}.grammar-note p{margin:7px 0 0}.answer-slots{display:flex;flex-wrap:wrap;gap:5px;min-height:80px;padding:12px 8px;border:1px dashed #cbd6c0;border-radius:9px;margin:12px 0}.answer-slots:empty:before{content:'点击词块，重新组成一句话';font-size:14px;color:#8d9982;align-self:center}.word-bank{display:flex;gap:5px;flex-wrap:wrap}.answer-slots .token,.word-bank .token{font-size:15px;border:1px solid #e0e6d8}.word-bank .token:disabled{opacity:.2}.answer-slots .token small,.word-bank .token small{display:none}#orderFeedback{font-size:14px;min-height:20px}.review-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:20px 0}.review-bar>div:first-child{flex:1;min-width:200px}.review-bar b{font-size:14px}.review-bar p{font-size:14px;color:var(--muted);margin:4px 0}.review-bar button,.review-bar a{font-size:14px}.review-bar a{color:var(--ink)}#history button{font-size:14px}.settings{font-size:14px;padding:13px 20px}.settings-grid{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:15px 0}.settings-grid label{display:flex;flex-direction:column;font-size:14px}.settings-grid input{width:90px;border:1px solid var(--line);border-radius:5px;padding:5px}.settings>label{display:block;margin:12px 0}input[type=file]{max-width:100%;font-size:14px;margin:5px}.settings button{font-size:14px}footer{display:flex;justify-content:space-between;align-items:center;padding:20px 0;color:var(--muted);font-size:14px}footer button{font-size:14px}footer div{display:flex;gap:8px}[hidden]{display:none!important}@media(min-width:1500px){.token{font-size:31px}}@media(max-width:1150px){main{grid-template-columns:185px minmax(0,1fr);gap:20px;padding:20px}.sidebar{padding-right:15px}.practice-grid{grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);gap:12px}.panel{padding:16px}.transport{gap:6px}.large{padding:8px;font-size:14px}.large kbd{display:none}.token{font-size:24px}}@media(max-width:900px){main{display:block;padding:16px}.sidebar{border:0;padding:0}.sidebar h1,.sidebar>.eyebrow,.sidebar>.muted{display:none}.progress{margin:0 0 10px}nav{display:flex;overflow:auto;margin-bottom:17px}nav button{flex-shrink:0;width:160px}.practice-grid{grid-template-columns:1fr 1fr}.brand small{display:none}.sentence-card{padding:17px}.token{font-size:24px}}@media(max-width:650px){header{padding:0 16px;height:65px}.brand{font-size:20px}.local-pill{font-size:14px}.practice-grid{grid-template-columns:1fr}.variants{grid-row:1}.transport{grid-template-columns:1fr 1fr}.large{min-height:50px}.token{font-size:23px}.transport-options{gap:9px}.review-bar{padding:16px 0}.topline{flex-wrap:wrap}footer>span{max-width:130px}.sentence-card{position:relative}.chart-wrap,canvas{height:210px}}

.chart-title{display:flex;justify-content:space-between;align-items:center;margin:9px 0 4px;font-size:14px}.chart-title span{font-size:14px;color:var(--muted)}.chart-wrap,.chart-wrap canvas{height:140px}.chart-empty,#chartEmpty{position:absolute;left:12px;right:12px;top:55px;text-align:center;color:#89957f;font-size:14px;pointer-events:none;background:#f8faf5cc}.chart-meta{margin-top:12px}#chartHelp{margin-bottom:10px;min-height:0}.answer-slots:empty:before{content:'把词块拖到这里，组成一句话'}.word-bank{min-height:48px;padding:8px 4px;border:1px dashed transparent;border-radius:9px}.word-bank:empty:before{content:'拖回这里撤回词块';font-size:14px;color:var(--muted);align-self:center}.answer-slots .token,.word-bank .token{touch-action:none;user-select:none;cursor:grab;align-self:flex-start}.token.dragging{opacity:.5;cursor:grabbing}.drop-zone{background:#edf3e4;border-color:#7f9b68}.token.drop-before{box-shadow:-3px 0 #d48636}.token.drop-after{box-shadow:3px 0 #d48636}@media(max-width:650px){.variants{grid-row:auto}.chart-wrap,.chart-wrap canvas{height:145px}}

/* Readable practice view */
:root{--muted:#5f6d63}header{height:60px;padding:0 28px}.brand small{font-size:15px}main{grid-template-columns:230px minmax(0,1fr);gap:24px;padding:22px 28px}.sidebar h1{margin:0;font-size:24px}.sidebar>.muted{margin:4px 0 16px}nav button{font-size:16px;line-height:1.55;padding:11px 8px}nav .number{font-size:14px}.progress{margin:14px 0}.eyebrow{font-size:15px;letter-spacing:0}.text-button,.segmented button{font-size:16px}.badge{font-size:15px}.sentence{margin:16px 0 8px}.sentence-card .token{font-size:32px}.sentence-card .token small{display:none}.legend{font-size:15px;gap:16px}#translation{font-size:18px;margin:8px 0}.small{font-size:15px}#wordInfo{font-size:16px;min-height:0;margin:8px 0}#wordInfo:empty{display:none}.transport{margin-top:16px;padding-top:14px}.large{font-size:18px;min-height:58px}.transport-options{font-size:16px}.transport-options select,select{font-size:16px}kbd{font-size:12px}.practice-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:18px;margin-top:18px}.panel{padding:20px}h2{font-size:22px}h3{font-size:18px}.chart-meta{font-size:16px;gap:20px;margin:12px 0}.chart-title{font-size:17px;margin-top:12px}.chart-title span{font-size:14px}.chart-wrap,.chart-wrap canvas{height:155px}.chart-empty,#chartEmpty{font-size:15px;top:58px}.chart-explanation{font-size:15px;color:var(--muted);margin-top:12px}.chart-explanation p{margin:8px 0}.variant-preview .token{font-size:25px}.variant-actions button{font-size:16px;min-height:44px}.grammar-note{font-size:17px;padding:12px;margin:16px 0}.grammar-note b{font-size:16px}.answer-slots .token,.word-bank .token{font-size:21px;padding:7px 10px}.answer-slots{min-height:80px}.answer-slots:empty:before,.word-bank:empty:before{font-size:15px}#orderFeedback{font-size:16px;min-height:0}#orderFeedback:empty{display:none}.review-bar{padding:16px 0}.review-bar>div:first-child{min-width:0;flex:0 1 auto}.review-bar>div:first-child:has(p:empty){display:none}.review-bar button,.review-bar a,#history button{font-size:16px;min-height:44px}.review-bar p{font-size:16px}.settings{font-size:16px}.settings button,.settings-grid label,input[type=file]{font-size:16px}.settings-grid input{width:110px}.settings summary{font-size:16px}footer,footer button{font-size:16px}#notice{font-size:16px}
@media(max-width:1150px){main{grid-template-columns:190px minmax(0,1fr);padding:18px;gap:18px}.practice-grid{grid-template-columns:1fr}.large{font-size:17px}.panel{padding:18px}}
@media(max-width:900px){main{display:block}.sidebar>.muted{display:none}nav button{width:190px}.sentence-card .token{font-size:29px}}
@media(max-width:650px){header{padding:0 16px}main{padding:14px}.sentence-card{padding:16px}.sentence-card .token{font-size:27px}.transport{grid-template-columns:1fr 1fr}.large{font-size:18px}.legend{gap:12px}.chart-meta{font-size:15px;gap:12px}.variants{grid-row:auto}.panel{padding:16px}footer{gap:12px;flex-wrap:wrap}}

.course-label{display:block;font-size:15px;margin-bottom:8px}#courseSelect{width:100%;font-size:20px;padding:10px;border:1px solid var(--line);background:white;border-radius:10px}#courseTitle{font-size:17px;margin:10px 0}@media(max-width:900px){.course-label{display:none}#courseSelect{width:auto;min-width:150px}#courseTitle{display:inline-block;margin-left:14px}}
/* Keep playback controls together without shrinking their hit targets. */
.transport{grid-template-columns:repeat(4,minmax(0,170px));justify-content:start;gap:8px}.transport .large{padding:10px 12px;gap:7px;white-space:nowrap}@media(max-width:1150px){.transport{grid-template-columns:repeat(4,minmax(0,150px));gap:8px}}@media(max-width:650px){.transport{grid-template-columns:repeat(2,minmax(0,170px));gap:8px}}

.inversion-hint{font-size:18px;line-height:1.7;border-left:3px solid var(--green);padding:8px 14px;margin:12px 0;background:#ffffff90;border-radius:0 8px 8px 0}.inversion-hint[hidden]{display:none}.inversion-guide{font-size:18px;line-height:1.8;margin-top:12px}.inversion-guide summary{cursor:pointer;font-weight:600}.inversion-guide p{margin:12px 0}.order-example{background:#fff;padding:12px;border-radius:8px}

/* Sentence map and scaffolded ordering practice. */
.sentence-map{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 18px;font-size:15px;color:var(--muted)}.sentence-map span{padding:5px 9px;border:1px solid var(--line);border-radius:6px}.sentence-map .map-current{background:#e7efdf;color:var(--ink);border-color:#849b77;font-weight:650}.order-structure{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 8px}.structure-step{font-size:16px;font-weight:600;padding:7px 9px;border:1px solid currentColor;border-radius:6px;background:#fff}.structure-step+.structure-step:before{content:'→';color:var(--muted);margin-right:7px}#orderMode{line-height:1.7}.hide-hints .order-structure{display:none}

.sentence-map button{font-size:15px;padding:6px 10px;min-height:40px}.sentence-map button.map-current{background:#e7efdf;border-color:#849b77;font-weight:650}.exercise-source{font-size:18px;line-height:1.7;padding:12px;border-left:3px solid #91a979;background:#f4f7ee}#typedAnswer{display:block;width:100%;resize:vertical;font:20px/1.6 inherit;padding:12px;border:1px solid #a8b69d;border-radius:8px;margin:8px 0 14px;font-family:inherit;font-size:20px;line-height:1.6}#writeLabel{font-size:16px}.hide-hints .order-structure{display:flex}

.task-help{font-size:16px;color:var(--muted);margin:8px 0 14px}.task-help p{margin:8px 0;line-height:1.7}

/* Full audio passages without a reviewed grammar breakdown. */
.token.plain{color:var(--ink,#24443c);text-align:left;white-space:normal}.token.plain small{display:none}

/* Keep the long course directory separate from the practice page scroll. */
.workspace{min-width:0}
#counter{scroll-margin-top:18px}
@media(min-width:901px){
 .sidebar{position:sticky;top:18px;align-self:start;display:flex;flex-direction:column;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);min-height:0}
 .sidebar>label,.sidebar>select,.sidebar>p,.sidebar>.progress{flex-shrink:0}
 #lessonList{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding-right:4px}
}

.sync-bar{max-width:1600px;margin:auto;padding:10px 28px;font-size:15px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.sync-bar a{color:var(--ink)}.sync-bar button{font-size:15px}#syncConflict{width:100%;padding:12px;background:#fff1da;border-radius:9px}

/* Keep account state visible while practicing, especially on phones. */
.sync-bar{position:sticky;top:0;z-index:30;background:#fffefa;border-bottom:1px solid var(--line);box-shadow:0 2px 8px #253f3808;min-height:62px}.sync-bar #syncStatus{flex:1 1 180px}.sync-bar #syncLogin{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;background:var(--ink);color:white;border-radius:9px;font-weight:650;text-decoration:none}.sync-bar #syncLogin[hidden]{display:none}.sync-bar #syncLogout{font-size:14px}.sync-bar button{padding:7px 10px}#counter{scroll-margin-top:140px}@media(max-width:650px){.sync-bar{padding:9px 14px;gap:8px}.sync-bar #syncStatus{font-size:14px;line-height:1.5}.sync-bar #syncImport{font-size:13px}header{height:58px}}
@media(min-width:901px){.sidebar{top:90px;max-height:calc(100vh - 108px);max-height:calc(100dvh - 108px)}}