:root{--ink:#17243d;--navy:#101b31;--muted:#8390a5;--line:#e9edf4;--canvas:#f6f8fc;--violet:#6857dd;--violet-dark:#5545c2;--mint:#dff7ed;--green:#228c69;--amber:#fff1d2;--blue:#e3ebff;--shadow:0 16px 45px rgba(29,42,77,.06)}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:"IBM Plex Sans Arabic",Arial,sans-serif;font-size:14px}.shell{display:flex;min-height:100vh}.sidebar{width:246px;background:var(--navy);color:#fff;padding:28px 18px 18px;display:flex;flex-direction:column;position:fixed;inset:0 0 0 auto;z-index:3}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:white;font:800 22px Alexandria,sans-serif}.brand-icon{width:41px;height:41px;display:grid;place-items:center;border-radius:14px;background:var(--violet);font-size:21px}.brand small{display:block;font:400 10px "IBM Plex Sans Arabic",sans-serif;color:#9ba8bf;margin-top:2px}.side-label{font-size:10px;color:#8090a9;margin:48px 12px 13px}.nav{display:grid;gap:7px}.nav-item{border:0;background:transparent;text-align:right;color:#a7b2c8;padding:13px 14px;border-radius:12px;font:500 13px inherit;cursor:pointer;display:flex;align-items:center;gap:13px;transition:.2s}.nav-item span{width:22px;text-align:center;font-size:17px}.nav-item:hover,.nav-item.active{background:#242f4a;color:white}.nav-item.active{box-shadow:inset -3px 0 var(--violet)}.side-bottom{margin-top:auto}.streak-card{display:flex;align-items:center;gap:10px;background:#1b2944;border:1px solid #2d3b57;border-radius:14px;padding:13px}.flame{background:#392d42;color:#ffa777;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;font-size:20px}.streak-card b,.streak-card small{display:block}.streak-card b{font-size:12px}.streak-card small{color:#9ca9bf;font-size:10px;margin-top:3px}.side-foot{color:#75839a;font-size:10px;line-height:1.9;margin:18px 8px 0}.main{margin-right:246px;width:calc(100% - 246px);min-height:100vh;padding:0 42px 30px;max-width:1600px}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:32px}.breadcrumb{font-size:12px;color:#8792a6}.breadcrumb span{padding:0 9px;color:#c2c9d4}.breadcrumb b{color:#293650;font-weight:600}.top-actions{display:flex;align-items:center;gap:13px}.sync-pill{display:flex;align-items:center;gap:7px;color:#6e7b91;background:white;border:1px solid var(--line);padding:7px 11px;border-radius:30px;font-size:10px}.sync-pill i{width:7px;height:7px;border-radius:50%;background:#f1b445}.sync-pill.online i{background:#31b58c;box-shadow:0 0 0 3px #def5ed}.avatar{border:0;background:#e9e5ff;color:var(--violet-dark);width:35px;height:35px;border-radius:50%;font:700 13px inherit;cursor:pointer}.page{display:none;animation:fade .3s ease}.page.active{display:block}@keyframes fade{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:none}}.welcome-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:23px}.eyebrow{color:var(--violet);font-size:10px;font-weight:700;margin:0 0 8px}.welcome-row h1,.page-title h1{font:700 24px Alexandria,"IBM Plex Sans Arabic",sans-serif;margin:0 0 9px;letter-spacing:-.5px}.muted{color:var(--muted);margin:0;font-size:12px}.wave{color:#e4ae48;font-size:20px}.outline-btn{border:1px solid var(--line);background:white;color:#63718a;border-radius:9px;padding:9px 13px;cursor:pointer;font:500 11px inherit}.hero{min-height:252px;border-radius:21px;background:radial-gradient(ellipse at 83% 60%,#263a61 0%,#172844 39%,#111d34 75%);color:white;display:flex;overflow:hidden;position:relative;padding:27px 33px;box-shadow:0 15px 35px rgba(16,27,49,.13)}.hero-copy{position:relative;z-index:1;max-width:57%}.hero-tag{color:#c9d0df;font-size:10px;background:#ffffff12;border:1px solid #ffffff18;border-radius:20px;width:max-content;padding:6px 10px;display:flex;align-items:center;gap:8px}.pulse{width:6px;height:6px;border-radius:50%;background:#82e5c2;box-shadow:0 0 0 4px #78e4c225}.hero h2{font:700 24px Alexandria,sans-serif;line-height:1.55;margin:13px 0 5px}.hero h2 em{font-style:normal;color:#aaa0ff}.hero p{color:#abb6c9;font-size:11px;line-height:1.8;margin:0 0 14px;max-width:430px}.primary-btn{border:0;border-radius:9px;background:var(--violet);color:white;padding:10px 15px;font:600 11px "IBM Plex Sans Arabic",sans-serif;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:17px}.primary-btn:hover{background:var(--violet-dark);transform:translateY(-1px)}.primary-btn span{font-size:14px}.hero-art{position:absolute;left:2%;top:0;height:100%;width:42%;min-width:340px;overflow:hidden}.art-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:29px 29px;mask-image:linear-gradient(to left,transparent,black 25%,black 78%,transparent)}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb1{width:190px;height:190px;background:#6656df25;top:32px;left:80px}.orb2{width:120px;height:120px;border:1px solid #a99cff32;left:115px;top:66px}.center-ring{position:absolute;left:132px;top:58px;width:131px;height:131px;border:1px solid #aaa0ff78;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 12px #aaa0ff0d,0 0 0 28px #aaa0ff08}.ring-inner{width:87px;height:87px;border-radius:50%;background:linear-gradient(145deg,#8879f3,#5948c5);display:grid;place-content:center;text-align:center;font:700 16px Alexandria,sans-serif;box-shadow:0 10px 32px #6553db72}.ring-inner small{font:400 9px "IBM Plex Sans Arabic",sans-serif;color:#e5e1ff}.device-card{position:absolute;background:#273858cc;border:1px solid #52618775;color:#fff;border-radius:12px;padding:7px 10px;display:flex;align-items:center;gap:8px;box-shadow:0 10px 24px #0c152755}.device-card span{color:#b8adff;font-size:15px}.device-card small{font-size:9px;color:#c7d0df}.d1{left:30px;top:41px}.d2{left:248px;top:92px}.d3{left:58px;top:171px}.spark{position:absolute;color:#f1d48b}.s1{top:34px;left:271px}.s2{top:198px;left:242px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:19px 0 21px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;display:flex;align-items:center;gap:11px;min-width:0;box-shadow:0 4px 13px #17243d05}.stat-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:none}.stat-icon.violet{background:#edeaff;color:var(--violet)}.stat-icon.mint{background:var(--mint);color:var(--green)}.stat-icon.amber{background:var(--amber);color:#d58f2f}.stat-icon.blue{background:var(--blue);color:#5274cf}.stat-card small{display:block;color:#8390a3;font-size:9px;margin-bottom:5px}.stat-card b{font:700 17px Alexandria,sans-serif}.stat-card b span{font:400 9px "IBM Plex Sans Arabic",sans-serif;color:#a0aabc}.stat-mark{margin-right:auto;color:#adb6c6;font-size:14px}.content-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 3px 14px #17243d04}.lessons-panel,.side-panel{padding:18px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-head h3,.panel h3{font:700 13px Alexandria,"IBM Plex Sans Arabic",sans-serif;margin:0 0 4px}.section-head p{font-size:10px;color:#9aa4b5;margin:0}.text-btn{border:0;background:none;color:var(--violet);font:600 10px inherit;cursor:pointer}.text-btn span{font-size:13px;margin-right:5px}.icon-btn{border:1px solid var(--line);border-radius:8px;background:white;color:#8d98aa;padding:1px 7px;cursor:pointer}.lesson-list{display:grid;gap:5px}.lesson-row{display:flex;align-items:center;gap:11px;padding:9px 7px;border-top:1px solid #f0f2f6;cursor:pointer;border-radius:8px;transition:.2s}.lesson-row:hover{background:#f8f7ff}.lesson-number{width:32px;height:32px;border-radius:10px;background:#f1efff;color:#7163d6;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}.lesson-row.done .lesson-number{background:#e2f7ee;color:#25926d}.lesson-title{font-size:10px;font-weight:600}.lesson-sub{font-size:9px;color:#9ba5b4;margin-top:3px}.lesson-meta{margin-right:auto;text-align:left;color:#a0aabd;font-size:9px;white-space:nowrap}.lesson-arrow{color:#adb7c6;margin-right:8px}.side-panel{min-height:270px}.leader-row{display:flex;align-items:center;gap:10px;padding:10px 1px;border-top:1px solid #f0f2f6}.rank{width:22px;text-align:center;color:#98a3b5;font:700 12px Alexandria,sans-serif}.rank.gold{color:#dea83e}.rank.silver{color:#91a3bb}.rank.bronze{color:#c47e51}.leader-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:#4d55a5;background:#efeeff;font-size:11px;font-weight:700}.leader-name{font-size:10px;font-weight:600}.leader-label{font-size:9px;color:#9aa5b6;margin-top:3px}.leader-points{margin-right:auto;color:#454d69;font:700 11px Alexandria,sans-serif}.leader-note{border-radius:9px;background:#f7f6ff;color:#737e97;padding:9px;font-size:9px;margin-top:8px}.bottom-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:15px;margin-top:16px}.challenge{padding:15px;display:flex;align-items:center;gap:13px;background:linear-gradient(105deg,#fbfaff,#fff)}.challenge-icon{width:37px;height:37px;background:#f0edff;color:#796ce1;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:none}.challenge small,.tip small{font-size:9px;color:#9aa4b5}.challenge h3{margin:3px 0;font-size:12px}.challenge p{font-size:9px;color:#9aa4b5;margin:0}.primary-btn.small{margin-right:auto;padding:9px 11px;font-size:9px;white-space:nowrap}.tip{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fffcf4}.tip-icon{font-size:22px;color:#dda64a}.tip p{font-size:10px;line-height:1.8;color:#66748b;margin:4px 0 0}.tip b{color:#c38b31}.footer{text-align:center;color:#a2adbc;font-size:9px;padding:26px 0 2px}.page-title{margin:4px 0 24px}.page-title h1{font-size:25px}.course-progress{padding:16px 19px;margin-bottom:18px;display:grid;grid-template-columns:140px 1fr;align-items:center;gap:18px}.course-progress small,.course-progress b{display:block}.course-progress small{font-size:9px;color:#8b97aa}.course-progress b{font-size:11px;margin-top:4px}.progress-track{height:7px;border-radius:8px;background:#eef0f5;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7868e6,#50b793);transition:.4s}.course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.course-card{padding:17px;cursor:pointer;transition:.2s}.course-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.course-card-top{display:flex;align-items:center;justify-content:space-between}.course-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px}.course-icon.purple{color:#705fe0;background:#efedff}.course-icon.green{color:#2c9b78;background:#e6f8f1}.course-icon.gold{color:#c98b2c;background:#fff4de}.course-icon.blue{color:#5981d8;background:#edf2ff}.course-badge{font-size:9px;color:#8390a5;background:#f4f6fa;padding:5px 8px;border-radius:15px}.course-card h3{font:700 12px Alexandria,sans-serif;margin:12px 0 5px}.course-card p{font-size:10px;color:#8995a8;line-height:1.8;margin:0;min-height:38px}.course-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding-top:12px;border-top:1px solid #f0f2f6;color:#8995a8;font-size:9px}.course-card-foot b{color:var(--violet);font-weight:600}.quiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.quiz-card{padding:19px}.quiz-card .course-icon{margin-bottom:13px}.quiz-card h3{font:700 13px Alexandria,sans-serif;margin:0 0 7px}.quiz-card p{font-size:10px;line-height:1.8;color:#8c98aa;min-height:40px}.quiz-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.quiz-card-foot small{color:#909bad;font-size:9px}.quiz-history{padding:18px;margin-top:16px}.quiz-history h3{margin-bottom:12px}.leaderboard-panel{padding:22px;max-width:820px}.leaderboard-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.leaderboard-heading h3{font-size:15px}.leaderboard-heading p{font-size:10px;color:#929db0;margin:0}.week-pill{font-size:9px;background:#f2efff;color:var(--violet);padding:7px 10px;border-radius:20px}.leaderboard-panel .leader-row{padding:14px 5px}.leaderboard-panel .leader-name{font-size:12px}.leaderboard-panel .leader-points{font-size:12px}.leaderboard-panel .leader-avatar{width:36px;height:36px}.leader-privacy{background:#fbf7eb;color:#998454;border-radius:9px;padding:11px;font-size:10px;margin-top:16px}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.achievement-card{padding:20px;text-align:center}.achievement-medal{margin:0 auto 12px;width:61px;height:61px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:#f0edff;color:#7161d8}.achievement-card.locked .achievement-medal{background:#f3f4f7;color:#afb6c3;filter:grayscale(1)}.achievement-card h3{font:700 12px Alexandria,sans-serif;margin:0 0 6px}.achievement-card p{font-size:9px;color:#929daf;line-height:1.8;margin:0}.achievement-card.locked{opacity:.73}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:#17243d;color:white;padding:11px 18px;border-radius:10px;font-size:11px;z-index:9;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:0;border-radius:17px;padding:0;width:min(440px,calc(100% - 28px));box-shadow:0 25px 90px #121a2e3a;color:var(--ink)}dialog::backdrop{background:#101a2eb0;backdrop-filter:blur(3px)}.dialog-card{padding:27px;position:relative}.dialog-card h2{font:700 19px Alexandria,sans-serif;margin:8px 0}.dialog-card p{font-size:11px;line-height:1.9;color:#8290a4}.dialog-kicker{font-size:10px;font-weight:700;color:var(--violet)}.dialog-card input{width:100%;padding:12px;border:1px solid #e4e8f0;border-radius:9px;font:12px inherit;outline:0;margin:9px 0}.dialog-card input:focus{border-color:#8a7eeb;box-shadow:0 0 0 3px #eeeaff}.dialog-actions{display:flex;justify-content:flex-start;margin-top:8px}.close-btn{position:absolute;left:15px;top:13px;border:0;background:#f5f6f9;color:#77839a;border-radius:50%;width:27px;height:27px;cursor:pointer;font-size:19px;line-height:1}.demo-note{display:block;font-size:9px;color:#a4adba;margin-top:14px}.lesson-dialog-card{max-height:85vh;overflow-y:auto}.lesson-dialog-card h2{margin-top:12px}.lesson-dialog-card .lesson-lead{font-size:12px;line-height:1.9;color:#718098}.lesson-dialog-card h3{font:700 12px Alexandria,sans-serif;margin:18px 0 8px}.lesson-dialog-card li{font-size:11px;line-height:2.1;color:#5f6e85}.lesson-callout{border-right:3px solid #e4b14c;background:#fffaed;border-radius:8px;padding:11px;font-size:10px;line-height:1.9;color:#796b4b;margin:14px 0}.quiz-dialog-card{max-height:88vh;overflow:auto}.quiz-q{border-top:1px solid #edf0f5;padding:12px 0}.quiz-q p{font-weight:600;color:#33415b}.quiz-option{display:flex;align-items:center;gap:9px;padding:9px;border-radius:8px;color:#65738a;font-size:11px;cursor:pointer}.quiz-option:hover{background:#f7f6ff}.quiz-option input{accent-color:var(--violet)}.result-box{padding:15px;border-radius:11px;text-align:center;margin:12px 0}.result-box.pass{background:#e8f8f1;color:#277c61}.result-box.retry{background:#fff5e4;color:#a76d25}.result-box b{display:block;font:700 22px Alexandria,sans-serif}.result-box span{font-size:10px}.mobile-menu{display:none}@media(max-width:1100px){.main{padding:0 27px 24px}.sidebar{width:220px}.main{margin-right:220px;width:calc(100% - 220px)}.stats-grid{gap:9px}.stat-card{padding:12px;gap:8px}.hero-art{left:-5%}}@media(max-width:800px){.sidebar{width:66px;padding:18px 8px}.brand{justify-content:center}.brand>span:last-child,.side-label,.nav-item:not(.active){font-size:0}.brand small,.side-bottom{display:none}.brand-icon{width:43px;height:43px}.nav{margin-top:45px}.nav-item{justify-content:center;padding:12px 0}.nav-item span{font-size:19px}.nav-item.active{font-size:0}.main{margin-right:66px;width:calc(100% - 66px);padding:0 20px 20px}.topbar{height:63px;margin-bottom:25px}.hero{padding:23px;min-height:255px}.hero-copy{max-width:73%}.hero-art{opacity:.55;left:-30%;min-width:300px}.stats-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.bottom-grid{grid-template-columns:1fr}.quiz-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.main{padding:0 13px 18px}.topbar{margin-bottom:20px}.breadcrumb{font-size:10px}.sync-pill{font-size:0;padding:8px}.sync-pill i{width:8px;height:8px}.welcome-row h1{font-size:18px}.welcome-row .muted{font-size:10px;line-height:1.8;max-width:270px}.outline-btn{padding:7px 8px}.outline-btn span{display:none}.hero{min-height:285px;padding:21px}.hero-copy{max-width:100%}.hero h2{font-size:21px}.hero p{max-width:74%;font-size:10px}.hero-art{opacity:.4;left:-50%;top:25px}.stats-grid{gap:9px}.stat-card{padding:10px}.stat-icon{width:34px;height:34px}.stat-card b{font-size:15px}.course-grid,.quiz-grid,.achievement-grid{grid-template-columns:1fr}.course-progress{grid-template-columns:1fr;gap:10px}.challenge{align-items:flex-start;flex-wrap:wrap}.challenge .primary-btn{margin-right:50px}.welcome-row{gap:8px}.page-title h1{font-size:21px}}