/* NapAndNote — iOS-polished design system */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--color-border);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  line-height: inherit;
  background-color: var(--color-bg);
  color: var(--color-text);
}

img,
svg {
  display: block;
  vertical-align: middle;
}

:root {
  /* Pencil Design Palette — Light */
  --color-bg: #F5F4F1;
  --color-card: #FFFFFF;
  --color-surface-muted: #EDECEA;
  --color-border: #E5E4E1;
  --color-border-strong: #D5D4D1;
  --color-separator: #E5E4E1;
  /* Text */
  --color-text: #1A1918;
  --color-muted: #6D6C6A;
  --color-text-tertiary: #9C9B9999;
  --color-text-quaternary: #9C9B994D;
  --color-nav-inactive: #A8A7A5;
  /* Brand / Accent Colors */
  --color-primary: #3D8A5A;
  --color-primary-light: #3D8A5A20;
  --color-primary-gradient: linear-gradient(180deg, #3D8A5A 0%, #347A4E 100%);
  --color-accent: #D08068;
  --color-accent-dark: #B86E58;
  --color-blue: #3D8A5A;
  --color-orange: #D4A64A;
  --color-indigo: #D89575;
  --color-teal: #C8F0D8;
  --color-warning: #D4A64A;
  --color-sleep: #8B7DB5;
  --color-sleep-light: #8B7DB518;
  --color-tummy: #7BA68B;
  --color-tummy-light: #7BA68B18;
  --color-bath: #6B9EC0;
  --color-bath-light: #6B9EC018;
  --color-med: #C47878;
  --color-med-light: #C4787818;
  --color-accent-light: #D0806818;
  --color-feed-light: #3D8A5A18;
  --color-diaper-light: #D4A64A18;
  /* Nav bar */
  --color-nav-bg: linear-gradient(0deg, #F7F5F0 0%, #FDFCF9 100%);
  --color-nav-border: #E5E0D8;
  /* Effects */
  --color-shadow: rgba(0, 0, 0, 0.04);
  --color-fill: #EDECEA33;
  /* Growth tabs */
  --color-growth-tabs-bg: #EDECEA;
  --color-growth-tab-text: #7A7578;
  --color-growth-tab-active: #FFFFFF;
  /* Radii */
  --radius-button: 12px;
  --radius-card: 16px;
  --radius-pill: 100px;
}

body[data-theme="night"] {
  --color-bg: #1A1B20;
  --color-card: #2C2D32;
  --color-card-alt: #26272B;
  --color-surface-muted: #1E1F24;
  --color-border: #3A3B40;
  --color-border-strong: #4A4B50;
  --color-separator: #3A3B4020;
  --color-text: #E8E4DF;
  --color-muted: #7A7578;
  --color-text-tertiary: #7A757880;
  --color-text-quaternary: #7A75784D;
  --color-nav-inactive: #6D6C6A;
  --color-primary: #6BAE7E;
  --color-primary-light: #6BAE7E30;
  --color-primary-gradient: linear-gradient(180deg, #6BAE7E 0%, #5A9E6E 100%);
  --color-accent: #D09080;
  --color-accent-dark: #D8A088;
  --color-blue: #6BAE7E;
  --color-orange: #D4B060;
  --color-indigo: #D8A088;
  --color-teal: #2D4D38;
  --color-warning: #D4B060;
  --color-sleep: #9B8DC5;
  --color-sleep-light: #9B8DC530;
  --color-tummy: #8BB69B;
  --color-tummy-light: #8BB69B30;
  --color-bath: #7BAED0;
  --color-bath-light: #7BAED030;
  --color-med: #D48888;
  --color-med-light: #D4888830;
  --color-accent-light: #D0908030;
  --color-feed-light: #6BAE7E30;
  --color-diaper-light: #D4B06030;
  --color-nav-bg: linear-gradient(0deg, #1E1F24 0%, #222328 100%);
  --color-nav-border: #3A3B4020;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-fill: #3A393844;
  --color-growth-tabs-bg: #1E1F24;
  --color-growth-tab-text: #7A7578;
  --color-growth-tab-active: #2C2D32;
}

/* Layout */
.min-h-screen { min-height: 100vh; }
.max-w-md { max-width: 28rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-24 { padding-bottom: 5.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.w-full { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.overflow-hidden { overflow: hidden; }

/* Typography — iOS-inspired scale */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.8125rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.0625rem; line-height: 1.5rem; }
.text-2xl { font-size: 1.375rem; line-height: 1.75rem; }
.text-3xl { font-size: 2.125rem; line-height: 2.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.tracking-tight { letter-spacing: -0.02em; }
.tracking-wide { letter-spacing: 0.025em; }
.uppercase { text-transform: uppercase; }

.text-muted { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }

/* Surfaces */
.bg-app {
  background-color: var(--color-bg);
}
.bg-card { background-color: var(--color-card); }
.bg-surface { background-color: var(--color-card); }
.bg-accent { background-color: var(--color-accent); }
.text-on-accent { color: #ffffff; }

.rounded-lg { border-radius: var(--radius-card); }
.rounded-md { border-radius: calc(var(--radius-card) * 0.75); }
.rounded-2xl { border-radius: var(--radius-card); }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: var(--radius-pill); }

.shadow-soft {
  box-shadow: 0 1px 6px var(--color-shadow);
}

.ring-soft {
  box-shadow: 0 0 0 1px var(--color-border);
}

/* Components */
.card {
  background-color: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 6px var(--color-shadow);
  padding: 1rem;
}

.label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

a {
  color: inherit;
  text-decoration: none;
}

a.text-primary,
a.text-accent {
  text-decoration: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1rem;
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 150ms ease, transform 80ms ease;
}

.button:active {
  opacity: 0.7;
  transform: scale(0.98);
}

.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.button-primary {
  background: var(--color-primary-gradient);
  color: #ffffff;
}

.button-secondary {
  background-color: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.button-danger {
  background-color: var(--color-accent);
  color: #ffffff;
}
.button-sleep {
  background: linear-gradient(180deg, #8B7DB5 0%, #796CA3 100%);
  color: #ffffff;
}
.badge-sleep {
  background: rgba(139,125,181,0.15);
  color: #8B7DB5;
}
.sleep-timer-card {
  text-align: center;
  padding: 1.75rem 1.5rem;
  background: var(--color-card);
  border-radius: 0.875rem;
  box-shadow: 0 4px 12px var(--color-shadow);
}
.sleep-timer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0.75rem;
}
.sleep-timer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8B7DB5;
}
.sleep-timer-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #8B7DB5;
}
.sleep-timer-hint {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  margin-top: 0.25rem;
}
.sleep-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  margin-top: 0.75rem;
  overflow: hidden;
}
.sleep-progress-fill {
  width: 65%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #8B7DB5 0%, #796CA3 100%);
}

/* Tummy Time timer card */
.tummy-timer-card {
  text-align: center;
  padding: 1.75rem 1.5rem;
  background: var(--color-card);
  border-radius: 0.875rem;
  box-shadow: 0 4px 12px var(--color-shadow);
}
.tummy-timer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0.75rem;
}
.tummy-timer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7BA68B;
}
.tummy-timer-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #7BA68B;
}
.tummy-timer-hint {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  margin-top: 0.25rem;
}
.tummy-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  margin-top: 0.75rem;
  overflow: hidden;
}
.tummy-progress-fill {
  width: 65%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #7BA68B 0%, #5F8A71 100%);
}

/* Bath Time timer card */
.bath-timer-card {
  text-align: center;
  padding: 1.75rem 1.5rem;
  background: var(--color-card);
  border-radius: 0.875rem;
  box-shadow: 0 4px 12px var(--color-shadow);
}
.bath-timer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0.75rem;
}
.bath-timer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6B9EC0;
}
.bath-timer-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6B9EC0;
}
.bath-timer-hint {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  margin-top: 0.25rem;
}
.bath-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  margin-top: 0.75rem;
  overflow: hidden;
}
.bath-progress-fill {
  width: 65%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #6B9EC0 0%, #5586A8 100%);
}

