:root {
  color-scheme: light;
  --ln-bg:
    radial-gradient(circle at 12% 8%, rgba(226, 211, 255, 0.24), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(207, 237, 255, 0.28), transparent 32%),
    radial-gradient(circle at 18% 48%, rgba(255, 219, 228, 0.20), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(221, 255, 238, 0.16), transparent 32%),
    linear-gradient(180deg, #fdfbff 0%, #f8fbff 52%, #fffaf5 100%);
  --ln-card: #ffffff;
  --ln-card-soft: #fff1ea;
  --ln-text: #211a17;
  --ln-muted: #665650;
  --ln-border: rgba(83, 67, 61, 0.14);
  --ln-primary: #7c5cff;
  --ln-peach: #ffb6c8;
  --ln-purple: #7c5cff;
  --ln-lavender: #eee8ff;
  --ln-pink: #ffe8ef;
  --ln-mint: #e5fbf2;
  --ln-sky: #e8f5ff;
  --ln-cream: #fff5df;
  --ln-motion-fast: 140ms;
  --ln-motion-medium: 220ms;
  --ln-motion-slow: 360ms;
  --ln-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ln-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ln-nav-bottom-gap: calc(12px + env(safe-area-inset-bottom));
  --ln-nav-height: 76px;
}

:root.dark {
  color-scheme: dark;
  --ln-bg: #0b1222;
  --ln-card: #121b2d;
  --ln-card-soft: #202a3d;
  --ln-text: #eef6ff;
  --ln-muted: #a8b5ca;
  --ln-border: rgba(132, 204, 255, 0.14);
  --ln-primary: #22d3ee;
  --ln-peach: #22d3ee;
  --ln-purple: #22d3ee;
  --ln-purple-soft: #0f2236;
  --ln-dark-gradient: linear-gradient(180deg, #101a2e 0%, #0d1628 46%, #08101f 100%);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  body {
    animation: littlenest-page-in var(--ln-motion-medium) var(--ln-ease-out) both;
  }

  [id$="Modal"], .prototype-panel, #babyProfileMenu, #quickFormModal {
    transition: opacity var(--ln-motion-medium) var(--ln-ease-out), transform var(--ln-motion-medium) var(--ln-ease-out);
  }

  :root.ln-motion-ready main > section,
  :root.ln-motion-ready main > article,
  :root.ln-motion-ready main > div:not([id$="Modal"]),
  :root.ln-motion-ready #feedingHistoryList > *,
  :root.ln-motion-ready #historyList > *,
  :root.ln-motion-ready #timelineList > *,
  :root.ln-motion-ready #supportTaskList > *,
  :root.ln-motion-ready #medicationList > *,
  :root.ln-motion-ready #appointmentList > *,
  :root.ln-motion-ready #recoveryNoteList > * {
    animation: littlenest-rise-in var(--ln-motion-slow) var(--ln-ease-soft) both;
  }

  :root.ln-motion-ready main > section:nth-of-type(2),
  :root.ln-motion-ready main > article:nth-of-type(2),
  :root.ln-motion-ready main > div:nth-of-type(2) {
    animation-delay: 35ms;
  }

  :root.ln-motion-ready main > section:nth-of-type(3),
  :root.ln-motion-ready main > article:nth-of-type(3),
  :root.ln-motion-ready main > div:nth-of-type(3) {
    animation-delay: 70ms;
  }

  :root.ln-page-exit body {
    animation: littlenest-page-out 120ms ease-in both;
  }
}

