:root{--navy:#0f2542;--navy2:#16365f;--bg:#f3f6fa;--card:#fff;--ink:#1b2a3d;--mut:#667a92;--line:#dde5ef;--acc:#0e9f8e;--acc2:#0b7d70;--accbg:#e1f5f2;--good:#16a34a;--bad:#d9362b;--warn:#b7791f;--warnbg:#fff6e0;--r:14px}
body[data-track=id2cn]{--acc:#d6362b;--acc2:#b02820;--accbg:#fde9e7}
body[data-track=admin]{--acc:#2563eb;--acc2:#1d4ed8;--accbg:#e6eeff}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
h1{font-size:24px;margin:.2em 0 .5em}h2{font-size:19px}h3{font-size:16px;margin:.6em 0 .3em}a{color:var(--acc2);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.sub{color:var(--mut);font-size:.88em}.l2{color:var(--mut);font-weight:400;font-size:.9em}span.sub{display:block}.sub.block{display:block}.tiny{font-size:.8em}
.zh{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:1.08em}.big{font-size:1.5em;font-weight:600}.zh.big{font-size:1.9em}
ruby rt{font-size:.5em;color:var(--mut);font-weight:400}.nopy ruby rt{display:none}
.hidetr .tr{display:none!important}
/* shell */
.app{display:flex;min-height:100vh}.side{width:232px;background:var(--navy);color:#cfe0f5;padding:16px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex:none}
.brand{display:flex;gap:10px;align-items:center;padding:4px 6px 16px}.brand b{color:#fff;display:block}.brand small{font-size:11px;opacity:.7}.logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--acc),#2a74d6);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px}
.side nav{flex:1;display:flex;flex-direction:column;gap:2px;overflow:auto}.side nav a{color:#cfe0f5;padding:10px 12px;border-radius:10px;display:flex;gap:10px;align-items:center}.side nav a i{font-style:normal;width:22px}.side nav a.on,.side nav a:hover{background:var(--navy2);color:#fff}
.who{padding:10px 6px;border-top:1px solid #ffffff22;font-size:13px}.who b{display:block;color:#fff}.who small{display:block;opacity:.7}.mini{font-size:12px;color:#9fc0e8}
main{flex:1;min-width:0;padding:22px 26px 90px;max-width:1100px;margin:0 auto;width:100%}
.bottom{display:none}
@media(max-width:820px){.side{display:none}main{padding:14px 14px 90px}.bottom{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--navy);z-index:20;overflow-x:auto;padding:4px}.bottom a{flex:1 0 auto;min-width:64px;color:#bcd2ee;text-align:center;font-size:11px;padding:4px 6px;border-radius:8px}.bottom a i{display:block;font-style:normal;font-size:20px}.bottom a.on{background:var(--navy2);color:#fff}h1{font-size:21px}}
/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:18px;background:linear-gradient(160deg,var(--navy),#1e4a86)}
.lcard{background:#fff;border-radius:20px;padding:26px;max-width:640px;width:100%;box-shadow:0 20px 60px #0004}.lcard h1{font-size:22px;margin:0}.lcard h2{font-size:13px;color:var(--mut);margin:2px 0 0;font-weight:500}.brand.big{padding:0 0 10px}.lead{color:var(--mut)}
.tracks{display:grid;gap:12px;grid-template-columns:1fr 1fr}@media(max-width:560px){.tracks{grid-template-columns:1fr}}
.track{border:2px solid var(--line);background:#fff;border-radius:16px;padding:16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px}.track .flag{font-size:22px}.track em{font-style:normal;color:var(--mut);font-size:13px}
.track.t1.on,.track.t1:hover{border-color:#0e9f8e;background:#e1f5f2}.track.t2.on,.track.t2:hover{border-color:#d6362b;background:#fde9e7}
.lform{display:grid;gap:10px;margin-top:14px}.lform label{display:grid;gap:4px;font-size:13px;color:var(--mut)}input,select,textarea{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);border-color:var(--acc)}
.foot{text-align:center;font-size:13px;margin:16px 0 0}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:600;color:var(--ink)}.btn:hover{border-color:var(--acc)}.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}.btn.pri:hover{background:var(--acc2)}.btn.big{padding:12px 20px;font-size:17px;justify-content:center}.btn:disabled{opacity:.45;cursor:default}.btn.good{background:#e6f7ec;border-color:#9fd9b3}.btn.bad{background:#fdeceb;border-color:#f1b5b0}.btn.rec,.rec{background:#fdeceb!important;border-color:var(--bad)!important;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px #d9362b33}}
.spk{border:0;background:var(--accbg);border-radius:50%;width:32px;height:32px;cursor:pointer;vertical-align:middle;margin-left:6px;font-size:15px;flex:none}.spk.sm{width:26px;height:26px;font-size:12px}
/* cards & lists */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0}.card.warn{background:var(--warnbg);border-color:#f3d791}.card.center{text-align:center}
.hero{display:flex;gap:14px;justify-content:space-between;align-items:center;background:linear-gradient(120deg,var(--navy),#1f4c8a);color:#fff;border-radius:18px;padding:20px 22px;margin-bottom:14px}.hero h1{margin:0;color:#fff}.hero p{margin:.2em 0 0;opacity:.85}.hero .l2{color:#cfe0f5}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:10px 0}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.stat small{display:block;color:var(--mut)}.stat b{font-size:22px}
.bar{height:8px;background:#e8eef6;border-radius:99px;overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:var(--acc)}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0}.qa{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px;text-align:left;cursor:pointer;font-weight:600;display:grid;gap:3px}.qa i{font-style:normal;font-size:22px}.qa em{font-style:normal;font-weight:400;color:var(--mut);font-size:13px}.qa:hover{border-color:var(--acc)}
.sec{margin:22px 0 10px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mcard{display:block;background:#fff;border:1px solid var(--line);border-left:5px solid var(--acc);border-radius:14px;padding:14px;color:var(--ink)}.mcard.bai{border-left-color:#f59e0b}.mcard:hover{box-shadow:0 6px 20px #0f254218}.mcard h3{margin:0 0 4px}.mcard.soon{opacity:.55;border-left-color:#cbd5e1}
.list{display:grid;gap:8px}.row{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);text-align:left;cursor:pointer;width:100%}.row:hover{border-color:var(--acc)}.row>div{flex:1}.num{width:30px;height:30px;border-radius:50%;background:var(--accbg);color:var(--acc2);display:grid;place-items:center;font-weight:700;flex:none}
.badge{background:var(--accbg);color:var(--acc2);border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700;white-space:nowrap}.ok{color:var(--good);font-weight:700}.bad{color:var(--bad)}.warnb{background:var(--warnbg);color:var(--warn);border-radius:6px;padding:1px 7px;font-size:12px;font-weight:600}
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin:10px 0 14px;overflow-x:auto}.tabs a{padding:9px 14px;color:var(--mut);font-weight:600;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px}.tabs a.on{color:var(--acc2);border-color:var(--acc)}
.back{display:inline-block;margin-bottom:6px;font-size:14px}
/* words */
.wlist{display:grid;gap:10px}.word{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.wh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pos{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:0 6px}.wm{font-weight:600;margin:2px 0 6px}.wx{background:#f6f9fc;border-radius:8px;padding:8px 10px}.wn{font-size:13px;color:var(--warn);margin-top:6px}
.bar2{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}.bar2 select{width:auto;max-width:48%}.bar2 input{flex:1;min-width:120px;width:auto}.pager{text-align:center;margin:16px 0}
/* lesson */
.goal{background:var(--accbg);border-radius:10px;padding:10px 14px;margin:8px 0}.lbody>*{margin:12px 0}.note{line-height:1.8}.note .sub,.tipbox .sub{display:block;margin-top:4px}
.tipbox{background:var(--warnbg);border-left:4px solid #f0b429;border-radius:8px;padding:10px 14px}
.pattern{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.pform{font-size:1.2em;font-weight:700;color:var(--acc2);margin-bottom:6px}.ex{padding:6px 0;border-top:1px dashed var(--line)}
.tblw{overflow-x:auto}.tbl{border-collapse:collapse;width:100%;background:#fff;font-size:14px}.tbl th,.tbl td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}.tbl th{background:#eef3f9}
.dlg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px}.line{display:flex;gap:10px;padding:8px 0}.spkr{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}.line.s1 .spkr{background:var(--acc)}.line.me{background:var(--accbg);border-radius:8px;padding:8px}
.reading p{line-height:2;margin:.8em 0}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}.chip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
/* quiz */
.qcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin:10px 0}.qno{font-size:13px;color:var(--mut);position:relative;margin-bottom:10px;padding-bottom:8px}.qno i{position:absolute;left:0;bottom:0;height:4px;background:var(--acc);border-radius:9px}
.qh{font-size:17px;margin-bottom:12px}.opts{display:grid;gap:8px}.opts.two{grid-template-columns:1fr 1fr}.opt{border:2px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;font-size:16px}.opt:hover:not(:disabled){border-color:var(--acc)}.opt.good{border-color:var(--good);background:#e8f8ee}.opt.bad{border-color:var(--bad);background:#fdeceb}
.fb{margin-top:12px}.fb.good{background:#e8f8ee;border-radius:10px;padding:10px 12px}.fb.bad{background:#fdeceb;border-radius:10px;padding:10px 12px}.fb .btn{margin-top:8px}
.oa,.ob{display:flex;gap:6px;flex-wrap:wrap;min-height:46px;padding:8px;border-radius:10px}.oa{background:#f1f5fa;border:2px dashed var(--line);margin-bottom:10px}.tok{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;cursor:pointer;font-size:16px}
.ti{width:100%;font-size:18px}.flash .fc{min-height:150px;text-align:center;padding:20px 0}.flash .back{margin-top:14px}.result h2{margin-top:0}.wl{padding-left:20px}
.chart{display:flex;gap:8px;align-items:flex-end;height:140px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}.chart>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;font-size:12px}.chart i{display:block;width:70%;background:var(--acc);border-radius:6px 6px 0 0;min-height:2px}.chart.small{height:110px}
.form label{display:grid;gap:4px;margin:10px 0;color:var(--mut);font-size:14px}.form .chk,.chk{display:flex;gap:8px;align-items:center}.chk input{width:auto}
/* tutor */
.trbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.trbar label{flex:1;min-width:120px;display:grid;gap:4px;font-size:13px;color:var(--mut)}
.chips{display:flex;gap:6px;margin:10px 0}.chip2{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:5px 14px;cursor:pointer}.chip2.on{background:var(--acc);color:#fff;border-color:var(--acc)}
textarea{resize:vertical}.acts{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}.acts .ti{flex:1;min-width:140px;width:auto}
.out{font-size:1.4em;line-height:1.7}.tr2{margin-top:6px}.quicklist{display:grid;gap:8px}.qrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px}@media(max-width:640px){.qrow{grid-template-columns:1fr}}
.interp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.bigmic{border:0;border-radius:18px;padding:22px 10px;color:#fff;font-size:30px;cursor:pointer;display:grid;gap:6px;place-items:center}.bigmic b{font-size:15px}.bigmic.a{background:#0e9f8e}.bigmic.b{background:#d6362b}
.ilog,.chat{display:grid;gap:10px}.chat{max-height:55vh;overflow:auto;padding:4px}.bub{max-width:92%;border-radius:14px;padding:10px 14px;background:#fff;border:1px solid var(--line)}.bub.r{margin-left:auto;background:var(--accbg)}.bub .tx{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.wrapw{line-height:2;word-break:break-all}
/* admin */
.adminwrap{max-width:1150px;margin:0 auto;padding:20px}.admhead{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.adminwrap .lcard{margin:8vh auto}
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);background:#0f2542ee;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;z-index:50;font-size:14px}#toast.on{opacity:1;transform:translateX(-50%)}