/**
 * style.css —— 体重记录 App 样式（iOS 设计语言）
 * ------------------------------------------------------------
 * 设计规范：
 * - 配色：iOS 系统色板（背景 #f2f2f7 / 卡片白 / 系统蓝 #007aff / 橙 #ff9500）
 * - 卡片：大圆角 + 轻投影，段落间距紧凑（用户偏好紧凑布局）
 * - 按钮层级（用户偏好：主按钮突出且全局一致，条件不满足时置灰）：
 *     .btn-primary   主操作（蓝底白字）
 *     .btn-secondary 次要操作（浅蓝底蓝字）
 *     .btn-danger    危险操作（红字描边）
 *     .btn-plain     无边框文字按钮（用户偏好无边框次要按钮）
 * - 交互/非交互元素视觉区分：只读提示 .hint-text 用灰色小字，不做按钮外观
 * - 安全区：顶部刘海 + 底部 Home 横条（env(safe-area-inset-*)）
 */

/* ==================== 基础与变量 ==================== */
:root {
  --bg: #f2f2f7;              /* 页面背景 */
  --card: #ffffff;            /* 卡片背景 */
  --text: #1c1c1e;            /* 主文字 */
  --text-2: #8e8e93;          /* 次要文字 */
  --blue: #007aff;            /* 系统蓝（主按钮） */
  --blue-deep: #3478f6;       /* 图表主线蓝 */
  --orange: #ff9500;          /* 目标/警示橙 */
  --red: #ff3b30;             /* 危险红 */
  --green: #34c759;           /* 下降绿 */
  --separator: rgba(60, 60, 67, 0.12); /* 分割线 */
  --radius: 14px;             /* 卡片圆角 */
  --radius-btn: 10px;         /* 按钮圆角 */
  --safe-top: env(safe-area-inset-top, 0px);       /* 顶部安全区 */
  --safe-bottom: env(safe-area-inset-bottom, 0px); /* 底部安全区 */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 16px;               /* 16px 起可避免 iOS 聚焦时自动放大页面 */
  -webkit-font-smoothing: antialiased;
  /* 主体滚动：header 固定 + tabbar 固定，中间区域滚动 */
  overflow: hidden;
}

/* ==================== 顶部标题 ==================== */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: calc(var(--safe-top) + 10px) 16px 8px;
  background: rgba(242, 242, 247, 0.92);   /* 半透明毛玻璃感 */
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.app-header h1 { font-size: 28px; font-weight: 700; letter-spacing: 0.3px; }
.app-header__sub { font-size: 11px; color: var(--text-2); margin-top: 2px; }

