.auth-body { min-height: 100vh; background: #fbfbf8; }
.auth-layout { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr); min-height: 100vh; }
.auth-story { position: relative; overflow: hidden; background: #1b1e31; color: #c3bedc; padding: 45px 50px 30px; display: flex; flex-direction: column; }
.auth-story::after { content: ""; position: absolute; width: 520px; height: 520px; border: 1px solid #8177cc16; border-radius: 50%; bottom: -150px; right: -280px; box-shadow: 0 0 0 70px #8177cc06, 0 0 0 140px #8177cc04; pointer-events: none; }
.auth-story .brand { font-size: 14px; padding: 0; }
.auth-story .brand-subtitle { font-size: 11px; }
.auth-story-content { margin: auto 0; padding: 70px 0; position: relative; z-index: 1; }
.auth-story-label { display: flex; align-items: center; gap: 9px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #9894b6; margin-bottom: 25px; }
.auth-story h2 { color: #f5f2ff; font-size: clamp(32px, 3.7vw, 54px); line-height: 1.13; letter-spacing: -2px; font-weight: 500; margin-bottom: 24px; }
.auth-story-content > p { max-width: 330px; color: #9f9bb6; font-size: 14px; line-height: 1.85; }
.auth-journey { display: flex; align-items: center; gap: 13px; margin-top: 40px; color: #b5a9d7; }
.auth-journey > span { display: flex; flex-direction: column; gap: 9px; font-size: 10px; }
.auth-journey > span .icon { width: 20px; height: 20px; }
.auth-journey i { width: 35px; height: 1px; background: #75699a40; margin-bottom: 24px; }
.auth-story-footer { margin: 0; font-size: 10px; color: #9792b0; }
.auth-shell { width: 100%; max-width: 465px; margin: auto; padding: 65px 30px; }
.auth-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 19px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #776885; margin-bottom: 18px; }
.auth-lock { display: inline-flex; align-items: center; justify-content: center; background: #ede8f7; border: 1px solid #e5dcef; border-radius: 12px; width: 42px; height: 42px; color: #9676b0; }
.auth-lock .icon { width: 19px; height: 19px; }
.auth-card h1 { font-size: 28px; letter-spacing: -.9px; margin: 0 0 10px; color: #333044; }
.auth-card p { line-height: 1.7; color: #706779; font-size: 13px; }
.auth-card p small { font-size: 11px; }
.auth-card a { color: #61549a; text-decoration: none; }
.auth-card a:hover { text-decoration: underline; }
.auth-form { display: grid; gap: 19px; margin: 27px 0 22px; }
.auth-form label { display: block; font-size: 12px; font-weight: 550; color: #665971; margin-bottom: 7px; }
.auth-form input:not([type=checkbox]) { min-height: 44px; border-color: #e6dcea; font-size: 13px; }
.auth-form input[type=submit], .auth-button { cursor: pointer; border: 1px solid #5754d7; background: #5754d7; color: #fff; padding: 12px 16px; border-radius: 7px; font-weight: 550; text-decoration: none; display: inline-flex; justify-content: center; font-size: 12px; }
.auth-form input[type=submit]:hover, .auth-button:hover { background: #4643bb; color: #fff; }
.auth-form input:focus { border-color: #9685bc; box-shadow: 0 0 0 3px #f4edf8; }
.auth-footer { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #756d7e; margin: 30px 0 0; padding-top: 21px; border-top: 1px solid #eee6f2; }
.auth-footer .icon { width: 13px; height: 13px; }
.auth-card .flash { border-radius: 7px; padding: 12px; margin-bottom: 20px; font-size: 12px; }
.auth-qr { display: flex; justify-content: center; padding: 15px; margin: 20px 0; background: #fff; border: 1px solid #eee5f4; border-radius: 10px; }
.auth-qr svg { max-width: 100%; height: auto; }
.secret-value { overflow-wrap: anywhere; background: #f1eaf7; padding: 12px; border-radius: 6px; font-family: monospace; }
.recovery-codes { display: grid; gap: 8px; padding-left: 20px; font-family: monospace; font-size: 14px; color: #715b83; }
.auth-form label.inline-checkbox-label { display: inline; }
.auth-mobile-brand { display: none; }
@media (min-width: 1500px) { .auth-story { padding-left: 70px; padding-right: 70px; } }
@media (max-width: 950px) {
  .auth-layout { grid-template-columns: minmax(280px, .8fr) minmax(0, 1fr); }
  .auth-story { padding: 35px 28px; }
  .auth-story h2 { font-size: 36px; letter-spacing: -1.1px; }
  .auth-story-content > p { font-size: 12px; }
  .auth-story .brand { font-size: 12px; }
  .auth-journey { gap: 10px; }
  .auth-journey i { width: 20px; }
}
@media (max-width: 680px) {
  .auth-layout { display: block; }
  .auth-story { display: none; }
  .auth-shell { padding: 34px 25px 40px; max-width: 430px; }
  .auth-mobile-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 45px; color: #71607f; font-size: 12px; font-weight: 600; }
  .auth-mobile-brand .brand-mark { width: 33px; height: 33px; }
  .auth-card h1 { font-size: 27px; }
}