/* === Nevsky IP Scan — Auth Page (/auth.html) === */
/* Login card, phone form, code verification, OAuth */

/* Auth wrapper — centers card below header */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 60px); padding: 20px }

/* Auth Card */
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,.3); text-align: center }
[data-theme="light"] .auth-card { box-shadow: 0 4px 24px rgba(0,0,0,.08) }
.auth-title { font-family: var(--font-heading); font-size: 24px; font-weight: 700; margin-bottom: 8px }
.auth-desc { font-size: 14px; color: var(--text2); margin-bottom: 28px; line-height: 1.5 }

/* OAuth */
.oauth-btns { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer; transition: all var(--transition); text-decoration: none; color: var(--text) }
.oauth-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.15) }
.oauth-btn svg { width: 20px; height: 20px; flex-shrink: 0 }
.oauth-btn.yandex { background: #FC3F1D; border-color: #FC3F1D; color: #fff }
.oauth-btn.yandex:hover { background: #E5381A; box-shadow: 0 4px 16px rgba(252,63,29,.3) }

/* Divider */
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--text3); font-size: 13px }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border) }

/* Form */
.phone-form { text-align: left }
.field { margin-bottom: 16px }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px }
.field input { width: 100%; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 15px; transition: all var(--transition); outline: none; box-sizing: border-box }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow) }
.field input::placeholder { color: var(--text3) }

.btn-submit { width: 100%; padding: 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer; transition: all var(--transition); margin-top: 4px }
.btn-submit:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow) }
.btn-submit:disabled { opacity: .6; cursor: not-allowed }

.status-msg { font-size: 13px; margin-top: 12px; text-align: center; min-height: 20px }
.status-msg.error { color: #E53E3E }
.status-msg.success { color: #48BB78 }
.status-msg.info { color: var(--text2) }

/* Code input */
.code-input { width: 160px; text-align: center; font-size: 28px; letter-spacing: 12px; padding: 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); color: var(--text); font-family: 'Space Grotesk', sans-serif; outline: none; transition: border .3s; margin: 0 auto; display: block; box-sizing: border-box }
.code-input:focus { border-color: var(--accent) }

.sms-fallback { margin-top: 16px; font-size: 12px; color: var(--text3); text-align: center }
.sms-fallback a { color: var(--accent); cursor: pointer; text-decoration: underline }

.back-link { margin-top: 16px; font-size: 13px; text-align: center }
.back-link a { color: var(--accent); cursor: pointer; text-decoration: none }

/* Step toggle */
.step { display: none }
.step.active { display: block }

/* Footer note */
.auth-note { font-size: 12px; color: var(--text3); margin-top: 20px; line-height: 1.5 }
.auth-note a { color: var(--accent); text-decoration: none }