:root{

    --bg:#050505;
    --card:#111111;
    --gold:#D4AF37;
    --gold-light:#f5d76e;
    --green:#00C896;
    --white:#ffffff;
    --muted:#999;
    --border:rgba(255,255,255,.1);

}



*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Inter",sans-serif;

}



body{

    min-height:100vh;

    background:

    radial-gradient(circle at top left,
    rgba(212,175,55,.15),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(0,200,150,.12),
    transparent 35%),

    var(--bg);


    color:white;

    overflow-x:hidden;

}





/* NAVBAR */


.auth-nav{

    position:fixed;

    top:25px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:1200px;

    height:70px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 35px;


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


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


    backdrop-filter:blur(20px);


    border-radius:25px;


    z-index:999;

}




.nav-logo{

    font-size:28px;

    font-weight:800;

}



.nav-logo span{

    color:var(--gold);

}



.nav-links{

    display:flex;

    gap:35px;

}



.nav-links a{

    color:#aaa;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}



.nav-links a:hover{

    color:var(--gold);

}



.mobile-menu{

    display:none;

    background:none;

    border:0;

    color:white;

    font-size:22px;

}





/* MAIN */


.auth-wrapper{

    min-height:100vh;

    display:flex;

    padding-top:120px;

}





/* LEFT */


.brand-section{

    width:50%;

    min-height:calc(100vh - 120px);


    padding:70px;


    display:flex;

    justify-content:center;

    flex-direction:column;


    position:relative;

    overflow:hidden;

}




.brand-content{

    max-width:520px;

}




.mini-badge{

    display:inline-flex;

    gap:10px;

    align-items:center;


    padding:10px 18px;


    border-radius:50px;


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


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


    color:#ddd;


    margin-bottom:30px;


}



.mini-badge i{

    color:var(--green);

}




.brand-content h1{

    font-size:65px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:25px;

}



.brand-content h1 span{


background:linear-gradient(
90deg,
var(--gold),
var(--gold-light)
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}




.brand-content p{

    font-size:18px;

    line-height:1.7;

    color:#aaa;

}





/* WALLET */


.wallet-preview{


    position:absolute;


    right:70px;


    bottom:130px;



    width:320px;



    padding:25px;



    border-radius:25px;



    background:linear-gradient(
    145deg,
    rgba(255,255,255,.15),
    rgba(255,255,255,.04)
    );



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



    backdrop-filter:blur(20px);



    transform:rotate(-8deg);



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



}




.wallet-header{

    display:flex;

    justify-content:space-between;

    color:#ddd;

}



.wallet-header i{

    color:var(--gold);

}



.wallet-preview h2{

    font-size:38px;

    margin:35px 0;

}





.wallet-info{

    display:flex;

    justify-content:space-between;

}



.wallet-info small{

    color:#888;

    display:block;

}




/* TRANSACTIONS */


.transaction-card{


    position:absolute;


    display:flex;

    align-items:center;


    gap:15px;


    padding:15px 20px;


    border-radius:18px;


    background:rgba(17,17,17,.9);


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


    backdrop-filter:blur(15px);


    animation:float 5s infinite ease-in-out;


}



.transaction-card .icon{


    width:40px;

    height:40px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:rgba(212,175,55,.15);


    color:var(--gold);


}



.transaction-card strong{

    display:block;

}



.transaction-card small{

    color:#888;

}




.transaction-one{

    right:100px;

    top:200px;

}




.transaction-two{

    left:120px;

    bottom:80px;

}



@keyframes float{


50%{

transform:translateY(-15px);

}


}





/* AUTH */


.auth-section{

    width:50%;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:40px;


}




.auth-card{


    width:100%;


    max-width:470px;


    padding:40px;


    border-radius:30px;



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



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



    backdrop-filter:blur(25px);



}






.auth-switch{


    display:flex;


    background:#080808;


    padding:6px;


    border-radius:50px;


    margin-bottom:35px;


}




.switch-btn{


    flex:1;


    padding:13px;


    border:0;


    background:none;


    color:#888;


    border-radius:50px;


    cursor:pointer;


}



.switch-btn.active{


    background:linear-gradient(
    90deg,
    var(--gold),
    var(--gold-light)
    );


    color:#000;


}





.auth-form{

    display:none;


}



.auth-form.active{


    display:block;


    animation:fade .4s ease;


}




@keyframes fade{

from{

opacity:0;

transform:translateY(15px);

}


to{

opacity:1;

transform:none;

}


}





.auth-form h2{

    font-size:32px;

    margin-bottom:10px;


}



.auth-form p{

    color:#999;

    margin-bottom:30px;

}





.input-box{


    position:relative;

    margin-bottom:18px;


}



.input-box i:first-child{


    position:absolute;


    left:18px;


    top:50%;


    transform:translateY(-50%);


    color:#777;


}




.input-box input,
.input-box select{


    width:100%;


    height:55px;


    padding:0 50px;


    background:#080808;


    color:white;


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


    border-radius:15px;


    outline:none;


}




.input-box input:focus,
.input-box select:focus{


border-color:var(--gold);


box-shadow:0 0 20px rgba(212,175,55,.2);


}




.show-pass{


    position:absolute;


    right:18px;


    top:50%;


    transform:translateY(-50%);


    color:var(--gold);


    cursor:pointer;


}







.form-row{


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:25px;


    color:#aaa;


    font-size:14px;


}



.form-row a{

    color:var(--gold);

    text-decoration:none;

}





.auth-btn{


    width:100%;


    height:55px;


    border:0;


    border-radius:15px;


    background:linear-gradient(
    90deg,
    var(--gold),
    var(--gold-light)
    );


    font-weight:700;


    cursor:pointer;


}



.terms{


    display:flex;


    gap:10px;


    color:#aaa;


    font-size:14px;


    margin-bottom:20px;


}




.bottom-text{


    text-align:center;


    margin-top:25px;


    color:#999;


}



.bottom-text a{


    color:var(--gold);

    cursor:pointer;


}






/* MOBILE */


@media(max-width:950px){


.auth-wrapper{

    flex-direction:column;

    padding-top:100px;

}



.auth-nav{

    top:15px;

}



.nav-links{

    display:none;


    position:absolute;


    top:75px;


    left:0;


    width:100%;


    flex-direction:column;


    padding:25px;


    background:#111;


    border-radius:20px;


}




.nav-links.show{

    display:flex;

}



.mobile-menu{

    display:block;

}



.brand-section,
.auth-section{

    width:100%;

}



.brand-section{

    padding:40px 25px;

    min-height:auto;

    text-align:center;


}



.brand-content h1{

    font-size:42px;

}



.wallet-preview{

    position:relative;

    right:auto;

    bottom:auto;

    margin:40px auto;

}



.transaction-card{

    display:none;

}



.auth-section{

    padding:20px;

}



.auth-card{

    padding:25px 20px;

}


}



@media(max-width:500px){


.brand-content h1{

    font-size:36px;

}


.wallet-preview{

    width:100%;

}



}
/* ==========================
   GENERAL MESSAGE ALERT
========================== */


.gen-message{

    margin-bottom:25px;

    padding:15px 18px;

    border-radius:15px;

    font-size:14px;

    line-height:1.5;

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

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

    color:#ddd;

    backdrop-filter:blur(15px);

    animation:messageShow .4s ease;

}



/* success message */

.gen-message.alert-success,
.gen-message.success{

    border-color:rgba(0,200,150,.4);

    background:rgba(0,200,150,.1);

    color:#00C896;

}



/* error message */

.gen-message.alert-danger,
.gen-message.error,
.gen-message.danger{
 
    border-color:rgba(255,70,70,.4);

    background:rgba(255,70,70,.1);

    color:#ff7777;

}



@keyframes messageShow{

    from{

        opacity:0;

        transform:translateY(-10px);

    }


    to{

        opacity:1;

        transform:none;

    }

}