/* Little Steps: warm, playful study space. Presentation only. */
:root{--blue:#256d5b;--ink:#314b43;--muted:#65766f;--line:#e5e7db;--bg:#faf9f3;--yellow:#ffda8c;--green:#236947;--red:#ae4242;--radius:25px;font-family:'Microsoft YaHei','PingFang SC',Arial,sans-serif;line-height:1.7}
body{background:radial-gradient(circle at 95% 5%,#edf1e7 0,transparent 30%),var(--bg)}
h1,h2,h3{letter-spacing:0;font-weight:750}h1{font-size:1.9rem}h2{font-size:1.3rem}
button{border-radius:15px;min-height:44px;font-weight:650;background:#eaf2e9;color:var(--blue);transition:transform .15s,box-shadow .15s,background .15s}
button:hover:not(:disabled){filter:none;transform:translateY(-2px);box-shadow:0 4px 0 #314b4312}
button:active:not(:disabled){transform:translateY(0)}button.primary{background:#286e59;box-shadow:0 3px 0 #1d5343;color:#fff}button.yellow{background:#ffda8c;box-shadow:0 4px 0 #d6b166;color:#4a4939}
button.outline{border:1.5px solid #dce4d6;background:#fffef8}button.text{box-shadow:none;min-height:40px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b77823;outline-offset:4px}
.app-shell{grid-template-columns:224px minmax(0,1fr)}.sidebar{background:#fffef8;border-right:1px solid #e5e7dc;padding:29px 18px 20px;gap:29px}.brand{gap:11px;color:#315b49;font-size:1.25rem}.mark{background:#e7efdf;width:49px;height:49px;min-width:49px;border-radius:17px;font-size:28px;box-shadow:0 3px 0 #d8e2cb;font-family:inherit}.brand small{font-size:.68rem;letter-spacing:.12em;color:#738775;font-weight:600}.nav{gap:8px}.nav button{color:#63786c;border:1px solid transparent;padding:12px 13px;border-radius:16px;font-weight:600}.nav button.active{background:#e8efdd;border-color:#dce6cd;color:#2a6049;box-shadow:0 3px 0 #d4dfc6}.nav .icon{font-size:1.2rem;width:25px}.sidebar-note{border:1px dashed #b8c9a3;border-radius:20px;background:#f2f5e7;padding:18px 14px;color:#617254;position:relative}.sidebar-note:before{content:'🌱';display:block;font-size:1.6rem;margin-bottom:5px}.sidebar-note strong{color:#476442}
.main{padding:26px 36px 48px;max-width:1320px}.topbar{margin-bottom:28px;font-size:.8rem;color:#778277}.topbar .badge{background:#edf0e4;color:#516d47;font-size:.8rem}.header{margin-bottom:24px}.header h1{color:#355444}.header p{font-size:.95rem}.header h1:after{content:' ✦';color:#d99a43;font-size:1.05rem;vertical-align:middle}.badge{background:#edf2e6;color:#466943;border:1px solid #e0e9d3;border-radius:10px}.badge.green{background:#e7f2e7}.badge.yellow{background:#fff0ce;color:#735320}.eyebrow{font-size:.8rem;letter-spacing:.12em}
.grid{gap:19px}.grid.two{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr)}.card{background:#fffefb;border:1.5px solid #e4e5d9;box-shadow:0 5px 0 #e5e6d94d;padding:26px}.card.blue{background:#e9f1df;border:1.5px solid #d6e2c6;color:#304d3f;overflow:hidden;box-shadow:0 5px 0 #d4dfc64d}.card.blue p{color:#526947}.card.blue .eyebrow{color:#557442}.card.blue .muted{color:#557442}.card.blue .hero-title{font-size:2.05rem;line-height:1.5;max-width:calc(100% - 135px);margin:20px 0 21px;position:relative;z-index:1}.hero-buddy{position:absolute;width:170px;height:auto;right:1px;top:28px;pointer-events:none}.card.blue>.actions,.card.blue>.kpis,.card.blue>p{position:relative;z-index:1}.card.blue>p{max-width:100%;margin-top:16px;font-size:.94rem}.card.blue>.actions{gap:12px;margin-top:21px}.card.blue .outline{background:#f9fbf2;border-color:#d1dfc3;color:#416044}.card.blue>.actions button:first-child{flex-basis:100%;max-width:310px;text-align:center;padding:13px 16px}.kpis{gap:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:21px;margin-top:24px;border-top:1px dashed #bdcfac}.kpis>div{min-width:0}.kpis .stat{font-size:1.9rem;letter-spacing:0;color:#355c41}.kpis small{font-size:.79rem;color:#607852}.home-tasks{background:#fffdf6}.home-tasks h2:before{content:'📌';margin-right:8px}.step{border-bottom:1px dashed #e5e2d4;padding:16px 0;gap:13px}.step b.num{border-radius:13px;background:#fbe7be;color:#745825;transform:rotate(-5deg);width:35px;height:35px}.step:nth-of-type(2) b.num{background:#e5e1f0;color:#665784;transform:rotate(5deg)}.step:nth-of-type(3) b.num{background:#e0eee4;color:#416d50}.step p{font-size:.84rem}.step strong{font-size:.98rem}.hint{background:#fff2d6;color:#715c31;border:1px dashed #e4cc91;border-radius:17px;font-size:.88rem}.home-tasks .hint{margin-bottom:0;font-size:.84rem;background:#f8f1df}
.stats .card{position:relative;border-radius:22px;padding:20px 22px;background:#f5efe3}.stats .card:nth-child(2){background:#edf2e9}.stats .card:nth-child(3){background:#f0edf7}.stats .stat{font-size:2rem;color:#3e5c4c;margin:3px 0}.stats .card:after{position:absolute;right:20px;top:20px;font-size:1.5rem;content:'✏️'}.stats .card:nth-child(2):after{content:'🌿'}.stats .card:nth-child(3):after{content:'⭐'}.stats .small{font-size:.83rem}.stats .small:first-child{padding-right:28px}.section-title h2{font-size:1.25rem}.lesson-card{border-top:5px solid #dfcfec}.lesson-card:nth-child(3n+2){border-top-color:#c4ddca}.lesson-card:nth-child(3n){border-top-color:#f0d5a6}.lesson-card .badge{align-self:flex-start;border:none;background:#f0edf5;color:#68587e}.lesson-card:nth-child(3n+2) .badge{background:#eaf2e9;color:#4e7454}.lesson-card:nth-child(3n) .badge{background:#fff1da;color:#866534}
.category-grid{grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:18px}.category-card{--tile:#fff0d9;--accent:#d6ab60;background:#fffefb;border:1.5px solid #e4e5d9;border-bottom:5px solid var(--tile);border-radius:24px;box-shadow:0 3px 0 #e4e5d938;min-height:240px;padding:22px}.category-card:nth-child(5n+2){--tile:#f0e8f9;--accent:#a792c5}.category-card:nth-child(5n+3){--tile:#e5f1e4;--accent:#85ad87}.category-card:nth-child(5n+4){--tile:#fce8df;--accent:#d79d87}.category-card:nth-child(5n){--tile:#e4f0f4;--accent:#81afbd}.category-icon{display:grid;place-items:center;width:62px;height:60px;border-radius:20px 24px 18px 22px;background:var(--tile,#fff0da);font-size:2rem;margin-bottom:16px;transform:rotate(-4deg)}.category-card:nth-child(even) .category-icon{transform:rotate(4deg)}.category-card:hover{border-color:var(--accent);background:#fff;box-shadow:0 6px 0 var(--tile)}.category-name{color:#3f5749;font-size:1.06rem}.category-en{font-size:.8rem;color:#7a8176}.category-progress-copy{font-size:.8rem;margin-top:13px}.category-meta{font-size:.78rem}.category-progress{background:#eeeee6}.category-progress span{background:var(--accent)}.category-toolbar{background:#f0f3e7;border:1px dashed #cbd6bb;border-radius:19px;padding:15px 18px}.category-tip{background:#f1f5e9;border-color:#d9e3cd}.category-mini-stats strong{color:#4e7454}.category-study-note{padding:0 4px}.progress{background:#e8ecdf;height:10px}.progress span{background:#78a981}.practice-menu button.card{border:1.5px solid #e2e6d8;border-bottom:5px solid #dde8d2;border-radius:24px;background:#fffef8}.practice-menu button.card:nth-child(2){border-bottom-color:#e6dcf0}.practice-menu button.card:nth-child(3){border-bottom-color:#f4dcad}.practice-menu button.card:hover{background:#f7f9f0;border-color:#a9c294}.practice-menu .category-icon{display:grid;background:#edf2e3}.practice-menu button:nth-child(2) .category-icon{background:#eee5f4}.practice-menu button:nth-child(3) .category-icon{background:#fff0d4}
.practice{max-width:780px}.practice>.card{border-top:6px solid #c4d9b7}.big-word{color:#2e6049;letter-spacing:.015em}.example{background:#f0f3e8;border-left:4px solid #a8c18c;border-radius:0 17px 17px 0}.choices button{border:2px solid #e1e7d8;border-radius:17px;background:#fffef9;box-shadow:0 3px 0 #e8ebdf;color:#374f42}.choices button:hover:not(:disabled){border-color:#93b17c;background:#f5f8ef}.choices button.correct{background:#e7f3e7;border-color:#73a879}.choices button.wrong{background:#fff0e9;border-color:#cc9183}.feedback{border:1px solid #c6e0c8;border-radius:18px;background:#edf6e9}.feedback.wrong{border-color:#edc3b5;background:#fff1ea;color:#923f37}.listen-button{border:2px dashed #afc898;background:#eef5e7;color:#326046;border-radius:22px}.spelling input{border:2px solid #cbdabf;background:#fffef9;border-radius:16px}.sound-pair{background:#fbfaf4;border:1.5px solid #dedfcf;border-radius:20px}.scene-pattern{color:#39664e}.tabs button.active{background:#3b775e;border-color:#3b775e}.phonics-grid button{background:#eff3e8;border:1px solid #dce5cf;border-radius:13px;font-weight:700}.phonics-grid button:nth-child(3n+2){background:#f3edf8;border-color:#e6dcf0}.phonics-grid button:nth-child(3n){background:#fff0d9;border-color:#f1dfbf}.lesson-detail .examples{border-color:#92b486}.reading-text{color:#344c40}.footer{border-top:1px dashed #d6dccb;color:#77816f;line-height:1.9;font-size:.78rem}.table-wrap th{background:#f0f3e8}input,select,textarea{border-color:#cdd8c6;border-radius:13px}.ring{background:#ffdf9a;color:#735d2e;border:5px solid #fff1cf}.empty{background:#f5f7ed;border-radius:20px}
@media(min-width:1500px){.hero-buddy{width:190px;top:14px}.card.blue .hero-title{max-width:calc(100% - 155px)}}
@media(max-width:1180px){.grid.two{grid-template-columns:1fr}.hero-buddy{width:220px;right:20px;top:8px}.card.blue .hero-title{max-width:calc(100% - 215px)}.card.blue>p{max-width:calc(100% - 180px)}.card.blue>.actions button:first-child{flex-basis:auto;max-width:none}.home-tasks .step{padding:13px 0}.main{padding:24px}.app-shell{grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:720px){.app-shell{display:block}.sidebar{height:auto;position:static;padding:18px 16px 8px;gap:16px}.brand{font-size:1.18rem}.brand small{display:block;font-size:.6rem}.mark{width:42px;height:42px;min-width:42px;font-size:24px}.nav{gap:7px;scrollbar-width:thin;scrollbar-color:#c5d5b7 transparent}.nav button{padding:10px 12px;border:1px solid #e6e9df;font-size:.86rem;min-height:44px;background:#fafbf5}.nav button.active{background:#e7efdc}.nav .icon{display:block;width:auto;font-size:1rem}.sidebar-note{display:none}.main{padding:20px 16px 36px}.topbar{margin-bottom:24px;gap:8px;align-items:flex-start}.topbar>span{font-size:.72rem;white-space:normal}.topbar>.actions{gap:4px;max-width:65%}.topbar .badge{font-size:.68rem}.topbar .text{font-size:.73rem;padding:3px 5px;min-height:28px}.header h1{font-size:1.5rem}.header p{font-size:.86rem}.card{padding:22px;border-radius:23px}.hero-buddy{width:145px;right:0;top:42px}.card.blue .hero-title{font-size:1.55rem;max-width:calc(100% - 110px);line-height:1.6;margin:22px 0 26px}.card.blue>p{max-width:none;font-size:.87rem}.card.blue .eyebrow{font-size:.72rem}.card.blue>.actions{gap:10px}.card.blue>.actions button:first-child{flex-basis:100%;max-width:none}.card.blue>.actions .outline{flex:1;font-size:.85rem;padding:10px 7px}.kpis{gap:8px;margin-top:21px;padding-top:16px}.kpis .stat{font-size:1.7rem}.kpis small{font-size:.7rem}.stats .card{padding:14px 10px;border-radius:18px}.stats .card:after{position:static;display:block;font-size:1.1rem;margin-top:5px}.stats .small:first-child{padding:0}.stats .small{font-size:.73rem}.stats .stat{font-size:1.6rem}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.category-card{padding:18px 14px;min-height:237px;border-radius:22px}.category-icon{width:53px;height:53px;font-size:1.8rem}.category-name{font-size:.97rem}.category-en{font-size:.78rem}.category-meta{font-size:.74rem}.category-progress-copy{font-size:.78rem}.category-toolbar{gap:12px;padding:15px}.category-toolbar .muted{line-height:1.8}.practice .card{padding:23px 18px}.practice .big-word{font-size:2.7rem}.practice-top{align-items:flex-start}.practice-menu button.card{padding:21px}.word-row .actions button{min-height:42px}.word-row{gap:9px}.word-row>div:first-child{min-width:0;overflow-wrap:anywhere}.word-row p{font-size:.82rem}.filters input{min-width:0;width:100%}.page-buttons{gap:10px}.page-buttons button{padding:9px 13px}}
@media(max-width:370px){.hero-buddy{width:115px;top:51px}.card.blue .hero-title{max-width:calc(100% - 90px);font-size:1.4rem}.main{padding:17px 12px}.card{padding:20px}.kpis small{font-size:.66rem}.category-card{padding:16px 11px}}
@media(prefers-reduced-motion:reduce){button,.card,main{transition:none!important;animation:none!important}button:hover:not(:disabled){transform:none}}

@media(max-width:720px){.hero-buddy{width:105px;right:9px;top:5px}.card.blue .hero-title{max-width:none;font-size:1.65rem;line-height:1.6;margin:62px 0 18px}.card.blue .eyebrow{max-width:calc(100% - 75px)}}
@media(max-width:370px){.card.blue .hero-title{max-width:none;font-size:1.45rem}.hero-buddy{width:96px}}