* { box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body { -webkit-tap-highlight-color: transparent; }

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

#page-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  height: 100%;
  max-height: 100%;
}

.nav-btn { color: #9ca3af; min-width: 0; flex: 1; }
.nav-btn svg { transition: transform 0.15s; width: 24px; height: 24px; }
.nav-btn span { display: block; text-align: center; white-space: nowrap; }
.nav-btn.active { color: #16a34a; }
.nav-btn.active svg { transform: scale(1.15); }
.nav-btn.active span { color: #16a34a; font-weight: 700; }
.nav-btn:active svg { transform: scale(0.9); }
.nav-btn:hover { color: #16a34a; }

@keyframes storyNotifPop {
  0%   { transform: scale(0) rotate(-15deg); opacity:0; }
  60%  { transform: scale(1.3) rotate(8deg);  opacity:1; }
  100% { transform: scale(1)   rotate(0deg);  opacity:1; }
}

/* Cards */
.task-card { transition: transform 0.15s, box-shadow 0.15s; }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.task-card:active { transform: translateY(0); }

/* Badges */
.badge-volunteer { background: #dcfce7; color: #15803d; }
.badge-supported { background: #fef9c3; color: #a16207; }
.badge-open { background: #dbeafe; color: #1d4ed8; }
.badge-cleaning { background: #fce7f3; color: #be185d; }
.badge-pending { background: #fed7aa; color: #c2410c; }
.badge-done { background: #dcfce7; color: #15803d; }

/* Dirt level */
.dirt-low { background: #fef9c3; color: #a16207; border: 2px solid #fde047; }
.dirt-medium { background: #fed7aa; color: #c2410c; border: 2px solid #fb923c; }
.dirt-high { background: #fecaca; color: #b91c1c; border: 2px solid #f87171; }

/* Photo upload area */
.photo-upload { border: 2px dashed #86efac; background: #f0fdf4; cursor: pointer; transition: all 0.2s; }
.photo-upload:hover { border-color: #16a34a; background: #dcfce7; }

/* Timer ring */
.timer-ring { transition: stroke-dashoffset 1s linear; }

/* Animations */
@keyframes fadeIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
@keyframes pulse-green { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { box-shadow: 0 0 0 12px rgba(34,197,94,0); } }
@keyframes bounce-in { 0% { transform: scale(0.3); opacity:0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.95); } 100% { transform: scale(1); opacity:1; } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mapPulse { 0% { transform: translate(-50%,-50%) scale(0.5); opacity: 0.8; } 100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; } }
@keyframes mapPulse2 { 0% { transform: translate(-50%,-50%) scale(0.5); opacity: 0.5; } 100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; } }
@keyframes markerBounce { 0%,100% { transform:translateY(0); } 40% { transform:translateY(-10px); } 65% { transform:translateY(-4px); } }

.fade-in { animation: fadeIn 0.35s ease forwards; }
.slide-up { animation: slideUp 0.4s ease forwards; }
.bounce-in { animation: bounce-in 0.6s ease forwards; }
.pulse-green { animation: pulse-green 2s infinite; }
.spin-slow { animation: spin-slow 3s linear infinite; }

/* Scrollbar */
#page-container::-webkit-scrollbar { width: 3px; }
#page-container::-webkit-scrollbar-thumb { background: #bbf7d0; border-radius: 9999px; }

/* Input */
input, textarea, select { font-family: inherit; outline: none; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }

/* Button press */
button:active { opacity: 0.85; }

/* Feed like */
.like-btn.liked svg { fill: #ef4444; stroke: #ef4444; }

/* Progress bar */
.progress-bar { transition: width 0.5s ease; }

/* Slider */
input[type=range] { accent-color: #16a34a; }

/* Checkbox */
input[type=checkbox] { accent-color: #16a34a; }

/* Utility */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Skeleton shimmer */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}

/* Onboarding slide transitions */
#onboarding-root .onb-slide { transition: opacity 0.5s ease; }

/* Badge unlock overlay */
@keyframes badgePop {
  0%   { transform: scale(0.5) rotate(-10deg); opacity:0; }
  70%  { transform: scale(1.05) rotate(2deg);  opacity:1; }
  100% { transform: scale(1) rotate(0deg);     opacity:1; }
}
.badge-unlock-card { animation: badgePop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── PAGE TRANSITIONS ───────────────────────────────────────── */
@keyframes pageSlideIn  { from { opacity:0; transform:translateX(18px);  } to { opacity:1; transform:translateX(0);    } }
@keyframes pageSlideOut { from { opacity:1; transform:translateX(0);     } to { opacity:0; transform:translateX(-18px); } }
@keyframes pageFadeIn   { from { opacity:0; transform:translateY(10px);  } to { opacity:1; transform:translateY(0);    } }
.page-enter  { animation: pageSlideIn .28s cubic-bezier(.25,.46,.45,.94) both; }
.page-fade   { animation: pageFadeIn  .22s ease both; }

/* ── PULL TO REFRESH ────────────────────────────────────────── */
#ptr-indicator {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  z-index:999; display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:0 0 20px 20px;
  padding:6px 20px; font-size:12px; font-weight:700; color:#16a34a;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  transition:transform .3s ease; transform:translate(-50%,-100%);
}
#ptr-indicator.ptr-pulling  { transform:translate(-50%, 0); }
#ptr-indicator.ptr-loading  { transform:translate(-50%, 0); }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.ptr-spinner { width:16px;height:16px;border:2.5px solid #bbf7d0;border-top-color:#16a34a;border-radius:50%;animation:ptr-spin .7s linear infinite; }

/* ── STORY RING ─────────────────────────────────────────────── */
.story-ring-unseen { background: conic-gradient(#16a34a, #22c55e, #86efac, #16a34a); }
.story-ring-seen   { background: conic-gradient(#d1d5db, #e5e7eb, #d1d5db, #e5e7eb); }
@keyframes storyPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
.story-ring-unseen { animation: storyPulse 2.4s ease-in-out infinite; }

/* ── SKELETON CARDS ─────────────────────────────────────────── */
.sk-line  { height:12px; border-radius:6px; margin-bottom:8px; }
.sk-block { border-radius:14px; }
.sk-circle{ border-radius:50%; }

/* ── COMMENT PANEL ──────────────────────────────────────────── */
#comment-panel { transition: transform .32s cubic-bezier(.25,.46,.45,.94); }
#comment-panel.open  { transform: translateY(0); }
#comment-panel.close { transform: translateY(100%); }

/* ── STREAK CARD ────────────────────────────────────────────── */
@keyframes streakFlame { 0%,100%{transform:scale(1) rotate(-3deg)} 50%{transform:scale(1.15) rotate(3deg)} }
.streak-flame { animation: streakFlame 1.2s ease-in-out infinite; display:inline-block; }

/* ── SEARCH BAR ─────────────────────────────────────────────── */
.search-bar { transition: box-shadow .2s; }
.search-bar:focus-within { box-shadow: 0 0 0 3px rgba(22,163,74,.15); }

/* ── AVATAR RING UPLOAD ─────────────────────────────────────── */
.avatar-upload-ring { position:relative; cursor:pointer; }
.avatar-upload-ring::after {
  content:'📷';
  position:absolute; bottom:2px; right:2px;
  width:24px; height:24px; border-radius:50%;
  background:#fff; border:2px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:24px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}

/* ── TASK EXPIRY BADGE ──────────────────────────────────────── */
@keyframes expiryBlink { 0%,100%{opacity:1} 50%{opacity:.4} }
.task-expiry-urgent { animation: expiryBlink 1s ease-in-out infinite; }

/* ── BOTTOM SHEET ───────────────────────────────────────────── */
.bottom-sheet-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:990; }
.bottom-sheet         { position:fixed;bottom:0;left:0;right:0;z-index:991;max-height:85dvh;overflow-y:auto;border-radius:24px 24px 0 0;background:#fff;box-shadow:0 -8px 40px rgba(0,0,0,.14);transform:translateY(100%);transition:transform .32s cubic-bezier(.25,.46,.45,.94); }
.bottom-sheet.show    { transform:translateY(0); }

/* ── NOTIFICATION DOT ───────────────────────────────────────── */
@keyframes notifPing { 0%{transform:scale(1)} 50%{transform:scale(1.5);opacity:.4} 100%{transform:scale(1);opacity:0} }
.notif-ping { position:absolute;width:8px;height:8px;border-radius:50%;background:#ef4444; }
.notif-ping::before { content:'';position:absolute;inset:-2px;border-radius:50%;background:#ef4444;animation:notifPing 1.5s ease-out infinite; }