body {
    min-height: 100vh;
    background: radial-gradient(circle at 14% 12%, rgba(201, 168, 76, .12) 0%, rgba(201, 168, 76, 0) 42%),
                linear-gradient(160deg, var(--void) 0%, #0f1014 55%, #131823 100%);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-brand {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 5vw, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border);
    background: linear-gradient(155deg, rgba(10, 10, 11, .65) 0%, rgba(17, 17, 20, .74) 100%);
}

.auth-brand::before,
.auth-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(201, 168, 76, .2);
}

.auth-brand::before {
    width: min(82vw, 460px);
    height: min(82vw, 460px);
    right: -22%;
    top: -24%;
}

.auth-brand::after {
    width: min(66vw, 330px);
    height: min(66vw, 330px);
    left: -16%;
    bottom: -18%;
    border-color: rgba(245, 240, 232, .14);
}

.brand-inner {
    width: 100%;
    max-width: 560px;
    position: relative;
    z-index: 1;
}

.brand-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.brand-logo {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 1px solid var(--gold-dk);
    background: var(--gold-bg2);
    color: var(--gold-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.brand-name {
    font-family: var(--serif);
    color: var(--cream);
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    line-height: 1;
    font-weight: 500;
    letter-spacing: .01em;
}

.tagline {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 44ch;
    margin-bottom: 20px;
}

.scene {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(44, 44, 51, .48) 0%, rgba(24, 24, 28, .42) 100%);
    min-height: clamp(230px, 33vh, 340px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-shadow: inset 0 1px 0 rgba(245, 240, 232, .05);
}

.scene-label {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--faint);
    font-weight: 600;
}

.scene-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    text-align: center;
    font-size: 11.5px;
    color: var(--muted);
}

.scene svg {
    width: min(100%, 460px);
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
}

.auth-form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(26px, 4vw, 48px) clamp(18px, 3vw, 36px);
    background: linear-gradient(170deg, #efe7d9 0%, #f6f1e8 100%);
}

.auth-card {
    width: 100%;
    max-width: 520px;
    border-radius: var(--radius-xl);
    border: 1px solid #dfd5c4;
    background: #f8f5ef;
    box-shadow: 0 22px 54px rgba(10, 10, 11, .26);
    padding: clamp(28px, 4vw, 42px) clamp(24px, 4vw, 38px);
    color: var(--void);
    animation: fadeUp .28s ease both;
}

.auth-card h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 4.1vw, 2.55rem);
    line-height: 1;
    margin-bottom: 8px;
    font-weight: 500;
    color: #1b2029;
}

.auth-card .sub {
    color: #616b78;
    font-size: 14px;
    margin-bottom: 24px;
}

.foot-note {
    text-align: center;
    margin-top: 20px;
    font-size: 11px;
    color: #6b7480;
}

@media (max-width: 980px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-brand {
        min-height: 300px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .scene {
        min-height: 210px;
    }
}