:root {
  --bg-page: #f7f8f6;
  --glucose: #ef756b;
  --glucose-light: #fde8e6;
  --diet: #3d8e69;
  --diet-light: #e8f3ed;
  --warn: #f3a35a;
  --warn-light: #fef3e6;
  --text: #20312c;
  --text-muted: #6b7c76;
  --peach: #f7d3b3;
  --peach-nav: #ebcfa7;
  --peach-light: #fff0f5;
  --peach-bg: linear-gradient(180deg, #fce4d6 0%, #f7d3b3 45%, #fff5ee 100%);
  --pink: #f5508c;
  --pink-dark: #e8456f;
  --coral: #ef756b;
  --coral-light: #fde8e6;
  --btn-gradient: linear-gradient(90deg, #ef756b 0%, #f0886a 100%);
  --btn-green: linear-gradient(90deg, #3d8e69 0%, #4fa87d 100%);
  --white: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f0f2f0;
  --gray-200: #e4e8e5;
  --gray-300: #cdd3cf;
  --gray-400: #9aa8a2;
  --gray-500: #6b7c76;
  --gray-700: #3a4a44;
  --gray-900: #20312c;
  --carbs: #7eb8da;
  --protein: #f0a080;
  --fat: #e87878;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --phone-w: 375px;
  --nav-h: 44px;
  --tabbar-h: 56px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--font);
  background: #e8e8e8;
  color: var(--gray-900);
  line-height: 1.5;
  min-height: 100vh;
}

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

img { max-width: 100%; display: block; }

.phone {
  width: var(--phone-w);
  min-height: 667px;
  margin: 0 auto;
  background: var(--bg-page);
  color: var(--text);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.phone--v2 { background: var(--bg-page); }

.phone--plain { background: var(--white); }
.phone--light { background: var(--peach-light); }

.nav-bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--peach);
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  position: relative;
  flex-shrink: 0;
}

.nav-bar--pink { background: var(--pink); }
.nav-bar--peach-nav { background: var(--peach-nav); color: var(--gray-900); }
.nav-bar--white { background: var(--white); color: var(--gray-900); }

.nav-bar .back {
  position: absolute;
  left: 12px;
  font-size: 14px;
  color: inherit;
  opacity: 0.85;
}

.page-body {
  padding: 12px 16px 80px;
  overflow-y: auto;
  max-height: calc(667px - var(--nav-h));
}

.page-body--no-tab {
  max-height: calc(667px - var(--nav-h));
  padding-bottom: 24px;
}

.card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  overflow: hidden;
}

.card-pad { padding: 16px; }

.card-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 12px 24px;
  transition: opacity 0.2s;
}

.btn:active { opacity: 0.85; }

.btn-primary {
  background: var(--btn-gradient);
  color: var(--white);
  width: 100%;
}

.btn-pink {
  background: var(--pink);
  color: var(--white);
}

.btn-gray {
  background: var(--gray-300);
  color: var(--white);
}

.btn-outline {
  background: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
}

.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--white);
  color: var(--gray-900);
}

.input::placeholder { color: var(--gray-400); }

.input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}

.input-row:last-child { border-bottom: none; }

.input-row label { color: var(--gray-900); flex-shrink: 0; }

.input-row .value {
  color: var(--gray-400);
  text-align: right;
  flex: 1;
  margin-left: 16px;
}

.segment {
  display: inline-flex;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  padding: 2px;
}

.segment-item {
  padding: 6px 16px;
  font-size: 13px;
  border-radius: var(--radius-pill);
  color: var(--gray-700);
  cursor: pointer;
}

.segment-item.active {
  background: var(--coral-light);
  color: var(--white);
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  font-size: 14px;
  color: var(--gray-500);
  position: relative;
  cursor: pointer;
}

.tab.active {
  color: var(--coral);
  font-weight: 600;
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--coral);
  border-radius: 1px;
}

.nutrient-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.nutrient-item {
  text-align: center;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.nutrient-item .label { color: var(--gray-500); margin-bottom: 4px; }
.nutrient-item .val { font-weight: 600; font-size: 14px; }

.nutrient-item.carbs { background: rgba(126, 184, 218, 0.15); }
.nutrient-item.carbs .label { color: var(--carbs); }
.nutrient-item.protein { background: rgba(240, 160, 128, 0.15); }
.nutrient-item.protein .label { color: var(--protein); }
.nutrient-item.fat { background: rgba(232, 120, 120, 0.15); }
.nutrient-item.fat .label { color: var(--fat); }

.list-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--gray-900);
  text-align: center;
  cursor: pointer;
}

.list-btn:last-child { margin-bottom: 0; }

.tabbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--tabbar-h);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  display: flex;
  z-index: 100;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--gray-500);
  gap: 2px;
}

.tabbar-item.active { color: var(--diet); }

.tabbar-item svg { width: 22px; height: 22px; }

