body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: #f7f8fa;
  color: #181a20;
  min-height: 100vh;
}
body.dark {
  background: #101114;
  color: #e5f0ff;
}
.main-content {
  max-width: 660px;
  margin: 2.4em auto 0 auto;
  padding: 0 1.2em 1em 1.2em;
  width: 100%;
}
.lb-box {
  background: #fff;
  border-radius: 18px;
  padding: 2.3em 2.5em 2.4em 2.5em;
  box-shadow: 0 1px 18px #0001;
  margin-bottom: 2.5em;
  width: 100%;
  box-sizing: border-box;
}
body.dark .lb-box {
  background: #181a20;
  box-shadow: 0 1px 12px #0003;
}
h1 {
  font-size: 2.1em;
  font-weight: 700;
  letter-spacing: -1.3px;
  margin-bottom: 1.4em;
}
.leaderboard-tile {
  background: #f8fafd;
  border-radius: 12px;
  min-height: 64px;
  margin-bottom: 1.25em;
  box-shadow: 0 1px 8px #0001;
  font-size: 1.13em;
  font-weight: 500;
  padding: 1.4em 1.7em;
  display: flex;
  align-items: center;
  gap: 1.3em;
  width: 100%;
  box-sizing: border-box;
}
body.dark .leaderboard-tile {
  background: #1d202a;
  color: #7afcff;
  box-shadow: 0 1px 10px #0003;
}
.lb-label { flex: 1; }
.lb-value {
  font-weight: bold;
  font-size: 1.18em;
  color: #1976d2;
}
body.dark .lb-value { color: #7afcff; }
.acts-list { margin-top: 2.5em; }
.act-tile {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 7px #0001;
  margin-bottom: 1.15em;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: 1.1em 1.5em;
}
body.dark .act-tile { background: #141b22; }
.act-title {
  font-size: 1.11em;
  font-weight: bold;
  color: #1976d2;
}
body.dark .act-title { color: #7afcff; }
.act-meta { color: #666; font-size: 0.96em; }
body.dark .act-meta { color: #8ed5f9; }
.btn-primary, .btn-outline, .pause-btn, .wake-lock-btn {
  font-size: 1em;
  min-width: 96px;
  min-height: 44px;
}
#map {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  margin-top: 1.5em;
  min-height: 200px;
}
.private-badge { color: #c9b100; font-weight: 600; margin-left: 0.5em; }
.menu-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  background: #fff;
  border-radius: 16px;
  padding: 1em 1.5em;
  box-shadow: 0 1px 12px #0001;
  align-items: center;
}
body.dark .menu-bar { background: #181a20; }
@media (max-width: 900px) {
  .main-content, .lb-box { max-width: 96vw; }
}
@media (max-width: 700px) {
  .main-content { padding: 0 0.5em 1em 0.5em; }
  .lb-box { padding: 1em 0.7em 1.2em 0.7em; }
  .leaderboard-tile { padding: 0.8em 0.7em; font-size: 1em; }
  h1 { font-size: 1.45em; }
  #map { height: 230px; }
}
@media (max-width: 500px) {
  body, html { font-size: 16px; }
  .main-content { margin-top: 0.5em; }
  h1 { font-size: 1.08em; }
  .lb-box { padding: 0.6em 0.2em 0.8em 0.2em; }
  .leaderboard-tile { padding: 0.6em 0.3em; min-height:40px; }
  #map { height: 170px; }
  .btn-primary, .btn-outline, .pause-btn, .wake-lock-btn {
    min-width: 80px; min-height: 38px; font-size: 0.98em;
  }
}