/* Sign-in / setup / recovery-kit screens. Uses the design tokens from styles.css. */
body{padding:0 16px 40px;}
.auth-wrap{max-width:420px; margin:0 auto; padding-top:calc(48px + env(safe-area-inset-top, 0px));}
.auth-brand{font-family:'Baloo 2',system-ui,sans-serif; font-weight:600; color:var(--pink-deep); text-align:center; margin-bottom:18px;}
.auth-card{
  background:linear-gradient(135deg,var(--pink-wash),var(--blue-wash));
  border:1px solid var(--line); border-radius:22px; padding:24px;
  box-shadow:0 3px 10px var(--shadow); display:flex; flex-direction:column; gap:14px;
}
.auth-card h1{font-size:26px; color:var(--pink-deep);}
.auth-sub{margin:0; color:var(--ink-soft); line-height:1.5; font-size:14.5px;}
.auth-btn{
  appearance:none; border:none; border-radius:999px; min-height:48px; padding:0 22px;
  background:var(--pink-deep); color:#fff; font-weight:700; font-size:16px; cursor:pointer;
  box-shadow:0 3px 10px var(--shadow);
}
.auth-btn.secondary{background:var(--surface); color:var(--pink-deep); border:1px solid var(--line); box-shadow:none;}
.auth-btn:disabled{opacity:.45; cursor:default;}
.auth-btn:focus-visible,.auth-link:focus-visible,.auth-code input:focus-visible{outline:2px solid var(--blue-deep); outline-offset:2px;}
.auth-link{appearance:none; background:none; border:none; padding:8px 0; color:var(--blue-deep); font-weight:600; font-size:14px; cursor:pointer; text-align:center; text-decoration:none;}
.auth-code{display:flex; flex-direction:column; gap:8px;}
.auth-code label{font-weight:600; font-size:13px;}
.auth-code input{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:18px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--surface); color:var(--ink);
}
.kit-codes{margin:0; padding:14px 14px 14px 42px; background:var(--surface); border:1px dashed var(--line); border-radius:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; font-size:15.5px;}
@media (max-width:480px){.kit-codes{grid-template-columns:1fr; font-size:17px;}}
.kit-actions{display:flex; gap:10px;} .kit-actions .auth-btn{flex:1;}
.kit-confirm{display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px;}
.kit-confirm input{width:22px; height:22px; accent-color:var(--pink-deep);}
.auth-note{margin:0; font-size:13px; color:var(--ink-soft); background:var(--gold-wash); border-radius:12px; padding:10px 12px;}
.auth-error{margin:14px 0 0; text-align:center; color:var(--pink-deep); font-weight:600; font-size:14px;}
@media print{
  body{background:#fff;} .auth-card{box-shadow:none; background:#fff;}
  .kit-actions,.kit-confirm,#btn-continue,.auth-error{display:none !important;}
}