@font-face{font-family:YekanBakh;src:url('/fonts/yekan-bakh/YekanBakh-VF.woff2') format('woff2');font-display:swap;font-weight:100 900}
@font-face{font-family:Figtree;src:url('/fonts/Figtree-Variable.ttf') format('truetype');font-display:swap;font-weight:300 900}
:root{--navy:#102f6a;--deep:#082958;--ink:#082858;--muted:#607087;--field:#ccd9ee;--font:Figtree,Arial,sans-serif;color-scheme:light}
html[dir=rtl]{--font:YekanBakh,Tahoma,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}[hidden]{display:none!important}
:focus-visible{outline:3px solid #5ba7ff;outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-to-form{position:fixed;z-index:20;inset-inline-start:16px;top:12px;padding:11px 16px;border-radius:10px;color:var(--ink);background:white;transform:translateY(-180%)}
.skip-to-form:focus{transform:translateY(0)}
.login-stage{position:relative;min-height:100vh;min-height:100dvh;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 20px 32px;overflow:hidden;background:#092c60}
.login-stage-waves{position:absolute;inset:0;z-index:-1;background-image:url('./login-waves-desktop.svg');background-repeat:no-repeat;background-position:center;background-size:cover;pointer-events:none}
.login-card{position:relative;display:flex;flex-direction:column;align-items:center;width:min(100%,474px);padding:52px 41px 46px;border-radius:30px;border:1px solid rgba(255,255,255,.74);background:linear-gradient(145deg,rgba(251,253,255,.95),rgba(238,245,255,.91));box-shadow:0 24px 75px rgba(0,27,70,.2),inset 0 1px rgba(255,255,255,.85);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}
.login-mobile-art{display:none}
.login-logo{display:inline-flex;align-items:center;justify-content:center;gap:10px;direction:ltr;color:#092b60;font-family:Figtree,Arial,sans-serif;font-weight:800;font-size:32px;line-height:1;letter-spacing:-.045em;white-space:nowrap}
.login-logo img{width:45px;height:45px;object-fit:contain;flex:none}
.login-card h1{font-size:26px;font-weight:820;line-height:1.4;margin:34px 0 3px;text-align:center;letter-spacing:0}
.login-lead{font-size:14px;line-height:1.8;margin:0 0 29px;color:#4f647f;text-align:center;font-weight:500}
#login-form{width:100%;margin:0}
.login-fields{display:grid;gap:13px}
.input-shell{position:relative;min-width:0}
.input-shell input{display:block;width:100%;height:55px;padding-inline:48px 51px;border:1.5px solid var(--field);border-radius:11px;outline:0;background:rgba(255,255,255,.43);color:#173758;font-size:14px;font-weight:500;transition:border-color .18s,box-shadow .18s;text-align:start}
.input-shell input::placeholder{color:#425677;opacity:1}
.input-shell input:focus{border-color:#316fbb;box-shadow:0 0 0 3px rgba(40,106,183,.12);background:#fff}
.input-shell input[aria-invalid=true]{border-color:#c63d56}
.input-start-icon{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:#304d70;pointer-events:none}
.toggle-password{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:7px;border:none;border-radius:8px;color:#304d70;background:transparent;display:grid;place-items:center}
.toggle-password:hover{background:#e7effd}
.login-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0 23px;min-height:24px}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#3b4f6b;font-weight:500;white-space:nowrap;cursor:pointer}
.remember input{appearance:none;flex:none;margin:0;width:19px;height:19px;border:1.8px solid #7185a4;background:rgba(255,255,255,.65);border-radius:4px;display:grid;place-items:center;cursor:pointer}
.remember input:checked{background:var(--navy);border-color:var(--navy)}
.remember input:checked::before{content:'✓';color:#fff;font-size:13px;font-family:Arial,sans-serif;font-weight:700}
.forgot{font-size:13px;border:0;background:transparent;color:#00459a;font-weight:750;padding:5px 0;white-space:nowrap}
.forgot:hover{text-decoration:underline;text-underline-offset:4px}
.login-submit{width:100%;height:55px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;border:0;border-radius:10px;background:linear-gradient(110deg,#06295b,#0c3979);box-shadow:0 6px 15px rgba(7,43,103,.12);font-size:16px;font-weight:800;transition:filter .18s,transform .18s}
.login-submit:hover{filter:brightness(1.13);transform:translateY(-1px)}
.login-submit:active{transform:translateY(0)}
.login-submit svg{transform:scaleX(1)}
html[dir=rtl] .login-submit svg{transform:none}
.login-message{margin:14px 0 0;padding:12px;border-radius:10px;background:#e7f0ff;color:#194676;border:1px solid #b6cbea;text-align:center;font-size:13px;line-height:1.7}
.login-message[data-kind=error]{background:#fff0f2;color:#9a2540;border-color:#f0b5c1}
.login-footer{display:flex;align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,.77);font-size:12px;padding:17px 8px 0}
.login-footer a:hover{text-decoration:underline;text-underline-offset:3px}
#recovery-dialog{direction:inherit;max-width:min(430px,calc(100vw - 34px));padding:35px 28px 26px;border:1px solid #d7e2f3;border-radius:19px;color:var(--ink);box-shadow:0 25px 90px #051a3d6e;background:white}
#recovery-dialog::backdrop{background:#071d49b3;backdrop-filter:blur(4px)}
#recovery-dialog h2{font-size:23px;margin:0 0 12px}
#recovery-dialog p{font-size:15px;line-height:1.9;color:var(--muted);margin:0 0 25px}
.dialog-close{position:absolute;inset-inline-end:13px;top:11px;width:33px;height:33px;display:grid;place-items:center;background:transparent;border:0;color:#647796}
.dialog-dismiss{color:white;background:var(--navy);border:0;border-radius:9px;padding:10px 23px;font-weight:700}
@media(max-width:700px){
  .login-stage{display:block;min-height:100vh;min-height:100dvh;padding:0 20px 104px;background:linear-gradient(180deg,#f2f7ff 0%,#fff 35%,#fff 100%)}
  .login-stage-waves{background-image:url('./login-waves-mobile.svg');background-size:100% 180px;background-position:bottom center;inset:0;opacity:1}
  .login-card{width:min(100%,420px);margin:0 auto;padding:36px 0 27px;box-shadow:none;border:0;background:transparent;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .login-mobile-art{display:block;width:min(100%,228px);height:auto;margin:0 auto 8px}
  .login-mobile-art img{width:100%;height:auto}
  .login-logo{font-size:30px;gap:9px}
  .login-logo img{width:40px;height:40px}
  .login-card h1{margin:22px 0 2px;font-size:24px}
  .login-lead{font-size:13px;margin-bottom:27px}
  .login-fields{gap:12px}
  .input-shell input{height:55px;font-size:14px;padding-inline:44px 46px}
  .login-actions{margin:13px 0 22px}
  .remember,.forgot{font-size:12.5px}
  .login-submit{height:56px}
  .login-footer{color:#284b7a;position:relative;margin:0 auto;font-size:12px;padding-top:10px}
}
@media(max-width:360px){
  .login-stage{padding-inline:15px}
  .login-card{padding-top:35px}
  .login-card h1{font-size:22px}
  .login-lead{font-size:12px}
  .remember,.forgot{font-size:11.5px}
  .login-actions{gap:5px}
}
@media(min-width:701px) and (max-height:720px){
  .login-stage{padding-block:20px}
  .login-card{padding:26px 35px 26px}
  .login-card h1{margin-top:16px}
  .login-lead{margin-bottom:19px}
  .login-fields{gap:9px}
  .login-actions{margin-block:10px 14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Concept 02 polish — stronger identity and restrained ambient motion. */
.login-stage{background:radial-gradient(ellipse at 72% 21%,#173f77 0%,#0e3269 34%,#061f4c 73%)}
.login-stage::before,.login-stage::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(15px);opacity:.65;will-change:transform}
.login-stage::before{width:clamp(300px,48vw,740px);height:clamp(300px,48vw,740px);top:-35%;left:-16%;background:radial-gradient(circle,rgba(69,118,185,.17),rgba(44,100,164,.05) 51%,transparent 72%);animation:saro-breathe 12s ease-in-out infinite alternate}
.login-stage::after{width:clamp(270px,40vw,620px);height:clamp(270px,40vw,620px);bottom:-35%;right:-12%;background:radial-gradient(circle,rgba(60,111,189,.16),transparent 69%);animation:saro-breathe 15s ease-in-out infinite alternate-reverse}
.login-card{width:min(100%,492px);border:1px solid rgba(255,255,255,.88);background:linear-gradient(151deg,rgba(255,255,255,.98),rgba(237,245,255,.955));box-shadow:0 35px 95px rgba(0,19,56,.32),0 8px 26px rgba(23,76,155,.14),inset 0 1px rgba(255,255,255,.95);transition:box-shadow .35s ease,transform .35s ease}
.login-card:focus-within{box-shadow:0 35px 95px rgba(0,19,56,.35),0 0 0 1px rgba(113,181,255,.26),0 0 48px rgba(73,154,246,.12)}
.login-logo{gap:12px;font-size:42px;letter-spacing:-.052em}
.login-logo img{width:65px;height:65px;filter:drop-shadow(0 5px 9px rgba(14,58,131,.12))}
.login-card h1{margin-top:29px}
.input-shell input{background:rgba(255,255,255,.75);box-shadow:inset 0 1px 3px rgba(9,39,85,.035)}
.input-shell input:hover:not(:focus){border-color:#97afd3}
.login-submit{background:linear-gradient(112deg,#082b62 0%,#103f87 50%,#082b62 100%);background-size:200% 100%;box-shadow:0 10px 23px rgba(5,45,106,.22);transition:background-position .4s ease,box-shadow .25s ease,transform .25s ease}
.login-submit:hover{filter:none;background-position:100% 0;box-shadow:0 13px 28px rgba(5,45,106,.32);transform:translateY(-2px)}
.login-submit:active{transform:translateY(0)}
@keyframes saro-breathe{from{transform:translate3d(-18px,15px,0) scale(.96)}to{transform:translate3d(28px,-18px,0) scale(1.1)}}
@media(max-width:700px){
  .login-stage{background:linear-gradient(180deg,#eaf3ff 0%,#fff 32%,#fff 100%)}
  .login-stage::before{width:280px;height:280px;left:-130px;top:18%;opacity:.38}
  .login-stage::after{width:260px;height:260px;right:-140px;bottom:2%;opacity:.3}
  .login-card{width:min(100%,420px);background:transparent;border:0;box-shadow:none;transform:none}
  .login-card:focus-within{box-shadow:none}
  .login-logo{font-size:36px;gap:10px}
  .login-logo img{width:56px;height:56px}
  .login-mobile-art{width:min(100%,294px);margin:2px auto 4px;filter:drop-shadow(0 11px 15px rgba(14,50,112,.10));animation:saro-float 7s ease-in-out infinite}
  .input-shell input{background:rgba(255,255,255,.87)}
  .login-submit{box-shadow:0 9px 22px rgba(5,45,106,.22)}
}
@keyframes saro-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:360px){.login-logo{font-size:32px}.login-logo img{width:50px;height:50px}.login-mobile-art{width:min(100%,264px)}}
@media(prefers-reduced-motion:reduce){.login-stage::before,.login-stage::after,.login-mobile-art{animation:none!important}.login-submit{transition:none!important}}

/* saro approved reference wordmark; the sarosee credit is at page bottom, never inside the logo. */
.login-logo{display:inline-flex;line-height:1;width:auto;min-height:56px}
.login-logo img.saro-login-wordmark{display:block;width:clamp(174px,24vw,215px)!important;height:auto!important;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(11,47,106,.07))}
.login-powered{position:absolute;left:0;right:0;bottom:14px;margin:0;padding:8px 16px;color:rgba(255,255,255,.77);font-size:12px;text-align:center;line-height:1.8}
.login-powered bdi{font-family:Figtree,Arial,sans-serif;font-weight:750;letter-spacing:.01em;color:inherit}
@media(max-width:700px){.login-logo img.saro-login-wordmark{width:186px!important}.login-powered{position:relative;bottom:auto;margin:14px auto 0;color:#31527b;padding:8px 12px 16px}}
@media(max-width:360px){.login-logo img.saro-login-wordmark{width:165px!important}}

/* V7 — Larger and sharper official SARO identity; only the login brand row is resized.
   The PNG symbol remains byte-identical to the user-supplied original. */
.login-logo{display:inline-flex!important;flex-direction:row!important;direction:ltr!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-height:76px!important;white-space:nowrap}
.login-logo img.saro-login-wordmark{display:block;width:190px!important;height:auto!important;max-height:50px!important;flex:none!important;object-fit:contain;filter:none!important}
.login-logo img.saro-logo-symbol{display:block;width:76px!important;height:76px!important;max-height:none!important;flex:none!important;object-fit:contain;border-radius:50%;filter:none!important;image-rendering:auto}
@media(max-width:700px){
 .login-logo{gap:10px!important;min-height:65px!important}
 .login-logo img.saro-login-wordmark{width:169px!important;max-height:45px!important}
 .login-logo img.saro-logo-symbol{width:65px!important;height:65px!important}
 .login-mobile-art{display:block!important;visibility:visible;opacity:1;width:min(100%,280px);margin:0 auto 8px}
 .login-mobile-art img{display:block;max-width:100%;width:100%;height:auto}
}
@media(max-width:360px){
 .login-logo{gap:8px!important;min-height:58px!important}
 .login-logo img.saro-login-wordmark{width:151px!important;max-height:40px!important}
 .login-logo img.saro-logo-symbol{width:58px!important;height:58px!important}
 .login-mobile-art{width:min(100%,250px)}
}