/* Navigation Bar — iOS Tab Bar */
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-nav-bg);
  border-top: 0.5px solid var(--color-nav-border);
  padding: 10px 0 30px;
  z-index: 50;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .nav-bar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  }
}

.nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 28rem;
  margin: 0 auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 64px;
  text-decoration: none;
  color: var(--color-nav-inactive);
  font-size: 10px;
  font-weight: 500;
}

.nav-item.active {
  color: var(--color-blue);
  font-weight: 600;
}

.nav-item svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Timeline + filters */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-fill);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.pill.active {
  background-color: var(--color-blue);
  color: #ffffff;
}

.timeline-card {
  border-radius: var(--radius-card);
  padding: 0.875rem 1rem;
  background-color: var(--color-card);
  box-shadow: 0 1px 6px var(--color-shadow);
}

.timeline-meta {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: var(--color-fill);
  color: var(--color-text-tertiary);
}

.chip.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Controls */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--color-fill);
  color: var(--color-text);
  cursor: pointer;
}

.theme-toggle[aria-pressed="true"] {
  background-color: var(--color-blue);
  color: #ffffff;
}

.timer-display {
  font-family: 'Lora', serif;
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--color-text);
}

/* Feeding flow — active/setup layout */
.feed-active {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.feed-active[hidden] {
  display: none;
}

/* Feeding — timer card */
.feed-timer-card {
  background: var(--color-card);
  border-radius: 1.25rem;
  box-shadow: 0 4px 12px var(--color-shadow);
  padding: 2rem 1.5rem;
  text-align: center;
}
.feed-timer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}
.feed-timer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-block;
}
.feed-timer-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
}
.feed-timer-hint {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  margin-top: 0.25rem;
}
.feed-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  margin-top: 0.75rem;
  overflow: hidden;
}
.feed-progress-fill {
  width: 65%;
  height: 100%;
  border-radius: 3px;
  background: var(--color-primary-gradient);
}

/* Feeding — action buttons (breast) */
.feed-btn-row {
  display: flex;
  gap: 1rem;
}
.feed-btn-outline,
.feed-btn-primary,
.feed-btn-danger {
  flex: 1;
  height: 3.125rem;
  border-radius: var(--radius-card);
  font-size: 1.0625rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
}
.feed-btn-outline {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-separator);
}
.feed-btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}
.feed-btn-danger {
  background: var(--color-primary);
  color: #ffffff;
}
.feed-paused-hint {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
}

/* Feeding flow — setup cards */
.feed-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 6px var(--color-shadow);
  padding: 1.125rem;
}
.feed-card-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  margin: 0 0 0.875rem;
}

/* Bottle type selector — icon cards */
.bottle-type-row {
  display: flex;
  gap: 0.625rem;
}
.bottle-type-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 5rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-separator);
  color: var(--color-text-tertiary);
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bottle-type-opt.active {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-feed-light);
  font-weight: 600;
}

/* Volume setup — stepper */
.vol-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vol-stepper-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-fill);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}
.vol-stepper-display {
  display: flex;
  align-items: baseline;
  gap: 0.125rem;
}
.vol-stepper-num {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--color-text);
}
.vol-stepper-unit {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

/* Bottle active — Served volume card */
.vol-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 6px var(--color-shadow);
  padding: 1.125rem;
}
.vol-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.vol-controls {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.vol-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
}
.vol-unit {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  margin-left: -0.5rem;
}
.vol-steppers {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.vol-step {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-fill);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}

/* Bottle active — Info row */
.vol-info-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 6px var(--color-shadow);
  padding: 1.125rem;
}
.vol-info-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-feed-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vol-info-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.vol-info-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}
.vol-info-sub {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}

/* Bottle active — Consumed card */
.consumed-card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 6px var(--color-shadow);
  padding: 1.125rem;
}
.consumed-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
  margin-bottom: 0.75rem;
}
.consumed-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.consumed-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  background: var(--color-fill);
  color: var(--color-text);
  font-size: 0.9375rem;
  font-family: inherit;
  border: none;
  outline: none;
}
.consumed-input::placeholder {
  color: var(--color-text-tertiary);
}

