.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 15% 10%, #edf4ef 0, transparent 34%), #f4f5f1; }
.auth-card { width: min(100%, 500px); padding: 42px 48px 46px; background: #fff; border: 1px solid #dce3dd; border-radius: 14px; box-shadow: 0 20px 60px rgba(25, 43, 49, .08); }
.auth-brand { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 52px; color: #1b3037; text-align: center; }
.auth-brand .brand-wordmark { color: #1b3037; font-size: 38px; letter-spacing: -3px; }
.product-name { color: #718087; font: 600 26px/1.1 Arial, sans-serif; letter-spacing: -.5px; white-space: nowrap; }
.auth-card h1 { margin: 0 0 24px; font: 600 30px/1.1 Arial, sans-serif; letter-spacing: -.8px; text-align: center; }
.auth-card h1 span { color: #f1785d; }
.auth-copy { max-width: 390px; color: #718087; font-size: 16px; line-height: 1.5; margin-bottom: 28px; }
.auth-form { display: grid; gap: 22px; }
.auth-form label { display: grid; gap: 8px; color: #526267; font-weight: 700; }
.auth-form input:not([type="submit"]) { width: 100%; box-sizing: border-box; padding: 15px 16px; border: 1px solid #d5ded8; border-radius: 7px; font: inherit; color: #1b3037; background: #fbfcfa; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 52px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: #6e7d80; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.password-toggle:hover, .password-toggle:focus-visible { background: #eaf0eb; color: #1b3037; outline: none; }
.auth-form .primary-button { width: 100%; margin-top: 8px; }
.logout-link { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
[data-role="viewer"] form[action="/runs"], [data-role="viewer"] form[action*="/sync"], [data-role="viewer"] form[action*="toggle"], [data-role="viewer"] .prompt-actions, [data-role="viewer"] a[href*="/new"] { display: none; }
@media (max-width: 600px) { .auth-page { padding: 16px; } .auth-card { padding: 30px 24px; } .auth-brand { gap: 10px; margin-bottom: 42px; } .auth-brand .brand-wordmark { font-size: 32px; } .product-name { font-size: 22px; } }
.sso-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 12px; padding: 14px 16px; border: 1px solid #d5ded8; border-radius: 7px; background: #fff; color: #1b3037; font: 700 13px Arial, sans-serif; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.sso-button:hover, .sso-button:focus-visible { border-color: #1b3037; box-shadow: 0 2px 10px rgba(25, 43, 49, .1); outline: none; }
.sso-mark { flex: 0 0 auto; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0; color: #8a9691; font: 700 10px Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e1e7e2; }