.grid input,.grid select,.existing select,.upload-box select{display:block;width:100%;margin-top:6px;min-height:38px;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:13px 'Segoe UI',sans-serif}.grid label,.existing label,.upload-box>label{line-height:1.35}.grid small{display:block}.upload-box>label{gap:0}.upload-box>label select{margin-top:6px}.reset{opacity:1;color:#fff}@media(max-width:700px){.grid input,.grid select,.existing select,.upload-box select{min-height:40px}}

/*
 * `.grid small` is the error slot under a field, and it is red for that reason. A hint written
 * INSIDE a label is the opposite thing — it tells somebody what to type before they get it wrong —
 * and inheriting the red had every hint reading as a complaint about a field nobody had filled in
 * yet. Scoped to labels so the error slots, which sit directly in the grid, stay red.
 */
.grid label small{color:var(--muted);font-weight:400;min-height:0;display:block;margin-top:4px;line-height:1.45}

/* ---- Setting up an authenticator, once, on first sign-in ---------------------------------- */
.tf-steps { margin: 0 0 14px; padding-left: 20px; font-size: 13px; color: var(--muted); line-height: 1.65; }
.tf-steps b { color: var(--ink); }
.tf-qr { display: grid; place-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.tf-qr svg { display: block; }
.tf-manual { font-size: 12px; color: var(--muted); text-align: center; margin: 0 0 14px; line-height: 1.7; }
.tf-manual code { display: inline-block; margin-top: 4px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; font-size: 13px; letter-spacing: 1px; color: var(--ink); }

/* The codes are meant to be read off a screen and written down, so they are big and unambiguous. */
.tf-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 16px; }
.tf-codes code { padding: 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; letter-spacing: 1px; text-align: center; color: var(--ink); }
.tf-ack { display: flex; align-items: center; gap: 9px; margin: 12px 0; font-size: 13px; color: var(--ink); }
.tf-ack input { width: 16px; height: 16px; }