body.server-browser-page {
  --lime: #91C836;
  --lime-dark: #6d9828;
  --gold: #d8cf83;
  --bg: #090b09;
  --panel: #171b16;
  --panel-soft: #20251e;
  --line: #30352d;
  color-scheme: dark;
  background: #090b09;
  color: #edf0e9;
}

.server-browser-page .site-header { background: #090b09; }
.server-browser-page .header-inner { max-width: 1380px; padding-right: 0; padding-left: 0; }
.server-browser-page .brand { gap: 9px; font-size: 21px; }
.server-browser-page .brand-logo { width: 34px; height: 29px; }
.server-browser-page .brand-copy small { display: block; }
.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: #91C836; }
.server-browser-page .header-actions .button-primary,
.server-browser-page .button-primary {
  color: #171811;
  background: #91C836;
}

.server-browser-page .header-actions .button-primary:hover,
.server-browser-page .button-primary:hover { background: #a6d45b; }
.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; color: #edf0e9; 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(280px, 1fr) minmax(0, 2.2fr); 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 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 64px;
  grid-template-columns: 38px minmax(0, 1fr) 22px 124px 25px;
  gap: 10px;
  padding: 6px 10px;
  background: #171b16;
  cursor: pointer;
  transition: background .2s ease, box-shadow .25s ease, transform .25s ease;
}

.server-browser-page .directory-row::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .02) 36%, rgba(255, 255, 255, .15) 48%, rgba(145, 200, 54, .12) 53%, transparent 70%);
  content: "";
  pointer-events: none;
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.server-browser-page .directory-row > * { position: relative; z-index: 1; }
.server-browser-page .directory-row:hover,
.server-browser-page .directory-row:focus-visible {
  z-index: 1;
  background: #24291e;
  box-shadow: 0 0 0 1px rgba(145, 200, 54, .5), 0 5px 18px rgba(0, 0, 0, .3), 0 0 14px rgba(145, 200, 54, .12);
  transform: translateY(-1px);
}
.server-browser-page .directory-row:hover::after,
.server-browser-page .directory-row:focus-visible::after { transform: translateX(120%); }
.server-browser-page .directory-row:focus-visible { outline: 2px solid #91C836; outline-offset: -2px; }
.server-browser-page .directory-row.featured-row {
  background: #171e25;
  box-shadow: inset 3px 0 #65b9e8;
}
.server-browser-page .directory-row.featured-row::after {
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .03) 36%, rgba(255, 255, 255, .18) 48%, rgba(80, 173, 230, .2) 53%, transparent 70%);
}
.server-browser-page .directory-row.featured-row:hover,
.server-browser-page .directory-row.featured-row:focus-visible {
  background: #202c36;
  box-shadow: inset 3px 0 #8ad4ff, 0 0 0 1px rgba(101, 185, 232, .6), 0 5px 18px rgba(0, 0, 0, .3), 0 0 18px rgba(101, 185, 232, .2);
}
.server-browser-page .directory-row.top-row {
  background: #1c2119;
  box-shadow: inset 3px 0 #a8bf45;
}
.server-browser-page .directory-row.top-row::after {
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .03) 36%, rgba(255, 255, 255, .2) 48%, rgba(168, 191, 69, .2) 53%, transparent 70%);
}
.server-browser-page .directory-row.top-row:hover,
.server-browser-page .directory-row.top-row:focus-visible {
  background: #292d20;
  box-shadow: inset 3px 0 #c6df6d, 0 0 0 1px rgba(168, 191, 69, .6), 0 5px 18px rgba(0, 0, 0, .3), 0 0 18px rgba(168, 191, 69, .2);
}
.server-browser-page .directory-row.featured-row:focus-visible { outline-color: #65b9e8; }
.server-browser-page .directory-row.top-row:focus-visible { outline-color: #a8bf45; }
.server-browser-page .directory-logo { width: 36px; height: 36px; border-radius: 5px; font-size: 13px; }
.server-browser-page .directory-info { gap: 4px; }
.server-browser-page .directory-title-row { gap: 8px; }
.server-browser-page .directory-title { max-width: 54%; color: #f0f2ec; font-size: 15px; }
.server-browser-page .directory-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(145, 200, 54, .55);
  border-radius: 999px;
  color: #f0e879;
  background: linear-gradient(135deg, rgba(145, 200, 54, .22), rgba(145, 200, 54, .08));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 0 10px rgba(145, 200, 54, .08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.2;
  white-space: nowrap;
}
.server-browser-page .directory-badge::first-letter { color: #fff7a1; }
.server-browser-page .featured-badge {
  border-color: rgba(101, 185, 232, .72);
  color: #c4ebff;
  background: linear-gradient(135deg, rgba(67, 157, 207, .38), rgba(38, 100, 139, .18));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 0 12px rgba(101, 185, 232, .2);
}
.server-browser-page .premium-badge {
  border-color: rgba(168, 191, 69, .68);
  color: #d8ed91;
  background: linear-gradient(135deg, rgba(168, 191, 69, .3), rgba(95, 118, 43, .14));
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 0 12px rgba(168, 191, 69, .16);
}
.server-browser-page .directory-tag { padding: 3px 7px; color: #c4c9bc; background: #30372d; font-size: 10px; }
.server-browser-page .directory-description { color: #b8beb2; font-size: 11px; line-height: 1.35; }
.server-browser-page .directory-flag { width: 21px; height: 15px; }
.server-browser-page .directory-stats { gap: 3px; }
.server-browser-page .directory-stats strong { color: #e0e5d9; font-size: 13px; }
.server-browser-page .directory-stats small { color: #b0b7a9; font-size: 11px; }
.server-browser-page .directory-vote { width: 24px; height: 30px; color: #91C836; font-size: 23px; }
.server-browser-page .directory-vote:hover { color: #a6d45b; 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: #6d9828;
  color: #a6d45b;
  background: #252519;
}

.server-browser-page .filter-chip span { color: #afb5a7; font-size: 9px; }
.server-browser-page .featured-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.server-browser-page .featured-sidebar > .directory-heading {
  margin: 0 0 -4px;
  padding: 0;
  border: 0;
  color: #e6e9df;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
}
.server-browser-page .placement-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: 16px 16px 12px;
  border: 1px solid rgba(101, 185, 232, .5);
  border-radius: 6px;
  background: linear-gradient(145deg, #192733, #171b16 72%);
  box-shadow: inset 0 0 24px rgba(101, 185, 232, .08), 0 0 16px rgba(101, 185, 232, .1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.server-browser-page .placement-panel::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .03) 36%, rgba(255, 255, 255, .18) 48%, rgba(80, 173, 230, .2) 53%, transparent 70%);
  content: "";
  pointer-events: none;
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.server-browser-page .placement-panel > * {
  position: relative;
  z-index: 1;
}
.server-browser-page .placement-panel:hover::after,
.server-browser-page .placement-panel:focus-within::after {
  transform: translateX(120%);
}
.server-browser-page .placement-panel:hover {
  border-color: rgba(101, 185, 232, .75);
  box-shadow: inset 0 0 24px rgba(101, 185, 232, .12), 0 0 20px rgba(101, 185, 232, .2);
}
.server-browser-page .top-five-placement-panel {
  border-color: rgba(168, 191, 69, .55);
  background: linear-gradient(145deg, #222719, #171b16 72%);
  box-shadow: inset 0 0 24px rgba(168, 191, 69, .07), 0 0 16px rgba(168, 191, 69, .08);
}
.server-browser-page .top-five-placement-panel::after {
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .03) 36%, rgba(255, 255, 255, .2) 48%, rgba(168, 191, 69, .2) 53%, transparent 70%);
}
.server-browser-page .top-five-placement-panel:hover {
  border-color: rgba(168, 191, 69, .8);
  box-shadow: inset 0 0 24px rgba(168, 191, 69, .12), 0 0 20px rgba(168, 191, 69, .18);
}
.server-browser-page .featured-sidebar h2 {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(101, 185, 232, .42);
  color: #a8ddfb;
  font-size: 14px;
  letter-spacing: .08em;
}
.server-browser-page .top-five-placement-panel h2 {
  border-bottom-color: rgba(168, 191, 69, .42);
  color: #d8ed91;
}
.server-browser-page .featured-directory-list { gap: 8px; }
.server-browser-page .placement-empty-card {
  min-height: 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 13px;
  border: 1px dashed rgba(101, 185, 232, .56);
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 0, rgba(101, 185, 232, .15), transparent 68%), linear-gradient(145deg, rgba(25, 39, 51, .92), rgba(16, 21, 23, .96));
  color: #a8ddfb;
  text-align: center;
}
.server-browser-page .placement-empty-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(101, 185, 232, .48);
  border-radius: 50%;
  background: rgba(101, 185, 232, .12);
  box-shadow: 0 0 22px rgba(101, 185, 232, .15), inset 0 0 12px rgba(101, 185, 232, .08);
  color: #c4ebff;
  font-size: 21px;
  font-weight: 800;
}
.server-browser-page .placement-empty-label {
  color: #83c9f1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}
.server-browser-page .placement-empty-card > strong {
  color: #e7f6ff;
  font-size: 15px;
  line-height: 1.25;
}
.server-browser-page .placement-empty-card p {
  max-width: 230px;
  margin: 0;
  color: #b6c7d0;
  font-size: 11px;
  line-height: 1.5;
}
.server-browser-page .placement-empty-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 3px;
  padding: 0 13px;
  border: 1px solid rgba(101, 185, 232, .65);
  border-radius: 999px;
  background: linear-gradient(110deg, #3984aa, #25617f);
  box-shadow: 0 4px 14px rgba(43, 126, 168, .22);
  color: #f1fbff;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.server-browser-page .placement-empty-link:hover {
  background: linear-gradient(110deg, #4a9ec8, #32799c);
  box-shadow: 0 6px 18px rgba(43, 126, 168, .34);
  transform: translateY(-1px);
}
.server-browser-page .top-five-empty-card {
  border-color: rgba(168, 191, 69, .58);
  background: radial-gradient(ellipse at 50% 0, rgba(168, 191, 69, .14), transparent 68%), linear-gradient(145deg, rgba(34, 39, 25, .94), rgba(16, 21, 18, .96));
  color: #d8ed91;
}
.server-browser-page .top-five-empty-card .placement-empty-icon {
  border-color: rgba(168, 191, 69, .5);
  background: rgba(168, 191, 69, .12);
  box-shadow: 0 0 22px rgba(168, 191, 69, .14), inset 0 0 12px rgba(168, 191, 69, .08);
  color: #e5f6b4;
}
.server-browser-page .top-five-empty-card .placement-empty-label { color: #c6df6d; }
.server-browser-page .top-five-empty-card > strong { color: #eff8d8; }
.server-browser-page .top-five-empty-card p { color: #c2c9b3; }
.server-browser-page .top-five-empty-card .placement-empty-link {
  border-color: rgba(168, 191, 69, .68);
  background: linear-gradient(110deg, #71852f, #4b6027);
  box-shadow: 0 4px 14px rgba(126, 154, 47, .2);
  color: #f7ffe8;
}
.server-browser-page .top-five-empty-card .placement-empty-link:hover {
  background: linear-gradient(110deg, #8aa640, #637d30);
  box-shadow: 0 6px 18px rgba(126, 154, 47, .32);
}
.server-browser-page .featured-directory-item {
  min-height: 74px;
  grid-template-columns: 42px minmax(0, 1fr) 84px;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(101, 185, 232, .5);
  background: linear-gradient(110deg, rgba(67, 157, 207, .19), rgba(67, 157, 207, .05));
  box-shadow: inset 3px 0 #65b9e8;
}

.server-browser-page .featured-directory-item:hover {
  border-color: #8ad4ff;
  background: linear-gradient(110deg, rgba(67, 157, 207, .3), rgba(67, 157, 207, .12));
}
.server-browser-page .top-five-directory-item {
  border-color: rgba(168, 191, 69, .52);
  background: linear-gradient(110deg, rgba(168, 191, 69, .18), rgba(95, 118, 43, .05));
  box-shadow: inset 3px 0 #a8bf45;
}
.server-browser-page .top-five-directory-item:hover {
  border-color: #c6df6d;
  background: linear-gradient(110deg, rgba(168, 191, 69, .3), rgba(95, 118, 43, .12));
}
.server-browser-page .featured-directory-logo { width: 40px; height: 40px; border-radius: 6px; font-size: 14px; }
.server-browser-page .featured-directory-copy { gap: 4px; }
.server-browser-page .featured-directory-badge {
  color: #a8ddfb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.server-browser-page .top-five-directory-item .featured-directory-badge,
.server-browser-page .top-five-directory-item .featured-directory-stats strong { color: #d8ed91; }
.server-browser-page .featured-directory-copy strong { color: #fff; font-size: 13px; }
.server-browser-page .featured-directory-copy small { color: #c2c8b8; font-size: 10px; }
.server-browser-page .featured-directory-stats { gap: 3px; }
.server-browser-page .featured-directory-stats strong { color: #a8ddfb; font-size: 13px; font-weight: 700; }
.server-browser-page .featured-directory-stats small { color: #c2c8b8; font-size: 10px; }
.server-browser-page .featured-sidebar-link { border-top-color: rgba(101, 185, 232, .32); color: #a8ddfb; font-size: 10px; }
.server-browser-page .featured-sidebar-link:hover { color: #d5f2ff; }
.server-browser-page .top-five-placement-panel .featured-sidebar-link {
  border-top-color: rgba(168, 191, 69, .32);
  color: #d8ed91;
}
.server-browser-page .top-five-placement-panel .featured-sidebar-link:hover { color: #ecf8bf; }
.server-browser-page .premium-section { border-color: #262b23; background: #10130f; }
.server-browser-page .premium-intro h2 span,
.server-browser-page .how-section h2 span,
.server-browser-page .benefit-icon,
.server-browser-page .step-number { color: #91C836; }
.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: 280px minmax(0, 1fr); 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: 34px minmax(0, 1fr) 66px; gap: 7px; }
  .server-browser-page .featured-directory-logo { width: 32px; height: 32px; }
}

@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 .featured-sidebar { grid-row: auto; }
  .server-browser-page .directory-heading { font-size: 12px; }
  .server-browser-page .directory-row {
    min-height: 64px;
    grid-template-columns: 32px minmax(0, 1fr) 17px 78px 20px;
    gap: 5px;
    padding: 6px;
  }

  .server-browser-page .directory-logo { width: 30px; height: 30px; }
  .server-browser-page .directory-title { max-width: none; flex: 1 1 auto; font-size: 13px; }
  .server-browser-page .directory-tag { display: none; }
  .server-browser-page .directory-tag { padding: 2px 4px; font-size: 8px; }
  .server-browser-page .directory-description { font-size: 10px; }
  .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 .placement-panel { padding: 12px; }
  .server-browser-page .featured-directory-list { grid-template-columns: 1fr; }
  .server-browser-page .featured-directory-item { min-height: 62px; grid-template-columns: 34px minmax(0, 1fr) 70px; padding: 7px; }
  .server-browser-page .featured-directory-logo { width: 32px; height: 32px; }
  .server-browser-page .featured-directory-stats { display: flex; }
  .server-browser-page .directory-badge { padding: 2px 6px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .server-browser-page .directory-row,
  .server-browser-page .directory-row::after,
  .server-browser-page .placement-panel,
  .server-browser-page .placement-panel::after { transition: none; }
  .server-browser-page .browser-intro-label,
  .server-browser-page .browser-intro-label::before { animation: none; }
}

.server-browser-page .browser-toolbar {
  align-items: center;
  gap: 10px;
}

.server-browser-page .browser-search {
  height: 56px;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-rows: 35px 18px;
  border: 1px solid #343d32;
  border-radius: 8px;
  background: linear-gradient(135deg, #141914, #0c0f0d 72%);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .025);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.server-browser-page .browser-search:focus-within {
  border-color: #829843;
  box-shadow: 0 0 0 3px rgba(168, 191, 69, .12), 0 6px 20px rgba(0, 0, 0, .2);
}

.server-browser-page .browser-search input {
  padding: 0 15px;
  color: #f0f2eb;
  font-size: 14px;
}

.server-browser-page .browser-search input::placeholder { color: #899187; }

.server-browser-page .browser-search-submit {
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #414a38;
  border-radius: 6px;
  color: #d7e99a;
  background: #20281a;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.server-browser-page .browser-search-submit:hover {
  border-color: #72893a;
  background: #2a351d;
  transform: translateY(-1px);
}

.server-browser-page .browser-search-submit svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.server-browser-page .browser-search small {
  padding: 0 15px;
  color: #929b8d;
  font-size: 10px;
  line-height: 18px;
}

.server-browser-page .browser-search code {
  padding: 1px 5px;
  border: 1px solid #343d32;
  border-radius: 4px;
  color: #cdd8bf;
  background: #171d16;
}

.server-browser-page .browser-toolbar-actions {
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.server-browser-page .browser-control-button,
.server-browser-page .browser-sort {
  height: 40px;
  border-color: #343d32;
  border-radius: 7px;
  background: linear-gradient(145deg, #1b2019, #121612);
  font-size: 12px;
}

.server-browser-page .browser-control-button {
  gap: 9px;
  padding: 0 15px;
}

.server-browser-page .browser-sort {
  box-sizing: border-box;
  width: 126px;
  min-width: 126px;
  padding: 0 10px;
  color: #edf0e8;
}

.server-browser-page .placement-panel { padding: 13px 13px 11px; }
.server-browser-page .placement-panel h2 { margin-bottom: 9px; padding-bottom: 8px; }
.server-browser-page .featured-directory-list { gap: 6px; }

.server-browser-page .placement-empty-card {
  min-height: 154px;
  gap: 7px;
  padding: 13px 11px;
}

.server-browser-page .placement-empty-icon { width: 34px; height: 34px; font-size: 17px; }
.server-browser-page .placement-empty-label { font-size: 8px; }
.server-browser-page .placement-empty-card > strong { font-size: 14px; }
.server-browser-page .placement-empty-card p { font-size: 10px; }
.server-browser-page .placement-empty-link { min-height: 30px; padding: 0 12px; }

.server-browser-page .featured-directory-item {
  min-height: 60px;
  grid-template-columns: 36px minmax(0, 1fr) 76px;
  gap: 8px;
  padding: 7px;
}

.server-browser-page .featured-directory-logo { width: 34px; height: 34px; }
.server-browser-page .featured-directory-copy { gap: 3px; }
.server-browser-page .featured-directory-copy strong { font-size: 12px; }
.server-browser-page .featured-directory-copy small,
.server-browser-page .featured-directory-stats small { font-size: 9px; }
.server-browser-page .featured-directory-stats strong { font-size: 12px; }

@media (max-width: 900px) {
  .server-browser-page .featured-directory-item { grid-template-columns: 32px minmax(0, 1fr) 70px; }
  .server-browser-page .featured-directory-logo { width: 30px; height: 30px; }
}

@media (max-width: 650px) {
  .server-browser-page .browser-toolbar { align-items: start; gap: 6px; }
  .server-browser-page .browser-search {
    height: 49px;
    grid-template-columns: minmax(0, 1fr) 37px;
    grid-template-rows: 31px 16px;
    border-radius: 7px;
  }

  .server-browser-page .browser-search input { padding: 0 9px; font-size: 11px; }
  .server-browser-page .browser-search-submit { width: 29px; height: 25px; }
  .server-browser-page .browser-search-submit svg { width: 15px; height: 15px; }
  .server-browser-page .browser-search small { padding: 0 9px; font-size: 8px; line-height: 15px; }
  .server-browser-page .browser-search code { padding: 0 3px; }
  .server-browser-page .browser-toolbar-actions { gap: 5px; }
  .server-browser-page .browser-control-button,
  .server-browser-page .browser-sort { height: 36px; font-size: 9px; }
  .server-browser-page .browser-control-button { gap: 6px; padding: 0 8px; }
  .server-browser-page .browser-sort { width: 108px; min-width: 108px; padding: 0 7px; }
  .server-browser-page .placement-panel { padding: 11px; }
  .server-browser-page .placement-empty-card { min-height: 145px; }
  .server-browser-page .featured-directory-item {
    min-height: 54px;
    grid-template-columns: 30px minmax(0, 1fr) 68px;
    padding: 6px;
  }
  .server-browser-page .featured-directory-logo { width: 28px; height: 28px; }
}

.server-browser-page .premium-benefits .benefit-card {
  border-color: rgba(168, 191, 69, .55);
  background: linear-gradient(145deg, #222719, #171b16 72%);
}

.server-browser-page .premium-benefits .featured-price-card {
  border-color: rgba(101, 185, 232, .5);
  background: linear-gradient(145deg, #192733, #171b16 72%);
}
.server-browser-page .premium-benefits .featured-price-card .benefit-icon,
.server-browser-page .premium-benefits .featured-price-card .placement-price { color: #a8ddfb; }
.server-browser-page .premium-benefits .featured-price-card:hover {
  border-color: rgba(101, 185, 232, .72);
  box-shadow: 0 7px 20px rgba(101, 185, 232, .12), inset 0 1px rgba(196, 235, 255, .14);
}
.server-browser-page .premium-benefits .featured-price-card:hover .benefit-icon,
.server-browser-page .premium-benefits .featured-price-card:hover .placement-price {
  filter: drop-shadow(0 0 5px rgba(101, 185, 232, .38));
}

.server-browser-page .browser-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(1380px, calc(100% - 48px));
  max-width: 1380px;
  margin: 20px auto 0;
  padding: 18px 25px 20px;
  border: 1px solid #303a2c;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 91% 0%, rgba(168, 191, 69, .16), transparent 32%),
    linear-gradient(112deg, #171d15 0%, #111611 55%, #171d14 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 10px 28px rgba(0, 0, 0, .2);
}
.server-browser-page .browser-intro::before {
  position: absolute;
  z-index: -1;
  top: -88px;
  right: 4%;
  width: 205px;
  height: 205px;
  border: 1px solid rgba(145, 200, 54, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(145, 200, 54, .025), 0 0 0 38px rgba(145, 200, 54, .02);
  content: "";
  pointer-events: none;
}
.server-browser-page .browser-intro-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin-bottom: 13px;
}
.server-browser-page .browser-intro-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(145, 200, 54, .3);
  border-radius: 20px;
  background: rgba(145, 200, 54, .07);
  color: #91C836;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: browser-intro-label-pulse 2.4s ease-in-out infinite;
}
.server-browser-page .browser-intro-label::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #91C836;
  box-shadow: 0 0 9px rgba(145, 200, 54, .7);
  content: "";
  animation: browser-intro-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes browser-intro-label-pulse {
  0%, 100% { border-color: rgba(145, 200, 54, .3); background-color: rgba(145, 200, 54, .07); }
  50% { border-color: rgba(145, 200, 54, .65); background-color: rgba(145, 200, 54, .14); }
}
@keyframes browser-intro-dot-pulse {
  0%, 100% { opacity: .65; box-shadow: 0 0 5px rgba(145, 200, 54, .4); }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(145, 200, 54, .9); }
}
.server-browser-page .browser-intro-meta strong {
  color: #aeb4a8;
  font-size: 12px;
  font-weight: 600;
}
.server-browser-page .browser-intro-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.server-browser-page .browser-intro h1 {
  margin: 0;
  color: #f0f2ec;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: .94;
}
.server-browser-page .browser-intro h1 span {
  color: #91C836;
  text-shadow: 0 0 24px rgba(145, 200, 54, .16);
}
.server-browser-page .browser-intro-main p {
  max-width: 380px;
  margin: 0;
  padding: 5px 0 5px 18px;
  border-left: 2px solid rgba(145, 200, 54, .55);
  color: #b7beb0;
  font-size: 13px;
  line-height: 1.65;
}
.server-browser-page .content-wrap { padding-top: 8px; }

.server-browser-page .browser-sort-picker { position: relative; }
.server-browser-page .browser-sort-button {
  width: 126px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid #343d32;
  border-radius: 7px;
  color: #edf0e8;
  background: linear-gradient(145deg, #1b2019, #121612);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.server-browser-page .browser-sort-button:hover,
.server-browser-page .browser-sort-button[aria-expanded="true"] {
  border-color: #91C836;
  background: #1a1e16;
}
.server-browser-page .browser-sort-button:focus-visible,
.server-browser-page .browser-sort-menu button:focus-visible {
  outline: 2px solid #91C836;
  outline-offset: 2px;
}
.server-browser-page .browser-sort-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.server-browser-page .browser-sort-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 20;
  width: max(100%, 150px);
  padding: 4px;
  border: 1px solid #343d32;
  border-radius: 7px;
  background: #111510;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.server-browser-page .browser-sort-menu[hidden] { display: none; }
.server-browser-page .browser-sort-menu button {
  width: 100%;
  min-height: 34px;
  display: block;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  color: #cbd0c4;
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.server-browser-page .browser-sort-menu button:hover,
.server-browser-page .browser-sort-menu button[aria-selected="true"] {
  color: #a6d45b;
  background: #252719;
}

@media (max-width: 650px) {
  .server-browser-page .browser-intro {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 14px 15px 16px;
    border-radius: 8px;
  }
  .server-browser-page .browser-intro::before { top: -110px; right: -80px; }
  .server-browser-page .browser-intro-meta { gap: 7px 9px; margin-bottom: 12px; }
  .server-browser-page .browser-intro-label { font-size: 8px; }
  .server-browser-page .browser-intro-meta strong { font-size: 10px; line-height: 1.4; }
  .server-browser-page .browser-intro-main { align-items: flex-start; flex-direction: column; gap: 11px; }
  .server-browser-page .browser-intro h1 { font-size: clamp(31px, 8.5vw, 39px); }
  .server-browser-page .browser-intro-main p { max-width: 430px; padding: 2px 0 2px 11px; font-size: 11px; }
  .server-browser-page .content-wrap { padding-top: 10px; }
  .server-browser-page .browser-sort-button { width: 108px; height: 36px; padding: 0 8px; font-size: 9px; }
  .server-browser-page .browser-sort-menu { width: max(100%, 138px); }
  .server-browser-page .browser-sort-menu button { min-height: 32px; font-size: 11px; }
}