.access-body {
    background:
        radial-gradient(circle at 77% 22%, rgba(0, 94, 255, .2), transparent 34rem),
        linear-gradient(180deg, #01091c, #010616 75%);
}

.access-page {
    padding-top: 40px;
}

.access-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 22px;
}

.access-title {
    max-width: 760px;
}

.access-title h1 {
    font-size: clamp(3.2rem, 5.4vw, 5.5rem);
    white-space: nowrap;
}

.access-title > p:not(.kicker) {
    max-width: 690px;
    margin-bottom: 0;
}

.access-brandline {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 410px;
    justify-content: flex-end;
}

.access-brandline img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    border-radius: 20px;
}

.access-brandline strong,
.access-brandline small {
    display: block;
}

.access-brandline strong {
    font-size: 2rem;
}

.access-brandline strong span {
    color: var(--orange);
}

.access-brandline small {
    margin-top: 3px;
    color: var(--muted);
}

.access-stage {
    display: grid;
    grid-template-columns: minmax(720px, 1.55fr) minmax(390px, .85fr);
    gap: 18px;
    align-items: stretch;
}

.access-stage .auth-grid {
    margin: 0;
    align-items: stretch;
}

.access-stage .auth-card {
    padding: 24px;
    background: linear-gradient(150deg, rgba(4, 25, 59, .97), rgba(2, 14, 35, .98));
    box-shadow: 0 20px 45px rgba(0, 41, 112, .2);
}

.access-stage .auth-card form {
    margin-top: 15px;
}

.access-stage input {
    min-height: 46px;
}

.remember {
    margin: 10px 0 5px;
}

.account-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.resend-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.resend-link:disabled {
    opacity: .55;
    cursor: wait;
}
.access-showcase {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    border: 1px solid rgba(0, 132, 255, .55);
    border-radius: 18px;
    background: #02122f;
    box-shadow: 0 0 45px rgba(0, 94, 255, .18);
}

.access-showcase > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

.showcase-points {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 8px;
    padding: 16px;
    color: #dceaff;
    border: 1px solid rgba(0, 170, 255, .55);
    border-radius: 12px;
    background: rgba(1, 13, 35, .82);
    backdrop-filter: blur(12px);
}

.showcase-points span::first-letter {
    color: #19c8ff;
}

.access-page .account-preview {
    margin-top: 18px;
    background:
        linear-gradient(110deg, rgba(5, 30, 68, .98), rgba(3, 16, 42, .92)),
        url('/assets/access-scene-v4.png') center 78% / cover;
}

.reset-page {
    width: min(1100px, calc(100% - 30px));
    min-height: 680px;
    margin: 35px auto 0;
    display: grid;
    grid-template-columns: minmax(360px, .85fr) minmax(420px, 1.15fr);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #087eea;
    border-radius: 20px;
    background: #03142f;
}

.reset-card {
    align-self: center;
    margin: 25px;
}

.reset-art {
    min-height: 600px;
    background: url('/assets/access-scene-v4.png') 72% center / cover;
}

@media (max-width: 1200px) {
    .access-stage {
        grid-template-columns: 1fr;
    }

    .resend-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.resend-link:disabled {
    opacity: .55;
    cursor: wait;
}
.access-showcase {
        min-height: 480px;
    }
}

@media (max-width: 900px) {
    .access-brandline {
        display: none;
    }

    .access-stage .auth-grid,
    .reset-page {
        grid-template-columns: 1fr;
    }

    .reset-art {
        min-height: 360px;
        order: -1;
    }
}

@media (max-width: 700px) {
    .access-title h1 {
        font-size: clamp(2.9rem, 15vw, 4rem);
        white-space: normal;
    }

    .resend-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.resend-link:disabled {
    opacity: .55;
    cursor: wait;
}
.access-showcase {
        min-height: 360px;
    }

    .showcase-points {
        left: 12px;
        right: 12px;
        bottom: 12px;
        grid-template-columns: 1fr 1fr;
    }

    .reset-card {
        margin: 12px;
    }
}