.auth { min-height: calc(100dvh - var(--k-top-bar) - 56px); display: grid; gap: 16px; align-items: stretch; max-width: 1100px; margin: 0 auto; }
.auth .hero { display: none; position: relative; overflow: hidden; background: var(--k-hero-bg) url("../img/pattern-A-structured-carbon.svg") center/cover; color: var(--k-hero-fg); border-radius: var(--k-radius-xl); border: 1px solid var(--k-glass-hairline); padding: 40px; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 480px; }
.auth .hero h2 { font: var(--k-display-s); } .auth .hero p { font: var(--k-body-l); max-width: 32ch; }
.auth .hero img { height: 40px; width: auto; align-self: flex-start; margin-bottom: auto; }
.auth form { align-self: center; display: grid; gap: 16px; padding: 24px; }
.auth h1 { font: var(--k-headline-s); }
@media (min-width: 840px) { .auth:not(.auth--single) { grid-template-columns: 1.1fr 1fr; } .auth .hero { display: flex; } }
@media (max-width: 839px) { .auth { align-content: start; } }
.auth-brand { display: flex; align-items: center; gap: 10px; font: var(--k-headline-s); font-weight: 800; }
.auth-brand img { height: 36px; width: auto; }
@media (min-width: 840px) { .auth:not(.auth--single) .auth-brand { display: none; } }
.auth--single { grid-template-columns: minmax(0, 1fr); width: min(440px, 100%); min-height: 0; padding-block: 24px; align-content: start; }
.auth--single .card { display: grid; gap: 16px; }
.auth form > .help { font: var(--k-body-s); color: var(--k-fg-muted); }