body.server-browser-page {
  --bg: #10151b;
  --panel: #171f28;
  --panel-soft: #1d2833;
  --line: #2b3946;
  --text: #edf2f7;
  --muted: #a2afbc;
  --faint: #748392;
  --lime: #ed8154;
  --lime-dark: #cb633b;
  --gold: #f0bd72;
  --font-display: "DM Sans", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.server-browser-page .site-header {
  position: sticky;
  top: 0;
  height: 68px;
  border-bottom-color: #26313c;
  background: rgba(16, 21, 27, .96);
  backdrop-filter: blur(14px);
}

.server-browser-page .header-inner,
.server-browser-page .hero-content,
.server-browser-page .content-wrap,
.server-browser-page .premium-inner,
.server-browser-page .how-section {
  max-width: 1180px;
}

.server-browser-page .brand {
  font-family: var(--font-body);
  font-size: 20px;
  letter-spacing: -.04em;
}

.server-browser-page .brand-logo { width: 32px; height: 28px; }
.server-browser-page .brand-copy small { color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.server-browser-page .brand-accent { color: var(--lime); }
.server-browser-page .main-nav { gap: 28px; }
.server-browser-page .nav-link { color: #a9b4bf; font-size: 12px; }
.server-browser-page .nav-link:hover,
.server-browser-page .nav-link.active { color: white; }
.server-browser-page .nav-link.active::after { background: var(--lime); }
.server-browser-page .button { border-radius: 5px; font-size: 11px; }
.server-browser-page .button-primary { color: #21130e; background: var(--lime); }
.server-browser-page .button-primary:hover { background: #ffa17b; }
.server-browser-page .button-quiet { color: #c0cad4; }
.server-browser-page .button-outline { border-color: #3a4a58; }
.server-browser-page .button-outline:hover { border-color: var(--lime); color: var(--lime); }

.server-browser-page .hero {
  min-height: 0;
  border-bottom-color: #26313c;
  background:
    radial-gradient(ellipse at 82% 10%, rgba(237, 129, 84, .11), transparent 37%),
    linear-gradient(115deg, #121a22 0%, #10151b 60%, #151b21 100%);
}

.server-browser-page .hero-grid,
.server-browser-page .hero-art,
.server-browser-page .hero-positioning { display: none; }
.server-browser-page .hero-content { padding: 48px 28px 32px; }
.server-browser-page .hero h1 {
  margin: 0 0 11px;
  font-family: var(--font-body);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.server-browser-page .hero h1 span { color: var(--lime); }
.server-browser-page .hero-copy {
  max-width: 540px;
  margin-bottom: 23px;
  color: #a8b4bf;
  font-size: 13px;
  line-height: 1.6;
}

.server-browser-page .hero-actions { display: flex; align-items: center; gap: 18px; margin: 0 0 15px; }
.server-browser-page .hero-actions .button { min-height: 40px; }
.server-browser-page .hero-newest-link { color: #bac5cf; font-size: 11px; font-weight: 600; }
.server-browser-page .hero-newest-link:hover { color: var(--lime); }
.server-browser-page .hero-search {
  width: min(680px, 100%);
  height: 48px;
  margin-top: 0;
  border-color: #3a4855;
  border-radius: 6px;
  background: #0e141a;
}

.server-browser-page .search-icon { color: #9aaab8; font-size: 23px; }
.server-browser-page .hero-search input { color: white; font-size: 12px; }
.server-browser-page .hero-search input::placeholder { color: #778695; }
.server-browser-page .hero-search .button { height: 36px; }
.server-browser-page .hero-stats { gap: 10px; margin-top: 22px; }
.server-browser-page .hero-stat-card {
  min-width: 148px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid #293742;
  border-radius: 6px;
  background: rgba(22, 31, 40, .8);
}

.server-browser-page .hero-stat-icon {
  width: 27px;
  height: 27px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  background: rgba(237, 129, 84, .12);
  color: var(--lime);
}

.server-browser-page .hero-stat-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.server-browser-page .hero-stat-icon.fivem-mark svg { width: 13px; height: 14px; fill: currentColor; stroke: none; }
.server-browser-page .hero-stat-copy { display: flex; flex-direction: column; gap: 3px; }
.server-browser-page .hero-stat-copy strong { font-size: 16px; line-height: 1; }
.server-browser-page .hero-stat-copy small { color: #98a6b3; font-size: 9px; }

.server-browser-page .content-wrap { padding: 36px 28px 64px; }
.server-browser-page .ranking-layout { display: block; }
.server-browser-page .section-heading { align-items: center; margin-bottom: 18px; }
.server-browser-page .section-heading h2 {
  margin: 0;
  color: #f0f4f7;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.server-browser-page .section-heading h2 span { color: var(--lime); }
.server-browser-page .text-link { color: #aab6c1; font-size: 10px; }
.server-browser-page .text-link:hover { color: var(--lime); }
.server-browser-page .premium-ranking { margin: 28px 0 30px; }
.server-browser-page .premium-ranking-heading { margin-bottom: 12px; }
.server-browser-page .premium-ranking-heading h3 { color: #f0bd72; font-family: var(--font-body); font-size: 14px; letter-spacing: .07em; }
.server-browser-page .premium-server-list { gap: 9px; padding: 0; }
.server-browser-page .filter-row { margin: 26px 0 12px; }
.server-browser-page .filter-chips { gap: 7px; }
.server-browser-page .filter-chip {
  padding: 8px 12px;
  border-color: #303e4a;
  border-radius: 5px;
  color: #aab7c3;
  background: #141c24;
  font-size: 10px;
}

.server-browser-page .filter-chip:hover,
.server-browser-page .filter-chip.active {
  border-color: rgba(237, 129, 84, .58);
  color: #ff9a70;
  background: rgba(237, 129, 84, .09);
}

.server-browser-page .filter-chip span { color: #7b8b99; font-size: 9px; }
.server-browser-page .filter-note { color: #96a4b0; font-size: 10px; }
.server-browser-page .filter-note .online-dot { background: #54ce8b; box-shadow: 0 0 8px rgba(84, 206, 139, .35); }
.server-browser-page .server-list { gap: 8px; }
.server-browser-page .server-card {
  min-height: 116px;
  grid-template-columns: 72px minmax(0, 1fr) 92px;
  grid-template-rows: minmax(0, 1fr) 32px;
  column-gap: 14px;
  row-gap: 4px;
  padding: 10px 12px;
  border: 1px solid #2a3742;
  border-radius: 6px;
  background: #151d25;
}

.server-browser-page .server-card:hover {
  transform: translateY(-1px);
  border-color: #536575;
  background: #19232d;
}

.server-browser-page .server-card.premium-gold-card {
  border-color: rgba(240, 189, 114, .5);
  background: linear-gradient(100deg, rgba(74, 54, 32, .34), #171e25 52%);
  box-shadow: none;
}

.server-browser-page .server-card.premium-gold-card:hover { border-color: #f0bd72; }
.server-browser-page .server-card.featured-green-card {
  border-color: rgba(237, 129, 84, .64);
  background: linear-gradient(100deg, rgba(76, 45, 34, .42), #171e25 58%);
  box-shadow: none;
}

.server-browser-page .server-card.featured-green-card:hover { border-color: #ff9a70; }
.server-browser-page .server-rank {
  top: 7px;
  left: 7px;
  min-width: 33px;
  padding: 3px 6px;
  border-color: rgba(230, 238, 245, .25);
  border-radius: 4px;
  background: rgba(10, 15, 20, .88);
  font-family: var(--font-body);
  font-size: 9px;
}

.server-browser-page .premium-gold-card .server-rank.premium-rank {
  border-color: rgba(240, 189, 114, .45);
  background: rgba(39, 30, 20, .9);
  color: #f3c982;
  text-shadow: none;
}

.server-browser-page .featured-green-card .server-rank.premium-rank {
  border-color: rgba(237, 129, 84, .55);
  background: rgba(47, 29, 23, .9);
  color: #ffab87;
  text-shadow: none;
}

.server-browser-page .server-card-media {
  width: 72px;
  height: 72px;
  min-height: 72px;
  align-self: center;
  border-color: #344451;
  border-radius: 6px;
  background: linear-gradient(135deg, #283744, #1a242d);
}

.server-browser-page .premium-server-list .server-card-media,
.server-browser-page .server-list:not(.premium-server-list) .server-card-media {
  height: 72px;
  min-height: 72px;
}

.server-browser-page .server-card-media::after { background: linear-gradient(0deg, rgba(8, 12, 17, .25), transparent 60%); }
.server-browser-page .server-card-body { gap: 6px; padding: 2px 0; }
.server-browser-page .server-card-heading { gap: 6px 9px; }
.server-browser-page .server-card-heading strong { color: #f1f5f8; font-size: 14px; font-weight: 700; }
.server-browser-page .server-title-link:hover strong { color: #ff9a70; }
.server-browser-page .server-description { color: #a2afbb; font-size: 11px; line-height: 1.45; }
.server-browser-page .server-tags { gap: 5px; }
.server-browser-page .server-tag {
  padding: 3px 7px;
  border: 1px solid #34434f;
  border-radius: 4px;
  color: #aebbc6;
  background: #1b2731;
  font-size: 9px;
}

.server-browser-page .server-players {
  padding: 4px 7px;
  border-color: #33424e;
  border-radius: 4px;
  background: #121a21;
  color: #b8c4ce;
  font-size: 9px;
}

.server-browser-page .server-player-dot { background: #8292a0; }
.server-browser-page .server-players.online .server-player-dot { background: #54ce8b; box-shadow: 0 0 7px rgba(84, 206, 139, .4); }
.server-browser-page .server-card-stats { gap: 6px; }
.server-browser-page .server-stat {
  min-height: 38px;
  grid-template-columns: 14px minmax(0, 1fr);
  padding: 4px 5px;
  border-color: #2c3944;
  border-radius: 5px;
  background: #121a21;
}

.server-browser-page .server-stat-icon,
.server-browser-page .server-stat-clicks .server-stat-icon { color: #e99470; font-size: 12px; }
.server-browser-page .server-stat strong { color: #ecf1f5; font-size: 11px; }
.server-browser-page .server-stat > span:last-child { color: #8d9ca8; font-size: 8px; }
.server-browser-page .server-card-actions { top: 0; gap: 6px; }
.server-browser-page .server-visit-button,
.server-browser-page .vote-button,
.server-browser-page .server-discord {
  min-height: 29px;
  border-radius: 4px;
  font-size: 9px;
}

.server-browser-page .server-visit-button { border-color: #3a4a57; color: #c3cdd5; background: #1b2731; }
.server-browser-page .server-visit-button:hover { border-color: #708493; color: white; }
.server-browser-page .vote-button { border-color: var(--lime); color: #21130e; background: var(--lime); }
.server-browser-page .vote-button:hover { border-color: #ffa17b; background: #ffa17b; }
.server-browser-page .vote-button.already-voted,
.server-browser-page .vote-button:disabled { border-color: #34434f; color: #93a2ae; background: #202b34; }
.server-browser-page .server-discord { border-color: #3a4a57; color: #bdc9d2; background: #1b2731; }
.server-browser-page .premium-empty-slot {
  min-height: 108px;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 1fr) 150px;
  grid-template-rows: 1fr;
  column-gap: 13px;
  padding: 10px;
}

.server-browser-page .premium-empty-visual {
  min-height: 82px;
  gap: 10px;
  border-color: #40505c;
  border-radius: 5px;
  background: #18232c;
  color: #e9a879;
}

.server-browser-page .premium-empty-visual::before { display: none; }
.server-browser-page .premium-empty-visual svg { width: 34px; height: 34px; }
.server-browser-page .premium-empty-visual > span { color: #aebbc6; font-size: 10px; }
.server-browser-page .premium-empty-visual strong { color: #edf2f6; font-size: 12px; }
.server-browser-page .premium-empty-copy { align-items: flex-start; gap: 5px; text-align: left; }
.server-browser-page .premium-empty-copy strong { color: #f2c982; font-size: 12px; }
.server-browser-page .featured-green-card .premium-empty-copy strong { color: #ffab87; }
.server-browser-page .premium-empty-copy > span { color: #aab7c2; font-size: 10px; line-height: 1.45; }
.server-browser-page .premium-empty-stats { gap: 5px; }
.server-browser-page .premium-empty-stats > span { min-height: 32px; padding: 5px 7px; border-color: #30404b; border-radius: 5px; background: #121a21; font-size: 9px; }
.server-browser-page .premium-empty-stats > span strong { color: #e8eef3; font-size: 10px; }
.server-browser-page .premium-empty-link { color: #21130e; background: var(--lime); box-shadow: none; font-size: 9px; }
.server-browser-page .premium-empty-link:hover { background: #ffa17b; box-shadow: none; }

.server-browser-page .pagination-page,
.server-browser-page .pagination-control { border-color: #33424e; border-radius: 5px; background: #17212a; }
.server-browser-page .pagination-page.active { border-color: var(--lime); color: #21130e; background: var(--lime); }
.server-browser-page .premium-section {
  border-top: 1px solid #2a3742;
  border-bottom: 1px solid #2a3742;
  background: #131b23;
}

.server-browser-page .premium-texture { opacity: .16; }
.server-browser-page .premium-intro h2,
.server-browser-page .how-section h2 { font-family: var(--font-body); letter-spacing: -.04em; }
.server-browser-page .premium-intro h2 span,
.server-browser-page .how-section h2 span { color: var(--lime); }
.server-browser-page .benefit-card { border-color: #31404b; border-radius: 6px; background: #17212a; }
.server-browser-page .benefit-icon { color: var(--lime); }
.server-browser-page .how-section { padding-top: 56px; padding-bottom: 60px; }
.server-browser-page .steps article { border-color: #2b3946; }
.server-browser-page .step-number { color: var(--lime); }
.server-browser-page .site-footer { border-top-color: #2b3946; background: #0d1217; }
.server-browser-page .site-footer > span { color: #798895; }
.server-browser-page .modal-card { border-color: #34434f; background: #151d25; }
.server-browser-page .toast { border-color: #3c4b57; background: #18222b; }

@media (max-width: 900px) {
  .server-browser-page .main-nav { gap: 16px; }
  .server-browser-page .header-inner { padding-right: 20px; padding-left: 20px; }
  .server-browser-page .server-card { grid-template-columns: 66px minmax(0, 1fr) 82px; column-gap: 10px; }
  .server-browser-page .server-card-media,
  .server-browser-page .premium-server-list .server-card-media,
  .server-browser-page .server-list:not(.premium-server-list) .server-card-media { width: 66px; height: 66px; min-height: 66px; }
}

@media (max-width: 650px) {
  .server-browser-page .site-header { height: 65px;   }

  .server-browser-page {
    --lime: #d9d34f;
    --lime-dark: #aaa438;
    --gold: #d8cf83;
    --bg: #090b09;
    --panel: #171b16;
    --panel-soft: #20251e;
    --line: #30352d;
    background: #090b09;
    color: #edf0e9;
  }

  .server-browser-page .site-header { background: #090b09; }
  .server-browser-page .header-inner { max-width: 1380px; }
  .server-browser-page .brand-accent { color: #f0f1eb; }
  .server-browser-page .main-nav { gap: 30px; }
  .server-browser-page .nav-link { font-size: 12px; }
  .server-browser-page .nav-link.active::after { background: #d9d34f; }
  .server-browser-page .header-actions .button-primary,
  .server-browser-page .button-primary {
    color: #171811;
    background: #d9d34f;
  }

  .server-browser-page .header-actions .button-primary:hover,
  .server-browser-page .button-primary:hover { background: #e9e478; }
  .server-browser-page .content-wrap {
    width: min(1380px, calc(100% - 48px));
    max-width: 1380px;
    padding-top: 16px;
    padding-bottom: 48px;
    background: #090b09;
  }

  .server-browser-page .browser-toolbar { gap: 12px; margin-bottom: 18px; }
  .server-browser-page .browser-search {
    height: 54px;
    grid-template-rows: 34px 18px;
    border-color: #30362e;
    background: #0b0d0a;
  }

  .server-browser-page .browser-search input { padding: 0 12px; font-size: 13px; }
  .server-browser-page .browser-search input::placeholder { color: #a2a89d; }
  .server-browser-page .browser-search small { padding: 0 11px; color: #a3aa9d; font-size: 10px; line-height: 17px; }
  .server-browser-page .browser-search code { color: #d3d7c8; }
  .server-browser-page .browser-toolbar-actions { gap: 5px; }
  .server-browser-page .browser-control-button,
  .server-browser-page .browser-sort {
    height: 37px;
    border-color: #30372d;
    color: #e2e6db;
    background: #151912;
    font-size: 11px;
  }

  .server-browser-page .browser-control-button { gap: 8px; padding: 0 13px; }
  .server-browser-page .browser-control-button .online-dot { background: #a8bf45; box-shadow: 0 0 7px rgba(168, 191, 69, .42); }
  .server-browser-page .browser-sort { width: 42px; min-width: 42px; }
  .server-browser-page .ranking-layout { grid-template-columns: minmax(0, 2.2fr) minmax(340px, 1fr); gap: 14px; }
  .server-browser-page .directory-heading { margin-bottom: 8px; color: #e6e9df; font-size: 13px; }
  .server-browser-page .directory-heading span { color: #b5bcaa; font-size: 12px; }
  .server-browser-page .server-list { gap: 2px; border-color: #252b22; background: #252b22; }
  .server-browser-page .directory-row {
    min-height: 56px;
    grid-template-columns: 34px minmax(0, 1fr) 20px 112px 23px;
    gap: 10px;
    padding: 6px 10px;
    background: #171b16;
  }

  .server-browser-page .directory-row:hover { background: #20251c; }
  .server-browser-page .directory-row.promoted-row { background: #1c2119; }
  .server-browser-page .directory-logo { width: 32px; height: 32px; border-radius: 5px; font-size: 12px; }
  .server-browser-page .directory-info { gap: 3px; }
  .server-browser-page .directory-title-row { gap: 7px; }
  .server-browser-page .directory-title { max-width: 52%; color: #f0f2ec; font-size: 13px; }
  .server-browser-page .directory-badge { font-size: 9px; }
  .server-browser-page .directory-tag { padding: 3px 6px; color: #c4c9bc; background: #30372d; font-size: 9px; }
  .server-browser-page .directory-description { color: #b8beb2; font-size: 10px; line-height: 1.35; }
  .server-browser-page .directory-flag { width: 19px; height: 14px; }
  .server-browser-page .directory-stats { gap: 3px; }
  .server-browser-page .directory-stats strong { color: #e0e5d9; font-size: 12px; }
  .server-browser-page .directory-stats small { color: #b0b7a9; font-size: 10px; }
  .server-browser-page .directory-vote { width: 22px; height: 28px; color: #e4d852; font-size: 21px; }
  .server-browser-page .directory-vote:hover { color: #fff58b; background: #30311c; }
  .server-browser-page .directory-vote.already-voted { color: #90987e; }
  .server-browser-page .filter-chip {
    padding: 7px 10px;
    border-color: #393e32;
    color: #d0d5c8;
    background: #171b16;
    font-size: 10px;
  }

  .server-browser-page .filter-chip:hover,
  .server-browser-page .filter-chip.active {
    border-color: #88833b;
    color: #ece576;
    background: #252519;
  }

  .server-browser-page .filter-chip span { color: #afb5a7; font-size: 9px; }
  .server-browser-page .featured-sidebar {
    padding: 16px 16px 12px;
    border-color: #272c24;
    background: #171917;
  }

  .server-browser-page .featured-sidebar h2 { margin-bottom: 14px; color: #eff1e9; font-size: 12px; }
  .server-browser-page .featured-directory-list { gap: 4px; }
  .server-browser-page .featured-directory-item {
    min-height: 46px;
    grid-template-columns: 32px minmax(0, 1fr) 78px;
    gap: 10px;
    padding: 5px 3px;
  }

  .server-browser-page .featured-directory-logo { width: 31px; height: 31px; border-radius: 5px; font-size: 11px; }
  .server-browser-page .featured-directory-copy { gap: 3px; }
  .server-browser-page .featured-directory-copy strong { color: #eaede5; font-size: 11px; }
  .server-browser-page .featured-directory-copy small { color: #b4bbaf; font-size: 9px; }
  .server-browser-page .featured-directory-stats { gap: 3px; }
  .server-browser-page .featured-directory-stats strong { color: #dce2d5; font-size: 11px; }
  .server-browser-page .featured-directory-stats small { color: #abb3a5; font-size: 9px; }
  .server-browser-page .featured-sidebar-link { border-top-color: #30352d; color: #ded254; font-size: 10px; }
  .server-browser-page .featured-sidebar-link:hover { color: #f2ec83; }
  .server-browser-page .premium-section { border-color: #262b23; background: #10130f; }
  .server-browser-page .premium-intro h2 span,
  .server-browser-page .how-section h2 span { color: #d9d34f; }
  .server-browser-page .benefit-icon,
  .server-browser-page .step-number { color: #d9d34f; }
  .server-browser-page .benefit-card { border-color: #30362e; background: #171b16; }
  .server-browser-page .site-footer { border-top-color: #2c3129; background: #090b09; }

  @media (max-width: 900px) {
    .server-browser-page .header-inner { padding-right: 20px; padding-left: 20px; }
    .server-browser-page .content-wrap { width: calc(100% - 40px); }
    .server-browser-page .ranking-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 10px; }
    .server-browser-page .directory-row { grid-template-columns: 30px minmax(0, 1fr) 18px 94px 21px; gap: 7px; }
    .server-browser-page .directory-logo { width: 29px; height: 29px; }
    .server-browser-page .featured-directory-item { grid-template-columns: 28px minmax(0, 1fr) 66px; gap: 7px; }
    .server-browser-page .featured-directory-logo { width: 28px; height: 28px; }
  }

  @media (max-width: 650px) {
    .server-browser-page .site-header { height: 62px; }
    .server-browser-page .header-inner { padding: 0 14px; }
    .server-browser-page .brand { font-size: 17px; }
    .server-browser-page .header-actions .button-primary { padding: 9px 10px; font-size: 9px; }
    .server-browser-page .content-wrap { width: calc(100% - 24px); padding-top: 11px; }
    .server-browser-page .browser-toolbar { gap: 6px; margin-bottom: 12px; }
    .server-browser-page .browser-search { height: 49px; grid-template-rows: 31px 16px; }
    .server-browser-page .browser-search input { padding: 0 8px; font-size: 11px; }
    .server-browser-page .browser-search small { padding: 0 8px; font-size: 8px; line-height: 15px; }
    .server-browser-page .browser-control-button { height: 34px; padding: 0 7px; font-size: 9px; }
    .server-browser-page .browser-sort { height: 34px; width: 35px; min-width: 35px; }
    .server-browser-page .ranking-layout { grid-template-columns: minmax(0, 1fr); }
    .server-browser-page .directory-heading { font-size: 12px; }
    .server-browser-page .directory-row {
      min-height: 58px;
      grid-template-columns: 30px minmax(0, 1fr) 17px 78px 20px;
      gap: 5px;
      padding: 6px;
    }
    .server-browser-page .directory-logo { width: 28px; height: 28px; }
    .server-browser-page .directory-title { max-width: 54%; font-size: 11px; }
    .server-browser-page .directory-tag { padding: 2px 4px; font-size: 8px; }
    .server-browser-page .directory-description { font-size: 9px; }
    .server-browser-page .directory-flag { width: 16px; height: 12px; }
    .server-browser-page .directory-stats strong { font-size: 10px; }
    .server-browser-page .directory-stats small { font-size: 8px; }
    .server-browser-page .directory-vote { width: 20px; font-size: 18px; }
    .server-browser-page .featured-sidebar { padding: 12px; }
    .server-browser-page .featured-directory-list { grid-template-columns: 1fr; }
    .server-browser-page .featured-directory-item { min-height: 42px; grid-template-columns: 28px minmax(0, 1fr) 70px; }
    .server-browser-page .featured-directory-logo { width: 27px; height: 27px; }
    .server-browser-page .featured-directory-stats { display: flex; }
  }
  .server-browser-page .header-inner { padding: 0 14px; }
  .server-browser-page .brand { font-size: 17px; }
  .server-browser-page .brand-logo { width: 28px; }
  .server-browser-page .main-nav { top: 64px; background: #111820; }
  .server-browser-page .header-submit { padding: 9px 10px; font-size: 9px; }
  .server-browser-page .hero-content { padding: 35px 16px 22px; }
  .server-browser-page .hero h1 { font-size: clamp(29px, 8vw, 40px); }
  .server-browser-page .hero-copy { max-width: 360px; margin-bottom: 17px; font-size: 12px; }
  .server-browser-page .hero-actions { flex-wrap: wrap; gap: 12px; }
  .server-browser-page .hero-search { height: 46px; }
  .server-browser-page .hero-search .button { height: 34px; padding: 8px 10px; }
  .server-browser-page .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .server-browser-page .hero-stat-card { min-width: 0; min-height: 52px; padding: 7px; }
  .server-browser-page .hero-stat-copy strong { font-size: 14px; }
  .server-browser-page .hero-stat-copy small { font-size: 8px; }
  .server-browser-page .content-wrap { padding: 29px 14px 45px; }
  .server-browser-page .section-heading { align-items: flex-start; flex-direction: row; gap: 12px; }
  .server-browser-page .section-heading h2 { font-size: 16px; }
  .server-browser-page .text-link { max-width: 125px; text-align: right; }
  .server-browser-page .filter-row { gap: 10px; }
  .server-browser-page .filter-chips { gap: 6px; }
  .server-browser-page .filter-chip { padding: 7px 9px; font-size: 9px; }
  .server-browser-page .filter-note { align-self: flex-start; }
  .server-browser-page .server-card,
  .server-browser-page .server-card.premium-empty-slot {
    min-height: 0;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 9px;
    padding: 10px;
  }

  .server-browser-page .server-card > .server-card-media,
  .server-browser-page .server-card > .server-card-body,
  .server-browser-page .server-card > .server-card-stats,
  .server-browser-page .server-card > .server-card-actions { grid-column: 1 / -1; grid-row: auto; }
  .server-browser-page .server-card > .server-card-media { grid-column: 1; grid-row: 1; width: 54px; height: 54px; min-height: 54px; }
  .server-browser-page .server-card > .server-card-body { grid-column: 2; grid-row: 1; }
  .server-browser-page .server-card-heading strong { font-size: 13px; }
  .server-browser-page .server-description { white-space: normal; font-size: 10px; }
  .server-browser-page .server-tags { display: flex; }
  .server-browser-page .server-card > .server-card-stats { flex-direction: row; }
  .server-browser-page .server-stat { flex: 1 1 0; max-width: 150px; }
  .server-browser-page .server-card > .server-card-actions { justify-content: flex-start; flex-wrap: wrap; }
  .server-browser-page .server-visit-button,
  .server-browser-page .vote-button { min-height: 32px; font-size: 10px; }
  .server-browser-page .premium-empty-visual { grid-column: 1 / -1; min-height: 76px; }
  .server-browser-page .premium-empty-copy { grid-column: 1 / -1; }
  .server-browser-page .premium-empty-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-browser-page .premium-empty-link { min-height: 35px; font-size: 10px; }
  .server-browser-page .premium-inner { grid-template-columns: 1fr; gap: 22px; padding: 39px 16px; }
  .server-browser-page .premium-intro h2 { font-size: 32px; }
  .server-browser-page .benefit-card { min-height: 130px; }
  .server-browser-page .how-section { padding: 40px 16px; }
  .server-browser-page .how-section h2 { font-size: 26px; }
  .server-browser-page .site-footer { align-items: flex-start; gap: 8px; padding: 20px 16px; }
}

.server-browser-page {
  min-height: 100vh;
  background: #090b09;
  color: #e5e8e5;
}

.server-browser-page .site-header {
  position: static;
  height: 62px;
  border-bottom: 0;
  background: #090b09;
  backdrop-filter: none;
}

.server-browser-page .header-inner {
  max-width: 1240px;
  padding: 0;
}

.server-browser-page .brand { gap: 7px; font-size: 17px; }
.server-browser-page .brand-logo { width: 26px; height: 23px; }
.server-browser-page .brand-copy small { display: none; }
.server-browser-page .main-nav { gap: 24px; }
.server-browser-page .nav-link { font-size: 10px; }
.server-browser-page .header-actions { gap: 8px; }
.server-browser-page .header-actions .button { padding: 8px 10px; font-size: 9px; }
.server-browser-page .header-actions .button-quiet { display: inline-flex; }
.server-browser-page .hero { display: none; }
.server-browser-page .content-wrap {
  width: min(1240px, calc(100% - 36px));
  max-width: 1240px;
  padding: 12px 0 42px;
}

.server-browser-page .browser-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 14px;
}

.server-browser-page .browser-search {
  min-width: 0;
  height: 43px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  grid-template-rows: 28px 14px;
  align-items: center;
  border: 1px solid #333833;
  border-radius: 4px;
  background: #0b0d0b;
}

.server-browser-page .browser-search input {
  min-width: 0;
  height: 100%;
  padding: 0 9px;
  border: 0;
  outline: 0;
  color: #e6e8e5;
  background: transparent;
  font-size: 10px;
}

.server-browser-page .browser-search input::placeholder { color: #929790; }
.server-browser-page .browser-search-submit {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 34px;
  height: 25px;
  border: 0;
  color: #b5beb5;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.server-browser-page .browser-search small {
  grid-column: 1 / -1;
  grid-row: 2;
  overflow: hidden;
  padding: 0 8px;
  color: #9aa09a;
  font-size: 8px;
  line-height: 13px;
  white-space: nowrap;
}

.server-browser-page .browser-search code { color: #bac4b8; font-size: inherit; }
.server-browser-page .browser-toolbar-actions { display: flex; gap: 4px; }
.server-browser-page .browser-control-button,
.server-browser-page .browser-sort {
  height: 29px;
  border: 1px solid #292e29;
  border-radius: 4px;
  color: #d1d5d0;
  background: #111411;
  font-size: 9px;
}

.server-browser-page .browser-control-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  cursor: pointer;
}

.server-browser-page .browser-control-button .online-dot {
  width: 5px;
  height: 5px;
  background: #60bd68;
  box-shadow: 0 0 6px rgba(96, 189, 104, .45);
}

.server-browser-page .browser-sort { min-width: 35px; width: 35px; padding: 0 4px; }
.server-browser-page .browser-sort option { background: #111411; }
.server-browser-page .ranking-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(300px, 1fr);
  align-items: start;
  gap: 10px;
}

.server-browser-page .ranking-main { min-width: 0; }
.server-browser-page .section-heading { display: none; }
.server-browser-page .filter-row {
  display: none;
  align-items: center;
  margin: 0 0 9px;
}

.server-browser-page .content-wrap.filters-open .filter-row { display: flex; }
.server-browser-page .filter-chip {
  padding: 6px 9px;
  border-color: #333833;
  border-radius: 4px;
  color: #c0c5bf;
  background: #111411;
  font-size: 9px;
}

.server-browser-page .filter-chip:hover,
.server-browser-page .filter-chip.active {
  border-color: #68704b;
  color: #ead55b;
  background: #1a1c13;
}

.server-browser-page .filter-chip span { color: #91978e; }
.server-browser-page .filter-note { display: none; }
.server-browser-page .directory-heading {
  margin: 0 0 6px;
  color: #d9ddd9;
  font-size: 10px;
  font-weight: 600;
}

.server-browser-page .directory-heading span {
  margin-left: 4px;
  color: #8d958d;
  font-size: 9px;
  font-weight: 400;
}

.server-browser-page .server-list {
  gap: 1px;
  overflow: hidden;
  border: 1px solid #202620;
  border-radius: 6px;
  background: #202620;
}

.server-browser-page .directory-row {
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 17px 87px 19px;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  background: #171b17;
  transition: background .14s;
}

.server-browser-page .directory-row:hover { background: #1d231c; }
.server-browser-page .directory-row.promoted-row { background: #1b201a; }
.server-browser-page .directory-logo,
.server-browser-page .featured-directory-logo {
  width: 22px;
  height: 22px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  color: #ecf0ed;
  background: #30382f;
  font-size: 9px;
  font-weight: 700;
}

.server-browser-page .directory-logo img,
.server-browser-page .featured-directory-logo img { width: 100%; height: 100%; object-fit: cover; }
.server-browser-page .directory-info { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.server-browser-page .directory-title-row { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.server-browser-page .directory-title {
  flex: 0 1 auto;
  max-width: 55%;
  overflow: hidden;
  color: #e0e4e0;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-browser-page .directory-title:hover { color: #f1d44c; }
.server-browser-page .directory-badge {
  flex: 0 0 auto;
  color: #e9d64c;
  font-size: 8px;
  font-weight: 700;
}

.server-browser-page .directory-tag {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 3px;
  color: #aab2aa;
  background: #30362f;
  font-size: 7px;
  line-height: 1.2;
}

.server-browser-page .directory-description {
  overflow: hidden;
  color: #aab0aa;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-browser-page .directory-tags { display: none; }
.server-browser-page .directory-flag {
  width: 15px;
  height: 11px;
  display: flex;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.server-browser-page .directory-flag i { flex: 1; }
.server-browser-page .directory-flag i:nth-child(1) { background: #253d9a; }
.server-browser-page .directory-flag i:nth-child(2) { background: #f5f5f2; }
.server-browser-page .directory-flag i:nth-child(3) { background: #e54b52; }
.server-browser-page .directory-stats { min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: right; }
.server-browser-page .directory-stats strong { color: #bfc5bf; font-size: 9px; font-weight: 500; }
.server-browser-page .directory-stats strong.is-online { color: #cbd9c8; }
.server-browser-page .directory-stats small { overflow: hidden; color: #a0a69f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.server-browser-page .directory-vote {
  width: 18px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  color: #e0c843;
  font-size: 17px;
  font-weight: 700;
}

.server-browser-page .directory-vote:hover { color: #fff27b; background: #343522; }
.server-browser-page .directory-vote.already-voted { color: #859080; }
.server-browser-page .featured-sidebar {
  min-width: 0;
  padding: 13px 13px 9px;
  border: 1px solid #202420;
  border-radius: 6px;
  background: #171917;
}

.server-browser-page .featured-sidebar h2 {
  margin: 2px 0 12px;
  color: #e4e7e3;
  font-size: 10px;
  font-weight: 700;
}

.server-browser-page .featured-directory-list { display: flex; flex-direction: column; gap: 2px; }
.server-browser-page .featured-directory-item {
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 8px;
  padding: 3px 2px;
  border-radius: 4px;
}

.server-browser-page .featured-directory-item:hover { background: #202420; }
.server-browser-page .featured-directory-logo { width: 24px; height: 24px; }
.server-browser-page .featured-directory-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.server-browser-page .featured-directory-copy strong {
  overflow: hidden;
  color: #dfe3df;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-browser-page .featured-directory-copy small {
  overflow: hidden;
  color: #9fa69f;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-browser-page .featured-directory-stats { min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: right; }
.server-browser-page .featured-directory-stats strong { color: #b9c0b9; font-size: 9px; font-weight: 500; }
.server-browser-page .featured-directory-stats small { color: #9ca39c; font-size: 8px; white-space: nowrap; }
.server-browser-page .featured-empty { margin: 0; padding: 12px 2px; color: #9ca39c; font-size: 10px; }
.server-browser-page .featured-sidebar-link { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #292e29; color: #c6b84e; font-size: 9px; }
.server-browser-page .featured-sidebar-link:hover { color: #f0dc69; }
.server-browser-page .empty-state { margin: 10px 0; color: #aab0aa; font-size: 11px; }
.server-browser-page .pagination { margin-top: 8px; }
.server-browser-page .pagination-page,
.server-browser-page .pagination-control { border-color: #303730; color: #c0c6c0; background: #171b17; }
.server-browser-page .pagination-page.active { border-color: #a79535; color: #17170e; background: #d5c148; }

@media (max-width: 900px) {
  .server-browser-page .header-inner { padding: 0 18px; }
  .server-browser-page .content-wrap { width: calc(100% - 36px); }
  .server-browser-page .ranking-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .server-browser-page .directory-row { grid-template-columns: 22px minmax(0, 1fr) 15px 72px 18px; gap: 5px; }
  .server-browser-page .featured-sidebar { padding-right: 9px; padding-left: 9px; }
}

@media (max-width: 650px) {
  .server-browser-page .site-header { height: 58px; }
  .server-browser-page .header-inner { padding: 0 14px; }
  .server-browser-page .brand { font-size: 15px; }
  .server-browser-page .main-nav { top: 57px; }
  .server-browser-page .header-actions .button-quiet { display: none; }
  .server-browser-page .content-wrap { width: calc(100% - 24px); padding-top: 9px; }
  .server-browser-page .browser-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 10px; }
  .server-browser-page .browser-search { height: 43px; }
  .server-browser-page .browser-search small { font-size: 7px; }
  .server-browser-page .browser-control-button { padding: 0 7px; font-size: 8px; }
  .server-browser-page .browser-sort { width: 33px; min-width: 33px; }
  .server-browser-page .ranking-layout { grid-template-columns: minmax(0, 1fr); }
  .server-browser-page .featured-sidebar { grid-row: 2; }
  .server-browser-page .featured-directory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .server-browser-page .featured-directory-item { grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
  .server-browser-page .featured-directory-logo { width: 22px; height: 22px; }
  .server-browser-page .featured-directory-stats { display: none; }
  .server-browser-page .directory-row { grid-template-columns: 22px minmax(0, 1fr) 15px 69px 18px; gap: 5px; padding-right: 5px; padding-left: 5px; }
  .server-browser-page .directory-title { font-size: 9px; }
  .server-browser-page .directory-description { font-size: 7px; }
  .server-browser-page .directory-stats strong,
  .server-browser-page .directory-stats small { font-size: 7px; }
  .server-browser-page .filter-row { align-items: flex-start; }
  .server-browser-page .filter-chips { gap: 4px; }
  .server-browser-page .filter-chip { padding: 5px 6px; font-size: 8px; }
}