*{
margin:0;
padding:0;
box-sizing:border-box
}

body{
font-family:Arial,sans-serif;
background:#0b0b0b;
color:#fff;
overflow-x:hidden
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
width:100%;
padding:15px 40px;
background:#101d3a;
border-bottom:1px solid #162b55;
z-index:1000
}

.nav-left{
font-weight:bold;
font-size:18px
}

.nav-links{
display:flex;
align-items:center;
gap:15px
}

.nav-links a{
color:#fff;
text-decoration:none;
opacity:.85
}

.nav-links a:hover{
opacity:1
}

.nav-toggle{
display:none;
color:#fff;
font-size:28px;
cursor:pointer
}


.container{
width:100%;
max-width:none;
margin:0;
padding:25px 40px
}


/* STATS */

#stats{
display:grid!important;
grid-template-columns:repeat(4,1fr)!important;
gap:20px!important;
margin-top:20px;
margin-bottom:30px
}


.stats-row{
display:grid!important;
grid-template-columns:repeat(6,minmax(150px,1fr))!important;
gap:20px!important;
margin-top:20px;
margin-bottom:30px;
overflow-x:auto
}


#stats .card,
.stats-row .card{

background:#101d3a;
border:1px solid #162b55;
border-radius:10px;
padding:14px;
min-height:80px;
display:flex;
flex-direction:column;
justify-content:center;
margin:0!important

}


#stats h3,
.stats-row h3{

color:#8fb7ff;
font-size:15px;
margin-bottom:8px

}


#stats p,
.stats-row p{

font-size:20px;
font-weight:bold

}



/* CARD */

.card{
background:#101d3a;
border:1px solid #162b55;
border-radius:10px;
padding:15px
}



/* HERO */

.hero{
margin-top:0;
padding:25px;
background:#101d3a;
border:1px solid #1e3a6e
}



/* BUTTON */

.button{
display:inline-block;
margin-top:10px;
padding:10px 15px;
background:#1e90ff;
color:#fff;
border-radius:6px;
text-decoration:none;
border:none;
cursor:pointer
}

.button:hover{
background:#006edc
}



/* CHART */

.chart-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:30px
}

.chart-card{
overflow:hidden
}

.chart-box{
position:relative;
width:100%;
height:220px!important;
max-height:220px!important;
overflow:hidden
}

.chart-box canvas{
display:block;
width:100%!important;
height:220px!important;
max-height:220px!important
}



/* INPUT */

input{
width:100%;
max-width:500px;
padding:10px;
margin-top:10px;
background:#222;
color:#fff;
border:1px solid #333;
border-radius:6px
}

input::placeholder{
color:#888
}



/* WORKERS DESKTOP */

.worker-row{

display:grid;
grid-template-columns:1.5fr repeat(5,1fr);
gap:10px;
align-items:center;
padding:12px 8px;
border-bottom:1px solid #162b55

}


.worker-row div{

overflow:hidden;
text-overflow:ellipsis

}


.worker-head{

color:#8fb7ff;
font-size:14px;
font-weight:bold

}


/* ONLINE OFFLINE STATUS */

.status{
font-size:12px;
margin-left:8px;
font-weight:bold
}

.status.online{
color:#00ff99
}

.status.offline{
color:#ff5555
}



/* LARGE DESKTOP */

@media(min-width:1600px){

.container{
padding-left:60px;
padding-right:60px
}

#stats,
.stats-row{
gap:25px!important
}

.chart-grid{
gap:25px
}

}



/* TABLET / ANDROID */

@media(max-width:768px){


.navbar{
padding:15px 20px
}


.nav-toggle{
display:block
}


.nav-links{

display:none;
flex-direction:column;
position:absolute;
top:100%;
left:0;
width:100%;
background:#101d3a;
padding:10px 0

}


.nav-links.show{
display:flex
}


.nav-links a{
width:100%;
padding:12px 20px
}


.container{
padding:15px 20px
}



#stats{

grid-template-columns:1fr!important;
gap:15px!important;
margin-bottom:25px

}


.stats-row{

grid-template-columns:repeat(2,minmax(150px,1fr))!important;
gap:15px!important;
overflow-x:hidden

}


.chart-grid{

grid-template-columns:1fr

}


.chart-box{

height:180px!important

}


.chart-box canvas{

height:180px!important

}



/* FIX WORKER ANDROID */

.worker-row{

display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
padding:12px;
margin-bottom:10px;
background:#101d3a;
border:1px solid #162b55;
border-radius:8px

}
.worker-row div:first-child{

grid-column:1/-1;
font-size:15px;
color:#8fb7ff

}
.worker-row div{

font-size:13px

}
.worker-row div:nth-child(2)::before{
content:"Now ";
color:#888
}

.worker-row div:nth-child(3)::before{
content:"Shares/s ";
color:#888
}

.worker-row div:nth-child(4)::before{
content:"1h ";
color:#888
}

.worker-row div:nth-child(5)::before{
content:"6h ";
color:#888
}

.worker-row div:nth-child(6)::before{
content:"24h ";
color:#888
}
.worker-head{

display:none

}


}



/* SMALL PHONE */

@media(max-width:420px){


.container{
padding:15px
}


.stats-row{

grid-template-columns:1fr!important

}


.chart-box{

height:160px!important

}


.chart-box canvas{

height:160px!important

}


.worker-row div{

font-size:12px

}

}

.brand{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-name{
    font-size:22px;
    font-weight:700;
    letter-spacing:.3px;
    color:#fff;
}

.brand-name span{
    color:#1e90ff;
}

.brand-sub{
    margin-top:5px;
    font-size:10px;
    letter-spacing:1.5px;
    color:#8fb7ff;
    font-weight:normal;
}