:root{
  --glass: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.18);
}

.bg-gradient-dark{
  background: radial-gradient(1200px 800px at 20% 0%, rgba(13,110,253,0.35), transparent 60%),
              radial-gradient(1200px 800px at 90% 30%, rgba(255,255,255,0.10), transparent 55%),
              linear-gradient(180deg, #070A12, #0B1020 55%, #070A12);
  min-height: 100vh;
}

.glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  border-radius: 18px;
}

.stat{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
}
.stat-value{
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
}
.stat-label{
  color: rgba(255,255,255,0.65);
  font-size: 12px;
}

.story-wrap{
  max-width: 460px;
  margin: 0 auto;
  padding: 14px;
}

.story-card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.35);
}

.badge-handle{
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

.leaflet-container{
  border-radius: 16px;
}

.vrt-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.vrt-treadmill{background:#00d1ff;}
.vrt-event{background:#ffb020;}
.vrt-out{background:#7CFF6B;}
.vrt-remaining{background:#111;}