:root {
  --tiffany: #74bdf4;
  --accent: #74bdf4;
  --accent-strong: #2f78b7;
  --accent-deep: #1c4f78;
  --accent-soft: #e7f5ff;
  --ink: #16344d;
  --muted: #526d83;
  --line: #d3e8f7;
  --paper: #ffffff;
  --canvas: #eff8ff;
  --lavender: #eaf5ff;
  --sage: #e2f3ff;
  --gold: #f8d47d;
  --cream: #fff8e7;
  --blush: #fff2ec;
  --shadow: 0 22px 55px rgba(38, 105, 158, .13), 0 3px 12px rgba(57, 131, 187, .06);
  --shadow-hover: 0 28px 68px rgba(38, 105, 158, .18), 0 6px 18px rgba(57, 131, 187, .08);
  --radius: 27px;
  --side-nav-width: 232px;
}

html {
  background: #eaf6ff;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 9% 4%, rgba(255, 255, 255, .98) 0 5%, transparent 24%),
    radial-gradient(circle at 86% 8%, rgba(116, 189, 244, .22), transparent 28%),
    radial-gradient(circle at 72% 72%, rgba(255, 245, 211, .48), transparent 24%),
    linear-gradient(145deg, #f8fcff 0%, #edf8ff 45%, #f8fbff 100%);
}

.app-shell {
  position: relative;
  isolation: isolate;
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .72;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(248, 212, 125, .72) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at center, rgba(255, 255, 255, .78) 0 34%, transparent 36%);
  background-position: 34px 78px, 112px 34px, 88% 88%;
  background-size: 148px 148px, 196px 196px, 430px 180px;
}

.side-nav {
  padding: 22px 16px 18px;
  background:
    radial-gradient(circle at 15% 6%, rgba(255, 255, 255, .98), transparent 25%),
    linear-gradient(180deg, rgba(248, 252, 255, .97), rgba(226, 243, 255, .94));
  border-right-color: rgba(47, 120, 183, .11);
  box-shadow: 16px 0 50px rgba(46, 114, 166, .06);
  backdrop-filter: blur(14px) saturate(1.08);
}

.brand {
  padding: 5px 4px;
}

.brand strong {
  color: var(--ink);
  font-size: 16px;
  letter-spacing: -.025em;
}

.brand small {
  color: var(--muted);
}

.brand-mark {
  position: relative;
  width: 43px;
  height: 43px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 16px 16px 16px 7px;
  background: linear-gradient(145deg, #82c9fb, #2f78b7);
  box-shadow: 0 12px 26px rgba(47, 120, 183, .25), inset 0 1px rgba(255, 255, 255, .62);
  font-size: 0;
}

.brand-mark::before {
  content: "✦";
  font-size: 21px;
  text-shadow: 0 2px 10px rgba(255, 255, 255, .65);
}

.brand-mark::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  right: -7px;
  top: -7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
}

.directory-nav {
  gap: 7px;
  margin-top: 28px;
}

.directory-group {
  margin: 17px 12px 6px;
  color: #64829a;
}

.directory-item {
  min-height: 54px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 18px;
}

.directory-item::before {
  display: none;
}

.directory-item:hover {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(116, 189, 244, .16);
}

.directory-item.active {
  color: var(--accent-deep);
  border-color: rgba(116, 189, 244, .2);
  background: linear-gradient(120deg, rgba(255, 255, 255, .98), rgba(232, 246, 255, .96));
  box-shadow: 0 13px 28px rgba(47, 120, 183, .13), inset 0 1px rgba(255, 255, 255, .95);
}

.directory-icon {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(116, 189, 244, .16);
  border-radius: 12px 12px 12px 5px;
  background: rgba(255, 255, 255, .82);
}

