:root{
  --lg-accent:#2354D6; --lg-accent-b:#1A3FA6; --lg-accent-soft:rgba(35,84,214,.08);
  --lg-accent-bright:#5B8DEF;
  --lg-bg:#ffffff; --lg-bg-card:#f7f9fd;
  --lg-text:#0f1524; --lg-text-dim:#57617a; --lg-text-faint:#8790a6;
  --lg-border:#e4e8f2; --lg-border-hi:#d3d9ea;
  --lg-r-sm:8px; --lg-r-md:12px; --lg-r-lg:18px;
  --lg-danger:#d13b3b; --lg-success:#1f9d55;
}
body.pp-auth-page{
  min-height:100vh;
  background: radial-gradient(900px 600px at 50% 0%, var(--lg-accent-soft), transparent 70%), var(--lg-bg);
  color:var(--lg-text); font-family:'Inter',sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.page-center{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; flex:1; padding:24px; }
:focus-visible{outline:2px solid var(--lg-accent); outline-offset:3px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){ .page-center *{animation:none !important; transition:none !important;} }

.card{
  width:100%; max-width:420px; background:var(--lg-bg); border:1px solid var(--lg-border);
  border-radius:var(--lg-r-lg); padding:40px 32px; box-shadow:0 12px 40px rgba(15,21,36,.08);
}
.card .brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; color:var(--lg-text); margin-bottom:28px; justify-content:center;}
.brand-mark{ height:32px; width:auto; object-fit:contain;}

.card h1{ font-size:22px; font-weight:800; letter-spacing:-0.02em; text-align:center; margin-bottom:8px;}
.sub{ font-size:14.5px; color:var(--lg-text-dim); text-align:center; margin-bottom:28px;}

.card form{display:flex; flex-direction:column; gap:14px;}
.card label{ font-size:13px; font-weight:600; color:var(--lg-text-dim); margin-bottom:6px; display:block;}
.card input[type="email"], .card input[type="password"], .card .pw-wrap input[type="text"]{
  width:100%; padding:13px 14px; border:1.5px solid var(--lg-border-hi); border-radius:var(--lg-r-md);
  font-size:15px; font-family:inherit; color:var(--lg-text); background:var(--lg-bg-card);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.card input:focus{ outline:none; border-color:var(--lg-accent); box-shadow:0 0 0 3px var(--lg-accent-soft); background:var(--lg-bg);}
.card input::placeholder{ color:var(--lg-text-faint);}

.field-row-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.field-row-top label{ margin-bottom:0;}
.forgot-link{ font-size:12.5px; font-weight:600; color:var(--lg-accent);}
.forgot-link:hover{ text-decoration:underline;}

.card button{
  width:100%; padding:13px 16px; border:none; border-radius:var(--lg-r-md);
  background:var(--lg-accent); color:#fff; font-size:15px; font-weight:700; font-family:inherit;
  cursor:pointer; transition:background .15s ease, transform .1s ease;
}
.card button:hover:not(:disabled){ background:var(--lg-accent-b);}
.card button:active:not(:disabled){ transform:scale(.98);}
.card button:disabled{ opacity:.6; cursor:not-allowed;}

.msg{ font-size:13.5px; border-radius:var(--lg-r-sm); padding:11px 13px; margin-top:4px; display:none;}
.msg.show{display:block;}
.msg.error{ background:rgba(209,59,59,.08); color:var(--lg-danger); border:1px solid rgba(209,59,59,.22);}
.msg.success{ background:rgba(31,157,85,.08); color:var(--lg-success); border:1px solid rgba(31,157,85,.22);}

.foot{ text-align:center; font-size:13.5px; color:var(--lg-text-dim); margin-top:22px;}
.foot a{ color:var(--lg-accent); font-weight:700;}
.support{ text-align:center; font-size:12.5px; color:var(--lg-text-faint); margin-top:14px;}
.support a{ color:var(--lg-text-dim); font-weight:600;}

.pw-wrap{position:relative}
.pw-wrap input[type="password"], .pw-wrap input[type="text"]{padding-right:44px}
.pw-toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; padding:4px; display:flex; align-items:center; justify-content:center; color:var(--lg-text-faint); cursor:pointer;}
.pw-toggle:hover{color:var(--lg-text-dim)}

.card .pw-toggle{width:auto; padding:4px; background:none; color:var(--lg-text-faint); font-size:inherit; font-weight:normal;}
.card .pw-toggle:hover:not(:disabled){background:none; color:var(--lg-text-dim);}
.card .pw-toggle:active:not(:disabled){transform:translateY(-50%) scale(.9);}

.pw-toggle svg{display:block}
.pw-toggle svg[hidden]{display:none}