.server-list-section { padding: var(--space-8) 0 var(--space-20); }
.server-list-section .section-intro { text-align: center; margin-bottom: var(--space-8); }

.server-list-header { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.server-list-header .nav-pills .nav-link { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-3); }
.server-list-header .nav-pills .nav-link.active { background: var(--color-primary); color: var(--color-primary-fg); }
.server-list-header .nav-pills .nav-link:hover:not(.active) { background: var(--muted); }

.server-counter { text-align: center; font-size: var(--font-size-xs); color: var(--muted-foreground); padding: var(--space-2) 0; margin-bottom: var(--space-4); }

.server-row { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; margin-bottom: var(--space-2); overflow: hidden; transition: border-color var(--transition-fast); position: relative; }
.server-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--space-1);
  background: var(--tier-accent, transparent);
  transition: background var(--transition-fast);
}
.server-row:hover { border-color: var(--ring); box-shadow: var(--shadow-sm); }
.server-row[open] { border-color: var(--ring); box-shadow: var(--shadow-md); }
.server-row.is-pinned { border-left: var(--space-1) solid var(--color-primary); }
.server-row.filtered { display: none; }

.server-summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; user-select: none; list-style: none; min-height: var(--space-12); }
.server-summary::-webkit-details-marker { display: none; }
.server-summary::marker { display: none; }

.server-row-icon { width: var(--space-10); height: var(--space-10); border-radius: 1rem; background: var(--muted); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.server-row-icon img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.server-row-info { flex: 1; min-width: 80px; }
.server-row-name { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--space-0-5); }
.server-row-meta { font-size: var(--font-size-xs); color: var(--muted-foreground); display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.server-row-meta .meta-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 60px; }
.server-row-meta .meta-sep { color: var(--border); }
.server-arrow-inline { display: inline-flex; align-items: center; margin-left: var(--space-2); color: var(--muted-foreground); vertical-align: middle; flex-shrink: 0; }
.server-arrow-inline svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
.server-row[open] .server-arrow-inline svg { transform: rotate(180deg); }

.server-tier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  height: 1.625rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--tier-bg, var(--muted));
  color: var(--tier-fg, var(--muted-foreground));
  border: 1px solid var(--tier-border, var(--border));
  letter-spacing: 0.02em;
  border-radius: 9999px;
}

.server-arrow { display: flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-md); color: var(--muted-foreground); flex-shrink: 0; transition: transform 0.25s ease; }
.server-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.server-row[open] .server-arrow { transform: rotate(180deg); }

.server-views {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  font-weight: var(--fw-medium);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.server-detail { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border); }
.server-field { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--border-subtle); }
.server-field:last-child { border-bottom: none; }
.server-field-label { font-size: var(--font-size-xs); color: var(--muted-foreground); font-weight: var(--fw-medium); flex-shrink: 0; white-space: nowrap; }
.server-field-value { font-size: var(--font-size-xs); color: var(--foreground); text-align: right; word-break: break-word; min-width: 0; }
.server-field-value a { color: var(--link-color, #3b82f6); text-decoration: none; }
.server-field-value a:visited { color: var(--link-color, #3b82f6); }
.server-field-value a:hover { color: var(--link-color, #3b82f6); }
.server-detail-footer { display: flex; justify-content: flex-end; padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); background: var(--muted); }

.pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--muted-foreground); font-size: 0.6875rem; font-weight: var(--fw-medium); margin-left: var(--space-1); }
.nav-pills .nav-link.active .pill-count { background: rgba(255,255,255,0.2); color: var(--color-primary-fg); }

/* ── Advanced Filter Bar ── */
.filter-bar { display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.filter-form { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.filter-group { display: flex; align-items: center; gap: var(--space-2); }
.filter-label { font-size: var(--font-size-xs); color: var(--muted-foreground); font-weight: var(--fw-medium); white-space: nowrap; }

.filter-select {
  height: 2rem;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  outline: none;
  min-width: 100px;
  transition: border-color var(--transition-fast);
}
.filter-select:focus { border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring); }

.filter-pills { display: flex; gap: var(--space-1); }
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.filter-pill:hover { color: var(--foreground); background: var(--muted); border-color: var(--muted-foreground); }
.filter-pill.active { color: var(--color-primary-fg); background: var(--color-primary); border-color: var(--color-primary); }

.filter-search-group { flex: 1; min-width: 180px; max-width: 280px; }
.filter-search-wrap { display: flex; align-items: center; position: relative; }
.filter-search-input {
  width: 100%;
  height: 2rem;
  padding: 0 var(--space-8) 0 var(--space-3);
  font-size: var(--font-size-xs);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  color: var(--foreground);
  outline: none;
  transition: border-color var(--transition-fast);
}
.filter-search-input::placeholder { color: var(--muted-foreground); }
.filter-search-input:focus { border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring); }
.filter-search-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.filter-search-btn:hover { color: var(--foreground); }

@media (max-width: 640px) {
  .filter-form { gap: var(--space-3); }
  .filter-search-group { min-width: 100%; max-width: 100%; order: 3; }
}

/* ── New Server Badge ── */
.new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-1-5);
  padding: 0 0.375rem;
  height: 1.125rem;
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* ── Pagination ── */
.pagination-wrap .pagination { margin-bottom: 0; }
.pagination-wrap .page-link {
  font-size: var(--font-size-xs);
  padding: var(--space-1-5) var(--space-3);
  color: var(--muted-foreground);
  background: var(--card);
  border-color: var(--border);
}
.pagination-wrap .page-link:hover {
  color: var(--foreground);
  background: var(--muted);
  border-color: var(--muted-foreground);
}
.pagination-wrap .page-item.active .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-fg);
}
.pagination-wrap .page-item.disabled .page-link {
  color: var(--border);
  background: var(--card);
  border-color: var(--border);
}