.directory-item.active .directory-icon {
  color: white;
  background: linear-gradient(145deg, #82c9fb, var(--accent-strong));
  box-shadow: 0 7px 16px rgba(47, 120, 183, .22);
}

.side-capture {
  border-color: rgba(116, 189, 244, .24);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 25px rgba(47, 120, 183, .09);
}

.topbar {
  min-height: 76px;
  background: rgba(249, 253, 255, .78);
  border-bottom-color: rgba(47, 120, 183, .09);
  box-shadow: 0 10px 32px rgba(47, 120, 183, .05);
  backdrop-filter: blur(24px) saturate(1.25);
}

.topbar-context small,
.eyebrow {
  color: var(--accent-strong);
}

.eyebrow::before {
  content: "✦";
  margin-right: 6px;
  color: #ddb450;
  font-size: .9em;
}

.icon-btn,
.primary,
.secondary,
.danger {
  border-radius: 14px 14px 14px 7px;
}

.icon-btn,
.secondary {
  border-color: rgba(47, 120, 183, .15);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 20px rgba(47, 120, 183, .06);
}

.primary {
  background: linear-gradient(140deg, #2f78b7, #205b90);
  box-shadow: 0 11px 24px rgba(47, 120, 183, .24), inset 0 1px rgba(255, 255, 255, .3);
}

.primary:hover {
  background: linear-gradient(140deg, #286da5, #194c73);
  box-shadow: 0 14px 30px rgba(47, 120, 183, .3), inset 0 1px rgba(255, 255, 255, .3);
}

main {
  width: min(1500px, calc(100% - clamp(30px, 4vw, 72px)));
}

.page.active {
  animation: floraPageBloom .48s cubic-bezier(.2, .8, .2, 1) both;
}

.card {
  border-color: rgba(47, 120, 183, .13);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .92);
}

h1,
.movement-home-heading h2,
.track-overview h2,
.supplement-stage-card h3 {
  font-family: "Iowan Old Style", "Songti SC", "STSong", Georgia, serif;
}

h1 {
  color: var(--ink);
  text-shadow: 0 4px 22px rgba(47, 120, 183, .08);
}

.baby-hero {
  min-height: 565px;
  border-color: rgba(116, 189, 244, .24);
  background:
    radial-gradient(circle at 79% 14%, rgba(255, 255, 255, .98), transparent 25%),
    radial-gradient(circle at 32% 78%, rgba(255, 247, 221, .52), transparent 27%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(225, 244, 255, .94));
  box-shadow: 0 30px 75px rgba(47, 120, 183, .15), inset 0 1px rgba(255, 255, 255, .98);
}

.baby-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background-image:
    radial-gradient(circle, rgba(116, 189, 244, .42) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(222, 180, 80, .5) 0 1.2px, transparent 1.8px);
  background-position: 28px 24px, 86px 74px;
  background-size: 126px 126px, 172px 172px;
}

.baby-hero::after {
  width: 360px;
  height: 180px;
  right: -84px;
  bottom: -82px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  filter: blur(2px);
}

.hero-lead {
  color: #3d607a;
}

.hero-stat {
  border-right-color: rgba(47, 120, 183, .14);
}

.hero-stat strong {
  color: var(--accent-deep);
}

.baby-stage {
  isolation: isolate;
}

.baby-stage::before {
  left: 4%;
  width: min(31vw, 410px);
  border-radius: 46% 54% 58% 42% / 47% 42% 58% 53%;
  background:
    radial-gradient(circle at 35% 27%, white 0 18%, transparent 19%),
    radial-gradient(circle at 68% 25%, #f9fdff 0 25%, transparent 26%),
    radial-gradient(circle at 50% 62%, #e0f2ff 0 52%, transparent 53%);
  box-shadow: inset 0 0 60px rgba(255, 255, 255, .95), 0 32px 68px rgba(47, 120, 183, .16);
}

#babyMascot {
  filter: drop-shadow(0 25px 24px rgba(42, 103, 151, .2));
}

.growth-overview {
  border-color: rgba(116, 189, 244, .25);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 38px rgba(47, 120, 183, .11), inset 0 1px rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px);
}

.week-chip,
.stage-label {
  background: linear-gradient(135deg, #438fca, #286da5);
  box-shadow: 0 9px 20px rgba(47, 120, 183, .2);
}

.baby-bubble {
  border: 1px solid rgba(116, 189, 244, .18);
  border-radius: 18px 18px 5px 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(47, 120, 183, .13);
  backdrop-filter: blur(12px);
}

.spark {
  color: #ddb450;
  text-shadow: 0 0 12px rgba(248, 212, 125, .65);
}

.movement-home-card {
  position: relative;
  gap: 18px;
  border-color: rgba(47, 120, 183, .18);
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .96), transparent 28%),
    radial-gradient(circle at 16% 90%, rgba(255, 246, 213, .42), transparent 25%),
    linear-gradient(145deg, #eaf7ff 0%, #cfeeff 50%, #a9dbff 100%);
  box-shadow: 0 26px 62px rgba(47, 120, 183, .18), inset 0 1px rgba(255, 255, 255, .9);
}

.movement-home-card::after {
  content: "✦";
  position: absolute;
  right: 23px;
  bottom: 18px;
  color: rgba(255, 255, 255, .7);
  font-size: 18px;
  pointer-events: none;
}

.movement-rule-chip {
  border-color: rgba(219, 172, 64, .2);
  background: rgba(255, 250, 231, .82);
  color: #735820;
}

.movement-home-tap,
.movement-main-tap {
  position: relative;
  border-radius: 50%;
  background: linear-gradient(145deg, #3b8bc5, #205b90);
  box-shadow: 0 21px 44px rgba(28, 79, 120, .3), 0 0 0 9px rgba(255, 255, 255, .38), inset 0 2px rgba(255, 255, 255, .32);
}

.movement-home-tap:hover {
  box-shadow: 0 25px 50px rgba(28, 79, 120, .34), 0 0 0 11px rgba(255, 255, 255, .44), inset 0 2px rgba(255, 255, 255, .32);
}

.movement-home-metrics,
.movement-live-metrics {
  border-color: rgba(47, 120, 183, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
}

.movement-home-open {
  border-color: rgba(47, 120, 183, .15);
  border-radius: 15px;
  background: rgba(255, 255, 255, .78);
}

.truth-card,
.habit-panel,
.calendar-panel,
.day-panel,
.unscheduled,
.view-card,
.track-overview {
  background: rgba(255, 255, 255, .86);
}

.truth-focus,
.track-signal,
.directory-metric,
.signal-metrics > div,
.supplement-trend > div {
  border: 1px solid rgba(116, 189, 244, .16);
  background: linear-gradient(135deg, #eff9ff, #e4f4ff);
}

.status-dot,
.pill,
.core-badge {
  border: 1px solid rgba(116, 189, 244, .2);
  background: #e6f5ff;
  color: var(--accent-deep);
}

.section-heading h2 {
  color: var(--ink);
}

.schedule-row,
.task-row,
.unscheduled-item,
.track-tab,
.supplement-section,
.supplement-product-list article {
  border-color: rgba(47, 120, 183, .12);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 28px rgba(47, 120, 183, .055);
}

.schedule-row:hover,
.task-row:hover {
  border-color: rgba(116, 189, 244, .35);
  transform: translateY(-1px);
  box-shadow: 0 15px 34px rgba(47, 120, 183, .1);
}

.habit-track {
  height: 9px;
  background: #e7f0f7;
}

.habit-track span {
  background: linear-gradient(90deg, #74bdf4, #3a86c2);
  box-shadow: 0 0 12px rgba(116, 189, 244, .45);
}

.tool-grid {
  gap: 14px;
}

.tool-card {
  position: relative;
  min-height: 158px;
  overflow: hidden;
  border-color: rgba(47, 120, 183, .12);
  border-radius: 24px 24px 24px 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(233, 247, 255, .86));
  box-shadow: 0 14px 34px rgba(47, 120, 183, .08), inset 0 1px rgba(255, 255, 255, .95);
}

.tool-card:nth-child(2n) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 248, 226, .84));
}

.tool-card:nth-child(3n) {
  background: linear-gradient(145deg, rgba(246, 252, 255, .98), rgba(218, 240, 255, .88));
}

.tool-card::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  right: -28px;
  top: -28px;
  border-radius: 50%;
  background: rgba(116, 189, 244, .09);
  transition: transform .25s ease;
}

