/* Shared auth UI: dark crypto + neon glass */
:root{
    --auth-accent: var(--accent-color, #00d084);
    --auth-accent-hover: var(--accent-hover, #00ffa3);
    --auth-bg: var(--primary-bg, #0b0f19);
    --auth-bg2: var(--secondary-bg, #121826);
}

.auth-shell{
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 10%, rgba(0,208,132,0.22), transparent 42%),
        radial-gradient(circle at 80% 30%, rgba(0,255,163,0.14), transparent 52%),
        linear-gradient(135deg, var(--auth-bg) 0%, var(--auth-bg2) 70%);
    position: relative;
    overflow: hidden;
}

/* Login purple variant */
.auth-shell.auth-variant-login{
    background:
        radial-gradient(circle at 35% 0%, rgba(168, 85, 247, 0.40), transparent 50%),
        radial-gradient(circle at 85% 25%, rgba(99, 102, 241, 0.18), transparent 52%),
        radial-gradient(circle at 10% 60%, rgba(0, 208, 132, 0.12), transparent 55%),
        linear-gradient(135deg, var(--auth-bg) 0%, var(--auth-bg2) 70%);
}

/* Signup yellow-green variant */
.auth-shell.auth-variant-signup{
    background:
        radial-gradient(circle at 18% 12%, rgba(250, 204, 21, 0.20), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(132, 204, 22, 0.14), transparent 52%),
        radial-gradient(circle at 50% 70%, rgba(0, 208, 132, 0.10), transparent 55%),
        linear-gradient(135deg, var(--auth-bg) 0%, var(--auth-bg2) 70%);
}

.auth-shell::before{
    content:'';
    position:absolute;
    inset:-2px;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.08;
    pointer-events:none;
    z-index: 0;
}

.auth-shell > .container,
.auth-shell > .container-fluid{
    position: relative;
    z-index: 1;
}

.auth-card{
    background: rgba(18,24,38,0.62);
    border: 1px solid rgba(0,255,163,0.18);
    border-radius: 20px;
    box-shadow: 0 26px 90px rgba(0,0,0,0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* CTA buttons - variant-specific */
.auth-shell.auth-variant-login .auth-card .btn-warning{
    background: linear-gradient(135deg, rgba(168,85,247,0.95), rgba(99,102,241,0.85)) !important;
    border: 1px solid rgba(0, 255, 163, 0.25) !important;
    color: #0b0f19 !important;
    box-shadow: 0 14px 40px rgba(168,85,247,0.22), 0 0 30px rgba(0,208,132,0.12);
}
.auth-shell.auth-variant-login .auth-card .btn-warning:hover{
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.auth-shell.auth-variant-signup .auth-card .btn-warning{
    background: linear-gradient(135deg, rgba(250,204,21,0.98), rgba(132,204,22,0.85)) !important;
    border: 1px solid rgba(250,204,21,0.35) !important;
    color: #08130e !important;
    box-shadow: 0 14px 40px rgba(250,204,21,0.18), 0 0 30px rgba(0,208,132,0.10);
    letter-spacing: 0.01em;
}
.auth-shell.auth-variant-signup .auth-card .btn-warning:hover{
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.auth-card-inner{
    padding: 28px 26px;
}

.auth-title{
    font-weight: 1000;
    letter-spacing: -0.02em;
}

.auth-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight: 950;
    letter-spacing: 0.01em;
    color: rgba(229,231,235,0.92);
}

.auth-kicker i{
    color: var(--auth-accent);
}

.auth-muted{
    color: rgba(229,231,235,0.70);
    font-weight: 650;
}

.auth-side{
    height: 100%;
    padding: 22px;
    border-radius: 20px;
    background: rgba(11,15,25,0.35);
    border: 1px solid rgba(255,255,255,0.06);
}

.auth-shell.auth-variant-login .auth-side{
    background:
        radial-gradient(circle at 30% 10%, rgba(168, 85, 247, 0.24), transparent 55%),
        radial-gradient(circle at 75% 40%, rgba(99, 102, 241, 0.18), transparent 55%),
        rgba(11,15,25,0.35);
}

.auth-shell.auth-variant-signup .auth-side{
    background:
        radial-gradient(circle at 25% 10%, rgba(250, 204, 21, 0.18), transparent 55%),
        radial-gradient(circle at 75% 40%, rgba(132, 204, 22, 0.16), transparent 55%),
        rgba(11,15,25,0.35);
    border-color: rgba(250,204,21,0.22);
}

.auth-side h3{
    font-weight: 1000;
}

.auth-feature{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(0,208,132,0.16);
    background: rgba(0,208,132,0.06);
    margin-top: 12px;
}

.auth-feature i{
    color: var(--auth-accent);
    margin-top: 3px;
}

.auth-shell.auth-variant-signup .auth-feature{
    border-color: rgba(250, 204, 21, 0.20);
    background: rgba(250, 204, 21, 0.08);
}
.auth-shell.auth-variant-signup .auth-feature i{
    color: #facc15;
}

.auth-shell.auth-variant-signup .auth-kicker i{
    color: #facc15;
}

.auth-spark{
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(0,208,132,0.18);
    background: linear-gradient(180deg, rgba(0,208,132,0.08), rgba(11,15,25,0.35));
    padding: 14px;
    margin-top: 16px;
}

.auth-spark .label{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight: 950;
    color: rgba(229,231,235,0.92);
    margin-bottom: 10px;
}

@media (max-width: 991.98px){
    .auth-side{ display:none; }
    .auth-card-inner{ padding: 22px 16px; }
}