.analytics-page {
  --bg-main: #0b1228;
  --bg-deep: #06070f;
  --panel: rgba(17, 22, 38, 0.84);
  --panel-soft: rgba(18, 26, 46, 0.74);
  --line: rgba(255, 255, 255, 0.2);
  --text: #f5f7ff;
  --text-soft: #b8c5e6;
  --accent-gold: #ffd54a;
  --accent-silver: #e6ecff;
  --accent-bronze: #ff9f62;
  --accent-green: #2cd6c4;
}

.analytics-page,
.analytics-page body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.analytics-page {
  background: transparent;
}

.analytics-page .texture-noise {
  opacity: 0.06;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 0.55px, transparent 0.55px);
}

.analytics-page .texture-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(116, 173, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 173, 255, 0.11) 1px, transparent 1px);
}

.analytics-page .beam-a {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.22), rgba(0, 229, 255, 0));
}

.analytics-page .beam-b {
  background: linear-gradient(90deg, rgba(255, 213, 74, 0.2), rgba(255, 213, 74, 0));
}

.analytics-main {
  padding: 0 0 36px;
}

.analytics-intro {
  padding: clamp(20px, 4vw, 36px) 0 14px;
}

.analytics-intro .site-title {
  margin: 0;
}

.analytics-intro .site-subtitle {
  margin-bottom: 0;
}

.analytics-page .poster-shell {
  width: min(1220px, 95vw);
  margin: 0 auto 24px;
  gap: 10px;
}

.analytics-page .poster-hero {
  padding: 18px;
}

.analytics-page .card-shell {
  border-color: var(--glass-border-soft);
  background: linear-gradient(160deg, rgba(17, 22, 38, 0.84), rgba(9, 14, 29, 0.92));
  box-shadow: 0 22px 42px rgba(2, 5, 18, 0.44);
}

.analytics-page .card-flat {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, rgba(17, 22, 38, 0.76), rgba(9, 14, 29, 0.88));
}

.analytics-page h1,
.analytics-page h2,
.analytics-page h3,
.analytics-page .entity-cover h3 {
  font-family: "Lilita One", system-ui;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.analytics-page .hero-kicker,
.analytics-page .hero-sub,
.analytics-page .tab-btn,
.analytics-page .metric-label,
.analytics-page .metric-value,
.analytics-page .rank-meta-small,
.analytics-page .rank-desc,
.analytics-page .rank-chip,
.analytics-page table,
.analytics-page .finder label,
.analytics-page .filter-field label {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.analytics-page .hero-sub {
  color: #d0dcf8;
}

.analytics-page .panel.panel-plain {
  width: 100%;
  margin-left: 0;
  padding: 0.62rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(17, 22, 38, 0.84), rgba(9, 14, 29, 0.92));
  box-shadow: 0 22px 42px rgba(2, 5, 18, 0.44);
}

.analytics-page .tab-btn {
  border-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(145deg, rgba(20, 33, 60, 0.76), rgba(9, 16, 32, 0.9));
  color: var(--text);
}

.analytics-page .tab-btn:hover {
  border-color: rgba(0, 229, 255, 0.45);
}

.analytics-page .tab-btn.active {
  color: #06101f;
  background: linear-gradient(145deg, rgba(255, 213, 74, 0.95), rgba(0, 229, 255, 0.9));
  border-color: rgba(255, 255, 255, 0.75);
}

.analytics-page .metric-card,
.analytics-page .rank-board,
.analytics-page .rank-row,
.analytics-page .rank-value,
.analytics-page .table-wrap,
.analytics-page .finder,
.analytics-page .entity-cover,
.analytics-page .world-map {
  border-color: rgba(255, 255, 255, 0.18);
}

.analytics-page .metric-card,
.analytics-page .rank-board,
.analytics-page .rank-row,
.analytics-page .rank-value,
.analytics-page .finder,
.analytics-page .entity-cover {
  background: linear-gradient(150deg, rgba(20, 33, 60, 0.7), rgba(10, 18, 36, 0.9));
}

.analytics-page .rank-row.rank-1 {
  border-color: rgba(255, 213, 74, 0.56);
  background: linear-gradient(150deg, rgba(90, 84, 44, 0.76), rgba(18, 28, 48, 0.9));
}

.analytics-page .rank-row.rank-2 {
  border-color: rgba(225, 232, 255, 0.45);
}

.analytics-page .rank-row.rank-3 {
  border-color: rgba(255, 160, 98, 0.5);
}

.analytics-page .leaflet-container {
  background: linear-gradient(160deg, rgba(15, 24, 46, 0.9), rgba(7, 12, 26, 0.92));
}

.analytics-page .leaflet-popup-content-wrapper,
.analytics-page .leaflet-popup-tip,
.analytics-page .leaflet-control-zoom a {
  background: rgba(14, 22, 42, 0.94);
  color: #e6edff;
  border-color: rgba(255, 255, 255, 0.24);
}

.analytics-page select,
.analytics-page input {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(8, 13, 26, 0.8);
  color: #f5f8ff;
  padding: 8px 10px;
}

.analytics-page select:focus,
.analytics-page input:focus {
  outline: none;
  border-color: rgba(0, 229, 255, 0.62);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
}

.analytics-page table th,
.analytics-page table td {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.analytics-page tbody tr:hover {
  background: rgba(0, 229, 255, 0.08);
}

@media (max-width: 760px) {
  .analytics-intro {
    padding-top: 16px;
    padding-bottom: 10px;
  }

  .analytics-page .poster-shell {
    width: min(1220px, 96vw);
    gap: 8px;
  }

  .analytics-page .poster-hero {
    padding: 14px;
  }

  .analytics-page .hero-lineup {
    min-height: 108px;
  }

  .analytics-page .hero-lineup img {
    width: clamp(64px, 20vw, 140px);
  }

  .analytics-page .tabs {
    gap: 0.36rem;
  }

  .analytics-page .tab-btn {
    padding: 0.38rem 0.72rem;
    font-size: 0.88rem;
  }
}