/* login.allowid.eu: one narrow column, the brand's tokens (brand/brand.css). */
body { background: var(--surface-2); color: var(--ink); margin: 0; }
.top { background: var(--surface); border-bottom: 1px solid var(--line); }
.top .bar { max-width: 640px; margin: 0 auto; padding: .8rem 16px; display: flex; align-items: center; gap: .6rem; }
.top img { width: 2em; height: 2em; }
.wordmark { font-weight: 700; font-size: 1.15em; }
.wordmark .id { color: var(--accent); }
main { max-width: 640px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.5rem; }
.who { color: var(--ink-muted); margin: 0 0 1rem; }
.who b { color: var(--ink); }
.host { font-family: var(--font-mono); background: var(--surface-2); border-radius: var(--r-sm); padding: .05rem .35rem; }
.card .qr { margin: 1rem auto; width: min(300px, 80vw); max-width: none; }
.steps { margin: 0; padding-left: 1.2rem; color: var(--ink-muted); }
.small { font-size: .87em; color: var(--ink-muted); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.btn { display: inline-block; padding: .55rem 1rem; border-radius: var(--r-md); background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.btn.quiet { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.bad { border-left: 4px solid var(--bad); }
footer { max-width: 640px; margin: 0 auto; padding: 0 16px 2rem; font-size: .8em; color: var(--ink-muted); }