:root {
  --bg: #0d0a18;
  --bg-soft: #161126;
  --card: rgba(255, 255, 255, 0.08);
  --card-solid: #18132a;
  --text: #f6f3ff;
  --muted: #b8b3cb;
  --primary: #8b5cf6;
  --primary-2: #a78bfa;
  --danger: #f87171;
  --border: rgba(255, 255, 255, 0.14);
  --shadow: 0 12px 30px rgba(6, 3, 14, 0.5);
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --control-h: 46px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 30% -10%, #2a1a52, var(--bg) 45%);
  color: var(--text);
  overflow: hidden;
}
#app {
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

button, input, select { font: inherit; }
button { cursor: pointer; }
i[data-lucide],
svg.lucide {
  display: inline-flex;
  vertical-align: middle;
}
button:disabled,
select:disabled,
input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.view { animation: rise .28s ease; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Landing */
.landing {
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 14px;
  padding: 24px;
}
.logo {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 30px;
  background: radial-gradient(circle at 25% 20%, #b39cff, #7047dc 72%);
  box-shadow: 0 16px 44px rgba(124, 58, 237, 0.55);
}
.landing h1 { font-size: 44px; letter-spacing: -0.02em; }
.landing p { color: var(--muted); margin-bottom: 14px; }

.btn {
  border: 0;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  background: var(--card);
  color: var(--text);
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn.primary {
  background: linear-gradient(135deg, #7c3aed, #9f7aea);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.5);
}
.btn.ghost {
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Onboarding */
.onboarding {
  height: 100%;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-screen {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
}
.auth-panel {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 12px;
}
.auth-panel .onboarding-actions {
  margin-top: 0;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  padding: 14px;
}
.onboarding h2 { font-size: 22px; line-height: 1.2; }
.subtle { color: var(--muted); font-size: 13px; }
.row { display: flex; gap: 8px; }
.onboarding-progress { display: grid; gap: 8px; }
.step-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.step-track { display: flex; align-items: center; gap: 8px; }
.step-dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #ddd5f8;
  background: #201a35;
  border: 1px solid var(--border);
}
.step-dot.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.step-line {
  height: 2px;
  flex: 1;
  background: #2f2848;
  border-radius: 999px;
}
.step-line.active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.onboarding-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.row input, .row select, .input {
  flex: 1;
  width: 100%;
  background: #0f0c1f;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 12px;
  outline: none;
  min-height: var(--control-h);
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag {
  background: rgba(139, 92, 246, 0.22);
  border: 1px solid rgba(139, 92, 246, 0.45);
  color: #efe9ff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tag button { border: 0; background: transparent; color: #fff; font-size: 13px; }
.pill-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  background: transparent;
  color: #d9d1f2;
  padding: 8px 12px;
  font-size: 12px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pill.active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(11, 5, 26, 0.35);
}
.pill[data-factor="Noise"].active { background: #7c3aed; }
.pill[data-factor="Light"].active { background: #eab308; color: #442902; }
.pill[data-factor="Chemicals"].active { background: #ef4444; }
.pill[data-factor="Crowds"].active { background: #3b82f6; }
.pill[data-factor="UV"].active { background: #f97316; }
.pill[data-factor="Air Quality"].active { background: #22c55e; }
.pill[data-factor="Temperature"].active { background: #14b8a6; }
.pill[data-factor="Pollen"].active { background: #ec4899; }

/* App Shell */
.shell {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.header {
  height: 56px;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.header h1 { text-align: center; font-size: 18px; letter-spacing: 0.17em; }
.header .icon {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.icon-spacer {
  width: 36px;
  height: 36px;
}
.main { min-height: 0; overflow: auto; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 1200;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: #130f23;
  border-right: 1px solid var(--border);
  z-index: 1300;
  transform: translateX(-100%);
  transition: transform .25s ease;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}
.drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drawer-item {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.drawer-section {
  margin: 2px 0;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.drawer-title { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.drawer-list { padding-left: 16px; display: grid; gap: 4px; }

.bottom-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(15, 12, 31, 0.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.bottom-nav button {
  border: 0;
  border-radius: var(--radius-md);
  padding: 8px 6px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  gap: 2px;
  font-size: 11px;
}
.bottom-nav button.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.42), rgba(139, 92, 246, 0.22));
  box-shadow: 0 8px 20px rgba(87, 44, 170, 0.35);
  transform: translateY(-1px);
}
.nav-icon { font-size: 18px; line-height: 1; display: inline-flex; }

/* Map */
.map-wrap {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(320px, 65vh) auto;
}
.map-top-card {
  margin: 10px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: rgba(25, 17, 45, 0.8);
  display: grid;
  gap: 10px;
}
.map-wrap.nav-mode .map-top-card,
.map-wrap.nav-mode .filters-panel {
  display: none !important;
}
.map-wrap.nav-mode {
  grid-template-rows: 1fr;
}
.search-main-row {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.search-suggestions {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  background: rgba(13, 10, 26, 0.96);
  max-height: 210px;
  overflow: auto;
}
.search-suggestion-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #ece7ff;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
}
.search-suggestion-item + .search-suggestion-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.search-suggestion-item:hover {
  background: rgba(139, 92, 246, 0.2);
}
.search-main-row input {
  background: #0f0c1f;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 0 14px;
  min-height: 52px;
  font-size: 16px;
}
.icon-btn {
  width: 52px;
  min-height: 52px;
  border-radius: var(--radius-md);
}
.nav-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.nav-action-row .btn {
  min-height: 46px;
}
.route-preview-sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
  padding: 10px 14px 14px;
  z-index: 420;
  display: grid;
  gap: 10px;
  color: #111;
}
.map-wrap.nav-mode .route-preview-sheet {
  display: none;
}
.rps-handle {
  display: grid;
  place-items: center;
  height: 12px;
}
.rps-handle span {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #ccc;
}
.rps-info {
  display: grid;
  gap: 3px;
}
.rps-time-dist {
  font-size: 20px;
  font-weight: 700;
  color: #111;
}
.rps-dist-text {
  font-size: 15px;
  font-weight: 400;
  color: #555;
}
.rps-via {
  font-size: 13px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rps-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.rps-cancel {
  background: #f0f0f0;
  color: #333;
  border: 1px solid #ddd;
  min-height: 46px;
  border-radius: 12px;
  padding: 0 16px;
  font-weight: 600;
}
.rps-cancel:hover { background: #e4e4e4; }
.rps-start {
  min-height: 46px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}
.city-events-feed {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.city-event-chip {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(64, 42, 120, 0.55);
  color: #efe9ff;
  font-size: 12px;
  min-height: 28px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.city-event-chip.high {
  background: rgba(185, 53, 53, 0.35);
  border-color: rgba(252, 165, 165, 0.45);
}

.map-stage {
  position: relative;
}

.map-wrap.nav-mode .map-stage {
  height: 100%;
}

#map {
  height: 100%;
  width: 100%;
  min-height: 320px;
}

.nav-sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: rgba(16, 12, 28, 0.92);
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 430;
  display: none;
  gap: 10px;
}
.map-wrap.nav-mode .nav-sheet {
  display: grid;
  left: 8px;
  right: 8px;
  border-radius: 14px;
  background: rgba(9, 12, 20, 0.92);
}

/* ── Navigation overlay: banner + ETA bar + FAB ──────────────────── */
.nav-banner {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: none;
  align-items: center;
  gap: 12px;
  background: #1a56db;
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.32);
  z-index: 430;
  animation: slideDown .25s ease;
}
.map-wrap.nav-mode .nav-banner { display: flex; }
.nav-banner-loading {
  background: rgba(16, 12, 28, 0.92);
  font-size: 14px;
  gap: 8px;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-banner-turn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.nav-banner-text { flex: 1; min-width: 0; }
.nav-banner-instruction {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-banner-dist {
  font-size: 12px;
  opacity: 0.82;
  margin-top: 2px;
}
.nav-banner-badge {
  flex-shrink: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  font-size: 11px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Bottom ETA bar */
.nav-eta-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.22);
  padding: 14px 16px;
  z-index: 430;
  animation: slideUp .25s ease;
}
.map-wrap.nav-mode .nav-eta-bar { display: flex; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-eta-left, .nav-eta-center, .nav-eta-right {
  flex: 1;
  display: grid;
  gap: 2px;
  text-align: center;
}
.nav-eta-left { text-align: left; }
.nav-eta-right { text-align: right; }
.nav-eta-time {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  line-height: 1;
}
.nav-eta-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nav-end-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #f0f0f0;
  color: #333;
  display: grid;
  place-items: center;
  margin-left: 8px;
}
.nav-end-btn:hover { background: #e0e0e0; }

/* Recenter FAB */
.nav-recenter-fab {
  position: absolute;
  right: 14px;
  bottom: calc(100px + env(safe-area-inset-bottom));
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,0.22);
  color: #1a56db;
  display: none;
  place-items: center;
  z-index: 435;
}
.map-wrap.nav-mode .nav-recenter-fab { display: grid; }

.map-wrap.nav-mode #map {
  min-height: calc(100vh - 56px - 72px);
}
.map-factor-marker {
  animation: markerPop .22s ease-out;
  transform-origin: center;
}
@keyframes markerPop {
  from { transform: scale(0.72); opacity: 0.65; }
  to { transform: scale(1); opacity: 1; }
}
.filters-panel {
  padding: 10px;
  border-top: 1px solid var(--border);
  background: rgba(15, 12, 31, 0.92);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.filters-panel summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #d7cff5;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.filters-panel summary::-webkit-details-marker { display: none; }

/* Logs */
.logs { padding: 12px; display: grid; gap: 10px; }
.logs h2, .conditions h2 { font-size: 22px; }
.search-row { display: grid; grid-template-columns: 1fr 110px 100px; gap: 8px; }
.search-row .input, .search-row select {
  background: #0f0c1f;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 10px;
}
.event-list { display: grid; gap: 8px; }
.event {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.event small { color: var(--muted); }
.event .coord { color: #9f98bd; font-size: 11px; }
.event .x { border: 0; background: transparent; color: var(--danger); font-size: 18px; }
.empty { text-align: center; color: var(--muted); padding: 26px 12px; }

/* Conditions */
.conditions { padding: 12px; display: grid; gap: 10px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}
.score {
  text-align: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.45), rgba(99, 63, 255, 0.22));
}
.score .big { font-size: 56px; font-weight: 800; line-height: 1; margin-top: 4px; }
.cond-grid { display: grid; gap: 12px; margin-top: 4px; }
.cond-card {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}
.cond-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #2a2344;
}
.cond-card p { color: var(--muted); font-size: 12px; }

/* Loading & error */
.loading {
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 28px;
}
.spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fecaca;
  border-radius: 12px;
  padding: 12px;
}

/* ── Micro-interactions ─────────────────────────────────────── */
button:active:not(:disabled) { transform: scale(0.97); }
.btn { transition: background .15s, box-shadow .15s, transform .1s; }
.event { transition: background .15s, box-shadow .15s; cursor: pointer; }
.event:hover { background: rgba(255,255,255,0.12); box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
.cond-card { transition: box-shadow .15s; }
.cond-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.pill { transition: background .14s, color .14s, transform .1s; }
.pill:active { transform: scale(0.96); }
.search-no-results {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
}

/* ── Favorites ─────────────────────────────────────────────── */
.fav-list { display: grid; gap: 6px; margin-bottom: 4px; }
.fav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fav-load {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  text-align: left;
  min-height: 46px;
}
.fav-load:hover { background: rgba(139,92,246,0.18); }
.fav-icon { flex-shrink: 0; color: var(--primary); }
.fav-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-remove { padding: 0 14px; min-height: 46px; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; }

/* ── Logs section header ───────────────────────────────────── */
.logs-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-top: 4px;
}
.logs-count {
  background: rgba(139,92,246,0.25);
  color: var(--primary-2);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  margin-right: auto;
}
.btn-fav-filter {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
}
.btn-fav-filter.active {
  background: rgba(234,179,8,0.2);
  border-color: rgba(234,179,8,0.5);
  color: #fde68a;
}

/* ── Event starred state ───────────────────────────────────── */
.event { grid-template-columns: 1fr auto; }
.event-main { display: grid; gap: 2px; }
.event-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.event-star {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 2px;
  display: grid;
  place-items: center;
}
.event-star.starred { color: #facc15; }

/* ── API error banner ──────────────────────────────────────── */
.api-error-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(23, 18, 40, 0.96);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fecaca;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: slideDown .22s ease;
  white-space: nowrap;
}
.api-error-banner button {
  border: 0;
  background: transparent;
  color: #fecaca;
  padding: 0 2px;
  display: grid;
  place-items: center;
}

/* Skeleton loading */
.skeleton-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.skeleton-card {
  height: 72px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skeleton-card.tall { height: 110px; }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.rps-calculating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #555;
  font-weight: 600;
}
.rps-calculating i { animation: spin .8s linear infinite; }

/* Modal */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  display: grid;
  place-items: center;
  z-index: 1200;
  padding: 14px;
}
.modal {
  width: 100%;
  max-width: 380px;
  background: #140f24;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.modal h3 { font-size: 18px; }
.modal .coords { color: var(--muted); font-size: 12px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.toast-notice {
  position: fixed;
  left: 50%;
  bottom: calc(82px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  max-width: min(90vw, 420px);
  width: max-content;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(23, 14, 43, 0.95);
  color: #efe9ff;
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow: var(--shadow);
  font-size: 13px;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 2200;
}
.toast-notice.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 390px) {
  .search-row { grid-template-columns: 1fr; }
  .search-main-row {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .nav-action-row { grid-template-columns: 1fr; }
}