/* Served + Consumed combined card */
.vol-consumed-card {
  display: flex;
  background: var(--color-card);
  border-radius: var(--radius-card, 16px);
  padding: 1rem 1.125rem;
  gap: 1rem;
}
.vol-consumed-served,
.vol-consumed-consumed {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vol-consumed-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.vol-consumed-divider {
  width: 1px;
  background: var(--color-separator);
  align-self: stretch;
}
.vol-consumed-consumed .consumed-input {
  width: 100%;
}

/* Feeding Done Screen */
.feeding-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}
.feeding-done-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.feeding-done-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feeding-done-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.feeding-done-time {
  font-size: 15px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.feeding-done-summary {
  width: 100%;
  background: var(--color-card);
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
}
.feeding-done-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem 0;
}
.feeding-done-summary-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.feeding-done-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.feeding-done-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.125rem;
  border-top: 0.5px solid var(--color-separator);
}
.feeding-done-row:first-of-type {
  border-top: none;
}
.feeding-done-row-label {
  font-size: 15px;
  color: var(--color-muted);
}
.feeding-done-row-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.feeding-done-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* iOS Segmented Control */
.segment-toggle {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 1rem;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: transparent;
  color: var(--color-text-tertiary);
  border: none;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
}

.segment-toggle.active {
  background-color: var(--color-card);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.segment-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Segment group container — iOS style track */
.segment-group {
  display: flex;
  padding: 2px;
  border-radius: 8px;
  background-color: var(--color-fill);
  gap: 0;
}

.segment-group .segment-toggle {
  border: none;
}

/* Green active variant for segment toggles (e.g. feeding side) */
.segment-group[data-green-active] .segment-toggle.active {
  background: var(--color-primary-gradient);
  color: #ffffff;
  box-shadow: none;
}

/* Diaper type selection cards — tall cards with colored active border */
.segment-toggle[data-diaper-toggle] {
  border-color: var(--color-border);
}

.segment-toggle[data-diaper-toggle][aria-pressed="true"],
.segment-toggle[data-diaper-toggle].active {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background-color: var(--color-card);
  box-shadow: 0 1px 4px rgba(61, 138, 90, 0.15);
}

/* Legacy segment toggles without group wrapper */
.flex > .segment-toggle:not(.segment-group .segment-toggle) {
  border: 1px solid var(--color-border);
}

.flex > .segment-toggle:not(.segment-group .segment-toggle).active {
  background: var(--color-primary-gradient);
  color: #ffffff;
  border-color: transparent;
}

.input {
  width: 100%;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--radius-button);
  background-color: var(--color-card);
  color: var(--color-text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  border: 1px solid var(--color-border);
}

textarea.input {
  padding: 0.75rem 1rem;
  min-height: auto;
}

select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.input:focus {
  border-color: var(--color-blue);
  outline: 2px solid var(--color-blue);
  outline-offset: -1px;
}

.input::placeholder {
  color: var(--color-text-quaternary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Status colors */
.text-green-600 { color: var(--color-primary); }
.bg-green-100 { background-color: var(--color-primary-light); }
.text-red-500 { color: var(--color-accent); }
.bg-yellow-100 { background-color: var(--color-diaper-light); }
.text-yellow-800 { color: var(--color-orange); }
.bg-blue-100 { background-color: var(--color-primary-light); }
.text-blue-800 { color: var(--color-primary); }
.bg-gray-100 { background-color: var(--color-fill); }
.text-gray-600 { color: var(--color-text-tertiary); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-gray-100 { border-color: var(--color-border); }

/* Header bar — iOS Large Title style */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
}

.header-greeting {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.header-baby-name {
  font-family: 'Lora', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.header-baby-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--color-blue);
  background: none;
  border: none;
  cursor: pointer;
}

.header-icon-btn:hover {
  background-color: var(--color-fill);
}

.header-icon-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Login brand — iOS centered */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.login-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.login-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Login inline rows — iOS grouped form */
.login-row {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 1rem;
  cursor: text;
}

.login-row-label {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  width: 90px;
  flex-shrink: 0;
}

.login-row-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  outline: none;
  padding: 0;
  min-height: 44px;
}

.login-row-input::placeholder {
  color: var(--color-text-quaternary);
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.login-subtitle {
  font-size: 15px;
  color: var(--color-text-tertiary);
}

/* Baby switcher dropdown */
.baby-switcher {
  position: relative;
  display: inline-block;
}
.header-baby-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}
.header-baby-trigger::-webkit-details-marker { display: none; }

.baby-switcher-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 260px;
  background-color: var(--color-card);
  border-radius: 0.875rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 4px;
}
.baby-switcher-row {
  margin: 0;
}
.baby-switcher-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  border-radius: 10px;
  text-decoration: none;
}
.baby-switcher-item:hover {
  background-color: var(--color-surface-muted);
}
.baby-switcher-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.baby-switcher-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.baby-switcher-name {
  font-weight: 600;
  font-size: 0.9375rem;
}
.baby-switcher-age {
  font-size: 0.75rem;
  color: var(--color-muted);
  font-weight: 400;
}
.baby-switcher-check {
  flex-shrink: 0;
  margin-left: auto;
}
.baby-switcher-manage {
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 500;
  gap: 10px;
}
.baby-switcher-divider {
  height: 0.5px;
  background-color: var(--color-border);
  margin: 4px 8px;
}

/* Page header — iOS Large Title for sub-pages */
.page-header {
  padding: 4px 20px 8px;
}

