/* 轻一点 · 新增样式（同步状态、首次设置、安装引导、更新提示）
   原型视觉集中在 styles.css，这里只加本次改版需要的新组件，避免动到已定稿的视觉。 */

/* ---------- 顶部同步徽标 ---------- */
.top-right{display:flex;align-items:center;gap:8px}
.sync-badge{
  font-size:11px;font-weight:700;line-height:1;border-radius:99px;padding:7px 10px;
  border:1px solid #dfe6dc;background:#fff;color:#5c7267;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.sync-badge[data-mode="ok"]{background:#eef4e6;border-color:#d5e3c8;color:#2f6b4f}
.sync-badge[data-mode="syncing"]{background:#eef1f7;border-color:#dbe2ef;color:#3f5b7a}
.sync-badge[data-mode="offline"]{background:#f5f1e8;border-color:#e6ddc9;color:#8a7148}
.sync-badge[data-mode="unauthorized"],
.sync-badge[data-mode="error"]{background:#fbeee9;border-color:#f0d6c9;color:#a2543a}

/* ---------- 底部提示条（新版本） ---------- */
.app-banner{
  position:fixed;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));
  z-index:60;display:flex;align-items:center;gap:10px;
  background:#1e4a3b;color:#eef6ef;border-radius:16px;padding:12px 14px;
  box-shadow:0 14px 34px rgba(20,45,35,.28);
  font-size:12.5px;line-height:1.5;
}
.app-banner[hidden]{display:none}
.app-banner-text{flex:1}
.app-banner-btn{
  flex:none;border:0;border-radius:10px;background:#d8e9c4;color:#1c4536;
  font-weight:800;font-size:12px;padding:9px 13px;
}

/* ---------- 首次设置浮层 ---------- */
.overlay{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(24,42,34,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  overflow-y:auto;
}
.overlay[hidden]{display:none}
.overlay-card{
  width:100%;max-width:390px;background:#fff;border-radius:24px;padding:22px;
  box-shadow:0 24px 60px rgba(18,38,30,.3);
}
.onboard-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.onboard-brand .brand-mark{width:37px;height:37px;border-radius:13px;background:#275b48;color:#fff;display:grid;place-items:center;font-weight:800;font-size:21px}
.onboard-brand div:last-child{display:flex;flex-direction:column}
.onboard-brand strong{font-size:17px;letter-spacing:-.3px}
.onboard-brand span{font-size:11px;color:#8a9a90;margin-top:2px}
.onboard-p{font-size:13px;line-height:1.75;color:#4d6058;margin:0 0 14px}
.onboard-label{display:block;font-size:12px;font-weight:700;color:#3c5349;margin:10px 0 6px}
.onboard-input{
  width:100%;border:1px solid #e1e6dd;border-radius:12px;padding:12px 13px;
  background:#fafbf8;font-size:16px;color:#223f30;min-height:46px;
}
.onboard-input:focus{outline:3px solid #93c7a4;outline-offset:1px}
.onboard-btn{width:100%;margin-top:14px}
.onboard-skip{display:block;width:100%;text-align:center;margin-top:12px}
.onboard-foot{font-size:11px;line-height:1.7;color:#93a29a;margin-top:12px}
.onboard-adv{margin-top:14px;border-top:1px solid #eef1ea;padding-top:12px}
.onboard-adv summary{font-size:11.5px;color:#7d8f85;font-weight:700;cursor:pointer}

/* ---------- 同步面板 ---------- */
.sync-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f0f3ec;font-size:12px}
.sync-line:last-child{border-bottom:0}
.sync-key{color:#8a9a90;flex:none}
.sync-val{color:#33473d;text-align:right;overflow-wrap:anywhere;font-weight:600}

/* ---------- 安装引导 ---------- */
.install-steps{margin:0;padding-left:19px;font-size:12.5px;line-height:2;color:#3f554a}
.install-steps strong{color:#22513d}
.install-note{font-size:11.5px;line-height:1.75;color:#8b9a92;margin-top:10px}
.install-done{font-size:12.5px;line-height:1.8;color:#2f6b4f;background:#eff5e8;border-radius:12px;padding:12px 13px}

/* 小屏兼容 */
@media (max-width:360px){
  .sync-badge{font-size:10px;padding:6px 8px}
  .onboard-brand strong{font-size:16px}
}

/* ============================================================
   iOS 修正（真机反馈：页面会缩放、记录页日期栏撑出卡片）
   ============================================================ */

/* 1) 聚焦自动放大
      iOS 在表单控件字号 < 16px 时，一旦聚焦就会把整页放大，而且不会自动缩回。
      原型里是 15px。这里用「等特异性 + 后加载」覆盖 styles.css 的 15px，
      不需要 !important，也不改动原型那份样式。 */
.field input,
.field textarea,
.meal-select,
input,
select,
textarea{font-size:16px}

/* 2) 禁止浏览器自行放大文字；去掉双击缩放 */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{touch-action:manipulation}

/* 3) iOS 的 date 控件带有自己的内在宽度和居中排版，会顶破卡片：
      去掉原生外观，宽度完全交给父容器。点一下照样弹日期轮盘，
      这里只是不让它自己决定宽度。 */
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="time"]{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  text-align:left;
  line-height:1.2;
  min-height:46px;
  background-color:#fafbf8;
}
.field input[type="date"]::-webkit-date-and-time-value{
  text-align:left;
  min-height:1.4em;
}
.field input[type="date"]::-webkit-datetime-edit{padding:0}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  margin:0 0 0 auto;
  opacity:.45;
}

/* 4) 窄屏上两列栅格与卡片不许被长内容顶破 */
.form-grid>*{min-width:0}
.card{min-width:0}
.field input[type="number"]{text-align:left}

/* ============================================================
   热量查询
   ============================================================ */

.cal-none{
  font-size:12.5px;line-height:1.7;color:#7b8b81;background:#f2f6ef;
  border-radius:12px;padding:12px 13px;margin-top:13px;
}

.cal-result{
  margin-top:13px;border:1px solid #e3e9dd;border-radius:17px;
  padding:14px;background:#fbfdf8;
}
.cal-top{display:flex;align-items:center;gap:14px}
.cal-kcal{
  flex:none;font-size:30px;font-weight:800;letter-spacing:-1.4px;
  color:#1d4a36;line-height:1;
}
.cal-kcal small{
  display:block;font-size:10px;font-weight:600;letter-spacing:0;
  color:#8fa094;margin-top:5px;
}
.cal-who{min-width:0}
.cal-who strong{display:block;font-size:14px;color:#25382f;line-height:1.5}
.cal-who span{display:block;font-size:11px;color:#86978c;line-height:1.6;margin-top:3px}

.cal-macros{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cal-macros span{
  font-size:11px;color:#4e6a5b;background:#eef4e6;border-radius:8px;padding:6px 9px;
}

.cal-note{font-size:11.5px;line-height:1.7;color:#7c8d83;margin-top:11px}

.cal-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:12px;flex-wrap:wrap;
}
.cal-src{font-size:10.5px;font-weight:700;border-radius:99px;padding:6px 9px;white-space:nowrap}
.cal-src.db{background:#e7f2e4;color:#2f6b4f}
.cal-src.ai{background:#f4eee2;color:#8a7148}

.cal-recent-label{font-size:11px;color:#95a49b;margin-top:14px;font-weight:700}
.cal-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cal-chip{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  border:1px solid #e2e8dc;background:#fff;border-radius:11px;
  padding:8px 10px;font-size:12px;color:#31473c;line-height:1.4;
}
.cal-chip small{font-size:10px;color:#8b9c92;font-weight:600}

/* ============================================================
   记录页：列表 + 当天的备注（一对多）
   ============================================================ */

.log-list{display:flex;flex-direction:column;gap:11px;margin-top:6px}

.log-row{
  display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;
  border:1px solid #e9ece5;background:#fff;border-radius:19px;
  padding:15px 16px;box-shadow:0 12px 30px rgba(32,52,41,.045);
}
.log-row:active{background:#fafbf8}

.log-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.log-row-date{display:flex;align-items:baseline;gap:7px;font-size:16px;font-weight:800;letter-spacing:-.4px;color:#22382e}
.log-row-date small{font-size:11px;font-weight:600;color:#93a29a}
.log-row-date em{font-style:normal;font-size:10px;font-weight:800;color:#2f6b4f;background:#eaf3de;border-radius:99px;padding:3px 7px}
.log-row-arrow{color:#a9b8ae;font-size:18px;line-height:1}

.log-row-meta{font-size:12px;line-height:1.7;color:#6d7f75}
.log-row-meta.muted-line{color:#a2b0a7}

.log-row-note{
  font-size:12px;line-height:1.75;color:#4e6357;background:#f6f8f2;
  border-radius:10px;padding:9px 11px;overflow-wrap:anywhere;
}
.log-row-more{color:#95a49b;margin-left:6px;white-space:nowrap}

.log-row-tags{display:flex;gap:7px;flex-wrap:wrap}
.log-row-tags span{font-size:10.5px;font-weight:700;color:#5a8169;background:#f0f5ea;border-radius:8px;padding:4px 7px}

/* 表单里的备注区 */
#note-list{display:flex;flex-direction:column;gap:9px}
.note-empty{font-size:12px;line-height:1.7;color:#8d9d94;background:#f6f8f2;border-radius:12px;padding:12px 13px}
.note-item{border:1px solid #e9ece5;border-radius:13px;padding:11px 12px;background:#fbfdf8}
.note-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.note-item-head span{font-size:10.5px;font-weight:700;color:#9aa79f}
.note-item-body{font-size:13px;line-height:1.8;color:#31473c;white-space:pre-wrap;overflow-wrap:anywhere}

#note-add{width:100%;margin-top:13px}
#log-back{width:100%;margin-top:4px}