.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}

/* A plain statement on the sign-in card — not an error, not a success, just what happened. */
.auth-note {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 7px; font-size: 12.5px; line-height: 1.5;
  background: var(--brand-pale); border: 1px solid #cfe7f6; color: var(--navy-dark);
}