/* LastCS homepage v25 — original BG restored + SVG banners */
:root {
  --l2-bg: #05080c;
  --l2-surface: rgba(8, 12, 18, .58);
  --l2-card: rgba(10, 14, 20, .62);
  --l2-border: rgba(255, 255, 255, .11);
  --l2-text: #c4ccd6;
  --l2-text-strong: #ffffff;
  --l2-muted: #85909c;
  --l2-accent-hot: #eef2f6;
  --l2-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --l2-width: 1360px;
  --l2-green: #7dffa8;
  --l2-red: #ff8e8e;
  --l2-nav-h: 71px;
  --grad: linear-gradient(135deg, #6eb6ff, #c8d0dc 50%, #ff6b5a);
  --font-display: "Ubuntu", "Segoe UI", sans-serif;
  --font-body: "Ubuntu", "Segoe UI", sans-serif;
  --map-h: 148px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
  margin: 0;
  min-height: 100vh;
  background: #05080c;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #05080c;
  color: var(--l2-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}

a { color: #d2dae4; text-decoration: none; transition: color .18s var(--l2-ease); }
a:hover { color: #fff; }
code {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: .15em .5em;
  border-radius: 999px;
  font-size: 12px;
  color: var(--l2-accent-hot);
}

/* ——— Original photo background (restored) ——— */
.fx-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.fx-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  filter: saturate(1.15) contrast(1.08) brightness(1.12);
  transform: scale(1.04);
}
.fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
}
.fx-orb-a {
  width: 420px; height: 420px;
  left: -100px; top: 8%;
  background: radial-gradient(circle, rgba(110,182,255,.35), transparent 68%);
}
.fx-orb-b {
  width: 360px; height: 360px;
  right: -80px; bottom: 8%;
  background: radial-gradient(circle, rgba(255,107,90,.25), transparent 68%);
}
.fx-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,8,12,.22) 0%, rgba(5,8,12,.35) 50%, rgba(5,8,12,.55) 100%),
    radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(5,8,12,.35) 80%);
}
#particles { display: none; }

.topbar,
.main,
.footer {
  position: relative;
  z-index: 2;
}

