:root{
  --bg:#f7fbf8;
  --card:#ffffff;
  --green:#49a078;      /* 营养/健康感的墨绿 */
  --green-weak:#79c2a0; /* 柔和点缀 */
  --text:#123;
  --muted:#677;
  --border:#e7efe9;
  --pill:#f0f7f3;
}

/* 防止移动端初始需要缩放 & 横向滚动 */
html, body { max-width: 100%; overflow-x: hidden; }

*{ box-sizing:border-box }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC","Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
}

h1{ margin:0 0 .4rem 0; font-size:1.35rem }
h2{ margin:0 0 .6rem 0 }
h3{ margin:.2rem 0 }
hr{ border:none; border-top:1px solid var(--border); margin:1rem 0 }
.muted{ color:var(--muted) }
.small{ font-size:.9rem }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }

.btn{
  background:var(--green);
  border:none; color:#fff; padding:.55rem .9rem;
  border-radius:.7rem; cursor:pointer; transition:.2s; margin-right:.5rem;
}
.btn:hover{ filter:brightness(0.95) }
.btn.primary{ box-shadow:0 6px 16px rgba(73,160,120,.25) }
.btn.outline{ background:#fff; color:var(--green); border:1px solid var(--green) }
.btn.danger{ background:#d64545 }
.btn.danger:hover{ filter:brightness(0.95) }

.error{
  background:#ffecec; color:#b00; padding:.6rem;
  border:1px solid #f6caca; border-radius:.6rem; margin-top:.6rem;
}

/* 布局 */
.layout{
  display:grid; grid-template-columns: 300px 1fr;
  gap: 1.2rem; padding: 1.2rem; max-width:1200px; margin:0 auto;
}
.main{ display:flex; flex-direction:column; gap:1.2rem; width:100%; margin:0 auto; }

/* 卡片 */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:1rem; box-shadow:0 8px 24px rgba(0,0,0,.04);
  width:100%;
}
.card-flat{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:.8rem; margin:.6rem 0; width:100%;
}

/* 侧栏（桌面端可见） */
.sidebar{ position:sticky; top:1.2rem; height:fit-content }

/* 表单 */
.profile label{ display:block; margin-bottom:.6rem }
.profile input{
  width:100%; padding:.5rem .6rem; border:1px solid var(--border); border-radius:.6rem;
}

/* 交互区域 */
.chat textarea{
  width:100%; padding:.7rem; border:1px solid var(--border);
  border-radius:.8rem; resize:vertical;
}
.row{ display:flex; align-items:center; gap:.6rem; margin-top:.6rem }
.row-sb{ display:flex; align-items:center; justify-content:space-between; gap:.6rem }

/* 数据 pill 与网格 */
.grid4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.6rem; margin:.2rem 0 }
.pill{
  background:var(--pill); border:1px dashed var(--border);
  padding:.45rem .6rem; border-radius:999px; text-align:center;
}
.pill.subtle{ opacity:.85 }

/* 食材列表 */
.items{ list-style:none; padding-left:1rem; margin:0 }
.items li{
  display:grid;
  grid-template-columns: 1fr 120px 120px 200px; /* 名称 | 份量 | kcal | P/F/C */
  gap:.6rem; padding:.2rem 0; border-bottom:1px dashed var(--border);
}
/* .items li .kcal{  仅做标记，样式可按需加  }
.items li .macro{  桌面端显示，移动端隐藏  } */

/* 备注 */
.note{
  background:#fbfff6; border:1px solid #e9f3c7;
  border-radius:.6rem; padding:.5rem; margin-top:.4rem;
}

/* 顶部信息条（应用用途说明） */
.hero{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(180deg, #f3faf6, #ffffff);
  border:1px solid var(--border); border-radius:14px;
  padding:.9rem 1rem; margin-bottom:.6rem; width:100%;
}
.hero .desc{ color:var(--muted); font-size:.95rem }

/* 今日总结区块 */
.summary{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:.8rem; width:100%;
}
.summary pre{
  white-space:pre-wrap; word-wrap:break-word; margin:0;
  font-family:inherit; line-height:1.45;
}

/* 移动端档案折叠（桌面隐藏、移动显示） */
.profile-accordion{ display:none; }
.profile-accordion details{
  border:1px solid var(--border); border-radius:12px; background:#fff; padding:.6rem .8rem;
}
.profile-accordion summary{
  cursor:pointer; list-style:none; font-weight:600; color:#0f5132;
}
.profile-accordion summary::-webkit-details-marker{ display:none; }
.profile-accordion .profile{ margin-top:.6rem }

/* —— 移动端适配 —— */
@media (max-width: 900px){
  .layout{ grid-template-columns: 1fr }
  .sidebar{ display:none }                 /* 不再浮在主界面上 */
  .profile-accordion{ display:block }      /* 顶部折叠启用 */

  .grid4{ grid-template-columns: repeat(2,1fr) }

  /* 关键：收窄食材行，隐藏 P/F/C，避免横向撑宽与文本竖排 */
  .items li{
    grid-template-columns: 1fr 90px 90px;  /* 名称 | 份量 | kcal */
    gap:.5rem;
  }
  .items li .macro{ display:none }         /* 隐藏 P/F/C */
  .pill{ padding:.4rem .55rem }
  .meal .row-sb.small.muted {
    flex-direction: column;       /* 从横向改为纵向排列 */
    align-items: flex-start;      /* 左对齐（看起来自然） */
    gap: 0.2rem;                  /* 两行之间留一点间距 */
  }
}