/* =====================================================
   LOVE88 V21 ULTRA PREMIUM AGENTS CSS
===================================================== */


:root{

--primary:#00ffd5;
--green:#00e676;
--blue:#3b82f6;
--orange:#ff9800;

--bg:#04111d;
--bg2:#082b40;
--bg3:#0a5776;

--glass:rgba(255,255,255,.07);

}



*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:'Poppins',sans-serif;

background:

linear-gradient(
135deg,
var(--bg),
var(--bg2),
var(--bg3)
);

color:#fff;

overflow-x:hidden;

}





/* ==========================
   AURORA
========================== */


body::before{

content:"";

position:fixed;

inset:-30%;

width:160%;
height:160%;

background:

radial-gradient(circle,
rgba(0,255,213,.12),
transparent 45%),


radial-gradient(circle,
rgba(59,130,246,.10),
transparent 45%);


animation:aurora 18s linear infinite;

z-index:-1;

}



@keyframes aurora{

50%{

transform:
rotate(180deg)
scale(1.2);

}

100%{

transform:
rotate(360deg)
scale(1);

}

}





/* ==========================
 PAGE
========================== */


.agents-page{

padding:40px 0 120px;

}


.container{

width:min(1400px,95%);

margin:auto;

}





/* HEADER */


.page-header{

text-align:center;

margin-bottom:30px;

}



.page-title{

font-size:52px;

font-weight:900;

background:

linear-gradient(
90deg,
#00ffd5,
#00e676,
#3b82f6
);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



.page-subtitle{

margin-top:10px;

color:#dbeafe;

font-size:17px;

}





/* ONLINE */


.stats-box{

max-width:470px;

margin:0 auto 30px;

padding:18px;

border-radius:24px;

background:var(--glass);

backdrop-filter:blur(20px);

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

box-shadow:

0 15px 35px rgba(0,0,0,.4);

text-align:center;

}



.stats-number{

font-size:28px;

font-weight:900;

color:#00ffd5;

animation:pulse 2s infinite;

}


@keyframes pulse{

50%{

transform:scale(1.05);

}

}







/* SEARCH */


.search-box{

max-width:560px;

margin:30px auto 35px;

}



.search-box input{

width:100%;

height:58px;

padding:0 22px;

border:none;

outline:none;

border-radius:18px;

background:

rgba(255,255,255,.08);


backdrop-filter:blur(16px);

color:#fff;

font-size:16px;

}


.search-box input:focus{

border:1px solid #00ffd5;

box-shadow:

0 0 20px rgba(0,255,213,.25);

}





/* ==========================
 GRID
========================== */


.agents-grid{

display:grid;

grid-template-columns:

repeat(4,minmax(0,1fr));

gap:24px;

align-items:stretch;

}





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


.agents-card{

    position:relative;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    padding:14px;

    min-height:430px;

    height:auto;

    border-radius:22px;


    background:
    linear-gradient(
        145deg,
        rgba(10,24,45,.96),
        rgba(5,45,65,.96)
    );


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


    box-shadow:

    0 12px 30px rgba(0,0,0,.40);


    transition:

    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;


    will-change:transform;

}




/* hover only */

.agents-card:hover{

transform:

translate3d(0,-8px,0);


border-color:#00ffd5;


box-shadow:


0 0 35px rgba(0,255,213,.3),

0 22px 60px rgba(0,0,0,.45);

}





/* shine */


.agents-card::before{

content:"";

position:absolute;

top:-180%;

left:-70%;

width:45%;

height:420%;


background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.1),
transparent
);


transform:rotate(25deg);


animation:shine 7s linear infinite;


pointer-events:none;

}



@keyframes shine{

100%{

left:170%;

}

}







/* BADGE */


.agent-badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:8px 16px;

border-radius:999px;


background:

linear-gradient(
135deg,
#00e676,
#00c853
);


font-size:12px;

font-weight:800;


box-shadow:

0 0 18px rgba(0,255,120,.35);

}





/* ==========================
   PREMIUM LARGE LOGO
========================== */

