:root {
  --lime: #c8ff00;
  --purple: #d946ef;
  --cyan: #00f0ff;
  --pink: #ff2d95;
  --bg: #05050a;
}

* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(200, 255, 0, 0.08), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(217, 70, 239, 0.06), transparent),
    radial-gradient(ellipse 50% 30% at 0% 100%, rgba(0, 240, 255, 0.04), transparent);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(200, 255, 0, 0.3);
  border-radius: 4px;
}

/* Neon text glow */
.glow-lime {
  text-shadow: 0 0 10px rgba(200, 255, 0, 0.6), 0 0 20px rgba(200, 255, 0, 0.3);
}
.glow-purple {
  text-shadow: 0 0 10px rgba(217, 70, 239, 0.6), 0 0 20px rgba(217, 70, 239, 0.3);
}

/* Card neon border */
.card-neon {
  background: linear-gradient(145deg, #12121c 0%, #0a0a12 100%);
  border: 1px solid rgba(200, 255, 0, 0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: all 0.25s ease;
}
.card-neon:active {
  border-color: rgba(200, 255, 0, 0.4);
  box-shadow: 0 0 20px rgba(200, 255, 0, 0.15), 0 4px 24px rgba(0,0,0,0.5);
}

/* Buttons */
.btn-lime {
  background: linear-gradient(135deg, #c8ff00 0%, #a8d900 100%);
  color: #0a0a12;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(200, 255, 0, 0.35);
  transition: all 0.2s ease;
}
.btn-lime:active {
  transform: scale(0.97);
  box-shadow: 0 0 12px rgba(200, 255, 0, 0.5);
}

.btn-outline-lime {
  border: 1.5px solid rgba(200, 255, 0, 0.5);
  color: #c8ff00;
  background: transparent;
  transition: all 0.2s ease;
}
.btn-outline-lime:active {
  background: rgba(200, 255, 0, 0.1);
  border-color: #c8ff00;
}

.btn-purple {
  background: linear-gradient(135deg, #d946ef 0%, #a21caf 100%);
  color: white;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(217, 70, 239, 0.35);
}

/* Input */
.input-neon {
  background: #12121c;
  border: 1px solid rgba(255,255,255,0.08);
  color: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-neon:focus {
  outline: none;
  border-color: rgba(200, 255, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.12);
}

/* Bottom nav */
.bottom-nav {
  background: rgba(10, 10, 18, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(200, 255, 0, 0.12);
}

/* Star rating */
.stars {
  color: #c8ff00;
  letter-spacing: -1px;
}

/* Safe area for notched phones */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 12px);
}
.safe-top {
  padding-top: env(safe-area-inset-top, 12px);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(200, 255, 0, 0.3); }
  50% { box-shadow: 0 0 22px rgba(200, 255, 0, 0.55); }
}
.pulse-lime {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

/* Hide scrollbar for horizontal filters */
.hide-scroll::-webkit-scrollbar {
  display: none;
}
.hide-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Image placeholder */
.img-placeholder {
  background: linear-gradient(135deg, #1a1a28 0%, #12121c 50%, #1a1a28 100%);
  background-size: 200% 200%;
}

/* Role badge */
.role-badge-rider {
  background: rgba(200, 255, 0, 0.12);
  color: #c8ff00;
  border: 1px solid rgba(200, 255, 0, 0.3);
}
.role-badge-owner {
  background: rgba(217, 70, 239, 0.12);
  color: #d946ef;
  border: 1px solid rgba(217, 70, 239, 0.3);
}


/* Cross-browser / mobile */
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, input, select, textarea { font-family: inherit; font-size: max(16px, 1em); }
img { max-width: 100%; height: auto; display: block; }
.safe-bottom { padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)); }
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
input[type="number"] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tariff-opt.border-lime { box-shadow: 0 0 0 1px #c8ff00; }
@supports not (padding: max(0px)) {
  .safe-bottom { padding-bottom: 0.5rem; }
}