.page-header-label {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.page-header-title {
  font-family: 'Lora', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

/* iOS Grouped List — Settings */
.settings-list {
  display: flex;
  flex-direction: column;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0;
  font-size: 1rem;
  text-decoration: none;
  color: var(--color-text);
}

.settings-item + .settings-item {
  border-top: 0.5px solid var(--color-border);
}

.settings-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-item-icon {
  width: 20px;
  height: 20px;
}

.settings-item-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-item-value {
  font-size: 1rem;
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.settings-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-border);
}

.settings-chevron svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* iOS-style icon badge for timeline entries */
.icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-badge svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-badge-feed {
  background-color: var(--color-feed-light);
  color: var(--color-primary);
}

.icon-badge-sleep {
  background-color: var(--color-sleep-light);
  color: var(--color-sleep);
}

.icon-badge-diaper {
  background-color: var(--color-diaper-light);
  color: var(--color-orange);
}

.icon-badge-tummy { background: var(--color-tummy-light); color: var(--color-tummy); }
.icon-badge-bath { background: var(--color-bath-light); color: var(--color-bath); }
.icon-badge-med { background: var(--color-med-light); color: var(--color-med); }

/* ─── Growth page ─────────────────────────────────────────────────────── */

.growth-header {
  padding: 0 0 0.75rem;
}
.growth-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.growth-title {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}
.growth-subtitle {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: 0.125rem 0 0;
}
.growth-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.growth-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.growth-metric-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: var(--color-growth-tabs-bg);
  height: 40px;
}
.growth-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-growth-tab-text);
  text-decoration: none;
  transition: all 200ms ease;
}
.growth-tab.active {
  background: var(--color-growth-tab-active);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.growth-chart-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.growth-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.growth-chart-value {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}
.growth-chart-sub {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0.125rem 0 0;
}
.growth-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-bottom: 20px;
  position: relative;
}
.growth-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.growth-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: var(--color-primary-light);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  transition: height 300ms ease;
}
.growth-bar--latest {
  background: var(--color-primary);
}
.growth-bar-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: var(--color-primary);
}
.growth-bar--latest .growth-bar-label {
  color: #fff;
  font-weight: 600;
}
.growth-bar-month {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}
.growth-bar-month--latest {
  color: var(--color-text);
  font-weight: 600;
}
.growth-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.growth-history-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text);
  margin: 0;
}
.growth-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
}
.growth-entry-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.growth-entry-body {
  flex: 1;
  min-width: 0;
}
.growth-entry-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.growth-entry-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 2px 0 0;
}
.growth-entry-change {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
}
.growth-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

/* Growth slide-up dialog */
.growth-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}
.growth-dialog::backdrop {
  background: rgba(0,0,0,0.2);
}
.growth-dialog .growth-modal {
  width: 100%;
  background: var(--color-card);
  border-radius: 24px 24px 0 0;
}
.growth-modal-handle {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.growth-modal-handle span {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
}
.growth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 12px;
}
.growth-modal-cancel,
.growth-modal-save {
  background: none;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  cursor: pointer;
  color: var(--color-primary);
  padding: 0;
}
.growth-modal-cancel { font-weight: 500; }
.growth-modal-save { font-weight: 600; }
.growth-modal-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
}
.growth-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px 40px;
}
.growth-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.growth-modal-field[hidden] {
  display: none;
}
.growth-modal-label {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.growth-modal-input {
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
}
.growth-modal-val-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.growth-modal-val-row .growth-modal-input {
  flex: 1;
}
.growth-modal-unit {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: var(--color-text);
  flex-shrink: 0;
}
.growth-modal-select {
  height: 48px;
  padding: 0 12px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  width: 80px;
  flex-shrink: 0;
  appearance: auto;
}
[data-weight-imperial],
[data-weight-metric] {
  display: contents;
}
[data-weight-imperial][hidden],
[data-weight-metric][hidden] {
  display: none;
}

/* iOS-style profile row */
/* Manage Children page */
.children-header {
  padding: 0 0 0.5rem;
}
.children-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: 2px;
}
.children-title {
  font-family: 'Lora', serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}
