/* Shared visual language for every ToppedUp page — glass panels, background
   blobs, scrollbars, fonts. Page-specific styles (Leaflet overrides, etc.)
   stay in that page's own <style> block; anything here is used everywhere. */

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  animation: pageFadeIn 0.24s ease both;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.page-exit {
  opacity: 0;
  transition: opacity 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.page-exit { transition: none; opacity: 1; }
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}

.glass-panel {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

header.glass-panel::before {
  content: '';
  display: block;
  height: env(safe-area-inset-top);
}

.safe-area-top {
  height: env(safe-area-inset-top);
  flex-shrink: 0;
}

.glass-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.45;
  z-index: 0;
  border-radius: 50%;
  animation: float 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes float {
  0% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(30px, -40px) scale(1.1); }
  100% { transform: translate(-20px, 20px) scale(0.95); }
}

.brand-logo { max-height: 22px; max-width: 75px; object-fit: contain; }

.settings-input {
  background: #020617;
  border: 1px solid rgb(30 41 59);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  text-align: right;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  transition: border-color 0.15s ease;
  outline: none;
}
.settings-input:focus { border-color: #4CC3C6; }

.settings-select {
  appearance: none;
  -webkit-appearance: none;
  background: #020617;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  border: 1px solid rgb(30 41 59);
  border-radius: 0.5rem;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.settings-select:focus { border-color: #4CC3C6; }
.settings-select option { background: #020617; color: white; }

summary::-webkit-details-marker { display: none; }

.slide-enter { animation: slideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateX(20px); }
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .slide-enter { animation: none; opacity: 1; transform: none; }
}