/* Shared homepage palette; normal document flow keeps keyboards and CAPTCHA usable. */
html:has(.auth-page){height:auto;min-height:100%;background:#102e17}
body.auth-page{--green-700:#365d29;--green-500:#496f32;--green-400:#8ec641;--text:#253b27;--muted:#687861;--border:#d9e4d1;background:radial-gradient(ellipse at 50% 30%,#31582b55,transparent 65%),#102e17;color:var(--text);min-height:100vh;min-height:100dvh;height:auto;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;font-family:Tajawal,sans-serif}
.auth-page .shapes{display:none}.auth-page .navbar,.auth-home{width:100%;background:transparent;backdrop-filter:none;padding:16px 24px;position:relative;flex-shrink:0}.auth-page .navbar-content{max-width:1200px}.auth-page .brand img{width:44px;height:44px;object-fit:contain;filter:none}.auth-page .nav-btn,.auth-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid #bcd3b64d;border-radius:50%;background:#ffffff0d;color:#e6efdf;text-decoration:none;padding:10px}.auth-page .nav-btn span{display:none}.auth-home{display:flex;align-items:center;justify-content:space-between}.auth-home img{display:block;object-fit:contain}
.auth-page .login-wrapper{width:100%;flex:1;padding:24px 16px 40px;align-items:center}.auth-page .login-card,.auth-page .verify-card{background:#f7faf2;border:1px solid #cbdcc3;border-radius:24px;box-shadow:0 20px 60px #0003;backdrop-filter:none;animation:none;width:100%;max-width:420px;padding:28px 24px}.auth-page .icon-badge,.auth-page .logo-wrap{box-shadow:none;background:#e8f1dc;color:#456b30}.auth-page .icon-badge i,.auth-page .logo-wrap i{color:#456b30}.auth-page .logo-wrap::before{display:none}.auth-page .btn-login,.auth-page .btn-register{background:#456b30;box-shadow:none}.auth-page .btn-soft{color:#456b30;border-color:#cadcbd;background:#edf4e4}.auth-page .input-wrapper input{background:#fff;font-size:16px}.auth-page :focus-visible{outline:3px solid #8ec641;outline-offset:3px}
body.auth-verify{justify-content:flex-start;gap:20px}.auth-verify .verify-card{margin:auto auto 40px;width:calc(100% - 32px)}.auth-verify .logo-wrap{width:58px;height:58px;margin-bottom:18px}.auth-verify .why-box,.auth-verify .instruction,.auth-verify .footer-info{display:none}.auth-verify .captcha-wrap{overflow:visible}.auth-verify .back-btn{border-color:#cfddc5;color:#456b30}.auth-page .security-badge{color:#687861}
@media(max-width:480px){.auth-page .navbar,.auth-home{padding:12px 16px}.auth-page .login-wrapper{padding:12px 12px 24px;align-items:center}.auth-page .login-card,.auth-page .verify-card{border-radius:20px;padding:24px 16px}.auth-verify .verify-card{width:calc(100% - 24px);margin:12px auto 24px}.auth-page .login-title{font-size:23px}}
body.auth-page.app-mode,body.auth-signup.app-mode{min-height:100dvh;display:flex;flex-direction:column}
body.app-mode .login-wrapper,body.app-mode .page-wrap{flex:1;display:flex;align-items:center;justify-content:center}
@media(max-width:360px){.auth-page .verify-card{padding:20px 8px}.auth-verify .g-recaptcha{transform:scale(.88);transform-origin:center center}.auth-verify .captcha-wrap{display:flex;justify-content:center}}
@media(prefers-reduced-motion:reduce){.auth-page *{animation:none!important;transition:none!important}}

/* Center the verification card and the fixed-width Google checkbox independently of RTL. */
body.auth-verify{gap:0}.auth-verify-wrapper{display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:24px 16px 40px}.auth-verify .verify-card{width:100%;margin:0}.auth-verify .captcha-wrap{display:flex;justify-content:center;align-items:center;direction:ltr;width:100%;padding-inline:0}.auth-verify .g-recaptcha{flex:0 0 304px;width:304px;max-width:none;transform:none;margin-inline:0}.auth-verify .g-recaptcha>div{margin-inline:auto}
@media(max-width:480px){.auth-verify-wrapper{padding:12px 12px 24px}.auth-verify .verify-card{margin:0;width:100%}}
@media(max-width:360px){.auth-verify .g-recaptcha{transform:scale(.88);transform-origin:center}}

/* Center against the viewport, without adding the navigation height to the midpoint.
   Symmetric space keeps the card below the header on short screens with normal scrolling. */
.auth-verify .auth-home{position:absolute;inset:0 0 auto;z-index:1}
.auth-verify .auth-verify-wrapper{flex:none;min-height:100vh;min-height:100dvh;padding:92px 16px;box-sizing:border-box}
@media(max-width:480px){.auth-verify .auth-verify-wrapper{padding:80px 12px}}

/* The image challenge is a separate Google iframe, not the centered checkbox. */
.auth-verify .auth-recaptcha-challenge{
  position:fixed!important;left:var(--challenge-x)!important;top:var(--challenge-y)!important;
  right:auto!important;bottom:auto!important;margin:0!important;
  width:var(--challenge-width)!important;height:var(--challenge-height)!important;
  transform:translate(-50%,-50%) scale(var(--challenge-scale))!important;transform-origin:center!important;
}
.auth-verify .auth-recaptcha-challenge-host>.g-recaptcha-bubble-arrow{display:none!important}

/* Registration shares the current sign-in surface and palette. */
.auth-signup{--g700:#365d29;--g500:#496f32;--g400:#8ec641}
.auth-signup .page-wrap{overflow:visible;align-items:center}
.auth-signup .card{height:auto}
.auth-signup .card-title{font-size:24px;color:#365d29}
.auth-signup .card-sub{font-size:14px;line-height:1.6}
.auth-signup .icon-circle{background:#e8f1dc;color:#456b30;box-shadow:none}
.auth-signup .btn-reg{background:#456b30;box-shadow:none}
.auth-signup .btn-login{background:#edf4e4;color:#456b30;border:1px solid #cadcbd;box-shadow:none}
.auth-signup .iw input{background:#fff;font-size:16px}
.auth-signup .sec-lbl{color:#496f32}
.auth-signup .nav-home{font-size:0}.auth-signup .nav-home i{font-size:18px}
@media(max-width:480px){.auth-signup .page-wrap{align-items:center}}

/* Password recovery uses the same current authentication shell. */
html:has(body.auth-forgot){overflow-y:auto}
.auth-forgot{display:flex;flex-direction:column}
.auth-forgot .hero-background,.auth-forgot .funky-shapes{display:none}
.auth-forgot .navbar__row{width:100%;max-width:1200px;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:space-between}
.auth-forgot .brand{gap:10px;color:#e6efdf}.auth-forgot .brand__logo{width:44px;height:44px;object-fit:contain;filter:none}.auth-forgot .brand__name{font-size:20px}
.auth-forgot .btn--parent{font-size:0;width:44px;height:44px;padding:10px;border-radius:50%;background:#ffffff0d;border:1px solid #bcd3b64d;box-shadow:none;transform:none}.auth-forgot .btn--parent::before{display:none}.auth-forgot .btn--parent i{font-size:18px}
.auth-forgot .register-wrapper{position:static;inset:auto;z-index:auto;flex:1;min-height:0;overflow:visible;margin:0}
.auth-forgot .register-card{margin:auto;max-width:420px;padding:28px 24px;border-radius:24px;background:#f7faf2;border:1px solid #cbdcc3;box-shadow:0 20px 60px #0003;backdrop-filter:none;animation:none}
.auth-forgot .register-icon{width:58px;height:58px;margin-bottom:18px;background:#e8f1dc;color:#456b30;box-shadow:none;animation:none}.auth-forgot .register-icon i{color:#456b30;font-size:24px}
.auth-forgot .register-title{font-size:24px;color:#365d29}.auth-forgot .register-subtitle{font-size:14px;line-height:1.6;color:#687861}
.auth-forgot .input-group input{background:#fff;font-size:16px}.auth-forgot .btn-primary{background:#456b30;box-shadow:none}.auth-forgot .btn-secondary{width:auto;align-self:center;padding:9px 24px;background:#edf4e4;color:#456b30;border:1px solid #cadcbd;box-shadow:none}
@media(max-width:480px){.auth-forgot .register-card{padding:24px 16px;border-radius:20px}.auth-forgot .navbar__row{padding:0}.auth-forgot .register-wrapper{align-items:flex-start}}