.children-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0 0 1.5rem;
}
.children-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.children-card {
  padding: 0;
  border-radius: 14px;
}
.children-card-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}
.children-card-summary::-webkit-details-marker { display: none; }
.children-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.children-info {
  flex: 1;
  min-width: 0;
}
.children-name {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.children-age {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 2px 0 0;
}
.children-edit-icon {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.children-chevron {
  color: var(--color-border);
  flex-shrink: 0;
}
.children-edit-form {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.children-add-section {
  margin-top: 12px;
}
.children-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 0;
  border-radius: 14px;
  border: 1.5px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.children-add-btn::-webkit-details-marker { display: none; }
.children-add-form {
  padding: 16px 0 0;
}

/* iOS toggle as label+checkbox (for forms) */
.ios-toggle-wrap {
  position: relative;
  width: 51px;
  height: 31px;
  flex-shrink: 0;
}
.ios-toggle-wrap .ios-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.ios-toggle-wrap .ios-toggle {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--color-fill, #e5e4e1);
  cursor: pointer;
  transition: background 200ms ease;
}
.ios-toggle-wrap .ios-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 200ms ease;
}
.ios-toggle-wrap .ios-toggle-input:checked + .ios-toggle {
  background: var(--color-primary);
}
.ios-toggle-wrap .ios-toggle-input:checked + .ios-toggle::after {
  transform: translateX(20px);
}

.milestone-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.milestone-icon--achieved {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.milestone-icon--pending {
  background: var(--color-diaper-light);
  color: var(--color-orange);
}

.settings-group-label {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary);
  margin: 0 0 0.5rem;
}

/* More page header */
.more-header {
  padding: 0 0 0.5rem;
}
.more-header-label {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.more-header-title {
  font-family: 'Lora', serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.profile-avatar svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* iOS Toggle Switch */
.ios-toggle {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background-color: var(--color-surface-muted);
  cursor: pointer;
  transition: background-color 200ms ease;
  flex-shrink: 0;
}

.ios-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 200ms ease;
}

.ios-toggle.active,
.ios-toggle[aria-pressed="true"] {
  background-color: var(--color-primary);
}

.ios-toggle.active::after,
.ios-toggle[aria-pressed="true"]::after {
  transform: translateX(20px);
}

/* Stat cards — Home summary row */
/* KPI cards – time since last */
/* Home grid — unified Last / Next layout */
.home-grid {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.home-grid-headers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-grid-spacer {
  width: 2.75rem;
  flex-shrink: 0;
}
.home-grid-col-label {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
}
.home-grid-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.home-grid-icon {
  width: 2.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-grid-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 6px var(--color-shadow);
  padding: 0.75rem 0.5rem;
  min-height: 4.5rem;
  gap: 0.125rem;
}
.home-grid-value {
  font-family: 'Lora', serif;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  line-height: 1.1;
}
.home-grid-sub {
  font-size: 0.6875rem;
  color: var(--color-muted);
}
.home-grid-next-feed { color: var(--color-primary); }
.home-grid-next-sleep { color: var(--color-sleep); }
.home-grid-next-diaper { color: var(--color-orange); }
.home-grid-overdue { color: var(--color-accent); }

/* KPI icon badges (shared by grid and other views) */
.kpi-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kpi-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-icon-feed {
  background: var(--color-feed-light);
  color: var(--color-primary);
}
.kpi-icon-sleep {
  background: var(--color-sleep-light);
  color: var(--color-sleep);
}
.kpi-icon-diaper {
  background: var(--color-diaper-light);
  color: var(--color-orange);
}

.stat-cards {
  display: flex;
  gap: 0.75rem;
}

.stat-card {
  flex: 1;
  background-color: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 6px var(--color-shadow);
  padding: 0.75rem;
  text-align: center;
}

.stat-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.35rem;
}

.stat-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-icon-feed {
  background-color: var(--color-feed-light);
  color: var(--color-primary);
}

.stat-icon-sleep {
  background-color: var(--color-sleep-light);
  color: var(--color-sleep);
}

.stat-icon-diaper {
  background-color: var(--color-diaper-light);
  color: var(--color-orange);
}

.stat-icon-tummy { background: var(--color-tummy-light); color: var(--color-tummy); }
.stat-icon-bath { background: var(--color-bath-light); color: var(--color-bath); }
.stat-icon-med { background: var(--color-med-light); color: var(--color-med); }

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  margin-top: 0.15rem;
}

/* Circular progress ring — Sleep timer */
.progress-ring-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring-track {
  fill: none;
  stroke: var(--color-fill);
  stroke-width: 12;
}

.progress-ring-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 534;
  stroke-dashoffset: 134;
  transition: stroke-dashoffset 1s ease;
}

.progress-ring-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-ring-inner .timer-display {
  font-size: 2.25rem;
}

/* Settings inline select */
.settings-inline-select {
  appearance: none;
  border: none;
  background: none;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text-tertiary);
  text-align: right;
  cursor: pointer;
  padding: 0;
  outline: none;
}

/* Settings expandable */
.settings-expandable summary::-webkit-details-marker {
  display: none;
}

.settings-expandable + .settings-expandable {
  border-top: 0.5px solid var(--color-border);
}

/* Report Preview */
.report-header {
  padding: 16px 20px 8px;
}

.report-back-link {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: 4px;
}
.report-title {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}
.report-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0.25rem 0 0;
}

