:root{ --ink:#1B2A3D; --canvas:#F0EBDF; --border:#DDD6C7; --muted:#8A8378; --sand:#B08D57; --rust:#A65A3A; }
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--canvas); color:var(--ink);
  font-family:'Source Sans 3', system-ui, sans-serif;
  padding:24px;
}
.card{
  background:#fff; border:1px solid var(--border); border-left:5px solid var(--sand);
  border-radius:4px; padding:26px 24px; width:100%; max-width:360px;
}
h1{
  font-family:'Barlow Condensed', system-ui, sans-serif;
  font-weight:700; font-size:26px; margin:0 0 4px;
}
p.sub{ font-size:13.5px; color:var(--muted); margin:0 0 20px; }
label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
input{
  width:100%; border:1px solid var(--border); border-radius:3px;
  padding:10px 12px; font-size:16px; font-family:inherit;
  background:#FBF9F5; color:var(--ink);
}
input:focus{ outline:2px solid var(--sand); border-color:transparent; }
button{
  width:100%; margin-top:14px; border:none; background:var(--ink); color:#fff;
  padding:11px; border-radius:3px; font-size:15px; font-weight:600;
  font-family:inherit; cursor:pointer;
}
button:disabled{ opacity:.6; cursor:default; }
.error{ color:var(--rust); font-size:13.5px; margin-top:12px; min-height:19px; }