/* ============================================================================
 * 训练搭子 FitLog — 视觉设计系统 v3.0 「静域 · Still Power」
 * ----------------------------------------------------------------------------
 * 定位：本文件是**纯视觉层**，在 app.css 之后加载，只覆盖颜色 / 尺寸 / 间距 /
 *       圆角 / 阴影 / 动效。不改动任何 DOM 结构、id、class 名与 JS 逻辑，
 *       因此不影响任何现有功能。
 *
 * 设计主张：
 *   1) 品牌橙不再是「到处发光」，而是**只出现在该被看见的地方**（主行动、
 *      当前选中、关键数值）。其余结构由中性灰阶承担 → 层级清晰、更耐看。
 *   2) 统一尺度：4pt 间距、12/16/20/28 圆角、三级阴影、七级字号。
 *   3) 数字统一等宽（tabular-nums），体重 / 热量 / 组数对齐不跳动。
 *   4) 交互反馈统一为「轻按下沉 + 弹簧曲线」，不用夸张缩放。
 *   5) 无障碍：正文对比度 ≥ 4.5:1，交互元素 ≥ 44px，全键盘 focus 可见，
 *      并尊重 prefers-reduced-motion。
 *
 * 版本：v3.0（本地预览，未上线）
 * ==========================================================================*/

/* ==========================================================================
 * 1. 设计令牌 Design Tokens
 * ========================================================================*/
:root {
  /* —— 品牌 —— */
  --brand:        #ff5a3c;   /* 主识别色（保留品牌） */
  --brand-2:      #ff7a45;   /* 渐变浅端 */
  --brand-3:      #ff3d6e;   /* 渐变深端 / 强调 */
  --brand-600:    #f0482a;   /* 按压态 */
  --brand-ink:    #e03d1c;   /* 浅底上的品牌文字（对比度 ≥ 4.5:1） */
  --brand-grad:      linear-gradient(135deg, #ff7043 0%, #ff3d6e 100%);
  --brand-grad-soft: linear-gradient(135deg, #ff8a5c 0%, #ff5a7e 100%);
  --brand-soft:   rgba(255, 90, 60, .13);
  --brand-soft-2: rgba(255, 61, 110, .10);
  --brand-glow:   rgba(255, 90, 60, .30);
  --brand-ring:   rgba(255, 90, 60, .38);

  /* —— 功能色 —— */
  --ok:        #2bd9a0;
  --ok-soft:   rgba(43, 217, 160, .13);
  --ok-ink:    #0f9b6c;
  --warn:      #ffb020;
  --warn-soft: rgba(255, 176, 32, .13);
  --warn-ink:  #a2620a;
  --danger:    #ff4d5e;
  --danger-soft: rgba(255, 77, 94, .12);
  --danger-ink:  #d32b3c;
  --info:      #4c8dff;
  --info-soft: rgba(76, 141, 255, .13);

  /* —— 深色（默认）表面层级 —— */
  --bg:        #0b0d12;
  --bg-blur:   rgba(11, 13, 18, .74);
  --bg-elev:   #0f1219;
  --card:      #151922;
  --card-2:    #1c212c;
  --card-3:    #242a36;
  --line:        rgba(255, 255, 255, .065);
  --line-strong: rgba(255, 255, 255, .135);
  --line-brand:  rgba(255, 90, 60, .34);

  --tx:   #f2f4f8;
  --tx-2: #98a1af;
  --tx-3: #666f7d;

  /* —— 圆角 —— */
  --r-xs: 8px;
  --r-s:  12px;
  --r-m:  16px;
  --r-l:  20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* —— 阴影（深色下更克制，靠描边分层） —— */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .34);
  --sh:    0 10px 28px -10px rgba(0, 0, 0, .56);
  --sh-lg: 0 26px 64px -18px rgba(0, 0, 0, .68);
  --sh-brand: 0 8px 20px -6px rgba(255, 90, 60, .42);

  /* —— 间距 —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* —— 动效 —— */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .48, 1);
  --dur-1: .14s; --dur-2: .22s; --dur-3: .34s;

  /* —— 结构尺寸（按钮位置/大小可按需调整） —— */
  --tabh: 64px;             /* 底部导航条高度 */
  --tab-inset: 12px;        /* 底部导航条悬浮内缩 */
  --topbar-h: 68px;
  --tap: 44px;              /* 最小可点区域 */
}