.report-segment {
  display: flex;
  margin: 8px 20px 16px;
  background: var(--color-fill);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.report-segment-option {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 8px;
  color: var(--color-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.report-segment-option.active {
  background: var(--color-card);
  color: var(--color-text);
  box-shadow: 0 1px 3px var(--color-shadow);
}

.report-section {
  background: var(--color-card);
  border-radius: 1.25rem;
  margin: 0 20px 12px;
  padding: 1.125rem;
  box-shadow: 0 1px 4px var(--color-shadow);
}

.report-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.report-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.report-hero {
  margin: 0.5rem 0;
}

.report-hero-value {
  font-family: 'Lora', serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.report-hero-label {
  font-size: 0.8125rem;
  color: var(--color-muted);
  display: block;
}

.report-tiles {
  display: flex;
  gap: 0.625rem;
  margin: 0.75rem 0;
}

.report-tile {
  flex: 1;
  text-align: center;
  padding: 0.75rem;
  border-radius: 0.875rem;
  background: var(--color-surface-muted);
}

.report-tile-value {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
}

.report-tile-label {
  font-size: 0.75rem;
  font-weight: 600;
  display: block;
}

.report-tile-context {
  font-size: 0.6875rem;
  color: var(--color-muted);
  display: block;
}

.report-bar {
  display: flex;
  height: 0.5rem;
  border-radius: 0.25rem;
  gap: 2px;
  overflow: hidden;
}

.report-bar-segment {
  border-radius: 0.25rem;
}

.report-context {
  font-size: 0.6875rem;
  color: var(--color-muted);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.report-badge-feed,
.report-badge-sleep,
.report-badge-diaper {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 8px;
}

.report-badge-feed {
  background: var(--color-feed-light);
  color: var(--color-primary);
}

.report-badge-sleep {
  background: var(--color-sleep-light);
  color: var(--color-sleep);
}

.report-badge-diaper {
  background: var(--color-diaper-light);
  color: var(--color-orange);
}

/* Analytics redesign — split tile cards */
.insights-page-header {
  padding: 0 0 0.5rem;
}
.insights-page-title {
  font-family: 'Lora', serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}

.analytics-card {
  border-radius: 20px;
  box-shadow: 0 2px 10px var(--color-shadow);
}

.analytics-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.analytics-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.analytics-tiles {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.analytics-tile {
  flex: 1;
  text-align: center;
  padding: 0.75rem;
  border-radius: 0.875rem;
  background: var(--color-surface-muted);
}

.analytics-tile-full {
  flex: 1;
}

.analytics-tile-value {
  display: block;
  font-family: 'Lora', serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.analytics-tile-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-top: 0.125rem;
}

.analytics-context {
  font-size: 0.6875rem;
  color: var(--color-muted);
  margin: 0 0 0.375rem;
}

.analytics-trend {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.analytics-trend svg {
  flex-shrink: 0;
}

.analytics-trend-up {
  color: var(--color-primary);
}

.analytics-trend-down {
  color: var(--color-accent);
}

.analytics-trend-same {
  color: var(--color-muted);
}

.badge-feeding {
  background: var(--color-feed-light);
  color: var(--color-primary);
}

.badge-sleep {
  background: var(--color-sleep-light);
  color: var(--color-sleep);
}

.badge-diaper {
  background: var(--color-diaper-light);
  color: var(--color-orange);
}

.badge-tummy {
  background: var(--color-tummy-light);
  color: var(--color-tummy);
}

.badge-bath {
  background: var(--color-bath-light);
  color: var(--color-bath);
}
.badge-routine {
  background: var(--color-fill);
  color: var(--color-muted);
}

.analytics-patterns-card {
  border-radius: 20px;
  box-shadow: 0 2px 10px var(--color-shadow);
}

.report-share-wrap {
  padding: 20px;
  text-align: center;
}

/* Insights page */
.insights-header {
  padding: 16px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insights-premium-label {
  display: inline-block;
  width: fit-content;
  font-family: 'Lora', serif;
  font-size: 14px;
  font-style: italic;
  font-weight: normal;
  color: var(--color-primary);
  background: transparent;
  padding: 0;
}

.insights-title {
  font-family: 'Lora', serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.8px;
  margin: 0;
  color: var(--color-text);
}

.insights-cards {
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.insight-card {
  background: var(--color-card);
  border-radius: 1.25rem;
  padding: 1.125rem;
  box-shadow: 0 1px 3px var(--color-shadow);
  display: flex;
  flex-direction: column;
}
.insight-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.insight-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insight-icon svg {
  fill: currentColor;
}

.insight-icon-feed {
  background: var(--color-feed-light);
  color: var(--color-primary);
}

.insight-icon-sleep {
  background: var(--color-sleep-light);
  color: var(--color-sleep);
}

.insight-icon-diaper {
  background: var(--color-diaper-light);
  color: var(--color-orange);
}

.insight-icon-tummy {
  background: var(--color-tummy-light);
  color: var(--color-tummy);
}

.insight-icon-bath {
  background: var(--color-bath-light);
  color: var(--color-bath);
}

.insight-icon-routine {
  background: var(--color-sleep-light);
  color: var(--color-sleep);
}

.insight-badge-positive {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.insight-badge-warning {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-diaper-light);
  color: var(--color-orange);
}

.insight-badge-neutral {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-fill);
  color: var(--color-muted);
  font-weight: 500;
}
.insight-card-label {
  font-size: 0.8125rem;
  color: var(--color-muted);
  font-weight: 500;
}
.insight-card-value {
  font-family: 'Lora', serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0.25rem 0;
  color: var(--color-text);
}
.insight-card-context {
  font-size: 0.6875rem;
  color: var(--color-muted);
  margin: 0;
}

.insights-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
}

/* Insight Groups */
.insight-group {
  margin-bottom: 1.25rem;
}
.insight-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.insight-group-icon {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.insight-group-icon svg {
  fill: currentColor;
}
.insight-icon-feed {
  background: var(--color-feed-light);
  color: var(--color-primary);
}
.insight-icon-sleep {
  background: var(--color-sleep-light);
  color: var(--color-sleep);
}
.insight-icon-diaper {
  background: var(--color-diaper-light);
  color: var(--color-orange);
}
.insight-icon-tummy {
  background: var(--color-tummy-light);
  color: var(--color-tummy);
}
.insight-icon-bath {
  background: var(--color-bath-light);
  color: var(--color-bath);
}
.insight-group-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.insight-group-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.insights-period {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
}

.insights-cards {
  padding: 0 var(--px);
}

.insights-report {
  padding: 20px;
  text-align: center;
}

.insights-report-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  background: var(--color-primary-gradient);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s;
}

.insights-report-btn:hover {
  opacity: 0.85;
}

.report-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background: var(--color-primary-gradient);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.report-share-btn:hover {
  opacity: 0.9;
}

/* ─── Pricing page ─────────────────────────────────────────────────── */
.pricing-title {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}
.pricing-subtitle {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.pricing-card {
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pricing-card--recommended {
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 12px rgba(52, 199, 89, 0.12);
}
.pricing-plan-name {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.pricing-price {
  font-family: 'Lora', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
}
.pricing-period {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-tertiary);
}
.pricing-annual {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--color-muted);
}
.pricing-features li::before {
  content: "✓ ";
  color: var(--color-primary);
  font-weight: 600;
}
.pricing-badge-rec {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
  padding: 2px 10px;
  border-radius: 6px;
}
.pricing-upgrade-btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 14px;
  background: var(--color-primary-gradient);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.pricing-upgrade-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.pricing-footer {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin: 0;
}

/* ─── Legal pages (Privacy, Terms) ─────────────────────────────────── */
.legal-header {
  padding: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-label {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.legal-title {
  font-family: 'Lora', serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}
.legal-date {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.legal-card {
  border-radius: 14px;
  padding: 20px;
}
.legal-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.legal-card p,
.legal-card li {
  font-family: 'Outfit', sans-serif;
  color: var(--color-muted);
  margin: 0;
}

/* ─── Account Delete page ──────────────────────────────────────────── */
.delete-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 0;
  gap: 0;
}
.delete-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 36px;
  background: #DC2626;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.delete-title {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0 0 10px;
}
.delete-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text-tertiary);
  margin: 0 0 24px;
  max-width: 320px;
}
.delete-error {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--color-accent);
  margin: 0 0 12px;
}
.delete-form {
  width: 100%;
  border-radius: 14px;
  padding: 0;
  margin-bottom: 24px;
}
.delete-field {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
}
.delete-field-label {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  color: var(--color-text);
  width: 80px;
  flex-shrink: 0;
}
.delete-field-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  color: var(--color-text);
  outline: none;
}
.delete-field-input::placeholder {
  color: var(--color-text-tertiary);
}
.delete-btn {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background: #DC2626;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
}
.delete-cancel {
  margin: 0;
}
.delete-cancel a {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

/* Premium Gate */
.gate-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
  max-width: 440px;
  margin: 0 auto;
  gap: 0.75rem;
}

.gate-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.gate-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

.gate-subtitle {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin: 0;
  max-width: 320px;
}

.gate-features {
  width: 100%;
  padding: 0;
  margin-top: 0.5rem;
}

.gate-feature-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
}

.gate-feature-row + .gate-feature-row {
  border-top: 0.5px solid var(--color-separator);
}

.gate-cta {
  width: 100%;
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 0.5rem;
}

.gate-yearly {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
}

.gate-restore {
  font-size: 0.875rem;
  color: var(--color-primary);
  text-decoration: none;
}

.gate-restore:hover {
  text-decoration: underline;
}

/* Manual Start Time */
.manual-start-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.manual-start-field {
  margin-top: 0.25rem;
}

/* Today Header */
.today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.today-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.today-view-all {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}
.today-view-all:hover {
  text-decoration: underline;
}

/* Active Session Card */
.active-session-card {
  background: var(--color-card);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  box-shadow: 0 4px 20px rgba(26,25,24,0.07);
}
@media (min-height: 780px) {
  .active-session-card { padding: 1.125rem; gap: 0.75rem; border-radius: 1.25rem; }
}
@media (min-height: 850px) {
  .active-session-card { padding: 1.25rem; gap: 0.875rem; }
}
.active-session-card--feed { border: 1.5px solid rgba(74,143,94,0.4); }
.active-session-card--feed .active-session-timer { color: #4A8F5E; }
.active-session-card--feed .active-session-badge { background: rgba(74,143,94,0.15); color: #4A8F5E; }
.active-session-card--feed .button-primary { background: var(--color-primary-gradient); }

.active-session-card--sleep { border: 1.5px solid rgba(139,125,181,0.4); }
.active-session-card--sleep .active-session-timer { color: #8B7DB5; }
.active-session-card--sleep .active-session-badge { background: rgba(139,125,181,0.15); color: #8B7DB5; }
.active-session-card--sleep .button-primary { background: linear-gradient(180deg, #8B7DB5 0%, #796CA3 100%); }

.active-session-card--tummy { border: 1.5px solid rgba(123,166,139,0.4); }
.active-session-card--tummy .active-session-timer { color: #7BA68B; }
.active-session-card--tummy .active-session-badge { background: rgba(123,166,139,0.15); color: #7BA68B; }
.active-session-card--tummy .button-primary { background: linear-gradient(180deg, #7BA68B 0%, #5F8A71 100%); }

.active-session-card--bath { border: 1.5px solid rgba(107,158,192,0.4); }
.active-session-card--bath .active-session-timer { color: #6B9EC0; }
.active-session-card--bath .active-session-badge { background: rgba(107,158,192,0.15); color: #6B9EC0; }
.active-session-card--bath .button-primary { background: linear-gradient(180deg, #6B9EC0 0%, #5586A8 100%); }

.active-session-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.active-session-badge--paused {
  background: var(--color-accent) !important;
  color: #fff !important;
}
.active-session-actions {
  display: flex;
  gap: 0.75rem;
}
.active-session-timer {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: 'Lora', serif;
  text-align: center;
  letter-spacing: -1px;
}
.active-session-elapsed {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-muted);
  text-align: center;
}

/* Activity Page */
.activity-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 0.5rem;
}
.activity-back {
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
}
.activity-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Filter Pills */
.filter-pills {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.filter-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.filter-pill--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.filter-pill--active:hover {
  color: #fff;
}

/* Time Group Labels */
.time-group-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin: 0 0 0.5rem 0;
}

/* Activity Entry */
.activity-entry {
  background: var(--color-card);
  border-radius: var(--radius-card, 16px);
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.activity-entry:active {
  transform: scale(0.98);
}
.activity-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2px;
}
.meta-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--color-surface-muted);
  color: var(--color-muted);
  text-transform: capitalize;
}
.meta-tag-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.meta-tag-wet {
  background: #E3F2FD;
  color: #1565C0;
}
.meta-tag-dirty {
  background: #FFF3E0;
  color: #E65100;
}

/* Bottom Sheet */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bottom-sheet.open {
  pointer-events: auto;
}
.bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bottom-sheet.open .bottom-sheet-backdrop {
  opacity: 1;
}
.bottom-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-card);
  border-radius: 16px 16px 0 0;
  padding: 0.75rem 1.25rem 2rem;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.bottom-sheet.open .bottom-sheet-panel {
  transform: translateY(0);
}
.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border-strong);
  margin: 0 auto 0.75rem;
}

/* Sheet Header */
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.sheet-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.sheet-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-muted);
  border-radius: 8px;
}
.sheet-close:hover {
  background: var(--color-surface-muted);
}

/* Quick Log Grid */
/* ─── Home v2 (Option B) ───────────────────────────────────────────── */
.home-summary {
  padding: 14px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-summary-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0.5px;
  margin: 0;
}
.home-summary-kpis {
  display: flex;
  gap: 0;
}
.home-summary-kpi {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-summary-kpi-value {
  font-family: 'Lora', serif;
  font-size: 22px;
  font-weight: 700;
}
.home-summary-kpi-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.home-summary-pills {
  display: flex;
  gap: 6px;
}
.home-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--color-surface-muted);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--color-muted);
  flex: 1;
  min-width: 0;
}
.home-summary-dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.home-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0.5px;
  margin: 0 0 0.5rem;
}
.home-quick-grid {
  display: flex;
  gap: 10px;
}
.home-quick-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 68px;
  border-radius: 14px;
  background: var(--color-card);
  box-shadow: 0 1px 6px var(--color-shadow);
  text-decoration: none;
  color: var(--color-muted);
  transition: transform 100ms ease;
}
/* Responsive: taller screens get more breathing room */
@media (min-height: 780px) {
  .home-summary { padding: 16px; gap: 10px; }
  .home-summary-kpi-value { font-size: 24px; }
  .home-summary-pill { padding: 7px 10px; font-size: 12px; }
  .home-quick-btn { height: 76px; gap: 6px; }
  .home-quick-grid { gap: 12px; }
  .home-quick-col { gap: 12px; }
  .home-section-label { margin-bottom: 0.75rem; }
}
@media (min-height: 850px) {
  .home-summary { padding: 18px; gap: 12px; }
  .home-summary-kpi-value { font-size: 26px; }
  .home-quick-btn { height: 82px; }
}
.home-quick-btn:active {
  transform: scale(0.97);
}
.home-quick-btn--active {
  border: 1.5px solid;
}
.home-quick-btn--active-sleep {
  border-color: rgba(139, 125, 181, 0.25);
}
.home-quick-btn--active-feed {
  border-color: rgba(74, 143, 94, 0.25);
}
.home-quick-label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
}
/* Active session card v2 */
.active-session-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.active-session-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.active-session-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
}
.active-session-dot--sleep { background: var(--color-sleep); }
.active-session-dot--feed { background: var(--color-primary); }
.active-session-dot--tummy { background: var(--color-tummy); }
.active-session-dot--bath { background: var(--color-bath); }
.active-session-label {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.active-session-card--sleep .active-session-label { color: var(--color-sleep); }
.active-session-card--feed .active-session-label { color: var(--color-primary); }
.active-session-card--tummy .active-session-label { color: var(--color-tummy); }
.active-session-card--bath .active-session-label { color: var(--color-bath); }
.active-session-card--sleep .button-primary { background: linear-gradient(180deg, #8B7DB5 0%, #7A6DA5 100%); }
.active-session-card--feed .button-primary { background: var(--color-primary-gradient); }
.active-session-card--tummy .button-primary { background: linear-gradient(180deg, #7BA68B 0%, #6B967B 100%); }
.active-session-card--bath .button-primary { background: linear-gradient(180deg, #6B9EC0 0%, #5B8EB0 100%); }
.active-session-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* Legacy quick log grid (kept for backward compat) */
.quick-log-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 0;
}
.quick-log-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-radius: 0.875rem;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  text-align: center;
}
.quick-log-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quick-log-icon-circle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}
.quick-log-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: inherit;
}
.quick-log-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  color: #9C8E7C !important;
}
.quick-log-btn-feed { background: rgba(61,138,90,0.08); color: #4A8F5E; }
.quick-log-btn-feed .quick-log-icon-circle { background: rgba(61,138,90,0.13); }
.quick-log-btn-sleep { background: rgba(139,125,181,0.08); color: #8B7DB5; }
.quick-log-btn-sleep .quick-log-icon-circle { background: rgba(139,125,181,0.13); }
.quick-log-btn-diaper { background: rgba(212,166,74,0.08); color: #D4A64A; }
.quick-log-btn-diaper .quick-log-icon-circle { background: rgba(212,166,74,0.13); }
.quick-log-btn-tummy { background: rgba(123,166,139,0.08); color: #7BA68B; }
.quick-log-btn-tummy .quick-log-icon-circle { background: rgba(123,166,139,0.13); }
.quick-log-btn-bath { background: rgba(107,158,192,0.08); color: #6B9EC0; }
.quick-log-btn-bath .quick-log-icon-circle { background: rgba(107,158,192,0.13); }
.quick-log-btn-med { background: rgba(196,120,120,0.08); color: #C47878; }
.quick-log-btn-med .quick-log-icon-circle { background: rgba(196,120,120,0.13); }

/* Responsive */
@media (max-width: 420px) {
  .timer-display { font-size: 2.75rem; }
  .text-3xl { font-size: 1.875rem; }
  .header-bar { padding: 8px 16px; }
  .page-header { padding: 4px 16px 8px; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
}

/* ─── Feedback / Ticket system ──────────────────────────────────────── */
.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feedback-ticket {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
}
.feedback-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feedback-ticket-number {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}
.feedback-ticket-subject {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.feedback-ticket-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.feedback-ticket-time {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.feedback-status {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.feedback-status--open {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.feedback-status--in_review {
  background: var(--color-sleep-light);
  color: var(--color-sleep);
}
.feedback-status--resolved {
  background: var(--color-diaper-light);
  color: var(--color-muted);
}
.feedback-status--closed {
  background: var(--color-fill);
  color: var(--color-muted);
}
.feedback-category {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
}
.feedback-category--bug {
  background: var(--color-accent-light);
  color: var(--color-accent);
}
.feedback-category--feature {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.feedback-category--general {
  background: var(--color-fill);
  color: var(--color-muted);
}
.feedback-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  border-radius: 14px;
  background: var(--color-primary-gradient);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.feedback-new-btn--solid {
  background: var(--color-primary-gradient);
}
.feedback-form {
  padding: 18px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feedback-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feedback-form-label {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
/* Detail page */
.feedback-detail-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 0.75rem;
}
.feedback-detail-subject {
  font-family: 'Lora', serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--color-text);
  margin: 0;
}
.feedback-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.feedback-detail-date {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.feedback-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feedback-message {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feedback-message--admin {
  border-left: 3px solid var(--color-primary);
}
.feedback-message-sender {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.feedback-message-sender--admin {
  color: var(--color-primary);
}
.feedback-message-text {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
  white-space: pre-wrap;
}
.feedback-message-time {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: var(--color-text-tertiary);
  margin: 0;
}
.feedback-reply-form {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feedback-reply-input {
  width: 100%;
  min-height: 72px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}
.feedback-reply-btn {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--color-primary-gradient);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Notifications page */
.notif-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 0 1rem 0.5rem;
  margin: 0;
}
.notif-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  padding: 10px 1rem 4px;
  margin: 0;
}
.notif-interval-select {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 8px;
  border: none;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239C8E7C' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}

/* Print styles — used for Share as PDF */
@media print {
  .nav-bar,
  .bottom-sheet,
  .report-back-link,
  .report-share-wrap,
  .segment-group,
  .page-header {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .card, .report-section {
    box-shadow: none !important;
    break-inside: avoid;
  }
  .pb-24 { padding-bottom: 0 !important; }
}