body{
    background:
    radial-gradient(circle at top,
    rgba(34,197,94,.08),
    transparent 40%),
    #050816;

    color:#fff;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:20px;
}

.server-card-new{
    position:relative;
    overflow:hidden;

    background:rgba(18,24,35,.82);

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

    border-radius:24px;

    padding:24px;

    backdrop-filter:blur(12px);

    transition:.25s ease;
}

.server-card-new:hover{
    transform:translateY(-3px);

    border-color:rgba(34,197,94,.25);

    box-shadow:0 0 30px rgba(34,197,94,.08);
}

.server-card-new::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at left,
    rgba(34,197,94,.08),
    transparent 55%);

    pointer-events:none;
}

.server-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

.server-title{
    font-size:26px;
    font-weight:800;
}

.server-status{
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

.server-status.online{
    background:rgba(34,197,94,.15);
    color:#22c55e;
}

.server-status.unstable{
    background:rgba(250,204,21,.12);
    color:#facc15;
}

.server-status.offline{
    background:rgba(239,68,68,.12);
    color:#ef4444;
}

.server-stat{
    flex:1;

    min-width:100px;

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

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

    border-radius:18px;

    padding:14px;
}

.server-stats{
    display:flex;
    gap:14px;
    flex-wrap:wrap;

    margin-bottom:22px;
}

.server-stat-label{
    font-size:12px;
    color:#9ca3af;

    margin-bottom:5px;
}

.server-stat-value{
    font-size:20px;
    font-weight:800;
}

.routes-preview{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.route-preview-item{
    display:flex;
    justify-content:space-between;
    align-items:center;

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

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

    border-radius:14px;

    padding:14px;
}

.route-domain{
    font-weight:700;
}

.route-online{
    color:#22c55e;
    font-size:13px;
    font-weight:700;
}

.route-offline{
    color:#ef4444;
    font-size:13px;
    font-weight:700;
}

.quality-excelente{
    color:#22c55e;
}

.quality-oscilando{
    color:#facc15;
}

.quality-offline{
    color:#ef4444;
}
.route-warning{
    color:#facc15;
    font-size:13px;
    font-weight:700;
}

.server-card-new{
    text-decoration:none;
    color:inherit;
}

@media(max-width:700px){

    .server-card-new{
        padding:18px;
    }

    .server-title{
        font-size:22px;
    }

    .server-stats{
        flex-direction:column;
    }

}