:root { color-scheme: light; font-family: Inter, "Segoe UI", Arial, sans-serif; color: #17202d; background: #f3f7fc; font-synthesis: none; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
.auth-body { background: radial-gradient(ellipse at top, #fff 0, #f3f7fc 54rem); }
.auth-layout { display: flex; min-height: 100vh; align-items: center; flex-direction: column; justify-content: center; padding: 32px 18px 22px; }
.auth-brand { margin: 0 0 25px; color: #111927; font-size: 26px; font-weight: 750; letter-spacing: -.055em; text-decoration: none; }
.auth-brand span { display: inline-block; }
.auth-card { width: min(100%, 440px); padding: 34px; border: 1px solid #e1e8f0; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgb(26 47 76 / 8%); }
.auth-eyebrow { margin: 0 0 9px; color: #1764ca; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.auth-card h1 { margin: 0; color: #152235; font-size: 27px; font-weight: 660; letter-spacing: -.035em; line-height: 1.2; }
.auth-intro { margin: 10px 0 23px; color: #637185; font-size: 14px; line-height: 1.55; }
.auth-form { display: grid; gap: 9px; }
.auth-form label { margin-top: 6px; color: #2d3c50; font-size: 12px; font-weight: 550; }
.auth-form input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid #d6dfeb; border-radius: 9px; outline: 0; color: #17202d; background: #fff; font: 14px/1 inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.auth-form input:focus { border-color: #1767d1; box-shadow: 0 0 0 3px rgb(23 103 209 / 12%); }
.auth-form small { margin: -3px 0 7px; color: #69788c; font-size: 11px; line-height: 1.45; }
.auth-primary { min-height: 46px; margin-top: 10px; padding: 0 17px; border: 0; border-radius: 9px; color: #fff; background: #1266d6; font: 600 14px/1 inherit; cursor: pointer; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.auth-primary:hover:not(:disabled) { transform: translateY(-1px); background: #0d58bb; box-shadow: 0 8px 18px rgb(18 102 214 / 19%); }
.auth-primary:disabled { cursor: not-allowed; opacity: .55; }
.auth-primary:focus-visible, .auth-google:focus-visible, .auth-links a:focus-visible, .auth-bottom-link a:focus-visible { outline: 3px solid rgb(18 102 214 / 35%); outline-offset: 3px; }
.auth-status { min-height: 18px; margin: 2px 0 0; color: #b42318; font-size: 12px; line-height: 1.45; }
.auth-status.is-success { color: #167346; }
.auth-inline-message { margin: 16px 0; padding: 10px 12px; border-radius: 8px; color: #176a45; background: #ecf8f1; font-size: 12px; line-height: 1.5; }
.auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: #65748a; font-size: 12px; }
.auth-links a, .auth-bottom-link a { color: #125dbd; font-weight: 550; text-decoration: none; }
.auth-links a:hover, .auth-bottom-link a:hover { text-decoration: underline; }
.auth-bottom-link { margin: 17px 0 0; color: #65748a; font-size: 12px; text-align: center; }
.auth-divider { display: flex; align-items: center; gap: 13px; margin: 19px 0 14px; color: #6d7785; font-size: 11px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: #e7edf4; content: ""; }
.auth-google { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 10px; border: 1px solid #d9e1eb; border-radius: 9px; color: #26364c; background: #fff; font-size: 13px; font-weight: 550; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.auth-google:hover { border-color: #b8c8dd; background: #f9fbfe; }
.google-mark { color: #3a74d6; font-size: 17px; font-weight: 700; }
.auth-footer { margin-top: 22px; color: #6d7785; font-size: 11px; }
.auth-admin .auth-brand { letter-spacing: -.04em; }
.auth-admin .auth-card { border-top: 3px solid #1764ca; }
@media (max-width: 520px) { .auth-layout { padding: 22px 14px; } .auth-card { padding: 25px 21px; border-radius: 14px; } .auth-card h1 { font-size: 24px; } .auth-links { align-items: flex-start; flex-direction: column; } }