/* =============================================================================
 *  pages.css  ——  各页面专属样式（首页 + 阶段 2~4 占位）
 * ============================================================================= */

/* ========== 首页（Dashboard） ========== */
.home-welcome {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--space-5);
}
.home-welcome .greet { font-size: var(--fs-h1); font-weight: 700; color: var(--color-text); }
.home-welcome .hint  { font-size: var(--fs-body); color: var(--color-text-2); }

.kcal-bar-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
  font-size: var(--fs-unit);
}
.kcal-bar-row .consumed { color: var(--color-text-2); }
.kcal-bar-row .remain   { color: var(--color-primary); font-weight: 700; }

.sleep-bignum {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-num);
  font-size: var(--fs-h1); font-weight: 700; line-height: 1;
  color: var(--color-text);
}
.sleep-bignum .h-num { font-size: var(--fs-h1); font-weight: 700; }
.sleep-bignum .h-unit { font-size: var(--fs-h2); color: var(--color-text-2); margin-right: 6px; font-weight: 500; }
.sleep-bignum .delta { font-size: var(--fs-label); color: var(--color-success); font-weight: 600; margin-left: 6px; }

.weight-spark {
  width: 100%; height: 60px;
  margin-top: 4px;
}

.tdee-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-top: auto;
}
.tdee-row .col { display: flex; flex-direction: column; }
.tdee-row .divider { width: 1px; height: 36px; background: var(--color-border); }
.tdee-row .val { font-family: var(--font-num); font-size: var(--fs-h1); font-weight: 700; color: var(--color-text); }
.tdee-row .val.muted { opacity: .8; }

/* 空态：未启用 / 无数据 */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 18px 8px;
  text-align: center;
  color: var(--color-text-2);
  font-size: var(--fs-label);
  min-height: 80px;
}
.empty .material-symbols-outlined { font-size: 28px; opacity: .5; }
.empty .hint  { font-size: var(--fs-unit); color: var(--color-text-3); }

/* ========== 占位页（阶段 2~4） ========== */
.placeholder {
  text-align: center; padding: 80px 20px;
  color: var(--color-text-2);
}
.placeholder .material-symbols-outlined {
  font-size: 64px; color: var(--color-primary);
  opacity: .35;
  margin-bottom: 12px;
}
.placeholder h2 { font-size: var(--fs-h2); color: var(--color-text); margin-bottom: 8px; font-weight: 600; }
.placeholder p  { font-size: var(--fs-label); margin-bottom: 20px; }
.placeholder .phase-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  border-radius: var(--radius-pill);
  font-size: var(--fs-unit); font-weight: 600;
}