.fab {
  position: absolute;
  right: 16px;
  bottom: calc(var(--tabbar-h) + 16px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(245, 80, 140, 0.4);
  cursor: pointer;
  z-index: 50;
}

.fab svg { width: 24px; height: 24px; fill: var(--white); }

.chart-area {
  height: 140px;
  position: relative;
  margin: 12px 0;
  overflow: hidden;
}

.chart-area svg { width: 100%; height: 100%; }

.chart-x {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--gray-500);
  padding: 0 4px;
}

.table-simple {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table-simple th {
  background: var(--gray-100);
  padding: 10px 8px;
  font-weight: 500;
  text-align: left;
}

.table-simple td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--gray-100);
}

.table-simple tr:nth-child(even) td { background: var(--gray-50); }

.notice-banner {
  background: #fff0f0;
  color: #c0392b;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.badge-required { color: #e74c3c; }

.link-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--gray-100);
}

.link-arrow:last-child { border-bottom: none; }

.link-arrow .arrow { color: var(--gray-400); font-size: 12px; }

.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tag {
  padding: 6px 14px;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--gray-700);
}

.tag.active {
  background: var(--coral-light);
  color: var(--white);
}

.timeline-item {
  position: relative;
  padding-left: 20px;
  margin-bottom: 16px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.timeline-item::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: -16px;
  width: 2px;
  background: var(--gray-200);
}

.timeline-item:last-child::after { display: none; }

.chat-bubble {
  background: #fde8ef;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  max-width: 85%;
  margin-bottom: 16px;
}

.chat-input-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-input-bar input {
  flex: 1;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 14px;
  outline: none;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.icon-btn svg { width: 18px; height: 18px; fill: var(--white); }

.logo-heart {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
}

.app-logo {
  width: 180px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
  object-fit: contain;
}

.app-logo--sm {
  width: 80px;
  margin-bottom: 12px;
}

.splash-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 2px;
}

.splash-sub {
  text-align: center;
  font-size: 12px;
  color: var(--coral);
  letter-spacing: 3px;
  margin-top: 4px;
}

.splash-slogan {
  text-align: center;
  font-size: 14px;
  color: var(--gray-700);
  margin-top: 24px;
  padding: 0 32px;
}

.center-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 667px;
  padding: 40px 24px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-700);
  margin-top: 32px;
  line-height: 1.6;
}

.checkbox-row input { margin-top: 3px; flex-shrink: 0; }

.filter-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.filter-btn {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-size: 12px;
  color: var(--gray-700);
  cursor: pointer;
}

.filter-btn.active {
  background: var(--pink);
  color: var(--white);
  border-color: var(--pink);
}

.vs-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-style: italic;
  color: var(--gray-500);
  font-weight: 600;
}

.compare-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px 16px;
  background: #fdeee4;
}

.food-placeholder {
  width: 72px;
  height: 72px;
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--gray-500);
}

.action-row {
  display: flex;
  border-top: 1px solid var(--gray-100);
}

.action-row button {
  flex: 1;
  padding: 12px;
  border: none;
  background: var(--white);
  font-family: inherit;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.action-row button + button { border-left: 1px solid var(--gray-100); }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

.summary-grid .num { font-size: 20px; font-weight: 600; }
.summary-grid .lbl { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

.meal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
}

.meal-header .kcal { font-weight: 400; color: var(--gray-500); font-size: 13px; }

.add-circle {
  width: 40px;
  height: 40px;
  border: 2px dashed var(--gray-300);
  border-radius: 50%;
  margin: 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 24px;
  cursor: pointer;
}

.pill-group {
  display: flex;
  gap: 8px;
}

.pill {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  background: var(--gray-100);
  color: var(--gray-600);
  border: none;
  cursor: pointer;
}

.pill.active { background: #fde8e8; color: var(--coral); }

.med-form {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 12px 0;
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.btn-row .btn { flex: 1; }

.gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.gallery h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

.gallery p {
  color: var(--gray-500);
  margin-bottom: 24px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.gallery-grid a {
  display: block;
  padding: 16px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  font-size: 14px;
  transition: transform 0.15s;
}

.gallery-grid a:hover { transform: translateY(-2px); }

.phone--salmon { background: #fbbdae; }

.date-picker-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--shadow);
}

.date-picker-bar svg { flex-shrink: 0; }

.energy-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  font-size: 15px;
}

.energy-summary .val { font-weight: 600; }

.meal-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.meal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}

.meal-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #b08080;
  margin-bottom: 10px;
}

.meal-card-meta .delete-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--gray-400);
  display: flex;
}

.meal-food-item--static {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.meal-food-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}

.meal-food-row .kcal { color: var(--gray-500); font-size: 13px; }

.nutrient-split-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.nutrient-split {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  font-size: 11px;
  border: 1px solid var(--gray-200);
}

.nutrient-split .tag {
  padding: 4px 6px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 0;
}

