/* ═══════════════════════════════════════════
   Dashboard
   ═══════════════════════════════════════════ */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem }
.dash-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem }
.dash-grid-full { margin-bottom: 1.5rem }

/* Countdown card */
.countdown-card {
  background: linear-gradient(135deg, var(--rose) 0%, #c0667a 100%);
  color: white; border-radius: 20px; padding: 1.6rem;
  box-shadow: 0 8px 32px rgba(212, 118, 138, .35);
}
.cd-label { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: .5rem }
.cd-number { font-family: var(--serif); font-size: 4rem; font-weight: 600; line-height: 1; margin-bottom: .25rem }
.cd-unit { font-size: .85rem; opacity: .8; margin-bottom: 1rem }
.cd-date { font-size: .8rem; opacity: .7 }
.cd-bar-wrap { margin-top: 1rem }
.cd-bar-label { display: flex; justify-content: space-between; font-size: .7rem; opacity: .7; margin-bottom: .3rem }
.cd-bar-track { height: 5px; background: rgba(255, 255, 255, .25); border-radius: 100px; overflow: hidden }
.cd-bar-fill { height: 100%; background: rgba(255, 255, 255, .8); border-radius: 100px; transition: width 1s ease }

/* Baby card */
.baby-card { background: var(--sage-p); border-radius: 20px; padding: 1.6rem }
.baby-size-emoji { font-size: 3.5rem; display: block; margin-bottom: .5rem }
.baby-size-label { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); margin-bottom: .2rem }
.baby-size-name { font-family: var(--serif); font-size: 1.5rem; color: var(--dark) }
.baby-size-sub { font-size: .8rem; color: var(--mid); margin-top: .25rem }

/* Week info card */
.week-info-card { background: var(--terra-p); border-radius: 20px; padding: 1.6rem }

/* Meals today */
.today-meal-list { display: flex; flex-direction: column; gap: .6rem }
.today-meal {
  display: grid; grid-template-columns: 70px 1fr auto; gap: .75rem; align-items: center;
  padding: .7rem .85rem; background: var(--cream); border-radius: 12px;
}
.tm-time { font-size: .7rem; font-weight: 600; color: var(--rose); letter-spacing: .05em; text-transform: uppercase }
.tm-name { font-size: .88rem; font-weight: 500; color: var(--dark) }
.tm-detail { font-size: .75rem; color: var(--light) }
.tm-check {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border);
  background: white; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; flex-shrink: 0; font-size: .85rem;
}
.tm-check.checked { background: var(--sage); border-color: var(--sage); color: white }

/* Nutrient progress */
.nutr-progress { display: flex; flex-direction: column; gap: .8rem }
.np-header { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .3rem }
.np-label { font-weight: 600 }
.np-val { color: var(--light) }
.np-track { height: 7px; background: var(--cream); border-radius: 100px; overflow: hidden }
.np-fill { height: 100%; border-radius: 100px; transition: width 1.2s ease }
.fill-rose { background: var(--rose) }
.fill-sage { background: var(--sage) }
.fill-terra { background: var(--terra) }
.fill-indigo { background: var(--indigo) }
.fill-gold { background: var(--gold) }

/* Weight log mini */
.weight-list { display: flex; flex-direction: column; gap: .5rem }
.weight-entry {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .83rem; padding: .4rem 0; border-bottom: 1px solid var(--border);
}
.weight-entry:last-child { border: none }
.we-date { color: var(--light) }
.we-val { font-weight: 600; color: var(--dark) }
.we-delta { font-size: .75rem; padding: .1rem .4rem; border-radius: 100px }
.we-up { background: #fee8e8; color: #c94a4a }
.we-down { background: var(--sage-p); color: var(--sage) }
.we-same { background: var(--cream); color: var(--light) }

.btn-add {
  width: 100%; padding: .6rem; background: var(--cream); border: 1.5px dashed var(--border);
  border-radius: 10px; font-size: .82rem; font-weight: 500; color: var(--mid);
  transition: all .2s; margin-top: .75rem;
}
.btn-add:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-p) }