:root {
  /* ── Core Palette — Professional Slate + Blue ── */
  --blue:        #2563EB;   /* professional royal blue — primary CTA */
  --blue-dark:   #1D4ED8;   /* deeper blue */
  --blue-light:  #3B82F6;   /* medium blue */
  --blue-soft:   #EFF6FF;   /* very light blue tint */
  --accent:      #F59E0B;   /* amber — "360", stars, highlights */
  --accent-soft: #FEF9C3;   /* pale yellow */

  /* ── Semantic Aliases (used throughout) ── */
  --primary:       var(--blue);
  --primary-dark:  var(--blue-dark);
  --primary-light: var(--blue-light);
  --secondary:     #64748B;   /* slate */
  --highlight:     #93C5FD;   /* light blue */
  --orange:        #F97316;

  /* Keep indigo aliases for any legacy code that still references them */
  --indigo:        var(--blue);
  --indigo-dark:   var(--blue-dark);
  --indigo-light:  var(--blue-light);
  --indigo-soft:   var(--blue-soft);
  --border-indigo: rgba(37,99,235,0.18);
  --shadow-indigo: 0 4px 20px rgba(37,99,235,0.22);

  /* ── Status Colors ── */
  --success:      #10B981;
  --success-soft: #D1FAE5;
  --danger:       #EF4444;
  --danger-soft:  #FEE2E2;
  --warning:      #F59E0B;
  --warning-soft: #FEF3C7;

  /* ── Surface Colors ── */
  --bg-body:   #F4F6F9;   /* overall page background — cool gray */
  --bg-nav:    #0F172A;   /* deep slate nav/header */
  --bg-panel:  #FFFFFF;   /* white panels */
  --bg-card:   #FFFFFF;   /* white cards */
  --bg-muted:  #F8FAFC;   /* very light gray alternate rows */
  --bg-dark:   #0F172A;   /* deep slate (used for hero/nav) */

  /* ── Text ── */
  --text:          #0F172A;   /* near-black heading — slate-900 */
  --text-body:     #334155;   /* body text — slate-700 */
  --subtext:       #64748B;   /* secondary / muted — slate-500 */
  --text-light:    #FFFFFF;   /* white — on dark backgrounds */
  --subtext-light: rgba(255,255,255,0.65);

  /* ── Borders & Dividers ── */
  --border:        #E2E8F0;   /* light slate — on white backgrounds */
  --border-white:  rgba(255, 255, 255, 0.12); /* on dark backgrounds */

  /* ── Shadows ── */
  --shadow-xs:   0 1px 4px rgba(15,23,42,0.06);
  --shadow-sm:   0 2px 12px rgba(15,23,42,0.08);
  --shadow-md:   0 4px 24px rgba(15,23,42,0.11);
  --shadow-lg:   0 8px 40px rgba(15,23,42,0.14);
  --shadow-glow:      var(--shadow-indigo);
  --shadow-glow-gold: 0 4px 20px rgba(245,158,11,0.28);

  /* ── Radius ── */
  --radius:    14px;
  --radius-lg: 20px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-body);
  color: var(--text-body);
  line-height: 1.6;
  padding-bottom: 70px; /* mobile nav clearance */
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--text);
}
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ── Navigation ── */
.p360-nav {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  position: sticky; top: 0; z-index: 100;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 16px rgba(0,0,0,0.20);
}
.p360-nav .container { display: flex; justify-content: space-between; align-items: center; }
.p360-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 22px; color: white; display: inline-block;
}
.logo-patna { color: white; }
.logo-360   { color: var(--accent); }
.logo-tagline { display: none; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-link { font-weight: 600; color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.nav-link:hover { color: white; }

/* ── Buttons ── */
.btn-primary, .btn-success, .btn-orange, .btn-outline, .btn-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px; font-weight: 600; cursor: pointer;
  transition: all 0.22s; border: none; text-decoration: none; font-size: 0.9rem;
}
.btn-primary {
  background: var(--blue);
  color: white;
  box-shadow: 0 2px 10px rgba(37,99,235,0.28);
}
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--shadow-indigo); color: white; }
.btn-outline {
  background: white; border: 1.5px solid var(--border);
  color: var(--text); box-shadow: var(--shadow-xs);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.btn-success  { background: var(--success); color: white; box-shadow: 0 2px 10px rgba(16,185,129,0.3); }
.btn-orange   { background: var(--accent);  color: white; box-shadow: 0 2px 10px rgba(245,158,11,0.3); }
.btn-action   { background: white; border: 1.5px solid var(--border); color: var(--text-body); }
.btn-action:hover { border-color: var(--blue); color: var(--blue); }
.btn-sm { padding: 7px 14px; font-size: 0.82rem; border-radius: 8px; }

/* ── Forms ── */
.form-group   { margin-bottom: 18px; }
.form-label   { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.875rem; color: var(--text); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: white; color: var(--text);
  font-size: 0.95rem; font-family: 'Inter', sans-serif; transition: 0.2s;
}
.form-input::placeholder  { color: var(--subtext); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.form-select  { cursor: pointer; }
.form-textarea { resize: vertical; min-height: 100px; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 700;
}
.badge-success { background: var(--success-soft); color: #065F46; }
.badge-danger  { background: var(--danger-soft);  color: #991B1B; }
.badge-warning { background: var(--warning-soft); color: #92400E; }
.badge-primary { background: var(--blue-soft);    color: var(--blue-dark); }

/* ── Toast ── */
#toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 99999;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toast {
  padding: 13px 18px; border-radius: 12px; font-weight: 600; font-size: 0.9rem;
  max-width: 340px; pointer-events: auto; color: white;
  box-shadow: var(--shadow-md);
  transform: translateX(120%); transition: transform 0.32s cubic-bezier(0.175,0.885,0.32,1.275);
}
.toast.show    { transform: translateX(0); }
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.info    { background: var(--blue); }
.toast.warning { background: var(--warning); }

/* ── Mobile Bottom Navigation ── */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: white;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.07);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
@media (max-width: 767px) { .mobile-bottom-nav { display: flex; } }
.mobile-nav-items {
  display: flex; width: 100%;
  justify-content: space-around; align-items: center;
}
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; border-radius: 10px; text-decoration: none;
  color: var(--subtext); font-size: 0.65rem; font-weight: 600;
  transition: all 0.2s; min-width: 50px; text-align: center;
  position: relative;
}
.mobile-nav-item .nav-icon-img { font-size: 1.3rem; line-height: 1; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; }
.mobile-nav-item.active {
  color: var(--blue);
}
.mobile-nav-item.active .nav-icon-img { transform: scale(1.12); color: var(--blue); }
.mobile-nav-item.active .mobile-nav-label { color: var(--blue); }

.nav-item-nearby {
  top: -22px;
}
.nav-item-nearby .nav-icon-img {
  background: #8B5CF6; /* Purple */
  width: 56px; height: 56px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(139,92,246,0.4);
  border: 4px solid white;
  margin-bottom: 2px;
}
.nav-item-nearby.active .nav-icon-img {
  transform: scale(1.05); background: #7C3AED; color: white;
}
.nav-item-nearby .mobile-nav-label {
  color: #8B5CF6; font-weight: 700; margin-top: -4px;
}

/* ── PWA Install Banner ── */
.pwa-install-banner {
  position: fixed; bottom: 80px; left: 16px; right: 16px;
  background: white; border: 1.5px solid var(--border);
  border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow-lg); z-index: 9000;
  max-width: 400px; margin: 0 auto;
  transform: translateY(120%); transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.pwa-install-banner.show { transform: translateY(0); }
.pwa-install-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pwa-install-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; color: var(--text); }
.pwa-install-close { background: var(--bg-muted); border: none; color: var(--subtext); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.pwa-install-close:hover { background: var(--border); }
.pwa-install-body { color: var(--subtext); font-size: 0.88rem; margin-bottom: 14px; line-height: 1.5; }
.pwa-install-actions { display: flex; gap: 10px; }
.pwa-install-btn { flex: 1; padding: 10px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.2s; border: none; font-family: 'Inter', sans-serif; font-size: 0.88rem; }
.pwa-install-btn.primary { background: var(--blue); color: white; }
.pwa-install-btn.primary:hover { background: var(--blue-dark); }
.pwa-install-btn.secondary { background: var(--bg-muted); color: var(--subtext); border: 1px solid var(--border); }
.pwa-install-btn.secondary:hover { background: var(--border); }
@media (min-width: 768px) { .pwa-install-banner { bottom: 20px; } }

/* ── Utility ── */
.text-muted   { color: var(--subtext); }
.text-accent  { color: var(--accent); }
.text-primary { color: var(--primary); }
.section-title    { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.section-subtitle { color: var(--subtext); margin-top: 6px; }
.section-title-sm { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 16px; }