:root{
  --bg:hsl(33 18% 90%); --surface:hsl(30 22% 95%); --surface-2:hsl(30 19% 92%);
  --ink:#28273A; --ink-muted:#6C6877; --ink-faint:#948F9C;
  --accent:#262441; --accent-strong:#3C395C; --accent-soft:rgba(38,36,65,.07);
  --gold-bright:#E2BD7A; --negative:#C9504A;
  --shadow-raised:-5px -5px 10px rgba(255,250,244,.9), 5px 5px 14px rgba(160,143,126,.32);
  --shadow-raised-sm:-3px -3px 6px rgba(255,250,244,.85), 3px 3px 8px rgba(160,143,126,.28);
  --shadow-inset:inset 3px 3px 6px rgba(160,143,126,.22), inset -3px -3px 6px rgba(255,250,244,.7);
  --focus-ring:0 0 0 3px rgba(38,36,65,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 "Public Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font-family:inherit}
.page{
  min-height:100%; display:flex; align-items:center; justify-content:center; padding:32px 20px;
  background:
    radial-gradient(circle at 18% 14%, rgba(226,189,122,.16), transparent 42%),
    radial-gradient(circle at 84% 88%, rgba(38,36,65,.07), transparent 46%),
    var(--bg);
}
.card{
  width:100%; max-width:392px; background:var(--surface); border-radius:22px;
  box-shadow:var(--shadow-raised); padding:40px 34px 32px;
}
.brand{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:28px; text-align:center}
.brand-mark{
  height:52px; width:52px; padding:8px; object-fit:contain; border-radius:14px;
  background:var(--surface); box-shadow:var(--shadow-raised-sm);
}
.brand-name{font-family:Fraunces, Georgia, serif; font-weight:600; font-size:1.28rem; letter-spacing:.01em; margin:0; line-height:1.2}
.brand-sub{color:var(--ink-muted); font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; margin-top:-8px}
form{display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:.78rem; font-weight:600; color:var(--ink-muted); letter-spacing:.02em}
.input-shell{position:relative; display:flex; align-items:center; background:var(--surface-2); border-radius:12px; box-shadow:var(--shadow-inset)}
.input-shell:focus-within{box-shadow:var(--shadow-inset), var(--focus-ring)}
.input-shell input{
  width:100%; min-width:0; background:transparent; border:none; outline:none; color:var(--ink);
  font-size:.94rem; padding:13px 14px; border-radius:12px;
}
.input-shell input.has-toggle{padding-right:46px}
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  background:none; border:none; border-radius:9px; color:var(--ink-muted); cursor:pointer;
}
.pw-toggle:hover{color:var(--ink); background:var(--accent-soft)}
.pw-toggle:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.pw-toggle svg{width:18px; height:18px; display:block}
.row-end{display:flex; justify-content:flex-end; margin-top:-8px}
.link{
  background:none; border:none; padding:2px 0; cursor:pointer; color:var(--ink-muted);
  font-size:.8rem; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(108,104,119,.4);
}
.link:hover{color:var(--accent); text-decoration-color:currentColor}
.link:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:4px}
.submit-btn{
  margin-top:6px; width:100%; background:var(--accent); color:#F4EFE6; border:none; border-radius:12px;
  padding:13px 16px; font-size:.92rem; font-weight:600; cursor:pointer; box-shadow:var(--shadow-raised-sm);
}
.submit-btn:hover{background:var(--accent-strong)}
.submit-btn:active{transform:translateY(1px)}
.submit-btn:focus-visible{outline:none; box-shadow:var(--shadow-raised-sm), var(--focus-ring)}
.submit-btn:disabled{cursor:default; opacity:.86}
#msg{min-height:20px; font-size:.82rem; margin-top:16px; text-align:center}
#msg.err{color:var(--negative)}
#msg.ok{color:var(--ink-muted)}
.footnote{margin:22px 0 0; text-align:center; color:var(--ink-faint); font-size:.74rem}
[hidden]{display:none!important}
@media (max-width:420px){ .card{padding:32px 22px 26px; border-radius:18px} }