.nutrient-split .tag.carbs { background: #fde8e8; color: #c06060; }
.nutrient-split .tag.protein { background: #fdeee0; color: #c08050; }
.nutrient-split .tag.fat { background: #fde8e8; color: #c06060; }

.nutrient-split .amount {
  flex: 1;
  padding: 4px 6px;
  background: var(--white);
  text-align: center;
  color: var(--gray-700);
}

.tab.active.coral { color: #fd7968; }
.tab.active.coral::after { background: #fd7968; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.period-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 16px;
}

.period-tab {
  padding-bottom: 10px;
  font-size: 14px;
  color: var(--gray-500);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  position: relative;
}

.period-tab.active {
  color: var(--gray-900);
  font-weight: 600;
}

.period-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #8b6914;
}

.section-label {
  font-size: 13px;
  color: var(--gray-700);
  margin: 16px 0 10px;
  font-weight: 500;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.metric-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.metric-item { text-align: center; }

.metric-item .value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.metric-item .label {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 4px;
  line-height: 1.4;
}

.gauge-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 16px;
}

.gauge-ring {
  width: 100px;
  height: 100px;
  position: relative;
  flex-shrink: 0;
}

.gauge-ring svg { width: 100%; height: 100%; }

.gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gauge-center .num { font-size: 28px; font-weight: 700; color: #5cb85c; line-height: 1; }
.gauge-center .lbl { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

.gauge-stats { flex: 1; font-size: 13px; line-height: 2; }

.bg-card {
  background: #fdeee4;
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
}

.bg-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.bg-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bg-stat-cell {
  background: var(--white);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
}

.bg-stat-cell .val { font-size: 16px; font-weight: 700; }
.bg-stat-cell .lbl { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

.btn-generate {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--btn-gradient);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-top: 16px;
}

.trends-section-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
}

.monitor-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.monitor-card-title .link { color: var(--coral); font-size: 13px; font-weight: 400; }

.monitor-slogan {
  font-size: 12px;
  color: var(--coral);
  margin-bottom: 8px;
}

.monitor-stats-row {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  font-size: 12px;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 11px;
  margin-top: 8px;
}

.chart-legend span { display: flex; align-items: center; gap: 4px; }
.chart-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.glucose-latest {
  font-size: 13px;
  margin: 12px 0;
  color: var(--gray-700);
}

.btn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-pair .btn-outline-coral {
  padding: 10px;
  border: 1px solid #fde8e8;
  background: #fff8f8;
  color: var(--coral);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.weight-center {
  text-align: center;
  padding: 16px 0;
}

.weight-box {
  display: inline-block;
  background: linear-gradient(180deg, #fde8e8, #fff5f5);
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--coral);
}

.weight-label { font-size: 12px; color: var(--gray-500); margin-top: 6px; }

.weight-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-600);
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow);
}

.quick-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.quick-card-header .link { color: var(--coral); font-size: 12px; font-weight: 400; }

.quick-card-add {
  text-align: center;
  color: var(--coral);
  font-size: 13px;
  cursor: pointer;
}

button.quick-card-add {
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  padding: 0;
}

.chart-legend-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 10px;
  margin-bottom: 8px;
}

.chart-legend-bar .item { display: flex; align-items: center; gap: 4px; }
.chart-legend-bar .swatch { width: 10px; height: 10px; border-radius: 2px; }

.chart-dual-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--gray-400);
  margin-bottom: 4px;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
  padding: 8px 0;
}

.discover-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gray-900);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0;
}

.discover-item .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0886a, #e85d4c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.discover-item .icon-box svg { width: 26px; height: 26px; fill: var(--white); }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 24px;
}

.modal-overlay.open { display: flex; }

.modal-box {
  width: 100%;
  max-width: 320px;
  max-height: calc(100% - 48px);
  background: var(--white);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-title {
  text-align: center;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--gray-100);
}

.modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.rank-item {
  background: var(--gray-100);
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--gray-900);
}

.rank-item:last-child { margin-bottom: 0; }

.modal-footer { padding: 16px; }

.btn-modal-confirm {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--glucose);
  color: var(--white);
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
}

.nav-bar--v2 {
  background: var(--white);
  color: var(--text);
  justify-content: flex-start;
  padding-left: 16px;
  font-size: 17px;
  border-bottom: 1px solid var(--gray-200);
}

.home-top {
  position: relative;
  padding-bottom: 0;
}

.home-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  line-height: 0;
}

.home-hero-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  max-height: 240px;
  object-fit: cover;
  object-position: top center;
}

.today-overview-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 12px 12px;
  margin: 55px 16px 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 12px rgba(32, 49, 44, 0.08);
}

.today-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.today-overview-head .title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.today-overview-head .date {
  font-size: 12px;
  color: var(--text-muted);
}

.today-overview-card .overview-row {
  margin-bottom: 0;
}

.today-overview-card .overview-item {
  background: transparent;
  box-shadow: none;
  padding: 8px 4px;
}

.home-quote {
  margin: 12px 16px 14px;
  padding: 14px 16px;
  background: #fef5f3;
  border: 1px solid #f5c4bc;
  border-radius: 12px;
  font-size: 13px;
  color: #8b3a3a;
  line-height: 1.7;
  text-align: center;
  font-weight: 500;
}

.overview-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin: 0 auto 6px;
  display: block;
}

/* 去除 PNG 白底/色块，与容器背景融合 */
.home-icon-img {
  mix-blend-mode: multiply;
}

.home-icon-img--plain {
  mix-blend-mode: normal;
}

