.auth-body { min-height: 100vh; padding: clamp(1rem, 3vw, 2.5rem); background: var(--sx-gradient-soft); }
.auth-shell { width: min(100%, 1440px); min-height: calc(100vh - clamp(2rem, 6vw, 5rem)); margin-inline: auto; overflow: hidden; display: grid; grid-template-columns: minmax(380px, .92fr) minmax(520px, 1.08fr); border: 1px solid rgba(222,218,239,.9); border-radius: 32px; background: #fff; box-shadow: 0 28px 80px rgba(50,42,94,.14); }
.auth-aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2.5rem, 5vw, 5rem);
  background: var(--sx-gradient-main);
  color: var(--sx-text);
}
.auth-aside::before, .auth-aside::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); }
.auth-aside::before { inline-size: 28rem; block-size: 28rem; inset-block-start: -13rem; inset-inline-end: -10rem; background: rgba(255,255,255,.48); box-shadow: 0 0 0 4rem rgba(255,255,255,.12); }
.auth-aside::after { inline-size: 19rem; block-size: 19rem; inset-block-end: -9rem; inset-inline-start: -8rem; background: rgba(255,255,255,.32); box-shadow: 0 0 0 3rem rgba(255,255,255,.12); }
.brand-lockup { display: inline-flex; align-items: center; gap: .65rem; color: var(--sx-text); font-size: 1rem; font-weight: 850; text-decoration: none; }
.brand-lockup:hover { color: var(--sx-text); }
.brand-symbol { inline-size: 2.4rem; block-size: 2.4rem; display: grid; place-items: center; border-radius: .8rem; background: var(--sx-gradient-primary); color: #fff; box-shadow: 0 10px 24px rgba(109,74,255,.23); }
.auth-brand { position: relative; z-index: 1; }
.auth-aside > div:not(.auth-security) { max-width: 34rem; }
.auth-aside .eyebrow { color: var(--sx-primary-strong); }
.auth-aside h1 { max-width: 34rem; margin-block: 1rem 1.25rem; font-size: clamp(2.35rem, 4vw, 3.1rem); }
.auth-aside p { max-width: 32rem; color: #565b70; font-size: 1.08rem; }
.auth-security { width: fit-content; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(109,74,255,.15); border-radius: 999px; padding: .48rem .75rem; background: rgba(255,255,255,.58); color: #4f5367; font-size: .76rem; font-weight: 700; backdrop-filter: blur(10px); }
.auth-panel { position: relative; display: grid; place-items: center; padding: clamp(4.5rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem) 2rem; background: #fff; }
.auth-panel-top { position: absolute; inset-block-start: 1.2rem; inset-inline-end: clamp(1rem, 4vw, 2rem); }
.auth-card { width: min(100%, 32rem); padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-xl); background: rgba(255,255,255,.96); box-shadow: var(--sx-shadow-md); }
.auth-card.wide { width: min(100%, 44rem); }
.auth-card h2 { margin: 0 0 .55rem; font-size: clamp(1.75rem, 2.4vw, 2.15rem); }
.auth-card > p, .auth-card > div > p { margin-block-end: 1.5rem; color: var(--sx-text-secondary); }
.auth-card form + .auth-footer { padding-block-start: 1.3rem; border-top: 1px solid var(--sx-border); }
.auth-footer { margin-block-start: 1.3rem; color: var(--sx-text-secondary); text-align: center; font-size: .84rem; }
.auth-footer a { font-weight: 760; }
.setup-badge { display: inline-flex; margin-block-end: .85rem; border: 1px solid #d6cbfa; border-radius: 999px; padding: .34rem .62rem; background: var(--sx-primary-soft); color: var(--sx-primary); font-size: .69rem; font-weight: 800; }
.owner-notice { margin-block: 1.1rem; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-md); padding: .9rem 1rem; background: var(--sx-surface-soft); color: var(--sx-text-secondary); font-size: .8rem; }
.auth-card .sx-state { border: 0; padding: 1rem 0; box-shadow: none; }

@media (max-width: 991.98px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { min-height: 15rem; padding: 2rem; }
  .auth-aside h1 { margin-block-end: .55rem; }
  .auth-security { margin-block-start: 1.25rem; }
  .auth-panel { padding-block-start: 4.75rem; }
}
@media (max-width: 575.98px) {
  .auth-body { padding: 0; }
  .auth-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .auth-aside { min-height: auto; gap: 1.2rem; padding: 1.25rem; }
  .auth-aside > div:not(.auth-security) { display: none; }
  .auth-security { display: none; }
  .auth-panel { align-items: start; padding: 4.5rem .75rem 1.25rem; }
  .auth-card { border-radius: var(--sx-radius-lg); padding: 1.1rem; box-shadow: var(--sx-shadow-sm); }
  .auth-card .row > [class*="col-"] { width: 100%; }
}