/* ==================== 主内容区 ==================== */
.app-main {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-top) + 62px) 12px calc(72px + var(--safe-bottom));
}
.page { animation: pageIn 0.18s ease-out; }  /* 页签切换轻动效 */
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ==================== 卡片 ==================== */
.card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(29, 46, 84, 0.06);  /* 更柔和的现代投影 */
}
.card__title { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.card__count { font-size: 12px; font-weight: 400; color: var(--text-2); margin-left: 4px; }

/* ==================== 首页：当前体重卡片 ==================== */
/* 现代化：浅蓝渐变底 + 细描边，突出核心数字 */
.hero-card {
  text-align: center;
  padding: 22px 16px 16px;
  background: linear-gradient(160deg, #eaf3ff 0%, #ffffff 72%);
  border: 0.5px solid rgba(0, 122, 255, 0.10);
}
.hero-card__label { font-size: 13px; color: var(--text-2); }
.hero-card__value { font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; }
.hero-card__unit { font-size: 18px; font-weight: 500; color: var(--text-2); margin-left: 4px; }
.hero-card__meta { display: flex; justify-content: center; gap: 8px; margin: 6px 0 4px; flex-wrap: wrap; }
/* 今日多次测量徽标列表：白色半透明小胶囊，可换行 */
.hero-card__today { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.today-pill {
  font-size: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 4px 10px;
}
.today-pill b { font-weight: 700; }
.hero-card__extra { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* 徽标：变化趋势（升红降绿）；ghost 为无底色只读样式 */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(52, 199, 89, 0.12);
  color: var(--green);
}
.badge.is-up { background: rgba(255, 59, 48, 0.10); color: var(--red); }
.badge.is-flat { background: rgba(142, 142, 147, 0.12); color: var(--text-2); }
.badge--ghost { background: rgba(142, 142, 147, 0.10); color: var(--text-2); }

/* 目标进度条 */
.goal-progress { margin-top: 10px; text-align: left; }
.goal-progress__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
.goal-progress__bar { height: 8px; border-radius: 4px; background: rgba(142, 142, 147, 0.16); overflow: hidden; }
.goal-progress__fill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--blue), #5ac8fa); transition: width 0.3s ease; }

/* ==================== 表单行（label 左 + 控件右，紧凑单行） ==================== */
.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;             /* 行高加高，提升可点性与呼吸感 */
  padding: 6px 0;
  border-bottom: 1px solid var(--separator);
}
.field-row:last-of-type { border-bottom: none; }
.field-row__label { flex: 0 0 92px; font-size: 14px; color: var(--text); }
.field-row__input {
  flex: 1;
  min-width: 0;                 /* 防止 flex 子项溢出 */
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;              /* ≥16px 防 iOS 聚焦缩放 */
  text-align: right;
  color: var(--text);
}
.field-row__input::placeholder { color: #c7c7cc; }

/* 表单行左侧小图标（emoji 由系统字体渲染） */
.field-icon { font-size: 15px; margin-right: 2px; }

/* iOS 日期/时间控件：去掉右侧系统绘制的日历/时钟图标
   （该图标在部分设备上渲染异常导致行内错位），改为纯文本右对齐显示；
   点击输入框仍会正常唤起系统的日期/时间选择器 */
.field-row__input[type="date"],
.field-row__input[type="time"] {
  min-height: 44px;
  padding: 0;
  -webkit-appearance: none;     /* 去除原生外观（含右侧图标），数值照常显示 */
  appearance: none;
  text-align: right;
}
/* iOS Safari 内部值元素的对齐修正（配合右对齐） */
.field-row__input[type="date"]::-webkit-date-and-time-value,
.field-row__input[type="time"]::-webkit-date-and-time-value {
  text-align: right;
}
/* WebKit 的选择器图标一并隐藏，保证无残留 */
.field-row__input[type="date"]::-webkit-calendar-picker-indicator,
.field-row__input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

/* ==================== 按钮体系（用户偏好：主按钮全局一致） ==================== */
button { font-family: inherit; border: none; cursor: pointer; }

/* 主按钮：蓝底白字、加粗、通栏；渐变+投影更现代 */
.btn-primary {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #0a84ff, #007aff);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.28);
  transition: opacity 0.15s, transform 0.1s;
}
.btn-primary:active { transform: scale(0.98); }
/* 禁用态置灰（用户偏好：条件不满足时置灰不可点） */
.btn-primary:disabled { background: #d1d1d6; color: #f2f2f7; cursor: not-allowed; transform: none; box-shadow: none; }

/* 次要按钮：浅蓝底蓝字（导出/导入等） */
.btn-secondary {
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  background: rgba(0, 122, 255, 0.10);
  border-radius: var(--radius-btn);
  transition: opacity 0.15s;
}
.btn-secondary:active { opacity: 0.7; }

/* 危险按钮：红字 + 浅红底（清空/删除） */
.btn-danger {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--red);
  background: rgba(255, 59, 48, 0.08);
  border-radius: var(--radius-btn);
}
.btn-danger:active { opacity: 0.7; }

/* 无边框文字按钮（取消编辑） */
.btn-plain {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  font-size: 14px;
  color: var(--text-2);
  background: transparent;
}

/* 设置页按钮组：两列网格，紧凑 */
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-grid .btn-secondary { width: 100%; }
/* 导入按钮占满整行，视觉上与导出区分 */
.btn-grid .btn-secondary:last-child { grid-column: 1 / -1; }

/* ==================== 只读提示文字（与按钮区分：无底色无边框） ==================== */
.hint-text { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-top: 6px; }

/* ==================== 趋势页 ==================== */
/* iOS 分段控件（现代化：大圆角胶囊 + 加高触感） */
.segmented {
  display: flex;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 12px;
}
.segmented__item {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border-radius: 10px;
  transition: background 0.15s;
}
.segmented__item.is-active { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

#trendChart { display: block; width: 100%; }

/* 统计 2x2 网格 */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { margin-bottom: 0; padding: 12px; }
.stat-card__label { font-size: 12px; color: var(--text-2); }
.stat-card__value { font-size: 22px; font-weight: 700; margin: 4px 0 2px; }
.stat-card__hint { font-size: 11px; color: var(--text-2); }

/* ==================== 空态 ==================== */
.empty-state { text-align: center; padding: 26px 0 18px; color: var(--text-2); font-size: 14px; }
.empty-state__icon { font-size: 34px; margin-bottom: 8px; }

/* ==================== 历史列表 ==================== */
/* 日卡片：每天一个浅灰圆角块，日期间强分隔，缓解长列表阅读疲劳 */
.day-card {
  background: #f6f7fa;
  border-radius: 14px;
  padding: 2px 12px 4px;
  margin-bottom: 12px;
}
/* 日卡片标题行：日期（左）+ 笔数（右） */
.day-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px 4px;
}
.day-card__title { font-size: 13px; font-weight: 600; color: var(--text); }
.day-card__count {
  font-size: 11px;
  color: var(--text-2);
  background: rgba(142, 142, 147, 0.14);
  padding: 2px 9px;
  border-radius: 999px;
}
/* 单条记录行 */
.record-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--separator);
}
.record-item:last-child { border-bottom: none; }
.record-item__main { flex: 1; min-width: 0; }
.record-item__weight { font-size: 17px; font-weight: 600; }
.record-item__weight small { font-size: 12px; font-weight: 400; color: var(--text-2); margin-left: 2px; }
.record-item__note { font-size: 12px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-item__time { font-size: 12px; color: var(--text-2); }
/* 与前一天对比的小徽标：复用 .badge 配色（is-up 红 / 默认绿），缩小字号 */
.record-item__delta { font-size: 11px; padding: 3px 7px; flex-shrink: 0; white-space: nowrap; }
/* 行内操作按钮：小号描边样式，与只读文字明确区分 */
.record-item__edit {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--blue);
  background: rgba(0, 122, 255, 0.10);
  border-radius: 8px;
  flex-shrink: 0;
}
.record-item__edit:active { opacity: 0.7; }

