// ============================================================================= // Admin login card — the only unauthenticated screen. A centered card on a // plain background, same language as apps/web's auth-form.scss (kept its own // copy rather than shared, the two apps' chrome is independent). // ============================================================================= .admin-auth-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-lg); background: var(--color-background); } .admin-auth-card { width: 100%; max-width: var(--max-width-form); display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); h1 { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); } label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text-muted); } input { padding: var(--space-sm); font-size: var(--font-size-base); font-family: var(--font-body); border: 1.5px solid var(--color-border); border-radius: var(--radius-base); background: var(--color-surface); color: var(--color-text); &:focus-visible { border-color: var(--color-primary); } } button[type="submit"] { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); font-weight: 600; font-family: var(--font-body); color: var(--color-surface); background: var(--color-primary); border: none; border-radius: var(--radius-base); cursor: pointer; &:hover { background: var(--color-primary-hover); } &:disabled { opacity: 0.6; cursor: not-allowed; } } .field-error { margin: 0; font-size: var(--font-size-xs); color: var(--color-error); } .form-error { margin: var(--space-xs) 0 0; font-size: var(--font-size-sm); color: var(--color-error); } }