/* =========================================================
   P2P USDT AUTHENTICATION
========================================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body.auth-page{
    min-height:100vh;
    color:#e9edf2;
    background:#070c12;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.auth-page a{
    text-decoration:none;
}


/* =========================================================
   BACKGROUND
========================================================= */

.auth-background{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(245,195,24,.045),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(26,203,139,.025),
            transparent 25%
        ),
        #070c12;
}

.auth-background::after{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size:45px 45px;
}

.auth-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
}

.auth-glow-one{
    width:400px;
    height:400px;
    top:-200px;
    left:-150px;
    background:rgba(245,195,24,.05);
}

.auth-glow-two{
    width:400px;
    height:400px;
    right:-200px;
    bottom:-200px;
    background:rgba(22,201,137,.035);
}


/* =========================================================
   CONTAINER
========================================================= */

.auth-container{
    position:relative;
    z-index:1;
}


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

.auth-left{
    position:relative;
    min-height:100vh;
    padding:45px 6%;

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

    background:
        linear-gradient(
            135deg,
            rgba(11,18,27,.97),
            rgba(6,11,17,.96)
        );
}

.auth-left::after{
    content:"?";

    position:absolute;
    right:5%;
    bottom:5%;

    color:rgba(245,195,24,.018);

    font-size:420px;
    font-weight:800;
    line-height:1;

    pointer-events:none;
}

.auth-left-content{
    position:relative;
    z-index:2;

    width:100%;
    min-height:100%;

    display:flex;
    flex-direction:column;
}


/* BRAND */

.auth-brand{
    display:inline-flex;
    align-items:center;
    gap:11px;

    width:max-content;

    color:#e6ebef;
}

.auth-brand-coin{
    width:43px;
    height:43px;

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

    color:#151208;

    background:
        linear-gradient(
            135deg,
            #ffe05b,
            #dca800
        );

    border-radius:50%;

    box-shadow:
        0 0 25px rgba(244,195,25,.15);

    font-size:23px;
    font-weight:900;
}

.auth-brand-text{
    display:flex;
    flex-direction:column;

    font-size:17px;
    line-height:1;
}

.auth-brand-text strong{
    color:#f4c51e;
}

.auth-brand-text small{
    margin-top:5px;

    color:#647184;

    font-size:7px;
    letter-spacing:4px;
}


/* HERO */

.auth-hero-content{
    max-width:590px;

    margin:auto 0;
    padding:70px 0;
}

.auth-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;

    margin-bottom:19px;
    padding:7px 11px;

    color:#d7b331;

    background:rgba(244,197,30,.045);

    border:
        1px solid rgba(244,197,30,.10);

    border-radius:20px;

    font-size:8px;
    font-weight:750;
    letter-spacing:1.1px;
}

.auth-hero-content h1{
    margin:0;

    color:#eef2f5;

    font-size:
        clamp(40px,4.5vw,65px);

    font-weight:750;
    line-height:1.08;
    letter-spacing:-2px;
}

.auth-hero-content h1 span{
    color:#f4c51e;
}

.auth-hero-content > p{
    max-width:490px;

    margin:21px 0 30px;

    color:#6c798a;

    font-size:13px;
    line-height:1.8;
}


/* FEATURES */

.auth-features{
    display:grid;
    gap:11px;
}

.auth-feature{
    max-width:390px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 12px;

    border-radius:9px;

    transition:.2s ease;
}

.auth-feature:hover{
    background:rgba(255,255,255,.02);
}

.auth-feature-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

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

    color:#f4c51e;

    background:rgba(244,197,30,.055);

    border:
        1px solid rgba(244,197,30,.08);

    border-radius:8px;
}

.auth-feature strong,
.auth-feature span{
    display:block;
}

.auth-feature strong{
    color:#cfd6dd;

    font-size:10px;
}

.auth-feature span{
    margin-top:3px;

    color:#596778;

    font-size:8px;
}


/* BOTTOM */

.auth-left-bottom{
    display:flex;
    gap:25px;

    color:#4f5c6d;

    font-size:8px;
}

.auth-left-bottom span{
    display:flex;
    align-items:center;
    gap:6px;
}

.auth-left-bottom i{
    color:#17bd82;
}


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

.auth-right{
    min-height:100vh;

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

    padding:40px;
}