/* ==================== 底部页签栏 ==================== */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  padding-bottom: var(--safe-bottom);   /* 适配 iPhone Home 横条 */
  background: rgba(249, 249, 249, 0.94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 0.5px solid var(--separator);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 0 5px;
  background: transparent;
  color: var(--text-2);
  font-size: 10px;
}
.tabbar__icon { font-size: 20px; line-height: 1; }
.tabbar__item.is-active { color: var(--blue); }

/* ==================== 弹窗 ==================== */
/* hidden 属性兜底（关键修复）：下方 .modal-mask 设置了 display:flex，
   作为作者样式会覆盖浏览器对 [hidden] 的默认 display:none，
   导致所有弹窗从页面加载起就叠着显示、最上层的遮罩挡住全部点击
   （表现为"点什么都没反应"）。此处强制任何带 hidden 的元素隐藏。 */
[hidden] { display: none !important; }

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.15s ease-out;
}
.modal {
  width: 100%;
  max-width: 340px;
  background: var(--card);
  border-radius: 16px;
  padding: 18px 16px 16px;
  animation: popIn 0.18s ease-out;
}
.modal--narrow { max-width: 280px; text-align: center; }
.modal__title { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.modal__desc { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.modal__actions { display: flex; gap: 10px; margin-top: 6px; }
/* 主按钮在弹窗按钮行内取消 width:100%（否则把旁边的"取消"挤成竖排窄条），
   与次要按钮平分一行 */
.modal__actions .btn-primary { margin-top: 0; width: auto; flex: 1; }
.modal__actions .btn-secondary { flex: 1; }
.modal__actions .btn-danger { margin-top: 0; flex: 1; background: transparent; }
/* 按钮行内文字不换行，避免窄按钮文字竖排 */
.modal__actions .btn-primary,
.modal__actions .btn-secondary,
.modal__actions .btn-danger { white-space: nowrap; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

/* ==================== Toast 轻提示 ==================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 99;
  max-width: 80vw;
  padding: 10px 18px;
  background: rgba(28, 28, 30, 0.9);
  color: #fff;
  font-size: 13px;
  border-radius: 999px;
  text-align: center;
  animation: fadeIn 0.2s ease-out;
}

/* ==================== 单位切换 chip（kg / 斤） ==================== */
/* 标题行：左标题 + 右单位切换，紧凑单行 */
.card__title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__title-row .card__title { margin-bottom: 0; }

/* chip 组：两个互斥选项（选中为蓝底白字，未选中为浅灰） */
.unit-chips {
  display: inline-flex;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}
.unit-chip {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.unit-chip.is-active { background: var(--blue); color: #fff; font-weight: 600; }
/* 编辑弹窗内的小号 chip（空间紧凑） */
.unit-chips--sm .unit-chip { padding: 3px 8px; font-size: 11px; }

/* 拍照识别按钮：次要按钮通栏（与主按钮"保存记录"形成层级区分） */
.btn-photo { width: 100%; margin-top: 12px; }

/* 首页双单位换算提示（只读小字） */
.hero-card__alt { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ==================== 拍照识别弹窗 ==================== */
.modal--wide { max-width: 400px; }

/* 照片舞台：宽度收缩包裹图片（保证框选坐标与图片精确对应），居中显示 */
.rec-stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 6px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.rec-stage img { display: block; max-width: 100%; max-height: 46vh; width: auto; height: auto; }

/* 框选区域：蓝色虚线框 + 外部压暗（用超大投影实现遮罩），可拖动 */
.rec-crop {
  position: absolute;
  border: 2px dashed var(--blue);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); /* 铺满框外区域形成压暗遮罩 */
  cursor: move;
  touch-action: none;  /* 禁止浏览器接管触摸手势，交给拖动逻辑 */
}
/* 右下角缩放手柄：实心圆点 */
.rec-crop__handle {
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: var(--blue);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: nwse-resize;
}

/* 识别进度/状态文字（只读，红→绿状态色由 JS 控制） */
.rec-progress { font-size: 13px; color: var(--text-2); padding: 8px 2px 0; text-align: center; }
.rec-progress.is-done { color: var(--green); }

/* 识别结果区 */
.rec-results__title { font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.rec-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--separator);
}
.rec-row:last-child { border-bottom: none; }
.rec-row__value { flex: 1; font-size: 18px; font-weight: 700; }
.rec-row__conf { font-size: 11px; color: var(--text-2); }
/* 候选行内的填入小按钮（斤 / kg） */
.btn-mini {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  background: rgba(0, 122, 255, 0.10);
  border-radius: 8px;
  white-space: nowrap;
}
.btn-mini:active { opacity: 0.7; }

/* ==================== 多用户（顶栏 chip + 用户管理弹窗 + 设置页入口） ==================== */

/* 标题行：左侧大标题 + 右侧用户 chip 同行排列 */
.app-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 顶栏用户 chip：浅蓝底蓝字小圆角，与 unit-chip 风格一致（可点击 vs 标题只读形成对比） */
.user-chip {
  flex-shrink: 0;
  max-width: 40%;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: rgba(0, 122, 255, 0.10);
  border-radius: 999px;
  white-space: nowrap;        /* 名字过长时省略号而非换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip:active { background: rgba(0, 122, 255, 0.2); }

/* 用户管理弹窗：用户列表 */
.user-list { text-align: left; margin-bottom: 10px; }
.user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--separator);
}
.user-row:last-child { border-bottom: none; }
/* 当前用户行：浅蓝背景高亮 */
.user-row.is-current {
  background: rgba(0, 122, 255, 0.08);
  border-radius: 10px;
}
.user-row__name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-row.is-current .user-row__name { color: var(--blue); font-weight: 600; }
/* 行内操作按钮组（重命名/删除），不收缩保证完整显示 */
.user-row__actions { display: flex; gap: 6px; flex-shrink: 0; }
.user-row__actions .btn-mini { padding: 5px 9px; font-size: 11px; }
/* 删除为危险操作：红字提示 */
.user-row__actions .btn-mini.is-danger { color: var(--red); background: rgba(255, 59, 48, 0.10); }
/* 重命名行内输入框：替换名字显示时使用 */
.user-row__input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  padding: 5px 8px;
  border: 1px solid var(--separator);
  border-radius: 8px;
  background: #fff;
}
/* 设置页"当前用户"行：名字只读展示 + 管理按钮 */
.user-current-name {
  flex: 1;
  text-align: right;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-manage-btn { flex-shrink: 0; }