.auth-page{
  min-height:100svh;display:grid;place-items:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}
.auth-shell{width:min(100%,380px)}
.auth-card{
  padding:28px 22px;border:1px solid var(--line);border-radius:24px;background:var(--surface);
  box-shadow:var(--shadow-lg);
}
.auth-mark{
  width:48px;height:48px;display:grid;place-items:center;margin-bottom:20px;border-radius:13px;
  color:#fff8ed;background:var(--cinnabar-fill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 7px 18px rgba(135,38,33,.2);
  font:28px/1 var(--hanzi);
}
.auth-kicker{margin:0 0 5px;color:var(--cinnabar);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.auth-card h1{margin:0;font-family:var(--hanzi);font-size:clamp(28px,8vw,36px);font-weight:650;letter-spacing:-.035em;line-height:1.1}
.auth-subtitle{margin:6px 0 0;color:var(--muted);font-size:14px}
.auth-form{display:grid;gap:14px;margin-top:24px}
.auth-field{display:grid;gap:7px;color:var(--ink);font-size:13px;font-weight:700}
.auth-field input{
  width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.auth-field input:hover{border-color:color-mix(in srgb,var(--muted) 65%,var(--line))}
.auth-field input:focus{border-color:var(--cinnabar);outline:0;background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--cinnabar) 18%,transparent)}
.auth-submit{width:100%;margin-top:2px}
.auth-error{margin:0;padding:10px 12px;border-left:4px solid var(--cinnabar);border-radius:var(--radius-sm);background:var(--cinnabar-soft);color:var(--ink);font-size:12px;line-height:1.35}
.auth-error:not([hidden]){display:block}

@media (min-width:480px){
  .auth-card{padding:32px 30px}
}