/* JandQ Rider — theme tokens & PWA polish */

:root {
  --jq-navy: #0f2744;
  --jq-navy-mid: #1e406e;
  --jq-blue: #2563eb;
  --jq-blue-light: #3b82f6;
  --jq-amber: #f59e0b;
  --jq-amber-dark: #d97706;
  --jq-surface: #f4f7fb;
  --jq-card: #ffffff;
  --jq-text: #0f172a;
  --jq-muted: #64748b;
  --jq-radius: 1rem;
  --jq-shadow: 0 4px 24px rgba(15, 39, 68, 0.08);
  --jq-shadow-lg: 0 12px 40px rgba(15, 39, 68, 0.14);
}

body {
  background: var(--jq-surface);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(37, 99, 235, 0.07), transparent),
    radial-gradient(ellipse 80% 50% at 100% 50%, rgba(245, 158, 11, 0.04), transparent);
}

.ra-splash {
  transition: opacity 0.5s ease, visibility 0.5s ease;
  background: linear-gradient(145deg, var(--jq-navy) 0%, var(--jq-navy-mid) 45%, var(--jq-blue) 100%);
}

.ra-splash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ra-splash-logo-glow {
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35), var(--jq-shadow-lg);
}

.ra-topbar-gradient {
  background: linear-gradient(135deg, var(--jq-navy) 0%, var(--jq-navy-mid) 50%, var(--jq-blue) 100%);
}

.ra-hero-gradient {
  background: linear-gradient(135deg, var(--jq-navy) 0%, #1d4ed8 55%, var(--jq-blue-light) 100%);
  box-shadow: var(--jq-shadow-lg);
}

.ra-btn-accent {
  background: linear-gradient(135deg, var(--jq-amber) 0%, var(--jq-amber-dark) 100%);
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.ra-btn-accent:hover {
  filter: brightness(1.05);
}

.ra-card {
  background: var(--jq-card);
  border: 1px solid rgba(15, 39, 68, 0.06);
  border-radius: var(--jq-radius);
  box-shadow: var(--jq-shadow);
}

.ra-install-card-gradient {
  background: linear-gradient(135deg, var(--jq-navy) 0%, var(--jq-blue) 70%, #1e40af 100%);
  box-shadow: var(--jq-shadow-lg);
}

.ra-notif-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--jq-amber);
  border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--jq-navy);
}

.ra-nav-active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(245, 158, 11, 0.08));
  color: var(--jq-blue);
}

@keyframes ra-slide-up {
  from {
    transform: translateY(1rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ra-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.ra-install-animate {
  animation: ra-slide-up 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (display-mode: standalone) {
  .ra-topbar-safe {
    padding-top: max(env(safe-area-inset-top), 0.5rem);
  }
}