@keyframes littlenest-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes littlenest-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes littlenest-rise-in {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body {
  background: var(--ln-bg) !important;
  color: var(--ln-text) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

main,
.overflow-y-auto,
[class*="overflow-y-auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

button,
a,
[role="button"],
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"],
label,
summary {
  transition:
    transform var(--ln-motion-fast) var(--ln-ease-out),
    opacity var(--ln-motion-fast) var(--ln-ease-out),
    background-color var(--ln-motion-medium) var(--ln-ease-out),
    color var(--ln-motion-medium) var(--ln-ease-out),
    border-color var(--ln-motion-medium) var(--ln-ease-out),
    box-shadow var(--ln-motion-medium) var(--ln-ease-out);
}

button:active,
a:active,
[role="button"]:active {
  transform: scale(0.975);
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none !important;
}

input,
textarea,
select {
  transition:
    box-shadow var(--ln-motion-medium) var(--ln-ease-out),
    border-color var(--ln-motion-medium) var(--ln-ease-out),
    background-color var(--ln-motion-medium) var(--ln-ease-out),
    color var(--ln-motion-medium) var(--ln-ease-out);
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ln-peach) 32%, transparent) !important;
}

.soft-shadow,
.custom-shadow,
.mama-card,
[class*="rounded-[24px]"],
[class*="rounded-[26px]"],
[class*="rounded-[28px]"],
[class*="rounded-3xl"] {
  transition:
    transform var(--ln-motion-medium) var(--ln-ease-out),
    box-shadow var(--ln-motion-medium) var(--ln-ease-out),
    background-color var(--ln-motion-medium) var(--ln-ease-out),
    border-color var(--ln-motion-medium) var(--ln-ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-screen-target]:hover,
  [data-coming-soon]:hover,
  main a:hover,
  main button:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

.font-display-lg,
.text-display-lg,
.font-headline-lg-mobile,
.text-headline-lg-mobile,
.font-headline-lg,
.text-headline-lg {
  font-size: clamp(1.35rem, 5vw, 1.5rem) !important;
  line-height: 1.18 !important;
}

.font-headline-md,
.text-headline-md {
  font-size: clamp(0.98rem, 3.8vw, 1.12rem) !important;
  line-height: 1.28 !important;
}

.font-body-md,
.text-body-md {
  font-size: clamp(0.875rem, 3.4vw, 0.98rem) !important;
  line-height: 1.45 !important;
}

.font-label-sm,
.text-label-sm,
.text-label-sm-mobile {
  font-size: clamp(0.72rem, 2.7vw, 0.8rem) !important;
  line-height: 1.25 !important;
}

.text-label-md,
.font-label-md {
  font-size: clamp(0.82rem, 3vw, 0.9rem) !important;
}

:root.dark body {
  background: var(--ln-dark-gradient) fixed !important;
  color: #f7fbff !important;
}

:root.dark .bg-surface,
:root.dark .bg-background,
:root.dark .bg-\[\#FFF8F5\],
:root.dark .bg-\[\#fff8f5\] {
  background-color: transparent !important;
}

:root.dark header,
:root.dark header.bg-surface,
:root.dark header.sticky,
:root.dark header[class*="bg-surface"] {
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.96), rgba(13, 22, 40, 0.76)) !important;
  color: #eef6ff !important;
  border-color: rgba(34, 211, 238, 0.10) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
}

:root.dark .bg-surface-container,
:root.dark .bg-surface-container-highest,
:root.dark .bg-surface-container-high {
  background-color: #202a3d !important;
}

:root.dark .bg-surface-container-low,
:root.dark .bg-surface-container-lowest,
:root.dark .bg-white,
:root.dark .bg-\[\#FFF7ED\],
:root.dark .bg-\[\#EFF6FF\],
:root.dark .bg-\[\#F0FDF4\],
:root.dark .bg-\[\#FAF5FF\] {
  background-color: #121b2d !important;
}

:root.dark .text-on-surface,
:root.dark .text-on-background,
:root.dark .text-on-primary-fixed,
:root.dark .text-on-secondary-fixed,
:root.dark .text-on-tertiary-fixed,
:root.dark .text-\[\#211A17\],
:root.dark .text-\[\#211a17\] {
  color: #eef6ff !important;
}

:root.dark .text-on-surface-variant,
:root.dark .text-on-secondary-fixed-variant,
:root.dark .text-on-primary-fixed-variant,
:root.dark .text-on-secondary-fixed-variant,
:root.dark .text-on-tertiary-fixed-variant,
:root.dark .text-secondary,
:root.dark .text-tertiary,
:root.dark .text-secondary-fixed-dim,
:root.dark .dark\:text-secondary-fixed-dim,
:root.dark .text-outline,
:root.dark .text-outline-variant,
:root.dark .text-\[\#166534\],
:root.dark .text-\[\#1E40AF\],
:root.dark .text-\[\#6B21A8\],
:root.dark .text-\[\#0369A1\],
:root.dark .text-\[\#15803D\],
:root.dark .text-\[\#581C87\],
:root.dark .text-\[\#854D0E\] {
  color: #a8b5ca !important;
}

:root.dark .text-primary {
  color: #22d3ee !important;
}

:root.dark .dark\:text-primary-fixed-dim,
:root.dark .text-primary-fixed-dim {
  color: #22d3ee !important;
}

:root.dark .bg-primary,
:root.dark .bg-primary-container {
  background-color: #22d3ee !important;
}

:root.dark .text-on-primary,
:root.dark .text-on-primary-container {
  color: #07111f !important;
}

:root.dark .bg-secondary-container,
:root.dark .bg-tertiary-container,
:root.dark .bg-secondary-fixed,
:root.dark .bg-tertiary-fixed,
:root.dark .bg-\[\#FFF7ED\],
:root.dark .bg-\[\#EFF6FF\],
:root.dark .bg-\[\#F0FDF4\],
:root.dark .bg-\[\#FAF5FF\],
:root.dark .bg-\[\#DBEAFE\],
:root.dark .bg-\[\#F3E8FF\],
:root.dark .bg-\[\#FEF9C3\],
:root.dark .bg-\[\#FFDAD6\] {
  background-color: rgba(34, 211, 238, 0.12) !important;
}

:root.dark [class*="bg-primary-container/"],
:root.dark [class*="bg-primary-fixed/"],
:root.dark [class*="bg-secondary-container/"],
:root.dark [class*="bg-secondary-fixed/"],
:root.dark [class*="bg-tertiary-container/"],
:root.dark [class*="bg-tertiary-fixed/"] {
  background-color: rgba(34, 211, 238, 0.12) !important;
}

:root.dark .border,
:root.dark .border-surface-variant,
:root.dark .border-white,
:root.dark .border-white\/50,
:root.dark .border-white\/60,
:root.dark .border-white\/70 {
  border-color: rgba(132, 204, 255, 0.14) !important;
}

:root.dark input,
:root.dark textarea,
:root.dark select {
  background-color: #f8f7ff !important;
  color: #111114 !important;
  border-color: rgba(34, 211, 238, 0.35) !important;
}

:root.dark input::placeholder,
:root.dark textarea::placeholder {
  color: #6f6b78 !important;
}

:root.dark nav.fixed {
  background-color: rgba(32, 42, 61, 0.78) !important;
  border-color: rgba(132, 204, 255, 0.16) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Hide bottom nav while a full-screen modal (e.g. photo crop) is open,
   so its action buttons are never blocked. */
body.ln-modal-open nav.fixed.bottom-0 {
  transform: translateY(160%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

nav.fixed.bottom-0 {
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: var(--ln-nav-bottom-gap) !important;
  width: auto !important;
  max-width: 390px !important;
  min-height: var(--ln-nav-height) !important;
  margin: 0 auto !important;
  padding: 0.55rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 0.2rem !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(124, 92, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 18px 46px rgba(124, 92, 255, 0.16), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
  z-index: 9999 !important;
  backface-visibility: hidden;
  overflow: visible !important;
  isolation: isolate;
}

nav.fixed.bottom-0 > a,
nav.fixed.bottom-0 > button {
  width: clamp(58px, 18vw, 78px) !important;
  height: 58px !important;
  min-width: 0 !important;
  max-width: 78px !important;
  flex: 1 1 0 !important;
  padding: 0.32rem 0.35rem !important;
  border-radius: 9999px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  line-height: 1 !important;
  color: rgba(81, 68, 62, 0.82) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

nav.fixed.bottom-0 > a span:last-child,
nav.fixed.bottom-0 > button span:last-child {
  font-size: 10px !important;
  line-height: 1rem !important;
  white-space: nowrap !important;
}

nav.fixed.bottom-0 .material-symbols-outlined {
  font-size: 24px !important;
  line-height: 1 !important;
}

nav.fixed.bottom-0 .nav-tab-active,
nav.fixed.bottom-0 [aria-current="page"] {
  background: rgba(124, 92, 255, 0.14) !important;
  color: #6f4df2 !important;
  border-color: rgba(124, 92, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px rgba(124,92,255,.12) !important;
}

nav.fixed.bottom-0 [data-nav-item="log"] {
  order: 3 !important;
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  margin-top: -28px !important;
  border-radius: 9999px !important;
  background: linear-gradient(145deg, #9b7cff, #7056f4) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(124, 92, 255, 0.34) !important;
}

nav.fixed.bottom-0 [data-nav-item="log"] .material-symbols-outlined {
  font-size: 34px !important;
  font-variation-settings: 'FILL' 1 !important;
}

nav.fixed.bottom-0 [data-nav-item="log"] span:last-child {
  display: none !important;
}

nav.fixed.bottom-0 [data-nav-item="home"] { order: 1 !important; }
nav.fixed.bottom-0 [data-nav-item="calendar"] { order: 2 !important; }
nav.fixed.bottom-0 [data-nav-item="milestones"] { order: 4 !important; }
nav.fixed.bottom-0 [data-nav-item="assistant"] { order: 5 !important; }

body {
  padding-bottom: calc(var(--ln-nav-height) + var(--ln-nav-bottom-gap) + 2.75rem) !important;
}

main {
  padding-bottom: calc(var(--ln-nav-height) + var(--ln-nav-bottom-gap) + 3.25rem) !important;
}

.pb-32 {
  padding-bottom: calc(var(--ln-nav-height) + var(--ln-nav-bottom-gap) + 3.25rem) !important;
}

button.fixed.bottom-24,
.fixed.bottom-24 {
  bottom: calc(var(--ln-nav-height) + var(--ln-nav-bottom-gap) + 1rem) !important;
}

:root.dark nav.fixed.bottom-0 > a:not(.nav-tab-active):not([aria-current="page"]),
:root.dark nav.fixed.bottom-0 > button:not(.nav-tab-active):not([aria-current="page"]) {
  color: rgba(248, 247, 255, 0.70) !important;
}

:root.dark nav.fixed.bottom-0 .nav-tab-active,
:root.dark nav.fixed.bottom-0 [aria-current="page"] {
  background-color: rgba(34, 211, 238, 0.18) !important;
  color: #22d3ee !important;
  border-color: rgba(34, 211, 238, 0.26) !important;
}

:root.dark nav.fixed.bottom-0 [data-nav-item="log"] {
  background: linear-gradient(145deg, #9b7cff, #22d3ee) !important;
  color: #07111f !important;
}

.ln-premium-card,
main > section,
main > article,
.summary-card,
.quick-log-card,
.category-card,
.prompt-card,
#babyProfileCard,
.dashboard-stat-card {
  border-radius: 26px !important;
}

#homeContent main > section:not(:first-child),
.ln-premium-card,
.summary-card,
.quick-log-card,
.prompt-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 18px 46px rgba(124, 92, 255, 0.10), 0 8px 22px rgba(255, 182, 200, 0.10) !important;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

:root.dark #homeContent main > section:not(:first-child),
:root.dark .ln-premium-card,
:root.dark .summary-card,
:root.dark .quick-log-card,
:root.dark .prompt-card {
  background: rgba(18, 27, 45, 0.74) !important;
  border-color: rgba(132, 204, 255, 0.12) !important;
}

.dashboard-stat-card:nth-of-type(1), .ln-card-feed { background: linear-gradient(145deg, #ffe7ef, #fff7f7) !important; }
.dashboard-stat-card:nth-of-type(2), .ln-card-sleep { background: linear-gradient(145deg, #eee8ff, #f8f5ff) !important; }
.dashboard-stat-card:nth-of-type(3), .ln-card-diaper { background: linear-gradient(145deg, #e5fbf2, #f4fff9) !important; }
.dashboard-stat-card:nth-of-type(4), .ln-card-growth { background: linear-gradient(145deg, #e8f5ff, #f8fcff) !important; }

:root.dark .dashboard-stat-card:nth-of-type(n) {
  background: rgba(18, 27, 45, 0.78) !important;
}

:root.dark .opacity-30,
:root.dark .opacity-40,
:root.dark .opacity-50,
:root.dark .text-error\/60 {
  opacity: 1 !important;
}

:root.dark .bg-surface-bright,
:root.dark .bg-primary-fixed,
:root.dark .bg-secondary-fixed,
:root.dark .bg-tertiary-fixed,
:root.dark .bg-primary-fixed-dim {
  background-color: #121b2d !important;
  color: #eef6ff !important;
}

:root.dark .text-error {
  color: #ff8e9b !important;
}

:root.dark svg text,
:root.dark .chart-label {
  fill: #a8b5ca !important;
  color: #a8b5ca !important;
}

.stat-compact,
#lastFeedTime,
#todaySleepTotal,
#lastDiaperTime,
#nextEventDate {
  font-size: clamp(1rem, 4.2vw, 1.35rem) !important;
  line-height: 1.15 !important;
  overflow-wrap: normal;
}

:root.dark .dashboard-stat-card {
  background-color: #121b2d !important;
  border: 1px solid rgba(132, 204, 255, 0.12) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

:root.dark .dashboard-stat-label,
:root.dark .dashboard-stat-label span,
:root.dark .dashboard-stat-card > span {
  color: #22d3ee !important;
}

:root.dark .dashboard-stat-value,
:root.dark #lastFeedTime,
:root.dark #todaySleepTotal,
:root.dark #lastDiaperTime,
:root.dark #nextEventDate {
  color: #eef6ff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

:root.dark .rounded-\[24px\],
:root.dark .rounded-\[32px\],
:root.dark .rounded-xl,
:root.dark .rounded-2xl {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

:root.dark article,
:root.dark .category-card,
:root.dark .prompt-card,
:root.dark [data-log-target],
:root.dark [data-screen-target]:not(nav *):not(.bg-primary):not(.bg-primary-container) {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

:root.dark .category-card,
:root.dark .prompt-card {
  background-color: #121b2d !important;
}

:root.dark button.bg-primary,
:root.dark button.bg-primary-container,
:root.dark .pill-button-inner-glow {
  background-color: #22d3ee !important;
  color: #07111f !important;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.22) !important;
}

:root.dark .bg-tertiary-fixed,
:root.dark .bg-secondary-container,
:root.dark .bg-primary-container\/30,
:root.dark .bg-primary-container\/40,
:root.dark .bg-primary-container\/20,
:root.dark .bg-secondary-container\/50,
:root.dark .bg-tertiary-container\/30 {
  background-color: rgba(34, 211, 238, 0.12) !important;
}

:root.dark .shadow-xl,
:root.dark .soft-shadow {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.44) !important;
}

/* =====================================================================
   Light-mode pastel remap — replace the legacy brown Material palette
   (primary #83533c / primary-container #ffbfa3) with the LittleNest
   lavender + soft-pink accents from the reference design.
   Scoped to :root:not(.dark) so dark mode (cyan) is untouched.
   Pure visual override — no markup or class changes.
   ===================================================================== */
:root:not(.dark) .bg-primary,
:root:not(.dark) button.bg-primary,
:root:not(.dark) a.bg-primary,
:root:not(.dark) .bg-primary-fixed-dim,
:root:not(.dark) .bg-surface-tint {
  background-image: linear-gradient(145deg, #9b7cff, #7056f4) !important;
  background-color: #7c5cff !important;
  color: #ffffff !important;
}

:root:not(.dark) .text-on-primary,
:root:not(.dark) .bg-primary .text-on-primary {
  color: #ffffff !important;
}

:root:not(.dark) .text-primary,
:root:not(.dark) .text-primary-fixed-dim,
:root:not(.dark) .text-surface-tint,
:root:not(.dark) .text-on-primary-container,
:root:not(.dark) .text-on-primary-fixed,
:root:not(.dark) .text-on-primary-fixed-variant {
  color: #6f4df2 !important;
}

:root:not(.dark) .border-primary,
:root:not(.dark) .border-primary-fixed-dim,
:root:not(.dark) .ring-primary {
  border-color: rgba(124, 92, 255, 0.55) !important;
}

/* Soft lavender fills for containers / secondary buttons / nav pills */
:root:not(.dark) .bg-primary-container,
:root:not(.dark) [class*="bg-primary-container/"],
:root:not(.dark) .bg-primary-fixed,
:root:not(.dark) [class*="bg-primary-fixed/"] {
  background-color: #eee8ff !important;
  color: #6f4df2 !important;
}

:root:not(.dark) .bg-primary-container .text-on-primary-container,
:root:not(.dark) .bg-primary-container .material-symbols-outlined {
  color: #6f4df2 !important;
}

/* Accent icons that used the brown tint */
:root:not(.dark) .text-inverse-primary {
  color: #ff9ec0 !important;
}

/* Quick Log category tiles — give the grey Material tiles distinct pastels */
:root:not(.dark) .category-card.bg-secondary-container {
  background-color: #e8f1ff !important;
}
:root:not(.dark) .category-card.bg-surface-container-high {
  background-color: #fff3da !important;
}
:root:not(.dark) .category-card.bg-surface-container-highest {
  background-color: #ffe8ef !important;
}

/* Dashboard stat cards — premium icon chips + stronger value hierarchy */
.dashboard-stat-card {
  padding: 1rem 1.05rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  min-height: 116px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 12px 30px rgba(124, 92, 255, 0.08) !important;
}
.dashboard-stat-label {
  gap: 0.5rem !important;
  font-weight: 700 !important;
}
.dashboard-stat-card .dashboard-stat-label .material-symbols-outlined {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.78) !important;
  font-size: 18px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.dashboard-stat-value {
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  margin-top: auto !important;
}
:root.dark .dashboard-stat-card .dashboard-stat-label .material-symbols-outlined {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Quick-action circles — promote the grey Note chip to soft pink */
:root:not(.dark) .group .bg-surface-container {
  background-color: #ffe8ef !important;
}
:root:not(.dark) .group .bg-surface-container .material-symbols-outlined,
:root:not(.dark) .group .text-secondary {
  color: #d6336c !important;
}

/* Focus ring → lavender to match accent */
:root:not(.dark) input:focus,
:root:not(.dark) textarea:focus,
:root:not(.dark) select:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ln-primary) 26%, transparent) !important;
}

/* =====================================================================
   Dark-mode home polish — the home cards hardcode light pastel bg via
   utility classes; some dark: variants don't resolve, leaving light
   cards with unreadable text. Force readable dark surfaces here.
   ===================================================================== */
:root.dark #mamaCareCard {
  background: #1d2536 !important;
  border-color: rgba(255, 99, 132, 0.28) !important;
}
:root.dark #mamaCareCard h3,
:root.dark #mamaCareCard .text-on-surface {
  color: #eef6ff !important;
}
:root.dark #mamaCareCard .text-on-surface-variant {
  color: #a8b5ca !important;
}
:root.dark #mamaCareCard .text-error,
:root.dark #mamaMoodPreview,
:root.dark #mamaRestPreview,
:root.dark #mamaMedsPreview {
  color: #ff9fb0 !important;
}
:root.dark #mamaCareCard .bg-\[\#ffe0e8\] {
  background-color: rgba(255, 99, 132, 0.18) !important;
}
:root.dark #mamaCareCard button {
  background: rgba(34, 211, 238, 0.14) !important;
  color: #22d3ee !important;
  border-color: rgba(34, 211, 238, 0.30) !important;
}

/* Stat-card icon chips in dark — subtle cyan tint, not a white block */
:root.dark .dashboard-stat-card .dashboard-stat-label .material-symbols-outlined {
  background: rgba(34, 211, 238, 0.16) !important;
  color: #22d3ee !important;
  box-shadow: none !important;
}

/* Empty-state / status icon bubbles that hardcode lavender bg */
:root.dark #activeStatusCard .bg-\[\#eee8ff\],
:root.dark #noBabyCta .bg-primary-container {
  background-color: rgba(34, 211, 238, 0.16) !important;
}

/* Stat grid — no parent glass panel; cards float independently */
#homeContent #statusGridSection,
:root.dark #homeContent #statusGridSection {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* Dark stat cards — solid dark surface, no border, rounded, soft shadow */
:root.dark #homeContent .dashboard-stat-card {
  background: #18213450 !important;
  background-color: #182134 !important;
  border: 0 !important;
  border-radius: 30px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32) !important;
}
:root.dark #homeContent .dashboard-stat-card .dashboard-stat-value {
  color: #eef6ff !important;
}
:root.dark #homeContent .dashboard-stat-card .dashboard-stat-detail {
  color: #9fb0c6 !important;
}