.srv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.srv-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; }
.srv-top{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.srv-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.srv-dot.on{ background:var(--green); box-shadow:0 0 10px var(--green); }
.srv-dot.off{ background:var(--text-mute); }
.srv-name{ font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.srv-game{ font-size:12px; color:var(--text-mute); }
.srv-state{ font-size:10.5px; font-weight:800; letter-spacing:.05em; padding:3px 9px; border-radius:20px; }
.srv-state.on{ background:rgba(46,230,166,.14); color:var(--green); } .srv-state.off{ background:rgba(108,117,145,.18); color:var(--text-mute); }
.srv-meta{ display:flex; justify-content:space-between; margin-bottom:10px; }
.srv-meta div{ display:flex; flex-direction:column; } .srv-meta span{ font-size:11px; color:var(--text-mute); } .srv-meta b{ color:#fff; font-size:14px; }
.srv-bar{ height:8px; border-radius:20px; background:var(--bg-1); overflow:hidden; box-shadow:inset 0 0 0 1px var(--border); }
.srv-bar span{ display:block; height:100%; background:var(--grad-primary); border-radius:20px; }
.srv-offline{ color:var(--text-mute); font-size:13px; padding:10px 0; }
.srv-addr{ text-align:center; font-size:12px; color:var(--text-mute); margin-top:8px; font-family:'JetBrains Mono',monospace; }
/* sidebar mini */
.srv-widget-item{ display:flex; align-items:center; gap:9px; padding:8px 0; font-size:13px; }
.srv-widget-item .d{ width:9px;height:9px;border-radius:50%;flex-shrink:0;} .srv-widget-item .d.on{background:var(--green);box-shadow:0 0 8px var(--green);} .srv-widget-item .d.off{background:var(--text-mute);}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .srv-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 14px;
    }

    .srv-card {
        padding: 14px;
    }

    .srv-meta {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .srv-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .srv-card {
        border-radius: 12px;
        padding: 14px 12px;
    }

    .srv-top {
        gap: 8px;
        margin-bottom: 12px;
    }

    .srv-name {
        font-size: 14px;
    }

    .srv-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 14px;
        margin-bottom: 8px;
    }

    .srv-meta div {
        flex: 1 1 auto;
    }

    .srv-meta b {
        font-size: 13px;
    }

    .srv-bar {
        height: 6px;
    }

    .srv-addr {
        font-size: 11px;
        word-break: break-all;
    }

    /* Connect button full-width already via btn-block, ensure it */
    .btn-block {
        width: 100%;
        display: block;
        text-align: center;
    }
}