body.auth-workspace { background: linear-gradient(135deg, #173f78, #176bc4); color: #1d2939; }
#page.auth-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr); min-height: calc(100svh - 44px); margin: 22px; overflow: hidden; border-radius: 30px; background: #fff; color: #1d2939; box-shadow: 0 24px 70px #254a7f39; }
.auth-content { position: relative; display: grid; place-items: center; min-width: 0; padding: 92px 32px 56px; }
.auth-card { width: min(100%, 430px); padding: 32px; border: 1px solid #e4ebf4; border-radius: 24px; background: #fff; box-shadow: 0 16px 46px #29436810; }
.auth-brand { display: block; width: 210px; margin: 0 0 32px; }
.auth-brand img { display: block; width: 100%; height: auto; }
.auth-card h1, .auth-card h2 { color: #1d2939; }
.auth-card :is(label, p, span) { color: #4b5571; }
.auth-card :is(input:not([type="checkbox"]), select, textarea) { border: 1px solid #d9e2ef; border-radius: 11px; background: #f8fbfe; color: #1d2939; }
.auth-card :is(input:not([type="checkbox"]), select, textarea):focus { border-color: #578edc; outline: 3px solid #adcdfa; outline-offset: 1px; }
.auth-card :is(button[type="submit"], input[type="submit"]) { min-height: 46px; border-radius: 11px; background: linear-gradient(110deg, #2563eb, #1d4ed8); color: #fff; font-weight: 700; }
.auth-card :is(button[type="submit"], input[type="submit"]):hover { background: linear-gradient(110deg, #1d4ed8, #1e40af); }
.auth-card button[type="submit"] span { color: inherit; }
.auth-card a { color: #497cc4; }
.auth-logout h1 { margin: 0 0 12px; font-size: 24px; line-height: 1.25; font-weight: 700; }
.auth-logout p { margin: 0 0 28px; line-height: 1.6; }
.auth-card .auth-primary-action { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 16px; border-radius: 11px; background: #2563eb; color: #fff; font-weight: 700; text-align: center; }
.auth-card .auth-primary-action span { color: inherit; font-size: 20px; }
.auth-card .auth-primary-action:hover { background: #1d4ed8; }
.auth-card .auth-primary-action:focus-visible { outline: 3px solid #578edc; outline-offset: 3px; }
.auth-content > div.absolute { padding: 14px 18px; }
.auth-content > div.absolute a { color: #497cc4; }
.auth-promo { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(36px, 5vw, 80px); background: linear-gradient(145deg, #153e75, #1d4ed8 50%, #176bc4); background-position: center; background-size: cover; color: #fff; }
.auth-promo::before, .auth-promo::after { content: ""; position: absolute; z-index: -1; border: 1px solid #ffffff33; border-radius: 50%; }
.auth-promo::before { width: 550px; height: 550px; right: -250px; top: -300px; box-shadow: 0 0 0 90px #ffffff0d; }
.auth-promo::after { width: 400px; height: 400px; left: -225px; bottom: -200px; box-shadow: 0 0 0 65px #ffffff0d; }
.auth-promo-content { max-width: 500px; }
.auth-promo-icon { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 40px; border-radius: 24px; background: #ffffff24; font-size: 48px; }
.auth-promo-eyebrow { margin-bottom: 12px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.auth-promo h2 { margin: 0 0 18px; color: #fff; font-size: clamp(36px, 4vw, 60px); font-weight: 700; line-height: 1.08; letter-spacing: -.05em; }
.auth-promo p:not(.auth-promo-eyebrow) { max-width: 390px; color: #fff; font-size: 16px; line-height: 1.7; }
.auth-promo-features { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 40px; }
.auth-promo-features > span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border: 1px solid #ffffff55; border-radius: 11px; background: #ffffff1a; color: #fff; font-size: 12px; font-weight: 600; }
.auth-promo-features .material-symbols-outlined { font-size: 23px; }
@media (max-width: 850px) {
  #page.auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-promo { display: none; }
}
@media (max-width: 600px) {
  #page.auth-page { min-height: 100svh; margin: 0; border-radius: 0; }
  .auth-content { padding: 76px 16px 32px; }
  .auth-card { padding: 24px; border-radius: 19px; }
}