/* === FORMS === */
.auth-panel { max-width: 480px; margin: 40px auto; background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 40px; box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); }
.tabs { display: flex; margin-bottom: 30px; border-bottom: 2px solid rgba(255, 255, 255, 0.08); }
.tab { flex: 1; padding: 14px; background: none; border: none; color: var(--muted); font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; position: relative; }
.tab.active { color: var(--primary); }
.tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }
.form-container { position: relative; }
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form h2 { margin-bottom: 20px; color: var(--text); font-size: 1.5rem; }
.form-group { margin-bottom: 22px; }
.form-group label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.form-group input, .form-group select { width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; color: var(--text); font-size: 1rem; transition: all 0.3s ease; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 14px rgba(255, 42, 42, 0.25); background: rgba(255, 255, 255, 0.08); }
.form-group select { cursor: pointer; appearance: none; background-color: rgba(255, 255, 255, 0.05); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0b0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-group select option, .form-group select optgroup { background: var(--dark); color: var(--text); }
.hint { display: block; margin-top: 5px; font-size: 0.8rem; color: var(--muted); }
.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.checkbox-label input { width: auto; accent-color: var(--primary); }
.message { margin-top: 16px; padding: 12px; border-radius: 8px; font-size: 0.92rem; display: none; }
.message.success { display: block; background: rgba(0, 255, 136, 0.12); border: 1px solid rgba(0, 255, 136, 0.35); color: var(--green); }
.message.error { display: block; background: rgba(255, 42, 42, 0.12); border: 1px solid rgba(255, 42, 42, 0.35); color: #ff6b6b; }

.auth-form .btn-primary { width: 100%; justify-content: center; }

.verify-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.verify-box { background: var(--card); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 30px; max-width: 360px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); }
.verify-box h3 { margin-bottom: 10px; }
.verify-box p { color: var(--muted); margin-bottom: 20px; font-size: 0.9rem; }
.verify-box .form-group input { text-align: center; }
.verify-box .form-group input#verify-code,
.verify-box .form-group input#reset-code { font-size: 1.5rem; letter-spacing: 8px; font-weight: 800; }
.verify-box .message { margin-top: 12px; }
.verify-actions { display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
.btn-link { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--accent); font-size: 0.85rem; cursor: pointer; text-decoration: none; padding: 8px 16px; border-radius: 8px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn-link:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.btn-link.secondary { background: transparent; border-color: rgba(255, 255, 255, 0.08); color: var(--muted); }
.btn-link.secondary:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.15); }

.form-actions { text-align: center; margin-top: 16px; }
.form-actions a { color: var(--accent); text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: color 0.2s ease; }
.form-actions a:hover { color: var(--text); text-decoration: underline; }