.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 26rem; background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; padding: 2rem 1.5rem; }
.auth-card .logo { margin-bottom: 1.5rem; }
.auth-card h1 { font-size: 1.75rem; }
.auth-card .muted { margin-top: 0.5rem; font-size: 0.9rem; }
.auth-card form { margin-top: 1.5rem; display: grid; gap: 1rem; }
.auth-card label { display: grid; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; }
.auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"], .auth-card select {
  width: 100%; height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--border); border-radius: 0.75rem;
  background: var(--bg); color: var(--fg); font: 400 1rem var(--sans);
}
.auth-card label.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.85rem; line-height: 1.5; color: var(--muted-fg); }
.auth-card label.check input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; accent-color: var(--primary); }
.auth-card .btn { width: 100%; }
.auth-card .btn:disabled { opacity: 0.6; cursor: not-allowed; }
.msg { font-size: 0.875rem; min-height: 1.25rem; }
.msg.error { color: #b3261e; }
.msg.ok { color: var(--primary); }
:root[data-theme="dark"] .msg.error { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.error { color: #ff8a80; } }
.alt { margin-top: 1.25rem; font-size: 0.875rem; color: var(--muted-fg); text-align: center; }
.alt a { color: var(--primary); font-weight: 600; }
.row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.row span:first-child { color: var(--muted-fg); }
.note { margin-top: 1.5rem; padding: 1rem; border-radius: 0.75rem; background: var(--muted); font-size: 0.8rem; color: var(--muted-fg); line-height: 1.6; }

.btn-google { width: 100%; gap: 0.6rem; margin-top: 1.25rem; }
.divider { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; font-size: 0.8rem; color: var(--muted-fg); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }