:root {
  --roar-black: #14161a;
  --roar-dark: #1e2126;
  --roar-orange: #ff9800;
  --roar-orange-dark: #e68900;
}

body {
  background: #f4f4f6;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.roar-navbar {
  background: linear-gradient(90deg, var(--roar-black), var(--roar-dark));
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.roar-hero {
  background: linear-gradient(135deg, var(--roar-black), #2b2f36);
  color: #fff;
}

.roar-card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.stat-card .stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--roar-black);
}

.stat-card .stat-label {
  font-size: .78rem;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.btn-warning {
  background-color: var(--roar-orange);
  border-color: var(--roar-orange);
  color: #1a1a1a;
}
.btn-warning:hover {
  background-color: var(--roar-orange-dark);
  border-color: var(--roar-orange-dark);
  color: #1a1a1a;
}
.btn-outline-warning {
  color: var(--roar-orange-dark);
  border-color: var(--roar-orange);
}
.btn-outline-warning:hover {
  background-color: var(--roar-orange);
  color: #1a1a1a;
}

.roar-table thead {
  background: var(--roar-black);
  color: #fff;
}
.roar-table thead th {
  border: none;
}

.sos-btn {
  animation: sos-pulse 1.6s infinite;
}
@keyframes sos-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220,53,69,.6); }
  70% { box-shadow: 0 0 0 12px rgba(220,53,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); }
}

.membership-card {
  background: linear-gradient(135deg, var(--roar-black) 0%, #2b2f36 60%, var(--roar-orange-dark) 140%);
}

.leaflet-marker-icon.rider-marker {
  filter: drop-shadow(0 0 3px rgba(0,0,0,.4));
}