:root{
  --raspberry:#d13c69;
  --apricot:#f7a072;
  --lilac:#9b7fd4;
  --ink:#3f2b36;
  --muted:#8d7783;
  --hair:#efe2e8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:#fff}
body{
  margin:0;color:var(--ink);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;
}
.loginwrap{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:24px calc(18px + env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
}
.logincard{
  width:100%;max-width:380px;
  background:#fff;border:1px solid var(--hair);
  border-radius:22px;padding:26px 22px 22px;
}
.logincard h1{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:600;font-size:1.5rem;line-height:1.15;margin:0;
}
.sub{color:var(--muted);font-size:.9rem;margin:8px 0 22px}
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:5px}
input{
  font:inherit;width:100%;padding:13px 14px;border-radius:14px;
  border:1px solid var(--hair);background:#fff;color:var(--ink);
}
input::placeholder{color:#c8b6bf}
:focus-visible{outline:3px solid var(--lilac);outline-offset:2px}
.btn{
  font:inherit;font-weight:700;border:none;cursor:pointer;width:100%;
  background:var(--raspberry);color:#fff;padding:14px 24px;border-radius:14px;margin-top:16px;
}
.btn:hover:not(:disabled){background:#b93159}
.btn:disabled{opacity:.55;cursor:default}
.err{
  min-height:1.3em;margin:12px 0 0;font-size:.85rem;font-weight:700;
  color:var(--apricot);opacity:0;transition:opacity .2s;
}
.err.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}