.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(1200px 500px at 50% -10%, var(--brand-soft), transparent 70%), var(--bg); }
.login-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-mark { width: 48px; height: 48px; flex: none; object-fit: contain; }
.login-brand h1 { font-size: 19px; }
.login-brand p { font-size: 13px; color: var(--ink-3); }
.login-lead { color: var(--ink-2); font-size: 14.5px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.google-btn { height: 44px; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.demo-box { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink-2); background: var(--surface-2); }
.demo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-actions .btn { flex: 1; }
.login-foot { font-size: 12px; color: var(--ink-3); text-align: center; }
.login-info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.login-embed { padding: 12px; align-items: flex-start; }
.login-embed .login-card { box-shadow: none; border: 0; padding: 20px 16px; background: transparent; }
.login-embed .login-foot { display: none; }