:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #202839; background: #f6f7f9; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: #3448a1; text-decoration: none; }
a:hover { text-decoration: underline; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #899beb; outline-offset: 4px; }
.auth-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 5vw; border-bottom: 1px solid #e3e6ec; background: white; }
.auth-brand { display: flex; align-items: center; gap: 12px; color: #202839; font-weight: 700; letter-spacing: -.4px; }
.auth-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: white; background: #3448a1; }
.auth-brand-copy { display: flex; flex-direction: column; gap: 3px; }
.auth-brand-copy small { color: #657084; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.clerk-controls { display: flex; align-items: center; gap: 16px; }
.clerk-controls a { margin-left: 16px; font-size: 14px; font-weight: 600; }
.auth-main { max-width: 1160px; margin: 0 auto; padding: 80px 36px; display: grid; grid-template-columns: 1fr 440px; align-items: center; gap: 70px; min-height: calc(100vh - 165px); }
.auth-eyebrow { color: #657398; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; }
.auth-intro h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -1.7px; margin: 22px 0; }
.auth-intro > p:not(.auth-eyebrow) { color: #657084; max-width: 420px; font-size: 16px; line-height: 1.7; margin-bottom: 38px; }
.auth-feature { padding: 15px 0; border-top: 1px solid #e0e4eb; font-size: 14px; }
.auth-feature span { margin-right: 18px; color: #8c98b4; font-size: 11px; font-weight: 600; }
.auth-card { min-width: 0; padding: 22px; background: white; border: 1px solid #e5e8ef; border-radius: 20px; box-shadow: 0 12px 40px #23304608; }
.auth-card h2 { font-size: 27px; letter-spacing: -.7px; }
.auth-card p { line-height: 1.6; overflow-wrap: anywhere; }
#clerk-account { padding: 10px; }
#clerk-account-message { color: #657084; font-size: 14px; }
#clerk-auth-status { padding: 20px; line-height: 1.6; color: #657084; }
.auth-primary { display: block; text-align: center; border-radius: 8px; background: #3448a1; color: white; padding: 13px 18px; margin: 24px 0 14px; font-size: 14px; font-weight: 600; }
.auth-secondary { display: block; width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #dce1eb; background: white; color: #3448a1; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; }
.auth-footer { text-align: center; padding: 24px; color: #8992a3; font-size: 12px; }
@media (max-width: 850px) { .auth-main { grid-template-columns: 1fr; max-width: 510px; gap: 28px; padding: 40px 20px; } .auth-intro h1 { font-size: 31px; } .auth-feature { display: none; } .auth-intro > p:not(.auth-eyebrow) { margin-bottom: 0; } }
@media (max-width: 440px) { .auth-header { padding: 18px 16px; } .auth-brand { font-size: 13px; gap: 8px; } .auth-brand-copy small { font-size: 9px; } .clerk-controls a { margin-left: 8px; font-size: 12px; } .auth-card { padding: 8px; } }