:root {
  --primary-color: #4CAF50;
  --bg-primary: #f5f7fa;
  --text-primary: #333;
  --text-secondary: #666;
  --border-color: #e0e0e0;
  --danger: #ff5252;
}

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); }
body { overscroll-behavior-y: none; }
#app { min-height: 100%; }
.page { padding: 1rem; }
.center { display: flex; align-items: center; justify-content: center; }
.toast {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7); color: #fff; padding: 0.75rem 1rem;
  border-radius: 0.5rem; display: none; z-index: 1000;
}
.btn {
  display: block; width: 100%; padding: 0.75rem; margin: 0.5rem 0;
  background: var(--primary-color); color: #fff; border: none; border-radius: 0.5rem;
  font-size: 1rem; text-align: center; touch-action: manipulation;
}
.btn.secondary, .btn-secondary { background: #8e8e93; }
.btn.danger { background: var(--danger); }

.page-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem 0; color: var(--text-primary); }
.section-title { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem 0; color: var(--text-primary); }
.subsection-title { font-size: 0.9rem; font-weight: 600; margin: 0.75rem 0 0.5rem 0; color: var(--text-secondary); }
.empty { padding: 2rem; text-align: center; color: var(--text-secondary); }
.loading { padding: 2rem; text-align: center; color: var(--text-secondary); }

