@font-face{font-family:"Noto Kufi Arabic";src:url("../fonts/NotoKufiArabic-variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Sans";src:url("../fonts/NotoSans-variable.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Sans";src:url("../fonts/NotoSans-Italic-variable.ttf") format("truetype");font-style:italic;font-weight:100 900;font-display:swap}
@font-face{font-family:"Amiri";src:url("../fonts/Amiri-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{--green:#07503f;--deep:#064638;--gold:#c6a660;--cream:#f9f6ef;--ink:#233d34}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a,input{outline-offset:3px}
.login-shell{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 60% 43%,#fffefa 0,#f9f6ef 74%)}
.shape-defs{position:absolute}
.login-art{position:absolute;inset:0 auto 0 0;width:42%;overflow:hidden;background:var(--deep);clip-path:url(#art-shape);z-index:1}
.mosque-scene{width:100%;height:100%;display:block;object-fit:cover;object-position:left center}
.art-motif{position:absolute;inset:auto 0 0;height:40%;background:url("../svg/pattern.svg") repeat;background-size:88px 88px;opacity:.09;mask-image:linear-gradient(transparent,#000)}
.art-phrase{position:absolute;left:4%;right:43%;bottom:19.5%;color:#d9c18c;text-align:center;font-family:"Amiri","Noto Kufi Arabic",serif;font-size:clamp(40px,3.8vw,56px);font-weight:400;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.24)}
.phrase-flourish{display:flex;align-items:center;justify-content:center;gap:8px;width:110px;height:24px;margin:36px auto 0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.15))}
.phrase-flourish img{display:block;width:27px;height:27px;object-fit:contain;filter:brightness(0) saturate(100%) invert(88%) sepia(28%) saturate(420%) hue-rotate(354deg) brightness(95%)}
.flourish-rule{display:block;width:29px;height:1px;background:#d7bc7c;transform:rotate(-8deg)}
.flourish-rule:last-child{transform:rotate(8deg)}
.arch-edge{position:absolute;inset:0 auto 0 0;width:42%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.arch-edge path{fill:none;stroke:var(--gold);stroke-width:3;vector-effect:non-scaling-stroke}
.login-content{position:relative;z-index:2;width:71%;min-height:100vh;min-height:100dvh;margin-left:auto;padding:60px 5% 70px 11%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.language-switch{position:absolute;top:22px;inset-inline-start:5%;z-index:4;display:flex;gap:3px;padding:4px;border:1px solid #e3e2d9;border-radius:100px;background:rgba(255,255,255,.87);box-shadow:0 5px 18px rgba(34,54,44,.06)}
.language-switch button{border:0;border-radius:100px;background:transparent;color:#536d60;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer}
.language-switch button[aria-pressed="true"]{background:var(--green);color:#fff}
.language-switch [data-language="ar"]{font-family:"Noto Kufi Arabic",Tahoma,sans-serif}
.language-switch [data-language="en"]{font-family:"Noto Sans",Arial,sans-serif}
.content-pattern{position:absolute;inset:0;pointer-events:none;background:url("../svg/pattern.svg") repeat;background-size:108px 108px;opacity:.085;mask-image:radial-gradient(ellipse at 100% 10%,#000 0,transparent 37%),radial-gradient(ellipse at 3% 90%,#000 0,transparent 35%)}
.site-identity,.login-card{position:relative;z-index:1}
.site-identity{text-align:center;color:var(--green)}
.site-identity img{display:block;margin:0 auto 6px;width:80px;height:80px}
.site-identity p{font-size:clamp(18px,1.8vw,23px);font-weight:800;margin:0;line-height:1.5}
.login-card{width:min(100%,500px);padding:26px 35px 33px;border-radius:17px;background:rgba(255,255,255,.87);box-shadow:0 20px 56px rgba(64,56,39,.095);text-align:center}
.login-card h1{margin:0;color:var(--green);font-size:clamp(33px,3.7vw,49px);font-weight:800;letter-spacing:-.05em;line-height:1.35}
.login-subtitle{margin:1px 0 20px;color:#67747a;font-size:17px;font-weight:600}
.landing-card{padding-block:43px 47px}
.landing-message{max-width:370px;margin:15px auto 0;color:#67747a;font-size:17px;font-weight:600;line-height:2}
.error-card{padding-block:29px 35px}
.error-code{display:block;width:max-content;margin:0 auto 9px;padding:3px 16px;border:1px solid #e9dec5;border-radius:100px;background:#faf6ec;color:#a27d3e;font-family:"Noto Sans",Arial,sans-serif;font-size:15px;font-weight:800;letter-spacing:.08em}
.error-card h1{font-size:clamp(26px,2.7vw,36px);letter-spacing:0}
.error-message{max-width:390px;margin:11px auto 0;color:#67747a;font-size:15px;font-weight:600;line-height:2}
.teacher-identity{display:flex;align-items:center;gap:11px;min-height:55px;padding:8px 13px;margin-bottom:22px;border-radius:10px;background:#edf0e9;color:var(--green);font-size:16px;font-weight:700;text-align:right}
.teacher-icon{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;flex:none;color:#165c4e;font-size:19px}
.login-form{text-align:right}
.login-form label{display:block;margin-bottom:7px;font-size:14px;font-weight:700;color:#24342e}
.password-wrap{position:relative}
.password-wrap input{width:100%;height:51px;padding:10px 46px 10px 15px;border:1px solid #cfd5d3;border-radius:9px;background:#fff;color:#263c32;font-size:17px;direction:rtl;transition:border-color .2s,box-shadow .2s}
.password-wrap input::placeholder{color:#1f2d2b;letter-spacing:3px;opacity:1}
.password-wrap input:focus{border-color:#3b836b;box-shadow:0 0 0 3px rgba(40,109,80,.13);outline:none}
.lock-icon{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:21px;height:21px;color:#879194;font-size:17px;text-align:center;pointer-events:none}
.login-submit{display:block;width:100%;min-height:53px;margin-top:20px;border:1.5px solid var(--gold);border-radius:9px;background:linear-gradient(#0b5a49,#084b3e);color:#fff;font-size:22px;font-weight:700;cursor:pointer;box-shadow:0 6px 14px rgba(15,72,53,.12);transition:filter .2s,transform .2s}
.login-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.help-link{display:block;width:max-content;margin:18px auto 0;color:#a68341;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.help-message{display:none;margin:13px 0 0;padding:10px;border-radius:8px;background:#f7f0e2;color:#6b5d40;font-size:12px}
.help-message:target{display:block}
[dir="ltr"] body{font-family:"Noto Sans",Arial,sans-serif}
[dir="ltr"] .login-art{left:auto;right:0;clip-path:url(#art-shape-ltr)}
[dir="ltr"] .mosque-scene{transform:scaleX(-1)}
[dir="ltr"] .arch-edge{left:auto;right:0;transform:scaleX(-1)}
[dir="ltr"] .art-phrase{left:43%;right:4%;font-family:"Noto Sans",Arial,sans-serif;font-size:clamp(27px,2.7vw,39px);line-height:1.35}
[dir="ltr"] .login-content{margin-left:0;margin-right:auto;padding-left:5%;padding-right:11%}
[dir="ltr"] .content-pattern{transform:scaleX(-1)}
[dir="ltr"] .login-form,[dir="ltr"] .teacher-identity{text-align:left}
[dir="ltr"] .password-wrap input{direction:ltr;padding-left:46px;padding-right:15px}
[dir="ltr"] .lock-icon{left:15px;right:auto}
@media(max-width:900px) and (min-width:701px){.login-art,.arch-edge{width:38%}.login-content{width:74%;padding-left:9%;padding-right:4%}.site-identity img{width:68px;height:68px}.login-card{padding:25px}.login-subtitle{font-size:15px}}
@media(max-width:900px) and (min-width:701px){[dir="ltr"] .login-content{padding-left:4%;padding-right:9%}}
@media(max-width:700px){
  .login-shell{background:var(--deep)}
  .login-art{width:100%;clip-path:none}
  .mosque-scene{opacity:.45;object-position:left bottom}
  .art-motif{height:100%;opacity:.035;mask-image:none}
  .art-phrase,.arch-edge{display:none}
  .login-content{width:calc(100% - 24px);min-height:calc(100dvh - 86px);margin:86px auto 0;padding:65px 14px 120px;justify-content:flex-start;gap:24px;border-top:3px solid var(--gold);border-radius:50% 50% 0 0 / 12% 12% 0 0;background:var(--cream)}
  .language-switch{position:fixed;top:15px;inset-inline-start:15px}
  .login-content::after{content:"";position:absolute;left:0;right:0;bottom:0;height:105px;background:url("../svg/skyline.svg") center bottom/100% auto no-repeat;opacity:.85;pointer-events:none}
  .content-pattern{background-size:83px 83px;opacity:.05;mask-image:linear-gradient(#000,transparent 40%,transparent 75%,#000)}
  .site-identity img{width:69px;height:69px;margin-bottom:4px}
  .site-identity p{font-size:15px;white-space:nowrap}
  .login-card{width:min(100%,405px);padding:25px 17px 26px;border-radius:15px}
  .login-card h1{font-size:34px}
  .login-subtitle{font-size:13px;margin-bottom:18px}
  .landing-card{padding-block:36px 39px}
  .landing-message{font-size:14px;line-height:2}
  .error-card{padding-block:26px 31px}
  .error-card h1{font-size:26px}
  .error-message{font-size:13px}
  .teacher-identity{min-height:49px;font-size:13px;gap:8px;margin-bottom:20px;padding:7px 10px}
  .teacher-icon{width:20px;height:20px;font-size:17px}
  .login-form label{font-size:13px}
  .password-wrap input{height:48px;font-size:15px}
  .login-submit{min-height:49px;font-size:19px}
  .help-link{font-size:12px;margin-top:17px}
  [dir="ltr"] .login-art{clip-path:none}
  [dir="ltr"] .login-content{margin:86px auto 0;padding:65px 14px 120px}
  [dir="ltr"] .site-identity p{white-space:normal}
}
@media(max-width:380px){.login-content{padding-left:9px;padding-right:9px}.login-card{padding-inline:13px}.site-identity p{font-size:13px}.teacher-identity{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.login-submit{transition:none}}

.language-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}