.brand-hero {
  background: linear-gradient(160deg, #e8f3ed 0%, #f7f8f6 70%);
  padding: 16px 16px 20px;
  position: relative;
  overflow: hidden;
}

.brand-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.brand-hero .logo-sm { width: 72px; height: auto; }

.brand-hero-date { font-size: 13px; color: var(--text-muted); text-align: right; }
.brand-hero-tip { font-size: 12px; color: var(--diet); margin-top: 2px; }

.brand-hero-illus {
  height: 80px;
  background: radial-gradient(circle at 70% 50%, rgba(61,142,105,0.15), transparent 60%);
  border-radius: var(--radius-md);
}

.overview-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.overview-item {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(32,49,44,0.04);
}

.overview-item .val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.overview-item .val.glucose { color: var(--glucose); }
.overview-item .val.diet { color: var(--diet); }
.overview-item .val.muted { color: var(--text-muted); font-size: 16px; }

.overview-item .unit { font-size: 11px; color: var(--text-muted); }
.overview-item .lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.overview-item .sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.glucose-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(32,49,44,0.05);
  border-left: 4px solid var(--glucose);
}

.glucose-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.glucose-card-head .title { font-size: 15px; font-weight: 600; }
.glucose-card-head .badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--diet-light);
  color: var(--diet);
}

.glucose-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.glucose-main .num { font-size: 42px; font-weight: 700; color: var(--glucose); line-height: 1; }
.glucose-main .unit { font-size: 14px; color: var(--text-muted); }

.glucose-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.glucose-meta strong { color: var(--text); font-weight: 500; }

.btn-glucose {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--glucose);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 12px;
  transition: opacity 0.15s;
}

.btn-glucose:active { opacity: 0.85; }

.btn-diet {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--diet);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.quick-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.quick-mini {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  font-family: inherit;
  isolation: isolate;
}

.quick-mini-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin: 0 auto 6px;
  display: block;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.section-head .link { font-size: 12px; color: var(--diet); font-weight: 400; }

.meal-fold {
  background: var(--white);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(32,49,44,0.04);
}

.meal-fold-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  width: 100%;
  font-size: 14px;
  color: var(--text);
}

.meal-fold-header .name { font-weight: 500; }
.meal-fold-header .status { font-size: 12px; color: var(--text-muted); flex: 1; margin-left: 12px; }
.meal-fold-header .kcal { font-size: 13px; color: var(--diet); margin-right: 8px; }
.meal-fold-header .add { color: var(--diet); font-size: 18px; font-weight: 300; }

.meal-fold-body {
  display: none;
  padding: 0 16px 14px;
  border-top: 1px solid var(--gray-100);
}

.meal-fold.open .meal-fold-body { display: block; padding-top: 12px; }
.meal-fold.open .meal-fold-header .status { display: none; }

.diet-summary-bar {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(32,49,44,0.04);
}

.diet-summary-bar .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}

.diet-summary-bar .total { font-weight: 600; color: var(--diet); }

.diet-intake-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.diet-intake-item {
  text-align: center;
}

.diet-intake-item .lbl {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.diet-intake-item .val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--diet);
}

.diet-stats-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(32,49,44,0.04);
}

.diet-stats-row {
  display: grid;
  border-bottom: 1px solid rgba(239, 117, 107, 0.12);
}

.diet-stats-row:last-child { border-bottom: none; }

.diet-stats-row--2 { grid-template-columns: 1fr 1fr; }
.diet-stats-row--3 { grid-template-columns: repeat(3, 1fr); }

.diet-stat-cell {
  padding: 10px 8px;
  text-align: center;
  border-right: 1px solid rgba(239, 117, 107, 0.12);
}

.diet-stat-cell:last-child { border-right: none; }

.diet-stats-row:first-child .diet-stat-cell {
  background: rgba(253, 232, 230, 0.55);
}

.diet-stat-cell .lbl {
  display: block;
  font-size: 12px;
  color: #b07070;
  margin-bottom: 6px;
}

.diet-stat-cell .val {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.meal-record-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}

.meal-record-time .lbl { color: var(--glucose); }
.meal-record-time .time { color: var(--text-muted); font-weight: 400; }

.meal-delete-btn {
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
  color: var(--gray-400);
  display: flex;
}

.meal-delete-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.meal-food-detail {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.meal-food-detail .nutrient-split {
  flex-direction: column;
  align-items: stretch;
}

.meal-food-detail .nutrient-split .tag {
  width: 100%;
  text-align: center;
  padding: 3px 4px;
  font-size: 10px;
}

.meal-food-detail .nutrient-split .amount {
  flex: none;
  width: 100%;
  text-align: center;
  padding: 3px 4px 4px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-muted);
}

.meal-food-item {
  background: transparent;
  border: none;
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}

.meal-food-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.glucose-trend-wrap {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.chart-y-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  padding: 2px 0;
  width: 14px;
  flex-shrink: 0;
  text-align: right;
  height: 100px;
}

.chart-area--glucose {
  flex: 1;
  min-width: 0;
}

