body { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(700px 400px at 80% 0%, color-mix(in srgb, var(--brand-2) 16%, transparent), transparent 70%), var(--bg); }
.auth { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.box { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 2rem 1.5rem; box-shadow: var(--shadow); }
h1 { font-size: 1.4rem; margin: 0 0 .3rem; }
label { display: block; margin: 1.2rem 0 .4rem; font-weight: 500; font-size: .95rem; }
.code { margin-top: 1.2rem; font-size: 1.6rem; letter-spacing: .6em; text-align: center; padding-inline-start: 1.6rem; }
.link { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; }
.link:disabled { color: var(--ink-3); cursor: default; }
.resend { text-align: center; margin: 1rem 0 0; font-size: .9rem; }
.hint { background: color-mix(in srgb, #f59e0b 15%, transparent); color: var(--ink); border-radius: 10px; padding: .5rem .8rem; font-size: .85rem; margin: .8rem 0 0; }
.ltr-i { direction: ltr; unicode-bidi: embed; }
.small { font-size: .85rem; text-align: center; }