:root{
  --bg:#edf0f8;
  --surface:#edf0f8;
  --text:#333846;
  --muted:#8e94a4;
  --icon:#8190a8;
  --purple:#716cff;
  --white-shadow:rgba(255,255,255,.96);
  --dark-shadow:rgba(163,177,198,.62);
  --dark-shadow-soft:rgba(163,177,198,.34);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
.page-shell{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 48% 39%, rgba(255,255,255,.62) 0 13%, rgba(255,255,255,0) 35%),
    var(--bg);
}
.login-card{
  width:250px;
  height:358px;
  border-radius:19px;
  padding:27px 22px 18px;
  background:var(--surface);
  box-shadow:
    16px 16px 30px rgba(163,177,198,.52),
    -16px -16px 30px rgba(255,255,255,.96);
  position:relative;
  transform:translateZ(0);
}
.avatar-shell{
  width:56px;
  height:56px;
  margin:0 auto 16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--icon);
  background:var(--surface);
  box-shadow:
    7px 7px 15px rgba(163,177,198,.52),
    -7px -7px 15px rgba(255,255,255,.98),
    inset 1px 1px 1px rgba(255,255,255,.7);
}
.avatar-icon{width:25px;height:25px}
.heading-wrap{text-align:center;margin-bottom:14px}
.heading-wrap h1{
  margin:0 0 2px;
  font-size:14.2px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.18px;
}
.heading-wrap p{
  margin:0;
  color:var(--muted);
  font-size:8.8px;
  line-height:1.25;
  font-weight:500;
}
.login-form{display:flex;flex-direction:column;gap:9px}
.field{
  height:34px;
  border-radius:8px;
  display:flex;
  align-items:center;
  padding:0 10px 0 11px;
  color:var(--icon);
  position:relative;
  transition:box-shadow .18s ease, transform .18s ease;
}
.neo-inset{
  background:var(--surface);
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,.50),
    inset -4px -4px 8px rgba(255,255,255,.94);
}
.field:focus-within{
  box-shadow:
    inset 4px 4px 8px rgba(163,177,198,.58),
    inset -4px -4px 8px rgba(255,255,255,.98),
    0 0 0 1px rgba(113,108,255,.10);
}
.field-icon{width:15px;height:15px;display:grid;place-items:center;flex:0 0 auto;margin-right:8px}
.field-icon svg{width:100%;height:100%}
.field input{
  width:100%;min-width:0;border:0;outline:0;background:transparent;color:#4d5361;
  font-size:9.4px;font-weight:500;padding:0;height:100%;
}
.field input::placeholder{color:#9aa0ae;opacity:1}
.eye-btn{
  width:24px;height:24px;border:0;background:transparent;padding:4px;color:#8d96a8;
  display:grid;place-items:center;cursor:pointer;border-radius:50%;margin-right:-4px;
}
.eye-btn:active{transform:scale(.94)}
.eye-btn svg{width:14px;height:14px}
.form-meta{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1px;
  color:#747b8b;
  font-size:8.2px;
  font-weight:500;
}
.remember{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.remember input{position:absolute;opacity:0;pointer-events:none}
.switch{
  width:31px;height:17px;border-radius:999px;position:relative;display:inline-block;flex:0 0 auto;
  transition:box-shadow .22s ease;
}
.knob{
  position:absolute;width:14px;height:14px;border-radius:50%;left:1.5px;top:1.5px;background:var(--surface);
  box-shadow:2px 2px 4px rgba(163,177,198,.55),-2px -2px 4px rgba(255,255,255,.96);
  transition:transform .24s cubic-bezier(.2,.85,.25,1), background .24s ease, box-shadow .24s ease;
}
.remember input:checked + .switch .knob{
  transform:translateX(14px);
  background:var(--purple);
  box-shadow:1px 1px 3px rgba(103,98,225,.45),-1px -1px 3px rgba(255,255,255,.8);
}
.remember input:focus-visible + .switch{outline:2px solid rgba(113,108,255,.35);outline-offset:2px}
.forgot{transition:color .16s ease, transform .16s ease}
.forgot:hover{color:#62697a}.forgot:active{transform:translateY(1px)}
.neo-raised{
  background:var(--surface);
  box-shadow:6px 6px 11px rgba(163,177,198,.50),-6px -6px 11px rgba(255,255,255,.98);
}
.login-btn{
  height:34px;border:0;border-radius:8px;color:#555d6e;font-size:9.2px;font-weight:800;letter-spacing:1.1px;
  cursor:pointer;transition:box-shadow .14s ease,transform .14s ease,color .14s ease;
}
.login-btn:hover{color:#444b5a}
.login-btn:active,.login-btn.is-pressed{
  transform:translateY(1px) scale(.995);
  box-shadow:inset 4px 4px 7px rgba(163,177,198,.52),inset -4px -4px 7px rgba(255,255,255,.94);
}
.signup-line{
  margin:4px 0 0;text-align:center;font-size:8px;color:#9ba1ae;font-weight:500;
}
.signup-line a{color:#707789;font-weight:700}
@media (max-width:420px){
  .page-shell{padding:18px}
  .login-card{transform:scale(1.05)}
}
@media (max-height:520px){
  body{overflow:auto}
  .page-shell{padding-block:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
.login-error{
  margin:-6px 0 7px;
  padding:6px 7px;
  border-radius:7px;
  text-align:center;
  font-size:7.5px;
  line-height:1.25;
  color:#9d4040;
  background:rgba(255,228,228,.55);
  box-shadow:inset 2px 2px 4px rgba(163,177,198,.24),inset -2px -2px 4px rgba(255,255,255,.68);
}