.auth-form-wrapper{
    width:100%;
    max-width:430px;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.auth-card{
    position:relative;

    padding:31px;

    background:
        linear-gradient(
            145deg,
            rgba(17,26,37,.97),
            rgba(10,17,25,.98)
        );

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

    border-radius:15px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.25);
}

.auth-card::before{
    content:"";

    position:absolute;
    top:0;
    left:15%;
    right:15%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,197,30,.45),
            transparent
        );
}


/* HEADER */

.auth-card-header{
    margin-bottom:26px;
}

.auth-login-icon{
    width:43px;
    height:43px;

    margin-bottom:16px;

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

    color:#f4c51e;

    background:
        rgba(244,197,30,.06);

    border:
        1px solid rgba(244,197,30,.10);

    border-radius:10px;

    font-size:18px;
}

.auth-card-header h2{
    margin:0;

    color:#edf1f4;

    font-size:22px;
    font-weight:750;
}

.auth-card-header p{
    margin:6px 0 0;

    color:#637184;

    font-size:10px;
}


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

.auth-form-group{
    margin-bottom:17px;
}

.auth-form-group label{
    margin-bottom:7px;

    color:#8d99a8;

    font-size:9px;
    font-weight:650;
}

.auth-input-group{
    position:relative;
}

.auth-input-icon{
    position:absolute;
    top:50%;
    left:14px;
    z-index:3;

    transform:translateY(-50%);

    color:#59687a;

    font-size:13px;
}

.auth-input.form-control{
    min-height:46px;

    padding:
        10px
        14px
        10px
        42px;

    color:#dce3e9;

    background:#09111a;

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

    border-radius:8px;

    box-shadow:none;

    font-size:10px;
}

.auth-input.form-control::placeholder{
    color:#435163;
}

.auth-input.form-control:focus{
    color:#edf1f4;

    background:#0a131d;

    border-color:
        rgba(244,197,30,.42);

    box-shadow:
        0 0 0 3px
        rgba(244,197,30,.035);
}

.auth-password-input{
    padding-right:45px !important;
}

.password-toggle{
    position:absolute;
    top:50%;
    right:13px;
    z-index:4;

    transform:translateY(-50%);

    padding:3px;

    color:#586678;

    background:transparent;
    border:0;

    font-size:13px;
}

.password-toggle:hover{
    color:#f4c51e;
}


/* FORGOT */

.forgot-link{
    color:#d4af28;

    font-size:8px;
}

.forgot-link:hover{
    color:#f4c51e;
}


/* REMEMBER */

.auth-options{
    margin-top:-3px;
    margin-bottom:20px;
}

.auth-checkbox{
    display:flex;
    align-items:center;
    gap:7px;

    cursor:pointer;
}

.auth-checkbox input{
    width:14px;
    height:14px;

    accent-color:#f4c51e;
}

.auth-checkbox span{
    color:#657386;

    font-size:8px;
}


/* LOGIN BUTTON */

.auth-login-btn{
    width:100%;
    min-height:46px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    color:#171407;

    background:
        linear-gradient(
            135deg,
            #f8d33f,
            #dfad09
        );

    border:0;
    border-radius:8px;

    box-shadow:
        0 8px 25px
        rgba(225,175,13,.10);

    font-size:10px;
    font-weight:800;

    transition:.2s ease;
}

.auth-login-btn:hover{
    color:#171407;

    transform:translateY(-1px);

    box-shadow:
        0 10px 30px
        rgba(225,175,13,.16);
}

.auth-login-btn i{
    transition:.2s ease;
}

.auth-login-btn:hover i{
    transform:translateX(3px);
}


/* ERROR */

.auth-error-alert{
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 12px;

    color:#ff7e88;

    background:rgba(255,83,97,.055);

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

    border-radius:7px;

    font-size:8px;
}

.auth-error-alert .btn-close{
    margin-left:auto;
    filter:invert(1);
    opacity:.45;
}


/* =========================================================
   DIVIDER / REGISTER
========================================================= */

.auth-divider{
    position:relative;

    margin:25px 0 20px;

    text-align:center;
}

.auth-divider::before{
    content:"";

    position:absolute;
    top:50%;
    left:0;
    right:0;

    height:1px;

    background:
        rgba(255,255,255,.055);
}

.auth-divider span{
    position:relative;
    z-index:2;

    padding:0 11px;

    color:#485568;
    background:#0d1620;

    font-size:7px;
    letter-spacing:.7px;
}