/* ——— Nav ——— */
.topbar {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--l2-nav-h);
  background: rgba(6, 10, 16, .92);
  border-bottom: 1px solid rgba(255,255,255,.07);
  /* no backdrop-filter — can hide page content on some desktop GPUs */
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.topbar-inner {
  max-width: var(--l2-width);
  margin: 0 auto;
  min-height: var(--l2-nav-h);
  padding: 0 20px;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topbar-inner--center {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
  min-height: 0;
}
.topbar-inner--center .logo { justify-content: center; }
.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: #c8d0da;
}
.live-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--l2-green);
  box-shadow: 0 0 0 0 rgba(125,255,168,.5);
  animation: pulse 1.8s ease-out infinite;
}
.live-chip-item b {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 3px;
}
.live-chip-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.18);
}
.logo { display: flex; align-items: center; gap: 12px; color: inherit; }
.l2-logoMark {
  width: 42px; height: 34px; display: block;
  filter: drop-shadow(0 0 14px rgba(110,182,255,.4));
  transition: transform .35s var(--l2-ease), filter .35s var(--l2-ease);
}
.logo:hover .l2-logoMark {
  transform: translateY(-1px) scale(1.05);
  filter: drop-shadow(0 0 22px rgba(255,107,90,.35));
}
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}
.logo-text small {
  color: var(--l2-muted);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Segmented nav tabs */
.nav--tabs { width: 100%; display: flex; justify-content: center; }
.nav-track {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(0,0,0,.35);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.nav-track a {
  color: #c8d0da;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--font-display);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background .22s var(--l2-ease),
    border-color .22s var(--l2-ease),
    color .22s var(--l2-ease),
    transform .22s var(--l2-ease),
    box-shadow .22s var(--l2-ease);
}
.nav-track a:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.nav-track a.is-active {
  color: #0a0e12;
  background: linear-gradient(180deg, #ffffff, #d5dbe4);
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 6px 20px rgba(255,255,255,.16), 0 0 24px rgba(110,182,255,.2);
}
.nav-track a.nav-cta {
  color: #fff;
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}
.nav-track a.nav-cta:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
}
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nav a { color: #d4d4dc; padding: 8px 15px; font-size: 13px; font-weight: 600; border-radius: 999px; }

.main {
  flex: 1 0 auto;
  max-width: var(--l2-width);
  margin: 0 auto;
  padding: 22px 20px 80px;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Reveal — CSS animation fallback so content never stays invisible */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: revealIn .7s var(--l2-ease) both;
  animation-delay: var(--delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }
@keyframes revealIn {
  to { opacity: 1; transform: none; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 8px; color: var(--l2-muted);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--l2-green);
  box-shadow: 0 0 0 0 rgba(125, 255, 168, .55);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Panels */
.panel, .bn-tool {
  background: var(--l2-surface);
  border: 1px solid var(--l2-border);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.panel-head h1, .panel-head h2 {
  margin: 0 0 4px; color: #fff;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: .04em;
}
.panel-head p { margin: 0; color: var(--l2-muted); font-size: 13px; }

/* ——— Homepage banners: full-width stack (readable like redirecte) ——— */
.banner-home {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 0;
}
.banner-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.banner-card {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #2a2a2a;
  text-decoration: none;
  line-height: 0;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.banner-card img,
.banner-card-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1280 / 300;
  object-fit: contain;
  object-position: center;
  border: 0;
  margin: 0;
  padding: 0;
  background: #2a2a2a;
}
.bn-codes-only { display: flex; flex-direction: column; gap: 14px; }
.admin-edit { max-width: 960px; margin: 24px auto; }
.admin-banner-preview {
  margin: 0 0 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background-color: #0c1016;
}
.admin-banner-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  aspect-ratio: 1280 / 300;
  object-fit: contain;
  background: #111;
}
.admin-colors { grid-column: 1 / -1; margin-top: 4px; }
.admin-colors h3 {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
}

/* ——— Compact 2×2 — body height = map ——— */
.servers-section { margin-bottom: 12px; }
.servers-home { padding-top: 4px; }

.servers-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 0 2px;
}
.servers-head h2 {
  margin: 0 0 4px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.15rem);
  font-weight: 700;
  letter-spacing: .04em;
}
.servers-head p { margin: 0; color: var(--l2-muted); font-size: 13px; }

.gt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.gt-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  background: var(--l2-card);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  transition: transform .28s var(--l2-ease), border-color .28s var(--l2-ease), box-shadow .28s var(--l2-ease);
  position: relative;
}
.gt-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(110,182,255,.35), transparent 40%, rgba(255,107,90,.25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--l2-ease);
  pointer-events: none;
  z-index: 2;
}
.gt-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 24px 50px rgba(0,0,0,.55), 0 0 40px rgba(110,182,255,.08);
}
.gt-card:hover::before { opacity: 1; }
.gt-card.is-online { box-shadow: inset 3px 0 0 #fff, 0 14px 36px rgba(0,0,0,.45); }
.gt-card.is-online:hover { box-shadow: inset 3px 0 0 #fff, 0 24px 50px rgba(0,0,0,.55), 0 0 28px rgba(125,255,168,.1); }
.gt-card.is-offline { opacity: .9; box-shadow: inset 3px 0 0 #666, 0 14px 36px rgba(0,0,0,.45); }

/* Bigger top banner strip */
.gt-banner {
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.05), transparent 45%), #0e1218;
  position: relative;
  overflow: hidden;
}
.gt-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform: translateX(-120%);
  animation: bannerShine 5.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes bannerShine {
  0%, 65% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.gt-banner img {
  display: block;
  width: 100%;
  height: 158px;
  object-fit: cover;
  object-position: center left;
}

/* Body row = map height */
.gt-body {
  display: grid;
  grid-template-columns: var(--map-h) 1fr;
  gap: 10px;
  padding: 10px;
  align-items: stretch;
  height: calc(var(--map-h) + 20px);
  max-height: calc(var(--map-h) + 20px);
}

.gt-map {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #0a0e12;
  text-align: center;
  color: inherit;
  transition: border-color .2s var(--l2-ease), box-shadow .2s var(--l2-ease);
}
.gt-map:hover {
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 20px rgba(110,182,255,.15);
}
.gt-map img {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  background: #121820;
}
.gt-map span {
  display: block;
  flex-shrink: 0;
  padding: 5px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--font-display);
  color: #d0d8e0;
  background: rgba(0,0,0,.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gt-main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.gt-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
}
.gt-title { min-width: 0; }
.gt-top h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-top h3 a { color: #fff; }

.gt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.gt-meta .ip-chip { flex: 1; min-width: 0; }
.gt-players-count {
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.4);
  padding: 4px 9px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  letter-spacing: .02em;
}
.gt-players-count span { color: var(--l2-muted); font-weight: 600; }

.gt-players {
  flex: 1;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(0,0,0,.32);
  overflow: auto;
}
.gt-players ul {
  list-style: none;
  margin: 0;
  padding: 2px 0;
}
.gt-players li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  line-height: 1.35;
}
.gt-players li:last-child { border-bottom: 0; }
.gt-players li span {
  color: #e4eaf0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-players li em {
  color: var(--l2-muted);
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gt-empty {
  margin: 0;
  padding: 10px 8px;
  text-align: center;
  color: var(--l2-muted);
  font-size: 11px;
}
.gt-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex-shrink: 0;
  margin-top: auto;
}
.gt-actions .btn { padding: 6px 12px; font-size: 11px; }

/* Pills / chips / bars */
.game-pill, .status-pill {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--font-display);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: #ddd;
}
.status-pill.is-on {
  color: #d8ffe8;
  border-color: rgba(125,255,168,.4);
  background: rgba(125,255,168,.12);
  box-shadow: 0 0 14px rgba(125,255,168,.15);
}
.status-pill.is-off {
  color: #ffd0d0;
  border-color: rgba(255,142,142,.3);
  background: rgba(255,142,142,.08);
}
.ip-chip {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.35);
  color: #e4eaf0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
