*{margin:0;padding:0;box-sizing:border-box}
 :root{
  --p:#6d4cc9;--pd:#4d3496;--ps:#ece7f8;--acc:#c88635;--accs:#f8ead7;
  --bg:#efedf5;--card:#f9f7fc;--ink:#241d34;--mut:#6b6578;--line:#ddd6e7;
  --ok:#2f7d57;--oks:#e1f2e8;--no:#c74755;--nos:#f8e8eb;--warn:#8a571b;--warns:#f8ead7;
  --info:#356fa8;--infos:#e5eef7;--sh:0 12px 32px rgba(40,25,80,.10);--sh2:0 18px 48px rgba(40,25,80,.16);
  --r:16px;--pad:22px;--side:250px
}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.7}
body.t-indigo{--p:#4f46c8;--pd:#3730a3;--ps:#e6e7f7;--acc:#b97832;--accs:#f7ead9;--bg:#eceef5;--card:#f7f7fb;--ink:#20233a;--mut:#666b7f;--line:#d7d9e7}
body.t-blue{--p:#2f64b7;--pd:#244b8b;--ps:#e3edf8;--acc:#b87936;--accs:#f7ead9;--bg:#eaf1f6;--card:#f5f9fc;--ink:#1d2d42;--mut:#627387;--line:#d2deea}
body.t-green{--p:#3a7b5b;--pd:#2b5d45;--ps:#e2eee7;--acc:#b57a37;--accs:#f6ead9;--bg:#ebf2ee;--card:#f5f9f7;--ink:#203229;--mut:#65766d;--line:#d2e0d8}
body.t-brown{--p:#8a5b3d;--pd:#68442f;--ps:#eee3dc;--acc:#b27b38;--accs:#f4e6d2;--bg:#f1ece7;--card:#faf6f2;--ink:#382a23;--mut:#786a61;--line:#e2d5cc}
body.dense{--pad:14px;--r:12px}
body.rm *,body.rm *::before,body.rm *::after{animation:none!important;transition:none!important}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:var(--p)}
img{display:block;max-width:100%}.hidden{display:none!important}
.boot{min-height:100vh;display:grid;place-items:center;color:var(--mut);font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:0 18px}.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}.pad{padding:var(--pad)}
.t{line-height:1.35}.t1{font-size:25px}.t2{font-size:20px}.t3{font-size:16px}.mut{color:var(--mut);font-size:13px}.small{font-size:12px}
.btn{border:none;border-radius:12px;padding:10px 18px;font-size:13.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--p);color:#fff;transition:.18s;box-shadow:0 4px 12px rgba(70,45,135,.10)}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 7px 18px rgba(70,45,135,.16)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--p);border:1.5px solid var(--p);box-shadow:none}.btn.acc{background:var(--acc);color:#4d2e02}.btn.no{background:var(--no)}.btn.ok{background:var(--ok)}.btn.sm{padding:7px 13px;font-size:12px;border-radius:10px}.btn.big{padding:14px 25px;font-size:15px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--ps);color:var(--pd);border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:800;white-space:nowrap}.chip.acc{background:var(--accs);color:var(--warn)}.chip.gray{background:var(--line);color:var(--mut)}.chip.ok{background:var(--oks);color:var(--ok)}.chip.no{background:var(--nos);color:var(--no)}
.badge{border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;white-space:nowrap}.badge.ok{background:var(--oks);color:var(--ok)}.badge.no{background:var(--nos);color:var(--no)}.badge.warn{background:var(--warns);color:var(--warn)}.badge.gray{background:var(--line);color:var(--mut)}.badge.p{background:var(--ps);color:var(--pd)}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--p),var(--acc));border-radius:99px;transition:width .45s}
.field{margin-bottom:12px}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:5px;color:var(--mut)}.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--card);font-size:13.5px}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 10%,transparent)}
/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.12fr .88fr;background:radial-gradient(circle at 12% 0%,rgba(108,75,196,.10),transparent 34%),var(--bg)}
.lhero{padding:54px clamp(24px,6vw,78px);display:flex;flex-direction:column;gap:20px;justify-content:center}.lhero h1{font-size:clamp(30px,4vw,49px);line-height:1.35;max-width:760px;letter-spacing:-.03em}.lhero h1 b{color:var(--p)}
.brandline{display:flex;gap:12px;align-items:center;font-weight:900;font-size:16px}.mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 10px 24px color-mix(in srgb,var(--p) 25%,transparent)}
.value-chain{display:flex;flex-wrap:wrap;gap:8px;max-width:760px}.hero-visual{max-width:690px;min-height:185px;border-radius:24px;background:linear-gradient(135deg,#2d1d62 0%,#6C4BC4 58%,#9a6bea 100%);overflow:hidden;position:relative;box-shadow:var(--sh2);color:#fff;padding:28px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center}
.hero-visual:before,.hero-visual:after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}.hero-visual:before{width:260px;height:260px;left:-90px;top:-90px}.hero-visual:after{width:210px;height:210px;right:-70px;bottom:-100px}
.hero-copy{position:relative;z-index:2}.hero-copy strong{display:block;font-size:24px;margin-bottom:8px}.hero-copy p{color:#efeaff;font-size:13px;max-width:430px}.hero-orbit{position:relative;height:145px;z-index:2}.hero-orbit .book{position:absolute;inset:26px 24px 8px 24px;background:#fff;border-radius:12px 12px 20px 20px;transform:perspective(500px) rotateX(10deg);box-shadow:0 16px 28px rgba(0,0,0,.22)}.hero-orbit .book:before{content:'';position:absolute;right:50%;top:0;bottom:0;width:2px;background:#ded7f4}.hero-orbit .book:after{content:'كان   إنّ';position:absolute;inset:25px 12px auto;text-align:center;color:var(--p);font-size:27px;font-weight:900;word-spacing:38px}.orb{position:absolute;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:var(--acc);color:#4c2d00;box-shadow:0 9px 22px rgba(0,0,0,.18)}.orb.a{top:0;right:6px}.orb.b{bottom:0;left:4px;background:#9ee1bd;color:#164d31}
.lside{background:linear-gradient(160deg,var(--pd),#17102e);padding:42px 34px;display:flex;flex-direction:column;gap:15px;justify-content:center;min-height:100vh}.lside h2{color:#fff}.lside .note{color:#cfd8ea;font-size:12.5px;line-height:1.8}.role{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:15px 16px;display:flex;gap:13px;align-items:center;color:#fff;text-align:right;width:100%;transition:.2s}.role:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}.role .av{width:44px;height:44px;border-radius:13px;background:var(--acc);color:#3a2402;display:grid;place-items:center;font-size:20px;flex-shrink:0}.role b{display:block;font-size:14px}.role small{color:#cfd8ea;font-size:11.5px}.login-form{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:15px;border-radius:15px}.login-form label{color:#dcd5f7}.login-form input{background:rgba(255,255,255,.96);color:#221c33;border:0}.auth-error{background:rgba(214,69,69,.16);border:1px solid rgba(255,130,130,.4);color:#ffdada;border-radius:11px;padding:10px 12px;font-size:12px}
/* shell */
.shell{display:flex;min-height:100vh}.side{width:var(--side);flex-shrink:0;background:var(--card);border-inline-end:1px solid var(--line);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;z-index:70}.side .brand{display:flex;gap:10px;align-items:center;font-weight:900;margin-bottom:18px}.side .mark{width:40px;height:40px;border-radius:12px;font-size:19px}.snav button{display:flex;width:100%;gap:10px;align-items:center;border:none;background:none;border-radius:12px;padding:11px 13px;font-size:13.5px;font-weight:600;color:var(--mut);margin-bottom:4px;text-align:right}.snav button:hover{background:var(--ps);color:var(--pd)}.snav button.on{background:var(--p);color:#fff}.snav .sep{font-size:10px;color:var(--mut);font-weight:800;padding:12px 10px 5px;text-transform:uppercase;letter-spacing:.02em}.main{flex:1;min-width:0}.top{display:flex;align-items:center;gap:10px;padding:13px 18px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;flex-wrap:wrap}.burger{display:none;border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:7px 11px;font-size:16px}.content{padding:22px 0 48px}
.page-head{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}.page-head p{max-width:720px}.stat{display:flex;align-items:center;gap:13px;padding:16px}.stat .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex-shrink:0}.stat b{font-size:21px;display:block;line-height:1.2}.lrow{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:var(--card);margin-bottom:9px;flex-wrap:wrap;transition:.15s}.lrow:hover{border-color:var(--p);box-shadow:var(--sh)}.lrow .em{width:44px;height:44px;border-radius:12px;background:var(--ps);display:grid;place-items:center;font-size:19px;flex-shrink:0}.lrow .tt{flex:1;min-width:180px}.lrow .tt b{display:block;font-size:13.5px}.course-card{overflow:hidden;position:relative}.course-cover{height:138px;padding:22px;display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;position:relative}.course-cover:before{content:'';position:absolute;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.09);left:-45px;top:-55px}.course-cover strong{font-size:19px;position:relative;z-index:2}.course-body{padding:17px}.course-meta{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}
.hint{font-size:12px;color:var(--mut);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 13px;margin-top:10px}.fb{border-radius:12px;padding:12px 15px;font-size:13px;margin-top:10px;animation:up .3s}.fb.ok{background:var(--oks);color:var(--ok);border:1px solid var(--ok)}.fb.no{background:var(--nos);color:var(--no);border:1px solid var(--no)}.fb.warn{background:var(--warns);color:var(--warn);border:1px solid var(--acc)}.fb.info{background:var(--infos);color:var(--info);border:1px solid #8fc4e8}
.tscroll{overflow-x:auto}table.data,table.tb{width:100%;border-collapse:collapse;font-size:12.5px;min-width:700px}table.data th,table.tb th{background:var(--ps);color:var(--pd);text-align:right;padding:10px 12px}table.data td,table.tb td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}table.tb{min-width:0}table.tb th,table.tb td{border:1px solid var(--line)}
/* lesson journey */
.lesson-top{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;border-radius:24px;padding:26px;box-shadow:var(--sh2);position:relative;overflow:hidden;margin-bottom:14px}.lesson-top:before{content:'';position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08);left:-95px;top:-120px}.lesson-top > *{position:relative;z-index:2}.lesson-top .mut{color:#e4ddfb}.lesson-top .lesson-kpis{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.lesson-top .lesson-kpis .chip{background:rgba(255,255,255,.15);color:#fff}.jsteps{display:flex;gap:6px;overflow-x:auto;padding:5px 0 13px;scrollbar-width:thin}.jstep{white-space:nowrap;padding:8px 14px;border-radius:999px;background:var(--line);color:var(--mut);font-size:12px;font-weight:800;border:1px solid transparent}.jstep.cur{background:var(--p);color:#fff}.jstep.done{background:var(--ps);color:var(--pd)}
.mtabs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.mtab{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:9px 14px;font-size:12.5px;font-weight:800;color:var(--mut)}.mtab.on{background:var(--p);border-color:var(--p);color:#fff}.mtab .v{color:var(--ok)}.qbox{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;background:var(--card)}
.opt{display:block;width:100%;text-align:right;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;font-size:13.5px;margin-bottom:8px;transition:.15s}.opt:hover:not(:disabled){border-color:var(--p);background:var(--ps)}.opt.sel{border-color:var(--p);background:var(--ps);font-weight:800}.opt.ok{border-color:var(--ok);background:var(--oks);font-weight:800}.opt.no{border-color:var(--no);background:var(--nos);animation:shake .3s}.opt:disabled{cursor:default}.obj{display:flex;gap:11px;align-items:flex-start;background:var(--ps);border-radius:12px;padding:12px 14px;margin-bottom:9px;font-size:13.5px}.obj .n{background:var(--p);color:#fff;min-width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}
.exrow{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.excard{border-radius:14px;padding:15px;flex:1;min-width:210px}.excard.a{background:var(--ps);border:1px solid var(--p)}.excard.b{background:var(--accs);border:1px solid var(--acc)}.excard em{display:block;margin-top:8px;font-style:normal;background:var(--card);border-radius:10px;padding:8px 12px;font-size:13.5px}.rv{border:1.5px dashed var(--p);border-radius:10px;padding:9px 12px;background:var(--ps);margin-top:8px;font-size:13px;animation:up .3s}.therapy{border:1px solid color-mix(in srgb,var(--acc) 45%,var(--line));background:linear-gradient(180deg,var(--accs),var(--card));border-radius:18px;padding:18px}.therapy h3{color:var(--warn)}.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare .sidecard{padding:16px;border-radius:14px}.compare .verb{background:#faecf2;border:1px solid #e4adc4}.compare .particle{background:#e8f7ef;border:1px solid #a5d9bc}
/* embedded stable lesson */
.lesson-modal{position:fixed;inset:0;background:var(--bg);z-index:250;display:flex;flex-direction:column}.lesson-modal-head{display:flex;gap:9px;align-items:center;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}.lesson-modal-frame{flex:1;min-height:0;background:#fff}.lesson-modal-frame iframe{width:100%;height:100%;border:0;display:block}.method-strip{display:flex;gap:6px;flex-wrap:wrap}.method-strip .btn{padding:7px 10px}
/* modal */
.mback{position:fixed;inset:0;background:rgba(15,10,35,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:300;padding:16px;animation:up .2s}.modal{background:var(--card);border-radius:18px;max-width:680px;width:100%;max-height:90vh;overflow:auto;padding:22px;box-shadow:var(--sh2)}.modal.wide{max-width:1050px}.toast{position:fixed;bottom:20px;right:50%;transform:translateX(50%);background:var(--ink);color:var(--bg);border-radius:12px;padding:12px 20px;font-size:13px;z-index:400;box-shadow:var(--sh);display:flex;gap:8px;align-items:center;animation:up .3s}
/* print */
.printable{background:#fff!important;color:#111!important}.a4{width:100%;background:#fff;color:#16131f;border:1px solid #ccc;padding:34px;font-size:13px}.a4 .hd{display:flex;justify-content:space-between;border-bottom:2.5px solid #333;padding-bottom:10px;margin-bottom:14px;font-size:12.5px}.a4 table{width:100%;border-collapse:collapse;margin:10px 0}.a4 th,.a4 td{border:1px solid #555;padding:7px 9px;text-align:right;font-size:12px}.a4 .sig{display:flex;justify-content:space-between;margin-top:44px}
@media print{body *{visibility:hidden}.printable,.printable *{visibility:visible}.printable{position:absolute;inset:0;max-height:none;overflow:visible;box-shadow:none;border:none}.mback{position:static;background:none;padding:0}}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes shake{0%,100%{transform:none}25%{transform:translateX(5px)}75%{transform:translateX(-5px)}}
@media(max-width:980px){.g3,.g4{grid-template-columns:1fr 1fr}.login{grid-template-columns:1fr}.lside{min-height:auto}.hero-visual{max-width:none}}
@media(max-width:900px){.side{position:fixed;inset-inline-start:0;top:0;transform:translateX(110%);transition:.25s;z-index:90;box-shadow:var(--sh2)}body.drawer .side{transform:none}.burger{display:block}.top{padding-inline:12px}.content{padding-top:15px}.wrap{padding-inline:12px}}
@media(max-width:650px){.g2,.g3,.g4,.compare{grid-template-columns:1fr}.lhero{padding:28px 18px}.lhero h1{font-size:30px}.lside{padding:28px 18px}.hero-visual{grid-template-columns:1fr;min-height:220px}.hero-orbit{display:none}.page-head{align-items:flex-start}.top .chip.plan{display:none}.lesson-top{border-radius:18px;padding:20px}.lesson-modal-head .method-strip{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}.method-strip .btn{white-space:nowrap}.modal{padding:16px}.a4{padding:18px}.t1{font-size:22px}}
/* Fix 17 — classroom/fullscreen production mode */
.classroom-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:12px;box-shadow:var(--sh);position:sticky;top:68px;z-index:35;backdrop-filter:blur(10px)}
.classroom-toolbar>div:first-child{display:flex;flex-direction:column;line-height:1.35}.classroom-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
body.lesson-focus-mode{overflow:auto;background:var(--bg)}
body.lesson-focus-mode .side,body.lesson-focus-mode .top{display:none!important}
body.lesson-focus-mode .shell{display:block!important;min-height:100vh}
body.lesson-focus-mode .main{width:100%!important;min-height:100vh}
body.lesson-focus-mode .content{padding:12px 0 30px!important}
body.lesson-focus-mode .wrap{max-width:none!important;width:100%!important;padding:0 16px!important}
body.lesson-focus-mode .classroom-toolbar{top:0;border-radius:12px;margin-bottom:10px}
body.lesson-focus-mode .lesson-top{min-height:calc(100vh - 94px);display:flex;flex-direction:column;justify-content:center}
.lesson-modal:fullscreen{width:100vw;height:100vh;background:var(--bg)}
.lesson-modal:fullscreen .lesson-modal-head{position:relative;z-index:2}
.lesson-modal:fullscreen .lesson-modal-frame{height:calc(100vh - 62px)}
@media(max-width:900px){.classroom-toolbar{top:58px}.classroom-toolbar .btn{white-space:nowrap}.classroom-actions{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}}
@media(max-width:650px){body.lesson-focus-mode .wrap{padding:0 8px!important}.classroom-toolbar{position:static}.classroom-toolbar>div:first-child{width:100%}.classroom-toolbar .btn{flex:1;min-width:max-content}}

/* Fix 18 — restored complete project tools */
.tool-frame-wrap{width:100%;height:calc(100vh - 108px);min-height:720px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:var(--sh)}
.tool-frame{display:block;width:100%;height:100%;border:0;background:var(--bg)}
@media(max-width:900px){.tool-frame-wrap{height:calc(100vh - 86px);min-height:640px;border-radius:14px}}
@media(max-width:650px){.tool-frame-wrap{height:calc(100vh - 78px);min-height:580px;border-radius:12px}}
.remember-login{display:flex!important;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:#efeaff!important;cursor:pointer}.remember-login input{width:auto!important;accent-color:var(--acc)}.saved-login-accounts{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px}.saved-login-chip{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:6px 10px;font:inherit;font-size:11.5px;cursor:pointer}.saved-login-chip:hover{background:rgba(255,255,255,.2)}

/* 0.3.0 — Student Learning Experience */
.student-home-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,.5fr);gap:22px;align-items:center;background:linear-gradient(135deg,var(--card),var(--ps));border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:var(--sh);overflow:hidden;position:relative}.student-home-hero:after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;background:var(--accs);inset-inline-end:-90px;top:-100px;opacity:.72}.resume-copy{position:relative;z-index:1}.resume-copy h1{margin:10px 0 8px}.resume-copy p{line-height:1.9;margin:0 0 18px}.progress-orb{position:relative;z-index:1;width:176px;height:176px;border-radius:50%;justify-self:center;background:conic-gradient(var(--p) var(--student-progress),var(--line) 0);display:grid;place-items:center;padding:13px}.progress-orb:before{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--card)}.progress-orb div{position:relative;text-align:center;display:grid;gap:2px}.progress-orb b{font-size:34px;color:var(--p)}.progress-orb span{font-size:12px;color:var(--mut)}.skill-map{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 22px}.skill-node{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;box-shadow:var(--sh)}.skill-node>span{font-size:25px}.skill-node>b{font-size:24px}.skill-node small{color:var(--mut)}.student-section{margin-top:24px}.support-card{border-inline-start:4px solid var(--warn)}.course-progress-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:14px}.course-progress-head h1{margin:12px 0 6px}.course-progress-score{min-width:132px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px;text-align:center}.course-progress-score b{display:block;font-size:29px;color:var(--p)}.course-progress-score span{font-size:12px;color:var(--mut)}.unit-learning-card{margin:16px 0}.unit-title{display:flex;gap:12px;align-items:center}.unit-title>span{width:38px;height:38px;border-radius:12px;background:var(--ps);color:var(--p);display:grid;place-items:center;font-weight:800}.learning-row{transition:.18s}.learning-row:hover{transform:translateY(-1px)}.pilot-row{border:1px solid color-mix(in srgb,var(--p) 32%,var(--line));background:linear-gradient(90deg,var(--ps),var(--card) 36%)}
.pilot-journey{max-width:1060px;margin:auto}.pilot-cover{min-height:430px;display:flex;flex-direction:column;justify-content:center}.pilot-cover>p{max-width:760px;line-height:1.9;font-size:16px}.learning-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.learning-steps{overflow-x:auto;flex-wrap:nowrap;padding-bottom:7px;scrollbar-width:thin}.learning-steps .jstep{white-space:nowrap;min-width:max-content}.pilot-stage{border-radius:22px}.stage-kicker{display:inline-block;color:var(--p);font-weight:800;font-size:12px;margin-bottom:7px}.adaptive-banner{display:flex;gap:12px;align-items:center;margin:16px 0;border-radius:16px;padding:13px 15px;border:1px solid var(--line);background:var(--bg)}.adaptive-banner.support{background:var(--nos)}.adaptive-banner.enrichment{background:var(--oks)}.adaptive-banner .adaptive-icon{font-size:28px}.adaptive-banner div{display:grid;gap:2px}.adaptive-banner small{color:var(--mut)}.observation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.observation{border:1px solid var(--line);border-radius:17px;padding:18px;background:var(--bg);display:grid;gap:8px;min-height:112px;align-content:center}.observation b{font-size:20px;color:var(--p)}.observation span{font-size:12.5px;color:var(--mut);line-height:1.6}.discovery-prompt{padding:16px;border-radius:15px;background:var(--accs);font-weight:700;line-height:1.8}.learning-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.retry-choice .opt.no{opacity:.48;text-decoration:line-through}.retry-choice .hint{margin-top:10px}.discovered-rule{font-size:19px;line-height:2;padding:22px;border-radius:18px;background:linear-gradient(135deg,var(--ps),var(--accs));border:1px solid color-mix(in srgb,var(--p) 20%,var(--line));font-weight:750}.explain-steps{display:grid;gap:10px;margin:18px 0}.explain-steps>div{display:flex;gap:12px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}.explain-steps>div>span{flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:var(--p);color:#fff;display:grid;place-items:center;font-weight:800}.explain-steps p{margin:3px 0 0;line-height:1.7}.objective-details{margin-top:14px;border:1px solid var(--line);border-radius:15px;padding:12px 14px;background:var(--card)}.objective-details summary{cursor:pointer;font-weight:750}.objective-details>div{margin-top:12px}.self-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.self-check-grid button{font:inherit;text-align:right;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:18px;cursor:pointer;display:grid;gap:7px;transition:.18s}.self-check-grid button:hover{transform:translateY(-2px);border-color:var(--p);box-shadow:var(--sh)}.self-check-grid span{font-size:30px}.self-check-grid b{font-size:15px}.self-check-grid small{color:var(--mut);line-height:1.6}.result-focus{text-align:center;padding:14px}.result-focus>span{display:block;font-size:48px}.result-focus>b{display:block;font-size:48px;color:var(--p)}.result-focus p{color:var(--mut)}.objective-results{max-width:780px;margin:0 auto 16px}.enrichment-challenge{border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line));background:var(--oks);border-radius:18px;padding:18px;margin:14px 0}.enrichment-challenge p{line-height:1.9;margin:7px 0 0}.journey-done{text-align:center;padding:36px}.journey-done>div:first-child{font-size:58px}.journey-done .lesson-kpis{justify-content:center;margin:16px 0 22px}
@media(max-width:760px){.student-home-hero{grid-template-columns:1fr}.progress-orb{width:145px;height:145px}.skill-map,.observation-grid,.self-check-grid{grid-template-columns:1fr}.course-progress-head{align-items:flex-start}.course-progress-score{min-width:105px}.learning-row{align-items:flex-start}.pilot-row .badge{display:none}.learning-nav{align-items:stretch}.learning-nav .btn{flex:1}}


/* 0.5.2 — Surface Balance: white becomes an accent, not the canvas */
body.role-teacher,body.role-student{
  background:
    radial-gradient(circle at 14% 8%,color-mix(in srgb,var(--p) 9%,transparent),transparent 29%),
    radial-gradient(circle at 88% 78%,color-mix(in srgb,var(--acc) 8%,transparent),transparent 28%),
    linear-gradient(135deg,color-mix(in srgb,var(--ps) 34%,var(--bg)),var(--bg) 48%,color-mix(in srgb,var(--accs) 22%,var(--bg)));
  background-attachment:fixed;
}
body.role-teacher .side,body.role-student .side{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ps) 68%,#fff),color-mix(in srgb,var(--card) 88%,var(--accs)) 58%,color-mix(in srgb,var(--ps) 42%,#fff));
  border-inline-end-color:color-mix(in srgb,var(--p) 14%,var(--line));
  box-shadow:8px 0 34px rgba(62,44,105,.055);
}
body.role-teacher .top,body.role-student .top{
  background:color-mix(in srgb,var(--ps) 38%,rgba(255,255,255,.88));
  border-bottom-color:color-mix(in srgb,var(--p) 12%,var(--line));
}
body.role-teacher .content,body.role-student .content{position:relative}
body.role-teacher .content:before,body.role-student .content:before{
  content:"";position:fixed;inset:64px var(--side) 0 0;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 78% 10%,color-mix(in srgb,var(--p) 7%,transparent),transparent 35%);
}

.teacher-course-page,.student-course-page{position:relative;padding:4px 0 28px}
.teacher-course-page:before,.student-course-page:before{
  content:"";position:absolute;inset:-10px -14px auto;height:150px;border-radius:28px;z-index:-1;
  background:linear-gradient(135deg,color-mix(in srgb,var(--p) 8%,transparent),color-mix(in srgb,var(--acc) 5%,transparent));
}
.teacher-course-page .page-head,.student-course-page .course-progress-head{padding:12px 12px 4px}
.teacher-unit-card,.student-course-page .unit-learning-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--ps) 54%,#fff),color-mix(in srgb,var(--card) 78%,var(--accs)) 62%,color-mix(in srgb,var(--ps) 24%,#fff));
  border-color:color-mix(in srgb,var(--p) 15%,var(--line));
  box-shadow:0 16px 38px rgba(65,46,112,.085);
}
.teacher-unit-card:before,.student-course-page .unit-learning-card:before{
  content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--p),color-mix(in srgb,var(--p) 38%,var(--acc)),var(--acc));opacity:.72;
}
.teacher-unit-card:nth-of-type(3n+2),.student-course-page .unit-learning-card:nth-of-type(3n+2){
  background:linear-gradient(145deg,color-mix(in srgb,var(--accs) 66%,#fff),color-mix(in srgb,var(--card) 82%,var(--ps)));
}
.teacher-course-page .lrow,.student-course-page .learning-row{
  background:color-mix(in srgb,var(--card) 62%,var(--ps));
  border-color:color-mix(in srgb,var(--p) 11%,var(--line));
  box-shadow:0 7px 18px rgba(54,43,91,.045);
}
.teacher-course-page .lrow:nth-child(even),.student-course-page .learning-row:nth-child(even){
  background:color-mix(in srgb,var(--card) 67%,var(--accs));
}
.teacher-course-page .lrow:hover,.student-course-page .learning-row:hover{
  background:color-mix(in srgb,var(--ps) 68%,#fff);border-color:color-mix(in srgb,var(--p) 38%,var(--line));box-shadow:0 11px 25px rgba(73,48,130,.10)
}
.teacher-course-page .lrow .em,.student-course-page .learning-row .em{
  background:linear-gradient(145deg,color-mix(in srgb,var(--p) 16%,#fff),color-mix(in srgb,var(--acc) 10%,#fff));
  border:1px solid color-mix(in srgb,var(--p) 13%,transparent);
}
body.role-teacher .course-card,body.role-student .course-card{
  background:linear-gradient(160deg,color-mix(in srgb,var(--ps) 40%,#fff),color-mix(in srgb,var(--card) 80%,var(--accs)));
  border-color:color-mix(in srgb,var(--p) 13%,var(--line));
}
@media(max-width:900px){body.role-teacher .content:before,body.role-student .content:before{inset:58px 0 0 0}}


/* 0.5.3 — restored theme control + richer non-white surfaces */
.top-theme-picker{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--p) 18%,var(--line));background:color-mix(in srgb,var(--card) 76%,var(--ps));padding:5px 8px;border-radius:999px;color:var(--pd);font-size:12px;font-weight:900}
.top-theme-picker select{border:0;background:transparent;color:var(--pd);font:inherit;font-weight:900;outline:0;cursor:pointer;min-width:78px}
.top-theme-picker option{color:#1f2937;background:#fff}
body.role-teacher .side,body.role-student .side{background:linear-gradient(180deg,color-mix(in srgb,var(--ps) 72%,var(--card)),color-mix(in srgb,var(--card) 74%,var(--accs)) 58%,color-mix(in srgb,var(--ps) 48%,var(--card)))}
body.role-teacher .top,body.role-student .top{background:color-mix(in srgb,var(--card) 74%,var(--ps));}
.teacher-unit-card,.student-course-page .unit-learning-card{background:linear-gradient(145deg,color-mix(in srgb,var(--ps) 58%,var(--card)),color-mix(in srgb,var(--card) 68%,var(--accs)) 62%,color-mix(in srgb,var(--ps) 36%,var(--card)))}
.teacher-unit-card:nth-of-type(3n+2),.student-course-page .unit-learning-card:nth-of-type(3n+2){background:linear-gradient(145deg,color-mix(in srgb,var(--accs) 62%,var(--card)),color-mix(in srgb,var(--card) 70%,var(--ps)))}
.teacher-course-page .lrow,.student-course-page .learning-row{background:color-mix(in srgb,var(--card) 52%,var(--ps))}
.teacher-course-page .lrow:nth-child(even),.student-course-page .learning-row:nth-child(even){background:color-mix(in srgb,var(--card) 54%,var(--accs))}
.teacher-course-page .lrow:hover,.student-course-page .learning-row:hover{background:color-mix(in srgb,var(--ps) 76%,var(--card))}
body.role-teacher .course-card,body.role-student .course-card{background:linear-gradient(160deg,color-mix(in srgb,var(--ps) 50%,var(--card)),color-mix(in srgb,var(--card) 64%,var(--accs)))}
.card:not(.course-card){background:color-mix(in srgb,var(--card) 84%,var(--ps))}
.field input,.field select,.field textarea,.burger{background:color-mix(in srgb,var(--card) 86%,var(--ps))}
@media(max-width:720px){.top-theme-picker{padding:5px 7px}.top-theme-picker span{display:none}.top-theme-picker select{min-width:70px}}

/* فيديو المعلم — نافذة الإضافة */
#vmodal .vrow{display:grid;grid-template-columns:1fr 1.6fr auto;gap:10px;align-items:end;margin-bottom:6px}
#vmodal .vrow .btn{margin-bottom:12px}
#vmodal .vchk{display:flex;gap:8px;align-items:flex-start;margin:12px 0 4px;font-size:13px;font-weight:700}
@media(max-width:650px){#vmodal .vrow{grid-template-columns:1fr}}

/* R4 — الدرس داخل منصة التعلم الحديث، لا كصفحة منفصلة */
.integrated-lesson{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 112px);min-height:680px}
.integrated-lesson-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,color-mix(in srgb,var(--ps) 72%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--p) 18%,var(--line));border-radius:20px;padding:13px 16px;box-shadow:var(--sh)}
.integrated-lesson-title{display:flex;align-items:center;gap:14px;min-width:0}.integrated-lesson-title h2{margin:2px 0 0}.integrated-lesson-title p{margin:3px 0 0}.integrated-lesson-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.integrated-lesson-frame{flex:1;min-height:0;border-radius:22px;overflow:hidden;border:1px solid color-mix(in srgb,var(--p) 18%,var(--line));background:var(--card);box-shadow:var(--sh)}
.integrated-lesson-frame iframe{display:block;width:100%;height:100%;border:0;background:var(--bg)}
.integrated-lesson:fullscreen{width:100vw;height:100vh;min-height:0;padding:10px;background:var(--bg)}
.integrated-lesson:fullscreen .integrated-lesson-head{border-radius:14px}.integrated-lesson:fullscreen .integrated-lesson-frame{border-radius:14px}
body.lesson-focus-mode .integrated-lesson{height:calc(100vh - 32px);min-height:0}
@media(max-width:760px){.integrated-lesson{height:calc(100vh - 88px);min-height:620px}.integrated-lesson-head{align-items:flex-start}.integrated-lesson-title{width:100%;align-items:flex-start}.integrated-lesson-title .btn{flex:none}.integrated-lesson-actions{width:100%;justify-content:space-between}}


/* R10 Fix8 — التوقيع الرسمي المعتمد + تحكم خط/مساحة الدرس. */
.login-product-signature{display:grid;place-items:center;gap:2px;margin-top:2px;padding:10px;border-top:1px solid rgba(255,255,255,.16);color:#d9d2ec;font-size:11.5px;line-height:1.55;text-align:center}.login-product-signature b{color:#fff}.login-product-signature small{font-size:10.5px;color:#c9c1df}.side{display:flex;flex-direction:column}.snav{flex:1}.side-product-signature{margin-top:auto;padding:14px 8px 3px;border-top:1px solid color-mix(in srgb,var(--p) 15%,var(--line));text-align:center;display:grid;gap:1px;color:var(--mut);font-size:10.5px;line-height:1.55}.side-product-signature b{color:var(--pd);font-size:11.5px}.side-product-signature small{font-size:9.5px;color:var(--mut)}
.lesson-view-control{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid color-mix(in srgb,var(--p) 20%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--card) 84%,var(--ps));color:var(--mut);font-size:11px;font-weight:800}.lesson-view-control select{border:0;background:transparent;color:var(--pd);font:inherit;font-weight:900;outline:0;cursor:pointer}.lesson-view-control option{color:#1f2937;background:#fff}
@media(max-width:760px){.lesson-view-control span{display:none}.lesson-view-control{padding:4px 5px}.integrated-lesson-actions{gap:5px}.side-product-signature{padding-bottom:12px}}

/* R10 Fix13 — مركز الأبواب + وضع تحرير محتوى الدرس */
.doors-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.doors-hub-card{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:center;overflow:hidden;position:relative;min-height:238px}
.doors-hub-visual{display:flex;justify-content:center;align-items:center;min-height:205px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--ps) 34%,var(--card)),color-mix(in srgb,var(--bg) 82%,var(--card)));border:1px solid color-mix(in srgb,var(--p) 12%,var(--line));overflow:hidden}
.doors-hub-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.doors-hub-copy h3{margin:7px 0}.doors-hub-copy p{line-height:1.8;margin:0 0 12px}.doors-hub-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.door-progress-line>span{display:block;font-size:.9rem;color:var(--mut);margin-bottom:5px}
.hub-door{--door-wood:#704322;--door-edge:#402613;--door-glow:#f5c66f;--door-metal:#b98743;position:relative;width:126px;height:178px;filter:drop-shadow(0 12px 12px rgba(27,18,37,.18));transition:transform .28s ease,filter .28s ease}.hub-door:not(.is-locked):hover{transform:translateY(-4px) scale(1.025);filter:drop-shadow(0 16px 15px rgba(27,18,37,.24))}
.hub-door__crown{position:absolute;z-index:4;top:0;left:16px;right:16px;height:32px;border-radius:50% 50% 12px 12px/90% 90% 18px 18px;background:linear-gradient(180deg,color-mix(in srgb,var(--door-wood) 75%,white),var(--door-edge));border:3px solid var(--door-edge);display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;box-shadow:inset 0 2px rgba(255,255,255,.18)}
.hub-door__frame{position:absolute;top:19px;left:11px;right:11px;bottom:11px;border:7px solid var(--door-edge);border-top-width:9px;border-radius:48px 48px 8px 8px/36px 36px 8px 8px;background:#15121e;overflow:hidden;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--door-metal) 45%,transparent)}
.hub-door__leaf{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,var(--door-edge),var(--door-wood) 16%,color-mix(in srgb,var(--door-wood) 82%,#c8863a) 75%,var(--door-edge));border-inline:1px solid rgba(255,255,255,.09);transition:transform .35s ease;transform-origin:center left}.hub-door__leaf--r{right:0;transform-origin:right center}.hub-door__leaf--l{left:0;transform-origin:left center}.hub-door:not(.is-locked) .hub-door__leaf--r{transform:perspective(220px) rotateY(-9deg)}.hub-door:not(.is-locked) .hub-door__leaf--l{transform:perspective(220px) rotateY(9deg)}
.hub-door__leaf i{position:absolute;inset:16px 9px;border:2px solid rgba(255,221,154,.28);border-radius:22px 22px 5px 5px;box-shadow:inset 0 0 0 4px rgba(20,10,4,.13)}
.hub-door__leaf--r:after,.hub-door__leaf--l:after{content:"";position:absolute;top:54%;width:7px;height:7px;border-radius:50%;background:var(--door-metal);box-shadow:0 0 0 2px rgba(30,20,10,.35)}.hub-door__leaf--r:after{left:5px}.hub-door__leaf--l:after{right:5px}
.hub-door__lock{position:absolute;z-index:5;left:50%;top:52%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--door-metal) 80%,white),var(--door-metal));border:2px solid color-mix(in srgb,var(--door-metal) 65%,#3b2a14);box-shadow:0 5px 9px rgba(0,0,0,.3);font-size:16px}.hub-door__floor{position:absolute;left:0;right:0;bottom:3px;height:11px;border-radius:50%;background:rgba(28,20,34,.2)}
.hub-door.is-locked{filter:grayscale(.36) opacity(.78) drop-shadow(0 8px 8px rgba(0,0,0,.13))}.hub-door.is-done{--door-glow:#8ee0a5;filter:drop-shadow(0 0 13px color-mix(in srgb,var(--ok) 45%,transparent))}
.hub-door--depth{--door-wood:#4c3a8a;--door-edge:#241d57;--door-metal:#d1bdfc}.hub-door--depth .hub-door__frame{background:radial-gradient(circle at 50% 35%,#7c69ce,#17122f 69%)}.hub-door--depth .hub-door__leaf i{border-color:rgba(222,210,255,.34);box-shadow:inset 0 0 24px rgba(151,126,241,.16)}
.hub-door--lab{--door-wood:#536474;--door-edge:#263541;--door-metal:#72c8c0}.hub-door--lab .hub-door__frame{background:linear-gradient(#2c4650,#13252c)}.hub-door--lab .hub-door__leaf{background:linear-gradient(90deg,#263541,#607583 22%,#455d6a 77%,#263541)}.hub-door--lab .hub-door__leaf i{border-radius:4px;border-color:rgba(143,230,218,.4);box-shadow:inset 0 0 20px rgba(83,212,196,.13)}
@media(max-width:680px){.doors-hub-card{grid-template-columns:1fr}.doors-hub-visual{min-height:188px}.hub-door{transform:scale(.9)}}

.hub-door--logic{--door-wood:#374151;--door-edge:#111827;--door-metal:#d6a84b}.hub-door--logic .hub-door__frame{background:radial-gradient(circle at 50% 34%,#705a32,#17130d 70%)}.hub-door--logic .hub-door__leaf{background:linear-gradient(90deg,#1f2937,#4b5563 22%,#374151 77%,#111827)}.hub-door--logic .hub-door__leaf i{border-color:rgba(246,205,113,.42);box-shadow:inset 0 0 22px rgba(214,168,75,.12)}

.hub-door--communication{--door-wood:#0f766e;--door-edge:#134e4a;--door-metal:#f59e0b}.hub-door--communication .hub-door__frame{background:radial-gradient(circle at 50% 34%,#ecfeff,#164e63 72%)}.hub-door--communication .hub-door__leaf{background:linear-gradient(90deg,#0f766e,#14b8a6 22%,#0891b2 78%,#155e75)}.hub-door--communication .hub-door__leaf i{border-color:rgba(255,255,255,.46);box-shadow:inset 0 0 24px rgba(255,255,255,.14)}.hub-door--communication .hub-door__crown{filter:drop-shadow(0 3px 8px rgba(8,145,178,.28))}