.macro-bars { display: flex; flex-direction: column; gap: 6px; }
.macro-bar-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.macro-bar-item .label { width: 36px; }
.macro-bar-item .track { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.macro-bar-item .fill { height: 100%; border-radius: 3px; }
.macro-bar-item .fill.carbs { background: #7eb8da; }
.macro-bar-item .fill.protein { background: var(--diet); }
.macro-bar-item .fill.fat { background: var(--warn); }

.trend-mini {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(32,49,44,0.04);
}

.trend-mini-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.promo-banner {
  background: linear-gradient(135deg, #e8f3ed, #f0f7f2);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  isolation: isolate;
}

.promo-banner .text { flex: 1; font-size: 13px; color: var(--diet); font-weight: 500; line-height: 1.5; }

.promo-banner-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}

.time-tabs {
  display: flex;
  gap: 0;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-bottom: 12px;
}

.time-tab {
  flex: 1;
  padding: 8px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
}

.time-tab.active { background: var(--white); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 12px;
}

.date-nav button {
  border: none;
  background: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
}

.stat-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stat-cell {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
}

.stat-cell .val { font-size: 16px; font-weight: 700; color: var(--glucose); }
.stat-cell .lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.tip-card {
  background: var(--warn-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
}

.tip-card svg { width: 20px; height: 20px; fill: var(--warn); flex-shrink: 0; margin-top: 2px; }

.history-list { list-style: none; }

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}

.history-item:last-child { border-bottom: none; }
.history-item .val { font-weight: 600; color: var(--glucose); }
.history-item .meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.empty-chart {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.empty-chart .btn-glucose { width: auto; padding: 10px 24px; margin-top: 12px; display: inline-block; }

.overview-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.overview-stats--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 0;
}

.overview-stats--3 .overview-stat {
  padding: 14px 8px;
}

.overview-stats--3 .overview-stat .val {
  font-size: 20px;
}

.overview-stat {
  text-align: center;
  padding: 10px 4px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}

.overview-stat .val { font-size: 15px; font-weight: 700; }
.overview-stat .lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.weight-summary {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 8px 0;
}

.weight-summary .val { font-size: 18px; font-weight: 700; color: var(--diet); }
.weight-summary .lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.analysis-tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 14px;
}

.analysis-tab {
  padding-bottom: 10px;
  font-size: 14px;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}

.analysis-tab.active { color: var(--text); font-weight: 600; }
.analysis-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--diet);
}

.tir-chart {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 16px;
}

.tir-chart--full {
  justify-content: space-between;
  gap: 8px;
}

.tir-chart--full .tir-ring {
  width: 110px;
  height: 110px;
}

.tir-chart--full .tir-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding-right: 4px;
  min-width: 0;
}

.tir-ring { width: 100px; height: 100px; position: relative; flex-shrink: 0; }
.tir-ring svg { width: 100%; height: 100%; }

.tir-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tir-center .pct { font-size: 22px; font-weight: 700; color: var(--diet); }
.tir-center .lbl { font-size: 10px; color: var(--text-muted); }

.tir-legend { font-size: 12px; line-height: 2; color: var(--text-muted); }
.tir-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.insight-card {
  background: var(--diet-light);
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 12px;
}

.insight-card .title { font-weight: 600; margin-bottom: 6px; color: var(--diet); }

.discover-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
}

.discover-item-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text);
  text-decoration: none;
}

.discover-item-v2 .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--diet-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.discover-item-v2 svg { width: 22px; height: 22px; fill: var(--diet); }

.mine-header {
  background: linear-gradient(160deg, #d4ebe0 0%, #e8f3ed 50%, #f7f8f6 100%);
  padding: 24px 16px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.mine-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(61,142,105,0.15);
}

.mine-avatar-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.menu-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-item-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.menu-item.logout {
  gap: 8px;
}

.mine-name { font-size: 18px; font-weight: 600; }
.mine-id { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.menu-group {
  background: var(--white);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(32,49,44,0.04);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
}

.menu-item:last-child { border-bottom: none; }
.menu-item .arrow { color: var(--gray-400); font-size: 12px; }

.menu-item.logout { color: var(--glucose); justify-content: center; font-weight: 500; border-bottom: none; }

.mine-footer {
  text-align: center;
  padding: 24px 16px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.8;
}

.sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(32,49,44,0.4);
  display: none;
  align-items: flex-end;
  z-index: 400;
}

.sheet-overlay.open { display: flex; }

.sheet-panel {
  width: 100%;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px 32px;
  animation: sheetUp 0.2s ease;
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet-title { font-size: 16px; font-weight: 600; text-align: center; margin-bottom: 16px; }

.scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.scene-btn {
  padding: 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
}

.scene-btn.active { border-color: var(--glucose); background: var(--glucose-light); color: var(--glucose); }

.glucose-input {
  width: 100%;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  border: none;
  border-bottom: 2px solid var(--gray-200);
  padding: 12px;
  margin-bottom: 16px;
  color: var(--glucose);
  font-family: inherit;
  outline: none;
}

.glucose-input:focus { border-bottom-color: var(--glucose); }

.record-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.record-action-card {
  border-radius: var(--radius-md);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 118px;
  isolation: isolate;
}

.record-action-card .record-action-btn {
  margin-top: auto;
}

.record-action-card.glucose { background: #fde8e6; }
.record-action-card.diet { background: #e8f3ed; }

.record-action-card.glucose .record-action-icon { background-color: #fde8e6; }
.record-action-card.diet .record-action-icon { background-color: #e8f3ed; }

.record-action-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.record-action-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
}

.record-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.record-action-text .title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.record-action-text .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

.record-action-btn {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 500;
}

.record-action-card.glucose .record-action-btn { color: var(--glucose); }
.record-action-card.diet .record-action-btn { color: var(--diet); }

.glucose-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-height: 100%;
}

.glucose-form-sheet {
  width: 100%;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  animation: sheetUp 0.2s ease;
  flex-shrink: 0;
}

#glucoseSheet.has-picker .glucose-form-sheet {
  border-radius: 16px 16px 0 0;
}

.glucose-picker {
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: 0 -1px 0 var(--gray-200);
  animation: sheetUp 0.15s ease;
}

.glucose-form-row--click { cursor: pointer; }
.glucose-type-btn {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  padding: 0;
  flex: 1;
}

.glucose-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--gray-100);
}

.glucose-form-head .title { font-size: 16px; font-weight: 600; }
.glucose-form-head .bar { width: 48px; height: 4px; background: var(--gray-200); border-radius: 2px; }

.glucose-form-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}

