/* Public "Серверы" page: summary tiles + location cards. Scoped to .srv-page. */
.srv-page { --srv-border: rgba(126, 111, 194, .28); --srv-panel: rgba(12, 11, 39, .66); --srv-muted: rgba(190, 186, 214, .85); }

.srv-hero { display: grid; gap: 14px; justify-items: start; max-width: 780px; padding: 28px 0 8px; }
.srv-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -.02em; }
.srv-hero h1 em { font-style: normal; background: linear-gradient(135deg, #df2cd7, #8b38ff 52%, #1f9bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.srv-lead { margin: 0; max-width: 640px; color: var(--srv-muted); font-size: 17px; line-height: 1.6; }
.srv-actions { margin-top: 10px; }

.srv-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.srv-tile { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--srv-border); background: var(--srv-panel); }
.srv-tile span { color: var(--srv-muted); font-size: 13px; }
.srv-tile strong { font-size: 30px; line-height: 1.1; color: #fff; }
.srv-tile small { color: var(--srv-muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }

.srv-locations { margin-top: var(--aether-gap, 72px); }
.srv-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.srv-section-head h2 { margin: 0; font-size: 26px; }
.srv-legend { display: inline-flex; align-items: center; gap: 8px; color: var(--srv-muted); font-size: 13px; }
.srv-legend i { width: 8px; height: 8px; border-radius: 50%; background: #65edff; box-shadow: 0 0 10px rgba(101, 237, 255, .7); }

.srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.srv-card { display: grid; gap: 16px; padding: 20px; border-radius: 18px; border: 1px solid var(--srv-border); background: var(--srv-panel);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) {
    .srv-card:hover { transform: translateY(-3px); border-color: rgba(160, 130, 255, .5); box-shadow: 0 18px 40px rgba(40, 20, 100, .35); }
}
.srv-card-head { display: flex; align-items: center; gap: 12px; }
.srv-flag { width: 44px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.srv-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srv-card-title { min-width: 0; flex: 1; }
.srv-card-title h3 { margin: 0; font-size: 18px; color: #fff; }
.srv-card-title p { margin: 2px 0 0; color: var(--srv-muted); font-size: 12.5px; }
.srv-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #7ff0c3; background: rgba(53, 211, 154, .12); }
.srv-status i { width: 7px; height: 7px; border-radius: 50%; background: #35d39a; box-shadow: 0 0 8px rgba(53, 211, 154, .8); }

.srv-ping { display: grid; gap: 8px; }
.srv-ping-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--srv-muted); font-size: 13px; }
.srv-ping-head b { color: #fff; font-size: 17px; }
.srv-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.srv-bar i { display: block; height: 100%; border-radius: 99px; }
.srv-bar i.fast { background: linear-gradient(90deg, #35d39a, #65edff); }
.srv-bar i.good { background: linear-gradient(90deg, #4aa8ff, #65edff); }
.srv-bar i.ok { background: linear-gradient(90deg, #f6b646, #4aa8ff); }

.srv-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.srv-tag { padding: 5px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; border: 1px solid transparent; }
.srv-tag.cyan { color: #8fe9ff; background: rgba(101, 237, 255, .1); border-color: rgba(101, 237, 255, .3); }
.srv-tag.pink { color: #f5b3ee; background: rgba(223, 44, 215, .1); border-color: rgba(223, 44, 215, .3); }
.srv-clients { margin: 0; color: var(--srv-muted); font-size: 13px; line-height: 1.55; }
.srv-clients b { color: #e7e2ff; font-weight: 600; }

.srv-empty { display: grid; gap: 6px; padding: 28px; border-radius: 18px; border: 1px dashed var(--srv-border); background: var(--srv-panel); }
.srv-empty strong { font-size: 18px; color: #fff; }
.srv-empty span { color: var(--srv-muted); }

.srv-how { margin-top: var(--aether-gap, 72px); }
.srv-how h2 { margin: 0 0 18px; font-size: 26px; }
.srv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.srv-steps article { display: grid; gap: 8px; padding: 22px; border-radius: 18px; border: 1px solid var(--srv-border); background: var(--srv-panel); }
.srv-steps b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #df2cd7, #8b38ff); }
.srv-steps h3 { margin: 4px 0 0; font-size: 17px; color: #fff; }
.srv-steps p { margin: 0; color: var(--srv-muted); font-size: 14px; line-height: 1.6; }

.srv-note { margin: 28px 0 0; color: var(--srv-muted); font-size: 12.5px; }

@media (max-width: 960px) { .srv-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .srv-steps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .srv-summary { grid-template-columns: 1fr; } .srv-hero { padding-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .srv-card { transition: none; } .srv-card:hover { transform: none; } }