:root {
    --auth-primary: var(--primary-color);
    --auth-primary-second: var(--primary-second-color);

    --auth-primary-soft: color-mix(in srgb, var(--primary-color) 10%, #ffffff);

    --auth-primary-border: color-mix(
        in srgb,
        var(--primary-color) 25%,
        #ffffff
    );

    --auth-primary-dark: color-mix(in srgb, var(--primary-color) 70%, #111111);

    --auth-bg: #f7f7f5;
    --auth-card: #ffffff;

    --auth-text: #24231f;
    --auth-text-soft: #57544d;
    --auth-muted: #8c8981;

    --auth-border: #ebe9e2;

    --auth-danger: #d64b4b;

    --auth-shadow: 0 18px 55px rgba(25, 22, 14, 0.08);
}

.gold-auth-body,
.gold-auth-body * {
    box-sizing: border-box;
}

.gold-auth-body {
    min-width: 320px;

    margin: 0;

    color: var(--auth-text);
    background: var(--auth-bg);
}

.gold-auth-wrapper {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

/* =========================================
   Header
========================================= */

.gold-auth-header {
    min-height: 88px;

    position: relative;
    z-index: 10;

    display: flex;
    align-items: center;

    background: rgba(255, 255, 255, 0.88);

    border-bottom: 1px solid var(--auth-border);

    backdrop-filter: blur(12px);
}

.gold-auth-header-inner {
    min-height: 87px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gold-auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-decoration: none !important;
}

.gold-auth-logo img {
    width: auto;
    max-width: 165px;
    max-height: 54px;

    display: block;

    object-fit: contain;
}

/* =========================================
   Main
========================================= */

.gold-auth-main {
    position: relative;

    flex: 1;

    display: flex;
    align-items: center;

    overflow: hidden;
/* 
    padding: 40px 0; */
}

.gold-auth-main::before {
    content: '';

    width: 420px;
    height: 420px;

    position: absolute;

    top: -180px;
    right: -170px;

    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--auth-primary) 13%, transparent),
        transparent 70%
    );

    border-radius: 50%;

    pointer-events: none;
}

.gold-auth-main::after {
    content: '';

    width: 380px;
    height: 380px;

    position: absolute;

    left: -180px;
    bottom: -200px;

    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--auth-primary-second) 8%, transparent),
        transparent 70%
    );

    border-radius: 50%;

    pointer-events: none;
}

/* =========================================
   Footer
========================================= */

.gold-auth-footer {
    position: relative;

    z-index: 5;

    padding: 18px 0;

    text-align: center;

    background: rgba(255, 255, 255, 0.75);

    border-top: 1px solid var(--auth-border);
}

.gold-auth-footer p {
    margin: 0;

    color: var(--auth-muted);

    font-size: 11px;
    font-weight: 400;
}

.gold-auth-footer strong {
    color: var(--auth-text-soft);

    font-weight: 500;
}

/* =========================================
   Global Auth Isolation
========================================= */

.gold-auth-body a,
.gold-auth-body a:hover,
.gold-auth-body a:focus,
.gold-auth-body a:active,
.gold-auth-body a:visited {
    text-decoration: none !important;
    text-shadow: none !important;

    outline: none !important;
}

/* =========================================
   Mobile
========================================= */

@media (max-width: 767.98px) {
    .gold-auth-header {
        min-height: 72px;
    }

    .gold-auth-header-inner {
        min-height: 71px;
    }

    .gold-auth-logo img {
        max-width: 145px;
        max-height: 45px;
    }

    .gold-auth-main {
        align-items: flex-start;

        padding: 22px 0 30px;
    }

    .gold-auth-footer {
        padding: 15px 10px;
    }
}