/* ── Infinite Scroll ── */
.scroll-sentinel {
  height: 1px;
  pointer-events: none;
}
.scroll-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
}
.scroll-loader .spinner-border {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}
.scroll-end {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 0;
  font-size: var(--font-size-xs);
  color: var(--border);
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════
   Compact Layout — 紧凑模式（28px图标+单行）
   Triggered by class on body or .server-list-section
   ═══════════════════════════════════════════ */
.layout-compact .server-summary,
.server-list-section.layout-compact .server-summary {
  padding: var(--space-1-5) var(--space-3);
  min-height: 0;
  gap: var(--space-2);
}
.layout-compact .server-row-icon,
.server-list-section.layout-compact .server-row-icon {
  width: 28px;
  height: 28px;
}
.layout-compact .server-row-info,
.server-list-section.layout-compact .server-row-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.layout-compact .server-row-name,
.server-list-section.layout-compact .server-row-name {
  font-size: var(--font-size-xs);
  margin-bottom: 0;
  flex-shrink: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layout-compact .server-row-meta,
.server-list-section.layout-compact .server-row-meta {
  flex: 1;
  min-width: 0;
}
.layout-compact .server-row-meta .meta-text,
.server-list-section.layout-compact .server-row-meta .meta-text {
  font-size: var(--font-size-xs);
}
.layout-compact .server-tier,
.server-list-section.layout-compact .server-tier {
  height: 1.375rem;
  font-size: 0.6875rem;
  padding: 0 var(--space-2);
}
.layout-compact .server-row[open] .server-detail,
.server-list-section.layout-compact .server-row[open] .server-detail {
  padding: var(--space-2) var(--space-3);
}
.layout-compact .server-detail-footer,
.server-list-section.layout-compact .server-detail-footer {
  padding: var(--space-1-5) var(--space-3);
}
.layout-compact .server-field,
.server-list-section.layout-compact .server-field {
  padding: var(--space-0-5) 0;
}

/* Layout toggle floating button */
.layout-toggle-btn {
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-medium);
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
  backdrop-filter: blur(8px);
}
.layout-toggle-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-xl);
}
.layout-toggle-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.layout-toggle-btn .label-compact,
.layout-toggle-btn .label-normal {
  display: none;
}
.layout-compact .layout-toggle-btn .label-compact,
.server-list-section.layout-compact ~ .layout-toggle-btn .label-compact { display: inline; }
body:not(.layout-compact) .layout-toggle-btn .label-normal,
.server-list-section:not(.layout-compact) ~ .layout-toggle-btn .label-normal { display: inline; }

@media (max-width: 640px) {
  .layout-toggle-btn {
    bottom: 72px;
    right: 16px;
    padding: var(--space-1-5) var(--space-2-5);
  }
  .layout-toggle-btn .btn-text { display: none; }
}