@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

/* CFXMetrics visual system. Gold remains the brand accent. */
:root {
  color-scheme: dark;
  --bg: #131619;
  --sidebar: #15181b;
  --panel: #1b1f23;
  --panel2: #22272c;
  --surface-hover: #262c31;
  --line: #343a40;
  --line-soft: #2b3137;
  --line-strong: #535b62;
  --text: #f0efea;
  --secondary: #bdc3c7;
  --muted: #9ba5ac;
  --accent: #bdb07b;
  --accent-bright: #d5c796;
  --accent-soft: rgba(189, 176, 123, .1);
  --accent-line: rgba(189, 176, 123, .36);
  --lime: var(--accent); /* Existing charts use this name. */
  --blue: #8eb7c9;
  --success: #97c7b1;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius: 5px;
  --control-height: 38px;
  --shadow: 0 4px 16px rgba(0, 0, 0, .12);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, .3);
  --focus: 0 0 0 3px rgba(142, 183, 201, .12);
  --ease: 180ms ease;
  --font: Manrope, system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

/* Existing component structure, using the shared visual tokens. */
.workspace {
  font-size:0
}
.workspace>.chevron {
  display:none
}
.workspace:not(:has(.workspace-dropdown))::after {
  content:'Servers';
  color:var(--secondary);
  font:600 11px var(--font);
  flex:1
}
.nav-item[href="#rankings"] {
  display:none
}
.sidebar {
  position:sticky;
  top:0;
  height:100vh;
  max-height:100vh;
  overflow-y:auto;
  align-self:flex-start;
  flex-shrink:0;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent
}
.sidebar::-webkit-scrollbar {
  width:5px
}
.sidebar::-webkit-scrollbar-thumb {
  background:var(--line);
  border-radius:var(--radius)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:13px
}
.app {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:234px;
  border-right:1px solid var(--line);
  padding:25px 15px 18px;
  display:flex;
  flex-direction:column;
  background:var(--sidebar)
}
.brand {
  font-size:19px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px 27px;
  letter-spacing:-.6px
}
.brand-mark {
  width:22px;
  height:22px;
  display:flex;
  align-items:end;
  gap:2px
}
.brand-mark i {
  background:var(--lime);
  width:5px;
  border-radius:2px 2px 0 0
}
.brand-mark i:nth-child(1) {
  height:10px
}
.brand-mark i:nth-child(2) {
  height:16px
}
.brand-mark i:nth-child(3) {
  height:22px
}
.workspace {
  height:38px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0 10px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--secondary);
  font-size:11px;
  margin-bottom:25px
}
.pulse,.status-dot {
  width:7px;
  height:7px;
  background:var(--lime);
  border-radius:50%;
  box-shadow:0 0 9px var(--lime);
  display:inline-block
}
.chevron {
  margin-left:auto;
  color:var(--muted);
  font-size:15px
}
.nav-label {
  font:10px var(--mono);
  color:var(--muted);
  letter-spacing:1px;
  text-transform:uppercase;
  padding:0 12px 9px
}
.nav-label.spaced {
  margin-top:27px
}
.nav-item {
  height:36px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--secondary);
  text-decoration:none;
  border-radius:var(--radius);
  padding:0 12px;
  margin:2px 0;
  font-size:12px
}
.nav-item span {
  font-size:17px;
  color:var(--muted);
  width:15px;
  text-align:center
}
.nav-item.active {
  color:var(--text);
  background:var(--panel2)
}
.nav-item.active span {
  color:var(--lime)
}
.nav-item b {
  margin-left:auto;
  font-size:10px;
  font-weight:500;
  color:var(--muted)
}
.sidebar-bottom {
  margin-top:auto
}
.status-card {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:17px 10px;
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:15px
}
.status-card strong,.user strong {
  display:block;
  font-size:11px;
  font-weight:600
}
.status-card small,.user small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}
.user {
  display:flex;
  align-items:center;
  gap:9px;
  padding:5px 8px
}
.user>span {
  margin-left:auto;
  color:var(--muted)
}
.avatar,.top-avatar {
  background:var(--panel2);
  color:var(--lime);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:700
}
.avatar {
  width:27px;
  height:27px;
  font-size:11px
}
.main {
  flex:1;
  min-width:0
}
.topbar {
  height:68px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px
}
.crumb {
  color:var(--secondary);
  font-size:12px;
  display:flex;
  gap:12px;
  align-items:center
}
.slash {
  color:var(--muted)
}
.muted {
  color:var(--muted)
}
.top-actions {
  display:flex;
  gap:14px;
  align-items:center
}
.icon-btn {
  background:none;
  color:var(--muted);
  border:0;
  font-size:18px;
  position:relative
}
.icon-btn em {
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#f19b5b;
  top:1px;
  right:2px
}
.top-avatar {
  width:30px;
  height:30px;
  font-size:12px
}
.mobile-brand {
  display:none
}
.content {
  max-width:1240px;
  margin:auto;
  padding:54px 42px 26px
}
.hero {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  margin-bottom:45px
}
.eyebrow,.card-kicker,.table-title {
  font:10px var(--mono);
  letter-spacing:1.4px;
  color:var(--muted)
}
.green-line {
  height:1px;
  width:20px;
  background:var(--lime);
  display:inline-block;
  vertical-align:middle;
  margin-right:8px
}
.hero h1 {
  font-size:43px;
  line-height:1.08;
  letter-spacing:-2.2px;
  margin:16px 0 12px;
  font-weight:700
}
.hero h1 span {
  color:var(--lime)
}
.hero p {
  color:var(--muted);
  margin:0;
  font-size:13px
}
.hero-search {
  height:48px;
  border:1px solid var(--line);
  background:var(--panel);
  display:flex;
  align-items:center;
  width:375px;
  padding:0 13px;
  color:var(--muted);
  gap:10px;
  border-radius:var(--radius)
}
.hero-search>span {
  font-size:22px
}
.hero-search input {
  background:none;
  border:0;
  outline:0;
  color:white;
  flex:1;
  font:12px var(--font)
}
.hero-search input::placeholder {
  color:var(--muted)
}
.hero-search kbd {
  font:10px var(--mono);
  color:var(--muted);
  border:1px solid var(--line);
  padding:4px 6px;
  border-radius:3px
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  margin-bottom:45px
}
.metric {
  padding:19px 21px;
  border-right:1px solid var(--line);
  min-height:112px
}
.metric:last-child {
  border-right:0
}
.metric-top {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font:10px var(--mono);
  letter-spacing:.7px
}
.metric-icon {
  color:var(--muted);
  font-size:16px
}
.metric strong {
  display:block;
  font-size:26px;
  letter-spacing:-1px;
  margin:13px 0 7px
}
.metric small {
  color:var(--muted);
  font-size:10px
}
.green {
  color:var(--lime);
  font-weight:600
}
.accent-metric {
  background:linear-gradient(105deg,rgba(200,241,91,.05),transparent)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:17px
}
.section-heading h2 {
  font-size:17px;
  letter-spacing:-.5px;
  margin:0 0 5px
}
.section-heading p {
  margin:0;
  color:var(--muted);
  font-size:11px
}
.range {
  display:flex;
  border:1px solid var(--line);
  padding:3px;
  border-radius:var(--radius)
}
.range button {
  background:none;
  border:0;
  color:var(--muted);
  font:10px var(--mono);
  padding:6px 11px
}
.range button.selected {
  background:var(--accent-soft);
  color:var(--lime);
  border-radius:3px
}
.pulse-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
  margin-bottom:42px
}
.chart-card,.insight-card,.table-card {
  border:1px solid var(--line);
  background:var(--panel)
}
.chart-card {
  padding:21px 21px 15px
}
.chart-head {
  display:flex;
  justify-content:space-between
}
.chart-value {
  font-size:27px;
  font-weight:700;
  letter-spacing:-1px
}
.chart-change {
  color:var(--lime);
  font-size:11px;
  margin-left:11px
}
.chart-head p {
  color:var(--muted);
  font-size:10px;
  margin:4px 0
}
.chart-label {
  font:10px var(--mono);
  color:var(--muted)
}
.chart-label b {
  color:var(--lime);
  margin-left:6px
}
.chart-wrap {
  position:relative;
  height:190px;
  margin-top:12px
}
.y-labels {
  position:absolute;
  left:0;
  top:4px;
  height:143px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:var(--muted);
  font:9px var(--mono)
}
.line-chart {
  position:absolute;
  left:38px;
  top:3px;
  width:calc(100% - 45px);
  height:150px;
  overflow:visible;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 36px,var(--line-soft) 37px)
}
.x-labels {
  position:absolute;
  left:38px;
  right:0;
  bottom:19px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font:9px var(--mono)
}
.insight-card {
  padding:21px;
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg,#161c1c,var(--panel))
}
.card-kicker {
  color:var(--lime);
  font-size:9px
}
.insight-card h3 {
  font-size:22px;
  letter-spacing:-1.2px;
  line-height:1.15;
  margin:19px 0 12px
}
.insight-card p {
  color:var(--muted);
  line-height:1.7;
  font-size:11px;
  margin:0
}
.insight-card p strong {
  color:var(--accent-bright)
}
.mini-bars {
  height:42px;
  display:flex;
  align-items:end;
  gap:5px;
  margin:23px 0 12px
}
.mini-bars span {
  flex:1;
  background:#667f43;
  border-radius:2px 2px 0 0
}
.mini-bars span:last-child {
  background:var(--lime)
}
.insight-foot {
  border-top:1px solid var(--line);
  padding-top:12px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:10px
}
.insight-foot b {
  color:var(--lime);
  font-weight:500
}
.directory-heading {
  margin-bottom:18px
}
.view-all,.table-foot a,footer a {
  color:var(--lime);
  font-size:11px;
  text-decoration:none
}
.view-all span {
  margin-left:12px
}
.table-card {
  overflow:visible
}
.table-tools {
  height:55px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px
}
.table-title {
  color:var(--secondary)
}
.live-pill {
  color:var(--lime);
  font-size:9px;
  margin-left:15px
}
.live-pill i {
  width:5px;
  height:5px;
  background:var(--lime);
  display:inline-block;
  border-radius:50%;
  margin-right:4px
}
.table-filter {
  border:1px solid var(--line);
  padding:7px 9px;
  color:var(--muted);
  font-size:10px
}
.table-filter span {
  margin-left:14px
}
.table-scroll {
  overflow-x:auto
}
table {
  width:100%;
  border-collapse:collapse;
  min-width:690px
}
th {
  color:var(--muted);
  text-align:left;
  font:9px var(--mono);
  letter-spacing:.8px;
  padding:15px 20px
}
td {
  padding:14px 20px;
  border-top:1px solid var(--line-soft);
  color:var(--secondary);
  font-size:11px
}
tbody tr {
  cursor:pointer;
  transition:background .15s
}
tbody tr:hover {
  background:var(--surface-hover)
}
.server-cell {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:260px
}
.server-logo {
  width:30px;
  height:30px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#344334,#111);
  display:grid;
  place-items:center;
  color:var(--lime);
  font-weight:800;
  font-size:12px
}
.server-name {
  font-weight:600;
  color:var(--text);
  display:block;
  max-width:250px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.server-tag {
  display:inline-block;
  color:var(--muted);
  font-size:9px;
  margin-top:4px
}
.players {
  font-family:var(--mono);
  color:var(--text)
}
.players b {
  color:var(--muted);
  font-weight:400
}
.bar {
  height:4px;
  width:70px;
  background:var(--line);
  display:inline-block;
  margin-left:9px;
  vertical-align:middle
}
.bar i {
  display:block;
  height:100%;
  background:var(--lime)
}
.online {
  color:var(--lime);
  font-size:10px
}
.country {
  color:var(--secondary);
  font:10px var(--mono)
}
.dots {
  color:var(--muted)
}
.table-foot {
  padding:14px 20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:10px
}
.table-foot b {
  color:var(--secondary);
  font-weight:500
}
footer {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:10px;
  margin-top:42px;
  padding-bottom:10px
}
footer a {
  color:var(--muted);
  margin-left:14px
}
.directory-heading+ .table-card {
  margin-bottom:0
}
@media(max-width:800px) {
  .topbar {
  height:58px;
  padding:0 18px
}
.mobile-brand {
  display:inline-grid;
  place-items:center;
  background:var(--lime);
  color:#101410;
  border-radius:var(--radius);
  width:22px;
  height:22px;
  font-weight:800
}
.content {
  padding:34px 18px
}
.hero {
  display:block;
  margin-bottom:32px
}
.hero h1 {
  font-size:36px
}
.hero-search {
  width:100%;
  margin-top:27px
}
.metrics {
  grid-template-columns:repeat(2,1fr);
  margin-bottom:35px
}
.metric:nth-child(2) {
  border-right:0
}
.metric:nth-child(-n+2) {
  border-bottom:1px solid var(--line)
}
.pulse-grid {
  grid-template-columns:1fr
}
.insight-card {
  min-height:260px
}
.section-heading {
  align-items:start;
  gap:10px
}
.range button {
  padding:6px 7px
}
footer {
  display:block;
  line-height:2
}
footer span {
  display:block
}
.table-foot {
  gap:15px;
  line-height:1.5
}
.table-foot a {
  white-space:nowrap
}
}
.page-intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:36px
}
.page-intro h1 {
  font-size:37px;
  letter-spacing:-1.8px;
  margin:16px 0 8px
}
.page-intro p {
  color:var(--muted);
  margin:0
}
.directory-search {
  width:390px
}
.directory-summary {
  border:1px solid var(--line);
  background:var(--bg);
  padding:16px 20px;
  margin-bottom:14px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}
.directory-summary strong {
  color:var(--text);
  font-size:18px
}
.directory-summary .live-pill {
  margin-left:auto
}
.directory-table td {
  padding-top:16px;
  padding-bottom:16px
}
.back-link {
  color:var(--muted);
  text-decoration:none;
  font-size:11px;
  display:inline-block;
  margin-bottom:34px
}
.profile-head {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:36px
}
.big-logo {
  width:58px;
  height:58px;
  font-size:20px
}
.online-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--lime);
  box-shadow:0 0 8px var(--lime);
  border-radius:50%;
  margin-right:8px
}
.profile-head h1 {
  font-size:32px;
  letter-spacing:-1.5px;
  margin:11px 0 8px
}
.profile-head p {
  color:var(--muted);
  max-width:680px;
  margin:0;
  line-height:1.6
}
.profile-tags {
  display:flex;
  gap:6px;
  margin-top:15px;
  flex-wrap:wrap
}
.profile-tags span {
  font:9px var(--mono);
  color:var(--secondary);
  background:var(--panel2);
  border:1px solid var(--line);
  padding:5px 7px
}
.join-button {
  margin-left:auto;
  background:var(--lime);
  color:#15200f;
  text-decoration:none;
  font-weight:700;
  padding:12px 17px;
  border-radius:var(--radius);
  white-space:nowrap
}
.join-button span {
  margin-left:16px
}
.profile-metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  margin-bottom:16px
}
.profile-metrics>div {
  padding:19px 20px;
  border-right:1px solid var(--line)
}
.profile-metrics>div:last-child {
  border:0
}
.profile-metrics span {
  font:9px var(--mono);
  color:var(--muted);
  letter-spacing:.8px
}
.profile-metrics strong {
  display:block;
  font-size:24px;
  margin-top:13px
}
.profile-metrics small {
  font-size:12px;
  color:var(--muted);
  font-weight:400
}
.profile-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px
}
.profile-chart {
  min-height:320px
}
.fake-history {
  height:225px;
  margin-top:20px;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,var(--line-soft) 44px)
}
.fake-history svg {
  width:100%;
  height:100%
}
.metadata {
  border:1px solid var(--line);
  background:var(--panel);
  padding:22px
}
.metadata dl {
  margin:21px 0 0
}
.metadata dt {
  font:9px var(--mono);
  color:var(--muted);
  margin-top:17px
}
.metadata dd {
  font:11px var(--mono);
  color:var(--secondary);
  margin:6px 0 0;
  word-break:break-all
}
.copy {
  margin-left:8px;
  background:none;
  color:var(--lime);
  border:0;
  font:10px var(--font);
  cursor:pointer
}
@media(max-width:800px) {
  .page-intro {
  display:block
}
.page-intro h1 {
  font-size:34px
}
.directory-search {
  width:100%;
  margin-top:24px
}
.profile-head {
  align-items:start;
  flex-wrap:wrap
}
.profile-head h1 {
  font-size:25px
}
.join-button {
  margin-left:0
}
.profile-metrics {
  grid-template-columns:repeat(2,1fr)
}
.profile-metrics>div:nth-child(2) {
  border-right:0
}
.profile-metrics>div:nth-child(-n+2) {
  border-bottom:1px solid var(--line)
}
.profile-grid {
  grid-template-columns:1fr
}
}
/* Server icons are versioned by CFX, so the browser can safely reuse them. */
.server-logo {
  object-fit:cover
}
.workspace:has(.workspace-dropdown) {
  padding-right:6px;
  position:relative
}
.workspace-dropdown {
  position:relative;
  flex:1;
  min-width:0
}
.workspace-trigger {
  width:100%;
  height:27px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  border:0;
  color:var(--secondary);
  cursor:pointer;
  padding:0 2px;
  font:600 11px var(--font);
  text-align:left
}
.workspace-arrow {
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  color:var(--muted);
  font-size:14px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .15s
}
.workspace-dropdown.open .workspace-arrow {
  transform:translateY(1px) rotate(180deg)
}
.workspace-menu {
  position:absolute;
  z-index:20;
  top:34px;
  left:-8px;
  right:-4px;
  padding:4px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:0 12px 25px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s,transform .15s
}
.workspace-dropdown.open .workspace-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.workspace-menu button {
  display:block;
  width:100%;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--secondary);
  cursor:pointer;
  padding:8px 9px;
  text-align:left;
  font:11px var(--font)
}
.workspace-menu button:hover,.workspace-menu button.selected {
  background:var(--surface-hover);
  color:var(--lime)
}
.resource-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.resource-card {
  display:flex;
  gap:14px;
  border:1px solid var(--line);
  background:var(--panel);
  padding:18px
}
.resource-card-body {
  min-width:0;
  flex:1
}
.resource-card h2 {
  font-size:15px;
  margin:0 0 5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.resource-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:15px
}
.resource-list span {
  font:10px var(--mono);
  color:var(--secondary);
  background:var(--panel2);
  border:1px solid var(--line);
  padding:5px 7px;
  border-radius:3px
}
.resource-list .resource-empty {
  color:var(--muted);
  background:transparent;
  border-color:var(--line)
}
.functional-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.functional-card {
  border:1px solid var(--line);
  background:var(--panel);
  padding:18px
}
.functional-card-head {
  display:flex;
  align-items:center;
  gap:12px
}
.functional-card-head h2 {
  font-size:15px;
  margin:0 0 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.functional-card-head span {
  font:10px var(--mono);
  color:var(--muted)
}
.functional-card-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  margin-top:17px;
  padding-top:13px
}
.functional-card-actions a,.alert-row a {
  color:var(--lime);
  font-size:11px;
  text-decoration:none
}
.watch-toggle,.alert-remove {
  background:none;
  border:0;
  color:var(--lime);
  cursor:pointer;
  font:11px var(--font);
  padding:4px
}
.rank-number {
  color:var(--lime);
  font:12px var(--mono)
}
.empty-state {
  border:1px dashed var(--line);
  background:var(--panel);
  padding:45px;
  text-align:center
}
.empty-state strong {
  font-size:17px
}
.empty-state p {
  color:var(--muted);
  margin:9px 0 20px
}
.subsection-title {
  font-size:16px;
  margin:34px 0 14px
}
.alert-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.alert-panel,.triggered-panel {
  background:var(--panel)
}
.triggered-panel {
  margin-top:14px
}
.alert-form {
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:20px
}
.alert-form label {
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:11px
}
.alert-form input,.alert-form select {
  height:38px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  padding:0 10px;
  font:11px var(--font);
  border-radius:var(--radius)
}
.alert-form .join-button {
  align-self:flex-start;
  border:0;
  cursor:pointer
}
.alert-list {
  padding:4px 20px 10px
}
.alert-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:14px 0
}
.alert-row:last-child {
  border-bottom:0
}
.alert-row strong,.alert-row span {
  display:block
}
.alert-row strong {
  font-size:12px;
  color:var(--text)
}
.alert-row span {
  font:10px var(--mono);
  color:var(--muted);
  margin-top:4px
}
.alert-remove {
  color:var(--muted)
}
.triggered .alert-row,.alert-row.triggered {
  border-left:2px solid var(--lime);
  padding-left:12px
}
.empty-inline {
  padding:20px 0;
  color:var(--muted);
  font-size:11px
}
.server-banner {
  height:170px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  margin:-10px 0 26px
}
.server-banner img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.server-extra,.server-settings {
  border-top:1px solid var(--line);
  margin-top:22px;
  padding-top:20px
}
.detail-status {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:15px 0
}
.detail-status span {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel2);
  color:var(--secondary);
  font:10px var(--mono);
  white-space:nowrap
}
.detail-status .status-live {
  color:var(--lime);
  border-color:var(--accent-line);
  background:var(--accent-soft)
}
.community-links {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:15px 0
}
.community-links a {
  border:1px solid var(--line);
  color:var(--lime);
  padding:7px 9px;
  text-decoration:none;
  font-size:10px
}
.extra-details,.server-settings dl {
  display:grid;
  gap:13px;
  margin:16px 0 0
}
.extra-details div {
  border-top:1px solid var(--line-soft);
  padding-top:10px
}
.extra-details dt,.server-settings dt {
  font:9px var(--mono);
  color:var(--muted);
  text-transform:uppercase
}
.extra-details dd,.server-settings dd {
  font:11px var(--mono);
  color:var(--secondary);
  margin:5px 0 0;
  word-break:break-word
}
.endpoint-list {
  display:flex;
  flex-wrap:wrap;
  gap:5px
}
.endpoint-list span {
  background:var(--panel2);
  color:var(--secondary);
  padding:4px 6px
}
.resource-detail-card {
  border:1px solid var(--line);
  background:var(--panel);
  padding:21px;
  margin-bottom:16px
}
.resource-row {
  cursor:pointer
}
.resource-name {
  color:var(--text);
  font-size:12px
}
.resource-usage {
  width:100px;
  height:5px;
  background:var(--line);
  border-radius:2px
}
.resource-usage i {
  display:block;
  height:100%;
  background:var(--lime);
  border-radius:2px
}
.resource-servers {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.resource-servers a,.resource-servers span {
  color:var(--secondary);
  font-size:10px;
  text-decoration:none;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:3px;
  padding:4px 6px
}
.resource-servers a:hover,.view-resource-server:hover {
  color:var(--lime);
  border-color:var(--accent-line)
}
.view-resource-server {
  color:var(--secondary);
  font-size:10px;
  text-decoration:none
}
.profile-grid {
  align-items:start
}
.profile-chart {
  min-height:0
}
.profile-metrics em {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-style:normal;
  margin-top:6px
}
.fake-history {
  height:218px;
  margin:16px 0 0;
  padding:0 0 22px 31px;
  position:relative;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 42px,var(--line-soft) 43px)
}
.fake-history svg {
  width:100%;
  height:100%;
  display:block
}
.history-empty { position:absolute; inset:42% 24px auto 40px; color:var(--muted); font-size:11px; line-height:1.6; text-align:center; }
.history-empty[hidden] { display:none; }
.history-y-labels {
  position:absolute;
  left:0;
  top:0;
  bottom:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:var(--muted);
  font:9px var(--mono)
}
.history-x-labels {
  position:absolute;
  left:31px;
  right:0;
  bottom:0;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font:9px var(--mono)
}
.metadata-intro {
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
  margin:10px 0 0
}
.detail-group {
  border-top:1px solid var(--line-soft);
  margin-top:20px;
  padding-top:15px
}
.detail-group-title {
  font:9px var(--mono);
  color:var(--lime);
  letter-spacing:1px
}
.metadata dl {
  margin:10px 0 0
}
.metadata dt {
  margin-top:13px
}
.metadata dd {
  margin-top:5px
}
@media(max-width:800px) {
  .profile-chart {
  min-width:0
}
.section-heading {
  align-items:flex-start
}
.range {
  flex-shrink:0
}
.fake-history {
  height:190px
}
}
.sidebar-bottom {
  margin-top:auto;
  padding-bottom:0
}
.sidebar-bottom .status-card {
  border:0;
  padding:14px 10px 0;
  margin:0;
  min-height:42px
}
.sidebar-bottom .status-card .status-dot {
  flex-shrink:0
}
.server-settings dd {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis
}
.server-settings .setting-image {
  display:inline-flex;
  align-items:center;
  color:var(--lime);
  font:10px var(--mono)
}
.detail-status .status-allowlist {
  color:var(--accent-bright);
  border-color:var(--accent-line);
  background:var(--accent-soft)
}
.detail-status .status-allowlist.is-allowlisted {
  color:var(--lime);
  border-color:var(--accent-line);
  background:var(--accent-soft)
}
.dashboard-hover {
  position:absolute;
  left:38px;
  right:0;
  top:3px;
  bottom:38px;
  z-index:2;
  cursor:crosshair
}
.dashboard-tooltip {
  position:absolute;
  z-index:4;
  min-width:145px;
  padding:9px 10px;
  border:1px solid var(--accent-line);
  border-radius:var(--radius);
  background:var(--panel2);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease
}
.dashboard-tooltip.visible {
  opacity:1;
  transform:translateY(0)
}
.dashboard-tooltip strong,.dashboard-tooltip span,.dashboard-tooltip small {
  display:block
}
.dashboard-tooltip strong {
  color:var(--lime);
  font:10px var(--mono);
  margin-bottom:5px
}
.dashboard-tooltip span {
  color:var(--text);
  font-size:12px;
  font-weight:700
}
.dashboard-tooltip small {
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}
.history-hover {
  position:absolute;
  left:31px;
  right:0;
  top:0;
  bottom:22px;
  z-index:2;
  cursor:crosshair
}
.history-tooltip {
  position:absolute;
  z-index:4;
  min-width:142px;
  padding:9px 10px;
  border:1px solid var(--accent-line);
  border-radius:var(--radius);
  background:var(--panel2);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease
}
.history-tooltip.visible {
  opacity:1;
  transform:translateY(0)
}
.history-tooltip strong,.history-tooltip span,.history-tooltip small {
  display:block
}
.history-tooltip strong {
  color:var(--lime);
  font:10px var(--mono);
  margin-bottom:5px
}
.history-tooltip span {
  color:var(--text);
  font-size:12px;
  font-weight:700
}
.history-tooltip small {
  color:var(--muted);
  font-size:10px;
  margin-top:3px
}
.fake-history:has(.history-hover) .history-line {
  filter:drop-shadow(0 0 3px rgba(189,176,123,.28))
}
.chart-summary span {
  display:flex;
  align-items:center;
  gap:5px
}
.chart-summary span i {
  flex:0 0 6px
}
.profile-head {
  align-items:flex-start;
  gap:20px
}
.profile-head>div:not(.server-logo) {
  min-width:0;
  padding-top:2px
}
.profile-head .big-logo {
  width:84px;
  height:84px;
  flex:0 0 84px;
  object-fit:cover;
  border-radius:var(--radius)
}
.profile-head .eyebrow {
  display:flex;
  align-items:center;
  min-height:16px;
  line-height:16px
}
.profile-head .online-dot {
  margin:0 9px 0 0;
  flex:0 0 6px
}
.profile-head h1 {
  margin-top:10px
}
.profile-head .join-button {
  align-self:center
}
@media(max-width:800px) {
  .profile-head .big-logo {
  width:72px;
  height:72px;
  flex-basis:72px
}
.profile-head {
  gap:14px
}
.profile-head>div:not(.server-logo) {
  flex:1
}
.profile-head .join-button {
  align-self:flex-start
}
}
.country-flag {
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:17px;
  line-height:1
}
.home-seo-link {
  display:inline-block;
  margin-top:18px
}
.landing-content .page-intro {
  margin-bottom:30px
}
.landing-content .directory-summary {
  margin-bottom:14px
}
.landing-content .table-card {
  margin-bottom:34px
}
.landing-copy {
  max-width:850px;
  padding:8px 2px 30px
}
.landing-copy h2 {
  font-size:19px;
  letter-spacing:-.5px;
  margin:30px 0 8px
}
.landing-copy h2:first-child {
  margin-top:0
}
.landing-copy p {
  color:var(--muted);
  line-height:1.75;
  margin:0 0 16px
}
.landing-copy a {
  color:var(--lime)
}
.landing-copy details {
  border-top:1px solid var(--line);
  padding:14px 0
}
.landing-copy details:last-child {
  border-bottom:1px solid var(--line)
}
.landing-copy summary {
  cursor:pointer;
  color:var(--text);
  font-weight:600
}
.landing-copy details p {
  margin:12px 0 0 18px
}
.landing-content .directory-table tbody tr {
  cursor:pointer
}
 .category-filter {
  position:relative
}
.category-trigger {
  height:30px;
  min-width:142px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--muted);
  cursor:pointer;
  padding:0 9px;
  font:10px var(--font);
  text-align:left
}
.category-arrow {
  color:var(--muted);
  font-size:13px;
  transition:transform .15s
}
.category-filter.open .category-arrow {
  transform:rotate(180deg)
}
.category-menu {
  position:absolute;
  z-index:30;
  top:34px;
  right:0;
  min-width:142px;
  max-height:240px;
  overflow-y:auto;
  padding:4px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:0 12px 25px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s,transform .15s
}
.category-filter.open .category-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.category-menu button {
  display:block;
  width:100%;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--secondary);
  cursor:pointer;
  padding:8px 9px;
  text-align:left;
  font:10px var(--font);
  white-space:nowrap
}
.category-menu button:hover,.category-menu button.selected {
  background:var(--surface-hover);
  color:var(--lime)
}
.alert-dropdown {
  position:relative
}
.alert-dropdown-trigger {
  width:100%;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--secondary);
  cursor:pointer;
  padding:0 10px;
  font:11px var(--font);
  text-align:left
}
.alert-dropdown-arrow {
  color:var(--muted);
  font-size:14px;
  transition:transform .15s
}
.alert-dropdown.open .alert-dropdown-arrow {
  transform:rotate(180deg)
}
.alert-dropdown-menu {
  position:absolute;
  z-index:30;
  top:43px;
  left:0;
  right:0;
  padding:4px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:0 12px 25px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s,transform .15s
}
.alert-dropdown.open .alert-dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.alert-dropdown-menu button {
  display:block;
  width:100%;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--secondary);
  cursor:pointer;
  padding:8px 9px;
  text-align:left;
  font:11px var(--font)
}
.alert-dropdown-menu button:hover,.alert-dropdown-menu button.selected {
  background:var(--surface-hover);
  color:var(--lime)
}
.sort-dropdown {
  position:relative
}
.sort-trigger {
  min-width:142px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--secondary);
  cursor:pointer;
  padding:0 9px;
  font:10px var(--font);
  text-align:left
}
.sort-arrow {
  color:var(--muted);
  font-size:13px;
  transition:transform .15s
}
.sort-dropdown.open .sort-arrow {
  transform:rotate(180deg)
}
.sort-menu {
  position:absolute;
  z-index:30;
  top:34px;
  right:0;
  min-width:142px;
  padding:4px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:0 12px 25px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s,transform .15s
}
.sort-dropdown.open .sort-menu {
  opacity:1;
  visibility:visible;
  transform:translateY(0)
}
.sort-menu button {
  display:block;
  width:100%;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--secondary);
  cursor:pointer;
  padding:8px 9px;
  text-align:left;
  font:10px var(--font)
}
.sort-menu button:hover,.sort-menu button.selected {
  background:var(--surface-hover);
  color:var(--lime)
}
.server-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:5px;
  white-space:nowrap
}
.server-action {
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--secondary);
  cursor:pointer;
  font:10px var(--font);
  padding:5px 7px
}
.server-action:hover,.server-action.active {
  background:var(--surface-hover);
  border-color:var(--accent-line);
  color:var(--lime)
}
.functional-card-actions .server-action {
  margin-left:6px
}
.alert-modal-backdrop {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:rgba(4,7,6,.72);
  backdrop-filter:blur(6px);
  padding:20px
}
.alert-modal {
  width:min(460px,100%);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  padding:24px
}
.alert-modal h2 {
  margin:0;
  font-size:20px
}
.alert-modal p {
  margin:7px 0 22px;
  color:var(--muted);
  font-size:11px
}
.alert-modal label {
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--secondary);
  font-size:11px;
  margin-top:14px
}
.alert-modal .threshold-field[hidden] {
  display:none
}
.alert-modal select,.alert-modal input {
  height:40px;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  padding:0 10px;
  font:11px var(--font)
}
.alert-modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:24px
}
.alert-modal-actions button {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:transparent;
  color:var(--secondary);
  padding:9px 13px;
  cursor:pointer;
  font:11px var(--font)
}
.alert-modal-actions .primary {
  background:var(--lime);
  border-color:var(--lime);
  color:#15200f;
  font-weight:700
}

