.focused-auth-page { background: #111820; }

.focused-auth-shell {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: #111820;
}

.focused-auth-shell::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url("../../images/ui/auth/registration-background.webp") center 52% / cover no-repeat;
}

.focused-auth-main { min-width: 0; display: grid; align-items: center; padding: clamp(1.2rem, 3.2vw, 2.8rem); }
.focused-auth-stage { width: min(100%, 82rem); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem); gap: clamp(1.75rem, 6vw, 5rem); align-items: start; justify-items: end; margin-inline: auto; }
.focused-auth-brand { align-self: start; justify-self: start; margin-top: clamp(0.5rem, 4vh, 3.5rem); }
.focused-auth-panel { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); background: rgb(8 15 22 / 0.48); color: var(--c-shell-text); }
.focused-auth-intro { margin-bottom: 1.5rem; }
.focused-auth-intro h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.7rem); text-shadow: 0 0.1rem 0.16rem rgb(0 0 0 / 0.66); }
.focused-auth-copy { margin: 0 0 var(--space-4); color: #e7e1d3; font-weight: 500; line-height: 1.55; text-shadow: 0 0.09rem 0.18rem rgb(0 0 0 / 0.72); }

.focused-auth-status { margin-bottom: var(--space-4); color: var(--c-shell-text); }
.focused-auth-switch { --guest-auth-switch-color: #e7e1d3; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-fine) solid rgb(215 169 60 / 0.28); font-weight: 500; text-shadow: 0 0.09rem 0.18rem rgb(0 0 0 / 0.72); }
.focused-auth-switch a { font-weight: 800; }

@media (min-width: 54.0625rem) {
    .focused-auth-stage { box-sizing: border-box; padding-inline-end: clamp(1rem, 2.25vw, 2.25rem); }
}

@media (max-width: 54rem) {
    .focused-auth-main { align-items: start; }
    .focused-auth-stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .focused-auth-brand { --guest-brand-width: min(22.5rem, 88vw); margin-top: 0; justify-self: start; }
    .focused-auth-panel { width: min(100%, 34rem); }
}

@media (max-width: 34rem) {
    .focused-auth-main { padding: var(--space-4); }
    .focused-auth-panel { padding: var(--space-4); }
}