/* home */
.home-page .user-bar { display: flex; align-items: center; gap: 0.75rem; background: #fff; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.home-page .avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.home-page .user-meta { flex: 1; }
.home-page .nickname { font-weight: 600; color: var(--text-primary); }
.home-page .calorie-status { font-size: 0.875rem; color: var(--text-secondary); }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1rem 0; }
.action-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; background: #fff; border: none; border-radius: 0.75rem; padding: 1rem 0.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); font-size: 0.75rem; color: var(--text-primary); }
.action-card.primary { background: var(--primary-color); color: #fff; }
.action-icon { font-size: 1.5rem; }
.action-title { font-size: 0.75rem; }
.records-section { background: #fff; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.records-section .section-header { display: flex; justify-content: space-between; align-items: center; }
.date-input { border: 1px solid var(--border-color); border-radius: 0.375rem; padding: 0.375rem; font-size: 0.875rem; }
.quick-dates { display: flex; gap: 0.5rem; margin: 0.75rem 0; }
.quick-date { flex: 1; padding: 0.5rem; border: 1px solid var(--border-color); background: #fff; border-radius: 0.375rem; font-size: 0.875rem; }
.quick-date.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.records-list { margin-top: 0.5rem; }
.record-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.record-item:last-child { border-bottom: none; }
.record-time { width: 4rem; font-size: 0.75rem; color: var(--text-secondary); }
.record-content { flex: 1; display: flex; flex-direction: column; }
.meal-type { font-size: 0.75rem; color: var(--primary-color); }
.food-name { font-size: 0.875rem; color: var(--text-primary); }
.record-calorie { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }

/* userInfo */
.user-info-page .user-form { background: #fff; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.form-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.form-item:last-child { border-bottom: none; }
.form-label { width: 7rem; font-size: 0.875rem; color: var(--text-secondary); }
.form-input { flex: 1; border: 1px solid var(--border-color); border-radius: 0.375rem; padding: 0.5rem; font-size: 0.875rem; }
.form-unit { width: 2rem; text-align: right; font-size: 0.875rem; color: var(--text-secondary); }
.gender-select { flex: 1; display: flex; gap: 1rem; }
.radio-label { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; }
.calorie-value { flex: 1; font-weight: 600; color: var(--primary-color); text-align: right; }
.bmi-card { background: #fff; border-radius: 0.75rem; padding: 1rem; margin: 1rem 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.bmi-main { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.bmi-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.bmi-status { padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; }
.status-normal { background: #d4edda; color: #155724; }
.status-underweight { background: #fff3cd; color: #856404; }
.status-overweight { background: #ffeeba; color: #856404; }
.status-obese { background: #f8d7da; color: #721c24; }
.bmi-range { font-size: 0.75rem; color: var(--text-secondary); }
.about-section { margin-top: 1.5rem; padding: 1rem; background: #fff; border-radius: 0.75rem; }
.about-title { font-weight: 600; margin-bottom: 0.5rem; }
.about-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }

/* foodConfirm */
.food-confirm-page .photo-uploader { display: flex; align-items: center; justify-content: center; height: 12rem; background: #fff; border: 2px dashed var(--border-color); border-radius: 0.75rem; color: var(--text-secondary); }
.food-photo { width: 100%; height: 12rem; object-fit: cover; border-radius: 0.75rem; }
.result-section, .correct-form { background: #fff; border-radius: 0.75rem; padding: 1rem; margin-top: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.result-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; }
.result-label { color: var(--text-secondary); font-size: 0.875rem; }
.result-value { font-weight: 500; }
.action-btns { display: flex; gap: 0.75rem; margin-top: 1rem; }
.action-btns .btn { flex: 1; }
.dishes-section { margin-top: 0.75rem; }
.dish-item { padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.dish-name { font-weight: 500; }
.dish-detail { font-size: 0.75rem; color: var(--text-secondary); }
.dish-note { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }

/* report */
.report-page .date-section { margin-bottom: 1rem; }
.report-card { background: #fff; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.report-item { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.report-item:last-child { border-bottom: none; }
.report-label { color: var(--text-secondary); }
.report-value { font-weight: 600; }
.net-positive { color: var(--danger); }
.net-negative { color: var(--primary-color); }
.chart-section { background: #fff; border-radius: 0.75rem; padding: 1rem; margin-top: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.chart-canvas { width: 100%; height: 300px; }
.chart-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.legend-color { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.legend-value { margin-left: auto; color: var(--text-secondary); }

/* curve */
.curve-page .period-selector { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.period-btn { flex: 1; padding: 0.5rem; border: 1px solid var(--border-color); background: #fff; border-radius: 0.375rem; }
.period-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.curve-section { background: #fff; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.curve-legend { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin-top: 0.5rem; }
.data-section { background: #fff; border-radius: 0.75rem; padding: 1rem; margin-top: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.data-item { display: flex; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid #f0f0f0; }
.data-date { color: var(--text-secondary); }
.value-positive { color: var(--danger); }
.value-negative { color: var(--primary-color); }

/* weight */
.weight-page .weight-input-section { background: #fff; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.weight-input-wrap { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.weight-input-wrap .form-input { margin: 0; }
.history-section { background: #fff; border-radius: 0.75rem; padding: 1rem; margin-top: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.history-item { display: flex; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid #f0f0f0; }
.history-date { color: var(--text-secondary); }
.history-weight { font-weight: 500; }

/* recordDetail */
.record-detail-page .detail-image { width: 100%; height: 14rem; object-fit: cover; border-radius: 0.75rem; }
.info-list { background: #fff; border-radius: 0.75rem; padding: 1rem; margin-top: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.info-item { display: flex; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid #f0f0f0; }
.info-label { color: var(--text-secondary); font-size: 0.875rem; }
.info-value { font-weight: 500; font-size: 0.875rem; }

/* mealRecommend */
.meal-recommend-page .status-card { background: #fff; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 1rem; }
.status-header { display: flex; justify-content: space-between; align-items: center; }
.status-title { font-weight: 600; }
.status-advice { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; margin-top: 0.5rem; }
.calorie-section { background: #fff; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.calorie-row { display: flex; align-items: center; justify-content: space-around; margin: 0.75rem 0; }
.calorie-item { text-align: center; }
.calorie-label { display: block; font-size: 0.75rem; color: var(--text-secondary); }
.calorie-value { font-size: 1.125rem; font-weight: 600; }
.calorie-increase { color: #e67e22; }
.calorie-decrease { color: var(--primary-color); }
.calorie-arrow { font-size: 1.25rem; color: var(--text-secondary); }
.calorie-tip { font-size: 0.875rem; color: var(--text-secondary); }
.meal-section { background: #fff; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.meal-category { margin-bottom: 1rem; }
.category-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.category-name { font-weight: 600; }
.category-cal { font-size: 0.875rem; color: var(--text-secondary); }
.meal-item { border: 1px solid #f0f0f0; border-radius: 0.5rem; margin-bottom: 0.5rem; overflow: hidden; }
.meal-header-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; cursor: pointer; }
.meal-info { display: flex; flex-direction: column; }
.meal-name { font-weight: 500; }
.meal-ingredient-count { font-size: 0.75rem; color: var(--text-secondary); }
.meal-right { display: flex; align-items: center; gap: 0.5rem; }
.meal-cal { font-weight: 600; color: var(--primary-color); }
.expand-icon { font-size: 0.75rem; transition: transform 0.2s; }
.expand-icon.expanded { transform: rotate(180deg); }
.ingredient-detail { padding: 0 0.75rem 0.75rem; background: #fafafa; }
.ingredient-item { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.875rem; border-bottom: 1px solid #f0f0f0; }
.ingredient-total { text-align: right; font-weight: 600; padding-top: 0.5rem; }
.tips-section { background: #fff; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.tips-list { padding-left: 1.25rem; margin: 0; }
.tip-item { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem; line-height: 1.5; }

/* foodReference */
.food-reference-page .header { margin-bottom: 1rem; }
.header-subtitle { font-size: 0.875rem; color: var(--text-secondary); }
.tabs { display: flex; background: #fff; border-radius: 0.75rem; overflow: hidden; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.tab-item { flex: 1; padding: 0.75rem; border: none; background: #fff; font-size: 0.875rem; color: var(--text-secondary); }
.tab-item.active { color: var(--primary-color); font-weight: 600; border-bottom: 2px solid var(--primary-color); }
.reference-content { background: #fff; border-radius: 0.75rem; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.section-intro { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.food-item { padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.food-header { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
.food-name { font-weight: 500; }
.food-cal { font-weight: 600; }
.high-cal { color: var(--danger); }
.low-cal { color: var(--primary-color); }
.food-desc { font-size: 0.875rem; color: var(--text-secondary); }
.trap-card { border: 1px solid #f0f0f0; border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem; }
.trap-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.trap-icon { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.safe-icon { background: var(--primary-color); }
.danger-icon { background: #f39c12; }
.trap-card-title { font-weight: 600; }
.trap-card-subtitle { font-size: 0.75rem; color: var(--text-secondary); }
.trap-item { padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.trap-item-header { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
.trap-item-name { font-weight: 500; }
.trap-label { font-weight: 600; }
.safe-cal { color: var(--primary-color); }
.danger-cal { color: var(--danger); }
.trap-tip { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }