:root {
  --bg: #080808;
  --panel: #121212;
  --panel2: #1a1a1a;
  --acc: #ff5800;
  --acc2: #ff6b00;
  --txt: #fff;
  --muted: #9a9a9a;
  --grid: #242424;
  --danger: #ff4444;
  --ok: #4ade80;
  --mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

button, input, select { font: inherit; }
.mono, code { font-family: var(--mono); }
.dim { color: var(--muted); }
.acc { color: var(--acc2); }

#topbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 10px 18px;
  background: rgba(10, 10, 10, 0.94);
  border-bottom: 1px solid #222;
  backdrop-filter: blur(8px);
}

.brand, .controls, .ctl, .network-status {
  display: flex;
  align-items: center;
}

.brand { gap: 10px; min-width: 0; }
.controls { gap: 14px; justify-content: flex-end; }
.ctl { gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }

.network-status {
  flex: none;
  border: 1px solid #2a2a2a;
  background: var(--panel);
}
.network-status > span { min-width: 92px; padding: 5px 10px; }
.network-status > span + span { border-left: 1px solid #2a2a2a; }
.network-status small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .6px; text-transform: uppercase; }
.network-status strong { display: block; color: var(--txt); font-family: var(--mono); font-size: 13px; font-weight: 600; }

.logo-dot {
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px var(--acc), 0 0 22px var(--acc2);
}

.brand h1 {
  margin: 0;
  font-size: 17px;
  letter-spacing: .4px;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid #333;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.badge.live { color: var(--acc2); border-color: rgba(255, 88, 0, .55); }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.live .badge-dot { animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse {
  50% { opacity: .55; transform: scale(.82); box-shadow: 0 0 0 5px rgba(255, 88, 0, 0); }
}

.seg {
  display: inline-flex;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
}

.seg button {
  appearance: none;
  padding: 6px 14px;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .7px;
}

.seg button + button { border-left: 1px solid #2a2a2a; }
.seg button:hover { color: var(--txt); }
.seg button.active { color: #fff; background: var(--acc); }
.seg.compact button { padding: 7px 11px; font-size: 10px; }

.ctl select, .ctl input[type="date"], .now-label {
  padding: 5px 8px;
  color: var(--txt);
  background: var(--panel2);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  outline: none;
  font-family: var(--mono);
  font-size: 12px;
}

.ctl input[type="range"] { width: 130px; accent-color: var(--acc); }
.ctl input:disabled, .ctl select:disabled { opacity: .4; cursor: not-allowed; }

#error-bar {
  position: fixed;
  z-index: 1300;
  top: 74px;
  left: 18px;
  right: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  color: #ffb4b4;
  background: rgba(35, 8, 8, .96);
  border: 1px solid var(--danger);
  border-radius: 8px;
  cursor: pointer;
}

.error-dismiss { margin-left: auto; }

main { display: block; }

.network-view {
  position: relative;
  height: clamp(440px, 74svh, 740px);
  overflow: hidden;
  background: #080808;
  border-bottom: 1px solid var(--grid);
}

.map-canvas { width: 100%; height: 100%; background: #080808; }

.map-heading, .map-toolbar, .map-legend {
  position: absolute;
  z-index: 1000;
  background: rgba(12, 12, 12, .9);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
}

.map-heading { top: 22px; left: 22px; padding: 13px 16px; pointer-events: none; }
.map-heading h2 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.2px; }

.eyebrow, .section-index {
  margin: 0;
  color: var(--acc2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.map-toolbar {
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px;
}

.map-action, .directory-toolbar button {
  appearance: none;
  padding: 7px 10px;
  color: #c9c9c9;
  background: var(--panel);
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.map-action:hover, .directory-toolbar button:hover { color: #fff; border-color: var(--acc); }

.switch-control, .advertisement-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c9c9c9;
  font-size: 11px;
  white-space: nowrap;
}

.switch-control { cursor: pointer; }
.switch-control input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; width: 30px; height: 16px; border-radius: 20px; background: #383838; }
.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa;
  transition: transform .15s, background .15s;
}
.switch-control input:checked + .switch-track { background: rgba(255, 88, 0, .35); }
.switch-control input:checked + .switch-track::after { transform: translateX(14px); background: var(--acc); }

.advertisement-control input { width: 90px; accent-color: var(--acc); }
.advertisement-count { min-width: 58px; color: var(--acc2); font-family: var(--mono); text-align: right; }

.map-legend {
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 12px;
  color: #c9c9c9;
  font-size: 11px;
}

.map-legend > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.reachable { background: #fff; box-shadow: 0 0 7px #fff; }
.legend-dot.unreachable { background: #646464; }
.legend-line { width: 17px; height: 1px; background: rgba(255, 255, 255, .55); }
.legend-line.recent { height: 2px; background: var(--acc); box-shadow: 0 0 5px var(--acc); }
.legend-count { padding-left: 12px; color: var(--acc2); border-left: 1px solid #333; font-family: var(--mono); }

.content-section { padding: clamp(55px, 8vw, 110px) clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--grid); }
.content-section h2 { margin: 5px 0 0; font-size: clamp(27px, 4vw, 48px); line-height: 1.1; letter-spacing: -1.4px; }

.about-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: start;
}

.about-copy { max-width: 720px; color: #c5c5c5; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.7; }
.about-copy p { margin: 0 0 22px; }

.directory-section { min-height: 100vh; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.section-heading > p { max-width: 360px; margin: 0; color: var(--muted); text-align: right; }

.directory-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
}
.directory-toolbar > span { margin-right: auto; font-family: var(--mono); }
.directory-toolbar label { display: flex; align-items: center; gap: 7px; }
.directory-toolbar select {
  padding: 6px 24px 6px 8px;
  color: #fff;
  background: var(--panel2);
  border: 1px solid #333;
  border-radius: 6px;
}

.am-table-scroll { overflow-x: auto; border: 1px solid var(--grid); }
.am-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.am-table th {
  padding: 10px 11px;
  color: #cfcfcf;
  background: var(--panel2);
  border-bottom: 1px solid #333;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .3px;
  text-align: left;
  white-space: nowrap;
}
.am-table th:hover { color: var(--acc2); }
.am-filter-row th { padding: 5px; background: #101010; cursor: default; }
.am-filter-row th:hover { color: inherit; }
.am-filter-row input {
  width: 118px;
  min-width: 70px;
  padding: 6px 7px;
  color: #fff;
  background: #090909;
  border: 1px solid #292929;
  border-radius: 3px;
  outline: none;
  font-family: var(--mono);
  font-size: 10px;
}
.am-filter-row input:focus { border-color: var(--acc); }
.am-table td { padding: 9px 11px; border-bottom: 1px solid #191919; font-family: var(--mono); white-space: nowrap; }
.am-table tbody tr:hover { background: var(--panel); }
.am-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.am-sort { margin-left: 5px; color: var(--acc); }
.reach-state { display: inline-flex; align-items: center; gap: 6px; }
.reach-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #626262; }
.reach-state.yes::before { background: var(--ok); box-shadow: 0 0 6px rgba(74, 222, 128, .7); }
.am-empty { padding: 80px 20px; color: var(--muted); border: 1px solid var(--grid); text-align: center; }

/* ---- Top 10 Rankings ---- */
.rankings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ranking-card {
  padding: 20px;
  background: #0d0d0d;
  border: 1px solid var(--grid);
}

.ranking-card-title {
  margin: 0 0 18px;
  color: #cfcfcf;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
}

.ranking-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.ranking-row + .ranking-row {
  border-top: 1px solid #181818;
}

.ranking-label {
  color: #ddd;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ranking-bar-track {
  height: 6px;
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
}

.ranking-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}

.ranking-bar-fill.country { background: var(--acc); }
.ranking-bar-fill.version { background: #fff; }

.ranking-count {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  min-width: 36px;
  text-align: right;
}

.ranking-empty {
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

/* ---- Importance / Community Section ---- */
.importance-content {
  margin-top: 10px;
}

.importance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.importance-card {
  padding: 24px;
  background: #0d0d0d;
  border: 1px solid var(--grid);
}

.importance-card h3 {
  margin: 0 0 14px;
  color: var(--acc2);
  font-size: 16px;
  letter-spacing: -.2px;
}

.importance-card p {
  margin: 0 0 14px;
  color: #bbb;
  font-size: 14px;
  line-height: 1.7;
}

.importance-card p:last-child { margin-bottom: 0; }

.importance-card code {
  padding: 2px 5px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  font-size: 12px;
  color: var(--acc2);
}

/* ---- API Documentation Section ---- */
.api-doc-section .about-copy { max-width: 800px; }

.api-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 20px;
  color: #fff;
  background: var(--acc);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none;
  transition: background .15s;
}

.api-doc-link:hover { background: var(--acc2); }

.footer-api-link {
  margin-top: 18px;
}

.footer-api-link a {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .5px;
  text-decoration: none;
  transition: color .15s;
}

.footer-api-link a:hover { color: var(--acc2); }

.section-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.section-side p { margin: 0; color: var(--muted); }
.am-charts-grid { display: flex; flex-direction: column; gap: 18px; }
.am-chart-card { min-width: 0; padding: 15px; background: #0d0d0d; border: 1px solid var(--grid); }
.am-chart-title { margin-bottom: 8px; color: #cfcfcf; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.am-chart { height: 340px; }

.closing-banner {
  padding: clamp(45px, 7vw, 90px) clamp(20px, 5vw, 72px);
  background: #101010;
  border-top: 2px solid var(--acc);
}
.closing-lead { display: flex; align-items: flex-start; gap: 16px; }
.closing-lead .logo-dot { margin-top: 7px; }
.closing-lead h2 { max-width: 750px; margin: 6px 0 45px; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.12; }
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--grid); }
.meta-grid > div { min-width: 0; padding: 15px; }
.meta-grid > div + div { border-left: 1px solid var(--grid); }
.meta-grid span, .tip-block > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.meta-grid strong { display: block; overflow: hidden; font-family: var(--mono); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tip-block { margin-top: 14px; padding: 15px; background: var(--acc); color: #fff; }
.tip-block > span { color: rgba(255, 255, 255, .75); }
.tip-block code { overflow-wrap: anywhere; }

#toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;
  padding: 9px 14px;
  color: var(--txt);
  background: var(--panel2);
  border: 1px solid var(--acc2);
  box-shadow: 0 6px 24px #000a;
}
.toast-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--ok); }

/* Leaflet is re-skinned to match the existing Ergo theme. */
.leaflet-container { background: #080808; font-family: inherit; }
.leaflet-tile { filter: grayscale(1) brightness(.43) contrast(1.3); }
.leaflet-control-zoom a { color: #ddd !important; background: #151515 !important; border-color: #333 !important; }
.leaflet-control-attribution { color: #777; background: rgba(8, 8, 8, .75) !important; }
.leaflet-control-attribution a { color: #aaa; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color: #fff; background: #111; }
.leaflet-popup-content-wrapper { border: 1px solid var(--acc); border-radius: 3px; box-shadow: 0 8px 25px #000b; }
.node-popup { min-width: 210px; }
.node-popup strong { display: block; color: var(--acc2); font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.node-popup dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 9px 0 0; }
.node-popup dt { color: var(--muted); }
.node-popup dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 1280px) {
  #topbar { flex-wrap: wrap; }
  .controls { order: 3; width: 100%; }
}

@media (max-width: 760px) {
  #topbar, .controls { align-items: flex-start; }
  #topbar { padding: 11px 13px; }
  .brand { flex-wrap: wrap; }
  .brand h1 { font-size: 15px; }
  .network-status { order: 2; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .network-status > span { min-width: 0; }
  .controls { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 9px; }
  .date-control { width: 100%; }
  .date-control input[type="range"] { flex: 1; }
  .map-heading { top: 12px; left: 12px; padding: 10px 12px; }
  .map-heading h2 { font-size: 16px; }
  .map-toolbar { top: 82px; left: 12px; right: 12px; flex-wrap: wrap; }
  .advertisement-control { width: 100%; }
  .advertisement-control input { flex: 1; }
  .map-legend { left: 12px; right: 12px; bottom: 28px; flex-wrap: wrap; gap: 10px 14px; }
  .about-section { grid-template-columns: 1fr; gap: 30px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 14px; text-align: left; }
  .section-side { align-items: flex-start; margin-top: 16px; }
  .directory-toolbar { flex-wrap: wrap; justify-content: flex-start; }
  .directory-toolbar > span { width: 100%; }
  .content-section { padding: 55px 18px; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .meta-grid > div + div { border-left: 0; }
  .meta-grid > div:nth-child(even) { border-left: 1px solid var(--grid); }
  .meta-grid > div:nth-child(n+3) { border-top: 1px solid var(--grid); }
  .rankings-grid { grid-template-columns: 1fr; }
  .importance-grid { grid-template-columns: 1fr; }
}