/* Global finish: one static texture and restrained atmospheric lighting. */
body {
  background: radial-gradient(ellipse 1000px 500px at 70% 0, rgba(79, 137, 164, .065), transparent 75%), var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .025;
  background: url('/grain.png') repeat;
}
::selection { background: rgba(189, 176, 123, .28); color: var(--text); }
button, input, select { font-family: var(--font); }
button, a, input, select {
  -webkit-tap-highlight-color: transparent;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}
button { cursor: pointer; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.brand { color: var(--text); text-decoration: none; }
.content { max-width: 1512px; padding: 44px clamp(24px, 3vw, 56px) 24px; }
.sidebar { width: 224px; height: 100dvh; max-height: 100dvh; padding: 28px 16px 20px; border-color: var(--line-soft); background: var(--sidebar); }
.brand { padding-bottom: 34px; }
.brand-mark i { border-radius: 1px 1px 0 0; }
.nav-label { letter-spacing: 1.3px; padding-bottom: 10px; }
.nav-item { min-height: 40px; height: auto; margin: 3px 0; border: 1px solid transparent; font-weight: 500; }
.nav-item:hover { color: var(--text); background: var(--panel2); }
.nav-item.active { background: var(--accent-soft); border-color: rgba(189, 176, 123, .12); box-shadow: inset 2px 0 var(--accent); }
.nav-item.active span, .nav-item.active b { color: var(--accent-bright); }
.sidebar-bottom { padding-top: 28px; }
.sidebar-bottom .status-card { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.status-dot, .online-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(151, 199, 177, .08); }

/* Page hierarchy and shared surfaces. */
.hero, .page-intro { gap: var(--space-8); margin-bottom: 28px; }
.hero > div:first-child, .page-intro > div:first-child { min-width: 0; }
.hero h1 { font-size: 40px; line-height: 1.14; font-weight: 800; letter-spacing: -1.7px; margin: 14px 0 12px; }
.hero h1 span { color: var(--accent-bright); }
.hero p, .page-intro p { color: var(--secondary); line-height: 1.7; }
.page-intro h1 { font-size: 32px; line-height: 1.2; letter-spacing: -1.2px; overflow-wrap: anywhere; }
.page-intro .view-all { display: inline-block; margin-top: 12px; }
.green-line { height: 2px; }
.section-heading { align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.section-heading h2 { font-size: 18px; font-weight: 800; letter-spacing: -.45px; }
.section-heading p { font-size: 12px; }
.view-all, .table-foot a { color: var(--accent-bright); font-size: 12px; }
.view-all:hover, .table-foot a:hover, footer a:hover { color: var(--text); }
.home-seo-link { margin-top: 14px; }
.metrics, .profile-metrics, .chart-card, .insight-card, .table-card, .metadata, .functional-card, .resource-card, .resource-detail-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background-color: var(--panel);
  box-shadow: var(--shadow);
}
.metrics, .profile-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.metrics { margin-bottom: var(--space-8); }
.metric, .profile-metrics > div { min-width: 0; padding: var(--space-5) var(--space-6); }
.metric-top { align-items: center; gap: 8px; letter-spacing: 1px; }
.metric-icon { color: var(--accent); }
.metric strong { font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.8px; margin: 10px 0 5px; font-variant-numeric: tabular-nums; }
.metric small { font-size: 11px; }
.accent-metric { background: linear-gradient(110deg, var(--accent-soft), transparent); }
.pulse-grid { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
.chart-card { min-width: 0; padding: 20px 24px 12px; }
.chart-value { font-size: 28px; font-variant-numeric: tabular-nums; }
.chart-change { color: var(--accent-bright); font-size: 12px; }
.chart-head p { font-size: 11px; }
.chart-wrap { height: 182px; margin-top: 16px; }
.x-labels { bottom: 12px; }
.x-labels, .y-labels, .history-x-labels, .history-y-labels { font-size: 10px; }
.insight-card { padding: 22px 24px; background: linear-gradient(135deg, rgba(189, 176, 123, .04), transparent 70%), var(--panel); }
.card-kicker { color: var(--accent-bright); font-size: 10px; }
.insight-card h3 { margin: 16px 0 10px; font-size: 21px; line-height: 1.3; letter-spacing: -.7px; }
.insight-card p { color: var(--secondary); font-size: 12px; line-height: 1.75; }
.mini-bars { height: 36px; margin: 18px 0 12px; gap: 6px; }
.mini-bars span { background: #746e53; }
.mini-bars span:last-child { background: var(--accent); }
.insight-foot { margin-top: auto; gap: 8px; font-size: 11px; }

/* Search and filters share control sizing, focus and selection states. */
.hero-search { flex: 0 1 390px; width: 390px; max-width: 100%; height: 44px; border-color: var(--line-strong); padding: 0 12px; }
.hero-search input { min-width: 0; width: 100%; color: var(--text); }
.hero-search input::placeholder { opacity: 1; }
.hero-search:focus-within { border-color: var(--blue); box-shadow: var(--focus); background: var(--panel2); }
.hero-search kbd { flex-shrink: 0; }
.table-tools { height: auto; min-height: 62px; gap: 16px; padding: 12px 20px; }
.table-tools .hero-search { flex: 1; height: var(--control-height); max-width: 440px; margin: 0 auto 0 0; background: var(--bg); }
.table-title { line-height: 1.5; }
.directory-summary { flex-wrap: wrap; border: 0; background: none; padding: 0 2px; margin-bottom: 16px; font-size: 12px; }
.directory-summary strong { font: 500 18px var(--mono); }
.live-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font: 10px var(--mono); letter-spacing: .5px; white-space: nowrap; }
.live-pill i { background: var(--success); margin-right: 0; }
.range { gap: 2px; background: var(--panel); }
.range button { min-width: 39px; min-height: 28px; border-radius: 2px; padding: 5px 9px; }
.range button:hover { background: var(--panel2); color: var(--text); }
.range button.selected { color: var(--accent-bright); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.category-filter { padding: 0; border: 0; background: none; }
.category-filter span { margin-left: 0; }
.category-trigger, .sort-trigger, .alert-dropdown-trigger {
  height: var(--control-height); min-width: 156px; padding: 0 12px; gap: 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel2); color: var(--secondary); font-size: 12px;
}
.category-trigger:hover, .sort-trigger:hover, .alert-dropdown-trigger:hover { border-color: var(--accent-line); color: var(--text); }
.open > button { border-color: var(--accent-line); }
.category-menu, .sort-menu, .alert-dropdown-menu {
  top: calc(100% + 6px); min-width: 100%; max-height: 280px; overflow-y: auto;
  border-color: var(--line-strong); background: var(--panel2); box-shadow: var(--shadow-menu);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.category-menu button, .sort-menu button, .alert-dropdown-menu button { min-height: 36px; font-size: 12px; }
.category-menu button:hover, .sort-menu button:hover, .alert-dropdown-menu button:hover { background: var(--surface-hover); color: var(--text); }
.category-menu button.selected, .sort-menu button.selected, .alert-dropdown-menu button.selected { background: var(--accent-soft); color: var(--accent-bright); }

/* Dense server rows: identity first, aligned numeric and status columns. */
.table-scroll { border-radius: 0 0 var(--radius) var(--radius); scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--panel); }
table { min-width: 840px; }
th { padding: 12px 20px; background: rgba(0, 0, 0, .08); font-size: 10px; white-space: nowrap; }
td { font-size: 12px; vertical-align: middle; }
.directory-table td { padding-block: 14px; }
tbody tr { transition: background-color var(--ease), box-shadow var(--ease); }
tbody tr:hover, tbody tr:focus-within { background: var(--surface-hover); box-shadow: inset 2px 0 var(--accent); }
.server-cell { gap: 12px; min-width: 240px; }
.server-cell > div:not(.server-logo) { min-width: 0; }
.server-logo { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-bright); }
.server-name { max-width: clamp(260px, 24vw, 440px); color: var(--text); font-size: 13px; font-weight: 700; letter-spacing: -.1px; text-decoration: none; }
.server-name:hover { color: var(--accent-bright); }
.server-tag { display: block; max-width: clamp(260px, 24vw, 440px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; font-size: 11px; }
.players { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.players b { font-size: 10px; }
.bar { display: block; width: 88px; height: 3px; margin: 8px 0 0; border-radius: 1px; overflow: hidden; }
.online { color: var(--success); font-family: var(--mono); white-space: nowrap; }
.online.is-offline { color: var(--muted); }
.country { font-size: 11px; white-space: nowrap; }
.country-flag { display: inline-block; margin-right: 7px; vertical-align: middle; }
.rank-number { width: 64px; font-size: 11px; }
.table-foot { gap: 16px; font-size: 11px; }
.server-actions { gap: 6px; }
.server-action, .watch-toggle, .alert-remove { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--secondary); font-size: 11px; }
.server-action:hover, .watch-toggle:hover, .alert-remove:hover { border-color: var(--line-strong); background: var(--panel2); color: var(--text); }
.server-action.active, .watch-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-bright); }