.agent-logo{

height:200px;

display:flex;

justify-content:center;

align-items:center;

margin:15px 0 20px;

}



.agent-logo img{

width:190px;

height:190px;

object-fit:contain;


filter:

drop-shadow(
0 0 35px rgba(0,255,213,.65)
);


transition:.35s;

}



.agent-logo img:hover{

transform:scale(1.10);

}





/* NAME */


.agent-name{

text-align:center;

font-size:24px;

font-weight:900;

margin-bottom:14px;

}





/* INFO */


.agent-info{

display:flex;

justify-content:space-between;

font-size:14px;

color:#dbeafe;

margin-bottom:16px;

}







/* STATUS */


.agent-status{

display:flex;

justify-content:center;

align-items:center;

gap:8px;

color:#8cff8c;

font-weight:700;

margin-bottom:18px;

}


.agent-status::before{

content:"";

width:10px;

height:10px;

background:#00ff66;

border-radius:50%;


box-shadow:

0 0 12px #00ff66;


animation:livePulse 1.5s infinite;

}



@keyframes livePulse{

50%{

transform:scale(1.5);

opacity:.4;

}

}







/* BUTTON */


.btn{

position:relative;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

width:100%;

height:52px;

margin-top:12px;

border-radius:16px;

text-decoration:none;

color:#fff;

font-weight:800;

font-size:15px;


transition:.25s;

}



.btn:hover{

transform:translateY(-2px);

}



.btn-details{

background:

linear-gradient(
135deg,
#2563eb,
#60a5fa
);

}



.btn-join{

background:

linear-gradient(
135deg,
#00e676,
#00c853
);

}



.btn-share{

background:

linear-gradient(
135deg,
#ff9800,
#ffc107
);

}





/* POPUP */


.live-popup{

position:fixed;

left:18px;

bottom:90px;

padding:14px 18px;

border-radius:18px;


background:

linear-gradient(
135deg,
#00c853,
#00e676
);


font-weight:800;

opacity:0;

transform:translateY(80px);

transition:.45s;

z-index:9999;

}



.live-popup.show{

opacity:1;

transform:translateY(0);

}





/* EMPTY */


.empty-agent{

grid-column:1/-1;

text-align:center;

padding:60px;

}






/* ==========================
   RESPONSIVE V21 FINAL
========================== */


@media(max-width:1200px){

    .agents-grid{

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

    }

}





@media(max-width:768px){


    .page-title{

        font-size:34px;

    }



    .agents-grid{

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

        gap:14px;

    }



    .agents-card{

        min-height:auto;

        height:auto;

        padding:14px;

        border-radius:22px;

    }



    .agent-logo{

        height:130px;

        margin:10px 0;

    }



    .agent-logo img{

        width:120px;

        height:120px;

    }



    .agent-name{

        font-size:18px;

        margin-bottom:10px;

    }



    .agent-info{

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:5px;

        font-size:12px;

    }



    .agent-status{

        font-size:13px;

        margin-bottom:10px;

    }



    .btn{

        height:42px;

        font-size:13px;

        border-radius:14px;

    }



    .agent-badge{

        font-size:11px;

        padding:6px 12px;

    }


}





@media(max-width:480px){


    .container{

        width:96%;

    }



    .agents-grid{

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

        gap:10px;

    }



    .agents-card{

        padding:12px;

        border-radius:18px;

    }



    .agent-logo{

        height:105px;

        margin:8px 0;

    }



    .agent-logo img{

        width:95px;

        height:95px;

    }



    .agent-name{

        font-size:15px;

    }



    .agent-info{

        font-size:11px;

    }



    .agent-status{

        font-size:12px;

    }



    .btn{

        height:38px;

        font-size:11px;

        border-radius:12px;

    }



    .agent-badge{

        font-size:10px;

        padding:5px 10px;

    }


}





/* ==========================
   TEXT SELECTION
========================== */


::selection{

    background:#00ffd5;

    color:#04111d;

}





/* ==========================
   GPU PERFORMANCE
========================== */


.agents-card,
.agent-logo img,
.btn{

    transform:translateZ(0);

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    will-change:transform;

}