:root{--blue:#2848c6;--ink:#19254b;--muted:#626e87;--line:#e0e5ef;--bg:#f4f6fb;--yellow:#ffe16c;--green:#08745c;--red:#b83238;--radius:20px;font-family:Arial,'Microsoft YaHei','PingFang SC',sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.65}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.65}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ea9d00;outline-offset:4px}a{color:var(--blue)}button{border:0;border-radius:12px;padding:11px 18px;font-weight:600;background:#eaf0ff;color:var(--blue)}button.primary{background:var(--blue);color:white}button.yellow{background:var(--yellow);color:var(--ink)}button.outline{background:white;border:1px solid var(--line);color:var(--ink)}button.text{background:transparent;padding:5px;color:var(--muted)}button.danger{background:#ffeded;color:var(--red)}button:hover:not(:disabled){filter:brightness(.97)}h1,h2,h3,p{margin-top:0}h1{font-size:2rem;line-height:1.3;letter-spacing:-.04em;margin-bottom:12px}h2{font-size:1.35rem;line-height:1.4}h3{font-size:1.05rem}small,.small{font-size:.875rem}.muted{color:var(--muted)}.eyebrow{font-size:.875rem;font-weight:700;letter-spacing:.08em;color:var(--blue);margin-bottom:10px}.app-shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:32px 20px;background:white;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:25px}.brand{display:flex;gap:10px;align-items:center;font-size:1.25rem;font-weight:800;line-height:1.3}.mark{display:grid;place-items:center;width:42px;height:42px;background:var(--blue);color:white;border-radius:13px;font-size:1.8rem;font-family:Georgia,serif}.brand small{display:block;font-size:.75rem;font-weight:400;color:var(--muted);letter-spacing:.04em;margin-top:5px}.nav{display:flex;flex-direction:column;gap:7px}.nav button{display:flex;align-items:center;text-align:left;gap:12px;background:transparent;color:var(--muted);font-weight:500;padding:12px}.nav button.active{background:#edf1ff;color:var(--blue);font-weight:700}.nav .icon{font-size:1.1rem;width:24px;text-align:center}.sidebar-note{margin-top:auto;border-top:1px solid var(--line);padding-top:20px;font-size:.875rem;color:var(--muted)}.sidebar-note strong{display:block;color:var(--ink);margin-bottom:8px}.main{min-width:0;padding:28px 40px 55px;max-width:1280px;width:100%;margin:0 auto}.topbar{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.875rem;margin-bottom:32px;gap:16px}.badge{border-radius:99px;display:inline-block;padding:4px 12px;background:#eaf0ff;color:var(--blue);font-size:.875rem;font-weight:600}.badge.green{background:#e5f6ef;color:var(--green)}.badge.yellow{background:#fff5c8;color:#6d5300}.header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.header p{margin-bottom:0;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.two{grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr)}.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:25px;min-width:0}.card.blue{background:var(--blue);color:white;border:none;position:relative}.card.blue p{color:#e2e8ff}.card.blue .eyebrow{color:var(--yellow)}.card.blue .muted{color:#d9e2ff}.card.yellow{background:#fff4bc;border-color:#f4df8b}.card h2{margin-bottom:12px}.card p:last-child{margin-bottom:0}.stat{font-size:2.15rem;font-weight:800;letter-spacing:-.04em}.stat small{font-size:.875rem;font-weight:400;letter-spacing:0;margin-left:5px}.hero-title{font-size:2.25rem;line-height:1.3;max-width:450px;margin:15px 0}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:18px}.section{margin-top:28px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.section-title h2{margin:0}.step{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.step b.num{flex:none;background:#edf1ff;color:var(--blue);border-radius:10px;width:34px;height:34px;display:grid;place-items:center}.step p{margin:3px 0 0;font-size:.875rem;color:var(--muted)}.progress{height:9px;border-radius:99px;background:#e7ecf6;overflow:hidden;margin:12px 0}.progress span{display:block;height:100%;background:var(--blue);border-radius:99px}.blue .progress{background:#5871d4}.blue .progress span{background:var(--yellow)}.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.filters input{flex:1;min-width:180px}.filters select{max-width:100%}input,select,textarea{background:white;border:1px solid #cbd3e3;border-radius:10px;padding:10px 12px;color:var(--ink);max-width:100%}textarea{width:100%;min-height:150px;resize:vertical}.word-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:15px 0}.word-row:last-child{border-bottom:0}.word-row strong{font-size:1.2rem}.word-row small{display:block;color:var(--muted)}.word-row p{margin:4px 0;color:var(--muted);font-size:.875rem}.word-row .actions{flex-shrink:0}.word-row button{padding:7px 12px}.word-row .level{font-size:.875rem;color:var(--green)}.practice{max-width:760px;margin:auto}.practice .card{padding:34px}.practice-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:15px}.big-word{font-size:3.5rem;line-height:1.2;font-weight:800;letter-spacing:-.03em;overflow-wrap:anywhere;margin:26px 0 12px}.translation{font-size:1.3rem;margin:15px 0}.example{font-size:1.2rem;line-height:1.8;padding:17px 20px;background:#f1f4fc;border-radius:14px;margin:20px 0}.example button{float:right}.hint{background:#fff8da;color:#665218;border-radius:12px;padding:14px 17px;font-size:.9rem;margin:18px 0}.feedback{padding:18px;border-radius:12px;background:#e9f6f0;color:#075941;margin:18px 0}.feedback.wrong{background:#fff0ef;color:#923137}.feedback p{margin:6px 0 0}.spelling{display:flex;gap:10px;margin:24px 0}.spelling input{flex:1;min-width:0;font-size:1.25rem}.choices{display:grid;gap:12px;margin:24px 0}.choices button{padding:15px 20px;text-align:left;background:white;border:1px solid #cdd5e5;color:var(--ink);font-weight:500}.choices button.correct{background:#e7f5ed;border-color:#64a78a}.choices button.wrong{background:#ffefed;border-color:#d98884}.choices button:disabled{opacity:1}.listen-button{display:flex;align-items:center;justify-content:center;gap:10px;background:#edf1ff;min-height:100px;width:100%;font-size:1.2rem;margin:20px 0}.phonics-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:7px;margin:20px 0}.phonics-grid button{padding:9px 4px;background:#edf1ff}.lesson-card{display:flex;flex-direction:column;gap:12px}.lesson-card p{font-size:.9rem;color:var(--muted);margin:0}.lesson-card h3{margin:0}.lesson-card button{margin-top:auto;align-self:flex-start}.lesson-detail{max-width:860px;margin:auto}.lesson-detail .rule{font-size:1.1rem;line-height:1.9}.lesson-detail .examples{border-left:4px solid var(--blue);padding-left:20px;margin:24px 0}.lesson-detail .examples p{font-size:1.15rem;margin:12px 0}.reading-text{font-size:1.3rem;line-height:2;letter-spacing:.01em;margin:24px 0}.reading-text span{cursor:pointer}.reading-text span:hover{background:#fff0b5}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.tabs button{border-radius:99px;padding:8px 15px;background:white;border:1px solid var(--line);color:var(--muted)}.tabs button.active{background:var(--blue);color:white;border-color:var(--blue)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.95rem}th,td{padding:13px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{font-weight:700;background:#f3f5fc}.plain-list{padding-left:22px;margin-bottom:0}.plain-list li{margin:10px 0}.footer{margin-top:35px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem}.empty{text-align:center;padding:40px 20px;color:var(--muted)}details{border-bottom:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-weight:700}details p{margin:12px 0 0}.page-buttons{display:flex;gap:15px;align-items:center;justify-content:center;margin-top:20px}.kpis{display:flex;gap:25px;flex-wrap:wrap;margin-top:22px}.kpis>div{min-width:110px}.kpis small{display:block}#notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;z-index:99;background:#172445;color:white;border-radius:14px;padding:12px 20px;box-shadow:0 8px 30px #11224430;display:none}.local-warning{background:#fff1db;color:#713c00;padding:12px;border-radius:10px;margin-bottom:20px}.ring{width:100px;height:100px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:2rem;font-weight:800;flex:none}.result-top{display:flex;gap:22px;align-items:center;margin-bottom:24px}.count-tag{font-size:.8rem;color:var(--muted)}.checkbox-line{display:flex;align-items:center;gap:12px;margin:12px 0}.checkbox-line input{width:20px;height:20px}.writing-status{font-size:.875rem;color:var(--muted);margin:8px 0}.subtle-link{font-size:.875rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1080px){.main{padding:24px}.app-shell{grid-template-columns:200px minmax(0,1fr)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.two{grid-template-columns:1fr}.hero-title{max-width:none}.phonics-grid{grid-template-columns:repeat(9,1fr)}}
@media(max-width:720px){.app-shell{display:block}.sidebar{position:static;height:auto;padding:18px 18px 10px;border-right:0;border-bottom:1px solid var(--line);gap:15px}.brand{font-size:1.1rem}.brand small{display:none}.mark{width:35px;height:35px;font-size:1.5rem}.nav{flex-direction:row;overflow-x:auto;gap:6px;padding:3px 0 9px}.nav button{white-space:nowrap;padding:9px 12px;font-size:.9rem;gap:5px}.nav .icon{display:none}.sidebar-note{display:none}.main{padding:20px 16px 35px}.topbar{margin-bottom:22px;gap:10px;font-size:.8rem}.topbar .badge{font-size:.75rem}h1{font-size:1.65rem}.hero-title{font-size:1.9rem}.header{align-items:flex-start;flex-direction:column;gap:12px}.grid{grid-template-columns:1fr}.card{padding:21px}.grid.stats{grid-template-columns:repeat(3,1fr);gap:8px}.stats .card{padding:14px 10px}.stats .stat{font-size:1.65rem}.stats .small{font-size:.8rem}.stats .muted{font-size:.8rem}.practice .card{padding:24px 19px}.big-word{font-size:2.7rem}.word-row{align-items:flex-start}.word-row .actions{flex-direction:column;gap:6px}.word-row .actions button{padding:6px 10px;font-size:.875rem}.phonics-grid{grid-template-columns:repeat(6,1fr)}.spelling{flex-wrap:wrap}.spelling input{width:100%}.spelling button{flex:1}.reading-text{font-size:1.15rem}.result-top{align-items:flex-start}.ring{width:75px;height:75px;font-size:1.6rem}.filters select{width:100%}.kpis{gap:18px}.footer{font-size:.8rem}}
.topbar>span{white-space:nowrap}.topbar>.actions{justify-content:flex-end}.category-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0}.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}.category-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;background:white;border:1px solid var(--line);border-radius:22px;padding:25px 22px;color:var(--ink);min-width:0;min-height:244px;font-weight:400;box-shadow:0 2px 6px #1b367003}.category-card:hover{border-color:#8fa5e8;box-shadow:0 5px 18px #2848c60e}.category-icon{font-size:2.2rem;line-height:1.3;margin-bottom:22px}.category-name{font-size:1.1rem;font-weight:700;line-height:1.5}.category-en{font-size:.9rem;color:var(--muted);line-height:1.5;min-height:2.8em;margin-top:3px}.category-progress-copy{font-size:.9rem;color:var(--muted);margin-top:16px}.category-progress{display:block;width:100%;height:7px;margin:11px 0 13px}.category-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 8px;font-size:.875rem;color:var(--muted)}.category-meta>span{color:var(--blue)}.category-tip{display:flex;justify-content:space-between;gap:24px;align-items:center;background:#f0f4ff;border-color:#d9e2ff}.category-tip h2{font-size:1.1rem}.category-tip p{margin-bottom:10px}.category-mini-stats{display:flex;flex-direction:column;flex:none;text-align:right;min-width:150px}.category-mini-stats strong{font-size:2rem;color:var(--blue)}.category-mini-stats small{color:var(--muted);margin-top:8px}.category-study-note{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:16px}.category-study-note p{margin:0}.category-study-note button{flex-shrink:0}
@media(max-width:720px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.category-card{min-height:226px;padding:19px 15px;border-radius:18px}.category-name{font-size:1rem}.category-icon{margin-bottom:16px;font-size:2rem}.category-en{font-size:.875rem;min-height:2.9em;overflow-wrap:anywhere}.category-meta{flex-direction:column}.category-progress-copy{font-size:.875rem}.category-toolbar,.category-study-note{align-items:flex-start;flex-direction:column}.category-toolbar .muted{display:block;margin-top:7px}.category-tip{align-items:flex-start;flex-direction:column;gap:10px}.category-mini-stats{text-align:left;flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}.category-mini-stats small{flex-basis:100%;margin-top:0}}
@media(prefers-reduced-motion:no-preference){.card,button{transition:background .15s,box-shadow .15s}main{animation:appear .2s ease-out}@keyframes appear{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}}
/* Focused practice and scene lessons */
.practice-menu button.card{text-align:left;color:var(--ink,#17243c);white-space:normal;height:100%;border:1px solid #dce3ef;background:white;padding:24px}.practice-menu button.card:hover{border-color:#3459cf;background:#f6f8ff}.practice-menu p{font-weight:400}.word-chunks{font-size:1.5rem;letter-spacing:.08em;overflow-wrap:anywhere}.memory-hint p{margin:8px 0}.scene-line{font-size:1.25rem;font-weight:700;line-height:1.6}.scene-pattern{font-size:1.3rem;color:#2641be;font-weight:700}.spelling-diff{font-size:1.7rem;letter-spacing:.1em;overflow-wrap:anywhere;margin:14px 0}.spelling-diff mark{background:#ffe29a;color:#593d05;padding:2px}.spelling-diff ins{color:#0e604e;background:#def5e9;text-decoration:underline;text-underline-offset:5px;padding:2px}.spelling-diff del{color:#ad263e;background:#ffe2e6;padding:2px}.sound-pair{border:1px solid #dfe5f0;border-radius:14px;padding:20px;min-width:0}.grammar-quick{margin-bottom:24px}.quick-row{padding:16px 0;border-bottom:1px solid #e2e7ef}.quick-row:last-child{border-bottom:0}.scene-line,.scene-pattern,.big-word{overflow-wrap:anywhere}.practice .tabs{flex-wrap:wrap}.practice-menu .category-icon{display:block;margin-bottom:12px}@media(max-width:600px){.spelling{flex-wrap:wrap}.spelling input{min-width:0;width:100%}.practice-menu button.card{padding:20px}.word-chunks{font-size:1.25rem}.scene-pattern{font-size:1.1rem}}