html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.glass-panel {
  background: rgba(18, 29, 23, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-card {
  background: rgba(24, 39, 30, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card.hoverable:hover { border-color: rgba(52, 211, 153, 0.4); transform: translateY(-2px); }

/* Form controls */
.bg-input {
  width: 100%;
  background: #0C140F;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.bg-input::placeholder { color: #64748b; }
.bg-input:focus { border-color: #F43F5E; }
.bg-input.invalid { border-color: #FB7185; }
.bg-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #cbd5e1; margin-bottom: 0.5rem; }
.bg-error { font-size: 0.72rem; color: #FDA4AF; margin-top: 0.35rem; }
.bg-hint  { font-size: 0.72rem; color: #64748b; margin-top: 0.35rem; }
select.bg-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
select.bg-input option { background: #0C140F; color: #fff; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 1rem; font-weight: 700; font-size: 0.875rem; color: #fff;
  background: linear-gradient(90deg, #F43F5E, #E11D48);
  box-shadow: 0 0 25px -4px rgba(244, 63, 94, 0.35);
  transition: opacity 0.2s, transform 0.1s;
}
.btn-primary:hover { opacity: 0.95; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 1rem; font-weight: 700; font-size: 0.875rem; color: #e2e8f0;
  background: rgba(24, 39, 30, 0.8); border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s, color 0.2s, transform 0.1s;
}
.btn-secondary:hover { background: #23382B; color: #fff; }
.btn-secondary:active { transform: scale(0.98); }
.btn-ghost { font-size: 0.75rem; font-weight: 700; color: #FB7185; }
.btn-ghost:hover { color: #FDA4AF; }

.choice-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.75rem; border-radius: 1rem; background: #0C140F; border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.choice-card:hover { border-color: rgba(255, 255, 255, 0.2); }
.choice-card:has(input:checked) { border-color: #F43F5E; background: rgba(244, 63, 94, 0.1); }
.choice-card.moss:has(input:checked) { border-color: #6EE7B7; background: rgba(52, 211, 153, 0.1); }

.pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; border: 1px solid transparent; }
.pill-moss  { background: rgba(52, 211, 153, 0.15); color: #6EE7B7; border-color: rgba(52, 211, 153, 0.3); }
.pill-rose  { background: rgba(244, 63, 94, 0.15); color: #FB7185; border-color: rgba(244, 63, 94, 0.3); }
.pill-amber { background: rgba(245, 158, 11, 0.15); color: #FBBF24; border-color: rgba(245, 158, 11, 0.3); }
.pill-slate { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.25); }

/* Nav */
.nav-btn { padding: 0.375rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: #94a3b8; transition: all 0.2s; white-space: nowrap; }
.nav-btn:hover { color: #fff; background: rgba(24, 39, 30, 0.5); }
.nav-btn.active { color: #fff; background: rgba(35, 56, 43, 0.8); }
/* Phone menu rows: 48px tap targets */
.mnav-item { display: flex; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0.5rem 0.75rem; border-radius: 0.875rem; font-size: 0.9rem; font-weight: 600; color: #cbd5e1; transition: background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; }
.mnav-item + .mnav-item { margin-top: 2px; }
.mnav-item:hover, .mnav-item:active { background: rgba(35, 56, 43, 0.5); color: #fff; }
.mnav-item.active { background: rgba(35, 56, 43, 0.8); color: #fff; box-shadow: inset 3px 0 0 #F43F5E; }
.mnav-ico { width: 2rem; height: 2rem; border-radius: 0.625rem; background: rgba(12, 20, 15, 0.9); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
#mobileMenu:not(.hidden) { animation: fadeIn 0.18s ease-out; }

/* Map */
@keyframes radar-pulse {
  0% { transform: scale(0.7); opacity: 1; }
  50% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(0.7); opacity: 0; }
}
.radar-beacon { animation: radar-pulse 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; transform-origin: center; transform-box: fill-box; }
.map-viewport { background: radial-gradient(circle at 50% 50%, #0D1812 0%, #060B08 100%); cursor: grab; touch-action: none; position: relative; overflow: hidden; }
.map-viewport:active { cursor: grabbing; }

/* View transitions */
.view-enter { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(52, 211, 153, 0.25); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(52, 211, 153, 0.45); }

/* Chat bubbles */
.bubble { max-width: 85%; padding: 0.875rem; border-radius: 1rem; font-size: 0.75rem; line-height: 1.6; }
.bubble-me { background: linear-gradient(90deg, #E11D48, #F43F5E); color: #fff; border-top-right-radius: 0; box-shadow: 0 0 25px -4px rgba(244, 63, 94, 0.35); }
.bubble-them { background: #18271E; color: #e2e8f0; border-top-left-radius: 0; border: 1px solid rgba(255, 255, 255, 0.05); }

.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 0.75rem; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }