:root{
  --text:rgba(0,0,0,.87);
  --text2:rgba(0,0,0,.6);
  --line:rgba(0,0,0,.38);
  --green:#2E7D32;
  --green-dark:#1B5E20;
  --green-mid:#43A047;
  --green-light:#E8F5E9;
  --bg:#EEEEEE;
  --error:#D32F2F;
  --error-bg:#FDECEA;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,"Noto Sans Arabic",sans-serif;font-size:16px;line-height:1.5;color:var(--text);background:var(--bg);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;max-width:1200px;width:100%;margin:0 auto}
.lang-btn{background:none;border:0;cursor:pointer;font:inherit;font-size:14px;color:var(--text);padding:8px 10px;border-radius:20px}
.lang-btn:hover{background:rgba(0,0,0,.06)}
.back{font-size:14px;color:var(--text2)}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 16px 48px}
.card{background:#fff;width:100%;max-width:400px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.2),0 1px 1px rgba(0,0,0,.14);padding:40px 32px 32px}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:32px;text-decoration:none!important}
.logo img{width:40px;height:40px;border-radius:9px}
.logo-text{display:flex;flex-direction:column;line-height:1;direction:ltr}
.logo-text b{font-family:Inter,sans-serif;font-size:26px;font-weight:600;letter-spacing:.5px;color:var(--green)}
.logo-text small{font-size:8.5px;letter-spacing:2px;color:var(--green);margin-top:4px}
h1{font-size:20px;font-weight:500;text-align:center;margin-bottom:8px}
.sub{font-size:14px;color:var(--text2);text-align:center;margin-bottom:24px}
.field{position:relative;margin-bottom:24px}
.field input{width:100%;border:0;border-bottom:1px solid var(--line);padding:22px 0 6px;font:inherit;font-size:16px;color:var(--text);background:transparent;outline:none;border-radius:0}
.field input:focus{border-bottom:2px solid var(--green);padding-bottom:5px}
.field label{position:absolute;inset-inline-start:0;top:22px;color:var(--text2);pointer-events:none;transition:all .15s}
.field input:focus + label,.field input:not(:placeholder-shown) + label{top:0;font-size:12px}
.field input:focus + label{color:var(--green)}
.field.err input{border-bottom-color:var(--error)}
.field.err label{color:var(--error)}
.field .msg{font-size:12px;color:var(--error);margin-top:4px;display:none}
.field.err .msg{display:block}
.eye{position:absolute;inset-inline-end:0;top:18px;background:none;border:0;cursor:pointer;padding:4px;color:var(--text2)}
.eye svg{width:22px;height:22px}
.field.pw input{padding-inline-end:36px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;margin:-4px 0 24px;cursor:pointer;user-select:none}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--green);flex:0 0 auto}
.check.err{color:var(--error)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border:0;border-radius:4px;background:var(--green-mid);color:#fff;font:inherit;font-size:15px;font-weight:500;letter-spacing:.5px;cursor:pointer;box-shadow:0 2px 2px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.12);transition:background .2s}
.btn:hover{background:var(--green)}
.btn:disabled{opacity:.6;cursor:default}
.btn-google{background:#fff;color:var(--text);border:1px solid rgba(0,0,0,.2);box-shadow:none}
.btn-google:hover{background:#F5F5F5}
.btn-google svg{width:18px;height:18px}
.or{display:flex;align-items:center;gap:12px;color:var(--text2);font-size:13px;margin:20px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.12)}
.alert{display:none;font-size:14px;padding:10px 12px;border-radius:4px;margin-bottom:20px;background:var(--error-bg);color:var(--error)}
.alert.show{display:block}
.alert.ok{background:var(--green-light);color:var(--green-dark)}
.link-center{display:block;text-align:center;margin-top:20px;font-size:15px}
.bottom-text{text-align:center;margin-top:24px;font-size:15px;color:var(--text2)}
.foot{text-align:center;font-size:13px;color:var(--text2);padding:16px}
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:none}
.loading .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:480px){main{padding:0;align-items:stretch}.card{padding:32px 20px 24px;box-shadow:none;border-radius:0;max-width:none}}