@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Inter:wght@400;600;700;800&display=swap');
:root{--purple:#7955dc;--purple2:#9b83f2;--deep:#2e2451;--pink:#fa9fc8;--bg:#f8f7ff;--muted:#79738f;--line:#eae5f6;--green:#169b67;--shadow:0 18px 55px #6f5abc16}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font-family:'Cairo',system-ui,sans-serif;color:var(--deep);font-size:14px}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #bba4fb;outline-offset:3px}.ltr,[dir=ltr]{font-family:Inter,Arial,sans-serif;direction:ltr;unicode-bidi:isolate}.layout{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-left:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;z-index:9}.brand{display:flex;align-items:center;gap:11px;margin-bottom:30px}.brandmark{width:42px;height:42px;border-radius:14px;background:linear-gradient(140deg,#b49cff,#7653db);display:grid;place-items:center;color:#fff;font:900 24px Inter;box-shadow:0 9px 18px #8064e344}.brand small{display:block;font-size:10px;color:var(--muted);margin-top:-5px;letter-spacing:.6px}.brand b{font-size:14px}.nav{display:grid;gap:5px}.nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;color:#6e6782;font-weight:700;transition:.2s}.nav a:hover{background:#f6f2ff;color:var(--purple)}.nav a.active{background:#f0ebff;color:var(--purple)}.navicon{font-size:19px;line-height:1}.sidebar-bottom{margin-top:auto;background:linear-gradient(135deg,#f5f0ff,#fff2f8);border-radius:19px;padding:16px}.sidebar-bottom b{display:block;margin-bottom:5px}.sidebar-bottom small{color:var(--muted)}.progress-track{height:8px;background:#e9e2f7;border-radius:30px;overflow:hidden;margin:12px 0}.progress-fill{height:100%;background:linear-gradient(90deg,#936bf0,#f0a0ca);border-radius:30px;transition:width .5s}.main{min-width:0;padding:24px clamp(18px,4vw,54px) 80px;max-width:1450px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:24px}.eyebrow{font-size:12px;color:var(--purple);font-weight:900;letter-spacing:.3px}.topbar h1{font-size:27px;margin:4px 0;font-weight:900;line-height:1.6}.sub{color:var(--muted);margin:0;line-height:1.9}.top-actions{display:flex;align-items:center;gap:10px}.pill{display:inline-flex;gap:7px;align-items:center;padding:9px 13px;background:#fff;border:1px solid var(--line);border-radius:40px;font-weight:800;white-space:nowrap}.avatar{width:43px;height:43px;border-radius:50%;background:linear-gradient(135deg,#eacbff,#ae9bf2);display:grid;place-items:center;font-size:23px}.btn{border:0;border-radius:15px;padding:12px 20px;font-weight:900;display:inline-flex;justify-content:center;align-items:center;gap:9px;transition:transform .17s,box-shadow .17s}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(115deg,#855ee7,#a17af3);color:white;box-shadow:0 11px 26px #8062de3b}.secondary{background:#f0ebff;color:var(--purple)}.ghost{background:white;color:var(--deep);border:1px solid var(--line)}.success{background:#e6f9ed;color:#13875c}.danger{background:#fff1f2;color:#cc4263}.small{padding:8px 13px;border-radius:11px;font-size:12px}.hero{background:linear-gradient(118deg,#7955d7,#aa88f1 69%,#e6b5e8);color:#fff;border-radius:27px;padding:clamp(23px,4vw,43px);display:flex;justify-content:space-between;align-items:center;gap:22px;position:relative;overflow:hidden;box-shadow:0 18px 35px #6c4bd02e}.hero:before{content:'✦';position:absolute;top:-140px;left:5%;font-size:370px;color:#ffffff0d}.hero h2{font-size:clamp(24px,3vw,38px);line-height:1.65;margin:9px 0}.hero p{line-height:2;color:#f3eafa;max-width:540px}.hero .btn{background:#fff;color:#714dc9;position:relative}.mascot{width:145px;height:145px;flex:none;filter:drop-shadow(0 15px 17px #44258936);animation:floaty 4s ease-in-out infinite}.mascot.small-mascot{width:76px;height:76px}.mascot svg{width:100%;height:100%}@keyframes floaty{50%{transform:translateY(-8px) rotate(2deg)}}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:28px 0 15px}.section-head h2{font-size:20px;margin:0}.section-head small{color:var(--muted)}.grid{display:grid;gap:17px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:#fff;border:1px solid #ece9f7;border-radius:22px;padding:21px;box-shadow:var(--shadow);min-width:0}.card h3{font-size:17px;margin:8px 0}.card p{color:var(--muted);line-height:1.9;margin:8px 0}.card .emoji{font-size:30px}.metric{display:flex;gap:12px;align-items:center}.metric strong{font-size:25px;display:block}.metric small{color:var(--muted)}.metric-icon{width:56px;height:56px;border-radius:17px;background:#f1ebff;display:grid;place-items:center;font-size:24px}.office-wrap{background:linear-gradient(#f0eaff,#fff9fd);border-radius:26px;overflow:hidden;border:1px solid #eae1fa;position:relative;padding:20px 20px 5px}.office-scene{height:360px;position:relative;max-width:740px;margin:auto}.office-wall{position:absolute;inset:0 0 79px;background:linear-gradient(#f6f0ff,#ede6fa);border-radius:20px 20px 0 0}.office-wall:after{content:'';position:absolute;inset:0;background-image:radial-gradient(#9d84e633 1px,transparent 1px);background-size:25px 25px}.office-floor{position:absolute;height:90px;bottom:0;left:0;right:0;background:linear-gradient(#e7daf2,#e3d2ed);border-radius:0 0 16px 16px}.office-desk{position:absolute;bottom:68px;left:17%;right:12%;height:22px;border-radius:8px;background:#b18ae2;box-shadow:0 13px 0 #9770cc,0 22px 0 #8b6abb}.office-desk:before,.office-desk:after{content:'';position:absolute;width:15px;height:64px;top:19px;background:#9d77cf}.office-desk:before{left:12px}.office-desk:after{right:12px}.object{position:absolute;background:none;border:0;text-align:center;display:grid;justify-items:center;gap:0;filter:drop-shadow(0 6px 7px #70609e28);transition:transform .2s;z-index:3;color:#604d83}.object:hover,.object:focus-visible{transform:translateY(-7px) scale(1.06)}.object .ico{font-size:clamp(34px,5.5vw,65px);line-height:1.3}.object .label{font-size:11px;background:#ffffffed;border:1px solid #e6def9;border-radius:15px;padding:3px 10px;font-weight:900;white-space:nowrap}.computer{left:35%;bottom:96px}.books{right:8%;top:48px}.mapobj{left:7%;top:35px}.board{right:36%;top:23px}.notebook{right:20%;bottom:91px}.trophy{left:13%;top:155px}.office-character{position:absolute;bottom:81px;left:6%;z-index:3}.office-character .mascot{width:93px;height:93px}.office-caption{margin:0 0 12px;text-align:center;color:#79658e;font-size:12px}.level-card{position:relative}.level-card.locked{opacity:.7}.level-num{display:inline-block;padding:5px 10px;background:#f1ebff;color:#7957d6;font:800 11px Inter;border-radius:10px}.level-card .level-emoji{font-size:33px;margin-top:12px}.level-card .bottom-row{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.lesson-list{display:grid;gap:11px}.lesson-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px;background:#fff;border:1px solid var(--line);border-radius:15px}.lesson-row.done{border-color:#bdebd9}.lesson-row .row-main{display:flex;gap:12px;align-items:center}.number{display:grid;place-items:center;width:37px;height:37px;border-radius:12px;background:#f0eaff;color:var(--purple);font-weight:900;flex:none}.lesson-row h4{margin:0 0 3px}.lesson-row p{margin:0;color:var(--muted);font-size:12px}.stepper{display:flex;gap:7px;margin:20px 0}.step-dot{height:7px;flex:1;background:#eee9f8;border-radius:12px}.step-dot.active{background:var(--purple)}.lesson-stage{min-height:330px;display:grid;align-content:center;text-align:center;justify-items:center}.lesson-stage h2{font-size:25px;margin:12px 0}.lesson-stage p{max-width:700px;line-height:2;font-size:16px}.lesson-illustration{font-size:80px;animation:floaty 4s ease-in-out infinite}.choices{display:grid;gap:10px;width:min(100%,650px);margin-top:20px}.choice{padding:14px;background:#fff;border:2px solid var(--line);border-radius:14px;text-align:right;font-weight:700}.choice:hover{border-color:#b7a0f2}.choice.selected{border-color:var(--purple);background:#f3efff}.choice.correct{border-color:#35a878;background:#edfff5}.choice.wrong{border-color:#e66d83;background:#fff3f6}.feedback{width:100%;max-width:680px;margin:12px auto;border-radius:15px;padding:13px 17px;background:#f0ecff;color:#6b4ac1;line-height:1.9;text-align:right}.lab-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:19px}.field{display:grid;gap:6px;margin-bottom:13px}.field label{font-weight:800;font-size:13px}.input,textarea,select{width:100%;border:1px solid #e5dff2;border-radius:13px;padding:12px 14px;background:#fcfbff;outline:none;color:var(--deep)}.input:focus,textarea:focus{border-color:#9c7cf1;box-shadow:0 0 0 3px #a487f122}textarea{min-height:115px;resize:vertical;line-height:1.9}.tags{display:flex;flex-wrap:wrap;gap:7px}.tag{background:#f1ecff;border-radius:30px;padding:5px 11px;font-size:12px;color:#7454ce;font-weight:800}.note{padding:15px 17px;background:#fff9e9;border:1px solid #f7e8bb;border-radius:14px;color:#826a32;line-height:1.85}.timeline{display:grid;gap:12px}.timeline-item{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}.timeline-item:last-child{border-bottom:0}.timeline-ico{width:43px;height:43px;display:grid;place-items:center;background:#f3ecff;border-radius:13px;font-size:23px;flex:none}.chat{display:grid;gap:10px;max-height:360px;overflow:auto;padding:12px}.bubble{background:#f1ebff;border-radius:17px 17px 5px 17px;padding:13px 15px;max-width:90%;width:fit-content;line-height:1.85}.bubble.me{background:#e7f8f0;border-radius:17px 17px 17px 5px;margin-right:auto}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.kicker{display:inline-block;color:#785cd5;background:#f1ecff;border-radius:30px;padding:5px 12px;font-weight:900;font-size:12px}.onboarding{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#eddffe,#9e7aee 55%,#7651d2);overflow:auto;padding:20px}.onboarding:before{content:'✦  ·  ✧  ·   ✦   · ✧';position:absolute;inset:8% 0 auto;text-align:center;color:#ffffff67;font-size:55px;letter-spacing:30px;animation:floaty 6s infinite}.intro-card{position:relative;width:min(100%,700px);background:#ffffffed;border:1px solid #fff;border-radius:34px;padding:clamp(22px,5vw,48px);text-align:center;box-shadow:0 30px 80px #492a9655;animation:pop .5s both}.intro-card h1{font-size:clamp(25px,4vw,39px);margin:9px 0;line-height:1.55}.intro-card p{line-height:2.1;font-size:16px;color:#625774}.intro-card .mascot{margin:auto}.intro-art{font-size:76px;margin:10px}.intro-steps{display:flex;gap:7px;justify-content:center;margin:18px}.intro-steps span{height:6px;width:35px;background:#e5ddf7;border-radius:5px}.intro-steps span.on{background:#8b6be7}.bank-alert{margin:22px auto;padding:18px 20px;text-align:right;max-width:430px;border-radius:20px;background:linear-gradient(110deg,#f2fff7,#fff);box-shadow:0 15px 33px #2195632a;border:1px solid #b9e9d1;animation:slideIn .7s both}.bank-alert b{font-size:34px;color:#09975a;display:block;font-family:Inter}.bank-alert small{color:#637c6d}.bank-label{font-weight:900;color:#128c5a}.intro-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.modal-back{position:fixed;inset:0;background:#23143b88;z-index:30;display:grid;place-items:center;padding:16px}.modal{background:white;border-radius:24px;padding:25px;max-width:510px;width:100%;max-height:90vh;overflow:auto}.toast{position:fixed;left:25px;bottom:25px;background:#32224f;color:#fff;border-radius:14px;padding:13px 20px;z-index:40;box-shadow:0 15px 30px #33234845;animation:pop .25s}.empty{text-align:center;padding:40px;color:var(--muted)}.empty .emoji{font-size:60px}.muted{color:var(--muted)}.divider{border:0;border-top:1px solid var(--line);margin:21px 0}.mini-list{display:grid;gap:9px}.list-entry{display:flex;justify-content:space-between;align-items:center;gap:13px;padding:12px;background:#fbfaff;border:1px solid #eeebf7;border-radius:14px}.list-entry strong{display:block}.list-entry small{color:var(--muted)}.page-enter{animation:pop .32s both}@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{from{opacity:0;transform:translateY(-35px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.mobilebar{display:none}.footer{text-align:center;color:#9389a5;padding:25px;font-size:12px}.overview-circle{width:110px;height:110px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#8d6ee5 var(--pct,5%),#eae2fb 0);margin:auto}.overview-circle>span{width:84px;height:84px;background:#fff;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:21px}.scenario{background:linear-gradient(115deg,#f9f4ff,#fff);border:1px solid #e9e1fc;border-radius:20px;padding:24px}.pill-filter{background:white;border:1px solid var(--line);border-radius:20px;padding:8px 14px;color:#746d87;font-weight:800}.pill-filter.active{background:#8062df;color:white;border-color:#8062df}details{border:1px solid var(--line);padding:14px;border-radius:12px;margin-top:12px}summary{cursor:pointer;font-weight:800}.install-callout{border:1px solid #d9cbff;background:linear-gradient(110deg,#f7f1ff,#fff);border-radius:18px;padding:20px}.hidden{display:none!important}@media(max-width:970px){.layout{grid-template-columns:1fr}.sidebar{display:none}.main{padding:20px 18px 105px}.mobilebar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:11;justify-content:space-around;gap:3px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:#fffffff5;backdrop-filter:blur(15px);border-top:1px solid var(--line)}.mobilebar a{text-align:center;display:grid;place-items:center;gap:2px;font-size:10px;font-weight:800;color:#82788f;min-width:55px}.mobilebar a.active{color:var(--purple)}.mobilebar a span{font-size:22px}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-layout{grid-template-columns:1fr}}@media(max-width:600px){.topbar h1{font-size:22px}.hero{align-items:flex-start}.hero .mascot{width:75px;height:75px;position:absolute;left:8px;top:14px;opacity:.7}.hero h2{font-size:23px;max-width:90%}.hero p{max-width:90%}.grid-3,.grid-2{grid-template-columns:1fr}.section-head h2{font-size:18px}.office-wrap{padding:7px}.office-scene{height:310px}.office-wall{bottom:62px}.office-floor{height:78px}.office-desk{bottom:57px}.computer{bottom:83px;left:31%}.notebook{bottom:78px;right:13%}.books{right:2%}.board{right:38%}.mapobj{left:0}.trophy{left:4%;top:145px}.office-character{left:0;bottom:73px}.office-character .mascot{width:65px;height:65px}.object .ico{font-size:41px}.object .label{font-size:9px;padding:2px 7px}.top-actions .pill{display:none}.card{padding:17px}.intro-card{border-radius:24px}.intro-card p{font-size:14px}.intro-art{font-size:59px}.lesson-stage h2{font-size:21px}.lesson-stage p{font-size:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}