/* Sign-in and account pages (src/pages/account.tsx). Uses the tokens from app.css. */
.acc h1 { margin-bottom: 4px }
.acc .sub { margin-bottom: 14px }
.acc-card { margin: 14px 0; display: grid; gap: 10px }
.acc-card h2 { margin: 0; font-size: 18px }
.acc-card p { margin: 0 }
.acc-email { margin-top: 0 }
.acc-inline { grid-template-columns: 1fr auto; align-items: end; margin-top: 0 }
@media (max-width: 420px) { .acc-inline { grid-template-columns: 1fr } }
.acc-row { display: flex; gap: 10px; flex-wrap: wrap }
.acc-row form { margin: 0 }
.acc-passkey { display: grid; gap: 10px }
.acc-passkey .btn, .acc-email .btn { width: 100%; padding: 13px 14px }
.acc-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px }
.acc-or::before, .acc-or::after { content: ""; flex: 1; border-top: 1px solid var(--line) }
.acc-msg { font-size: 13px; color: var(--muted); min-height: 0 }
.acc-msg:empty { display: none }
.acc-msg.warn { color: var(--red) }
.acc-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.acc-keys li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px }
.acc-keys li > div { display: grid; gap: 2px; min-width: 0 }
.acc-keys strong { overflow-wrap: anywhere }
.acc-keys small { color: var(--muted); font-size: 12px }
.acc-keys form { margin: 0 }
.acc-danger { border-color: color-mix(in srgb, var(--red) 45%, var(--line)) }
.acc-delete { background: var(--red); color: #fff }