:root{--blue:#003bff;--sky:#5dc2ff;--glass:rgba(255,255,255,.26);--deep:rgba(0,42,120,.28);--white:#fff;--error:rgba(119,27,65,.55)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Tahoma,Arial,sans-serif;background:#0b53e9;color:#fff;overflow-x:hidden}button,input{font-family:inherit}.page{min-height:100vh;position:relative;overflow:hidden;direction:rtl;background-size:cover;background-position:center}.auth-bg{background-image:url(/assets/auth-background.png)}.app-bg{background-image:url(/assets/app-background-blur.png)}.center-page{display:grid;place-items:center}.brand-bar{position:absolute;inset:0 0 auto 0;height:132px;z-index:5;pointer-events:none}.mw-logo-image{position:absolute;left:22px;top:18px;width:190px;max-width:22vw;text-decoration:none;pointer-events:auto;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,80,.25))}.mw-logo-image img{display:block;width:100%;height:auto}.legrand-logo-image{position:absolute;right:36px;top:22px;width:350px;max-width:30vw;text-decoration:none;pointer-events:auto;display:block;filter:drop-shadow(0 4px 16px rgba(0,0,80,.22));transition:.22s transform,.22s filter}.legrand-logo-image:hover{transform:translateY(-2px) scale(1.015);filter:drop-shadow(0 7px 18px rgba(0,0,80,.32))}.legrand-logo-image img{display:block;width:100%;height:auto}.brand-actions{position:absolute;left:26px;top:104px;display:flex;gap:14px;align-items:center;pointer-events:auto}.small-outline,.account-chip{border:3px solid #fff;background:#0040ff40;color:#fff;border-radius:22px;font-weight:900;font-size:18px;padding:8px 18px;box-shadow:0 4px 16px #00005a2e;cursor:pointer}.account-chip{display:flex;gap:10px;align-items:center}.account-icon{display:grid;place-items:center;width:54px;height:54px;background:#fff;color:#0058ff;border-radius:15px;font-size:28px;font-weight:900}.auth-left{position:relative;z-index:2;width:46vw;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 4vw 70px;margin-left:0;margin-right:auto;direction:rtl}.auth-card,.intro-copy{width:min(760px,100%);border:4px solid rgba(255,255,255,.95);border-radius:82px;background:#4ab9ff7a;box-shadow:18px 18px 20px #00000040,inset 0 0 0 1px #ffffff26;padding:30px 34px 34px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;text-align:right}.intro-copy{padding:54px 42px 48px}.auth-card h1,.intro-copy h1{font-size:86px;line-height:.95;margin:0 0 18px;font-weight:900;text-align:center;color:#fff;text-shadow:0 4px 0 rgba(255,255,255,.12)}.intro-copy h2{font-size:44px;margin:0 0 20px;font-weight:900;color:#fff;line-height:1.3;text-align:right}.intro-copy p{font-size:24px;line-height:1.75;margin:0 0 28px;color:#fff;text-shadow:0 2px 8px rgba(0,0,100,.25)}.field{display:block;margin:0 0 16px;color:#fff;font-weight:900;font-size:25px;text-align:right}.field span{display:block;margin-bottom:6px;padding-right:18px;text-shadow:0 2px 5px rgba(0,0,100,.18)}.field input{width:100%;height:72px;border:0;border-radius:32px;background:#fff;color:#6b6b6b;font-size:31px;font-weight:900;padding:0 28px;text-align:right;outline:none;box-shadow:inset 0 0 0 2px #ffffffbf}.field input::placeholder{color:#c8c8c8}.input-shell{position:relative;width:100%}.input-shell input{display:block}.password-field .input-shell input{padding-left:82px}.password-toggle{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:54px;height:54px;border:0;border-radius:50%;background:#0055ff21;color:#226bdf;font-size:25px;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 2px #0055ff1a;transition:.2s transform,.2s background}.password-toggle:hover{transform:translateY(-50%) scale(1.06);background:#0055ff38}.alert{width:100%;border-radius:30px;min-height:78px;margin:18px 0;padding:16px 24px;background:linear-gradient(90deg,#5423b5d9,#cd96b2db);display:grid;place-items:center;text-align:center;font-size:28px;font-weight:900;color:#fff;line-height:1.35}.alert.success{background:linear-gradient(90deg,#178f69d9,#61c3c7cc)}.main-btn{border:0;background:#fff;color:#7cb9ff;border-radius:999px;height:68px;min-width:320px;padding:0 40px;font-size:38px;font-weight:900;cursor:pointer;display:block;margin:18px auto 0;box-shadow:0 8px 18px #00005a29;transition:.25s transform,.25s filter}.main-btn:hover{transform:translateY(-3px);filter:brightness(1.05)}.main-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.main-btn.big{height:88px;min-width:270px;font-size:55px}.link-btn{display:block;background:transparent;border:0;color:#fff;font-size:26px;font-weight:900;margin:22px auto 0;cursor:pointer;text-shadow:0 2px 6px rgba(0,0,80,.24)}.register-card{padding-top:20px;border-radius:72px}.register-card h1{font-size:76px;margin-bottom:10px}.register-card .field{font-size:22px;margin-bottom:8px}.register-card .field input{height:58px;font-size:24px}.register-card .alert{font-size:24px;min-height:64px;margin:14px 0}.register-card .main-btn{height:60px;font-size:32px}.student-box{background:#fff;color:#777;border-radius:28px;padding:18px 28px;margin:18px 0 28px;font-size:34px;font-weight:900;line-height:1.5;text-align:right}.student-box p{margin:0}.app-content{position:relative;z-index:2;min-height:100vh;padding:130px 42px 60px}.center-content{display:grid;place-items:center}.grades-page{text-align:center;width:100%}.grades-page h1{font-size:126px;margin:0 0 70px;color:#fff;text-shadow:0 4px 8px rgba(0,0,80,.22)}.grade-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1900px;margin:auto}.grade-buttons button{height:150px;border:5px solid #fff;border-radius:56px;background:#ffffff2b;color:#fff;font-size:75px;font-weight:900;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:.25s transform,.25s background}.grade-buttons button:hover{transform:scale(1.03);background:#ffffff47}.toast{position:fixed;left:50%;top:148px;bottom:auto;transform:translate(-50%);padding:22px 70px;border-radius:34px;background:#002b96b8;border:3px solid #fff;font-size:40px;font-weight:900;z-index:20;text-align:center;box-shadow:0 18px 28px #00005a38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.back-pill{border:4px solid #fff;border-radius:32px;background:#0042ff4d;color:#fff;font-size:42px;font-weight:900;padding:8px 38px;cursor:pointer;margin:0 0 28px}.back-pill.wide{font-size:38px}.section-title{border:4px solid #fff;border-radius:60px;background:#ffffff2e;padding:22px 40px;text-align:right;font-size:70px;font-weight:900;margin:0 0 50px;color:#fff;box-shadow:0 14px 22px #0000462e;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;direction:rtl}.video-card{border:5px solid #fff;border-radius:34px;overflow:hidden;background:#051e46e0;box-shadow:0 16px 24px #00005059;cursor:pointer;transition:.25s transform,.25s box-shadow}.video-card:hover{transform:translateY(-8px);box-shadow:0 26px 34px #0000506b}.thumb-wrap{height:310px;position:relative;overflow:hidden;background:#0b1f3f}.thumb-wrap img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}.video-badge{position:absolute;top:18px;right:18px;background:#ffffff70;border-radius:18px;padding:12px 22px;color:#fff;font-size:25px;font-weight:900;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.watch-btn{position:absolute;bottom:28px;left:28px;border:0;border-radius:28px;background:#142c52cc;color:#fff;font-size:22px;font-weight:900;padding:12px 18px}.video-meta{display:flex;justify-content:space-between;align-items:center;padding:28px 30px 8px;color:#9fcaff;font-size:24px;font-weight:800}.video-meta b{border:2px solid rgba(125,187,255,.35);background:#3c78d23d;border-radius:22px;padding:8px 18px;color:#71b5ff}.video-card h2{font-size:36px;margin:16px 30px 12px;color:#fff}.video-card p{font-size:22px;margin:0 30px 34px;color:#c9dbf6;line-height:1.6}.video-detail{text-align:right}.video-detail h1{font-size:80px;margin:0 0 5px;color:#fff;text-shadow:0 4px 8px rgba(0,0,80,.2)}.video-detail p{font-size:34px;margin:0 0 24px;color:#fff}.player-frame{width:100%;aspect-ratio:16/9;border:6px solid #fff;border-radius:30px;overflow:hidden;background:#071326;box-shadow:0 18px 36px #00005a59}.player-frame iframe{width:100%;height:100%;border:0;display:block}.profile-card{width:min(1600px,92vw);border:4px solid #fff;border-radius:62px;background:#ffffff38;padding:60px;text-align:right;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 36px #00005a33}.profile-card h1{font-size:110px;margin:0 0 35px;color:#fff;text-align:center}.profile-card p{font-size:56px;font-weight:900;line-height:1.3;margin:14px 0;color:#fff}.loader-box{width:min(520px,90vw);min-height:310px;border:4px solid #fff;border-radius:46px;background:#ffffff47;display:grid;place-items:center;text-align:center;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 30px #00005038;font-size:44px;font-weight:900}.spinner{width:82px;height:82px;border:10px solid rgba(25,45,80,.8);border-top-color:#8fc7ff;border-radius:50%;animation:spin 1s linear infinite;display:block;margin:20px auto}.message-box{width:min(820px,92vw);padding:38px;border:3px solid #fff;border-radius:34px;background:#0046b46b;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.message-box h1{font-size:44px;margin:0 0 14px}.message-box p{font-size:24px;line-height:1.7}.animated-in{animation:fadeUp .45s ease both}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(22px) scale(.99)}to{opacity:1;transform:none}}@media(max-width:1100px){.auth-bg{background-position:65% center}.auth-left{width:100vw;justify-content:center;padding:120px 20px 40px}.auth-card,.intro-copy{max-width:680px;background:#4ab9ff9e}.auth-card h1,.intro-copy h1{font-size:58px}.intro-copy h2{font-size:32px}.intro-copy p{font-size:20px}.legrand-logo-image{right:16px;top:18px;width:210px;max-width:44vw}.mw-logo-image{left:14px;top:16px;width:116px;max-width:28vw}.brand-actions{left:14px;top:82px}.toast{top:116px;font-size:30px;padding:16px 42px}.grade-buttons,.video-grid{grid-template-columns:1fr}.grades-page h1{font-size:62px}.grade-buttons button{font-size:48px;height:110px}.section-title{font-size:42px}.profile-card p{font-size:30px}.profile-card h1{font-size:60px}}.intro-home{border:none;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 0 8px;width:min(835px,100%);text-align:right}.intro-home .hero-title{font-size:112px;text-align:right;margin:0 0 16px;line-height:.88;letter-spacing:-3px;text-shadow:18px 22px 0 rgba(255,255,255,.25),0 8px 18px rgba(0,0,100,.18)}.intro-home h2{font-size:47px;line-height:1.28;margin:0 0 28px;text-align:right;font-weight:900;color:#ffffffeb;text-shadow:0 6px 14px rgba(0,0,130,.18)}.intro-home .intro-arabic-text{width:min(660px,100%);font-size:24px;line-height:1.28;margin:0 0 20px auto;color:#fff;font-weight:500;text-align:right;text-shadow:0 2px 7px rgba(0,0,120,.22)}.intro-home .intro-english-text{width:min(760px,100%);font-size:23px;line-height:1.18;margin:0 0 34px auto;color:#fff;text-align:center;direction:ltr;font-family:Georgia,Times New Roman,serif;text-shadow:0 2px 7px rgba(0,0,120,.22)}.intro-home .main-btn.big{margin:10px auto 0 0;width:270px;height:120px;border-radius:38px;color:#fff;background:#ffffff2e;border:4px solid rgba(255,255,255,.95);box-shadow:0 20px 35px #001e782e,inset 0 0 0 1px #ffffff47;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media(max-width:1100px){.intro-home{background:#4ab9ff66;border:3px solid rgba(255,255,255,.75);border-radius:46px;padding:28px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.intro-home .hero-title{font-size:68px;letter-spacing:0;text-align:center}.intro-home h2{font-size:30px;text-align:center}.intro-home .intro-arabic-text{font-size:18px;text-align:center;margin-inline:auto}.intro-home .intro-english-text{font-size:16px}.intro-home .main-btn.big{margin-inline:auto;height:78px;font-size:42px}}.account-chip{height:54px;min-width:auto;line-height:1;white-space:nowrap;padding:6px 14px}.account-chip img{width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important;object-fit:contain;display:block;flex:0 0 36px;border-radius:8px}.protected-player{position:relative;user-select:none;-webkit-user-select:none}.protected-player iframe{pointer-events:auto}.player-shield{position:absolute;top:0;right:0;bottom:18%;left:0;z-index:4;background:transparent;pointer-events:auto;cursor:default}.viewer-watermark{position:absolute;right:22px;bottom:22px;z-index:5;padding:8px 14px;border-radius:18px;background:#00000057;color:#ffffffb8;font-size:16px;font-weight:800;letter-spacing:.4px;pointer-events:none;mix-blend-mode:screen;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-card b{font-size:0}.video-card b:after{content:"محمي";font-size:22px}.protected-video-shell{width:min(1540px,96vw);margin:0 auto;display:flex;flex-direction:column;gap:14px}.protected-frame{position:relative;width:100%;aspect-ratio:16/9;border:6px solid #fff;border-radius:30px;overflow:hidden;background:#071326;box-shadow:0 18px 36px #00005a59;user-select:none;-webkit-user-select:none}.youtube-api-mount,.youtube-api-mount iframe{width:100%!important;height:100%!important;border:0!important;display:block}.protected-frame .player-shield{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;background:transparent;pointer-events:auto;cursor:default}.protected-frame .viewer-watermark{position:absolute;right:20px;bottom:20px;z-index:6;max-width:58%;padding:7px 14px;border-radius:18px;background:#00000057;color:#ffffffbf;font-size:15px;font-weight:800;letter-spacing:.3px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;mix-blend-mode:screen}.external-video-controls{width:100%;min-height:66px;display:flex;align-items:center;gap:12px;padding:12px 18px;border:3px solid rgba(255,255,255,.92);border-radius:24px;background:linear-gradient(90deg,#0040dc9e,#77c1ff5c,#05165a99);box-shadow:0 16px 32px #00005a38,inset 0 0 18px #ffffff1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);direction:ltr}.ctrl-btn{min-width:96px;border:2px solid rgba(255,255,255,.78);outline:none;cursor:pointer;padding:10px 14px;border-radius:18px;font-size:17px;font-weight:900;color:#fff;background:#ffffff24;box-shadow:0 8px 16px #0000501f;transition:transform .18s ease,background .18s ease,opacity .18s ease;white-space:nowrap}.ctrl-btn:hover:not(:disabled){background:#ffffff40;transform:translateY(-1px)}.ctrl-btn:disabled{opacity:.55;cursor:not-allowed}.play-btn{min-width:126px}.time-box{min-width:132px;text-align:center;color:#fff;font-size:16px;font-weight:900;direction:ltr;text-shadow:0 2px 8px rgba(0,0,90,.35)}.video-progress{flex:1;min-width:170px;height:9px;cursor:pointer;accent-color:#fff;filter:drop-shadow(0 2px 5px rgba(0,0,80,.25))}.video-progress:disabled{opacity:.55;cursor:not-allowed}@media(max-width:800px){.protected-video-shell{width:96vw;gap:10px}.external-video-controls{flex-wrap:wrap;justify-content:center;padding:10px;border-radius:20px}.ctrl-btn{min-width:84px;font-size:14px;padding:8px 10px}.time-box{min-width:112px;font-size:14px}.video-progress{flex-basis:100%;min-width:100%}}