.glucose-form-row .label { color: var(--text-muted); width: 48px; flex-shrink: 0; }
.glucose-form-row .value { flex: 1; color: var(--text); }
.glucose-form-row .value.link { color: var(--glucose); cursor: pointer; }
.glucose-form-row .icon-btn-sm {
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
  margin-left: 8px;
}

.glucose-form-row .icon-btn-sm svg { width: 20px; height: 20px; fill: var(--glucose); }

.glucose-value-input {
  flex: 1;
  border: none;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  text-align: center;
}

.glucose-form-submit {
  margin: 16px;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--glucose);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.picker-sheet {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
}

.picker-toolbar {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
}

.picker-toolbar button {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.picker-toolbar [data-picker-cancel] { color: var(--text); }
.picker-toolbar [data-picker-confirm] { color: var(--glucose); font-weight: 500; }

.picker-list {
  max-height: 200px;
  overflow-y: auto;
  position: relative;
  scroll-snap-type: y mandatory;
}

.picker-list::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  pointer-events: none;
  z-index: 1;
}

.picker-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: center;
  font-size: 15px;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  scroll-snap-align: center;
  position: relative;
  z-index: 0;
}

.picker-item.active { color: var(--text); font-weight: 600; font-size: 17px; }

.picker-wheels {
  display: flex;
  height: 180px;
  overflow: hidden;
  position: relative;
}

.picker-wheels::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 36px;
  transform: translateY(-50%);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  pointer-events: none;
  z-index: 2;
}

.picker-wheel-col {
  flex: 1;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  padding: 72px 0;
}

.picker-wheel-item {
  display: block;
  width: 100%;
  padding: 8px 4px;
  border: none;
  background: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  scroll-snap-align: center;
}

.picker-wheel-item.active {
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
}

.glucose-value-input.input-error {
  animation: inputShake 0.4s ease;
  background: #fff0ee;
}

@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.intake-fav.is-fav svg { fill: var(--glucose); filter: drop-shadow(0 0 2px rgba(239,117,107,0.5)); }
.intake-fav.is-fav { color: var(--glucose); font-weight: 600; }

.picker-columns {
  display: flex;
  padding: 8px 0 16px;
  font-size: 14px;
  text-align: center;
}

.picker-col { flex: 1; color: var(--text-muted); line-height: 2; }
.picker-col.active { color: var(--text); font-weight: 600; }

.food-page-header {
  background: linear-gradient(180deg, #fde8e6, #f7f8f6);
  padding: 12px 16px 0;
}

.food-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  margin-bottom: 12px;
}

.food-search-row input {
  flex: 1;
  border: none;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.food-search-row svg { flex-shrink: 0; fill: var(--text-muted); }

.food-type-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
}

