/* ── Tokens & Reset ── */
:root {
  --teal:    #3BBFB8;
  --teal-lt: #5DD3CC;
  --teal-dk: #2A9E98;
  --purple:  #C04FC8;
  --purple-lt: #D472DB;
  --cream:   #F9E8DE;
  --dark-bg: #111316;
  --dark-card: #1C2028;
  --txt:     #111316;
  --txt-muted: #8A8F9E;
}

body {
  background: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--txt);
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ddd; border-radius: 99px; }

/* ── App Container (Mobile Simulator) ── */
.page-wrap { padding: 20px; }
.phone-wrap {
  width: 100%; max-width: 400px; height: 850px; max-height: 90vh;
  border-radius: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  background: #F6F4F1;
}

/* ── UI Components ── */
.card { background: #fff; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.card-sm { background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }

.badge { padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 700; }
.badge-teal { background: rgba(59,191,184,.12); color: var(--teal-dk); }
.badge-red { background: rgba(239,68,68,.1); color: #dc2626; }
.badge-orange { background: rgba(245,158,11,.1); color: #d97706; }

.pill-btn-teal { background: var(--teal); color: white; transition: .2s; }
.pill-btn-teal:active { transform: scale(0.96); }

/* Blob Gradients */
.blob-hero { position: relative; overflow: hidden; background: var(--dark-bg); }
.blob { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.blob-teal { background: rgba(59,191,184,.5); }
.blob-purple { background: rgba(192,79,200,.5); }

/* Bottom Nav */
.nav-item { transition: .2s; cursor:pointer; }
.nav-item.active { color: var(--teal); }

/* Progress */
.progress-track { background: #F0F0F0; border-radius: 99px; height: 6px; }
.progress-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }

/* Dynamic Screens */
.screen-content { animation: fadeUp .25s ease forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Mobile View Adjustments */
@media (max-width: 768px) {
  body { background: #F6F4F1; }
  .page-wrap { padding: 0; display: block; height: 100vh; height: 100dvh; }
  .phone-wrap {
    max-width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }
}