:root {
  --blue: #8BA8C8;
  --blue-2: #A5BDD8;
  --blue-deep: #537A8F;
  --ink: #2C3E50;
  --muted: #7A8FA0;
  --surface: #F9F9F9;
  --surface-2: #FAFBFC;
  --shadow-dark: rgba(83, 122, 143, .12);
  --shadow-light: rgba(255, 255, 255, .95);
}

* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(139, 168, 200, .08), transparent 32%),
    linear-gradient(135deg, #F9F9F9 0%, #F5F8FA 48%, #F0F5F8 100%);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.font-display { font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.tap { transition: transform .18s ease, opacity .18s ease; cursor: pointer; }
.tap:active { transform: scale(.96); opacity: .88; }

.app-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 95% 3%, rgba(139, 168, 200, .06), transparent 24%),
    var(--surface);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 28px 80px rgba(83, 122, 143, .08);
  overflow-x: hidden;
}
@media (min-width: 768px) {
  .app-shell { max-width: 1200px; }
}

.app-header {
  min-height: 82px;
  background: rgba(249, 249, 249, .90);
  backdrop-filter: blur(24px) saturate(170%);
  border-bottom: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 12px 34px rgba(83, 122, 143, .04);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.neumo-card,
.neumo-input,
.neumo-pill,
.stat-pill {
  border: 1px solid rgba(255,255,255,.85);
  background: linear-gradient(145deg, #FAFBFC, #F5F8FA);
  box-shadow: 8px 8px 20px var(--shadow-dark), -8px -8px 20px var(--shadow-light), inset 1px 1px 0 rgba(255,255,255,.95);
}
.neumo-card { border-radius: 28px; }
.neumo-input { border-radius: 24px; }
.neumo-dark {
  border-radius: 30px;
  background: linear-gradient(145deg, #3D5A75, #2C4563);
  color: #fff;
  box-shadow: 10px 10px 24px rgba(83, 122, 143, .16), -8px -8px 16px rgba(255,255,255,.40), inset 0 1px 0 rgba(255,255,255,.10);
}
.neumo-avatar {
  background: linear-gradient(145deg, #34516F, #25385B);
  box-shadow: 8px 8px 18px rgba(83, 122, 143, .12), -7px -7px 16px rgba(255,255,255,.90);
}
/* ... (full styles.css content from previous fetch) ... */