/* Detail pages, watchlist and alerts use the same visual language. */
.profile-head { margin-bottom: 28px; }
.profile-head h1 { font-size: 28px; line-height: 1.3; letter-spacing: -.8px; overflow-wrap: anywhere; }
.profile-head p { color: var(--secondary); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.profile-tags span, .resource-list span, .resource-servers a, .resource-servers span, .endpoint-list span { border-color: var(--line); background: var(--panel2); color: var(--secondary); border-radius: 3px; line-height: 1.5; overflow-wrap: anywhere; }
.profile-tags span { font-size: 10px; }
.profile-metrics span { font-size: 10px; }
.profile-metrics strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.profile-metrics em { font-size: 11px; }
.profile-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.metadata, .resource-detail-card { padding: var(--space-6); }
.metadata-intro { font-size: 12px; line-height: 1.6; }
.metadata dt, .extra-details dt, .server-settings dt { font-size: 10px; letter-spacing: .6px; }
.metadata dd, .extra-details dd, .server-settings dd { font-size: 12px; line-height: 1.6; word-break: normal; overflow-wrap: anywhere; }
.detail-status .status-live { color: var(--success); background: var(--panel2); border-color: var(--line); }
.detail-status .status-allowlist { background: var(--accent-soft); }
.resource-name { font-size: 13px; overflow-wrap: anywhere; }
.resource-servers a { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.functional-card, .resource-card { min-width: 0; padding: var(--space-5); transition: border-color var(--ease), background-color var(--ease); }
.functional-card:hover, .resource-card:hover { border-color: var(--accent-line); background: var(--panel2); }
.functional-card-head > div:not(.server-logo) { min-width: 0; flex: 1; }
.functional-card-head h2 { font-size: 14px; }
.functional-card-head span { font-size: 11px; }
.functional-card-actions { flex-wrap: wrap; gap: 8px; }
.functional-card-actions .server-action { margin-left: 0; }
.join-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; font-size: 12px; color: #1b1c18; }
.join-button:hover { background: var(--accent-bright); box-shadow: 0 3px 16px rgba(189, 176, 123, .12); }
.empty-state { border-color: var(--line-strong); border-radius: var(--radius); padding: 40px 24px; }
.empty-inline { font-size: 12px; }
.alert-row > div { min-width: 0; overflow-wrap: anywhere; }
.alert-row strong { font-size: 13px; }
.alert-row span { font-size: 11px; }
.alert-modal-backdrop { background: rgba(9, 12, 15, .76); backdrop-filter: blur(5px); }
.alert-modal { max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--panel); border-color: var(--line-strong); box-shadow: var(--shadow-menu); }
.alert-modal p { font-size: 12px; overflow-wrap: anywhere; }
.alert-modal label { font-size: 12px; }
.alert-modal input, .alert-modal select, .alert-form input, .alert-form select { min-width: 0; width: 100%; background: var(--bg); border-color: var(--line-strong); font-size: 12px; }
.alert-modal-actions button { min-height: var(--control-height); font-size: 12px; }
.alert-modal-actions .primary { color: #1b1c18; }
.alert-modal-actions .primary:hover { background: var(--accent-bright); }
.dashboard-hover { bottom: 30px; }
.dashboard-tooltip, .history-tooltip { background: var(--panel2); box-shadow: var(--shadow-menu); transition: opacity var(--ease), transform var(--ease); }
.chart-summary { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 11px; }
footer { flex-wrap: wrap; gap: 12px 20px; margin-top: 32px; padding: 20px 0 8px; border-top: 1px solid var(--line-soft); font-size: 11px; }
footer a { font-size: 11px; color: var(--secondary); }

/* Responsive: retain the actual browser controls and navigation. */
@media (max-width: 1200px) {
  .sidebar { width: 204px; padding-inline: 12px; }
  .content { padding-inline: 24px; }
  .hero { align-items: start; flex-wrap: wrap; gap: 20px; }
  .metric, .profile-metrics > div { padding: 18px; }
  td, th { padding-inline: 16px; }
}
@media (max-width: 960px) {
  .pulse-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .chart-card, .insight-card { padding-inline: 18px; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .functional-grid, .resource-grid { grid-template-columns: minmax(0, 1fr); }
  .page-intro { flex-wrap: wrap; gap: 20px; }
}
@media (max-width: 800px) {
  .app { display: block; }
  .sidebar { position: relative; display: block; width: 100%; height: auto; max-height: none; overflow: visible; padding: 16px 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { width: fit-content; padding: 0 0 14px; font-size: 18px; }
  .sidebar nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; }
  .nav-label, .sidebar-bottom, .nav-item b { display: none; }
  .nav-item { flex-shrink: 0; gap: 7px; margin: 0; padding: 0 10px; min-height: 36px; font-size: 11px; }
  .nav-item span { font-size: 16px; }
  .nav-item.active { box-shadow: inset 0 -2px var(--accent); }
  .content { padding: 28px 18px 20px; }
  .hero, .page-intro { display: block; margin-bottom: 24px; }
  .hero h1 { font-size: 34px; letter-spacing: -1.3px; }
  .page-intro h1 { font-size: 28px; }
  .hero-search { width: 100%; margin-top: 20px; }
  .metrics, .profile-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 28px; }
  .metric:nth-child(2), .profile-metrics > div:nth-child(2) { border-right: 0; }
  .pulse-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 28px; }
  .insight-card { min-height: 0; }
  .mini-bars { height: 30px; }
  .section-heading { flex-wrap: wrap; gap: 12px; }
  .section-heading h2 { font-size: 17px; }
  .table-tools { flex-wrap: wrap; gap: 12px; padding: 12px; }
  .table-tools .hero-search { flex: 1 1 100%; max-width: none; margin: 0; }
  .table-tools .table-title { flex: 1; font-size: 9px; }
  .table-tools .live-pill { margin-left: 6px; font-size: 9px; }
  .category-trigger, .sort-trigger { min-width: 140px; font-size: 11px; }
  .table-foot { padding: 12px; flex-wrap: wrap; gap: 8px; }
  .server-cell { min-width: 188px; gap: 10px; }
  .server-name, .server-tag { max-width: 142px; }
  .rank-number { width: 40px; padding-inline: 10px; }
  td, th { padding-inline: 12px; }
  .profile-head h1 { font-size: 23px; }
  .profile-head .big-logo { width: 60px; height: 60px; flex-basis: 60px; }
  .profile-head > div:not(.server-logo) { min-width: 200px; }
  .profile-head .eyebrow { flex-wrap: wrap; font-size: 9px; }
  .profile-metrics strong { font-size: 24px; }
  .metadata, .resource-detail-card { padding: 20px; }
  .alert-layout { grid-template-columns: 1fr; }
  .directory-summary { font-size: 11px; }
  .directory-summary .live-pill { margin-left: 0; }
  footer { display: block; line-height: 1.8; }
  footer span { display: block; margin-bottom: 6px; }
  footer a { margin: 0 14px 0 0; }
}
@media (max-width: 400px) {
  .content { padding-inline: 14px; }
  .metric, .profile-metrics > div { padding: 16px 12px; }
  .metric-top, .profile-metrics span { font-size: 9px; letter-spacing: .4px; }
  .metric strong { font-size: 25px; }
  .metric small { font-size: 10px; }
  .hero-search kbd { display: none; }
  .chart-card, .insight-card { padding-inline: 14px; }
  .functional-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Fixed animated community banner */
body { padding-top: 58px; }
.visitor-banner {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 38px);
  overflow: hidden;
  padding: 9px 20px;
  border-bottom: 1px solid rgba(240, 230, 190, .28);
  background: linear-gradient(110deg, #252019, #6e5d35, #a88e4f, #4c4938, #252019);
  background-size: 240% 100%;
  color: #fff9e9;
  box-shadow: 0 5px 22px rgba(0, 0, 0, .32);
  animation: visitor-gradient 14s ease-in-out infinite;
}
.visitor-banner-glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.09) 48%, transparent 68%); transform: translateX(-100%); animation: visitor-shimmer 8s ease-in-out infinite; }
.visitor-banner-label, .visitor-stat, .visitor-divider { position: relative; z-index: 1; }
.visitor-banner-label { display: flex; align-items: center; gap: 9px; font: 10px var(--mono); letter-spacing: 1px; white-space: nowrap; }
.visitor-banner-label i { width: 7px; height: 7px; border-radius: 50%; background: #f7d981; box-shadow: 0 0 12px #ffe49b; animation: visitor-pulse 2s ease-in-out infinite; }
.visitor-stat { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.visitor-stat strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.visitor-stat small { color: rgba(255, 249, 233, .78); font-size: 10px; }
.visitor-divider { width: 1px; height: 22px; background: rgba(255, 249, 233, .27); }
.sidebar { top: 58px; height: calc(100dvh - 58px); max-height: calc(100dvh - 58px); }
.cool-server-intro { margin-bottom: 24px; }
.cool-server-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cool-server-card { position: relative; display: flex; min-height: 200px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(ellipse at 100% 0, rgba(189,176,123,.13), transparent 48%), var(--panel); color: var(--text); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.cool-server-card::after { position: absolute; top: -60%; right: -25%; width: 55%; height: 200%; content: ''; background: linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent); transform: rotate(24deg); transition: transform 450ms ease; }
.cool-server-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 16px 36px rgba(0,0,0,.2); }
.cool-server-card:hover::after { transform: translateX(-45px) rotate(24deg); }
.cool-server-kicker { color: var(--accent-bright); font: 10px var(--mono); letter-spacing: 1px; }
.cool-server-card h2 { margin: 12px 0 6px; font-size: 23px; letter-spacing: -.6px; }
.cool-server-card p { margin: 0; color: var(--secondary); font-size: 12px; }
.cool-server-visit { position: relative; z-index: 1; display: flex; justify-content: space-between; margin-top: 28px; color: var(--accent-bright); font-size: 11px; font-weight: 700; }
@keyframes visitor-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes visitor-shimmer { 0%, 35% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
@keyframes visitor-pulse { 50% { opacity: .55; box-shadow: 0 0 4px #ffe49b; } }
@media (max-width: 800px) {
  body { padding-top: 54px; }
  .visitor-banner { min-height: 54px; justify-content: space-around; gap: 8px; padding-inline: 10px; }
  .visitor-banner-label { font-size: 8px; letter-spacing: .5px; }
  .visitor-banner-label i { width: 6px; height: 6px; }
  .visitor-stat { display: block; text-align: center; }
  .visitor-stat strong, .visitor-stat small { display: block; }
  .visitor-stat strong { font-size: 13px; }
  .visitor-stat small { font-size: 8px; }
  .visitor-divider { height: 24px; }
  .sidebar { top: 0; height: auto; max-height: none; }
  .cool-server-grid { grid-template-columns: minmax(0, 1fr); }
  .cool-server-card { min-height: 170px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .visitor-banner, .visitor-banner-label i { animation: none; }
  .cool-server-card, .cool-server-card::after { transition: none; }
}