/* ===========================================================
   ZONA KARANTINA — servers.css
   Общие компоненты двух серверов проекта:
     1) .srv-bar   — полоса-переключатель серверов над шапкой
     2) .nav-srv   — пункт «перейти на другой сервер» в мобильном меню
     3) .srv-duo   — блок «Два сервера» (главные страницы ZM и CSO)
   Подключается на всех страницах ZM и CSO после основного CSS.
   Для полосы на <body> нужен класс has-srvbar.
   =========================================================== */

:root{
  --srvbar-h:38px;
  --srv-zm:#ff1f3a;
  --srv-zm-deep:#a30e1e;
  --srv-cso:#2e8bff;
  --srv-cso-deep:#1257c9;
}

/* ---------- 1. SERVER BAR ---------- */
body.has-srvbar{padding-top:var(--srvbar-h)}
body.has-srvbar .top-bar{
  top:var(--srvbar-h);
  transition:top .3s ease, border-color .3s, background .3s;
}

.srv-bar{
  position:fixed;top:0;left:0;right:0;z-index:61;
  height:var(--srvbar-h);
  background:#030508;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:transform .3s ease;
  -webkit-font-smoothing:antialiased;
}
.srv-bar-inner{
  height:100%;max-width:1380px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:20px;
}
.srv-bar-lbl{
  font-size:12px;color:#7d838e;white-space:nowrap;
}
.srv-bar-lbl b{color:#c9ced8;font-weight:600}
.srv-tabs{display:flex;align-items:stretch;height:100%;gap:2px}
.srv-tab{
  --c:#9aa0aa;
  position:relative;
  display:flex;align-items:center;gap:9px;
  height:100%;padding:0 16px;
  color:#9aa0aa;text-decoration:none;
  font-size:12.5px;line-height:1;
  transition:color .2s, background .2s;
}
.srv-tab.zm{--c:var(--srv-zm)}
.srv-tab.cso{--c:var(--srv-cso)}
.srv-tab:hover{color:#fff;background:rgba(255,255,255,.04)}
.srv-tab:focus-visible{outline:2px solid var(--c);outline-offset:-2px}
.srv-tab::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:var(--c);transform:scaleX(0);transition:transform .25s ease;
}
.srv-tab:hover::after{transform:scaleX(.5)}
.srv-tab[aria-current="page"]{color:#fff;background:rgba(255,255,255,.035)}
.srv-tab[aria-current="page"]::after{transform:scaleX(1)}

.srv-tag{
  font-family:'Russo One',sans-serif;font-weight:400;
  font-size:11px;letter-spacing:.06em;
  padding:4px 7px 3px;border-radius:3px;
  color:#fff;background:var(--c);
}
.srv-tab:not([aria-current="page"]) .srv-tag{background:rgba(255,255,255,.08);color:#d7dbe2}
.srv-tab:not([aria-current="page"]):hover .srv-tag{background:var(--c);color:#fff}
.srv-tab.cso:not([aria-current="page"]) .srv-tag{box-shadow:inset 0 0 0 1px rgba(46,139,255,.6)}
.srv-name{font-weight:600;white-space:nowrap}
.srv-on{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#7d838e;
  white-space:nowrap;
}
.srv-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:#555b66;
}
.srv-dot.on{background:#37d957;box-shadow:0 0 8px rgba(55,217,87,.8)}
.srv-dot.off{background:#c0392b}
.srv-new{
  font-size:9.5px;font-weight:800;letter-spacing:.04em;
  color:#1a1205;background:#ffb627;
  padding:3px 6px 2px;border-radius:3px;
}
.srv-bar-ip{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#6b717c;
  white-space:nowrap;
}

/* Hero главных страниц ZM — компенсируем высоту полосы (только десктоп) */
@media (min-width:1101px){
  body.has-srvbar .hero{min-height:calc(100svh - var(--srvbar-h))}
  body.has-srvbar .hero-inner{min-height:calc(100svh - 100px - var(--srvbar-h))}
  body.has-srvbar .hero-poster{max-height:calc(100svh - 100px - var(--srvbar-h))}
}
/* Липкое оглавление правил */
@media (min-width:1025px){
  body.has-srvbar .rules-toc{top:calc(100px + var(--srvbar-h));max-height:calc(100vh - 140px - var(--srvbar-h))}
}
/* Якорные ссылки не прячутся под полосой */
@media (min-width:761px){
  html{scroll-padding-top:var(--srvbar-h)}
}

@media (max-width:1100px){
  .srv-bar-lbl,.srv-bar-ip{display:none}
  .srv-bar-inner{padding:0 18px}
  .srv-tabs{flex:1}
  .srv-tab{flex:1;justify-content:center}
}
@media (max-width:760px){
  :root{--srvbar-h:36px}
  .srv-bar-inner{padding:0}
  .srv-tabs{gap:0}
  .srv-tab{padding:0 8px;gap:7px;font-size:12px}
  .srv-tab + .srv-tab{border-left:1px solid rgba(255,255,255,.06)}
  .srv-new{display:none}
  /* при прокрутке полоса уезжает, шапка поднимается к краю */
  body.has-srvbar .top-bar.scrolled{top:0}
  body.has-srvbar .top-bar.scrolled ~ .srv-bar{transform:translateY(-100%)}
}
@media (max-width:400px){
  .srv-name{display:none}
  .srv-tab{gap:8px}
}

/* ---------- 2. MOBILE MENU: другой сервер ---------- */
.nav .nav-srv{display:none}
@media (max-width:1100px){
  .nav.open .nav-srv{
    display:flex;align-items:center;gap:10px;
    margin-top:8px;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:8px;
    color:#fff !important;
  }
  .nav.open .nav-srv .srv-tag{background:var(--c)}
  .nav.open .nav-srv.zm{--c:var(--srv-zm)}
  .nav.open .nav-srv.cso{--c:var(--srv-cso)}
}

/* ---------- 3. «ДВА СЕРВЕРА» ---------- */
.srv-duo{
  position:relative;
  padding:96px 32px;
  background:#06070b;
  border-top:1px solid rgba(255,255,255,.07);
  overflow:hidden;
}
.srv-duo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 420px at 12% 30%, rgba(255,31,58,.10), transparent 70%),
    radial-gradient(700px 420px at 88% 70%, rgba(46,139,255,.12), transparent 70%);
}
.srv-duo-inner{max-width:1180px;margin:0 auto;position:relative}
.srv-duo-head{max-width:640px;margin-bottom:40px}
.srv-duo-title{
  font-family:'Russo One',sans-serif;font-weight:400;
  font-size:clamp(30px,4.4vw,54px);line-height:1;
  text-transform:uppercase;color:#f4f1ea;
  margin-bottom:14px;text-wrap:balance;
}
.srv-duo-lead{font-size:16px;line-height:1.65;color:#9aa0aa;text-wrap:pretty}

.srv-duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.srv-card{
  --c:#999;--c-deep:#555;
  position:relative;
  display:flex;flex-direction:column;
  padding:30px 30px 26px;
  color:#e9ecf1;
  background:#0d0f15;
}
/* ZM — округлая, «кровавая» карточка */
.srv-card.zm{
  --c:var(--srv-zm);--c-deep:var(--srv-zm-deep);
  border-radius:14px;
  border:1px solid rgba(255,31,58,.28);
  background:linear-gradient(165deg, rgba(255,31,58,.12), rgba(13,8,10,.95) 48%), #0d0809;
}
/* CSO — стальная карточка со срезанными углами */
.srv-card.cso{
  --c:var(--srv-cso);--c-deep:var(--srv-cso-deep);
  isolation:isolate;background:none;
}
.srv-card.cso::before,.srv-card.cso::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;
}
.srv-card.cso::before{
  inset:0;background:rgba(46,139,255,.45);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
}
.srv-card.cso::after{
  inset:1px;
  background:linear-gradient(165deg, rgba(46,139,255,.16), rgba(8,13,24,.97) 48%), #080d18;
  clip-path:polygon(17.4px 0,100% 0,100% calc(100% - 17.4px),calc(100% - 17.4px) 100%,0 100%,0 17.4px);
}

.srv-card-top{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.srv-chip{
  font-family:'Russo One',sans-serif;font-size:13px;letter-spacing:.06em;
  color:#fff;background:linear-gradient(180deg,var(--c),var(--c-deep));
  padding:6px 10px 5px;border-radius:4px;
}
.srv-card.cso .srv-chip{border-radius:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.srv-live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#aab0bb;
}
.srv-here{
  margin-left:auto;
  font-size:12px;font-weight:600;color:var(--c);
}
.srv-card .srv-new{margin-left:auto}
.srv-card-name{
  font-family:'Russo One',sans-serif;font-weight:400;
  font-size:clamp(22px,2.3vw,28px);line-height:1.1;
  text-transform:uppercase;color:#fff;margin-bottom:10px;
}
.srv-card-name b{display:block;font-weight:400;color:var(--c)}
.srv-card-desc{font-size:15px;line-height:1.6;color:#aab0bb;margin-bottom:18px;max-width:46ch}
.srv-card-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.srv-card-list li{
  position:relative;padding-left:20px;
  font-size:14px;line-height:1.5;color:#dfe3ea;
}
.srv-card-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--c);
}
.srv-card-foot{
  margin-top:auto;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
}
.srv-card-ip{
  display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
}
.srv-card-ip code{
  font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#fff;
  white-space:nowrap;
}
.srv-card-ip button{
  flex-shrink:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#cfd4dc;cursor:pointer;
  font:600 11.5px/1 'JetBrains Mono',monospace;
  padding:8px 10px;border-radius:6px;
  transition:border-color .2s,color .2s,background .2s;
}
.srv-card-ip button:hover{border-color:var(--c);color:#fff}
.srv-card-ip button.copied{border-color:#37d957;color:#37d957}
.srv-card-go{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;
  font-family:'Russo One',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  background:linear-gradient(180deg,var(--c),var(--c-deep));
  border-radius:8px;
  transition:transform .2s, filter .2s;
}
.srv-card.cso .srv-card-go{border-radius:0;clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.srv-card-go:hover{transform:translateY(-2px);filter:brightness(1.12)}
.srv-card-go:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:900px){
  .srv-duo{padding:72px 20px}
  .srv-duo-grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:760px){
  .srv-duo{padding:56px 16px}
  .srv-duo-head{margin-bottom:28px}
  .srv-duo-lead{font-size:14.5px}
  .srv-card{padding:24px 20px 22px}
  .srv-card-desc{font-size:14px}
  .srv-card-list li{font-size:13.5px}
  .srv-card-go{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .srv-bar,.srv-tab::after,body.has-srvbar .top-bar{transition:none}
}

/* ---------- Шапка на ноутбуках 1101–1340px: без переносов пунктов меню ---------- */
@media (min-width:1101px) and (max-width:1340px){
  .top-bar{gap:14px;padding-left:20px;padding-right:20px}
  .nav{gap:0}
  .nav a{padding:10px 10px;font-size:12.5px;white-space:nowrap}
  .nav a.active::after{left:10px;right:10px}
  .logo-text b{white-space:nowrap}
  .logo-text small{white-space:nowrap}
  .top-actions{gap:8px}
  .ip-pill .ip-copy{display:none}
  .btn-mini{padding:11px 14px;white-space:nowrap}
}
@media (min-width:1101px) and (max-width:1220px){
  .logo-text small{display:none}
  .ip-info .ip-lbl{display:none}
  .nav a{padding:10px 8px;font-size:12px}
  .nav a.active::after{left:8px;right:8px}
  .lang-switch .lang-opt{min-width:32px;padding:6px 8px}
  .btn-mini{padding:11px 12px}
}