.food-type-tab {
  flex: 1;
  padding: 10px;
  border: none;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.food-type-tab.active {
  background: linear-gradient(90deg, #ef756b, #f5a090);
  color: var(--white);
  font-weight: 600;
}
.food-type-tab:not(.active) { background: var(--white); color: var(--text); }

.food-layout {
  display: flex;
  background: var(--white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  min-height: 480px;
}

.food-categories {
  width: 88px;
  background: var(--gray-50);
  flex-shrink: 0;
  overflow-y: auto;
}

.food-cat-item {
  display: block;
  width: 100%;
  padding: 14px 8px;
  border: none;
  background: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: center;
}

.food-cat-item.active { background: var(--white); font-weight: 600; color: var(--glucose); }

.food-list-panel { flex: 1; padding: 12px; overflow-y: auto; }
.food-list-panel .panel-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

.food-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.food-list-item .name { font-size: 14px; color: var(--text); }
.food-list-item .kcal { font-size: 12px; color: var(--text); white-space: nowrap; margin-left: 8px; }
.food-list-item .kcal .num { color: var(--glucose); font-weight: 600; }
.food-list-item .kcal .unit { color: var(--text-muted); font-weight: 400; }

.food-fab {
  position: absolute;
  right: 16px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--glucose);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(239,117,107,0.4);
  cursor: pointer;
}

.food-fab svg { width: 24px; height: 24px; fill: var(--white); }

.intake-sheet .sheet-panel { padding: 0; max-height: 85%; }

.intake-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
}

.intake-food-name {
  padding: 6px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.intake-fav {
  border: none;
  background: none;
  color: var(--glucose);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.intake-fav svg { width: 20px; height: 20px; fill: var(--glucose); }

.intake-energy {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
}

.intake-energy .val { color: var(--glucose); font-weight: 700; font-size: 18px; }

.intake-weight-row {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 8px;
  font-size: 14px;
}

.intake-weight-row .num {
  flex: 1;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--glucose);
}

.num-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray-200);
  margin-top: 8px;
}

.num-key {
  background: var(--white);
  border: none;
  padding: 16px 8px;
  font-size: 20px;
  font-family: inherit;
  cursor: pointer;
}

.num-key.confirm {
  grid-row: span 2;
  background: var(--glucose);
  color: var(--white);
  font-size: 16px;
}

.meal-add-trigger {
  color: var(--diet);
  font-size: 18px;
  font-weight: 300;
  padding: 0 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}

.ring-chart-wrap { text-align: center; padding: 16px 0; }

.ring-chart {
  width: 140px;
  height: 140px;
  margin: 0 auto 12px;
  position: relative;
}

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

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ring-center .main { font-size: 22px; font-weight: 700; color: var(--diet); }
.ring-center .sub { font-size: 11px; color: var(--text-muted); }

.meal-section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
  display: flex;
  justify-content: space-between;
}

.meal-add-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.meal-add-bar button {
  flex: 1;
  padding: 8px;
  font-size: 11px;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--diet);
  cursor: pointer;
  font-family: inherit;
}

.more-link {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}

[data-time-panel] { display: none; }
[data-time-panel].active { display: block; }
[data-analysis-panel] { display: none; }
[data-analysis-panel].active { display: block; }

.quick-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.num-keypad-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 52px);
  grid-template-areas:
    "k1 k2 k3 del"
    "k4 k5 k6 ok"
    "k7 k8 k9 ok"
    "dot k0 . ok";
  gap: 1px;
  background: var(--gray-200);
}

.num-keypad-v2 .num-key {
  background: var(--white);
  border: none;
  font-size: 20px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.num-keypad-v2 .num-key:active { background: var(--gray-100); }

.num-keypad-v2 .num-key.confirm {
  background: var(--glucose);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
}

.num-keypad-v2 .num-key.del-key { font-size: 14px; color: var(--text-muted); }

.num-keypad-v2 .gk-1 { grid-area: k1; }
.num-keypad-v2 .gk-2 { grid-area: k2; }
.num-keypad-v2 .gk-3 { grid-area: k3; }
.num-keypad-v2 .gk-del { grid-area: del; }
.num-keypad-v2 .gk-4 { grid-area: k4; }
.num-keypad-v2 .gk-5 { grid-area: k5; }
.num-keypad-v2 .gk-6 { grid-area: k6; }
.num-keypad-v2 .gk-7 { grid-area: k7; }
.num-keypad-v2 .gk-8 { grid-area: k8; }
.num-keypad-v2 .gk-9 { grid-area: k9; }
.num-keypad-v2 .gk-0 { grid-area: k0; }
.num-keypad-v2 .gk-dot { grid-area: dot; }
.num-keypad-v2 .gk-ok { grid-area: ok; }

.num-keypad-food {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 52px);
  gap: 1px;
  background: var(--gray-200);
  margin-top: 8px;
  grid-template-areas:
    "k1 k2 k3 del"
    "k4 k5 k6 k7"
    "k8 k9 dot ok"
    "k0 . . .";
}

.num-keypad-food .num-key {
  background: var(--white);
  border: none;
  font-size: 20px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.num-keypad-food .num-key:active { background: var(--gray-100); }
.num-keypad-food .num-key.confirm {
  grid-area: ok;
  background: var(--glucose);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
}
.num-keypad-food .num-key.del-key { grid-area: del; font-size: 14px; color: var(--text-muted); }
.num-keypad-food .gk-1 { grid-area: k1; }
.num-keypad-food .gk-2 { grid-area: k2; }
.num-keypad-food .gk-3 { grid-area: k3; }
.num-keypad-food .gk-4 { grid-area: k4; }
.num-keypad-food .gk-5 { grid-area: k5; }
.num-keypad-food .gk-6 { grid-area: k6; }
.num-keypad-food .gk-7 { grid-area: k7; }
.num-keypad-food .gk-8 { grid-area: k8; }
.num-keypad-food .gk-9 { grid-area: k9; }
.num-keypad-food .gk-0 { grid-area: k0; }
.num-keypad-food .gk-dot { grid-area: dot; font-size: 22px; }

.sleep-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px 24px;
}

