/* STAFFLAND LIVE SERVER STATUS */

.sl-live-status{
    max-width:1180px !important;
    margin:0 auto;
    padding:90px 24px;
    scroll-margin-top:72px;
}

.sl-live-status-head{
    margin-bottom:24px;
}

.sl-live-status-kicker{
    color:#dca64f;
    font-size:11px;
    font-weight:900;
    letter-spacing:2px;
}

.sl-live-status-title{
    margin-top:9px;
    color:#f0f2f3;
    font-size:clamp(30px,4vw,46px);
    font-weight:950;
}

.sl-live-status-text{
    max-width:660px;
    margin-top:11px;
    color:#7d888d;
    font-size:13px;
    line-height:1.7;
}

.sl-live-card{
    position:relative;
    overflow:hidden;
    padding:25px;
    border:1px solid rgba(232,179,88,.15);
    border-radius:14px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(232,179,88,.07),
            transparent 30%
        ),
        rgba(255,255,255,.009);
}

.sl-live-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:#687176;
}

.sl-live-card.online::before{
    background:linear-gradient(#73df8e,#288c47);
}

.sl-live-card.offline::before{
    background:linear-gradient(#e06d73,#8d3035);
}

.sl-live-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
}

.sl-live-server{
    display:flex;
    align-items:center;
    gap:14px;
}

.sl-live-dot{
    width:15px;
    height:15px;
    flex:0 0 auto;
    border-radius:50%;
    background:#687176;
    box-shadow:0 0 15px rgba(100,110,115,.35);
}

.online .sl-live-dot{
    background:#55d878;
    box-shadow:0 0 18px rgba(85,216,120,.55);
}

.offline .sl-live-dot{
    background:#dc6269;
    box-shadow:0 0 18px rgba(220,98,105,.45);
}

.sl-live-network{
    color:#5c676c;
    font-size:7px;
    font-weight:950;
    letter-spacing:1px;
}

.sl-live-name{
    margin-top:4px;
    color:#e0e4e5;
    font-size:20px;
    font-weight:950;
}

.sl-live-state{
    margin-top:5px;
    color:#737e83;
    font-size:8px;
    font-weight:950;
    letter-spacing:.5px;
}

.online .sl-live-state{
    color:#65ca81;
}

.offline .sl-live-state{
    color:#d66a70;
}

.sl-live-address{
    text-align:right;
}

.sl-live-address small{
    display:block;
    color:#596368;
    font-size:7px;
    font-weight:950;
}

.sl-live-address strong{
    display:block;
    margin-top:5px;
    color:#dfa84f;
    font-size:15px;
    font-weight:950;
}

.sl-live-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:22px;
}

.sl-live-data{
    padding:13px;
    border:1px solid rgba(255,255,255,.05);
    border-radius:9px;
    background:rgba(0,0,0,.08);
}

.sl-live-data small{
    display:block;
    color:#596368;
    font-size:7px;
    font-weight:950;
}

.sl-live-data strong{
    display:block;
    margin-top:5px;
    color:#ccd3d5;
    font-size:12px;
    font-weight:950;
}

.sl-live-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-top:18px;
    padding-top:17px;
    border-top:1px solid rgba(255,255,255,.045);
}

.sl-live-update{
    color:#626d72;
    font-size:8px;
    font-weight:800;
}

.sl-live-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.sl-live-btn{
    min-height:37px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border:1px solid rgba(232,179,88,.20);
    border-radius:8px;
    background:rgba(232,179,88,.035);
    color:#d6a14c;
    text-decoration:none;
    font-family:inherit;
    font-size:8px;
    font-weight:950;
    cursor:pointer;
}

.sl-live-btn.primary{
    border-color:transparent;
    background:linear-gradient(135deg,#f0ba5c,#bc7620);
    color:#171009;
}

.sl-live-btn:hover{
    transform:translateY(-1px);
}

html[data-theme="light"] .sl-live-status-title,
html[data-theme="light"] .sl-live-name,
html[data-theme="light"] .sl-live-data strong{
    color:#292e31;
}

html[data-theme="light"] .sl-live-card,
html[data-theme="light"] .sl-live-data{
    background:#fff;
    border-color:#e1e3e4;
}

@media(max-width:800px){

    .sl-live-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:600px){

    .sl-live-status{
        padding:70px 18px;
    }

    .sl-live-top,
    .sl-live-bottom{
        align-items:flex-start;
        flex-direction:column;
    }

    .sl-live-address{
        text-align:left;
    }

}

@media(max-width:430px){

    .sl-live-grid{
        grid-template-columns:1fr;
    }

    .sl-live-card{
        padding:18px;
    }

    .sl-live-actions,
    .sl-live-btn{
        width:100%;
    }

}