@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap');

:root{--navy:#1d2e4b;--navy2:#263b5e;--ink:#223455;--muted:#61718b;--blue:#1769e9;--blue2:#3192ff;--pale:#eaf5ff;--line:#cfe3ff;--bg:#f5f9ff;--green:#16a794;--gold:#ffb324;--shadow:0 14px 38px rgba(37,72,129,.09);font-family:'DM Sans','Noto Sans Myanmar','Myanmar Text',sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ffba38;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.55}p,h1,h2,h3,h4{margin-top:0}small,[lang=my]{line-height:1.7}a{color:var(--blue)}
.app-shell{height:100vh;min-height:690px;display:flex;flex-direction:column;overflow:hidden;background:#fff}.topbar{height:86px;flex:none;background:linear-gradient(100deg,#1c2d4b,#253755);color:#fff;display:flex;align-items:center;gap:28px;padding:0 26px 0 30px;box-shadow:0 4px 18px rgba(9,28,61,.12);z-index:4}.brand{display:flex;align-items:center;gap:13px;min-width:218px;color:#fff;background:none;border:0;padding:0;text-align:left}.brand-name{display:flex;flex-direction:column;line-height:1.06;letter-spacing:.01em}.brand-name strong{font-size:29px;font-weight:800}.brand-name small{font-size:15px;font-weight:700;letter-spacing:.025em;margin-top:5px}.brand-mark{width:48px;height:52px;display:block;position:relative;flex:none}.brand-mark i{position:absolute;width:24px;height:42px;border-radius:95% 0 80% 15%;transform-origin:bottom center;bottom:2px;left:16px}.brand-mark i:nth-child(1){background:#ffe477;transform:rotate(-42deg);left:6px}.brand-mark i:nth-child(2){background:#ff923f;transform:rotate(0deg);bottom:8px}.brand-mark i:nth-child(3){background:#25b86a;transform:rotate(42deg);left:23px}.brand-divider{width:1px;height:44px;background:#9bb4d4;opacity:.7}.tagline{display:flex;flex-direction:column;gap:2px;white-space:nowrap;font-size:15px;font-weight:700}.tagline b{padding:0 13px;font-size:12px}.tagline small{font-size:12px;font-weight:500}.header-actions{display:flex;gap:20px;align-items:center;margin-left:auto}.language-switch{display:flex;gap:7px}.language-switch button{min-width:72px;height:47px;background:#2a4268;border:1px solid #4f6e99;color:#d4e3f8;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.language-switch button strong{font-size:15px}.language-switch button small{font-size:10px;margin-top:3px}.language-switch button.active{color:#fff;background:linear-gradient(135deg,#338ff7,#0b67db);border-color:#438fff;box-shadow:0 5px 16px rgba(12,103,221,.28)}.profile-button{height:36px;width:36px;flex:none;border:0;border-radius:50%;background:#e4efff;color:#59769e;font-weight:800}
.content-grid{display:grid;grid-template-columns:222px minmax(450px,1fr) 310px;flex:1;min-height:0}.sidebar{border-right:1px solid var(--line);padding:20px 12px 16px;overflow:auto;display:flex;flex-direction:column;background:#fff}.sidebar nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:13px;width:100%;min-height:55px;border:0;border-radius:14px;background:transparent;color:#273b5f;text-align:left;padding:7px 12px}.nav-item:hover{background:#f2f8ff}.nav-item.active{background:linear-gradient(100deg,#deefff,#e8f4ff);color:#0d56c4}.nav-icon{width:25px;display:grid;place-items:center;flex:none}.nav-label{display:flex;flex-direction:column;line-height:1.2;font-weight:700;font-size:13px}.nav-label small{font-weight:500;font-size:11px;margin-top:2px}.sidebar-note{margin-top:auto;border-radius:15px;background:#f6faff;border:1px solid #deebfb;padding:15px 14px;color:#344969;display:flex;flex-direction:column;gap:2px;font-size:12px}.sidebar-note strong{font-size:12px}.sidebar-note span:last-child{font-size:11px}.note-spark{font-size:22px;color:#e9a725}
main{min-width:0;overflow:auto;background:#f6faff;scrollbar-color:#c2d7f3 transparent}.right-panel{border-left:1px solid var(--line);background:#fff;padding:15px 13px;overflow:auto}.statusbar{height:68px;flex:none;background:linear-gradient(100deg,#20324f,#1b2c49);color:white;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 240px;align-items:center;padding:0 30px;gap:18px;z-index:2}.stat{display:flex;align-items:center;gap:12px;border-right:1px solid #6e88ab;min-width:0}.stat:last-of-type{border-right:0}.stat-emoji{font-size:30px;line-height:1}.stat strong{display:block;font-size:14px}.stat small{font-size:11px;color:#d1e2f6}.footer-motto{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700}.motto-icon{width:72px;height:45px;border-radius:20px;background:#164d73;display:grid;place-items:center;font-size:29px;color:#ffd86d}
.ai-config-button{display:flex;align-items:center;gap:7px;background:#243d63;border:1px solid #4a6a96;color:#e1edfc;border-radius:12px;padding:7px 12px;font-size:12px;font-weight:700;line-height:1}
.ai-config-button:hover{background:#305183;border-color:#658cbf;color:#fff}
.ai-dot{width:9px;height:9px;border-radius:50%;background:#e09520;box-shadow:0 0 6px #e0952099;flex:none}
.ai-dot.active{background:#23be76;box-shadow:0 0 8px #23be76cc}
.hero-img,.dashboard-hero-bg,.roadmap-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0;pointer-events:none;aspect-ratio:1586/992}
.hero{height:295px;position:relative;background:#bfd8f9;overflow:hidden}.hero::after{content:"";position:absolute;inset:auto 0 0;height:60px;background:linear-gradient(transparent,rgba(11,35,68,.13));pointer-events:none;z-index:1}.hero-bubble{position:absolute;right:22px;top:24px;width:min(44%,285px);padding:17px 19px;background:rgba(255,255,255,.96);border-radius:20px;box-shadow:0 12px 34px rgba(24,62,111,.18);z-index:2}.hero-bubble:before{content:"";position:absolute;left:-14px;bottom:26px;border-width:10px 16px 10px 0;border-style:solid;border-color:transparent #fff transparent transparent}.hero-bubble strong{display:block;color:#06449f;font-size:20px}.hero-bubble p{font-size:14px;line-height:1.52;margin:8px 0}.hero-bubble small{font-size:12px;color:#2b4b79}.hero-badge{position:absolute;left:20px;bottom:17px;z-index:2;color:#fff;background:rgba(18,45,78,.72);backdrop-filter:blur(6px);border:1px solid #ffffff55;border-radius:30px;font-size:11px;font-weight:700;padding:7px 12px}
.practice-wrap{padding:16px 17px 26px;max-width:900px;margin:auto}.lesson-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.eyebrow{display:block;color:#2377df;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:800}.lesson-topline h1{font-size:21px;line-height:1.23;margin:3px 0 2px;color:#143b76}.lesson-topline p{font-size:12px;color:var(--muted);margin:0}.small-outline,.outline-button,.light-button{border:1px solid #b9d8ff;color:#2356a2;background:#fff;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}.small-outline:hover,.outline-button:hover,.light-button:hover{background:#e9f4ff}.lesson-card,.info-card,.view-card{background:#fff;border:1px solid #d0e4ff;border-radius:17px;box-shadow:0 7px 25px rgba(34,87,163,.04)}.lesson-card{overflow:hidden}.lesson-card-inner{padding:19px 20px 12px}.step-title{display:flex;align-items:center;gap:12px;margin-bottom:12px}.step-icon{width:43px;height:43px;flex:none;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#1c7cf2,#1451d1);color:#fff;box-shadow:0 5px 12px #2478e433}.step-icon.shadow{background:linear-gradient(135deg,#12baba,#119487)}.step-icon.answer{background:linear-gradient(135deg,#cb56e6,#9e35bb)}.step-icon.think{background:linear-gradient(135deg,#ffb436,#ef9322)}.step-icon.retry{background:linear-gradient(135deg,#23bca9,#0f9388)}.step-icon.improve{background:linear-gradient(135deg,#ff9557,#ef6436)}.step-icon.use{background:linear-gradient(135deg,#ff605c,#e4383d)}.step-title h2{font-size:17px;color:#0649aa;margin:0;line-height:1.2}.step-title h2 span{font-size:13px;font-weight:600}.step-title small{display:block;font-size:11px;color:#315985}.step-description{font-size:12px;line-height:1.65;margin:8px 0 14px;color:#384966}.step-description [lang=my]{display:block;color:#526e98}.sentence-box{background:linear-gradient(125deg,#f7fbff,#fff);border:1px solid #bfdcff;border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:center;gap:15px;min-height:91px;max-width:510px;margin:0 auto 14px;text-align:center}.sentence-box .play-round{width:56px;height:56px;flex:none;border:0;border-radius:50%;color:white;background:linear-gradient(135deg,#3b9cff,#156be4);display:grid;place-items:center;box-shadow:0 7px 16px #257ded33}.sentence-text{font-size:20px;font-weight:800;line-height:1.35;color:#23385b}.sentence-text small{display:block;font-size:12px;color:#6780a0;font-weight:500;margin-top:5px}.sentence-box.concealed .sentence-text{filter:blur(7px);user-select:none}.sentence-box.concealed .sentence-text small{filter:none}.center-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0}.primary-button{border:0;border-radius:999px;background:linear-gradient(110deg,#2b80f1,#1068e4);color:white;font-size:12px;font-weight:800;padding:11px 19px;box-shadow:0 5px 12px #1769e333;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary-button:hover{filter:brightness(1.05)}.primary-button:active{transform:translateY(1px)}.primary-button.wide{min-width:195px}.lesson-card-bottom{border-top:1px solid #e7f0ff;background:#f9fcff;min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:10px}.mic-button{border:0;display:flex;align-items:center;gap:8px;background:none;color:#0e57b6;font-weight:800;font-size:12px}.mic-circle{height:41px;width:41px;border-radius:50%;background:linear-gradient(140deg,#8178fa,#564ad8);color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px #6760df36}.mic-button.recording .mic-circle{background:#e93957;animation:pulse 1.1s infinite}.mic-button:disabled .mic-circle{background:#adb9ce}.bottom-note{font-size:11px;color:#67809e;text-align:center}
@keyframes pulse{50%{box-shadow:0 0 0 10px #e9395730}}
.form-label{display:block;font-weight:800;font-size:12px;margin:11px 0 6px;color:#243c63}.practice-textarea{width:100%;min-height:86px;resize:vertical;border-radius:13px;border:1px solid #c9def9;background:#fbfdff;color:#213558;padding:12px 13px;font-size:13px;line-height:1.5}.practice-textarea::placeholder{color:#8ba1b8}.helper-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 12px;flex-wrap:wrap}.helper-row small{color:#69809c;font-size:11px}.feedback-box{padding:12px 14px;border-radius:13px;background:#edf8f6;border:1px solid #b9e6db;margin:12px 0;color:#235454;font-size:12px;line-height:1.5}.feedback-box.blue{background:#eff6ff;border-color:#c8e0ff;color:#274a77}.feedback-box.gold{background:#fff7e8;border-color:#f9dfa7;color:#755117}.feedback-box strong{display:block;font-size:13px;margin-bottom:4px}.score-row{display:flex;align-items:center;gap:10px}.score-pill{font-size:18px;font-weight:800;color:#087e74}.word-matches{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}.word-matches span{padding:3px 6px;background:#d6f5e6;border-radius:6px}.word-matches .miss{background:#ffe4dc;color:#9b3e2c}.scenario{border:1px solid #cfe4ff;background:#f4f9ff;border-radius:14px;padding:13px 15px;line-height:1.45;font-size:13px;margin:11px 0}.scenario strong{display:block;color:#1559b3;margin-bottom:3px}.style-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.style-choice{border:1px solid #cee1fa;border-radius:12px;background:#fff;padding:11px;text-align:left;color:#274161;font-size:12px;min-height:76px}.style-choice.selected{border-color:#1675e8;background:#eaf5ff;box-shadow:0 0 0 2px #bdddff}.style-choice strong{display:block;color:#0d58b3;margin-bottom:4px}.style-choice small{font-size:11px;color:#667b95}.variants-list{display:grid;gap:8px;margin:12px 0}.variant-card{border:1px solid #d6e5f9;background:#fff;border-radius:12px;padding:9px 12px;text-align:left}.variant-card strong{display:block;color:#2876d3;font-size:11px}.variant-card p{font-size:13px;margin:3px 0;color:#243855;font-weight:700}.variant-card small{font-size:11px;color:#657b99}.variant-card.active{border-color:#1773e8;background:#eff7ff}.mini-action{border:0;background:none;color:#1263cd;font-weight:800;font-size:11px;padding:6px}.mini-action:hover{text-decoration:underline}.completion{display:flex;gap:11px;align-items:center;background:linear-gradient(115deg,#eafff2,#f4fffa);border:1px solid #bde7c9;border-radius:14px;padding:12px;margin:12px 0}.completion .big-check{width:39px;height:39px;display:grid;place-items:center;background:#26ad72;color:#fff;border-radius:50%;font-size:21px}.completion strong{display:block;color:#19724b}.completion small{color:#427c5d;font-size:11px}
.right-card{background:#fff;border:1px solid #cde1ff;border-radius:16px;padding:14px 13px;margin-bottom:12px}.right-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}.right-head-icon{font-size:23px;line-height:1}.right-head strong{font-size:13px;color:#1c3e70}.right-head small{display:block;font-size:10px;color:#5b769a}.topic-box{background:#eaf4ff;border-radius:13px;padding:10px 12px;font-size:12px;color:#294364;margin-bottom:12px}.topic-box strong{display:block;font-size:13px;color:#173862}.topic-box small{font-size:10px}.step-progress-title{font-size:12px;font-weight:700;margin-bottom:6px}.step-progress{height:8px;background:repeating-linear-gradient(to right,#dbe5f4 0,#dbe5f4 calc(14.285% - 2px),#fff calc(14.285% - 2px),#fff 14.285%);border-radius:99px;overflow:hidden;margin-bottom:10px}.step-progress span{height:100%;display:block;background:linear-gradient(90deg,#0d62dc,#3d9dff);border-radius:99px;transition:width .25s}.step-list{display:grid;gap:2px}.step-item{width:100%;border:0;background:transparent;border-radius:11px;display:flex;align-items:center;gap:9px;text-align:left;min-height:40px;padding:4px 7px;color:#2a405e}.step-item:hover{background:#f1f7ff}.step-item.active{background:#e8f3ff}.step-item.done .step-item-icon{background:#23aa85}.step-item-icon{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:#318efa}.step-item:nth-child(2) .step-item-icon{background:#12aaa7}.step-item:nth-child(3) .step-item-icon{background:#ac48c7}.step-item:nth-child(4) .step-item-icon{background:#f9ad20}.step-item:nth-child(5) .step-item-icon{background:#18ae98}.step-item:nth-child(6) .step-item-icon{background:#fa7b40}.step-item:nth-child(7) .step-item-icon{background:#ee4e4e}.step-item-text{font-size:11px;line-height:1.15}.step-item-text strong{font-size:12px}.step-item-text small{display:block;color:#657c9b;font-size:10px}.right-card.expression-card{padding-bottom:6px}.expression-row{border-top:1px solid #edf3fb;padding:7px 1px}.expression-row strong{font-size:11px;color:#2156a3}.expression-row p{font-size:11px;line-height:1.4;margin:2px 0}.expression-row small{font-size:10px;color:#6b819b}.keep-going{background:#edf9f0;border:1px solid #bce7c9;border-radius:15px;padding:10px 13px;display:flex;gap:11px;align-items:center}.keep-going>span{font-size:25px}.keep-going strong{font-size:12px;color:#315b49}.keep-going small{display:block;font-size:10px;color:#4c866b}
.page-padding{padding:24px;max-width:950px;margin:0 auto}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}.page-heading h1{font-size:26px;color:#173e78;margin:4px 0}.page-heading p{font-size:13px;color:#6b7d96;margin:0}.dashboard-hero{position:relative;overflow:hidden;border-radius:22px;min-height:275px;background:#13335e;color:white;display:flex;align-items:center;padding:28px;margin-bottom:17px;box-shadow:var(--shadow)}.dashboard-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,48,93,.86) 0%,rgba(16,71,134,.45) 55%,rgba(16,71,134,.12) 100%);z-index:1;pointer-events:none}.dashboard-hero-inner{position:relative;z-index:2;max-width:50%}
.api-key-dialog{width:min(560px,100%);background:#fff;border-radius:22px;box-shadow:0 20px 90px #0617336b;display:flex;flex-direction:column;overflow:hidden;padding:24px}
.api-key-dialog h2{font-size:20px;color:#173e78;margin:0 0 6px}
.api-key-dialog p{font-size:12px;color:#556d8d;line-height:1.55;margin:0 0 14px}
.api-key-input-wrap{position:relative;display:flex;align-items:center;margin:8px 0 12px}
.api-key-input-wrap input{width:100%;padding:11px 44px 11px 13px;border:1px solid #b7d3f7;border-radius:11px;font-size:13px;font-family:monospace;background:#f8fbff;color:#183761}
.api-key-toggle-btn{position:absolute;right:8px;background:none;border:0;color:#6481a5;padding:6px;display:grid;place-items:center;cursor:pointer}
.api-key-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.api-key-status-banner{border-radius:11px;padding:10px 14px;font-size:12px;line-height:1.45;margin:10px 0;display:flex;align-items:center;gap:9px}
.api-key-status-banner.success{background:#eefbf4;border:1px solid #b2e8ca;color:#1a754b}
.api-key-status-banner.info{background:#eef6ff;border:1px solid #c7e0fe;color:#1e5292}
.api-key-status-banner.error{background:#fff3f3;border:1px solid #f6c0c0;color:#a72828}
.api-key-dialog select{width:100%;border:1px solid #b7d3f7;background:#f8fbff;border-radius:11px;padding:9px 12px;font-size:12px;color:#183761;margin-bottom:12px}
.api-link{color:#1569e5;text-decoration:none;font-weight:700}
.api-link:hover{text-decoration:underline}.dashboard-hero h2{font-size:27px;line-height:1.2;margin:7px 0}.dashboard-hero p{font-size:13px;line-height:1.6;margin-bottom:17px}.dashboard-hero .eyebrow{color:#8dd0ff}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:17px}.summary-card{background:#fff;border:1px solid #d7e7fb;border-radius:16px;padding:15px}.summary-card span{font-size:23px}.summary-card strong{display:block;font-size:21px;color:#184a90;margin:5px 0 1px}.summary-card small{font-size:11px;color:#647c99}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:15px 0 10px}.section-heading h2{font-size:16px;margin:0}.lesson-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.lesson-tile{border:1px solid #d3e4fa;background:#fff;border-radius:13px;text-align:left;padding:12px;display:flex;align-items:center;gap:10px;color:#203957}.lesson-tile:hover{border-color:#79b1f7;transform:translateY(-1px)}.tile-number{width:34px;height:34px;flex:none;border-radius:10px;background:#e8f3ff;color:#1564c8;font-weight:800;display:grid;place-items:center}.lesson-tile strong{font-size:12px;display:block}.lesson-tile small{font-size:10px;color:#768ba5}.view-card{padding:17px 19px;margin-bottom:13px}.view-card h2{font-size:17px;color:#204b87}.inline-controls{display:flex;gap:7px;flex-wrap:wrap}.pill-tab{border:1px solid #cbdff8;color:#3c5d88;background:#fff;padding:7px 11px;border-radius:100px;font-size:11px;font-weight:800}.pill-tab.active{background:#166be1;color:#fff;border-color:#166be1}.reading-phrase{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid #e6effb;padding:11px 0}.reading-phrase:last-child{border-bottom:0}.reading-phrase h3{font-size:13px;color:#1d528f;margin:0}.reading-phrase p{font-size:16px;font-weight:700;margin:4px 0}.reading-phrase small{color:#5e7796;font-size:11px}.progress-bar{height:11px;background:#e2eefa;border-radius:99px;overflow:hidden}.progress-bar span{height:100%;background:linear-gradient(90deg,#2c7beb,#47b5f3);display:block}.progress-list{display:grid;gap:7px}.progress-row{padding:10px 12px;border-radius:10px;background:#f6faff;display:flex;justify-content:space-between;align-items:center;font-size:12px}.progress-row span{color:#15a06d;font-weight:800}.setting-row{display:flex;justify-content:space-between;gap:14px;align-items:center;border-bottom:1px solid #e4eefb;padding:13px 0}.setting-row:last-child{border-bottom:0}.setting-row strong{display:block;font-size:13px}.setting-row small{color:#7186a1;font-size:11px}.setting-row select{border:1px solid #bdd9fb;background:#fff;border-radius:10px;padding:8px}.danger-button{border:1px solid #efb8bd;color:#a43741;background:#fff7f7;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:700}.source-note{font-size:11px;color:#6b7f9b;line-height:1.5}
.dialog-backdrop{position:fixed;inset:0;background:#11243fb8;z-index:10;display:grid;place-items:center;padding:20px}.dialog-backdrop[hidden]{display:none}.lesson-dialog{width:min(800px,100%);max-height:min(730px,92vh);background:#fff;border-radius:22px;box-shadow:0 20px 90px #0617336b;display:flex;flex-direction:column;overflow:hidden}.dialog-header{padding:18px 20px 9px;display:flex;justify-content:space-between;gap:10px}.dialog-header h2{font-size:20px;color:#1b467f;margin:3px 0}.icon-button{width:34px;height:34px;border:1px solid #d5e3f4;border-radius:50%;background:#fff;color:#50719c;font-size:25px;line-height:1}.dialog-tools{padding:7px 20px 15px;display:flex;gap:10px}.search-box{flex:1;border:1px solid #cbdff6;border-radius:11px;display:flex;align-items:center;gap:6px;padding:0 11px;color:#6e87a8}.search-box input{border:0;outline:0;height:39px;width:100%;font-size:12px}.dialog-tools select{max-width:220px;border:1px solid #cbdff6;border-radius:11px;padding:0 10px;font-size:11px;color:#385270;background:#fff}.lesson-list{overflow:auto;padding:0 20px 10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}.lesson-list-item{border:1px solid #d6e6f8;background:#fff;border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center;text-align:left}.lesson-list-item:hover,.lesson-list-item.current{background:#eef7ff;border-color:#81b8f8}.lesson-list-item strong{font-size:12px;color:#244163;display:block}.lesson-list-item small{font-size:10px;color:#7086a2}.lesson-list-item em{font-size:9px;color:#ac6517;background:#fff1d7;padding:2px 5px;border-radius:6px;font-style:normal;margin-left:5px}.dialog-footnote{padding:10px 20px 15px;font-size:10px;color:#7185a1;border-top:1px solid #e6eef8}.toast{position:fixed;left:50%;bottom:83px;transform:translate(-50%,15px);background:#1d365b;color:#fff;border-radius:99px;padding:10px 18px;font-size:12px;box-shadow:0 10px 24px #18395c44;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:min(500px,90vw);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1170px){.content-grid{grid-template-columns:190px minmax(420px,1fr) 285px}.topbar{gap:18px}.brand{min-width:190px}.brand-name strong{font-size:25px}.tagline{font-size:13px}.tagline small{font-size:10px}.hero-bubble{width:48%}.sidebar{padding-inline:9px}}
@media(max-width:980px){.content-grid{grid-template-columns:175px minmax(0,1fr)}.right-panel{display:none}.tagline{display:none}.brand-divider{display:none}.statusbar{grid-template-columns:repeat(3,1fr)}.footer-motto{display:none}.hero{height:275px}}
@media(max-width:700px){.app-shell{height:auto;min-height:100vh;overflow:visible}.topbar{height:auto;min-height:71px;padding:10px 13px;gap:8px;flex-wrap:wrap}.brand{min-width:0}.brand-mark{transform:scale(.75);margin:-5px;width:40px}.brand-name strong{font-size:21px}.brand-name small{font-size:10px}.header-actions{gap:7px}.language-switch button{min-width:47px;height:39px;border-radius:10px}.language-switch button strong{font-size:11px}.language-switch button small{font-size:8px}.profile-button{display:none}.content-grid{display:flex;flex-direction:column}.sidebar{padding:5px 8px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;display:block}.sidebar nav{display:flex;width:max-content;gap:3px}.nav-item{width:auto;min-height:43px;padding:6px 10px;gap:5px}.nav-icon{width:18px}.nav-icon svg{width:16px;height:16px}.nav-label{font-size:10px}.nav-label small,.sidebar-note{display:none}main{overflow:visible}.hero{height:245px;background-position:41% center}.hero-bubble{right:10px;top:13px;width:48%;padding:11px 12px;border-radius:14px}.hero-bubble strong{font-size:14px}.hero-bubble p{font-size:10px;margin:4px 0}.hero-bubble small{font-size:9px}.hero-badge{font-size:9px;left:10px;bottom:10px}.practice-wrap{padding:14px 12px 24px}.lesson-topline h1{font-size:18px}.lesson-card-inner{padding:15px}.sentence-text{font-size:17px}.statusbar{height:auto;padding:10px 13px;gap:6px;grid-template-columns:repeat(3,1fr)}.stat{gap:5px}.stat-emoji{font-size:21px}.stat strong{font-size:10px}.stat small{font-size:8px}.page-padding{padding:16px 12px}.dashboard-hero{min-height:225px;padding:19px;background-position:38% center}.dashboard-hero-inner{max-width:65%}.dashboard-hero h2{font-size:21px}.dashboard-hero p{font-size:11px}.lesson-tiles{grid-template-columns:1fr}.dialog-tools{flex-direction:column}.dialog-tools select{max-width:none;height:38px}.lesson-list{grid-template-columns:1fr}.style-choices{grid-template-columns:1fr}.style-choice{min-height:0}.toast{bottom:20px}}
@media(max-width:420px){.language-switch{gap:3px}.language-switch button{min-width:41px}.hero{height:206px}.hero-bubble{width:52%}.hero-bubble p{display:none}.dashboard-hero-inner{max-width:75%}.dashboard-hero h2{font-size:19px}.summary-grid{gap:5px}.summary-card{padding:10px}.summary-card strong{font-size:17px}.lesson-card-bottom{padding:9px 12px}.small-outline{padding:7px 10px}}