:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172b45; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 24px; background: radial-gradient(ellipse at 50% 0, #e3edf9, transparent 65%); }
.sign-in { width: 100%; max-width: 480px; }
.brand { display: block; width: min(300px, 85%); height: auto; margin: 0 auto 38px; }
.sign-in-card { background: #fff; border: 1px solid #dce5ef; border-radius: 20px; padding: 40px; box-shadow: 0 18px 60px #1b3d6310; }
.eyebrow { color: #34679c; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
h1 { font-size: clamp(28px, 6vw, 34px); line-height: 1.2; letter-spacing: -.035em; margin: 0 0 16px; }
.intro { color: #56677c; font-size: 16px; line-height: 1.65; margin: 0 0 30px; }
button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 14px 20px; border: 1px solid #245c94; border-radius: 10px; background: #2d69a4; color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
button:hover { background: #245786; }
button:focus-visible { outline: 3px solid #172b45; outline-offset: 4px; }
button span { font-size: 22px; line-height: 1; }
.security-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; padding-top: 24px; border-top: 1px solid #e6ecf3; }
.security-mark { flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eaf2fb; color: #285e92; font-weight: 700; }
.security-note p { margin: 0; font-size: 12px; line-height: 1.65; color: #405770; }
.security-note p span { color: #65758a; }
.footer-note { margin: 24px 0 0; text-align: center; color: #65758a; font-size: 12px; line-height: 1.6; }
@media (max-width: 440px) { body { padding: 32px 20px; } .sign-in-card { padding: 30px 24px; border-radius: 16px; } .brand { margin-bottom: 30px; } }
@media (forced-colors: active) { button { border: 2px solid ButtonText; } .sign-in-card { border: 1px solid CanvasText; } }