html[data-theme="light"] {
  --bg:        #f4f6f9;
  --bg-blur:   rgba(244, 246, 249, .80);
  --bg-elev:   #ffffff;
  --card:      #ffffff;
  --card-2:    #f1f3f8;
  --card-3:    #e7eaf1;
  --line:        rgba(17, 24, 39, .075);
  --line-strong: rgba(17, 24, 39, .155);
  --tx:   #12161d;
  --tx-2: #575f6d;
  --tx-3: #8b93a2;
  --brand-soft:   rgba(255, 90, 60, .10);
  --brand-soft-2: rgba(255, 61, 110, .07);
  --ok-soft:      rgba(15, 155, 108, .11);
  --sh-sm: 0 1px 2px rgba(17, 24, 39, .05);
  --sh:    0 8px 22px -8px rgba(17, 24, 39, .16);
  --sh-lg: 0 24px 56px -18px rgba(17, 24, 39, .22);
  --sh-brand: 0 8px 18px -6px rgba(255, 90, 60, .34);
}

/* ==========================================================================
 * 2. 基础排版
 * ========================================================================*/
html, body {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.005em;
}
body {
  transition: background var(--dur-3) ease, color var(--dur-3) ease;
}
/* 数值一律等宽，避免抖动 */
.stat .n, .dt-num, .bmi-num, .bmi-ticks span, .cal-kcal, .wt-w-val, .bdw-v,
.wt-vals, .set-main, .pr-date, .ms-k, .csb-cnt, .share-weight b, .stat-cell .v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 全局键盘可达性：只在键盘聚焦时出现，不影响鼠标/触摸 */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

/* ==========================================================================
 * 3. 应用外壳与背景
 * ========================================================================*/
#app {
  max-width: 520px;
  background:
    radial-gradient(130% 46% at 50% -6%, rgba(255, 90, 60, .11), transparent 62%),
    radial-gradient(90% 30% at 92% 4%, rgba(255, 61, 110, .06), transparent 60%),
    var(--bg);
}
html[data-theme="light"] #app {
  background:
    radial-gradient(130% 44% at 50% -6%, rgba(255, 90, 60, .10), transparent 62%),
    radial-gradient(80% 26% at 96% 2%, rgba(255, 61, 110, .05), transparent 60%),
    var(--bg);
}
/* 悬浮 Tab 需要更宽的底部留白 */
.screen { padding-bottom: calc(var(--tabh) + var(--safe-b) + 34px); }
.screen.active { animation: fadeUp .3s var(--ease); }

/* ==========================================================================
 * 4. 顶栏
 * ========================================================================*/
.topbar {
  padding: calc(var(--safe-t) + 14px) 18px 13px;
  background: var(--bg-blur);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.topbar-row { gap: 12px; }
.topbar h1 {
  font-size: 21px; font-weight: 800; letter-spacing: -.45px; line-height: 1.22;
}
.topbar .sub {
  font-size: 12px; color: var(--tx-3); margin-top: 3px; letter-spacing: .1px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
#screen-stats .topbar::after {
  left: 18px; width: 28px; height: 3px; border-radius: var(--r-full);
}

/* 图标按钮：统一 40×40 圆角方形，替代原 38px 混合尺寸 */
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-s);
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 16px; line-height: 1;
  color: var(--tx);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.icon-btn:active { transform: scale(.9); }
.icon-btn:hover { border-color: var(--line-strong); background: var(--card-2); }

/* 顶栏图标按钮：把零散 emoji 统一收进「图标容器」，读起来像一套图标系统 */
.topbar .icon-btn { font-size: 16px; }
.topbar .icon-btn .badge-dot { position: absolute; }

