:root { font-family:"Noto Kufi Arabic",system-ui,sans-serif; color:#143a37; background:#eaf3f1; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 12%,rgba(38,165,150,.18),transparent 30%),linear-gradient(135deg,#f5faf9,#e7f1ef); }
button,input,select { font:inherit; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(330px,.85fr) minmax(420px,1.15fr); }
.login-intro { display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,7vw,110px); color:white; background:linear-gradient(145deg,#0a4b47,#073532); position:relative; overflow:hidden; }
.login-intro::after { content:""; position:absolute; width:380px; height:380px; left:-170px; bottom:-150px; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.02); }
.login-logo { display:block; width:min(390px,100%); height:auto; margin-bottom:30px; object-fit:contain; }
.login-intro h1 { margin:0; font-size:clamp(30px,4vw,48px); line-height:1.45; }
.login-intro > p:last-of-type { max-width:580px; margin:18px 0 0; color:rgba(255,255,255,.7); font-size:14px; line-height:2; }
.security-card { display:flex; gap:13px; align-items:center; max-width:480px; margin-top:35px; padding:16px 18px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.07); backdrop-filter:blur(10px); }
.security-card > span { color:#74d8cc; }.security-card strong,.security-card small { display:block; }.security-card strong { font-size:13px; }.security-card small { margin-top:5px; color:rgba(255,255,255,.62); font-size:11px; line-height:1.8; }
.login-card { width:min(520px,calc(100% - 40px)); margin:auto; padding:38px; border:1px solid rgba(124,164,158,.25); border-radius:24px; background:rgba(255,255,255,.92); box-shadow:0 30px 80px rgba(25,75,69,.13); }
.login-card header small { color:#0d766f; font-size:12px; font-weight:700; }.login-card h2 { margin:6px 0 7px; font-size:26px; }.login-card header p { margin:0 0 27px; color:#6d8280; font-size:12px; }
form { display:grid; gap:17px; } label { display:grid; gap:8px; } label > span { color:#536d6a; font-size:12px; font-weight:600; }
select,input { width:100%; min-height:48px; border:1px solid #d7e5e2; border-radius:11px; padding:0 13px; color:#173c39; background:white; outline:none; font-size:13px; }
select:focus,input:focus { border-color:#58aaa1; box-shadow:0 0 0 4px rgba(13,118,111,.1); }
.password-field { position:relative; }.password-field input { padding-left:70px; }.password-field button { position:absolute; left:7px; top:7px; height:34px; border:0; border-radius:8px; padding:0 11px; color:#0d766f; background:#e8f5f3; font-size:10px; }
.remember { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:9px; }.remember input { width:17px; min-height:17px; accent-color:#0d766f; }.remember span { font-size:11px; font-weight:500; }
.login-submit { min-height:50px; border:0; border-radius:12px; color:white; background:linear-gradient(135deg,#10877e,#075f59); font-size:13px; font-weight:700; box-shadow:0 12px 25px rgba(13,118,111,.22); cursor:pointer; }.login-submit:disabled { opacity:.55; cursor:wait; }
.login-error,.development-hint { margin:0; padding:10px 12px; border-radius:9px; font-size:11px; line-height:1.7; }.login-error { color:#9a3434; background:#fff0f0; }.development-hint { color:#72571b; background:#fff7df; direction:ltr; text-align:center; }.hidden { display:none; }
.login-card footer { margin-top:25px; padding-top:18px; border-top:1px solid #e3ecea; color:#879895; text-align:center; font-size:10px; }
@media (max-width:850px) { .login-shell { grid-template-columns:1fr; }.login-intro { min-height:300px; padding:38px 28px; }.login-intro h1 { font-size:30px; }.security-card { display:none; }.login-card { margin:28px auto; } }
@media (max-width:480px) { .login-intro { min-height:240px; }.login-logo { width:240px; margin-bottom:18px; }.login-intro > p:last-of-type { display:none; }.login-card { width:calc(100% - 24px); padding:25px 20px; border-radius:18px; } }