.ip-chip:hover, .ip-chip.is-copied {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  flex-shrink: 0;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff, #b8c4d0);
  box-shadow: 0 0 12px rgba(255,255,255,.3);
  transition: width .6s var(--l2-ease);
}
.bar-lg { height: 6px; margin-bottom: 14px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #ececf2;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition:
    background .22s var(--l2-ease),
    border-color .22s var(--l2-ease),
    color .22s var(--l2-ease),
    transform .22s var(--l2-ease),
    box-shadow .22s var(--l2-ease);
}
.btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.12);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.btn-primary {
  color: #0a0e12;
  background: linear-gradient(180deg, #ffffff, #d4dae4);
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 8px 28px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35);
}
.btn-primary:hover {
  color: #000;
  background: linear-gradient(180deg, #ffffff, #eef2f6);
  border-color: #fff;
  box-shadow: 0 12px 36px rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.4);
}
.btn-ghost {
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.14);
}
.btn-danger {
  border-color: rgba(240,160,160,.4);
  color: #ffd0d0;
  background: rgba(240,160,160,.08);
}
.btn-disabled { opacity: .45; pointer-events: none; }
.btn-lg { padding: 12px 24px; font-size: 14px; }
.actions, .detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Detail page */
.detail-hero {
  position: relative;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
  min-height: 300px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.detail-hero-bg {
  position: absolute; inset: 0;
  background: #0a0e12 center/cover no-repeat;
  transform: scale(1.04);
  filter: saturate(.95);
}
.detail-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,8,12,.2), rgba(5,8,12,.88) 72%, #05080c),
    linear-gradient(90deg, rgba(5,8,12,.8), transparent 58%);
}
.detail-hero-body {
  position: relative; z-index: 1;
  padding: 24px;
  max-width: 720px;
}
.back-link {
  display: inline-block; margin-bottom: 12px;
  color: var(--l2-muted); font-size: 13px; font-weight: 600;
}
.detail-kicker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-map-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.detail-map {
  width: 110px;
  height: 82px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0a0e12;
  flex-shrink: 0;
}
.detail-hero h1 {
  margin: 0 0 6px; color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700;
  letter-spacing: .04em;
}
.detail-sub { margin: 0; color: #c8d0da; font-size: 13px; }
.detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.detail-stats div {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 11px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
}
.detail-stats span {
  display: block; color: var(--l2-muted); font-size: 10px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px;
}
.detail-stats strong {
  color: #fff; font-size: 20px;
  font-family: var(--font-display);
  letter-spacing: .02em;
}
.detail-stats small { color: var(--l2-muted); }
.detail-players { margin-bottom: 0; }

/* ——— Unique server page ——— */
.sv-back { display: inline-block; margin: 0 0 14px; }
.sv-banner-wrap {
  max-width: 980px;
  margin: 0 auto 16px;
}
.sv-banner-img,
.sv-banner-wrap object {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 780 / 170;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #2a2a2a;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.sv-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
}
.sv-hero {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(8, 12, 18, .78);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
  position: relative;
}
.sv-hero.is-online { box-shadow: inset 3px 0 0 #fff, 0 22px 55px rgba(0,0,0,.45); }
.sv-hero.is-offline { box-shadow: inset 3px 0 0 #666, 0 22px 55px rgba(0,0,0,.45); }
.sv-map {
  position: relative;
  min-height: 320px;
  background: #0a0e14;
}
.sv-map img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.sv-map-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.82));
  font-family: var(--font-display);
}
.sv-map-cap span {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sv-map-cap em {
  color: #b8c0cc;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
}
.sv-info {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.sv-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sv-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--l2-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}
.sv-live i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--l2-green);
  box-shadow: 0 0 0 0 rgba(125,255,168,.5);
  animation: pulse 1.8s ease-out infinite;
}
.sv-info h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.sv-sub { margin: 0; color: var(--l2-muted); font-size: 14px; }
.sv-ip { align-self: flex-start; max-width: 100%; }
.sv-fill { margin-top: 4px; }
.sv-fill-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  color: var(--l2-muted);
  font-size: 13px;
}
.sv-fill-top strong {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.sv-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
  align-items: start;
}
.sv-players { margin-bottom: 0; }

