/* NHẨM NHANH — SUNSHINE EDITION 2.0 | CSS + original SVG design system */
:root {
  color-scheme:light;
  --bg:#f7f8fe; --surface:#fff; --ink:#26314e; --muted:#7e8aa2;
  --line:#e8ebf5; --primary:#6b5ce7; --primary-dark:#5443d1;
  --primary-soft:#f0eeff; --mint:#def9ef; --mint-ink:#168866;
  --peach:#fff0e7; --orange:#e5803a; --rose:#ffedf0; --error:#cd4c68;
  --shadow:0 11px 32px rgba(60,66,125,.05),0 3px 12px rgba(62,69,121,.025);
  --radius:24px;
  --font:"Trebuchet MS",ui-rounded,"SF Pro Rounded","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);background-image:radial-gradient(ellipse 45% 24% at 89% -5%,rgba(182,196,255,.17),transparent 85%);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.56;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #a89bff;outline-offset:3px}
h1,h2,h3,p{margin:0}h1{font-size:clamp(1.8rem,2.8vw,2.48rem);letter-spacing:-.048em;line-height:1.2}h2{font-size:1.26rem;letter-spacing:-.035em}h3{font-size:1.03rem;letter-spacing:-.02em}p{line-height:1.62}small{font-size:.8rem}.ui-icon{flex-shrink:0;vertical-align:middle;pointer-events:none}
::selection{background:#ddd8ff;color:#352588}
.app-shell{max-width:1630px;min-height:100vh;margin:auto;display:grid;grid-template-columns:255px minmax(0,1fr)}
/* Persistent navigation */
.sidebar{padding:34px 17px 25px 24px;background:rgba(255,255,255,.94);border-right:1px solid #eaeaf3;display:flex;flex-direction:column;gap:0}
.brand{display:flex;align-items:center;gap:12px;padding:3px 7px 31px;white-space:nowrap}.brand-mark{width:51px;height:51px;display:grid;place-items:center;flex-shrink:0;border-radius:17px;background:linear-gradient(135deg,#8975f5,#6250db);box-shadow:0 7px 16px #7164d535;transform:rotate(-5deg)}.brand-mark svg{transform:rotate(5deg)}.brand-label{font-size:1.35rem;font-weight:900;letter-spacing:-.055em}.brand-period{color:#f4a46b}.brand-sub{font-family:"Segoe UI",Arial,sans-serif;font-size:.6rem;color:#9aa2b9;letter-spacing:.14em;font-weight:850;margin-top:3px}
.nav-caption{font-family:"Segoe UI",Arial,sans-serif;font-size:.67rem;font-weight:850;color:#a6acc0;letter-spacing:.14em;margin:13px 15px 15px}
.side-nav{display:flex;flex-direction:column;gap:8px}.nav-item{border:0;width:100%;background:transparent;display:flex;align-items:center;text-align:left;gap:14px;padding:15px 15px;border-radius:15px;color:#7b859d;font-size:.91rem;font-weight:850;transition:background .2s ease,color .2s ease,transform .2s ease;white-space:nowrap}.nav-icon{width:23px;display:grid;place-items:center}.nav-item:hover{color:#6253d2;background:#f6f4ff}.nav-item.active{color:#5f4dd9;background:#eeebff;box-shadow:inset 3px 0 0 #8170ee}.nav-item.active .nav-icon{color:#6a57ea}
.side-callout{position:relative;overflow:hidden;margin-top:auto;margin-bottom:20px;padding:22px 20px 23px;background:linear-gradient(155deg,#f0edff 0%,#e9f7ff 95%);border:1px solid #e6e7ff;border-radius:23px}.side-callout .bubble{width:44px;height:44px;display:grid;place-items:center;background:#fff;border-radius:15px;color:#7363e7;box-shadow:0 8px 18px rgba(104,87,204,.09);margin-bottom:15px}.side-callout strong{display:block;position:relative;z-index:1;font-size:.94rem;line-height:1.4;color:#423f83}.side-callout p{position:relative;z-index:1;color:#7b82a8;font-size:.79rem;margin-top:8px;max-width:170px}.callout-decor{position:absolute;font-size:105px;line-height:1;color:#d8d1ff;bottom:-44px;right:-22px;transform:rotate(18deg)}.side-bottom{display:flex;gap:7px;align-items:center;color:#a1a7b9;font-family:"Segoe UI",Arial,sans-serif;font-size:.69rem;padding:0 8px;line-height:1.4}
.main{padding:29px clamp(24px,4.1vw,61px) 62px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px}.eyebrow{display:inline-flex;gap:10px;align-items:center;font-family:"Segoe UI",Arial,sans-serif;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:#8d94ad;font-weight:850}.eyebrow-dot{height:8px;width:8px;background:#8ddfc5;border-radius:50%;box-shadow:0 0 0 4px #e1f8ef}.top-actions{display:flex;gap:12px;align-items:center}.class-pill{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:100px;background:#fff;border:1px solid #e9eaf6;font-size:.75rem;color:#7567b9;font-weight:850;box-shadow:var(--shadow)}.class-pill svg{color:#e7a64e}.avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:50%;background:#ffeddf;color:#dc8f67;border:2px solid #fff;box-shadow:0 4px 10px #2e345011}
/* Hero card & illustration */
.dashboard-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:291px;padding:36px 39px;border-radius:29px;background:linear-gradient(113deg,#705ee7 0%,#7167ea 43%,#5683ed 100%);box-shadow:0 15px 35px rgba(90,88,217,.17)}
.dashboard-hero::before{content:"";position:absolute;border-radius:50%;width:390px;height:390px;right:115px;top:-190px;border:42px solid #fff;opacity:.055}.dashboard-hero::after{content:"";position:absolute;border-radius:50%;width:345px;height:345px;right:-190px;bottom:-220px;background:#a2ebff;opacity:.15}
.hero-noise{position:absolute;inset:0;opacity:.36;pointer-events:none;background-image:radial-gradient(#ffffff70 .8px,transparent .8px);background-size:27px 27px;mask-image:linear-gradient(to right,transparent,#000)}
.hero-copy{position:relative;z-index:2;max-width:570px;flex:1}.hero-copy .label{display:inline-flex;align-items:center;gap:8px;color:#dfd9ff;font-family:"Segoe UI",Arial,sans-serif;font-size:.75rem;font-weight:900;letter-spacing:.125em}.label-spark{font-size:19px;color:#ffe39d}.hero-copy h1{font-size:clamp(2.1rem,3.1vw,3.1rem);color:#fff;line-height:1.18;letter-spacing:-.052em;margin:14px 0 13px;text-shadow:0 2px 1px #5a53af30}.hero-copy h1 span{color:#ffeba8}.hero-copy p{font-size:.91rem;max-width:460px;color:#eeeaff;line-height:1.6}.hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:24px}.hero-time{display:inline-flex;align-items:center;gap:7px;font-size:.73rem;font-weight:700;color:#ecebff}.hero-time .ui-icon{opacity:.88}.hero-ornament{width:41%;max-width:395px;min-width:250px;position:absolute;right:13px;top:50%;transform:translateY(-50%);z-index:1}.hero-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 10px rgba(37,28,115,.08));animation:mascot-float 5s ease-in-out infinite}
@keyframes mascot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.btn{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;border-radius:14px;font-weight:850;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease;min-height:47px;padding:12px 18px;white-space:nowrap;font-size:.88rem;line-height:1.25}.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.975)}.btn-primary{color:#fff;background:linear-gradient(125deg,#7463ee,#6052da);box-shadow:0 8px 19px rgba(103,84,220,.2)}.btn-primary:hover{background:linear-gradient(125deg,#6254df,#5141c6);box-shadow:0 11px 24px rgba(103,84,220,.27)}.btn-hero{background:#fff;color:#5d4ccf;box-shadow:0 10px 27px #29206433}.btn-hero:hover{background:#fff7da;color:#5143b0}.btn-secondary{color:#68728b;background:#fff;border-color:#e1e5f2}.btn-secondary:hover{background:#f9f9ff;border-color:#c9c5f7}.btn-soft{background:#efedff;color:#6251da}.btn-soft:hover{background:#e4e1ff}.btn-text{background:transparent;color:#7162d9;padding:8px;min-height:auto}.btn-large{min-height:53px;padding:14px 22px;font-size:.91rem}
/* Progress highlights */
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 36px}.stat-card{min-width:0;display:flex;align-items:center;gap:15px;padding:20px 20px;background:#fff;border:1px solid var(--line);border-radius:21px;box-shadow:var(--shadow)}.stat-icon{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:17px}.stat-icon.orange{background:#fff0e5;color:#f09662}.stat-icon.blue{background:#ebeaff;color:#8272e8}.stat-icon.green{background:#e4f8ee;color:#36b68b}.stat-label{font-size:.78rem;color:#8791a6;margin-bottom:5px;font-weight:800}.stat-value{font-weight:900;font-size:1.55rem;line-height:1.05;letter-spacing:-.045em;font-variant-numeric:tabular-nums}.stat-unit{font-size:.73rem;color:#939bad;font-weight:700;letter-spacing:0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:14px;margin:28px 0 17px}.section-head h2{font-size:1.43rem}.section-head p{font-size:.81rem;color:#8792aa;margin-top:7px}.section-kicker{display:flex;align-items:center;gap:7px;color:#7b67df;font-family:"Segoe UI",Arial,sans-serif;font-size:.7rem;font-weight:900;letter-spacing:.1em;margin-bottom:9px}.journey-complete{padding:8px 13px;white-space:nowrap;border-radius:100px;background:#e9f8f1;color:#2c9a76;font-size:.74rem;font-weight:900}.journey-track{height:8px;background:#e9e8f4;border-radius:20px;margin:19px 0 25px;overflow:hidden}.journey-track span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#7562ee,#5fc7be);transition:width .3s ease}
/* Thirty-day calendar */
.weeks{display:grid;gap:19px}.week-panel{--week:#7866e7;--week-light:#f1eeff;--week-ink:#6a57d2;position:relative;overflow:hidden;padding:22px 23px 23px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.week-panel::before{content:"";position:absolute;top:0;left:26px;right:26px;height:3px;border-radius:0 0 10px 10px;background:var(--week);opacity:.9}.week-2{--week:#25b9a0;--week-light:#e4fbf3;--week-ink:#159579}.week-3{--week:#f2a55c;--week-light:#fff3e5;--week-ink:#d68337}.week-4{--week:#ed88a9;--week-light:#fff0f5;--week-ink:#d46589}.week-heading{display:flex;align-items:center;gap:13px;margin-bottom:19px}.week-icon{width:46px;height:46px;border-radius:15px;background:var(--week-light);color:var(--week-ink);display:grid;place-items:center;flex:none}.week-title{min-width:0;flex:1}.week-heading h3{font-size:1.01rem}.week-heading p{font-size:.75rem;color:#96a0b3;margin-top:5px}.week-range{font-family:"Segoe UI",Arial,sans-serif;flex:none;border-radius:20px;padding:7px 10px;color:var(--week-ink);background:var(--week-light);font-weight:850;font-size:.66rem;letter-spacing:.035em}
.day-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.day-card{position:relative;min-width:0;min-height:143px;display:flex;flex-direction:column;gap:12px;text-align:left;padding:15px 13px 14px;border-radius:17px;border:1.5px solid #ebedf5;background:#fbfcff;color:var(--ink);transition:border-color .17s ease,box-shadow .17s ease,transform .17s ease,background .17s ease}.day-card:hover{background:#fff;border-color:var(--week);box-shadow:0 10px 22px rgba(70,65,130,.08);transform:translateY(-3px)}.day-card:focus-visible{z-index:2}.day-card.next{background:#f4f1ff;border-color:#8975ef;box-shadow:0 6px 14px #7163db15}.day-card.done{background:#f1fbf7;border-color:#c8efdc}.day-card.done:hover{border-color:#44bd93}.day-top{display:flex;align-items:center;justify-content:space-between;gap:5px}.day-num{font-family:"Segoe UI",Arial,sans-serif;color:#8c97ad;font-size:.66rem;font-weight:900;letter-spacing:.07em}.day-card.next .day-num{color:#6d5ce2}.day-card.done .day-num{color:#368f73}.day-symbol{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:#f0f1f8;color:#b1b6c5}.day-check{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#c9f2df;color:#20875f}.day-future{font-family:"Segoe UI",Arial,sans-serif;color:#8390ad;font-size:.61rem;font-weight:900}.day-future.active-state{color:#6556d9}.day-name{font-size:.84rem;line-height:1.36;font-weight:850;letter-spacing:-.02em;min-height:37px}.day-meta{display:flex;align-items:center;gap:3px;color:#99a2b4;font-family:"Segoe UI",Arial,sans-serif;font-size:.69rem;line-height:1.4;font-weight:650;margin-top:auto}.day-card.next .day-meta{color:#6a58da;font-weight:850}.day-card.done .day-meta{color:#258b68}.footer-note{display:flex;align-items:center;gap:9px;color:#9da5b8;font-size:.73rem;line-height:1.6;margin-top:28px}.footer-note .ui-icon{color:#b0a7eb}
/* Actual learning screen */
.lesson-layout{max-width:870px;margin:0 auto}.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.lesson-top .eyebrow{color:#7762e0}.quiz-head{margin:19px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}.quiz-head h1{font-size:clamp(1.47rem,2.4vw,2rem);margin:5px 0 6px}.quiz-head p{font-size:.82rem;color:#8a93a9}.timer{display:flex;align-items:center;gap:10px;flex:none;background:#fff;padding:8px 16px 8px 8px;border:1px solid #e7e6f7;border-radius:16px;font-size:1.09rem;font-weight:900;font-variant-numeric:tabular-nums;color:#5c52bd;box-shadow:var(--shadow)}.timer-symbol{width:39px;height:39px;display:grid;place-items:center;background:#f0edff;border-radius:12px}.timer-over{color:#e08050;background:#fff3eb;border-color:#ffdbc7}.timer-over .timer-symbol{background:#ffe3d1}
.instruction-box{display:flex;align-items:center;gap:8px;padding:13px 16px;border-radius:15px;border:1px solid #f7e7cc;background:#fff7e9;color:#9a793e;font-size:.8rem;line-height:1.6;margin-bottom:16px}.instruction-box strong{display:inline-flex;gap:7px;align-items:center;flex:none;color:#c38a39}.instruction-box strong svg{color:#e7a246}.progress-track{height:11px;border-radius:20px;background:#e8e8f3;overflow:hidden}.progress-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,#836ff0,#56c9b4);transition:width .3s ease}
.question-card{position:relative;overflow:hidden;background:#fff;border:1px solid #e8e9f5;border-radius:28px;padding:27px clamp(20px,5vw,50px) 31px;box-shadow:0 13px 40px rgba(73,75,148,.05)}.question-card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#a99cf5,#7bcadc,#9fe3c3);opacity:.85}.question-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:900;color:#7e8ca7;font-size:.8rem}.skill-tag{background:#edf1ff;color:#7260d4;padding:8px 12px;border-radius:100px;font-size:.7rem;font-weight:850;white-space:nowrap}.math-wrap{text-align:center;margin:32px 0 23px}.math-kicker{color:#a4acc0;font-size:.81rem;font-weight:750}.math-expression{font-size:clamp(2.2rem,5.6vw,4.1rem);letter-spacing:-.046em;line-height:1.27;font-weight:900;color:#29315b;font-variant-numeric:tabular-nums;margin:9px 0 0;overflow-wrap:anywhere}.answer-group{max-width:360px;margin:auto}.answer-label{display:block;text-align:center;font-family:"Segoe UI",Arial,sans-serif;font-size:.73rem;font-weight:900;letter-spacing:.12em;color:#929db2;margin-bottom:10px}.answer-input{border:2px solid #e6e4fa;background:#fafaff;color:#423888;width:100%;height:67px;text-align:center;border-radius:18px;outline:none;font-size:2.05rem;font-weight:900;letter-spacing:.01em;font-variant-numeric:tabular-nums;transition:box-shadow .2s,border-color .2s}.answer-input:focus{border-color:#8876ee;outline:none;box-shadow:0 0 0 4px #efedff}.answer-input:disabled{background:#f8f9fd;color:#9aa3b6}.answer-input.good{background:#f0fbf5;color:#1e946e;border-color:#84dcb4}.answer-input.bad{background:#fff4f5;color:#ca4b62;border-color:#f3a4b4}
.question-actions{display:flex;justify-content:center;flex-wrap:wrap;align-items:center;gap:11px;margin:19px 0 0}.question-actions .btn{min-width:163px}.hint-box,.feedback{display:flex;align-items:start;gap:8px;max-width:560px;margin:16px auto 0;border-radius:16px;padding:14px 16px;line-height:1.6;font-size:.85rem}.hint-box{background:#fff8ec;border:1px solid #f8e6c4;color:#966f38}.hint-box svg{flex:none;margin-top:3px}.feedback{display:block;border:1px solid transparent}.feedback.good{background:#eefaf5;color:#247959;border-color:#d0f1e0}.feedback.bad{background:#fff1f3;color:#a5445b;border-color:#f8dde2}.feedback strong{display:flex;align-items:center;gap:8px;font-size:.97rem;margin-bottom:4px}.feedback p{font-size:.84rem;color:inherit}
.keypad{max-width:360px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:19px auto 0}.key{height:55px;border:1px solid #e9e9f4;background:#faf9ff;color:#615d8d;border-radius:14px;font-size:1.24rem;font-weight:900;box-shadow:0 2px 0 #ebeaf5;transition:background .12s,transform .12s}.key:hover{background:#f0eeff;color:#5141c6}.key:active{transform:translateY(2px);box-shadow:none;background:#ded9ff}.key.action{background:#f0ecff;color:#7260dc}.lesson-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;color:#8d9ab2;font-size:.76rem}.lesson-foot>span{display:flex;align-items:center;gap:7px}.lesson-foot .ui-icon{color:#7dc9b7}.lesson-layout>.footer-note{margin-top:14px}
/* Celebration and review */
.result-shell{max-width:845px;margin:16px auto 0}.result-card{position:relative;overflow:hidden;text-align:center;padding:28px clamp(20px,6vw,57px) 37px;background:#fff;border:1px solid var(--line);border-radius:29px;box-shadow:var(--shadow)}.result-card::before{content:"";position:absolute;z-index:0;left:-100px;right:-100px;top:-130px;height:310px;background:radial-gradient(ellipse at center,#f4f0ff,transparent 67%);pointer-events:none}.result-card>*{position:relative;z-index:1}.result-emoji{width:170px;height:146px;margin:0 auto 4px}.award-svg{display:block;width:100%;height:100%}.result-card h1{margin:9px 0 11px}.result-card>p{color:#8590a8;font-size:.87rem}.result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0}.result-stat{background:#f5f4ff;border-radius:17px;padding:21px 10px}.result-stat:nth-child(2){background:#f2faf6}.result-stat:nth-child(3){background:#fff7ec}.result-stat strong{display:block;font-size:1.72rem;font-weight:900;letter-spacing:-.045em;color:#6b58da;font-variant-numeric:tabular-nums}.result-stat:nth-child(2) strong{color:#30a17d}.result-stat:nth-child(3) strong{color:#d78c50}.result-stat span{display:block;color:#828fa4;font-size:.75rem;margin-top:5px}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.review{margin-top:23px;text-align:left}.review-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:25px 0 10px}.review-title h3{display:flex;align-items:center;gap:8px}.review-title h3 .ui-icon{color:#e5aa53}.review-title p{font-size:.78rem;color:#9a9fb4}.review-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #f0eff7;padding:13px 10px;font-size:.88rem}.review-row:last-child{border-bottom:0}.review-row strong{font-variant-numeric:tabular-nums}.review-row .wrong{color:#c75668}.review-row .correct{color:#229d74}
/* Progress journal and learning tips */
.history-list{display:grid;gap:10px}.history-row{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);padding:15px 18px;border-radius:18px;box-shadow:var(--shadow)}.history-number{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:15px;background:#f0edff;color:#7966dc;font-weight:900}.history-main{flex:1;min-width:0}.history-main strong{display:block;font-size:.89rem}.history-main p{font-size:.75rem;color:#9aa3b6;margin-top:5px}.history-right{text-align:right;white-space:nowrap}.history-right strong{display:block;font-size:.91rem}.history-right small{display:flex;align-items:center;justify-content:end;gap:5px;margin-top:6px;color:#929bad;font-size:.74rem}.history-right .ui-icon{color:#a39be3}.empty-history{background:#fff;border:1px solid var(--line);border-radius:24px;padding:61px 20px;text-align:center}.empty-history .symbol{display:grid;place-items:center;width:75px;height:75px;background:#e6f9ee;color:#35b18a;border-radius:23px;margin:0 auto 17px;transform:rotate(-7deg)}.empty-history .symbol svg{transform:rotate(7deg)}.empty-history h2{max-width:400px;margin:auto}
.tips-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tip-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 23px;box-shadow:var(--shadow)}.tip-card::after{content:"";position:absolute;right:-27px;top:-27px;width:100px;height:100px;border-radius:40px;background:#f0edff;opacity:.36;transform:rotate(20deg)}.tip-card:nth-child(2n)::after{background:#e0f8ee}.tip-card:nth-child(3n)::after{background:#ffeddf}.tip-ico{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;background:#f0edff;color:#7663e6;margin-bottom:16px}.tip-card:nth-child(2n) .tip-ico{background:#e2f9ee;color:#2da984}.tip-card:nth-child(3n) .tip-ico{background:#fff0e5;color:#df915a}.tip-card h3{font-size:1rem}.tip-card p{margin-top:8px;color:#8491a8;font-size:.82rem}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-top:12px}.info-row strong{font-size:.91rem}.info-row p{color:#8d98ad;font-size:.78rem;margin-top:4px}.info-row .btn{flex:none}
.toast{position:fixed;z-index:60;bottom:22px;left:50%;transform:translateX(-50%);background:#29274f;color:#fff;padding:14px 20px;border-radius:15px;box-shadow:0 10px 35px #2d284c50;font-size:.84rem;max-width:calc(100vw - 24px);text-align:center}.confirm-backdrop{position:fixed;inset:0;background:#28244c8c;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;z-index:55}.confirm-dialog{background:#fff;border-radius:25px;padding:29px;max-width:425px;width:100%;box-shadow:0 25px 75px #1c1a5550}.confirm-dialog h2{font-size:1.29rem}.confirm-dialog p{color:#8590a8;font-size:.87rem;margin:12px 0 24px}.confirm-buttons{display:flex;justify-content:flex-end;gap:10px}.startup{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:100vh;gap:12px;color:#7567d4}.startup .logo-symbol{display:grid;place-items:center;width:72px;height:72px;border-radius:25px;background:#7060df;color:#fff;font-size:43px}.startup strong{font-size:1.5rem;color:#2d2f52}.startup>span:last-child{font-size:.82rem}.hidden{display:none!important}
@media(max-width:1230px){.app-shell{grid-template-columns:220px minmax(0,1fr)}.sidebar{padding:28px 12px 22px 17px}.main{padding-inline:28px}.brand-label{font-size:1.16rem}.brand-mark{width:46px;height:46px}.day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{gap:11px;padding:17px 13px}.hero-ornament{width:38%;right:0}.hero-copy{max-width:65%}}
@media(max-width:900px){.app-shell{display:block}.sidebar{padding:12px 23px;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:15;border-bottom:1px solid #ececf7;border-right:0;box-shadow:0 5px 20px #2b2b4f08;backdrop-filter:blur(16px)}.brand{padding:0}.brand-label{font-size:1.12rem}.brand-sub,.nav-caption,.side-callout,.side-bottom{display:none}.side-nav{flex-direction:row;gap:4px}.nav-item{width:auto;padding:12px 15px;gap:8px;font-size:.79rem}.nav-icon{width:20px}.main{padding:24px 29px 45px}.dashboard-hero{padding:31px}.hero-ornament{right:0;width:39%}.day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:690px){.sidebar{padding:10px 14px}.brand-mark{width:39px;height:39px;border-radius:13px}.brand-mark svg{width:25px}.brand-label{font-size:1.03rem}.nav-item{padding:10px}.nav-label{display:none}.nav-icon{width:22px}.main{padding:18px 15px 44px}.topbar{margin-bottom:15px}.topbar .eyebrow{font-size:.67rem}.top-actions{gap:5px}.class-pill{font-size:.67rem;padding:7px 10px}.avatar{height:35px;width:35px}.dashboard-hero{min-height:290px;padding:28px 24px}.hero-copy{max-width:100%}.hero-copy .label{font-size:.64rem}.hero-copy h1{font-size:clamp(1.9rem,5.6vw,2.65rem);max-width:330px}.hero-copy p{max-width:310px;font-size:.81rem}.hero-ornament{width:210px;min-width:0;right:-30px;top:39%;opacity:.6}.hero-cta{max-width:300px}.hero-time{font-size:.68rem}.stats-grid{gap:8px;margin:13px 0 27px}.stat-card{display:block;text-align:center;padding:13px 5px;border-radius:17px}.stat-icon{height:38px;width:38px;border-radius:12px;margin:0 auto 9px}.stat-icon .ui-icon{width:21px}.stat-label{font-size:.67rem}.stat-value{font-size:1.2rem}.stat-unit{font-size:.63rem}.section-head{margin-top:24px}.section-head h2{font-size:1.21rem}.journey-complete{font-size:.66rem}.week-panel{padding:17px 14px}.week-heading{gap:10px}.week-icon{height:40px;width:40px;border-radius:13px}.week-heading h3{font-size:.88rem}.week-heading p{font-size:.7rem}.week-range{font-size:.57rem;padding:6px 8px}.day-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.day-card{min-height:120px;padding:13px 12px;gap:8px}.day-name{min-height:0}.day-meta{font-size:.66rem}.quiz-head h1{font-size:1.42rem}.timer{font-size:.87rem;padding:5px 9px 5px 5px;gap:5px}.timer-symbol{height:31px;width:31px;border-radius:9px}.timer-symbol svg{width:17px}.instruction-box{align-items:start;font-size:.75rem;display:block}.instruction-box strong{margin-right:5px}.question-card{padding:22px 15px 25px;border-radius:23px}.math-wrap{margin:26px 0 22px}.math-expression{font-size:clamp(2.15rem,8.2vw,3.3rem)}.answer-input{height:63px}.lesson-foot{align-items:start}.result-card{padding:21px 15px 28px}.result-emoji{width:135px;height:117px}.result-stats{gap:8px}.result-stat{padding:16px 6px}.result-stat strong{font-size:1.28rem}.result-stat span{font-size:.67rem}.tips-list{grid-template-columns:1fr}.history-row{padding:12px;gap:10px}.history-number{width:38px;height:38px}.history-main strong{font-size:.78rem}.history-right strong{font-size:.79rem}.info-row{flex-wrap:wrap}.info-row .btn{margin-left:auto}.footer-note{align-items:start}}
@media(max-width:385px){.main{padding-inline:11px}.dashboard-hero{padding:25px 18px}.hero-ornament{opacity:.36}.stat-value{font-size:1.08rem}.stat-unit{display:block;margin-top:3px}.day-card{padding:12px 10px}.week-range{display:none}.quiz-head{gap:8px}.quiz-head h1{font-size:1.24rem}.timer{font-size:.78rem}.key{height:52px}.result-stat strong{font-size:1.14rem}}
@media(hover:none){.day-card:hover,.btn:hover{transform:none}.nav-item:hover{background:transparent}.nav-item.active:hover{background:#eeebff}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ═══════════════════════════════════════════════════════════
   NHẨM NHANH • JOYFUL PREMIUM 2.0
   Native SVG visual system + iPad/desktop-first responsive UI.
   Pure CSS, no Google fonts / CDNs; works offline.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#F7F8FF;--surface:#FFFFFF;--ink:#26264D;--muted:#8187A5;
  --line:#E9EBF5;--primary:#6861EA;--primary-dark:#5046D9;
  --primary-soft:#F0EEFF;--mint:#E3FBF2;--mint-ink:#117B65;
  --peach:#FFF0DF;--orange:#E38E42;--rose:#FFE9EC;--error:#D3526B;
  --shadow:0 14px 45px rgba(52,51,109,.055),0 3px 9px rgba(47,47,100,.025);
  --radius:26px;
  --font:ui-rounded,'SF Pro Rounded','Nunito','Segoe UI Variable','Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at 82% -10%,#EFEFFF 0,transparent 33%),linear-gradient(180deg,#FAFAFF,#F5F7FF 50%,#FAFBFF);color:var(--ink)}
button,input{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid #B2AAFF;outline-offset:3px}
.svg-icon{display:inline-block;flex:none;vertical-align:middle}
h1,h2,h3{letter-spacing:-.045em}
h1{font-weight:870}h2,h3{font-weight:840}
.app-shell{grid-template-columns:254px minmax(0,1fr);max-width:1600px;min-height:100vh;background:transparent}
.sidebar{position:sticky;top:0;min-height:100vh;height:100vh;align-self:start;padding:31px 19px 25px 20px;gap:0;background:#FFFFFF;border-right:1px solid #ECEEF8;box-shadow:8px 0 48px rgba(75,72,149,.015)}
.brand{padding:0 5px;gap:11px}.brand-mark{width:52px;height:52px;border-radius:17px;transform:none;display:block;background:transparent;flex:none}.brand-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 7px 10px rgba(95,84,224,.2))}
.brand-label{font-size:1.27rem;font-weight:900;letter-spacing:-.06em;white-space:nowrap}.brand-period{color:#FFAD78}.brand-sub{color:#979AB6;letter-spacing:.11em;font-size:.63rem;font-weight:850;margin-top:5px}
.sidebar-section-label{font-size:.65rem;color:#A5A9C4;letter-spacing:.16em;font-weight:850;margin:57px 16px 13px}
.side-nav{gap:7px}.nav-item{position:relative;color:#8085A5;border-radius:14px;padding:13px 14px;min-height:52px;gap:13px;font-size:.88rem;font-weight:800;transition:background .2s,color .2s,transform .2s}
.nav-item:hover{color:#5E58C9;background:#F5F3FF;transform:translateX(2px)}.nav-item.active{color:#6257E2;background:linear-gradient(110deg,#F1EFFF,#F7F7FF);box-shadow:inset 0 0 0 1px #EAE5FF}
.nav-icon{height:25px;width:25px;display:grid;place-items:center}.active-pill{margin-left:auto;width:6px;height:20px;background:#7770FF;border-radius:10px;box-shadow:0 2px 5px #7770FF55}
.side-callout{position:relative;margin-top:auto;background:linear-gradient(143deg,#EEEAFE 0%,#F2F3FF 59%,#EDF7FF 100%);border-radius:23px;padding:20px 19px 21px;overflow:hidden;isolation:isolate;border:1px solid #E9E5FF}
.side-callout:before,.side-callout:after{content:"";position:absolute;border-radius:50%;z-index:-1}.side-callout:before{width:125px;height:125px;right:-39px;top:-37px;background:#DCD8FF}.side-callout:after{width:77px;height:77px;left:-28px;bottom:-36px;background:#D3F4F1}
.callout-stars{height:64px;display:flex;align-items:flex-start;gap:8px}.callout-sparkle{width:53px;height:53px;border-radius:19px;background:#756AF0;color:white;display:grid;place-items:center;transform:rotate(-12deg);box-shadow:0 9px 15px rgba(107,97,233,.26)}.callout-circle{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;color:#F16E8A;background:white;transform:rotate(12deg) translateY(9px);box-shadow:0 5px 10px #715FE31D}
.side-callout strong{font-size:1.01rem;line-height:1.35;color:#413DA0;letter-spacing:-.025em}.side-callout p{color:#7779A7;font-size:.78rem;line-height:1.62;margin-top:9px}.callout-dots{margin-top:17px;display:flex;gap:6px}.callout-dots span{width:7px;height:7px;border-radius:50%;background:#BAB4F9}.callout-dots span:nth-child(2){background:#F9BAA7}.callout-dots span:nth-child(3){background:#94D6D1}.callout-dots span:nth-child(4){background:#EFCBA4}
.side-bottom{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px;padding:0;color:#B5B5CA;font-size:.67rem;font-weight:750;white-space:nowrap}
.main{padding:28px clamp(22px,3.6vw,57px) 60px;min-width:0}.topbar{margin-bottom:25px}.topbar-left{display:flex;align-items:center}.eyebrow{color:#888CAD;font-weight:850;font-size:.72rem;letter-spacing:.07em;display:inline-flex;align-items:center;gap:10px}.eyebrow-dot{height:8px;width:8px;border-radius:50%;background:#8CE0CC;box-shadow:0 0 0 4px #E0F8F2}.top-actions{gap:12px}.class-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;background:#fff;color:#6F71A6;border:1px solid #E9EAF6;font-size:.77rem;box-shadow:0 3px 8px #6666A808}
.class-pill .svg-icon{color:#7770EF}.avatar{width:42px;height:42px;background:#FFE9D9;color:#D17D53;border:2px solid white;box-shadow:0 2px 10px rgba(235,174,134,.17)}
/* Lavender hero, playful but restrained 3D-like SVG illustration */
.dashboard-hero{min-height:287px;padding:35px 40px;border-radius:30px;background:linear-gradient(111deg,#EAEBFF 0%,#E4E4FF 48%,#D8E3FF 100%);border:1px solid #DFE1FF;box-shadow:0 15px 34px rgba(110,103,224,.075);isolation:isolate}
.dashboard-hero:after{content:"";position:absolute;width:250px;height:250px;right:-95px;bottom:-135px;border-radius:50%;border:55px solid rgba(255,255,255,.3);pointer-events:none;z-index:-1}.hero-bloom{position:absolute;border-radius:50%;pointer-events:none}.bloom-one{width:210px;height:210px;right:18%;top:-170px;background:#fff;opacity:.4}.bloom-two{width:140px;height:140px;right:38%;bottom:-129px;background:#BDD4FF;opacity:.3}
.hero-copy{max-width:66%;z-index:2}.hero-copy .hero-label{color:#6A5EDC;font-size:.7rem;display:inline-flex;align-items:center;gap:8px;letter-spacing:.09em;font-weight:900;padding:7px 12px;background:#FFFFFF95;border:1px solid #FFFFFFBB;border-radius:100px}
.hero-copy h1{color:#292650;margin:17px 0 13px;font-size:clamp(2.05rem,3.3vw,3rem);letter-spacing:-.065em;line-height:1.12;font-weight:920}.hero-copy h1 span{color:#665CDA}.hero-copy p{color:#6B6D92;font-size:.94rem;line-height:1.6;font-weight:550;max-width:490px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:22px}.hero-time{display:inline-flex;align-items:center;gap:7px;color:#7779AA;font-weight:760;font-size:.75rem;white-space:nowrap}
.hero-ornament{position:absolute;right:8px;top:1px;bottom:2px;display:flex;align-items:center;justify-content:center;width:43%;height:auto;pointer-events:none}.hero-svg{display:block;width:100%;max-width:455px;max-height:306px;filter:saturate(1.04);animation:hero-arrive .6s ease both}
@keyframes hero-arrive{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.btn{border-radius:15px;font-weight:840;min-height:48px;padding:12px 18px;transition:background .18s,transform .18s,box-shadow .18s,border-color .18s;letter-spacing:-.014em}
.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(110deg,#776AF5,#6257E6);color:#fff;box-shadow:0 8px 20px rgba(105,94,237,.28);border:1px solid #675DE5}.btn-primary:hover:not(:disabled){background:linear-gradient(110deg,#6659E8,#5546D7);box-shadow:0 12px 25px rgba(105,94,237,.34)}
.btn-secondary{background:white;color:#686685;border:1px solid #E6E6F3;box-shadow:0 3px 8px #5E58D00C}.btn-secondary:hover:not(:disabled){background:#F8F8FF;border-color:#D5D1F5}.btn-soft{background:#EFEEFF;color:#6255D4;border:1px solid #E8E4FF}.btn-soft:hover:not(:disabled){background:#E7E3FF}.btn-text{color:#6863C7;min-height:38px}
.btn-large{min-height:54px;padding:14px 21px;font-size:.91rem;gap:11px}
/* Three colorful high-clarity achievement tiles */
.stats-grid{gap:16px;margin:19px 0 37px}.stat-card{position:relative;overflow:hidden;min-height:116px;border-radius:22px;border:1px solid transparent;padding:22px 20px;gap:14px;box-shadow:none;isolation:isolate}.stat-card:after{content:"";position:absolute;right:-42px;top:-48px;width:127px;height:127px;border-radius:50%;background:#FFF8;z-index:-1}.stat-card:before{content:"";position:absolute;bottom:-47px;right:18px;width:95px;height:95px;border-radius:50%;background:#FFF4;z-index:-1}
.stat-purple{background:linear-gradient(120deg,#F0ECFF,#E9EAFF);border-color:#E8E3FD}.stat-coral{background:linear-gradient(120deg,#FFF1E5,#FFE6E7);border-color:#FFE7DF}.stat-teal{background:linear-gradient(120deg,#E7FAF6,#DFF4F7);border-color:#DAF1F0}
.stat-icon{width:51px;height:51px;border-radius:17px;background:#FFFFFFD9;color:#7770E8;box-shadow:0 5px 12px #7F72CF15}.stat-coral .stat-icon{color:#E58D65;background:#FFF9F5}.stat-teal .stat-icon{color:#31AC9A;background:#F7FFFE}
.stat-label{font-size:.8rem;color:#777890;font-weight:740;margin-bottom:7px}.stat-value{font-size:1.85rem;font-weight:920;color:#343058;letter-spacing:-.055em;font-variant-numeric:tabular-nums}.stat-unit{font-weight:740;color:#8889A6;font-size:.73rem;margin-left:3px}.stat-deco{position:absolute;right:21px;bottom:12px;width:30px;height:30px;border:4px solid #FFFFFF77;border-radius:50%;pointer-events:none}
.roadmap-section{padding-bottom:10px}.section-head{margin:34px 0 21px;align-items:center}.section-head h2{font-size:1.6rem;letter-spacing:-.05em;color:#2D2C50;margin:8px 0 0}.section-head p{margin-top:7px;font-size:.84rem;color:#878CA7}.section-overline{display:flex;align-items:center;gap:6px;color:#8270DB;font-size:.66rem;letter-spacing:.12em;font-weight:900}.section-overline svg{color:#F6A657}.inline-rocket{color:#F29369;vertical-align:middle;margin-left:4px}.roadmap-progress{width:156px;flex:none;text-align:right}.roadmap-progress>span{display:block;font-size:.77rem;font-weight:780;color:#8086A4;margin-bottom:9px}.roadmap-progress strong{color:#635BDF;font-size:1rem}.roadmap-track{height:8px;background:#E6E5F9;border-radius:20px;overflow:hidden}.roadmap-track-fill{height:100%;background:linear-gradient(90deg,#8776FA,#75D7C5);border-radius:20px;transition:width .3s}
.weeks{gap:20px}.week-panel{background:white;border:1px solid #E8E9F4;border-radius:25px;padding:23px;box-shadow:var(--shadow)}.week-heading{gap:14px;margin-bottom:21px}.week-icon{width:49px;height:49px;border-radius:17px;background:#EEEAFE;color:#745FE8;box-shadow:inset 0 0 0 1px #E7E0FF}.week-theme-2 .week-icon{background:#E5FAF2;color:#2EAF8D;box-shadow:inset 0 0 0 1px #D2F4E8}.week-theme-3 .week-icon{background:#FFF0DB;color:#E69A49;box-shadow:inset 0 0 0 1px #FFE7C4}.week-theme-4 .week-icon{background:#FFE7EC;color:#E56D8A;box-shadow:inset 0 0 0 1px #FFDCE3}
.week-kicker{color:#8171DB;font-size:.63rem;font-weight:950;letter-spacing:.11em;margin-bottom:4px}.week-theme-2 .week-kicker{color:#39AA91}.week-theme-3 .week-kicker{color:#D7974A}.week-theme-4 .week-kicker{color:#E4708D}.week-kicker span{color:#BBB7D4}.week-heading h3{font-size:1.1rem;color:#33315B}.week-heading p{font-size:.79rem;color:#8B91A9;line-height:1.4;margin-top:5px}.week-head-copy{min-width:0;flex:1}.week-counter{margin-left:auto;color:#B4B1CA;font-size:.72rem;font-weight:800;letter-spacing:.04em;white-space:nowrap;align-self:center}
.day-grid{gap:11px}.day-card{min-height:144px;border:1px solid #EBECF4;border-radius:18px;background:#FAFAFE;padding:16px 15px 15px;gap:10px;box-shadow:0 2px 0 rgba(97,91,160,.012);transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.day-card:hover{background:#fff;border-color:#BBB3FC;transform:translateY(-4px);box-shadow:0 11px 25px rgba(80,69,160,.09)}.day-card.next{background:linear-gradient(150deg,#F5F1FF,#ECEAFF);border:1.5px solid #9B8DF4;box-shadow:0 6px 15px rgba(110,91,225,.10)}.day-card.next:before{content:"";position:absolute;top:0;left:15%;right:15%;height:3px;border-radius:0 0 9px 9px;background:linear-gradient(90deg,#8F80F5,#74D4C9)}.day-card.done{background:#F3FBF7;border:1px solid #D7F1E5}.day-card.done:hover{border-color:#A9DCCB}
.day-num{font-size:.68rem;letter-spacing:.08em;color:#9393B2;font-weight:900}.day-card.next .day-num{color:#7B6AE3}.day-card.done .day-num{color:#43A98D}.day-check{width:24px;height:24px;border-radius:50%;background:#D8F4E6;color:#229A76;display:grid;place-items:center}.day-future{display:grid;place-items:center;color:#CBC9DD}.day-current-label{font-size:.57rem;font-weight:900;letter-spacing:.035em;color:#6E59D6;background:#E1DCFF;border-radius:100px;padding:5px 7px;white-space:nowrap}
.day-name{font-size:.89rem;line-height:1.3;color:#474566;min-height:39px;font-weight:850}.day-card.next .day-name{color:#4B3FA4}.day-card.done .day-name{color:#377D65}.day-meta{font-size:.69rem;line-height:1.4;color:#A0A3B9;margin-top:auto;padding-right:8px}.day-card.next .day-meta{color:#8177C3}.day-card.done .day-meta{color:#65A693}.day-card-arrow{display:none;position:absolute;right:13px;bottom:12px;color:#8676D9;opacity:0;transition:opacity .2s,transform .2s}.day-card:hover .day-card-arrow{display:block;opacity:1;transform:translateX(2px)}
.footer-note{font-size:.76rem;color:#999CB4;line-height:1.7;margin-top:22px}.footer-note>.svg-icon{color:#F192B0;margin-right:5px}.footer-note strong{color:#7471A5}
/* Practice: large numerals, calm focus, tactile keypad */
.lesson-layout{max-width:895px}.lesson-top{margin:1px 0 24px}.lesson-day-pill{display:inline-flex;align-items:center;gap:7px;color:#7465CF;background:#F0EDFF;border:1px solid #E8E2FF;border-radius:100px;font-size:.76rem;font-weight:850;padding:10px 14px}.quiz-head{margin:0 0 23px;align-items:center}.quiz-eyebrow{display:flex;align-items:center;gap:6px;color:#8776DA;font-size:.67rem;font-weight:920;letter-spacing:.085em}.quiz-head h1{font-size:clamp(1.67rem,3.6vw,2.18rem);letter-spacing:-.052em;margin:10px 0 8px}.quiz-head p{color:#8B90AA;line-height:1.55;font-size:.86rem}.timer{border:1px solid #E8E5FA;border-radius:17px;padding:9px 15px;background:#F9F8FF;gap:11px;color:#5C55C6;box-shadow:0 3px 12px #6F61B810}.timer-symbol{width:41px;height:41px;border-radius:13px;background:#EBE8FF;color:#7668EA}.timer-body{display:flex;flex-direction:column;gap:1px}.timer-body small{font-size:.55rem;letter-spacing:.1em;font-weight:900;color:#9A93D4}.timer-count{font-size:1.1rem;font-variant-numeric:tabular-nums;line-height:1.25;letter-spacing:.02em}.timer-over{color:#E48060}.timer-over .timer-symbol{background:#FFEAE0;color:#E48060}
.instruction-box{display:flex;align-items:center;gap:13px;background:linear-gradient(110deg,#FFF7E6,#FFF9ED);border:1px solid #FBEBCF;border-radius:17px;padding:13px 16px;color:#927955;font-size:.83rem;margin-bottom:19px}.instruction-box strong{display:block;color:#B07C39;margin-bottom:3px;font-size:.78rem}.instruction-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:#FFEAC5;color:#CA9138}.progress-caption{display:flex;justify-content:space-between;gap:10px;color:#9698B2;font-size:.72rem;margin-bottom:8px}.progress-caption strong{color:#6F719A;font-weight:850}.progress-track{height:10px;background:#E9E7F9}.progress-fill{background:linear-gradient(90deg,#796AEE,#86D9C6);box-shadow:0 0 13px rgba(119,106,238,.13)}
.question-card{position:relative;isolation:isolate;padding:29px clamp(20px,5vw,49px) 31px;border-radius:29px;border:1px solid #E8E8F4;background:linear-gradient(160deg,#FFFFFF,#FFF 70%,#FCFAFF);box-shadow:0 16px 60px rgba(66,56,124,.085),0 4px 12px rgba(64,56,124,.02);overflow:hidden}.card-shine{position:absolute;border-radius:50%;z-index:-1;pointer-events:none}.card-shine.one{width:225px;height:225px;top:-170px;left:-140px;background:#F1EDFF}.card-shine.two{width:160px;height:160px;bottom:-132px;right:-70px;background:#EEFFF8}
.question-label-row{gap:13px}.question-number{display:inline-flex;align-items:center;gap:7px;letter-spacing:.1em;font-size:.73rem;font-weight:950;color:#8885B5}.question-number svg{color:#F7AF73}.skill-tag{color:#6B60CC;background:#F0EDFF;border:1px solid #E8E2FF;border-radius:30px;padding:7px 13px;font-weight:820;font-size:.72rem}
.math-wrap{margin:35px 0 29px}.math-kicker{color:#999BB6;font-size:.84rem}.math-expression{font-weight:900;color:#302C5E;font-size:clamp(2.48rem,5.3vw,4.16rem);margin-top:14px;letter-spacing:-.055em;line-height:1.3}.answer-group{max-width:366px}.answer-label{color:#8784BA;letter-spacing:.1em;font-size:.72rem;margin-bottom:11px}
.answer-input{height:73px;background:#FAFAFF;border-radius:19px;border:2px solid #DDDDF3;font-size:2.25rem;color:#4A419B;transition:border-color .15s,box-shadow .15s,background .15s}.answer-input:focus{border-color:#9686F5;box-shadow:0 0 0 5px #EFEBFF;background:#FFF}.answer-input:disabled{opacity:1;color:#8182A8}.answer-input.good{border-color:#7BD2A8;background:#F1FFF7;color:#229B70}.answer-input.bad{border-color:#F6B1B6;background:#FFF8F8;color:#C95872}
.question-actions{gap:11px;margin-top:20px}.question-actions .btn{min-width:164px}.keypad{max-width:366px;margin:22px auto 0;gap:9px}.key{height:57px;background:#F8F8FE;color:#5E5A91;border:1px solid #EBE9F7;border-radius:15px;font-size:1.36rem;box-shadow:0 2px 0 #E4E3F1;touch-action:manipulation;transition:background .12s,transform .12s,border-color .12s}.key:hover{background:#EFEDFF;border-color:#DCD7FD}.key:active{background:#E1DCFF;transform:translateY(2px);box-shadow:none}.key.action{background:#EDEAFF;color:#7664DB}.key.action:hover{background:#E1DBFF}
.feedback,.hint-box{max-width:630px;border-radius:17px;padding:15px 17px}.feedback{margin-top:18px;background:#F7F5FF;color:#6B64AF}.feedback strong{display:flex;align-items:center;gap:8px}.feedback.good{background:#ECFCF3;border:1px solid #CEF1DC;color:#287958}.feedback.bad{background:#FFF0EF;border:1px solid #FFE1DB;color:#B36460}.hint-box{display:flex;align-items:center;gap:10px;background:#FFFAE9;border:1px solid #FFF0BF;color:#9B7B39}.hint-box svg{flex:none;color:#E2A53A}
.lesson-foot{color:#8F94AA;margin-top:18px}.lesson-foot>span{display:flex;align-items:center;gap:6px}.lesson-foot>span svg{color:#EF93AB}.lesson-note{margin-top:12px;text-align:center;font-size:.73rem}
/* Celebratory, illustrated results screen */
.result-shell{max-width:870px;margin:18px auto}.result-card{position:relative;overflow:hidden;border-radius:32px;border:1px solid #E8E5F7;padding:39px clamp(22px,6vw,59px);background:radial-gradient(ellipse at 50% -120px,#EDE9FF 0,transparent 370px),#fff;box-shadow:0 20px 55px rgba(69,60,155,.08)}
.result-card:before,.result-card:after{position:absolute;content:"";width:160px;height:160px;border:2px dashed #DDD6FF;border-radius:45px;transform:rotate(25deg);top:-100px;left:-100px}.result-card:after{top:35px;left:auto;right:-143px;width:210px;height:210px;border-color:#FFDAC6;transform:rotate(-20deg)}.result-emoji{width:105px;height:105px;border-radius:34px;display:grid;place-items:center;margin:0 auto 24px;color:#fff;background:linear-gradient(145deg,#FFCD70,#FF9C5C);box-shadow:0 13px 24px rgba(249,168,90,.22);transform:rotate(-7deg)}.result-decoration{position:absolute;top:84px;color:#F5B4D5}.result-decoration.deco-left{left:16%;transform:rotate(-18deg)}.result-decoration.deco-right{right:15%;color:#9ADECB;transform:rotate(19deg)}.result-overline{color:#8074D3}.result-card h1{font-size:clamp(1.65rem,3.7vw,2.35rem);margin:10px 0 12px;color:#332F66}.result-card>p{font-size:.92rem;color:#8987A7}
.result-stats{gap:13px;margin:30px 0}.result-stat{padding:21px 12px;border-radius:20px;background:#F3F0FF;border:1px solid #EBE5FF}.result-stat:nth-child(2){background:#FFF2E7;border-color:#FFE9D8}.result-stat:nth-child(3){background:#EAF9F7;border-color:#DDF3ED}.result-stat-icon{width:36px;height:36px;margin:0 auto 12px;display:grid;place-items:center;background:#FFFFFFCC;color:#7669DE;border-radius:12px}.result-stat:nth-child(2) .result-stat-icon{color:#E8A061}.result-stat:nth-child(3) .result-stat-icon{color:#2BAF97}.result-stat strong{font-size:1.75rem;color:#383267}.result-stat>span:last-child{color:#8A8BA9;font-weight:730;font-size:.77rem}
.result-actions .btn{min-height:47px}.review{margin-top:33px;text-align:left}.review-title{margin-top:0;align-items:center;margin-bottom:14px}.review-title h3{display:flex;align-items:center;gap:7px;color:#474368}.review-title h3 svg{color:#8A7BE3}.review-row{background:#FAFAFE;border-radius:13px;margin:7px 0;border:1px solid #EBEBF6;padding:13px 14px}.review-row strong{color:#4C4B79}.review-explain{color:#9398B0;font-size:.76rem;margin-top:4px}.review-answers{text-align:right;flex:none}.review-row .wrong{color:#DB6075}.review-row .correct{color:#27A584}.result-hint{max-width:none;text-align:left;margin:26px 0 0}
/* Progress, tips and dialogs inherit same bright, friendly system */
.history-list{gap:12px}.history-row{border-radius:19px;padding:17px 19px;box-shadow:var(--shadow);border-color:#ECEAF6}.history-number{border-radius:15px;color:#685CE6;background:#F0EDFF;font-size:1.05rem}.history-main strong{color:#454061}.history-main p{color:#969AB0}.history-right strong{color:#5D58BA}.history-right small{display:flex;justify-content:flex-end;align-items:center;gap:4px}.info-row{border-radius:19px;border-color:#E9E9F6;box-shadow:var(--shadow);padding:19px 22px}.info-row strong{color:#514D73}.info-row p{color:#9196AC}.empty-history{padding:75px 20px;border-color:#EAEAF7;box-shadow:var(--shadow)}.empty-history .symbol{color:#7569E8;margin-bottom:16px}.empty-history h2{font-size:1.3rem}
.tips-list{gap:15px}.tip-card{border:1px solid #E8E8F5;border-radius:23px;padding:24px;min-height:165px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.tip-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(88,80,150,.08)}.tip-ico{width:51px;height:51px;border-radius:17px;background:#F0EDFF;color:#786AE5;display:grid;place-items:center;margin-bottom:16px}.tip-card:nth-child(2n) .tip-ico{background:#E5F9F3;color:#36AE8D}.tip-card:nth-child(3n) .tip-ico{background:#FFF0DF;color:#E4A05B}.tip-card:nth-child(4n) .tip-ico{background:#FFE8EF;color:#E17598}.tip-card h3{font-size:1.02rem;color:#4B476F}.tip-card p{font-size:.85rem;color:#8D90A9;line-height:1.65;margin-top:9px}
.toast{background:#332D66;border-radius:15px;box-shadow:0 13px 35px rgba(52,45,102,.26);font-weight:710}.confirm-backdrop{background:rgba(39,36,85,.4);backdrop-filter:blur(7px)}.confirm-dialog{border-radius:27px;padding:29px;border:1px solid #F0EBFF;box-shadow:0 25px 80px #22205B35}.confirm-dialog h2{color:#3C356B}.startup{color:#8B87B0}.startup .logo-symbol{color:#7766EE}.startup strong{color:#3D376B}
/* Tablet landscape and portrait */
@media(max-width:1200px){.app-shell{grid-template-columns:221px minmax(0,1fr)}.sidebar{padding:26px 14px 20px}.brand-mark{width:46px;height:46px}.brand-label{font-size:1.16rem}.main{padding-inline:27px}.dashboard-hero{padding:30px 29px}.hero-copy{max-width:64%}.hero-ornament{right:-12px;width:42%}.hero-copy h1{font-size:clamp(1.9rem,3vw,2.65rem)}.day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.day-card{min-height:139px}.stats-grid{gap:11px}.stat-card{gap:9px;padding:18px 12px}.stat-icon{width:43px;height:43px}}
@media(max-width:850px){.app-shell{display:block}.sidebar{min-height:auto;height:auto;display:flex;position:sticky;top:0;z-index:20;flex-direction:row;padding:12px 24px;gap:10px;align-items:center;border-right:0;border-bottom:1px solid #ECEAF7;box-shadow:0 5px 24px #49449B0D}.brand{padding:0}.brand-mark{width:43px;height:43px}.brand-label{font-size:1.14rem}.brand-sub{font-size:.56rem;margin-top:3px;display:block}.sidebar-section-label{display:none}.side-nav{flex-direction:row;margin-left:auto;gap:6px}.nav-item{width:auto;min-height:45px;padding:10px 12px;font-size:.76rem;gap:7px}.nav-icon{width:19px;height:19px}.nav-icon svg{width:19px;height:19px}.active-pill{display:none}.side-callout,.side-bottom{display:none}.main{padding:25px 25px 50px}.dashboard-hero{min-height:272px}.hero-copy{max-width:64%}.hero-ornament{width:42%;transform:none}.day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat-card{padding:16px 13px}.stat-icon{width:43px;height:43px}.stat-value{font-size:1.58rem}}
@media(max-width:680px){.dashboard-hero{min-height:290px;padding:25px 22px}.hero-copy{max-width:76%}.hero-copy h1{font-size:2rem}.hero-ornament{width:44%;right:-40px;top:-13px;opacity:.86}.hero-copy p{max-width:95%}.hero-time{display:none}.stats-grid{gap:8px}.stat-card{padding:13px 9px;display:block;text-align:center;min-height:109px}.stat-icon{margin:0 auto 9px;width:38px;height:38px;border-radius:13px}.stat-value{font-size:1.35rem}.stat-label{font-size:.7rem}.stat-unit{font-size:.61rem}.day-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.day-card{min-height:134px}}
@media(max-width:520px){.sidebar{padding:10px 12px;gap:4px}.brand-mark{width:38px;height:38px}.brand-label{font-size:.98rem}.brand-sub{font-size:.48rem;letter-spacing:.075em}.side-nav{gap:1px}.nav-item{padding:10px 9px;min-height:40px}.nav-name{display:none}.nav-icon,.nav-icon svg{width:21px;height:21px}.main{padding:17px 14px 42px}.topbar{margin-bottom:17px}.topbar .eyebrow{font-size:.67rem;letter-spacing:.04em}.class-pill{font-size:.68rem;padding:7px 10px}.avatar{width:35px;height:35px}.dashboard-hero{min-height:322px;padding:26px 21px;border-radius:25px;align-items:flex-start}.hero-copy{max-width:100%;width:100%}.hero-copy .hero-label{font-size:.6rem;letter-spacing:.065em;padding:6px 9px}.hero-copy h1{position:relative;max-width:280px;z-index:2;margin:17px 0 8px;font-size:clamp(1.64rem,6vw,2rem);line-height:1.18}.hero-copy p{max-width:275px;font-size:.79rem;line-height:1.5;position:relative;z-index:2}.hero-cta{margin-top:18px}.hero-cta .btn{font-size:.81rem;min-height:48px;padding:11px 12px}.hero-cta .btn .svg-icon{width:15px}.hero-ornament{width:205px;max-height:175px;right:-41px;bottom:-21px;top:auto;opacity:.79;transform:none}.hero-svg{width:100%;max-height:175px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0 28px}.stat-card{min-height:122px;border-radius:17px;padding:14px 6px}.stat-icon{width:37px;height:37px}.stat-icon svg{width:20px;height:20px}.stat-label{font-size:.65rem;line-height:1.24;min-height:20px}.stat-value{font-size:1.29rem}.stat-unit{display:block;font-size:.59rem;margin:2px 0 0}.section-head{margin:25px 0 17px}.section-head h2{font-size:1.3rem}.section-head p{font-size:.76rem}.section-overline{font-size:.59rem}.roadmap-progress{width:85px}.roadmap-progress>span{font-size:.67rem}.weeks{gap:14px}.week-panel{border-radius:21px;padding:17px 14px}.week-heading{gap:10px}.week-icon{width:43px;height:43px;border-radius:14px}.week-heading h3{font-size:1rem}.week-heading p{font-size:.71rem;line-height:1.3}.week-counter{display:none}.day-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.day-card{border-radius:15px;padding:13px 12px;min-height:128px}.day-name{font-size:.84rem;min-height:37px}.day-meta{font-size:.65rem}.day-current-label{font-size:.51rem;padding:4px 6px}.lesson-top{margin-bottom:16px}.lesson-day-pill{font-size:.68rem;padding:7px 9px}.quiz-head{grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-bottom:16px}.quiz-head h1{font-size:1.42rem;margin:7px 0}.quiz-head p{font-size:.75rem}.quiz-eyebrow{font-size:.56rem}.timer{padding:7px 9px;gap:5px;border-radius:13px}.timer-symbol{width:32px;height:32px;border-radius:10px}.timer-symbol svg{width:19px}.timer-body small{font-size:.48rem}.timer-count{font-size:.93rem}.instruction-box{padding:10px 12px;font-size:.76rem;gap:9px}.instruction-icon{width:34px;height:34px}.question-card{padding:21px 17px 26px;border-radius:23px}.question-number{font-size:.64rem}.skill-tag{font-size:.62rem;padding:6px 9px}.math-wrap{margin:32px 0 25px}.math-expression{font-size:clamp(2.24rem,9.3vw,3.25rem)}.math-kicker{font-size:.74rem}.answer-input{height:66px;font-size:2rem}.question-actions .btn{min-width:0}.keypad{margin-top:18px;gap:8px}.key{height:53px}.lesson-foot{font-size:.7rem}.lesson-note{font-size:.68rem}.result-card{padding:31px 15px;border-radius:26px}.result-emoji{width:87px;height:87px;border-radius:26px;margin-bottom:19px}.result-card h1{font-size:1.58rem}.result-stats{gap:7px;margin:23px 0}.result-stat{padding:15px 6px;border-radius:13px}.result-stat strong{font-size:1.24rem}.result-stat-icon{width:30px;height:30px;margin-bottom:8px}.result-stat>span:last-child{font-size:.67rem}.result-actions{gap:7px}.result-actions .btn{font-size:.76rem;padding:10px}.tips-list{grid-template-columns:1fr}.history-row{gap:9px;padding:12px}.history-number{width:38px;height:38px}.history-main strong{font-size:.79rem}.history-main p{font-size:.67rem}.history-right strong{font-size:.8rem}.info-row{padding:15px 12px}.info-row .btn{font-size:.77rem;padding:10px}.footer-note{font-size:.7rem}}
@media(hover:none){.day-card:hover{transform:none;box-shadow:none}.btn:hover:not(:disabled){transform:none}.tip-card:hover{transform:none}.nav-item:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-svg{animation:none}}