/* =========================================================
   PB Panel — UI
   Стиль: тёмный ангар/бункер + Steam Overlay vibe (без карт)
   Важно: этот CSS подключаем на все страницы.
   ========================================================= */

:root{
  --bg:#05070b;
  --bg2:#070b12;
  --panel:#0f141b;
  --panel2:#0b0f15;
  --text:#e9eef6;
  --muted:#a9b4c6;

  /* CS/Steam акцент */
  --cs:#f6c646;
  --cs2:#ffdf86;
  --steam:#66c0f4;

  --stroke:rgba(255,255,255,.08);
  --strokeCs:rgba(246,198,70,.28);
  --strokeSteam:rgba(102,192,244,.22);

  --shadow:0 20px 70px rgba(0,0,0,.70);

  --r:16px;
  --r2:14px;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;

  /* База — темнота */
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(246,198,70,.10), transparent 60%),
    radial-gradient(1000px 700px at 85% 0%, rgba(102,192,244,.08), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg) 100%);
}

/* Steam Overlay vibe: мягкий туман + пульс */
body::after{
  content:"";
  position:fixed;
  inset:-220px;
  pointer-events:none;
  background:
    radial-gradient(circle at 22% 30%, rgba(246,198,70,.18), transparent 45%),
    radial-gradient(circle at 80% 25%, rgba(102,192,244,.16), transparent 48%),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.04), transparent 60%);
  filter: blur(90px);
  opacity:.55;
  animation: pbPulse 6.8s ease-in-out infinite;
}

@keyframes pbPulse{
  0%{ transform: translate3d(0,0,0) scale(1); opacity:.50; }
  50%{ transform: translate3d(0,-8px,0) scale(1.03); opacity:.62; }
  100%{ transform: translate3d(0,0,0) scale(1); opacity:.50; }
}

/* Контейнер */
.wrap{max-width:980px; margin:0 auto; padding:18px 18px 78px;}

/* Верхняя панель */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 14px;
  border-radius:var(--r);
  border:1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    radial-gradient(900px 240px at 12% 0%, rgba(246,198,70,.12), transparent 60%),
    radial-gradient(900px 240px at 88% 0%, rgba(102,192,244,.10), transparent 60%);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}

/* UI sweep */
.top::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-70%);
  animation:sweep 7.2s ease-in-out infinite;
  opacity:.35;
  pointer-events:none;
}
@keyframes sweep{
  0%{transform:translateX(-70%)}
  50%{transform:translateX(70%)}
  100%{transform:translateX(-70%)}
}

/* Бренд */
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.4px;}
.logo{
  width:12px; height:12px; border-radius:3px;
  background:linear-gradient(135deg, var(--cs), rgba(246,198,70,.35));
  box-shadow:0 0 0 4px rgba(246,198,70,.10);
  border:1px solid rgba(246,198,70,.35);
}

/* Пилюли */
.dbpill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(9,12,18,.60);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.dbpill b{color:var(--cs2)}

/* ссылки */
.link{
  color:var(--cs2);
  text-decoration:none;
  border-bottom:1px dashed rgba(246,198,70,.45);
  padding-bottom:1px;
}
.link:hover{border-bottom-style:solid}

/* Виджет сервера */
.server{
  margin-top:14px;
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  box-shadow: 0 16px 58px rgba(0,0,0,.60);
  padding:22px;
  position:relative;
  overflow:hidden;
  min-height:260px;
}

/* Локальная подсветка */
.server::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 260px at 15% 0%, rgba(246,198,70,.16), transparent 60%),
    radial-gradient(900px 260px at 85% 0%, rgba(102,192,244,.13), transparent 60%);
  opacity:.70;
  pointer-events:none;
}

.serverHead{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative;}
.srvTitle{font-weight:900; font-size:22px; margin:0; letter-spacing:.2px;}
.srvSub{margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.3;}

.status{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,9,12,.55);
  font-size:12px;
  white-space:nowrap;
}
.dot{width:8px; height:8px; border-radius:50%; background:#fb7185; box-shadow:0 0 0 4px rgba(251,113,133,.12);}
.dot.on{background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12);}

.stats{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  position:relative;
}
@media(min-width:860px){ .stats{grid-template-columns: repeat(4, minmax(0,1fr));} }

.stat{
  border-radius:var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  padding:14px;
  min-height:72px;
}
.k{color:var(--muted); font-size:11.5px; margin:0 0 6px}
.v{font-size:18px; font-weight:900; margin:0}

.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media(min-width:860px){ .grid{grid-template-columns: repeat(4, minmax(0,1fr));} }

a.btn{
  text-decoration:none; color:inherit;
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(180deg, #0f141b 0%, #0a0d12 100%);
  padding:14px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:8px;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
  position:relative;
  overflow:hidden;
  min-height:98px;
}
a.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(102,192,244,.35);
  filter: brightness(1.03);
}

.t{margin:0; font-weight:900; letter-spacing:.2px}
.d{margin:0; color:var(--muted); font-size:12.5px; line-height:1.3}

.bottom{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:10px 14px;
  background:rgba(7,9,12,.72);
  border-top:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.bottomInner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}
.bottom b{color:var(--text)}

code{
  background:rgba(255,255,255,.06);
  padding:2px 6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.9);
}

/* ============================= */
/* АНГАР / БУНКЕР ФОН */
/* ============================= */

/* ===== ФОН: АНГАР / БУНКЕР + STEAM VIBE ===== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    /* “металл” и панели */
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.05) 1px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 26px
    ),
    linear-gradient(115deg, rgba(255,255,255,.07), rgba(255,255,255,0) 38%),
    linear-gradient(245deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%);
  mix-blend-mode:overlay;
}

body::after{
  content:"";
  position:fixed;
  inset:-240px;
  pointer-events:none;
  background:
    /* теплый свет слева (CS вайб) */
    radial-gradient(circle at 18% 18%, rgba(246,198,70,.22), transparent 46%),
    /* холодный свет справа (Steam вайб) */
    radial-gradient(circle at 86% 20%, rgba(102,192,244,.18), transparent 52%),
    /* нижняя дымка */
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.05), transparent 60%);
  filter: blur(95px);
  opacity:.58;
  animation: pbPulse 6.8s ease-in-out infinite;
}

/* ============================= */
/* ПУЛЬС ONLINE */
/* ============================= */

.status-online {
    position: relative;
}

.status-online::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #00ff9c;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 8px #00ff9c;
    animation: pulseOnline 1.6s infinite;
}

@keyframes pulseOnline {
    0%   { box-shadow: 0 0 5px #00ff9c; }
    50%  { box-shadow: 0 0 15px #00ff9c; }
    100% { box-shadow: 0 0 5px #00ff9c; }
}

.card {
    backdrop-filter: blur(12px);
    background: linear-gradient(145deg, rgba(20,30,40,0.6), rgba(10,15,25,0.6));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    transition: 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(0,150,255,0.15);
}

/* ===== ПУЛЬС ТОЧКИ ONLINE ===== */
.dot.on{
  animation: dotPulse 1.4s ease-in-out infinite;
}

@keyframes dotPulse{
  0%   { box-shadow:0 0 0 4px rgba(34,197,94,.10), 0 0 10px rgba(34,197,94,.10); }
  50%  { box-shadow:0 0 0 7px rgba(34,197,94,.18), 0 0 18px rgba(34,197,94,.18); }
  100% { box-shadow:0 0 0 4px rgba(34,197,94,.10), 0 0 10px rgba(34,197,94,.10); }
}