/* The four auth pages (login, verify_code, finish_signup, register) share one
   card layout; a rule only one of them needs still lives here so the pages
   cannot drift apart. */
.auth-wrap { max-width: 380px; margin: 2.5rem auto; padding: 0 1rem; }
.auth-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 1.75rem; }
.auth-title { font-size: 1.6rem; font-weight: 800; color: var(--secondary-color); margin: 0 0 1.25rem; text-align: center; }
.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; font-size: 0.95rem; font-weight: 600; color: var(--secondary-color); margin-bottom: 0.4rem; }
.form-input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0.8rem 1rem; border: 1.5px solid #d0d7de; border-radius: 12px; font-size: 1.05rem; }
.form-input:focus { outline: none; border-color: var(--primary-color); }
.form-input[readonly] { background: #f6f8fa; color: #57606a; }
.code-input { text-align: center; font-size: 1.5rem; letter-spacing: 0.4em; }
.btn-primary { width: 100%; min-height: 52px; padding: 0.9rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: #fff; border: none; border-radius: 12px; font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.btn-primary:active { transform: scale(0.99); }
.auth-switch { text-align: center; font-size: 1rem; color: #57606a; margin-top: 1.25rem; }
.auth-switch a { display: inline-block; padding: 0.5rem 0.25rem; color: var(--primary-color); font-weight: 700; text-decoration: none; }
.auth-intro { font-size: 1rem; color: #57606a; margin-bottom: 1.25rem; text-align: center; }
.auth-legal { text-align: center; font-size: 0.85rem; color: #8b949e; margin-top: 1rem; }
.auth-legal a { color: #8b949e; text-decoration: underline; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }