.auth-wrapper{


min-height:100vh;

display:grid;

grid-template-columns:1fr 550px;

background:#050505;


}

/* ==========================================
LEFT SIDE
========================================== */

.auth-left{

position:relative;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

padding:80px;


}

.auth-left::before{


content:"";

position:absolute;

inset:0;

background:
radial-gradient(
    circle at 30% 50%,
    rgba(255,204,0,.08),
    transparent 40%
),
radial-gradient(
    circle at 70% 50%,
    rgba(0,255,136,.08),
    transparent 40%
);

z-index:1;


}

.auth-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
    135deg,
    rgba(0,0,0,.15),
    rgba(0,0,0,.65)
);

z-index:2;


}

.auth-left-content{


position:relative;

z-index:3;

max-width:650px;


}

.auth-logo{


width:240px;

margin-bottom:40px;


}

.auth-tag{


display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

border:1px solid rgba(255,204,0,.25);

background:rgba(255,204,0,.08);

color:var(--gold);

font-size:.85rem;

font-weight:700;

margin-bottom:25px;


}

.auth-left h1{


font-size:4.5rem;

line-height:1.05;

margin-bottom:25px;

font-weight:900;


}

.auth-left p{


color:var(--text-muted);

font-size:1.1rem;

line-height:1.9;

margin-bottom:40px;


}

/* ==========================================
FEATURES
========================================== */

.auth-features{


display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:50px;


}

.auth-features div{


display:flex;

align-items:center;

gap:10px;

color:white;


}

.auth-features i{

color:var(--green);


}

/* ==========================================
STATS
========================================== */

.auth-stats{


display:flex;

gap:25px;


}

.auth-stats div{

min-width:120px;

padding:20px;

border-radius:20px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

backdrop-filter:blur(20px);


}

.auth-stats h3{


color:var(--gold);

font-size:2rem;

margin-bottom:5px;


}

.auth-stats span{


color:var(--text-muted);


}

/* ==========================================
RIGHT SIDE
========================================== */

.auth-right{


display:flex;

align-items:center;

justify-content:center;

padding:40px;


}

.auth-card{


width:100%;

max-width:500px;

background:
rgba(15,15,15,.95);

border:1px solid rgba(255,255,255,.08);

border-radius:30px;

padding:45px;

backdrop-filter:blur(20px);

box-shadow:
0 30px 80px rgba(0,0,0,.45);


}

.register-card{


max-width:550px;


}

.auth-card h2{

font-size:2.2rem;

margin-bottom:10px;


}

.auth-card p{


color:var(--text-muted);

margin-bottom:30px;


}

/* ==========================================
FORM
========================================== */

.form-group{


margin-bottom:20px;


}

.form-group label{


display:block;

margin-bottom:10px;

font-size:.9rem;

font-weight:600;


}

.form-group input{


width:100%;

height:58px;

padding:0 18px;

border-radius:14px;

background:#111111;

border:1px solid rgba(255,255,255,.08);

color:white;

outline:none;

transition:.3s ease;


}

.form-group input:focus{


border-color:var(--gold);

box-shadow:
0 0 0 3px rgba(255,204,0,.12);


}

/* ==========================================
OPTIONS
========================================== */

.auth-options{


display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

font-size:.9rem;


}

.auth-options a{


color:var(--gold);


}

.auth-options input{


margin-right:8px;


}

/* ==========================================
BUTTON
========================================== */

.auth-btn{


width:100%;

height:58px;

border:none;

cursor:pointer;

font-size:1rem;

font-weight:700;


}

/* ==========================================
FOOTER
========================================== */

.auth-footer{


margin-top:25px;

text-align:center;

color:var(--text-muted);


}

.auth-footer a{


color:var(--gold);

font-weight:700;


}

/* ==========================================
MOBILE
========================================== */

@media(max-width:1100px){


.auth-wrapper{

    grid-template-columns:1fr;
}

.auth-left{

    display:none;
}

.auth-right{

    min-height:100vh;

    padding:25px;
}

.auth-card{

    max-width:100%;
}


}

@media(max-width:768px){


.auth-card{

    padding:30px;
}

.auth-options{

    flex-direction:column;

    gap:15px;

    align-items:flex-start;
}


}
.flash-container{

    margin:20px 0;

}

.flash-message{

    padding:14px 16px;

    border-radius:10px;

    margin-bottom:12px;

    font-weight:600;

}

.flash-message.success{

    background:#0f5132;

    color:#d1ffe7;

    border:1px solid #198754;

}

.flash-message.danger{

    background:#58151c;

    color:#ffd9dd;

    border:1px solid #dc3545;

}