.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 390px); padding: 34px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 60px #27315b0c; }
.login-mark { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 12px; background: var(--accent); color: white; font-weight: 750; margin-bottom: 22px; }
.login-card h1 { margin: 0 0 8px; font-size: 24px; }
.login-card > p { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.login-card form { display: grid; gap: 20px; }
.login-card .notice { margin-bottom: 20px; }
.login-card .btn { width: 100%; margin-top: 4px; }
@media (max-width: 420px) { .login-page { padding: 16px; } .login-card { padding: 26px 22px; } }