@import url('variables.css');

.auth-shell { min-height: calc(100vh - 72px); display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
.auth-card { width: 100%; max-width: 420px; padding: var(--space-7) var(--space-6); }
.auth-card h1 { font-size: 1.6rem; text-align: center; }
.auth-card p.subtitle { text-align: center; margin-bottom: var(--space-6); }

.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: var(--space-2); color: var(--text-secondary); }
.form-group input {
    width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-glass); background: var(--bg-base); color: var(--text-primary); font-size: 0.95rem;
    transition: border-color var(--transition-fast);
}
.form-group input:focus { outline: none; border-color: var(--accent); }
.form-error { color: #EF4444; font-size: 0.82rem; margin-top: var(--space-2); min-height: 1.2em; }

.auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--text-muted); font-size: 0.8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-glass); }

.btn--google { background: var(--bg-elevated); color: var(--text-primary); border: 1.5px solid var(--border-glass); }
.btn--guest { background: transparent; color: var(--text-secondary); border: 1.5px dashed var(--border-glass); }

.auth-footer-note { text-align: center; margin-top: var(--space-5); font-size: 0.88rem; }