.auth-register-box{
    text-align:center;
}

.auth-register-box p{
    margin-bottom:9px;

    color:#647184;

    font-size:8px;
}

.auth-register-btn{
    width:100%;
    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    color:#d3b431;

    background:
        rgba(244,197,30,.025);

    border:
        1px solid rgba(244,197,30,.15);

    border-radius:8px;

    font-size:9px;
    font-weight:650;
}

.auth-register-btn:hover{
    color:#f4c51e;

    background:
        rgba(244,197,30,.055);

    border-color:
        rgba(244,197,30,.27);
}


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

.auth-security{
    margin-top:16px;

    display:flex;
    justify-content:center;
    gap:20px;

    color:#4e5c6d;

    font-size:7px;
}

.auth-security span{
    display:flex;
    align-items:center;
    gap:5px;
}

.auth-security i{
    color:#18b77f;
}

.auth-footer-links{
    margin-top:14px;

    display:flex;
    justify-content:center;
    gap:9px;

    color:#3e4a59;

    font-size:7px;
}

.auth-footer-links a{
    color:#536173;
}

.auth-footer-links a:hover{
    color:#d7b52c;
}


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

.auth-mobile-brand{
    margin-bottom:25px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    color:#e5e9ed;
}

.auth-mobile-brand > span:last-child{
    display:flex;
    align-items:center;
    gap:4px;

    font-size:14px;
}

.auth-mobile-brand strong{
    color:#f4c51e;
}

.auth-mobile-brand small{
    margin-left:3px;

    color:#586576;

    font-size:6px;
    letter-spacing:1.5px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1199.98px){

    .auth-left{
        padding-left:4%;
        padding-right:4%;
    }

}


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

@media(max-width:991.98px){

    .auth-right{
        padding:30px 18px;
    }

    .auth-form-wrapper{
        max-width:450px;
    }

}


@media(max-width:575.98px){

    .auth-right{
        min-height:100svh;

        align-items:flex-start;

        padding:
            25px
            14px
            35px;
    }

    .auth-mobile-brand{
        margin-top:5px;
        margin-bottom:22px;
    }

    .auth-brand-coin{
        width:38px;
        height:38px;

        font-size:20px;
    }

    .auth-card{
        padding:23px 18px;

        border-radius:12px;
    }

    .auth-card-header{
        margin-bottom:23px;

        text-align:center;
    }

    .auth-login-icon{
        margin:
            0 auto
            13px;
    }

    .auth-card-header h2{
        font-size:20px;
    }

    .auth-input.form-control{
        min-height:48px;

        font-size:11px;
    }

    .auth-login-btn{
        min-height:48px;

        font-size:11px;
    }

    .auth-security{
        flex-wrap:wrap;
        gap:12px;
    }

}

/* =========================================================
   FORGOT PASSWORD
========================================================= */

.auth-success-alert{
    display:flex;
    align-items:flex-start;
    gap:9px;

    padding:11px 12px;

    color:#24d293;

    background:rgba(24,201,136,.055);

    border:1px solid rgba(24,201,136,.11);

    border-radius:8px;

    font-size:8px;
    line-height:1.6;
}

.auth-success-alert > i{
    margin-top:1px;
    font-size:12px;
}

.auth-success-alert span{
    flex:1;
}

.auth-success-alert .btn-close{
    padding:10px;
    filter:invert(1);
    opacity:.4;
}


/* INFO BOX */

.forgot-info-box{
    margin-top:20px;
    padding:12px;

    display:flex;
    align-items:flex-start;
    gap:10px;

    background:rgba(69,148,239,.035);

    border:1px solid rgba(69,148,239,.08);

    border-radius:8px;
}

.forgot-info-icon{
    width:30px;
    height:30px;

    flex:0 0 30px;

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

    color:#63aaff;

    background:rgba(69,148,239,.07);

    border-radius:7px;

    font-size:12px;
}

.forgot-info-box strong,
.forgot-info-box span{
    display:block;
}

.forgot-info-box strong{
    color:#9eabb9;

    font-size:8px;
}

.forgot-info-box span{
    margin-top:3px;

    color:#566577;

    font-size:7px;
    line-height:1.6;
}


/* MOBILE */

@media(max-width:575.98px){

    .forgot-info-box{
        margin-top:17px;
    }

}

p{
    font-size: 12px !important;
    line-height: 1.7;
}