/* ============================================================
   NYUMBAFIND — BASE RESET & TYPOGRAPHY
============================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

/* Remove 300ms tap delay on mobile */
html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}
button,a,[onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* Prevent text-selection flash on fast taps */
button,.role-card,.listing-card,.plan-card,.prem-card,.tab-btn,.back-btn {
  -webkit-user-select: none;
  user-select: none;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  transition: background .3s, color .3s;
}
button  { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { text-decoration: none; color: inherit; }

::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ---- Screens ---- */
.screen        { display: none; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

@keyframes fadeUp  { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes float   { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
@keyframes shimmer { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } }
@keyframes spin    { to { transform:rotate(360deg) } }
@keyframes pillIn  { from { opacity:0; transform:scale(.8) } to { opacity:1; transform:scale(1) } }
@keyframes slideUp { from { transform:translateY(100%) } to { transform:translateY(0) } }

.fade-up { animation: fadeUp .35s ease both; }

/* ---- Offline bar ---- */
#offline-bar {
  display: none; position: fixed; top:0; left:0; right:0; z-index: 999;
  background: var(--night); color: var(--sky-light);
  font-size: 12px; font-weight: 600; padding: 10px 16px;
  text-align: center; border-bottom: 2px solid var(--sky);
}
#offline-bar.show { display: block; }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--navy); color: #E0F2FE;
  padding: 11px 22px; border-radius: 24px;
  font-size: 12px; font-weight: 600; z-index: 500;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.toast.show    { transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--moss); }
.toast.error   { background: var(--danger); }

/* ---- Spinner ---- */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border); border-top-color: var(--sky);
  border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto;
}
.loading-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 40px 20px; color: var(--subtext); font-size: 13px;
}