/* ==> styles/58-login.css */
#login-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:var(--brand-deep,#101D3A);padding:var(--sp5);overflow:auto;font-family:var(--sans,system-ui,sans-serif)}
#login-screen[hidden]{display:none}
#login-screen::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 560px at 50% -12%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 60%),
             radial-gradient(900px 520px at 112% 116%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 60%)}
.login-card{position:relative;width:100%;max-width:392px;background:var(--card,#fff);border-radius:var(--r-surface);
  box-shadow:var(--shadow-2);padding:var(--sp6) var(--sp6) var(--sp5);box-sizing:border-box}
.login-brand{display:flex;align-items:center;gap:var(--sp2);color:var(--brand-cta,#eb6834);font-family:var(--display,inherit);
  font-weight:var(--w-bold);font-size:var(--t-title);margin-bottom:var(--sp5)}
.login-brand span{color:var(--ink,#16233F)}
.login-brand svg{width:26px;height:26px;flex:0 0 auto}
.login-card h1{font-family:var(--display,inherit);font-size:var(--t-page);font-weight:var(--w-med);color:var(--ink,#16233F);margin:0 0 var(--sp0);}
.login-sub{font-size:var(--t-small);color:var(--muted,#5a6577);margin:0 0 var(--sp5)}
.login-card label{display:block;font-size:var(--t-small);font-weight:var(--w-med);color:var(--ink,#16233F);margin:0 0 var(--sp1)}
.login-card input[type=email],.login-card input[type=password]{width:100%;box-sizing:border-box;border:1px solid var(--control-line,#cfd6de);
  border-radius:var(--r-surface);padding:var(--sp3) var(--sp3);font-size:var(--t-body);font-family:inherit;background:var(--card,#fff);color:var(--ink,#16233F);margin-bottom:var(--sp4)}
.login-card input:focus{outline:var(--focus-ring);outline-offset:-1px;border-color:var(--brand,#E4572E)}
.login-passwrap{position:relative}
.login-passwrap input{margin-bottom:0;padding-right:var(--sp6)}
.login-reveal{position:absolute;right:6px;top:calc(50% - 1px);transform:translateY(-50%);background:none;border:0;cursor:pointer;
  color:var(--muted-2,#8a94a3);padding:var(--sp2);border-radius:var(--r-control);display:grid;place-items:center}

.login-reveal:focus-visible{outline:var(--focus-ring)}
.login-reveal svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.login-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);flex-wrap:wrap;margin:var(--sp3) 0 var(--sp4)}
.login-remember{display:inline-flex;align-items:center;gap:var(--sp2);font-size:var(--t-small);font-weight:var(--w-body);color:var(--muted,#5a6577);margin:0;cursor:pointer}
.login-remember input{margin:0;width:auto}
.login-link{background:none;border:0;padding:0;font-size:var(--t-small);font-weight:var(--w-med);color:var(--brand-text,#1f3d73);cursor:pointer}

.login-link:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:var(--r-control)}
.login-submit{width:100%;justify-content:center;padding:var(--sp3) var(--sp4);font-size:var(--t-body)}
.login-or{display:flex;align-items:center;gap:var(--sp3);color:var(--muted-2,#8a94a3);font-size:var(--t-label);margin:var(--sp5) 0 var(--sp4)}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--border,#dfe4ea)}
.login-sso{width:100%;justify-content:center;gap:var(--sp2);padding:var(--sp3) var(--sp4);font-size:var(--t-small)}
.login-sso svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.login-google{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp3);background:#fff;color:#1f1f1f;border-color:#dadce0;font-weight:var(--w-med);min-height:44px}
.login-google[hidden]{display:none}

.login-google svg{width:16px;height:16px;stroke:none;fill:none;flex:0 0 auto}
.login-google path{stroke:none}
.login-err{font-size:var(--t-small);color:var(--red,#c0392b);margin:0 0 var(--sp3);font-weight:var(--w-body)}
.pw-wrap{position:relative;margin-bottom:var(--sp3)}
.pw-wrap input[type=password],.pw-wrap input[type=text]{width:100%;box-sizing:border-box;border:1px solid var(--control-line,#cfd6de);
  border-radius:var(--r-surface);padding:var(--sp3) var(--sp6) var(--sp3) var(--sp3);font-size:var(--t-body);font-family:inherit;background:var(--card,#fff);color:var(--ink,#16233F);margin:0}
.pw-rules{list-style:none;margin:var(--sp0) 0 var(--sp4);padding:0;display:grid;gap:var(--sp2)}
.pw-rule{display:flex;align-items:flex-start;gap:var(--sp2);font-size:var(--t-small);color:var(--muted,#5a6577);line-height:var(--lh-ui)}
.pw-rule .pw-ic{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--control-line,#cfd6de);display:grid;place-items:center;margin-top:var(--sp0)}
.pw-rule .pw-ic svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pw-rule.ok{color:var(--green,#1f7a4d);font-weight:var(--w-body)}
.pw-rule.ok .pw-ic{background:var(--green,#1f7a4d);border-color:var(--green,#1f7a4d)}
.pw-rule.ok .pw-ic svg{opacity:1}
.pw-rule .pw-sym{font-family:var(--mono,ui-monospace,monospace);font-size:var(--t-label);word-break:break-all}
.pw-match{font-size:var(--t-small);margin:-6px 0 var(--sp3);min-height:16px}
.pw-match.ok{color:var(--green,#1f7a4d);font-weight:var(--w-body)}
.pw-match.no{color:var(--red,#c0392b);font-weight:var(--w-body)}
.login-submit[disabled]{opacity:.55;cursor:not-allowed}
.login-err.login-info{color:var(--brand-text,#1f3d73)}
.login-err[hidden]{display:none}
.login-note{font-size:var(--t-label);line-height:var(--lh-prose);color:var(--muted-2,#8a94a3);margin:var(--sp4) 0 0;text-align:center}
.otp{display:flex;gap:var(--sp2);margin:var(--sp1) 0 var(--sp0)}
.otp-box{flex:1 1 0;min-width:0;max-width:46px;height:50px;text-align:center;font-size:var(--t-page);font-weight:var(--w-med);
  font-family:var(--display,inherit);border:1px solid var(--control-line,#cfd6de);border-radius:var(--r-surface);
  background:var(--card,#fff);color:var(--ink,#16233F);padding:0}
.otp-box:focus{outline:var(--focus-ring);outline-offset:-1px;border-color:var(--brand,#E4572E)}
.otp-box.filled{border-color:var(--brand,#E4572E)}
.login-back{background:none;border:0;padding:0;margin:0 0 var(--sp3);font-size:var(--t-small);font-weight:var(--w-med);color:var(--brand-text,#1f3d73);cursor:pointer}

.login-back:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:var(--r-control)}