* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #f5f7fc; color: #20304b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.login-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: linear-gradient(110deg, #2563eb, #7435ed); color: white; font-weight: 600; }
.login-main { flex: 1; display: grid; place-items: center; padding: 40px 20px; }
.login-card { width: 100%; max-width: 460px; padding: 40px 32px; border: 1px solid #e4e9f3; border-radius: 20px; background: white; box-shadow: 0 12px 36px #2437640a; }
h1 { margin: 0 0 18px; font-size: clamp(22px, 4vw, 28px); line-height: 1.45; }
p { margin: 0 0 30px; color: #65738b; line-height: 1.8; }
button { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: linear-gradient(110deg, #2563eb, #7435ed); color: white; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { filter: brightness(.95); }
button:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
footer { padding: 20px; text-align: center; color: #8190a5; font-size: 12px; line-height: 1.7; }
@media (max-width: 480px) { .login-card { padding: 32px 24px; } .login-header { padding: 16px 20px; } }