.tool-card:hover {
  border-color: rgba(116, 189, 244, .36);
  box-shadow: var(--shadow-hover);
}

.tool-card:hover::after {
  transform: scale(1.35);
}

.tool-card span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border: 1px solid rgba(116, 189, 244, .18);
  border-radius: 17px 17px 17px 7px;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 9px 22px rgba(47, 120, 183, .09);
  font-size: 24px;
}

.four-week-grid {
  border-color: rgba(47, 120, 183, .12);
  border-radius: 20px;
  background: rgba(47, 120, 183, .12);
}

.day-name {
  background: #eaf6ff;
  color: #49687f;
}

.calendar-day {
  background: rgba(255, 255, 255, .94);
}

.calendar-day.weekend {
  background: #f6fbff;
}

.calendar-day.selected {
  background: #eff9ff;
  box-shadow: inset 0 0 0 2px var(--accent-strong);
}

.calendar-day.today .day-number {
  background: var(--accent-strong);
}

.calendar-event,
.timeline-block {
  background: #e3f3ff;
  color: var(--accent-deep);
}

.track-tab.active,
.supplement-tabs button.active {
  border-color: var(--accent-strong);
  background: linear-gradient(140deg, #2f78b7, #205b90);
  box-shadow: 0 9px 20px rgba(47, 120, 183, .2);
}

input,
textarea,
select {
  border-color: rgba(47, 120, 183, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 2px rgba(47, 120, 183, .035);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(47, 120, 183, .52);
  box-shadow: 0 0 0 4px rgba(116, 189, 244, .16);
}

.drawer,
.confirm-drawer {
  border-left: 1px solid rgba(47, 120, 183, .13);
  background:
    radial-gradient(circle at 100% 0, rgba(116, 189, 244, .18), transparent 25%),
    rgba(249, 253, 255, .97);
  box-shadow: -26px 0 70px rgba(28, 79, 120, .18);
  backdrop-filter: blur(24px);
}

.drawer-backdrop {
  background: rgba(22, 52, 77, .24);
  backdrop-filter: blur(5px);
}

.floating-baby-button {
  position: relative;
  width: 104px;
  height: 104px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 44% 56% 52% 48% / 50% 43% 57% 50%;
  background:
    radial-gradient(circle at 34% 24%, white 0 18%, transparent 19%),
    linear-gradient(145deg, #f8fdff, #caeaff);
  box-shadow: 0 22px 48px rgba(47, 120, 183, .24), 0 0 0 7px rgba(255, 255, 255, .56);
}

.floating-baby-button::after {
  content: "✦";
  position: absolute;
  right: -7px;
  top: 2px;
  color: #ddb450;
  font-size: 20px;
  text-shadow: 0 0 12px rgba(248, 212, 125, .75);
  animation: twinkle 2.6s ease-in-out infinite;
}

.floating-baby-button img {
  filter: drop-shadow(0 10px 10px rgba(43, 90, 132, .2));
}

.floating-baby-card,
.floating-baby-feedback {
  border: 1px solid rgba(116, 189, 244, .2);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 20px 48px rgba(28, 79, 120, .2);
  backdrop-filter: blur(18px);
}

.toast {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px 16px 16px 7px;
  background: rgba(22, 52, 77, .94);
  backdrop-filter: blur(14px);
}

@keyframes floraPageBloom {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1440px) {
  .today-grid {
    gap: 26px;
  }

  .baby-hero {
    min-height: 600px;
  }
}

@media (max-width: 900px) {
  .side-nav {
    width: min(86vw, 320px);
    border-radius: 0 28px 28px 0;
    box-shadow: 28px 0 70px rgba(28, 79, 120, .2);
  }

  .topbar {
    min-height: 66px;
    padding-top: max(9px, env(safe-area-inset-top));
  }
}

@media (max-width: 720px) {
  main {
    width: min(100% - 20px, 1500px);
  }

  .page {
    padding-top: 16px;
    padding-bottom: 108px;
  }

  .topbar {
    padding-right: max(11px, env(safe-area-inset-right));
    padding-left: max(11px, env(safe-area-inset-left));
  }

  .icon-btn,
  .primary,
  .secondary,
  .danger,
  .track-tab,
  .supplement-tabs button {
    min-height: 44px;
  }

  .icon-btn {
    width: 44px;
  }

  .card,
  .movement-home-card {
    border-radius: 24px;
  }

  .movement-home-card {
    min-height: 366px;
    padding: 22px 19px;
  }

  .movement-home-tap {
    width: 150px;
    height: 150px;
  }

  .baby-hero {
    min-height: 0;
  }

  .hero-copy {
    padding: 28px 22px 12px;
  }

  h1 {
    font-size: clamp(38px, 13vw, 52px);
  }

  .baby-stage {
    min-height: 440px;
  }

  .baby-stage::before {
    left: -8%;
    width: 276px;
  }

  .tool-grid {
    gap: 10px;
  }

  .tool-card {
    min-height: 132px;
    padding: 16px;
    border-radius: 21px 21px 21px 9px;
  }

  .tool-card span {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 14px 14px 14px 6px;
    font-size: 21px;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }

  .floating-baby-button {
    width: 72px;
    height: 72px;
    border-radius: 44% 56% 52% 48% / 50% 43% 57% 50%;
  }

  .floating-baby-button img {
    width: 64px;
    height: 64px;
  }

  .floating-capture {
    width: 52px;
    height: 52px;
    border-radius: 19px 19px 19px 8px;
    background: linear-gradient(145deg, #438fca, #25699f);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page.active,
  .floating-baby-button::after {
    animation: none !important;
  }
}