/* Loginside */
.login-page { display: flex; min-height: 100vh; background:
  radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
  radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, var(--critical) 10%, transparent), transparent 60%), var(--page); }
.login-wrap { margin: auto; width: 100%; max-width: 420px; padding: 32px 16px; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 26px 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-brand .logo { width: 34px; height: 34px; }
.login-brand h1 { font-size: 19px; }
.login-card h2 { font-size: 17px; margin-bottom: 6px; }
.login-card p { font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.step { display: flex; flex-direction: column; gap: 12px; }
.step .fld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-2); }
.step input:not([type=checkbox]) { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 15px; color: var(--ink); width: 100%; }
.step input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.code-in { font: 600 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important; letter-spacing: .25em; text-align: center; }
.btn.wide { width: 100%; padding: 10px 14px; font-size: 15px; margin-top: 4px; }
.linkish { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; padding: 4px; }
.linkish:hover { text-decoration: underline; }
.login-err { margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--critical); background: var(--crit-wash); color: var(--ink); font-size: 13px; }
.login-msg { margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--good); background: rgba(12,163,12,.08); font-size: 13px; }
.login-foot { text-align: center; margin-top: 14px; }
.theme-corner { position: fixed; top: 14px; right: 14px; color: var(--ink-2); }
.setup-steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.qr { align-self: center; width: 208px; height: 208px; background: #fff; border-radius: 10px; padding: 4px; }
.qr svg { width: 100%; height: 100%; display: block; }
.manual summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.secret { margin: 8px 0 4px; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; font-size: 14px; word-break: break-all; user-select: all; }
.codes { columns: 2; margin: 0; padding: 12px 12px 12px 36px; background: var(--surface-2); border-radius: 10px; font-size: 15px; line-height: 1.9; }
.meter-pw { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: -6px; }
.meter-pw span { display: block; height: 100%; width: 0; transition: width .2s; background: var(--critical); }
.meter-pw span.ok { background: var(--warning); } .meter-pw span.strong { background: var(--good); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.login-card code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
@media (max-width: 480px) { .login-card { padding: 20px 16px; } }
.code-in::placeholder { color: var(--muted); opacity: .45; }