.sleep-picker-col {
  flex: 1;
  max-height: 160px;
  overflow-y: auto;
  text-align: center;
}

.sleep-picker-col button {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  background: none;
  font-size: 18px;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
}

.sleep-picker-col button.active {
  color: var(--diet);
  font-weight: 700;
  font-size: 22px;
}

.sleep-picker-unit { font-size: 14px; color: var(--text-muted); padding-left: 4px; }

.exercise-kcal { color: var(--diet); font-size: 12px; white-space: nowrap; }

.record-list-page .record-item .del-btn {
  border: none;
  background: none;
  color: var(--glucose);
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
}

.chart-box { position: relative; padding-left: 28px; padding-right: 8px; padding-bottom: 24px; }

.chart-y-label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 100%;
}

.chart-axis-y {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
}

.chart-axis-x {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
  padding: 4px 0 0 24px;
}

.chart-axis-caption {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

.chart-legend-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gray-100);
}

.chart-legend-detail--even {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  flex-wrap: nowrap;
}

.chart-legend-detail--even span {
  justify-content: center;
  white-space: nowrap;
}

.chart-legend-note {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
}

.glucose-latest-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}

.glucose-latest-text {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.glucose-latest-text strong {
  color: var(--glucose);
  font-weight: 600;
}

.glucose-latest-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn-mini-action {
  padding: 6px 10px;
  border: 1px solid #f5c4bc;
  background: #fff8f7;
  color: var(--glucose);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.chart-legend-detail span { display: flex; align-items: center; gap: 4px; }
.chart-legend-detail i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.chart-trend-dual .chart-note {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.value-sheet { width: 100%; background: var(--white); border-radius: 16px 16px 0 0; }

.value-sheet-title {
  text-align: center;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--gray-100);
}

.value-sheet-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}

.value-sheet-row .label { color: var(--text-muted); margin-right: 8px; }
.value-sheet-row .display {
  flex: 1;
  text-align: right;
  font-size: 22px;
  font-weight: 700;
  color: var(--glucose);
  min-height: 28px;
}

.value-sheet-row .unit { color: var(--text-muted); margin-left: 8px; font-size: 13px; }

.med-page { padding-bottom: 24px; }

.med-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.med-header .title { font-size: 16px; font-weight: 600; }

.med-period-pills { display: flex; gap: 6px; }

.med-period-pills button {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.med-period-pills button.active { background: var(--glucose-light); color: var(--glucose); border-color: var(--glucose); }

.med-add-link {
  text-align: right;
  color: var(--glucose);
  font-size: 13px;
  margin-bottom: 12px;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  width: 100%;
}

.med-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.med-row-num {
  width: 20px;
  font-weight: 600;
  color: var(--text-muted);
  padding-top: 8px;
}

.med-row-fields { flex: 1; }

.med-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
}

.med-field:last-child { margin-bottom: 0; }

.med-label { color: var(--text-muted); white-space: nowrap; }

.med-input {
  flex: 1;
  border: none;
  background: var(--white);
  border-radius: 4px;
  padding: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.med-input-sm { max-width: 80px; }

.med-unit {
  border: none;
  background: var(--white);
  border-radius: 4px;
  padding: 8px 4px;
  font-size: 12px;
  font-family: inherit;
}

.med-delete {
  border: none;
  background: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}

.record-list-page .record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--white);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  font-size: 14px;
}

.record-list-page .record-item .time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.fav-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.fav-page-head .title { font-size: 16px; font-weight: 600; }

.fav-tabs {
  display: flex;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  padding: 2px;
}

.fav-tab {
  border: none;
  background: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
}

.fav-tab.active {
  background: linear-gradient(135deg, #fde8e6, #f5c4bc);
  color: var(--glucose);
  font-weight: 600;
}

.fav-card {
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}

.fav-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.fav-card-head .kcal-link {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
}

.fav-nutrient-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.fav-nutrient {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
}

.fav-nutrient .lbl {
  padding: 4px 6px;
  text-align: center;
  color: var(--white);
  font-size: 11px;
}

.fav-nutrient .lbl.carbs { background: var(--glucose); }
.fav-nutrient .lbl.protein { background: #e8957a; }
.fav-nutrient .lbl.fat { background: #d4726a; }

.fav-nutrient .val {
  background: var(--white);
  padding: 6px;
  text-align: center;
  font-weight: 500;
}

.recipe-layout {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  min-height: 480px;
}

.recipe-meal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}

.recipe-meal-tab {
  border: 1px solid var(--gray-200);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-muted);
}

.recipe-meal-tab.active {
  background: var(--glucose-light);
  border-color: var(--glucose);
  color: var(--glucose);
  font-weight: 600;
}

.recipe-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: -4px 0 10px;
  line-height: 1.5;
}

.food-list-item .recipe-tag {
  font-style: normal;
  font-size: 10px;
  color: var(--glucose);
  background: var(--glucose-light);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 500;
}