:root {
    --member-auth-green: #2dad4b;
    --member-auth-green-dark: #198638;
    --member-auth-ink: #17221b;
    --member-auth-muted: #7b867e;
    --member-auth-line: #e6ebe7;
}

.member-auth-page {
    min-height: calc(100vh - 132px);
    padding: clamp(22px, 4vw, 52px) 14px 34px;
    display: grid;
    place-items: center;
    background: #fff;
}

.member-auth-shell { width: min(100%, 430px); }
.member-auth-layout { width: 100%; }
.member-auth-form-area { position: relative; width: 100%; }

.member-auth-hero {
    position: relative;
    z-index: 1;
    min-height: 162px;
    padding: 5px 18px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    text-align: center;
}

.member-auth-logo {
    width: 68px;
    height: 68px;
    margin-bottom: 13px;
    border: 4px solid #fff;
    border-radius: 16px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 8px 22px rgba(25, 79, 38, .17);
}

.member-auth-hero h1 {
    margin: 0;
    color: var(--member-auth-ink);
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.025em;
}

.member-auth-hero h1 span { font-size: 1rem; }
.member-auth-hero p { margin: 7px 0 0; color: var(--member-auth-muted); font-size: .7rem; font-weight: 650; }

.member-auth-decoration {
    position: absolute;
    z-index: -1;
    color: rgba(39, 169, 72, .12);
    pointer-events: none;
}

.member-auth-decoration::before,
.member-auth-decoration::after {
    position: absolute;
    border: 1px solid rgba(39, 169, 72, .14);
    border-radius: 50%;
    content: "";
}

.member-auth-decoration--left { left: -35px; bottom: 6px; font-size: 62px; transform: rotate(-18deg); }
.member-auth-decoration--left::before { width: 92px; height: 92px; left: -18px; top: -17px; }
.member-auth-decoration--left::after { width: 122px; height: 122px; left: -33px; top: -32px; }
.member-auth-decoration--right { right: -27px; bottom: -9px; color: rgba(25, 107, 49, .32); font-size: 105px; transform: rotate(-23deg); }
.member-auth-decoration--right::before { width: 62px; height: 62px; left: -36px; top: 15px; border-color: rgba(39, 169, 72, .1); }
.member-auth-decoration--right::after { display: none; }

.member-auth-card {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: -15px 0 0 !important;
    border: 1px solid #eef2ef !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 13px 35px rgba(24, 65, 34, .11) !important;
}

.member-auth-card > .card-body { padding: 20px 17px 17px !important; }
.member-auth-fields { display: grid; gap: 12px; }
.member-auth-field { display: grid; gap: 5px; }
.member-auth-input-wrap { position: relative; }

.member-auth-input-wrap > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 15px;
    color: var(--member-auth-green);
    font-size: .78rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.member-auth-input-wrap .form-control {
    min-height: 47px;
    padding: 0 45px 0 42px;
    border: 1px solid var(--member-auth-line) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--member-auth-ink) !important;
    font-size: .7rem;
    font-weight: 650;
    box-shadow: 0 5px 14px rgba(34, 62, 42, .035) !important;
}

.member-auth-input-wrap .form-control:focus {
    border-color: var(--member-auth-green) !important;
    box-shadow: 0 0 0 3px rgba(45, 173, 75, .1) !important;
}

.member-auth-password-toggle {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 7px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #8a948d;
    transform: translateY(-50%);
}

.member-auth-reset-row { display: flex; justify-content: flex-end; }
.member-auth-reset { color: var(--member-auth-green-dark) !important; font-size: .64rem; font-weight: 800; cursor: pointer; }

.member-auth-submit {
    min-height: 46px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #38bd59, #239b43);
    color: #fff;
    font-size: .72rem;
    font-weight: 850;
    box-shadow: 0 9px 18px rgba(38, 153, 65, .21);
}

.member-auth-submit span,
.member-auth-submit i { color: #fff !important; }

.member-auth-divider { display: flex; align-items: center; gap: 12px; color: #a0aaa3; font-size: .58rem; font-weight: 750; }
.member-auth-divider::before, .member-auth-divider::after { height: 1px; flex: 1; background: #edf0ed; content: ""; }
.member-auth-divider span { color: #9da79f; white-space: nowrap; }

.member-auth-socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.member-auth-socials a {
    min-height: 42px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--member-auth-line);
    border-radius: 9px;
    background: #fff;
    color: #27322b;
    font-size: .61rem;
    font-weight: 750;
    cursor: pointer;
}
.member-auth-socials img { width: 17px; height: 17px; object-fit: contain; }

.member-auth-register-action {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    background: #f1faf3;
    color: var(--member-auth-green-dark) !important;
    font-size: .63rem;
    font-weight: 800;
    cursor: pointer;
}

.member-auth-register-prompt { margin-top: 23px; display: grid; gap: 5px; text-align: center; }
.member-auth-register-prompt span { color: #8a958d; font-size: .64rem; font-weight: 650; }
.member-auth-register-prompt a { color: var(--member-auth-green-dark) !important; font-size: .68rem; font-weight: 850; cursor: pointer; }
.member-auth-register-prompt i { margin-left: 4px; font-size: .58rem; }

.member-auth-page--embedded { min-height: auto; padding: 0; background: transparent; }
.member-auth-page--embedded .member-auth-hero { min-height: 145px; }

body.dark-mode .member-auth-page { background: #0b100d !important; }
body.dark-mode .member-auth-card { background: #111713 !important; border-color: rgba(255, 255, 255, .05) !important; }
body.dark-mode .member-auth-hero h1 { color: #f4f7f5 !important; }
body.dark-mode .member-auth-hero p,
body.dark-mode .member-auth-register-prompt span { color: #9eaaa1 !important; }
body.dark-mode .member-auth-submit span,
body.dark-mode .member-auth-submit i { color: #fff !important; }

@media (max-width: 440px) {
    .member-auth-page { min-height: calc(100vh - 112px); padding: 25px 10px 25px; align-items: start; }
    .member-auth-hero { min-height: 156px; padding-top: 7px; }
    .member-auth-card > .card-body { padding: 17px 12px 14px !important; }
    .member-auth-fields { gap: 10px; }
    .member-auth-register-prompt { margin-top: 18px; }
}