/* 训练日历右上角操作区：不再是「悬浮吸顶卡片」，回到顶栏内，尺寸/高度对齐 */
.cal-top-actions {
  position: static;
  margin: 0; padding: 0; background: none; border: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.cal-top-btn, .cal-share-btn {
  height: 36px; padding: 0 13px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1px;
  gap: 5px; box-shadow: none;
}
.cal-top-btn {
  background: var(--card); border: 1px solid var(--line); color: var(--tx-2);
}
.cal-top-btn:hover { background: var(--card-2); color: var(--tx); border-color: var(--line-strong); }
.cal-share-btn {
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 4px 12px -4px var(--brand-glow);
}
.cal-top-btn .ic, .cal-share-btn .cs-ic { font-size: 13px; }
@media (max-width: 400px) {
  .cal-top-btn, .cal-share-btn { padding: 0 10px; font-size: 12px; }
}

/* ==========================================================================
 * 5. 容器 / 卡片 / 区块标题
 * ========================================================================*/
.wrap { padding: 16px 18px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 18px;
  box-shadow: var(--sh-sm);
}
.card + .card { margin-top: 14px; }
.card:active { transform: none; }

.sec-title {
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px;
  color: var(--tx-3); text-transform: uppercase;
  margin: 26px 0 12px; gap: 8px;
}
.sec-title::before {
  width: 3px; height: 14px; border-radius: var(--r-full);
  background: var(--brand-grad);
}
.muted { color: var(--tx-3); font-size: 12.5px; }

/* ==========================================================================
 * 6. 按钮体系（主 / 次 / 幽灵 / 危险 / 小）
 * ========================================================================*/
.btn {
  min-height: var(--tap);
  padding: 12px 18px;
  border-radius: var(--r-m);
  font-size: 14.5px; font-weight: 700; letter-spacing: .1px;
  gap: 7px;
  background: var(--card-2); color: var(--tx);
  border: 1px solid var(--line);
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.btn:active { transform: scale(.975); }
.btn-primary {
  background: var(--brand-grad); color: #fff; border: none;
  box-shadow: 0 8px 20px -8px var(--brand-glow);
  font-weight: 800;
}
.btn-primary:active { box-shadow: 0 4px 12px -6px var(--brand-glow); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost, .btn.ghost {
  background: transparent; color: var(--tx-2); border: 1px solid var(--line);
}
.btn-ghost:hover, .btn.ghost:hover { background: var(--card-2); color: var(--tx); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(255, 77, 94, .32); }
.btn-danger:active { background: var(--danger-soft); }
.btn-block { min-height: 50px; }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: 13px; border-radius: var(--r-s); }

/* ==========================================================================
 * 7. 表单 / 输入 / 选择器
 * ========================================================================*/
.field { margin-bottom: 16px; }
.field label {
  font-size: 12.5px; font-weight: 700; color: var(--tx-2);
  margin-bottom: 8px; letter-spacing: .15px;
}
.input, select.input, textarea.input {
  padding: 13px 15px;
  min-height: 48px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.input:hover { border-color: var(--line-strong); }
.input:focus {
  border-color: var(--brand);
  background: var(--card);
  box-shadow: 0 0 0 3.5px var(--brand-soft);
}
textarea.input { min-height: 88px; }

.row2 { gap: 12px; }
.row3 { gap: 10px; }

/* 单位切换 */
.weight-box .input { border-radius: var(--r-m) 0 0 var(--r-m); }
.unit-switch {
  background: var(--card-2);
  border: 1px solid var(--line); border-left: none;
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.unit-switch button { padding: 0 14px; font-size: 12.5px; color: var(--tx-3); }
.unit-switch button.on { background: var(--brand); color: #fff; }

/* RPE 网格 */
.rpe-grid { gap: 8px; }
.rpe-grid button {
  padding: 11px 0; border-radius: var(--r-s);
  background: var(--card-2); border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--tx-2);
}
.rpe-grid button.on {
  background: var(--brand); color: #fff; border-color: transparent;
  transform: none; box-shadow: 0 4px 12px -4px var(--brand-glow);
}

/* Chip（药丸选择器）—— 选中统一为实心品牌，不再满屏渐变 */
.chip {
  min-height: 34px; padding: 7px 14px;
  border-radius: var(--r-full);
  background: var(--card); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--tx-2);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--tx); }
.chip.on, .chip.on:hover {
  background: var(--brand); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px -5px var(--brand-glow);
}
.cal-tab.on, .stat-tab.on { background: var(--brand); color: #fff; box-shadow: 0 4px 12px -5px var(--brand-glow); }

/* 开关 / 单选 */
.switch {
  width: 48px; height: 28px; border-radius: var(--r-full);
  background: var(--card-3); border: 1px solid var(--line);
}
.switch::after { top: 2px; left: 2px; width: 22px; height: 22px; background: var(--tx-3); }
.switch.on { background: var(--brand); border-color: transparent; }
.switch.on::after { left: 22px; background: #fff; }
.rd { width: 21px; height: 21px; border-color: var(--tx-3); }
.rd.on { border-color: var(--brand); }
.rd.on::after { inset: 3.5px; }

/* 分段控件（登录/注册、分享页、搭子页子标签统一语言） */
.tabs-seg, .share-tabs, .bdv-tabs, .share-range, .cal-tabs, .stat-tabs {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 4px; gap: 4px;
}
.tabs-seg button, .share-tabs button, .bdv-tab, .share-range button,
.cal-tab, .stat-tab { border-radius: var(--r-s); font-size: 13.5px; }
.tabs-seg button.on {
  background: var(--card); color: var(--tx); box-shadow: var(--sh-sm);
}
.share-tabs button.on, .bdv-tab.on, .share-range button.on {
  background: var(--card); color: var(--brand); box-shadow: var(--sh-sm);
}

/* ==========================================================================
 * 8. 底部导航（改为悬浮胶囊条）
 * ========================================================================*/
.tabbar {
  bottom: calc(var(--safe-b) + var(--tab-inset));
  left: 50%;
  width: calc(100% - var(--tab-inset) * 2);
  max-width: 496px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-blur);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: var(--sh-lg);
  padding: 6px 6px;
  overflow: hidden;
}
.tabbar.show { display: flex; }
.tabbar button {
  height: calc(var(--tabh) - 12px);
  border-radius: var(--r-l);
  color: var(--tx-3);
  font-size: 10px; font-weight: 700; gap: 3px;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.tabbar button .ic { font-size: 19px; transition: transform var(--dur-2) var(--ease-spring); }
.tabbar button.on { color: var(--brand); background: var(--brand-soft); }
.tabbar button.on .ic { transform: translateY(-1px); filter: none; }
.tabbar button.on .cal-ic::before { background: var(--brand-soft); }

/* Tab 红点位置随胶囊条微调 */
.tab-badge { top: 4px; margin-right: -18px; box-shadow: 0 0 0 2px var(--bg); }

/* ==========================================================================
 * 9. 登录 / 注册
 * ========================================================================*/
#screen-auth { padding: 0 26px; }
.auth-logo { margin-bottom: 34px; }
.auth-logo .mark {
  width: 82px; height: 82px; margin-bottom: 18px;
  border-radius: var(--r-xl);
  background: var(--brand-grad);
  box-shadow: 0 16px 40px -12px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.auth-logo h1 {
  font-size: 29px; font-weight: 800; letter-spacing: -.7px;
  background: linear-gradient(118deg, var(--tx) 22%, var(--brand) 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-logo p { margin-top: 9px; font-size: 13.5px; color: var(--tx-3); }
.tabs-seg { margin-bottom: 24px; }
.tabs-seg button { padding: 11px 0; font-size: 14px; }
.auth-foot { margin-top: 22px; font-size: 12.5px; }
.form-err {
  border-radius: var(--r-m); padding: 12px 14px; font-size: 13px;
  background: var(--danger-soft); border: 1px solid rgba(255, 77, 94, .28);
  color: #ff8b96; margin-bottom: 16px;
}
html[data-theme="light"] .form-err { color: var(--danger-ink); }

/* ==========================================================================
 * 10. 训练日历
 * ========================================================================*/
.stats-row { gap: 10px; margin-bottom: 2px; }
.stat {
  padding: 13px 12px;
  border-radius: var(--r-m);
  background: var(--card); border: 1px solid var(--line);
  box-shadow: none;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.stat:active { transform: translateY(-1px); }
.stat .n { font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
.stat .n .u { font-size: 11.5px; font-weight: 700; color: var(--tx-3); margin-left: 3px; }
.stat .l { font-size: 10.5px; color: var(--tx-3); margin-top: 4px; letter-spacing: .2px; }

.cal-head { padding: 2px 2px 12px; }
.cal-head .ym { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.cal-nav { gap: 6px; }
.cal-nav button {
  width: 34px; height: 34px; border-radius: var(--r-s);
  background: var(--card-2); border: 1px solid var(--line);
  color: var(--tx-2); font-size: 15px; display: grid; place-items: center;
}
.cal-nav button:active { transform: scale(.92); background: var(--card-3); }
.cal-weekdays { margin: 2px 0 6px; }
.cal-weekdays div { font-size: 11px; font-weight: 700; color: var(--tx-3); letter-spacing: .5px; }

.cal-grid { gap: 5px; grid-auto-rows: 56px; }
.cal-cell {
  border-radius: var(--r-s);
  background: var(--card-2); border: 1px solid transparent;
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.cal-cell .d { font-size: 13px; font-weight: 700; color: var(--tx-2); }
/* 有训练：淡淡的品牌底 + 描边，不再用整块渐变，避免「满屏发红」 */
.cal-cell.has {
  background: linear-gradient(160deg, rgba(255, 90, 60, .14), rgba(255, 61, 110, .05));
  border-color: rgba(255, 90, 60, .22);
}
.cal-cell.has .d { color: var(--tx); }
.cal-cell.today { border-color: var(--brand); box-shadow: none; }
.cal-cell.today .d { color: var(--brand); }
.cal-cell.sel {
  background: var(--brand-grad); border-color: transparent;
  box-shadow: 0 8px 18px -8px var(--brand-glow);
}
.cal-cell.sel .d { color: #fff; font-weight: 800; }
.cal-cell:not(.blank):hover { border-color: var(--line-strong); }
.cal-dots i { width: 3.5px; height: 3.5px; }
.cal-cells .cal-kcal, .cal-cell .cal-kcal {
  font-size: 9px; font-weight: 800; color: var(--tx-2); letter-spacing: -.1px;
}
.cal-cell.sel .cal-kcal { color: rgba(255, 255, 255, .95); }
.cal-cell .rest { font-size: 8.5px; }
.legend {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--tx-3); gap: 14px;
}
.legend i { width: 6px; height: 6px; }

/* 当日详情 */
.day-head { padding: 4px 2px 12px; }
.day-head .dt { font-size: 18px; font-weight: 800; letter-spacing: -.35px; }
.day-head .wd { font-size: 12px; }
.part-group { margin-bottom: 16px; }
.part-badge {
  border-radius: var(--r-xs); padding: 3px 9px; font-size: 11px; font-weight: 800;
  letter-spacing: .3px;
}
.ex-block {
  border-radius: var(--r-m); padding: 14px;
  background: var(--card); border: 1px solid var(--line);
  transition: border-color var(--dur-2) var(--ease);
}
.ex-block .name { font-size: 14.5px; font-weight: 700; letter-spacing: -.15px; }
.ex-block .meta { font-size: 11px; margin-bottom: 10px; }

.set-line { padding: 10px 0; gap: 9px; font-size: 13.5px; }
.set-no {
  width: 22px; height: 22px; border-radius: var(--r-xs);
  background: var(--card-2); color: var(--tx-2);
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.set-side { border-radius: var(--r-xs); font-size: 10.5px; padding: 2px 7px; }
.side-grid button { border-radius: var(--r-xs); padding: 5px 10px; font-size: 12px; }
.side-grid button.on { background: var(--brand); color: #fff; border-color: transparent; }
.set-main b { font-weight: 800; }
.set-rpe { font-size: 11px; padding: 2px 7px; border-radius: var(--r-full); }
.set-add { width: 26px; height: 26px; font-size: 15px; }
.ex-mv {
  width: 27px; height: 25px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--card-2); color: var(--tx-2);
}
.ex-mv:hover { background: var(--card-3); }

/* 快速记录 / 快捷 chip */
.quick-list { gap: 9px; }
.quick-chip {
  border-radius: var(--r-m); padding: 12px 13px;
  background: var(--card); border: 1px solid var(--line);
}
.q-t { font-size: 13px; }
.q-go { font-size: 16px; }
.rest-pick { border-radius: var(--r-m); }
.rest-pick.on { box-shadow: 0 6px 16px -6px rgba(30, 41, 59, .3); }

/* 复制记录 / 历史
 * ========================================================================*/
.hist-day { padding: 11px 0; font-size: 13px; }
.hist-day .dd { font-weight: 700; }
.hist-day .ss { font-size: 12px; }
.swipe-actions .btn { min-height: 42px; }

/* ==========================================================================
 * 11. 饮食记录
 * ========================================================================*/
.diet-actions { gap: 10px; margin: 12px 0 14px; }
.cta-btn {
  min-height: 46px; border-radius: var(--r-m);
  font-size: 13.5px; font-weight: 800; letter-spacing: .1px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--tx);
}
.cta-btn.primary {
  background: var(--brand-grad); border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -8px var(--brand-glow);
}
/* 今日合计 Hero：收窄留白、字重微调、玻璃高光更含蓄 */
.diet-today {
  margin: 4px 0 14px; padding: 16px;
  border-radius: var(--r-l);
  background: var(--brand-grad);
  box-shadow: 0 12px 28px -14px var(--brand-glow);
}
.diet-today::after { width: 132px; height: 132px; right: -34px; top: -46px; background: rgba(255, 255, 255, .1); }
.diet-today .dt-label { font-size: 11.5px; letter-spacing: .8px; }
.diet-today .dt-cnt { font-size: 10.5px; padding: 2px 9px; }
.diet-today .dt-num { font-size: 36px; letter-spacing: -1.2px; }
.diet-today .dt-macros { gap: 8px; }
.diet-today .dt-m { border-radius: var(--r-s); padding: 8px 2px 7px; background: rgba(255, 255, 255, .15); }
.diet-today .dt-mk { font-size: 9.5px; letter-spacing: .3px; }
.diet-today .dt-mv { font-size: 13.5px; }

.diet-meal { margin-bottom: 14px; }
.diet-meal-hd { font-size: 13.5px; margin-bottom: 8px; }
.diet-item {
  border-radius: var(--r-s); padding: 10px 12px; margin-bottom: 7px;
  background: var(--card); border: 1px solid var(--line);
}
.diet-item:hover { border-color: var(--line-strong); }
.diet-name { font-size: 13.5px; }
.diet-sub { font-size: 11.5px; }
.diet-del {
  width: 28px; height: 28px; border-radius: var(--r-xs);
  background: var(--card-2); color: var(--tx-3);
}
.diet-del:hover { color: var(--danger); background: var(--danger-soft); }
.diet-meal-sums { gap: 8px; }
.diet-meal-sum { border-radius: var(--r-s); padding: 10px 8px; }
.diet-meal-sum .ms-k { font-size: 15px; }
.diet-ai-card { border-radius: var(--r-s); padding: 11px 12px; }
.diet-ai-idx {
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.unit-select { border-radius: var(--r-s); }

/* ==========================================================================
 * 12. 体重 / 腰围 / BMI
 * ========================================================================*/
.day-wt .wt-rows { gap: 10px; }
.day-wt .wt-row { gap: 7px; }
.day-wt .wt-row label { font-size: 11.5px; letter-spacing: .2px; }
.day-wt .wt-row .input { text-align: center; font-size: 16px; font-weight: 700; }
.day-wt .wt-hint { font-size: 10.5px; }

.bmi-card { background: var(--card); }
.bmi-hero { gap: 18px; margin: 6px 0 16px; }
.bmi-num { font-size: 44px; font-weight: 800; letter-spacing: -1.6px; }
.bmi-side { gap: 7px; }
.bmi-badge { border-radius: var(--r-full); padding: 4px 12px; font-size: 11.5px; font-weight: 800; }
.bmi-tip { font-size: 11.5px; }
.bmi-bar { height: 12px; border-radius: var(--r-full); }
.bmi-seg { opacity: .95; }
.bmi-mark {
  width: 16px; height: 16px; top: -2px; border-radius: var(--r-full);
  border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .32);
}
.bmi-ticks { height: 16px; margin-top: 8px; }
.bmi-ticks span { font-size: 10px; font-weight: 700; }
.bmi-src {
  font-size: 11px; border-radius: var(--r-s); padding: 9px 12px;
  background: var(--card-2); border: 1px solid var(--line);
}

.wt-item { padding: 10px 0; font-size: 12.5px; }
.wt-date { font-weight: 700; }
.wt-vals { gap: 14px; }
.wt-diff { border-radius: var(--r-xs); font-weight: 800; }
.wt-waist-row { border-radius: var(--r-s); padding: 11px 13px; }
.wt-w-val { font-size: 18px; }
.bd-waist-row { border-radius: var(--r-s); }
.bdw-v { font-size: 17px; }

/* ==========================================================================
 * 13. 动作库
 * ========================================================================*/
.search-bar { margin-bottom: 14px; }
.search-bar .input { padding-left: 42px; }
.search-bar .ic { font-size: 14px; }
.chips { gap: 7px; margin-bottom: 14px; }
.count-note { font-size: 11.5px; padding: 2px 2px 12px; }
.ex-item {
  border-radius: var(--r-m); padding: 13px 14px;
  background: var(--card); border: 1px solid var(--line);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.ex-item:hover { border-color: var(--line-strong); }
.ex-dot { width: 7px; height: 7px; }
.ex-info .n { font-size: 14.5px; }
.ex-info .e { font-size: 11.5px; }
.ex-tag { border-radius: var(--r-xs); font-size: 10.5px; padding: 1px 7px; }
.fav-btn { font-size: 17px; opacity: .3; }
.fav-btn.on { opacity: 1; transform: scale(1.08); }
.ex-sec-hd { font-size: 12.5px; margin: 6px 2px 9px; }

/* 动作讲解 / 说明 */
.explain { border-radius: var(--r-m); }
.explain-hd { padding: 13px 15px; font-size: 13.5px; }
.explain-bd { padding: 0 15px 15px; }
.exp-t { font-size: 12.5px; }
.exp-c { font-size: 13px; line-height: 1.75; }
.tip-line { font-size: 12.5px; }

/* ==========================================================================
 * 14. AI 卡片 / 输出
 * ========================================================================*/
.ai-warn {
  border-radius: var(--r-s); padding: 11px 13px; font-size: 12.5px; line-height: 1.6;
  background: var(--warn-soft); border: 1px solid rgba(255, 176, 32, .3); color: var(--warn-ink);
}
[data-theme="dark"] .ai-warn, html:not([data-theme="light"]) .ai-warn { color: #ffd166; }
.ai-meta-in {
  border-radius: var(--r-s); padding: 11px 13px;
  background: var(--card-2); border: 1px solid var(--line);
}
.ai-out {
  border-radius: var(--r-m); padding: 15px 16px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.75;
}
.md-h { margin: 14px 0 6px; }
.md-h1 { font-size: 15.5px; }
.md-h2 { font-size: 14px; }
.md-h3 { font-size: 13px; }
.ai-hist-item { border-radius: var(--r-s); padding: 11px 13px; }
.ai-token-note { border-radius: var(--r-s); }
.day-ai-hd { font-size: 13.5px; margin-bottom: 11px; }

/* 教练对话（入口已隐藏，样式保留以便随时恢复） */
.coach-bubble { border-radius: var(--r-l); font-size: 14px; }
.coach-bubble.me { box-shadow: 0 6px 16px -8px var(--brand-glow); border-bottom-right-radius: 6px; }
.coach-bubble.ai { border-bottom-left-radius: 6px; }
.coach-sec-btn { border-radius: var(--r-m); }
.coach-quick { border-radius: var(--r-m); }
.coach-quick-btn { border-radius: var(--r-s); box-shadow: 0 4px 12px -5px var(--brand-glow); }
.coach-note-row { border-radius: var(--r-s); }

/* ==========================================================================
 * 15. 训练数据页
 * ========================================================================*/
.stat-tabs { margin: 14px 14px 0; }
.wt-diff { padding: 3px 9px; }
.code-box { border-radius: var(--r-s); }
.readonly-box { border-radius: var(--r-s); }
.steps { font-size: 13px; }

/* ==========================================================================
 * 16. 我的 / 个人资料
 * ========================================================================*/
.profile-card {
  background: var(--brand-grad);
  border-radius: var(--r-xl); padding: 20px;
  box-shadow: 0 16px 36px -18px var(--brand-glow);
  margin-bottom: 18px;
}
.profile-card::after { width: 150px; height: 150px; right: -36px; top: -44px; background: rgba(255, 255, 255, .1); }
.profile-card .ph { font-size: 20px; font-weight: 800; }
.profile-card .sub { font-size: 12px; }
.profile-card .pc-meta { font-size: 11.5px; gap: 4px 12px; }
.profile-card .pc-edit-btn {
  border-radius: var(--r-full); padding: 7px 15px; font-size: 12.5px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .48);
  backdrop-filter: blur(4px);
}
.profile-stats { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .24); }
.profile-stats .n { font-size: 18px; }

.list-item {
  border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 9px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: none;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
}
.list-item:hover { background: var(--card-2); border-color: var(--line-strong); }
.list-item:active { transform: scale(.994); }
.list-item .ic { font-size: 17px; width: 22px; }
/* 标题不换行、说明文字靠右，避免长文案把标题挤成两行 */
.list-item .tt { flex: 0 1 auto; min-width: 0; white-space: nowrap; font-size: 14px; font-weight: 600; }
.list-item .vv { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 12px; }

.av, .buddy-av, .cmt-av, .av-lg, .bdv-av-lg { background: var(--brand-soft); color: var(--brand); }
.buddy-av { background: var(--brand); color: #fff; }
.cmt-av { background: var(--brand-soft); color: var(--brand); }

.av-grid { gap: 9px; }
.av-pick { border-radius: var(--r-s); }
.av-prev img { border-radius: var(--r-full); }

.me-sub-head {
  padding: 13px 16px; background: var(--bg-blur);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.badge-cloud { border-radius: var(--r-full); font-size: 11.5px; }
.divider { margin: 8px 0 16px; }

/* ==========================================================================
 * 17. 搭子 / 搭子查看
 * ========================================================================*/
.buddy-card { border-radius: var(--r-m); padding: 14px; margin-bottom: 10px; }
.buddy-top .buddy-name { font-size: 14.5px; }
.buddy-meta { font-size: 12px; }
.buddy-row { font-size: 13px; }
.buddy-friend { padding: 13px 6px; }
.buddy-friend.tap:hover { background: var(--card-2); }
.bf-name { font-size: 14.5px; }
.bdy-dates { gap: 6px; }
.bdy-date {
  padding: 7px 13px; border-radius: var(--r-full); font-size: 12px;
  background: var(--card-2); color: var(--tx-2); border: 1px solid var(--line);
}
.bdy-date.on { background: var(--brand); color: #fff; border-color: transparent; }
.bdy-cal { border-radius: var(--r-m); padding: 12px; }
.bdy-cell { border-radius: var(--r-xs); font-size: 12px; }
.bdy-cell.on { background: var(--brand); }
.bd-view .bdv-tabs { margin: 14px 14px 0; }
.bdv-av { width: 38px; height: 38px; }
.bdv-perm-mini {
  width: 34px; height: 34px; border-radius: var(--r-s); font-size: 14px;
  background: var(--card); border: 1px solid var(--line);
}
.bdview-head, .bdv-head { border-radius: var(--r-m); }

/* ==========================================================================
 * 18. 搭子圈
 * ========================================================================*/
.circle-filter { gap: 7px; padding: 12px 18px 0; }
.circle-filter .chip {
  padding: 7px 14px; border-radius: var(--r-full); font-size: 12.5px;
  background: var(--card); border: 1px solid var(--line); color: var(--tx-2);
}
.circle-filter .chip.on { background: var(--brand); color: #fff; border-color: transparent; }
.circle-post {
  border-radius: var(--r-l); padding: 16px 16px 0; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.cp-av, img.cp-av { width: 40px; height: 40px; border-radius: var(--r-s); }
.cp-name { font-size: 14px; font-weight: 800; }
html[data-theme="light"] .cp-name { color: #3f5f9c; }
.cp-time { font-size: 11px; }
.cp-content { font-size: 14px; line-height: 1.72; margin: 6px 0 4px; }
.post-img.single img, .post-imgs .pi, .post-prev .pp { border-radius: var(--r-s); }
.post-imgs, .post-img, .post-prev { gap: 6px; }
.cp-like-cmt { border-radius: var(--r-s); background: var(--card-2); }
.cp-likes { font-size: 12.5px; }
.cmt-row { font-size: 13px; }
html[data-theme="light"] .cmt-row .cmt-name { color: #3f5f9c; }
.cp-acts { gap: 26px; padding: 9px 2px 13px; font-size: 12.5px; }
.cp-acts button { font-size: 12.5px; }
.post-cmt-box { border-radius: var(--r-s); }
.post-del, .cmt-row .cmt-del { font-size: 11px; }
.notif-item { padding: 13px 4px; }
.notif-ic { width: 36px; height: 36px; border-radius: var(--r-full); }
.cmt { padding: 11px 0; }
.cmt-av { width: 27px; height: 27px; }

/* ==========================================================================
 * 19. Bottom Sheet / Modal / Toast
 * ========================================================================*/
.sheet-mask { background: rgba(6, 8, 12, .56); backdrop-filter: blur(3px); }
html[data-theme="light"] .sheet-mask { background: rgba(15, 20, 28, .42); }
.sheet {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-bottom: none;
  box-shadow: var(--sh-lg);
  max-height: 90vh;
}
.sheet-grab { width: 44px; height: 4px; border-radius: var(--r-full); margin: 12px auto 6px; }
.sheet-head { padding: 10px 20px 14px; border-bottom: 1px solid var(--line); }
.sheet-head h3 { font-size: 16.5px; letter-spacing: -.3px; }
.sheet-head .sub { font-size: 11.5px; }
.sheet-body { padding: 18px 20px; }
.sheet-foot {
  padding: 14px 20px calc(16px + var(--safe-b));
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  gap: 10px;
}
.sheet-foot .btn { min-height: 48px; }

#toast {
  border-radius: var(--r-m); padding: 12px 18px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--sh-lg);
}

/* ==========================================================================
 * 20. 空状态
 * ========================================================================*/
.empty { padding: 52px 24px; }
.empty .big { font-size: 40px; margin-bottom: 12px; opacity: .6; }
.empty p { font-size: 13.5px; line-height: 1.7; margin: 6px 0; }
.view-empty { padding: 60px 24px; }
.view-empty .big { font-size: 42px; }

/* ==========================================================================
 * 21. 分享页（view.html · 浅色固定）
 * ========================================================================*/
.view-wrap { max-width: 560px; padding: 20px 16px 48px; }
.view-head { padding: 20px 0 6px; }
.view-head .nm { font-size: 19px; }
.view-head .sub { font-size: 12px; }
.view-av {
  width: 60px; height: 60px; border-radius: var(--r-l);
  background: var(--brand-soft); font-size: 28px;
}
.view-banner, .invite-box, .err-box { border-radius: var(--r-m); }
.invite-box { border: 1px solid var(--line-brand); background: var(--brand-soft); }
/* 最近体重摘要条（share-weight 原为裸结构，这里给它完整的卡片形态） */
.share-weight {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0 4px; padding: 12px 15px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  font-size: 12.5px; color: var(--tx-2); box-shadow: var(--sh-sm);
}
.share-weight b { font-size: 15px; font-weight: 800; color: var(--tx); }
.share-weight .muted { margin-left: auto; font-size: 11.5px; }
.share-link { border-radius: var(--r-s); }
.share-tabs { margin: 16px 0 4px; }
.stats-kpi { gap: 10px; }
.stat-cell { border-radius: var(--r-m); background: var(--card-2); }
.stat-cell .v { font-size: 21px; font-weight: 800; color: var(--brand-ink); }
html:not([data-theme="light"]) .stat-cell .v { color: var(--brand); }
.ai-card { border-radius: var(--r-m); }
.ai-hd { font-size: 14.5px; }
.ai-body { font-size: 13px; }

/* ==========================================================================
 * 22. 页脚备案
 * ========================================================================*/
#site-footer {
  margin-top: 22px;
  padding: 16px 18px calc(16px + var(--safe-b));
  font-size: 11.5px; line-height: 1.95;
  border-top: 1px solid var(--line);
  background: transparent;
}
body:has(#tabbar) #site-footer { padding-bottom: calc(var(--tabh) + var(--safe-b) + 30px); }

/* ==========================================================================
 * 23. 动效收敛
 * ========================================================================*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* 大屏：居中卡片式容器，两侧留白更从容 */
@media (min-width: 560px) {
  #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