/* Banner studio */
.bn-studio {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr);
  gap: 18px;
  align-items: start;
}
.bn-studio--stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bn-preview {
  background:
    linear-gradient(45deg, #1a222c 25%, transparent 25%),
    linear-gradient(-45deg, #1a222c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a222c 75%),
    linear-gradient(-45deg, transparent 75%, #1a222c 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #0c1016;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  width: 100%;
}
.bn-preview-frame {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1);
  background: #05080c;
}
.bn-preview img {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: 140px;
  aspect-ratio: 1280 / 340;
  object-fit: contain;
  background: #0a0e12;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
.bn-panel { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.bn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bn-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bn-colors {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.bn-colors label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--l2-muted);
}
.bn-colors input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  cursor: pointer;
}
.bn-label {
  display: block; margin-bottom: 6px; color: var(--l2-muted);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--font-display);
}
.bn-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-seg button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: #d0d8e0;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--l2-ease), border-color .2s var(--l2-ease), color .2s var(--l2-ease), transform .2s var(--l2-ease);
}
.bn-seg button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.bn-seg button.is-active {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 18px rgba(110,182,255,.15);
}
.bn-panel textarea, .bn-panel select, .form input, .form select, .form textarea {
  width: 100%;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.4);
  color: #e4eaf0;
  padding: 11px 13px;
  font: inherit;
  outline: none;
}
.bn-panel textarea {
  resize: vertical; min-height: 84px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
}
.bn-copy { width: 100%; margin-top: 8px; }

/* Forms / tables */
.form { display: flex; flex-direction: column; gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 4px; color: var(--l2-muted); font-size: 12px; font-weight: 600; }
.form .check { flex-direction: row; align-items: center; gap: 10px; color: #e0e0e6; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  text-align: left; padding: 9px 8px;
  border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; font-size: 13px;
}
.table th {
  color: var(--l2-muted); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  font-family: var(--font-display);
}
.table td b { color: #fff; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: rgba(255,255,255,.03); }

.flash {
  margin: 0 0 12px; padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--l2-border); font-size: 13px;
  backdrop-filter: blur(10px);
}
.flash-ok { background: rgba(154,230,180,.08); border-color: rgba(154,230,180,.28); color: #d8f5e2; }
.flash-error { background: rgba(240,160,160,.08); border-color: rgba(240,160,160,.28); color: #f5d0d0; }
.flash-warn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #e8e8ee; }
.empty { color: var(--l2-muted); padding: 24px; text-align: center; font-size: 14px; }

.footer {
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 18px 10px;
  text-align: center;
  color: var(--l2-muted);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}
.footer-inner { max-width: var(--l2-width); margin: 0 auto; padding: 0 20px; width: 100%; }
.footer-copy {
  margin: 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--l2-muted);
}

.server-grid, .server-grid--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px) {
  .banner-home { max-width: 100%; }
  .banner-list { gap: 12px; }
  .gt-grid { grid-template-columns: 1fr; }
  .bn-studio { grid-template-columns: 1fr; }
  .bn-row, .bn-row--3 { grid-template-columns: 1fr; }
  .bn-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-stats { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .gt-banner img { height: 132px; }
  .sv-hero { grid-template-columns: 1fr; }
  .sv-map, .sv-map img { min-height: 220px; }
  .sv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar-inner { padding: 12px 12px; }
  .main { padding: 14px 12px 56px; }
  .nav-track, .nav--tabs { width: 100%; gap: 3px; }
  .nav-track a, .nav--tabs a { padding: 8px 12px; font-size: 12px; }
  .banner-list { gap: 10px; }
  .sv-banner-img,
  .sv-banner-wrap object {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .gt-body {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
  .gt-map { height: auto; }
  .gt-map img { height: 140px; flex: none; }
  .gt-main { height: auto; overflow: visible; }
  .gt-players { max-height: 100px; flex: none; }
  .gt-banner img { height: 110px; }
  .sv-info { padding: 18px 16px; }
  .sv-info h1 { font-size: 1.55rem; }
  .bn-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-chip { font-size: 11px; padding: 7px 12px; gap: 8px; }
  .brand-row { gap: 10px; }
  --map-h: 120px;
}

@media (prefers-reduced-motion: reduce) {
  .fx-photo-img, .fx-orb, .gt-banner::before, .pulse-dot, .reveal { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}