@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--ink:#142342;--muted:#76839d;--p:#6655e9;--pale:#efecff;--line:#e9ecf4;--navy:#121c36;--bg:#f7f8fc;--white:#fff;--green:#20896d;--orange:#ff9b56}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.app-shell{display:flex;min-height:100vh}.sidebar{width:258px;background:var(--navy);color:white;min-height:100vh;position:sticky;top:0;height:100vh;padding:30px 19px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;align-items:center;gap:11px;padding:5px 9px 46px}.brand-icon{background:linear-gradient(135deg,#7666ff,#b48bff);height:40px;width:40px;display:grid;place-items:center;border-radius:14px;font:800 16px Outfit}.brand strong{font:700 19px Outfit;letter-spacing:-.7px;display:block}.brand span{font-size:9px;letter-spacing:2px;color:#a4b1d1}.side-label{font-size:10px;font-weight:700;letter-spacing:2px;color:#7889b2;margin:0 17px 12px}.nav{width:100%;background:transparent;color:#aebbd8;border:0;border-radius:12px;display:flex;align-items:center;gap:16px;text-align:left;padding:14px 18px;font-weight:600;margin-bottom:7px}.nav span{font-size:21px;width:21px;text-align:center}.nav:hover{background:#24304d;color:white}.nav.active{background:#39365e;color:white}.side-footer{margin-top:auto;border-radius:17px;background:#25314d;padding:18px}.side-footer strong{font-size:14px}.side-footer p{color:#b3bed9;font-size:12px;line-height:1.6;margin-bottom:0}.small-orb{width:31px;height:31px;border-radius:50%;background:#504bc4;display:grid;place-items:center;margin-bottom:12px}.main-wrap{width:100%;min-width:0}.topbar{height:79px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:flex-end;padding:0 clamp(22px,5vw,70px)}.top-brand{display:none;font:700 20px Outfit}.top-brand b{color:var(--p)}.top-right{display:flex;align-items:center;gap:17px}.connection{color:var(--muted);font-size:12px}.icon-button,.close-button{border:1px solid var(--line);background:white;border-radius:13px;height:40px;width:40px;font-size:22px;color:#7c85a4}main{max-width:1190px;padding:37px clamp(22px,5vw,70px) 80px;margin:auto}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.2px;color:var(--p);text-transform:uppercase}.page-title{font:800 clamp(27px,3vw,38px)/1.15 Outfit;letter-spacing:-1.1px;margin:11px 0}.subtitle{color:var(--muted);line-height:1.7;margin:0 0 29px}.hero{border-radius:24px;background:linear-gradient(115deg,#272b65,#6861dc);min-height:255px;color:#fff;display:flex;justify-content:space-between;gap:20px;overflow:hidden;padding:33px 35px;margin-bottom:27px;position:relative}.hero::after{content:'✳';position:absolute;right:50px;top:10px;font-size:260px;opacity:.09;transform:rotate(-13deg)}.hero h1{font:800 clamp(31px,4vw,46px)/1.05 Outfit;max-width:560px;letter-spacing:-1.5px;margin:18px 0}.hero p{color:#d9dbff;max-width:480px;font-size:14px}.hero .mascot{font:800 120px Outfit;z-index:1;align-self:center;transform:rotate(-12deg);text-shadow:7px 12px 0 #5145ba}.hero-tag{display:inline-block;border:1px solid #bbb4fc;border-radius:40px;padding:6px 11px;font-size:11px;font-weight:700;color:#e4e0ff}.primary,.secondary,.ghost{border-radius:12px;padding:12px 19px;border:0;font-weight:800;transition:transform .15s}.primary:hover,.secondary:hover,.ghost:hover{transform:translateY(-1px)}.primary{background:var(--p);color:white}.primary.light{background:white;color:#5045c9}.secondary{background:#ece9ff;color:#584dd4}.ghost{border:1px solid var(--line);background:white;color:var(--ink)}.full{width:100%}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.between{justify-content:space-between}.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(3,1fr);margin:0 0 36px}.card{background:#fff;border:1px solid var(--line);border-radius:19px;padding:23px;min-width:0}.stat-value{font:800 30px Outfit;margin-top:7px}.stat-label{font-size:12px;color:var(--muted);margin-top:5px}.stat-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--pale);color:var(--p);font-size:22px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:22px 0 16px}.section-head h2{font:700 22px Outfit;margin:0}.section-head button{background:none;border:0;color:var(--p);font-weight:700}.practice-grid{grid-template-columns:repeat(3,1fr)}.practice-card{border:1px solid var(--line);background:#fff;padding:20px;border-radius:19px;text-align:left;min-height:174px}.practice-card:hover,.lesson-card:hover{border-color:#b9b4ff;box-shadow:0 8px 30px #615be914}.practice-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;font-size:24px;margin-bottom:15px}.purple{background:#efecff;color:#7164e7}.peach{background:#fff1e7;color:#ea884b}.mint{background:#e4f7f0;color:#259977}.practice-card strong{display:block;font:700 17px Outfit;margin-bottom:7px}.practice-card small{font-size:12px;color:var(--muted);line-height:1.6}.split{display:grid;grid-template-columns:1.3fr .7fr;gap:19px}.topic-picker{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:23px}.chip{border:1px solid var(--line);border-radius:40px;background:white;padding:9px 15px;color:#596785;font-weight:700;font-size:12px}.chip.selected{background:var(--p);color:#fff;border-color:var(--p)}.chatbox{display:flex;flex-direction:column;gap:16px;min-height:340px;max-height:520px;overflow:auto;padding:18px;background:#fbfbfe;border:1px solid var(--line);border-radius:18px}.bubble{padding:15px 18px;border-radius:18px;max-width:85%;font-size:15px;line-height:1.6;overflow-wrap:anywhere}.bubble.bot{background:white;border:1px solid #e9e9f5;align-self:flex-start;border-bottom-left-radius:5px}.bubble.user{background:var(--p);color:white;align-self:flex-end;border-bottom-right-radius:5px}.bubble-label{font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#9b8fec;margin-bottom:5px}.bubble.user .bubble-label{color:#dcd6ff}.translation{display:block;color:#8b96ab;font-size:12px;margin-top:5px}.bubble.user .translation{color:#eee}.chat-controls{margin-top:17px}.text-entry{width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;outline:none;min-width:0}.text-entry:focus{border-color:#a6a0f0}.mic-btn{background:#eeebff;color:var(--p);border:none;border-radius:13px;padding:12px 15px;font-weight:800;white-space:nowrap}.mic-btn.listening{background:#ffe3e5;color:#bd424e;animation:pulse 1.4s infinite}.hint{color:var(--muted);font-size:12px;line-height:1.6}.lesson-grid{grid-template-columns:repeat(2,1fr)}.lesson-card{cursor:pointer;text-align:left;width:100%;display:flex;gap:16px;align-items:flex-start}.lesson-number{height:46px;width:46px;display:grid;place-items:center;background:var(--pale);color:var(--p);font:800 19px Outfit;border-radius:14px;flex-shrink:0}.lesson-card h3{font:700 17px Outfit;margin:0 0 5px}.lesson-card p{color:var(--muted);font-size:12px;margin:0 0 10px;line-height:1.6}.lesson-card small{color:var(--p);font-weight:800}.exercise-card{max-width:790px;margin:auto}.question{font:700 clamp(21px,3vw,29px)/1.4 Outfit;margin:16px 0}.answer-option{display:block;width:100%;text-align:left;background:white;border:1px solid var(--line);border-radius:12px;padding:15px;margin:9px 0;font-weight:600;color:var(--ink)}.answer-option:hover{border-color:#8880e5}.answer-option.correct{background:#e4f7ed;border-color:#71c29b;color:#187654}.answer-option.wrong{background:#fff0ee;border-color:#e89e97;color:#b14948}.feedback{padding:14px;border-radius:12px;background:#f1efff;color:#4c45a3;margin-top:15px;line-height:1.6}.big-audio{height:76px;width:76px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--p);color:white;font-size:33px;margin:16px auto 20px;box-shadow:0 8px 22px #7367e34a}.center{text-align:center}.target{font:800 clamp(24px,4vw,37px) Outfit;text-align:center;margin:17px 0}.meaning{text-align:center;color:var(--muted);font-size:14px}.progress-track{height:9px;border-radius:40px;background:#eeeefa;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#7766ec,#a79cfe);border-radius:40px}.badge{background:var(--pale);color:#6659dc;padding:5px 10px;border-radius:30px;font-size:11px;font-weight:800}.vocab-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.vocab-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:14px}.vocab-item strong{font:700 16px Outfit}.vocab-item small{display:block;color:var(--muted);margin-top:4px}.sound-btn{background:#eeeaff;border:0;color:var(--p);border-radius:10px;padding:9px 11px}.result{margin-top:19px;text-align:center}.score{font:800 54px Outfit;color:var(--p)}.muted{color:var(--muted)}.fine{font-size:12px;color:var(--muted);line-height:1.6}.dialog-body{padding:27px;min-width:min(390px,85vw)}dialog{border:0;border-radius:20px;box-shadow:0 25px 80px #1a275047}dialog::backdrop{background:#131c37aa}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{font:700 24px Outfit}.dialog-body label{display:block;font-weight:700;font-size:13px;margin-top:22px}.dialog-body input[type=range],.dialog-body select{width:100%;margin-top:12px}.dialog-body select{padding:12px;border-radius:10px;border:1px solid var(--line)}.dialog-body .toggle{display:flex;gap:9px;align-items:center}.dialog-body .toggle input{accent-color:var(--p)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#172344;color:white;padding:12px 18px;border-radius:12px;z-index:30;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}#toast.show{opacity:1}.mobile-nav{display:none}.bottom-space{display:none}@keyframes pulse{50%{box-shadow:0 0 0 8px #efbdd171}}@media(max-width:920px){.sidebar{width:210px}.practice-grid{grid-template-columns:1fr 1fr}.practice-grid>*:last-child{grid-column:span 2}.hero .mascot{display:none}}@media(max-width:700px){.sidebar{display:none}.topbar{height:60px;padding:0 20px;justify-content:space-between}.top-brand{display:block}.connection{font-size:10px}main{padding:25px 17px 85px}.hero{padding:24px;min-height:230px}.hero h1{font-size:34px}.hero p{font-size:12px}.stats{gap:9px}.stats .card{padding:15px}.stat-value{font-size:24px}.stat-label{font-size:11px}.practice-grid,.lesson-grid,.split,.vocab-list{grid-template-columns:1fr}.practice-grid>*:last-child{grid-column:span 1}.practice-card{min-height:120px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:white;border-top:1px solid var(--line);height:calc(69px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:10}.mobile-nav button{border:0;background:transparent;color:#8d97ae;display:grid;justify-items:center;align-content:center;gap:2px;min-width:57px}.mobile-nav button.active{color:var(--p)}.mobile-nav button span{font-size:24px}.mobile-nav small{font-size:10px;font-weight:700}.bubble{max-width:96%}.chatbox{min-height:300px}.bottom-space{height:15px}}

.deep-lesson,.review-box{margin-top:22px}.deep-lesson h2,.review-box h2{font-size:23px}.lesson-section{border:1px solid #e4e8f2;border-radius:14px;padding:14px 18px;margin:12px 0}.lesson-section summary{cursor:pointer;font-weight:750;color:#292e68}.lesson-section p{line-height:1.65;color:#44516b}.import-preview{max-height:320px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,monospace;background:#f7f8fc;padding:14px;border-radius:10px}.review-box .answer-option{display:block;width:100%;margin:10px 0}.review-box .primary{margin-top:16px}.deep-lesson>h3{margin-top:22px}