:root {
  --cream: #fef6ed;
  --cream-2: #fdf3e3;
  --ink: #0f172a;
}

html, body { background: var(--cream); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { color: var(--ink); }

.bg-cream { background-color: var(--cream); }

.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.25rem;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}

.tab.active {
  color: #0f172a;
  font-weight: 700;
}
.tab.active i { color: #ec4899; }

.btn-primary { background-image: linear-gradient(135deg, #f97316, #ec4899); color:#fff; font-weight:600; padding: 0.7rem 1.1rem; border-radius:1rem; box-shadow: 0 6px 16px rgba(236,72,153,0.25);}
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background:#fff; border:1px solid #e5e7eb; color:#0f172a; font-weight:600; padding: 0.6rem 1rem; border-radius: 0.9rem; }
.btn-ghost { color:#475569; padding: 0.5rem 0.8rem; border-radius:0.8rem; }
.btn-ghost:hover { background: rgba(0,0,0,0.04); }
.btn-danger { background:#ef4444; color:#fff; font-weight:600; padding: 0.6rem 1rem; border-radius: 0.9rem; }

.input { width:100%; padding: 0.7rem 0.9rem; border-radius: 0.9rem; border:1px solid #e5e7eb; background:#fff; font-size:0.95rem; }
.input:focus { outline:none; border-color:#fb7185; box-shadow: 0 0 0 3px rgba(251,113,133,0.18); }

.chip { display:inline-flex; align-items:center; gap:0.4rem; padding: 0.3rem 0.7rem; border-radius:9999px; font-size:0.75rem; font-weight:600; background:rgba(249,115,22,0.10); color:#c2410c; }
.chip-green { background:rgba(16,185,129,0.10); color:#047857; }
.chip-violet { background:rgba(139,92,246,0.10); color:#6d28d9; }
.chip-blue { background:rgba(59,130,246,0.10); color:#1d4ed8; }
.chip-pink { background:rgba(236,72,153,0.10); color:#be185d; }

.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size:200% 100%; animation: pulse 1.4s infinite; border-radius:1rem; }
@keyframes pulse { 0% { background-position:200% 0;} 100% { background-position:-200% 0;} }

.fade-in { animation: fadeIn 220ms ease-out; }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform:none;} }

.toast { background: rgba(15,23,42,0.92); color:#fff; padding: 0.6rem 1rem; border-radius:0.9rem; font-size:0.9rem; box-shadow: 0 8px 22px rgba(0,0,0,0.15); pointer-events:auto; }

.modal-backdrop { position: fixed; inset:0; background: rgba(15,23,42,0.45); backdrop-filter: blur(2px); display:grid; place-items:center; z-index:50; padding: 1rem;}
.modal-card { background:#fff; border-radius: 1.25rem; max-width: 28rem; width: 100%; max-height: 90vh; overflow:auto; padding: 1.25rem; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }

.tutorial-spot { position: fixed; border:3px solid #f97316; border-radius: 1rem; box-shadow: 0 0 0 9999px rgba(15,23,42,0.55); z-index:60; pointer-events:none; transition: all 250ms ease; }

#map { width:100%; height: 260px; border-radius: 1rem; overflow:hidden; }

.skeleton-overlay { position:absolute; inset:0; pointer-events:none; }

.tabbar-active { color:#0f172a; font-weight: 700; }
.tabbar-active i { color: #ec4899; }

@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}
.animate-scan {
  animation: scan 2s linear infinite;
}