/* ============================================================
   css/panels/panels-health.css — 健康面板样式
   韩系法式花艺 | 干燥玫瑰色调 | 衬线装饰 | 零 emoji
   全部使用 CSS 变量 | 对齐 vs-card/vs-input 设计模式
   窄屏 370px 适配 | 全屏训练层叠在健康自己那一段（--hl-z- 系列）

   ★ 2028-09 健康第 2 窗口：本文件分成两层，改之前先看这一行
     ①【令牌层】下面 `--hl-` 开头那一块 —— 健康模块的**唯一**变量定义处
       （只放健康专有的：品牌色/字号阶梯/动效时长/层叠层级/触控下限；
        间距、圆角、安全区直接用 core.css 里的 --space- 系列 / --radius- 系列 / --safe- 系列，
        绝不在这里再抄一份 —— 两处各写一份＝改一处不生效，长期规则 #226）。
     ②【组件层】文件后半段 `.hui-*` 那一块 —— 公共控件的**唯一**样式定义处。
        结构由 js/panels/panels-health-ui.js 产出，类名与样式一一对应；
        「JS 写了类名但 CSS 没规则」＝落到浏览器默认外观（等于违反禁系统控件），
        由 tools/health-ui.test.js 静态盯着。
   ============================================================ */

/* ===== 令牌层（健康专有）===== */
:root {
    /* 字号阶梯 —— 健康模块只许用这 8 档，别再出现 9/10/14.5/17 这种碎片 */
    --hl-fs-xs:   11px;   /* 最小辅助标签（时间戳、单位） */
    --hl-fs-sm:   12px;   /* 次要说明、卡内小字 */
    --hl-fs-base: 13px;   /* 正文 */
    --hl-fs-md:   15px;   /* 卡片标题 */
    --hl-fs-lg:   18px;   /* 区块标题、抽屉标题 */
    --hl-fs-xl:   22px;   /* 页面级数字/花字 */
    --hl-fs-2xl:  28px;   /* 训练计时、完成页 */

    /* 动效时长（施工单 §E.13：100~150 微反馈 / 200~250 页面 / 300 抽屉 / 350~400 高价值完成）
       缓动一律「指数收尾」——禁 cubic-bezier(0.34,1.56,…) 这类弹跳（施工单 §2.8） */
    --hl-t-micro:  120ms;
    --hl-t-page:   220ms;
    --hl-t-drawer: 300ms;
    --hl-t-done:   380ms;
    --hl-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

    /* 层叠层级（健康自己一段：1800~1999；不碰 core.css 的 --z-*，那是 body 级浮层用的） */
    --hl-z-page:    1800;   /* 页内子页/详情 */
    --hl-z-drawer:  1860;   /* 底部抽屉 */
    --hl-z-confirm: 1900;   /* 自绘确认窗（必须高于抽屉：抽屉里也会弹确认） */
    --hl-z-full:    1940;   /* 全屏训练/抓手机 */
    --hl-z-menu:    1980;   /* 小操作卡/菜单 */

    /* 触控下限（施工单 §E.14）。视觉本体可以更小，靠 ::before 透明层把命中区撑到 44 */
    --hl-tap: 44px;

    /* 深行动玫瑰 —— 施工单 §E.10 明写「不能拿偏浅的 rose 做白字主按钮」。
       实测对比度（白字在其上）：浅 rose #C9A8A8 = 2.18（不合格），
       深行动玫瑰 #8E5F5F = 5.31（≥4.5 达 WCAG AA），hover #7E5252 = 6.53。
       完整值由 tools/health-ui.test.js 每次重算，改色必须同时过那条断言。 */
    --hl-rose-cta:        #8E5F5F;
    --hl-rose-cta-hover:  #7E5252;
    --hl-rose-cta-soft:   rgba(142,95,95,0.10);
    --hl-rose-line:       rgba(142,95,95,0.42);
    /* 完成/健康态用的深鼠尾草（白字对比度 5.26；浅 sage #A8B8A0 只有 2.09） */
    --hl-sage-cta:        #5F7159;
    --hl-sage-line:       rgba(95,113,89,0.42);

    /* 危险/删除（低强调，绝不许长得跟保存一样） */
    --hl-danger:      #B5495B;
    --hl-danger-soft: rgba(181,73,91,0.10);

    /* 全屏跟练层（深底上的文字与控件；对比度按 #1A1614 底算，由自检断言盯着）
       —— 原来那串 rgba(255,255,255,0.3/0.4) 只有 3~4:1，最弱那一行基本看不清。 */
    --hl-to-bg:        #1A1614;
    --hl-to-ink:       #E8E0D8;   /* 13.8:1 标题/大数字 */
    --hl-to-ink-mid:   #B0AAA2;   /*  7.8:1 次级信息与控件描边 */
    --hl-to-ink-weak:  #9A928A;   /*  5.9:1 最弱那一行（也够 4.5） */
    --hl-to-timer:     #A8B8A0;   /* 鼠尾草：计时数字 */
    --hl-to-timer-hot: #E0C08C;   /* 最后 10 秒 */

    /* 文字弱化层：施工单 §2.2 点名「低对比度免责声明」。
       原来用 opacity:0.5 的 --text-muted（≈1.0:1 对比度，等于看不清）
       → 免责声明改用这一档（#6F6A62 在浅底 ≥5.5:1，可读且仍弱于正文）。 */
    --hl-text-faint:  #6F6A62;
    /* 占位符：默认 --text-muted 在浅底只有 1.97:1，完全不够（impeccable 硬要求 ≥4.5） */
    --hl-placeholder: #9A9288;

    /* W10-C（做饭 / 厨具 / 外面吃 / 口味）：用低饱和鼠尾草 —— 与「健身 / 训练」同色系，
       不另起一套品牌色。深鼠尾草 #4F5A46 在浅底上 6.9:1（可做强调文字与描边）；
       卡片面走 --hl-food-card，暗色模式下换成低透明白。 */
    --hl-sage-ink:  #4F5A46;
    --hl-sage-soft: rgba(168,184,160,0.16);
    --hl-food-card: rgba(255,255,255,0.58);
}
[data-theme-mode="dark"] {
    --hl-rose-cta:        #B98C8C;
    --hl-rose-cta-hover:  #C79C9C;
    --hl-rose-cta-soft:   rgba(185,140,140,0.14);
    --hl-rose-line:       rgba(185,140,140,0.40);
    --hl-sage-cta:        #9FB397;
    --hl-sage-line:       rgba(159,179,151,0.40);
    --hl-danger:          #D98C9A;
    --hl-danger-soft:     rgba(217,140,154,0.12);
    --hl-text-faint:      #A8A19A;
    --hl-placeholder:     #8C847C;
    /* W10-C：暗色下卡片面改成低透明白 —— 否则 rgba(255,255,255,.58) 会把整张卡刷白 */
    --hl-sage-ink:        #9FB397;
    --hl-food-card:       rgba(255,255,255,0.06);
}

/* ===== 页面级共用件 ===== */
#hl-root { padding: 0 12px calc(60px + var(--safe-bottom)); max-width: 480px; margin: 0 auto; }
/* 三个 tab 的页面容器：切换就是「只显示一个」，别整块重建 */
.hl-page { display: block; }
.hl-page[style*="display:none"], .hl-page[style*="display: none"] { display: none; }
.hl-tab-bar { display: flex; gap: 0; padding: 8px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.hl-tab-btn {
    flex: 1; min-height: var(--hl-tap); padding: 8px 0; border: none; background: none;
    font-family: var(--font-body); font-size: var(--hl-fs-md); color: var(--text-secondary);
    cursor: pointer; transition: color var(--hl-t-page) var(--hl-ease), border-color var(--hl-t-page) var(--hl-ease);
    border-bottom: 2px solid transparent; letter-spacing: 1px;
    -webkit-appearance: none; appearance: none;
}
.hl-tab-btn.active { color: var(--hl-rose-cta); border-bottom-color: var(--hl-rose-cta); font-weight: 600; }
.hl-tab-btn:active { transform: scale(0.98); }

/* ===== Phase Card（第3窗口：首页第一张卡只讲「现在第几天 / 下次预计几号到几号」）=====
   原来那三个小圆点（.hl-phase-dots/.hl-phase-dot/.hl-phase-tip）**已删**：
   它推不出真实阶段（排卵期根本没画进去），是装饰，容易让她误以为「进度条」。 */
.hl-phase-card { padding: 18px 16px; margin-bottom: 10px; }
.hl-phase-title { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-lg); color: var(--hl-rose-cta); letter-spacing: 1px; }
.hl-phase-sub { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); margin: 5px 0 0; line-height: 1.8; }
/* 该记了（记的日子已超过一个周期）：用金色提醒，不用红——这不是错误，是「该记一下了」 */
.hl-phase-card.is-overdue .hl-phase-title { color: var(--gold-dark); }
.hl-phase-card.is-overdue { border-left: 2px solid var(--gold); }
[data-theme-mode="dark"] .hl-phase-card.is-overdue .hl-phase-title { color: var(--gold); }

/* ===== Calendar ===== */
.hl-cal-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; position: relative; }
.hl-cal-month { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-md); color: var(--text-primary); letter-spacing: 1px; }
/* 箭头 / 帮助 / 提醒：视觉本体 34，命中区 ≥44（长期规则 #244：命中区要「本体」达标，别靠伪元素） */
.hl-cal-arrow, .hl-reminder-btn, .hl-help-btn {
    position: relative; width: 34px; height: 34px; min-width: var(--hl-tap); min-height: var(--hl-tap);
    border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--surface); cursor: pointer; color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    -webkit-appearance: none; appearance: none; touch-action: manipulation;
    transition: border-color var(--hl-t-micro) ease, color var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease);
}
.hl-cal-arrow:hover, .hl-help-btn:hover { border-color: var(--hl-rose-cta); color: var(--hl-rose-cta); }
.hl-cal-arrow:active, .hl-help-btn:active { transform: scale(0.93); }
.hl-reminder-btn { position: absolute; right: 0; color: var(--hl-text-faint); }
.hl-help-btn { position: absolute; right: 50px; color: var(--hl-text-faint); }
.hl-reminder-btn:hover { color: var(--gold-dark); border-color: var(--gold); }
.hl-cal-arrow:focus-visible, .hl-reminder-btn:focus-visible, .hl-help-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }

.hl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 10px; }
.hl-cal-cell {
    aspect-ratio: 1; min-height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; border: none; background: transparent; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--hl-fs-base); color: var(--text-primary); padding: 0;
    -webkit-appearance: none; appearance: none; touch-action: manipulation;
    transition: background var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease);
}
.hl-cal-day { cursor: pointer; }
/* 7 列是语义必需的网格：格子只能到 42（实测值，不是 44）—— 注释与交接文档都写实测尺寸 */
.hl-cal-wkday { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); letter-spacing: 0.5px; }
.hl-cal-num { position: relative; z-index: 1; }
/* 标记最多三种（施工单 §3.5）：今天 / 记过的经期 / 预计要来的日子。
   绝不叠多层背景与边框 —— 原来还有「开始日加粗」（.hl-cal-start）已删：第四种标记就是堆叠。 */
.hl-cal-period-dot { position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--hl-rose-cta); }
.hl-cal-period { background: var(--hl-rose-cta-soft); }
/* 不是经期、只记了身体感受/不舒服的那天：一个极淡的点（不是玫瑰底，免得看着像经期） */
.hl-cal-soft::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.55; }
.hl-cal-today { box-shadow: inset 0 0 0 1.5px var(--gold); }
.hl-cal-predicted .hl-cal-num { color: var(--hl-rose-cta); }
.hl-cal-predicted { background: rgba(142,95,95,0.06); }

/* ===== 身体感受（施工单 §3.6 第一项；甲方 2028-09-21 定：单独一档 1~5）=====
   横向排不下就换行；本体尺寸 ≥44 高（窄屏也不许下调触摸目标）。 */
.hl-feel-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-feel-chip {
    flex: 1 1 auto; min-width: 0; min-height: var(--hl-tap); padding: 0 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
    font-family: var(--font-body); font-size: var(--hl-fs-sm); color: var(--text-secondary);
    cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation;
    transition: border-color var(--hl-t-micro) ease, background var(--hl-t-micro) ease, color var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease);
}
.hl-feel-chip:active { transform: scale(0.97); }
.hl-feel-chip.active { border-color: var(--hl-rose-cta); background: var(--hl-rose-cta-soft); color: var(--hl-rose-cta); font-weight: 600; }
.hl-feel-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }

/* ===== 帮助抽屉（施工单 §3.10：一个轻量问号）===== */
.hl-help-block { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border-faint); }
.hl-help-block:last-of-type { border-bottom: none; }
.hl-help-t { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-md); color: var(--hl-rose-cta); margin-bottom: 6px; letter-spacing: 0.5px; }
.hl-help-p { font-size: var(--hl-fs-sm); color: var(--text-secondary); line-height: 1.9; }

.hl-stats-card { padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.hl-stats-summary { font-size: var(--hl-fs-sm); color: var(--text-secondary); letter-spacing: 0.5px; line-height: 1.7; }
.hl-stats-hint { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); margin-top: 4px; line-height: 1.7; }
.hl-stats-detail { margin-top: 10px; font-size: var(--hl-fs-sm); color: var(--text-secondary); line-height: 1.9; border-top: 1px solid var(--border-faint); padding-top: 8px; }

/* ===== Day Detail Drawer =====
   抽屉壳已统一到公共组件层（.hui-sheet / .hui-scrim，见文件末尾组件层）；
   这里原来那一套 .hl-day-drawer / .hl-drawer-overlay / .hl-drawer-mask / .hl-drawer-sheet
   全部删掉 —— 两套各写一份＝改一处不生效（长期规则 #226）。 */

/* ===== 抽屉内的表单件（抽屉壳本身在公共组件层 .hui-sheet）===== */
.hl-form-label { font-size:var(--hl-fs-sm); color:var(--text-secondary); letter-spacing:0.6px; font-weight:600; display:flex; align-items:baseline; gap:6px; margin-top:6px; }
.hl-pain-val { font-size:var(--hl-fs-md); color:var(--hl-rose-cta); font-weight:700; font-variant-numeric:tabular-nums; }
.hl-pain-max { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-hint-block { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); line-height:1.7; padding:6px 0 2px; }
.hl-block { display:flex; flex-direction:column; gap:10px; padding:12px 0; }
.hl-grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 12px; }
.hl-divider-line { height:1px; background:var(--border-faint); margin:12px 0; }

/* 更多（进阶项默认收起 —— 施工单 §F「渐进式披露」） */
.hl-more { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); overflow:hidden; }
.hl-more-sum { list-style:none; cursor:pointer; padding:12px 14px; font-size:var(--hl-fs-sm); color:var(--text-secondary); letter-spacing:0.6px; font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.hl-more-sum::-webkit-details-marker { display:none; }
.hl-more-sum::after { content:''; width:8px; height:8px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg); transition:transform var(--hl-t-page) var(--hl-ease); }
.hl-more[open] .hl-more-sum::after { transform:rotate(-135deg); }
.hl-more-body { padding:2px 14px 12px; }

/* 经量：CSS 圆滴（不用 ● 字符）。本体就是 44 命中区，不做透明层
   —— 长期规则 #214：命中区只靠伪元素撑时，量尺量出来是 28，看着像不达标；
     本体给足才是「量得到、也真的点得准」。 */
.hl-flow-drops { display:flex; gap:6px; flex-wrap:wrap; }
.hl-flow-drop { position:relative; width:var(--hl-tap); height:var(--hl-tap); border-radius:50%; border:none; background:transparent; cursor:pointer; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    -webkit-appearance:none; appearance:none; touch-action:manipulation;
    transition:transform var(--hl-t-micro) var(--hl-ease); }
/* 圆滴视觉本体 28，靠 ::before 居中画出来（点击仍落在 44 的按钮上） */
.hl-flow-drop::before { content:''; position:absolute; width:28px; height:28px; border-radius:50%; background:var(--border);
    transition:background var(--hl-t-page) var(--hl-ease); }
.hl-flow-drop.active::before { background:var(--hl-rose-cta); }
.hl-flow-drop.active { box-shadow:none; }
.hl-flow-drop:active { transform:scale(0.94); }
.hl-flow-chips { display:flex; flex-wrap:wrap; gap:8px; }

/* 疼痛 0~10：自绘刻度，两行（0~5 / 6~10；11 格第 2 行自然只排 5 个）。
   每格命中区就是本体 44×≥48，不做透明拉伸 */
.hl-pain-scale { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px; width:100%; }
.hl-pain-cell {
    width:100%; min-height:var(--hl-tap); border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--text-secondary);
    font-family:var(--font-body); font-size:var(--hl-fs-sm); font-variant-numeric:tabular-nums;
    cursor:pointer; -webkit-appearance:none; appearance:none; touch-action:manipulation;
    transition:background var(--hl-t-micro) ease, color var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease;
}
.hl-pain-cell.is-zero { color:var(--hl-text-faint); }
.hl-pain-cell.active { background:var(--hl-rose-cta-soft); border-color:var(--hl-rose-cta); color:var(--hl-rose-cta); font-weight:700; }
.hl-pain-cell:active { transform:scale(0.95); }
.hl-pain-cell:focus-visible { outline:none; box-shadow:0 0 0 3px var(--hl-rose-cta-soft); }
/* 窄屏（<370）也还是两个 44 高的格子并排最小 ≥48 宽，不改行数 */
@media (max-width:370px) { .hl-pain-cell { font-size:var(--hl-fs-xs); } }

/* 抽屉里的小标题行 / 按钮行（保存与删除必须明显不同款） */
.hl-drawer-btns { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.hl-reminder-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-faint); font-size:var(--hl-fs-base); }
.hl-reminder-row > span { color:var(--text-primary); }
.hl-pick-list { display:flex; flex-direction:column; }
.hl-pick-item { text-align:left; padding:14px 4px; border:none; border-bottom:1px solid var(--border-faint); background:transparent; color:var(--text-primary); font-family:var(--font-body); font-size:var(--hl-fs-base); cursor:pointer; min-height:var(--hl-tap); transition:background var(--hl-t-micro) ease; }
.hl-pick-item:active { background:var(--hl-rose-cta-soft); }

/* ===== Intimacy Section（第5窗口：周期页底部那张私人小卡 · 施工单 §L 5.3）=====
   口径（甲方 2028-09-21 与施工单 §L 5.3）：
     · **默认折叠**，收起时只有一行「一共记了多少次、最近一次什么时候」；
     · 标题＝装饰英文 Private notes ＋ 中文功能标题（英文只做装饰，不承担信息）；
     · 不用爱心铺屏、不用 emoji、不用大面积粉色 —— 走同一套令牌：淡玫瑰描边 + 米白底 + 衬线标题；
     · 触控目标一律按本体 ≥44（长期规则 #244：伪元素撑出来的命中区量尺量不到）。
   服务端不给时这一块**一个 div 都不生成**（不是 display:none），判据见 panels-health-intimacy.js。 */
.hl-intimacy-section { margin: 14px 0 6px; padding: 14px 16px 12px; border-radius: var(--radius-lg);
    border: 1px solid var(--hl-rose-line); background: var(--hl-rose-cta-soft); }
.hl-intimacy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: var(--hl-tap); cursor: pointer; user-select: none; }
.hl-intimacy-head:active { transform: scale(0.99); }
.hl-intimacy-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hl-intimacy-en { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-sm);
    color: var(--gold-dark); letter-spacing: 1.5px; line-height: 1; }
[data-theme-mode="dark"] .hl-intimacy-en { color: var(--gold); }
.hl-intimacy-title { font-family: var(--font-display); font-size: var(--hl-fs-md); color: var(--hl-rose-cta);
    letter-spacing: 1px; line-height: 1.4; }
.hl-intimacy-arrow { color: var(--hl-text-faint); display: inline-flex; width: var(--hl-tap); height: var(--hl-tap);
    align-items: center; justify-content: center; transition: transform var(--hl-t-page) var(--hl-ease); }
.hl-intimacy-arrow.is-open { transform: rotate(180deg); }
.hl-intimacy-sub { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); line-height: 1.7; margin-top: 2px; }
.hl-intimacy-body { margin-top: 10px; border-top: 1px solid var(--border-faint); padding-top: 10px; }
.hl-intimacy-list { display: flex; flex-direction: column; }
.hl-intimacy-month { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-sm);
    color: var(--hl-text-faint); letter-spacing: 1px; margin: 10px 0 4px; }
.hl-intimacy-month:first-child { margin-top: 0; }
.hl-intimacy-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px;
    padding: 9px 0; border-bottom: 1px solid var(--border-faint); min-height: var(--hl-tap); }
.hl-intimacy-date { min-width: 44px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hl-intimacy-main { flex: 1 1 auto; min-width: 0; color: var(--text-primary); }
.hl-intimacy-stars { display: inline-flex; align-items: center; flex: 0 0 auto; }
.hl-intimacy-notes, .hl-intimacy-note { flex: 1 1 100%; font-size: var(--hl-fs-xs); color: var(--text-secondary); line-height: 1.7; }
.hl-intimacy-note { color: var(--hl-text-faint); }
.hl-intimacy-acts { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.hl-itm-act { min-height: var(--hl-tap); min-width: var(--hl-tap); padding: 0 10px; border: 1px solid var(--hl-rose-line);
    background: transparent; color: var(--hl-rose-cta); font-family: var(--font-body); font-size: var(--hl-fs-sm);
    border-radius: var(--radius-full); cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: background var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease); }
.hl-itm-act:active { transform: scale(0.96); background: var(--hl-rose-cta-soft); }
/* 删除键：低强调危险样式，绝不能跟「改」长得一样（施工单 §F） */
.hl-itm-act.is-danger { border-color: var(--hl-danger-soft); color: var(--hl-danger); }
.hl-itm-act.is-danger:active { background: var(--hl-danger-soft); }
.hl-intimacy-acts-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hl-intimacy-privacy { margin-top: 10px; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); line-height: 1.7; }
/* 评分 1~5：自绘（禁原生 range）—— 本体 44×44，选中＝本色 + 淡底 */
.hl-itm-rate { display: flex; flex-wrap: wrap; gap: 4px; }
.hl-itm-rate-btn { width: var(--hl-tap); height: var(--hl-tap); display: inline-flex; align-items: center;
    justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
    color: var(--border-faint); cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: color var(--hl-t-micro) ease, background var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease); }
.hl-itm-rate-btn:active { transform: scale(0.94); }
.hl-itm-rate-btn.is-on { color: var(--hl-rose-cta); background: var(--hl-rose-cta-soft); border-color: var(--hl-rose-line); }
.hl-itm-rate-clear { min-height: var(--hl-tap); padding: 0 8px; margin-left: 4px; border: none; background: none;
    color: var(--hl-text-faint); font-family: var(--font-body); font-size: var(--hl-fs-xs); cursor: pointer;
    -webkit-appearance: none; appearance: none; }
.hl-itm-rate-clear:active { color: var(--hl-rose-cta); }

/* ===== Fitness Sub-Tabs ===== */
.hl-fit-subtabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:10px; }
.hl-fit-subtab { flex:1; min-height:var(--hl-tap); padding:8px 0; border:none; background:none; font-size:var(--hl-fs-base); color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; font-family:var(--font-body); -webkit-appearance:none; appearance:none; transition:color var(--hl-t-page) var(--hl-ease), border-color var(--hl-t-page) var(--hl-ease); }
.hl-fit-subtab.active { color:var(--hl-rose-cta); border-bottom-color:var(--hl-rose-cta); font-weight:600; }
.hl-fit-subtab:active { transform:scale(0.98); }

/* ===== Body Data ===== */
.hl-body-card { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.hl-body-date { font-size:var(--hl-fs-sm); font-weight:600; color:var(--text-secondary); min-width:78px; }
.hl-body-stats { display:flex; flex-wrap:wrap; gap:6px; flex:1; font-size:var(--hl-fs-sm); color:var(--text-secondary); }
.hl-body-stats span { padding:2px 9px; background:var(--quote-bg); border-radius:var(--radius-sm); }
.hl-body-del { position:relative; width:var(--hl-tap); height:var(--hl-tap); border:none; background:none; color:var(--text-secondary); cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; transition:color var(--hl-t-micro) ease, background var(--hl-t-micro) ease; }
.hl-body-del:hover { color:var(--hl-danger); background:var(--hl-danger-soft); }

/* ===== Exercise Grid ===== */
.hl-ex-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.hl-ex-card { padding:14px 10px; cursor:pointer; text-align:center; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:0 1px 0 rgba(255,255,255,0.5) inset, var(--shadow-xs); min-height:var(--hl-tap); font-family:var(--font-body); -webkit-appearance:none; appearance:none; transition:transform var(--hl-t-micro) var(--hl-ease), box-shadow var(--hl-t-micro) ease; }
.hl-ex-card:active { transform:scale(0.97); }
.hl-ex-icon { margin-bottom:6px; color:var(--hl-rose-cta); }
.hl-ex-icon svg { stroke:currentColor; }
.hl-ex-name { font-size:var(--hl-fs-base); font-weight:600; color:var(--text-primary); margin-bottom:3px; }
.hl-ex-muscle { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); margin-bottom:5px; }
.hl-ex-diff { font-size:var(--hl-fs-xs); padding:2px 8px; border-radius:var(--radius-full); letter-spacing:0.5px; }
.hl-diff-beginner { background:var(--hl-sage-cta); color:#fff; }
.hl-diff-intermediate { background:var(--gold-light); color:var(--gold-dark); }
.hl-diff-advanced { background:var(--hl-rose-cta); color:#fff; }
[data-theme-mode="dark"] .hl-diff-intermediate { color:var(--gold); }

/* ===== 动作详情（内容件；外壳走公共抽屉）===== */
.hl-ex-detail-name { font-size:var(--hl-fs-lg); font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.hl-ex-detail-en { font-family:'Playfair Display',var(--font-display),serif; font-style:italic; font-size:var(--hl-fs-base); color:var(--gold); letter-spacing:1px; margin-bottom:10px; }
.hl-ex-detail-muscle { font-size:var(--hl-fs-sm); color:var(--text-secondary); margin-bottom:8px; }
.hl-ex-detail-desc { font-size:var(--hl-fs-base); line-height:1.75; color:var(--text-primary); margin-bottom:10px; }
.hl-ex-detail-prec { font-size:var(--hl-fs-xs); color:var(--hl-rose-cta); background:var(--hl-rose-cta-soft); padding:10px 12px; border-radius:var(--radius-sm); line-height:1.7; margin-bottom:12px; display:flex; gap:6px; align-items:flex-start; }
.hl-ex-detail-prec .hui-icon { flex:0 0 auto; margin-top:2px; }

/* ===== Plan Cards ===== */
.hl-plan-card { margin-bottom:8px; cursor:pointer; position:relative; padding-right:52px; }
.hl-plan-name { font-size:var(--hl-fs-md); font-weight:600; margin-bottom:3px; color:var(--text-primary); }
.hl-plan-meta { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-plan-del { position:absolute; right:6px; top:6px; width:var(--hl-tap); height:var(--hl-tap); border:none; background:none; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; transition:color var(--hl-t-micro) ease, background var(--hl-t-micro) ease; }
.hl-plan-del:hover { color:var(--hl-danger); background:var(--hl-danger-soft); }
.hl-plan-del:active { transform:scale(0.93); }

.hl-plan-detail-view { animation:huiPageIn var(--hl-t-page) var(--hl-ease); }
.hl-plan-detail-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.hl-plan-detail-title { font-weight:600; font-size:var(--hl-fs-md); flex:1; min-width:0; }
.hl-plan-days { display:flex; flex-direction:column; }
.hl-plan-preview { font-size:var(--hl-fs-sm); color:var(--hl-rose-cta); font-style:italic; padding:8px 0; border-bottom:1px solid var(--border-faint); margin-bottom:8px; line-height:1.7; }
/* 这份计划按什么条件筛的（器械/难度/每周几次/每次多久/共几周）—— 允许换行，窄屏不挤 */
.hl-plan-cond { display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 10px; }
.hl-plan-day { margin-bottom:8px; }
.hl-plan-day-num { font-size:var(--hl-fs-base); font-weight:600; margin-bottom:6px; }
.hl-plan-ex { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border-faint); flex-wrap:wrap; }
.hl-plan-ex-name { font-size:var(--hl-fs-base); font-weight:600; min-width:80px; }
.hl-plan-ex-info { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-plan-ex-muscle { font-size:var(--hl-fs-xs); color:var(--text-secondary); background:var(--quote-bg); padding:1px 7px; border-radius:var(--radius-xs); }
/* 强度提示：用极淡的左侧渐变条（细，不是粗边框） */
.hl-int-high { background:linear-gradient(90deg, var(--hl-rose-cta-soft) 4px, transparent 4px); padding-left:12px; border-radius:0 6px 6px 0; }
.hl-int-medium { background:linear-gradient(90deg, var(--gold-light) 4px, transparent 4px); padding-left:12px; border-radius:0 6px 6px 0; }
.hl-int-low { background:linear-gradient(90deg, var(--sage-light) 4px, transparent 4px); padding-left:12px; border-radius:0 6px 6px 0; }
.hl-plan-day .hui-btn { margin-top:10px; }

/* ===== 第6窗口：今日训练（首屏那一张卡）===== */
.hl-today-card { padding:16px 14px; }
.hl-today-tag { font-family:'Playfair Display',var(--font-display),serif; font-style:italic; font-size:var(--hl-fs-sm);
    color:var(--gold); letter-spacing:2px; margin-bottom:4px; }
.hl-today-name { font-size:var(--hl-fs-lg); font-weight:600; color:var(--text-primary); letter-spacing:0.5px; margin-bottom:6px; }
.hl-today-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:var(--hl-fs-xs); color:var(--text-secondary); margin-bottom:10px; }
.hl-today-meta span { padding:2px 9px; background:var(--quote-bg); border-radius:var(--radius-sm); }
/* 今天已经真练过一次 → 这一格换个颜色说清楚（不是灰掉、不是压淡：她今天真做到了） */
.hl-today-done { color:var(--hl-rose-cta); background:var(--hl-rose-cta-soft); font-weight:600; }
.hl-today-list { margin-bottom:12px; }
.hl-today-ex { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-faint); }
.hl-today-ex-i { flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--hl-rose-cta-soft);
    color:var(--hl-rose-cta); font-size:var(--hl-fs-xs); display:inline-flex; align-items:center; justify-content:center; }
.hl-today-ex-name { flex:1; min-width:0; font-size:var(--hl-fs-base); font-weight:600; color:var(--text-primary); }
.hl-today-ex-info { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-today-alt { margin-top:8px; }
/* ===== 第6窗口：轻量趋势图（自己画的 SVG，不引图表库）===== */
.hl-trend { margin-bottom:12px; }
.hl-trend-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:2px; }
.hl-trend-label { font-size:var(--hl-fs-sm); color:var(--text-secondary); letter-spacing:0.5px; }
.hl-trend-delta { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-trend-delta.is-up { color:var(--hl-rose-cta); }
.hl-trend-delta.is-down { color:var(--hl-sage-cta); }
.hl-trend-svg { width:100%; height:68px; display:block; }
.hl-trend-line { fill:none; stroke:var(--hl-rose-cta); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.hl-trend-area { fill:var(--hl-rose-cta-soft); stroke:none; }
.hl-trend-dot { fill:var(--hl-rose-cta); stroke:var(--surface); stroke-width:1.2; }
.hl-trend-foot { display:flex; justify-content:space-between; font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-trend-none { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); padding:8px 0 10px; }
.hl-body-note { flex:1 0 100%; font-size:var(--hl-fs-xs); color:var(--text-secondary); line-height:1.6; }
.hl-body-group { margin-bottom:10px; }
.hl-body-group-t { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); letter-spacing:1px; margin:2px 0 6px; }

/* ===== 第6窗口：动作卡与动作详情（图解 / 发力 / 常见错误 / 替代 / 抓手机边界）===== */
.hl-ex-en { font-family:'Playfair Display',var(--font-display),serif; font-style:italic; font-size:var(--hl-fs-xs);
    color:var(--gold); letter-spacing:0.5px; margin-bottom:4px; }
.hl-ex-detail-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.hl-ex-chip { font-size:var(--hl-fs-xs); padding:2px 9px; border-radius:var(--radius-full);
    background:var(--quote-bg); color:var(--text-secondary); }
.hl-ex-sec { margin-bottom:14px; }
.hl-ex-sec-t { font-size:var(--hl-fs-xs); letter-spacing:1.5px; color:var(--gold); margin-bottom:6px; }
.hl-ex-steps { display:flex; flex-direction:column; gap:6px; }
.hl-ex-step { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--quote-bg);
    border-radius:var(--radius-sm); }
.hl-ex-step-n { flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--hl-rose-cta);
    color:#fff; font-size:var(--hl-fs-xs); display:inline-flex; align-items:center; justify-content:center; }
.hl-ex-step-t { flex:1; min-width:0; font-size:var(--hl-fs-sm); color:var(--text-primary); line-height:1.6; }
.hl-ex-step-fig { flex:0 0 auto; color:var(--hl-rose-cta); display:inline-flex; }
.hl-ex-cap { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); line-height:1.7; margin-top:6px; }
.hl-ex-muscles { display:flex; flex-direction:column; gap:4px; font-size:var(--hl-fs-sm); }
.hl-ex-mus-main { color:var(--text-primary); font-weight:600; }
.hl-ex-mus-sec { color:var(--text-secondary); }
.hl-ex-mistakes { margin:0; padding-left:18px; font-size:var(--hl-fs-sm); color:var(--text-primary); line-height:1.8; }
.hl-ex-alt { display:flex; flex-wrap:wrap; gap:6px; }
.hl-ex-alt-item { font-size:var(--hl-fs-sm); padding:4px 10px; border-radius:var(--radius-full);
    background:var(--hl-rose-cta-soft); color:var(--hl-rose-cta); }
.hl-ex-cam { display:flex; align-items:flex-start; gap:6px; font-size:var(--hl-fs-sm); line-height:1.7;
    color:var(--text-secondary); background:var(--quote-bg); border-radius:var(--radius-sm); padding:10px 12px; }
.hl-ex-cam.is-on { color:var(--hl-sage-cta); background:var(--sage-light); }
.hl-ex-cam svg { flex:0 0 auto; margin-top:2px; }

/* ===== 第6窗口：计划状态与「换一个合适的」===== */
.hl-sec-head { font-size:var(--hl-fs-xs); letter-spacing:1.5px; color:var(--hl-text-faint); margin:4px 0 8px; }
.hl-plan-head-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.hl-plan-state { font-size:var(--hl-fs-xs); padding:1px 8px; border-radius:var(--radius-full);
    background:var(--quote-bg); color:var(--text-secondary); }
.hl-plan-state.is-active { background:var(--hl-rose-cta-soft); color:var(--hl-rose-cta); }
.hl-plan-state.is-paused { background:var(--gold-light); color:var(--gold-dark); }
.hl-plan-state.is-completed { background:var(--sage-light); color:var(--hl-sage-cta); }
.hl-plan-state.is-archived, .hl-plan-state.is-draft { background:var(--quote-bg); color:var(--hl-text-faint); }
[data-theme-mode="dark"] .hl-plan-state.is-paused { color:var(--gold); }
.hl-plan-card.is-archived { opacity:0.72; }
.hl-plan-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.hl-plan-actions .hui-btn { flex:1 1 auto; }
.hl-plan-ex-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; min-width:0; }
.hl-plan-ex-ops { display:flex; align-items:center; gap:4px; }
.hl-plan-ex-detail { position:relative; width:var(--hl-tap); height:var(--hl-tap); border:none; background:none;
    color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; -webkit-appearance:none; appearance:none; transition:color var(--hl-t-micro) ease, background var(--hl-t-micro) ease; }
.hl-plan-ex-detail:active { color:var(--hl-rose-cta); background:var(--hl-rose-cta-soft); }
.hl-replace-box { padding:14px 12px; margin-bottom:10px; }
.hl-replace-box.is-busy { opacity:0.6; pointer-events:none; }
.hl-replace-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.hl-replace-t { font-size:var(--hl-fs-base); font-weight:600; color:var(--text-primary); }
.hl-replace-x { width:var(--hl-tap); height:var(--hl-tap); border:none; background:none; color:var(--text-secondary);
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
    -webkit-appearance:none; appearance:none; }
.hl-replace-x:active { color:var(--hl-rose-cta); }
.hl-replace-cur { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); margin-bottom:8px; }
.hl-replace-item { display:flex; align-items:center; gap:8px; width:100%; min-height:var(--hl-tap); padding:8px 10px;
    margin-bottom:6px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);
    font-family:var(--font-body); text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none;
    transition:border-color var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease); }
.hl-replace-item:active { transform:scale(0.98); border-color:var(--hl-rose-line); }
.hl-replace-name { font-size:var(--hl-fs-base); font-weight:600; color:var(--text-primary); }
.hl-replace-why { flex:1; min-width:0; font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-replace-go { flex:0 0 auto; font-size:var(--hl-fs-xs); color:var(--hl-rose-cta); }
.hl-replace-none { font-size:var(--hl-fs-sm); color:var(--text-secondary); line-height:1.7; }

/* ===== FULLSCREEN TRAINING OVERLAY =====
   挂 #app 内（原来挂 body 再靠 left:50%+translateX 硬掰：桌面撑满、iOS 顶部安全区没让出）。
   文本色一律用下面两组令牌 —— 原来那一串 rgba(255,255,255,0.3/0.4) 在 #1A1614 上只有 3~4:1，
   读不清；令牌值由 tools/health-ui.test.js 的对比度断言盯着。 */
.hl-training-overlay {
    position:absolute; inset:0; display:none;
    flex-direction:column; align-items:center; justify-content:center;
    z-index:var(--hl-z-full);
    opacity:0; transition:opacity var(--hl-t-page) var(--hl-ease);
}
.hl-training-overlay.show { opacity:1; display:flex; }
/* ★ 顺序不能反：`.out` 必须排在 `.show` **后面**（两者特异度相同，后写的赢）。
   原来 `.out` 写在前面 → 退场那一帧的 opacity 被 .show 的 1 盖掉 → 「动画跑完了才收尾」永远等不到
   （浏览器连一次重排都没发生，animationend 也不发），训练层就那样留在屏幕上
   —— 真浏览器量尺抓到的真 bug（长期规则 #86 同族的 CSS 顺序坑）。 */
.hl-training-overlay.out { animation:hlToOut 400ms var(--hl-ease) forwards; pointer-events:none; }
@keyframes hlToOut { from { opacity:1; } to { opacity:0; } }
.hl-to-bg { position:absolute; inset:0; background:var(--hl-to-bg); }
/* 第7窗口：三屏共用一棵树（倒计时 / 训练中 / 结束），靠根上这三档切显隐。
   原来每次换状态整块 innerHTML 重建 → 每秒重画整个层，手机上就是「闪一下」。 */
.hl-to-stage { display:none; flex-direction:column; align-items:center; justify-content:center; width:100%; }
.hl-training-overlay.is-countdown .hl-to-count { display:flex; }
.hl-training-overlay:not(.is-countdown):not(.is-done) .hl-to-work { display:flex; }
.hl-training-overlay.is-done .hl-to-done { display:flex; }
/* 倒计时：数字切换（一次性 class，动画走完摘掉） */
.hl-to-count-num { font-family:var(--font-display); font-size:clamp(72px,26vw,120px); font-weight:300; color:var(--hl-to-timer); line-height:1; }
.hl-to-count-num.is-pop { animation:hlToPop 700ms var(--hl-ease); }
@keyframes hlToPop { from { opacity:0.2; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
.hl-to-count-tip { margin-top:14px; font-size:var(--hl-fs-base); color:var(--hl-to-ink-mid); letter-spacing:2px; }
/* 动作切换的左右轻位移（V5 §7.10）——一次性 class */
.hl-to-ex-name.is-slide-r { animation:hlToSlideR 260ms var(--hl-ease); }
.hl-to-ex-name.is-slide-l { animation:hlToSlideL 260ms var(--hl-ease); }
@keyframes hlToSlideR { from { opacity:0.3; transform:translateX(14px); } to { opacity:1; transform:translateX(0); } }
@keyframes hlToSlideL { from { opacity:0.3; transform:translateX(-14px); } to { opacity:1; transform:translateX(0); } }
.hl-to-progress { margin-top:16px; font-size:var(--hl-fs-xs); color:var(--hl-to-ink-weak); letter-spacing:1px; }

/* ===== 第8窗口 · 抓手机跟练那一屏（V5 §O） =====
   与「训练中」那一屏同在一棵树里，靠根上的 .is-sensor 切显隐。
   特异性说明：`.hl-training-overlay.is-sensor .hl-to-sens`（0,3,0）比上面那条
   `.hl-training-overlay:not(.is-countdown):not(.is-done) .hl-to-work`（也是 0,3,0）更大一位，
   但为了不靠"谁写在后面"取胜，显隐一律用**更具体**的写法：显式关掉 work 那一屏。 */
.hl-training-overlay.is-sensor:not(.is-countdown):not(.is-done) .hl-to-work { display:none; }
.hl-training-overlay.is-sensor:not(.is-done) .hl-to-sens { display:flex; }
.hl-training-overlay.is-sensor.is-done .hl-to-done { display:flex; }
.hl-to-sens { padding:0 24px; }
.hl-to-sens-head { text-align:center; margin-bottom:6px; }
.hl-to-sens-head .hl-to-ex-name { padding:0 24px; }
.hl-to-sens-count { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin:6px 0 2px; }
.hl-to-sens-reps { font-family:var(--font-display); font-size:clamp(72px,26vw,120px); font-weight:300;
    line-height:1; color:var(--hl-to-timer); font-variant-numeric:tabular-nums; }
/* 数满一次就轻轻跳一下（一次性 class，动画走完由 JS 摘掉） */
.hl-to-sens-reps.is-pop { animation:hlSensPop 320ms var(--hl-ease); }
@keyframes hlSensPop { from { transform:scale(0.92); opacity:0.65; } to { transform:scale(1); opacity:1; } }
.hl-to-sens-unit { font-size:var(--hl-fs-base); color:var(--hl-to-ink-mid); padding-bottom:14px; letter-spacing:2px; }
.hl-to-sens-note { min-height:24px; text-align:center; font-size:var(--hl-fs-base); color:var(--hl-to-ink);
    letter-spacing:1px; margin-top:4px; }
.hl-to-sens-tip { text-align:center; font-size:var(--hl-fs-xs); color:var(--hl-to-ink-weak);
    line-height:1.8; margin-top:10px; max-width:340px; }
.hl-to-sens-ctl { width:100%; max-width:340px; margin-top:22px; display:flex; flex-direction:column; gap:10px; }
/* 校准那一块：只在"还没开始"时出现（.is-sensor-calib / .is-sensor-live 由 paintTrainingStage 切） */
.hl-to-sens-calib { display:none; width:100%; max-width:340px; margin-top:22px; text-align:center; }
.hl-training-overlay.is-sensor-calib .hl-to-sens-calib { display:block; }
.hl-training-overlay.is-sensor-calib .hl-to-sens-ctl { display:none; }
.hl-to-calib-title { font-family:var(--font-display); font-style:italic; font-size:var(--hl-fs-xl);
    color:var(--hl-to-ink); letter-spacing:2px; margin-bottom:10px; }
.hl-to-calib-hint { font-size:var(--hl-fs-base); color:var(--hl-to-ink-mid); line-height:1.9; margin-bottom:8px; }
.hl-to-calib-state { font-size:var(--hl-fs-sm); color:var(--hl-to-ink-weak); line-height:1.9; margin-bottom:16px;
    min-height:22px; }
/* 今日训练卡上那个入口下面的一句说明 */
.hl-today-motion { margin-top:10px; }
.hl-today-motion-tip { margin-top:8px; font-size:var(--hl-fs-xs); color:var(--text-secondary); line-height:1.8; }
.hl-training-overlay.is-paused .hl-to-timer { color:var(--hl-to-ink-mid); }
.hl-training-overlay.is-paused .hl-to-phase { color:var(--hl-to-timer-hot); }
/* 结束页里的奖励那一块（今日打卡 / 连续 N 天 / 积分 +N / 勋章） */
.hl-to-reward { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:2px 0 12px; }
.hl-to-reward-item { font-size:var(--hl-fs-sm); color:var(--hl-to-ink-mid); border:1px solid rgba(255,255,255,0.18);
    border-radius:var(--radius-full); padding:5px 12px; }
.hl-to-reward-item.is-points { color:var(--hl-to-timer); border-color:rgba(168,184,160,0.42); }
.hl-to-badge { display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:14px;
    font-size:var(--hl-fs-sm); color:var(--hl-to-timer-hot); }
.hl-to-done-warn { font-size:var(--hl-fs-sm); color:var(--hl-to-ink-mid); line-height:1.8; margin-bottom:12px; }
.hl-quit-note { font-size:var(--hl-fs-sm); color:var(--text-secondary); line-height:1.9; margin-bottom:12px; }
/* 训练→食谱轻联动（拿不到真菜名时这一块整块不出现） */
.hl-to-eat { width:100%; max-width:320px; margin:0 auto 16px; }
.hl-to-eat-head { font-size:var(--hl-fs-xs); color:var(--hl-to-ink-weak); letter-spacing:1px; margin-bottom:8px; }
.hl-to-eat-item { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
    min-height:var(--hl-tap); padding:8px 14px; margin-bottom:6px; border:1px solid rgba(255,255,255,0.18);
    border-radius:var(--radius-md); background:rgba(255,255,255,0.05); cursor:pointer;
    font-family:var(--font-body); -webkit-appearance:none; appearance:none;
    transition:background var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease); }
.hl-to-eat-item:active { transform:scale(0.98); background:rgba(255,255,255,0.1); }
.hl-to-eat-name { font-size:var(--hl-fs-base); color:var(--hl-to-ink); }
.hl-to-eat-cal { font-size:var(--hl-fs-xs); color:var(--hl-to-ink-weak); }
.hl-to-text-strong { color:var(--hl-to-ink); }
.hl-to-text-mid { color:var(--hl-to-ink-mid); }
.hl-to-text-weak { color:var(--hl-to-ink-weak); }
.hl-to-close {
    position:absolute; top:calc(14px + var(--safe-top)); right:16px;
    width:var(--hl-tap); height:var(--hl-tap); border:1px solid rgba(255,255,255,0.24);
    border-radius:50%; background:rgba(255,255,255,0.06); cursor:pointer;
    display:flex; align-items:center; justify-content:center; z-index:10;
    transition:border-color var(--hl-t-micro) ease, background var(--hl-t-micro) ease;
}
.hl-to-close:hover { border-color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.1); }
.hl-to-close:active { transform:scale(0.93); }
.hl-to-close svg { stroke:var(--hl-to-ink-mid); }
.hl-to-ex-name { font-family:var(--font-display); font-style:italic; font-size:var(--hl-fs-2xl); color:var(--hl-to-ink); letter-spacing:2px; z-index:5; margin-bottom:6px; text-align:center; padding:0 60px; }
.hl-to-set-info { font-size:var(--hl-fs-base); color:var(--hl-to-ink-mid); z-index:5; margin-bottom:18px; letter-spacing:1px; }
.hl-to-timer { font-size:clamp(48px,15vw,72px); font-weight:300; color:var(--hl-to-timer); font-variant-numeric:tabular-nums; z-index:5; letter-spacing:4px; transition:color var(--hl-t-drawer) ease; }
.hl-to-timer.is-last { color:var(--hl-to-timer-hot); }
.hl-to-phase { font-size:var(--hl-fs-base); color:var(--hl-to-ink-mid); z-index:5; margin:8px 0; letter-spacing:2px; }
.hl-to-next { font-size:var(--hl-fs-sm); color:var(--hl-to-ink-weak); z-index:5; margin-top:12px; padding:0 24px; text-align:center; }
.hl-to-controls { display:flex; gap:14px; margin-top:28px; z-index:5; align-items:center; }
.hl-to-ctrl { width:var(--hl-tap); height:var(--hl-tap); border:1px solid rgba(255,255,255,0.22); border-radius:50%; background:rgba(255,255,255,0.06); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--hl-to-ink-mid); transition:background var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease); }
.hl-to-ctrl svg { stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hl-to-ctrl:active { transform:scale(0.93); background:rgba(255,255,255,0.12); }
.hl-to-ctrl-text { font-family:var(--font-body); font-size:var(--hl-fs-sm); }
.hl-to-main { width:54px; height:54px; }
/* 暂停/继续：两个图标都在树里，只切显隐（绝不重建 innerHTML —— 训练中每秒重画是第7窗口点名禁的）*/
.hl-to-ico-play, .hl-to-ico-pause { display:none; align-items:center; justify-content:center; }
.hl-to-main .hl-to-ico-pause { display:flex; }
.hl-to-main.is-paused .hl-to-ico-pause { display:none; }
.hl-to-main.is-paused .hl-to-ico-play { display:flex; }
.hl-to-done-inner { text-align:center; z-index:5; padding:26px; width:100%; max-width:340px; animation:hlToDone var(--hl-t-done) var(--hl-ease); }
@keyframes hlToDone { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.hl-to-done-icon { color:var(--hl-to-timer); margin-bottom:10px; }
.hl-to-done-inner.is-cancel .hl-to-done-icon { color:var(--hl-to-ink-mid); }
.hl-to-done-en { font-family:var(--font-display); font-style:italic; font-size:var(--hl-fs-xl); color:var(--hl-to-ink-mid); letter-spacing:2px; }
.hl-to-done-title { font-size:var(--hl-fs-xl); color:var(--hl-to-ink); letter-spacing:2px; margin:2px 0 14px; }
.hl-to-done-stats { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.hl-to-done-stats span { font-size:var(--hl-fs-base); color:var(--hl-to-ink-mid); }
.hl-to-done-inner .hui-btn { margin-top:8px; }

/* ===== 训练历史 / 统计（第7窗口的「训练」子页）===== */
.hl-tr-start { padding:14px; margin-bottom:12px; }
.hl-tr-start-name { font-size:var(--hl-fs-md); font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.hl-tr-start-meta { font-size:var(--hl-fs-sm); color:var(--text-secondary); margin-bottom:10px; }
.hl-tr-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
.hl-tr-stat { display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; padding:10px 12px;
    border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.hl-tr-stat-v { font-size:var(--hl-fs-xl); font-weight:300; color:var(--hl-rose-cta); font-variant-numeric:tabular-nums; }
.hl-tr-stat-u { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-tr-stat-l { flex-basis:100%; font-size:var(--hl-fs-xs); color:var(--text-secondary); margin-top:2px; }
.hl-tr-sub { font-size:var(--hl-fs-sm); color:var(--text-secondary); line-height:1.8; margin-bottom:8px; }
.hl-tr-muscles { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.hl-tr-muscles-label { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-tr-muscle { font-size:var(--hl-fs-xs); color:var(--text-secondary); background:var(--quote-bg);
    padding:3px 10px; border-radius:var(--radius-full); }
.hl-tr-badges { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.hl-tr-badge { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border);
    border-radius:var(--radius-md); background:var(--surface); color:var(--gold); }
.hl-tr-badge-t { font-size:var(--hl-fs-sm); color:var(--text-primary); font-weight:600; }
.hl-tr-badge-d { margin-left:auto; font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.hl-tr-list { display:flex; flex-direction:column; gap:8px; }
.hl-tr-item { padding:12px 14px; }
.hl-tr-item.is-cancel { opacity:0.72; }
.hl-tr-item-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.hl-tr-item-date { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); letter-spacing:0.5px; }
.hl-tr-item-tag { font-size:var(--hl-fs-xs); color:var(--hl-sage-cta); border:1px solid var(--hl-sage-line);
    border-radius:var(--radius-full); padding:1px 8px; }
.hl-tr-item-tag.is-cancel { color:var(--text-secondary); border-color:var(--border); }
.hl-tr-item-name { font-size:var(--hl-fs-base); font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.hl-tr-item-meta { font-size:var(--hl-fs-xs); color:var(--text-secondary); line-height:1.8; }

/* ===== SVG Training Icons ===== */
.hl-svg-icon { display:inline-block; width:18px; height:18px; vertical-align:-3px; margin-right:4px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ===== 第10窗口：食谱页「归自己管」的那几段 =====
   .rc-owned 标的是 renderRecipeView 每轮要替换掉的那几个节点（横幅 / 三个视图标签 /
   内容容器）。这一页顶上的 W10 那一块（#fd-root）不标它 —— 所以重画只动这一段，
   绝不整页重建（整页重建会把 W10 那一块一起抹掉，量尺实测抓到的就是这个）。 */
.rc-owned { display: block; }

/* ===== Recipe Tab ===== */
.rc-banner { padding:12px 14px; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--hl-fs-sm); line-height:1.7; }
.rc-phase-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rc-phase-dot.menstrual { background:var(--hl-rose-cta); }
.rc-phase-dot.follicular { background:var(--hl-sage-cta); }
.rc-phase-dot.luteal { background:var(--gold); }
.rc-phase-text { color:var(--text-primary); font-weight:600; }
.rc-goal-text { color:var(--text-secondary); font-size:var(--hl-fs-sm); }
.rc-view-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:10px; }
.rc-view-tab { flex:1; min-height:var(--hl-tap); padding:8px 0; border:none; background:none; font-size:var(--hl-fs-sm); color:var(--text-secondary); cursor:pointer; font-family:var(--font-body); border-bottom:2px solid transparent; -webkit-appearance:none; appearance:none; transition:color var(--hl-t-page) var(--hl-ease), border-color var(--hl-t-page) var(--hl-ease); }
.rc-view-tab.active { color:var(--hl-rose-cta); border-bottom-color:var(--hl-rose-cta); font-weight:600; }
.rc-meal-filter { margin-bottom:10px; }
.rc-meal-card { margin-bottom:10px; cursor:pointer; position:relative; padding-right:16px; }
.rc-meal-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.rc-meal-type { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); letter-spacing:1px; }
.rc-meal-cal { font-size:var(--hl-fs-sm); color:var(--hl-rose-cta); font-weight:600; }
.rc-meal-name { font-size:var(--hl-fs-md); font-weight:600; color:var(--text-primary); margin-bottom:7px; }
.rc-meal-macros { display:flex; gap:8px; margin-bottom:7px; flex-wrap:wrap; }
.rc-meal-macros span { font-size:var(--hl-fs-xs); color:var(--text-secondary); background:var(--quote-bg); padding:2px 8px; border-radius:var(--radius-sm); }
.rc-meal-reason { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); font-style:italic; line-height:1.7; }
.rc-save-btn { position:relative; margin-top:10px; border:1px solid var(--hl-rose-line); background:var(--hl-rose-cta-soft); color:var(--hl-rose-cta); border-radius:var(--radius-full); font-family:var(--font-body); font-size:var(--hl-fs-xs); padding:7px 14px; cursor:pointer; -webkit-appearance:none; appearance:none; transition:transform var(--hl-t-micro) var(--hl-ease), background var(--hl-t-micro) ease; }
.rc-save-btn:active { transform:scale(0.96); }
.rc-del-btn { position:absolute; right:6px; top:6px; width:var(--hl-tap); height:var(--hl-tap); border:none; background:none; color:var(--text-secondary); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; transition:color var(--hl-t-micro) ease, background var(--hl-t-micro) ease; }
.rc-del-btn:hover { color:var(--hl-danger); background:var(--hl-danger-soft); }
.rc-detail-cal { font-size:40px; font-weight:300; color:var(--hl-rose-cta); text-align:center; margin:6px 0 14px; font-variant-numeric:tabular-nums; }
.rc-detail-unit { font-size:var(--hl-fs-sm); color:var(--text-secondary); margin-left:6px; }
.rc-detail-macros { margin:10px 0; }
.rc-macro-bar { display:flex; align-items:center; gap:10px; margin:8px 0; font-size:var(--hl-fs-xs); color:var(--text-secondary); }
.rc-macro-label { flex:0 0 46px; }
.rc-macro-track { flex:1; min-width:0; }
.rc-macro-val { flex:0 0 44px; text-align:right; font-variant-numeric:tabular-nums; }
.rc-detail-reason { font-size:var(--hl-fs-sm); color:var(--text-secondary); font-style:italic; text-align:center; margin:12px 0; padding:10px 12px; background:var(--quote-bg); border-radius:var(--radius-sm); line-height:1.75; }
.rc-ingredients { display:flex; flex-wrap:wrap; gap:6px; }
.rc-ingredient { font-size:var(--hl-fs-xs); padding:3px 9px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-secondary); }
.rc-plan-context { font-size:var(--hl-fs-sm); color:var(--hl-rose-cta); font-style:italic; padding:10px 12px; margin-bottom:10px; background:var(--hl-rose-cta-soft); border-radius:var(--radius-sm); line-height:1.7; }
.rc-plan-day { margin-bottom:8px; }
.rc-plan-day-head { display:flex; justify-content:space-between; font-size:var(--hl-fs-base); font-weight:600; margin-bottom:6px; }
.rc-plan-phase { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.rc-plan-meal { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:var(--hl-fs-sm); border-bottom:1px solid var(--border-faint); }
.rc-plan-meal-type { width:24px; height:24px; border-radius:50%; background:var(--hl-rose-cta-soft); color:var(--hl-rose-cta); font-size:var(--hl-fs-xs); display:flex; align-items:center; justify-content:center; font-weight:600; flex:0 0 auto; }
.rc-plan-meal-name { flex:1; color:var(--text-primary); min-width:0; }
.rc-plan-meal-cal { color:var(--hl-text-faint); font-size:var(--hl-fs-xs); flex:0 0 auto; }
.rc-plan-days { display:flex; flex-direction:column; }

/* ===== 第9窗口：今日营养 / 缺口 / 吃饭记录抽屉 / 周计划（施工单 §5.2~§5.9）=====
   只用 health 自己的字号档与 --space-/--radius- 令牌；命中区一律 ≥ --hl-tap（44）。 */
/* ★ 第9窗口：第一屏那一行极短上下文（周期阶段 · 今日训练/休息 · 身体状态）——不是大 banner */
.rc-ctx-line { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); line-height:1.7; margin:2px 0 10px; letter-spacing:0.3px; }

.rc-nut { margin-bottom:10px; }
.rc-nut-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.rc-nut-title { font-size:var(--hl-fs-md); font-weight:600; color:var(--text-primary); letter-spacing:1px; }
.rc-nut-row { display:flex; gap:10px; margin-bottom:12px; }
.rc-nut-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.rc-nut-k { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.rc-nut-v { font-size:var(--hl-fs-xl); font-weight:300; color:var(--hl-rose-cta); font-variant-numeric:tabular-nums; line-height:1.2; }
.rc-nut-v.is-muted { font-size:var(--hl-fs-sm); color:var(--hl-text-faint); font-weight:400; padding:6px 0; }
.rc-nut-u { font-size:var(--hl-fs-xs); color:var(--text-secondary); }
.rc-nut-bars { margin:2px 0 10px; }
.rc-nut-bar { display:flex; align-items:center; gap:10px; margin:7px 0; font-size:var(--hl-fs-xs); color:var(--text-secondary); }
.rc-nut-blabel { flex:0 0 46px; }
.rc-nut-track { flex:1; min-width:0; display:block; }
.rc-nut-track-empty { display:block; height:6px; border-radius:var(--radius-full); background:var(--quote-bg); }
.rc-nut-bval { flex:0 0 48px; text-align:right; font-variant-numeric:tabular-nums; }
.rc-nut-note { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); line-height:1.7; margin:6px 0; }
.rc-nut-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.rc-nut-count { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); }
.rc-nut-moredays { min-height:var(--hl-tap); border:none; background:none; color:var(--text-secondary); font-family:var(--font-body); font-size:var(--hl-fs-xs); padding:0 6px; cursor:pointer; -webkit-appearance:none; appearance:none; }
.rc-nut-moredays:active { color:var(--hl-rose-cta); }
.rc-log-hint.is-recipe { font-size:var(--hl-fs-sm); color:var(--text-secondary); line-height:1.8; margin:0 0 12px; }

/* 吃饭记录 · 按天翻页（施工单 §5.6） */
.rc-hist-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.rc-hist-nav { min-height:var(--hl-tap); min-width:72px; border:1px solid var(--border); border-radius:var(--radius-full); background:none; color:var(--text-secondary); font-family:var(--font-body); font-size:var(--hl-fs-sm); cursor:pointer; -webkit-appearance:none; appearance:none; transition:color var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease; }
.rc-hist-nav:active { color:var(--hl-rose-cta); border-color:var(--hl-rose-line); }
.rc-hist-nav.is-off { opacity:0.35; display:inline-flex; align-items:center; justify-content:center; }
.rc-hist-date { flex:1; text-align:center; font-size:var(--hl-fs-base); color:var(--text-primary); font-variant-numeric:tabular-nums; }
.rc-hist-jump { display:flex; justify-content:center; margin-bottom:6px; }
.rc-hist-today { min-height:32px; border:none; background:none; color:var(--hl-rose-cta); font-family:var(--font-body); font-size:var(--hl-fs-xs); cursor:pointer; -webkit-appearance:none; appearance:none; }
.rc-hist-total { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); margin:6px 0 2px; }
.rc-nut-list { margin-top:10px; border-top:1px solid var(--border-faint); padding-top:6px; }
.rc-nut-log { display:flex; align-items:center; gap:8px; min-height:var(--hl-tap); cursor:pointer; border-bottom:1px solid var(--border-faint); transition:background var(--hl-t-micro) ease; }
.rc-nut-log:last-child { border-bottom:none; }
.rc-nut-log:active { background:var(--quote-bg); }
.rc-nut-log-meal { flex:0 0 auto; font-size:var(--hl-fs-xs); color:var(--hl-rose-cta); background:var(--hl-rose-cta-soft); border-radius:var(--radius-sm); padding:2px 8px; }
.rc-nut-log-foods { flex:1; min-width:0; font-size:var(--hl-fs-sm); color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-nut-log-cal { flex:0 0 auto; font-size:var(--hl-fs-xs); color:var(--hl-text-faint); font-variant-numeric:tabular-nums; }

/* 缺口卡：不写「你缺蛋白质」，而是「还可以补一点」+ 2~3 道真菜 */
.rc-gap { margin-bottom:10px; }
.rc-gap-head { display:flex; align-items:center; justify-content:space-between; font-size:var(--hl-fs-base); font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.rc-gap-set { border:none; background:none; color:var(--hl-rose-cta); font-family:var(--font-body); font-size:var(--hl-fs-xs); min-height:var(--hl-tap); padding:0 4px; cursor:pointer; -webkit-appearance:none; appearance:none; }
.rc-gap-text { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); line-height:1.7; margin-bottom:8px; }
.rc-gap-list { display:flex; flex-direction:column; }
.rc-gap-item { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--border-faint); transition:background var(--hl-t-micro) ease; }
.rc-gap-item:active { background:var(--quote-bg); }
.rc-gap-name { font-size:var(--hl-fs-sm); color:var(--text-primary); }
.rc-gap-open { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:var(--hl-tap); cursor:pointer; }
.rc-gap-add { flex:0 0 auto; min-height:32px; padding:2px 12px; border:1px solid var(--hl-rose-line); background:var(--hl-rose-cta-soft); color:var(--hl-rose-cta); border-radius:var(--radius-full); font-family:var(--font-body); font-size:var(--hl-fs-xs); cursor:pointer; -webkit-appearance:none; appearance:none; transition:transform var(--hl-t-micro) var(--hl-ease); }
.rc-gap-add:active { transform:scale(0.94); }
.rc-gap-cal { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); font-variant-numeric:tabular-nums; }
.rc-gap-empty { font-size:var(--hl-fs-sm); color:var(--hl-text-faint); line-height:1.7; }

/* 吃饭记录抽屉（第一层三样：吃了什么 / 多少 / 哪一餐；细节收在「再加点细节」里） */
.rc-log-sec { margin-bottom:14px; }
.rc-log-hint { font-size:var(--hl-fs-xs); color:var(--hl-text-faint); margin-top:6px; }
.rc-log-item { border:1px solid var(--border); border-radius:var(--radius-md); padding:10px; margin-bottom:8px; background:var(--surface); }
.rc-log-item .hui-field { margin-bottom:8px; }
.rc-log-item-row { display:flex; align-items:center; gap:8px; }
.rc-log-item-row .hui-input-wrap { flex:1; min-width:0; }
.rc-log-unit { flex:0 0 auto; min-width:var(--hl-tap); min-height:var(--hl-tap); border:1px solid var(--hl-rose-line); background:var(--hl-rose-cta-soft); color:var(--hl-rose-cta); border-radius:var(--radius-full); font-family:var(--font-body); font-size:var(--hl-fs-sm); cursor:pointer; -webkit-appearance:none; appearance:none; transition:transform var(--hl-t-micro) var(--hl-ease); }
.rc-log-unit:active { transform:scale(0.94); }
.rc-log-del { flex:0 0 auto; width:var(--hl-tap); height:var(--hl-tap); border:none; background:none; color:var(--text-secondary); border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color var(--hl-t-micro) ease, background var(--hl-t-micro) ease; }
.rc-log-del:hover { color:var(--hl-danger); background:var(--hl-danger-soft); }
.rc-log-add { width:100%; min-height:var(--hl-tap); border:1px dashed var(--border); border-radius:var(--radius-md); background:none; color:var(--text-secondary); font-family:var(--font-body); font-size:var(--hl-fs-sm); cursor:pointer; -webkit-appearance:none; appearance:none; transition:color var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease; }
.rc-log-add:active { color:var(--hl-rose-cta); border-color:var(--hl-rose-line); }
.rc-log-more { width:100%; min-height:var(--hl-tap); border:none; background:none; color:var(--text-secondary); font-family:var(--font-body); font-size:var(--hl-fs-sm); text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none; }
.rc-log-more-box { margin-top:6px; }
.rc-target-hint { font-size:var(--hl-fs-sm); color:var(--text-secondary); line-height:1.8; margin-bottom:12px; }

/* 周计划：今天那张卡有一条极淡的玫瑰边（一眼看出从哪天开始） */
.rc-plan-day.is-today { border-color:var(--hl-rose-line); }
.rc-plan-date { color:var(--text-primary); }
.rc-plan-tags { display:flex; align-items:center; gap:6px; }
.rc-plan-training { font-size:var(--hl-fs-xs); color:var(--hl-sage-cta); }
.rc-plan-meal-name.is-empty { color:var(--hl-text-faint); font-style:italic; }
.rc-plan-meal.is-empty { opacity:0.75; }
.rc-plan-swap { flex:0 0 auto; min-height:32px; padding:2px 10px; border:1px solid var(--hl-rose-line); background:var(--hl-rose-cta-soft); color:var(--hl-rose-cta); border-radius:var(--radius-full); font-family:var(--font-body); font-size:var(--hl-fs-xs); cursor:pointer; -webkit-appearance:none; appearance:none; transition:transform var(--hl-t-micro) var(--hl-ease); }
.rc-plan-swap:active { transform:scale(0.94); }

/* ===== Playlist Picker：外壳走公共抽屉（原来那套 rc-playlist-* 已删，长期规则 #226）===== */

/* ===== 窄屏（<370px）：施工单要求这一档不许撑破、不许被盖 ===== */
@media (max-width:370px) {
    .hl-tab-btn { font-size:var(--hl-fs-sm); padding:9px 0; }
    .hl-cal-cell { font-size:var(--hl-fs-sm); }
    .hl-cal-month { font-size:var(--hl-fs-md); }
    .hl-ex-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .hl-fit-subtab { font-size:var(--hl-fs-xs); }
    .hl-phase-title { font-size:var(--hl-fs-lg); }
    .hl-to-ex-name { font-size:var(--hl-fs-xl); padding:0 52px; }
    .hl-to-timer { font-size:44px; letter-spacing:2px; }
    .hl-to-controls { gap:10px; }
    .hl-to-next { font-size:var(--hl-fs-xs); }
    .hl-grid-2 { grid-template-columns:minmax(0,1fr); }
    .rc-meal-header { flex-wrap:wrap; }
}

/* ===== 大屏/平板（≥481px）：竖屏约束 —— 一切限宽居中，绝不铺满 ===== */
@media (min-width:481px) {
    #hl-root { max-width:480px; margin:0 auto; }
}

/* ===== Dark Mode ===== */
[data-theme-mode="dark"] .hl-to-bg { background:#0F0D0B; }
/* 深色下的日历标记：预测底色要更淡一点，否则整片糊成一块（玫瑰底比浅色模式显眼得多） */
[data-theme-mode="dark"] .hl-cal-predicted { background: rgba(201,168,168,0.07); }
[data-theme-mode="dark"] .hl-cal-soft::after { opacity: 0.75; }

/* ============================================================
   身体状态（健康/生病标记 + 病症管理）
   ============================================================ */
/* ===== 状态条 ===== */
.hl-body-status-bar { margin-bottom: 8px; }
.hl-status-card { display: flex; align-items: center; gap: 8px; padding: 11px 14px; min-height: var(--hl-tap);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    cursor: pointer; transition: border-color var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease);
    user-select: none; position: relative; }
.hl-status-card:active { transform: scale(0.98); }
.hl-status-card.healthy { border-color: var(--hl-sage-line); }
.hl-status-card.sick { border-color: var(--hl-rose-line); background: var(--hl-rose-cta-soft); }

.hl-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hl-status-dot.healthy { background: var(--hl-sage-cta); }
.hl-status-dot.sick { background: var(--hl-rose-cta); }

.hl-status-label { flex: 1; font-size: var(--hl-fs-base); font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; }
.hl-status-en { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); margin-right: 4px; }
.hl-status-days { font-size: var(--hl-fs-xs); color: var(--text-secondary); }
.hl-status-chevron { color: var(--text-secondary); transition: transform var(--hl-t-page) var(--hl-ease); margin-left: auto; display: inline-flex; }
.hl-status-card.sick .hl-status-chevron { transform: rotate(180deg); }
/* 免责声明：施工单 §2.2 点名「低对比度免责声明」。
   原来 font-size:10 + color:var(--text-muted) + opacity:0.5 ≈ 1:1 对比度（等于看不清）
   → 改成可读的弱化色（浅底 5.4:1），字号回到 11。 */
.hl-status-disclaimer { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); margin-top: 5px; text-align: center; line-height: 1.6; }

/* ===== 管理面板的内容件（外壳走公共抽屉 .hui-sheet）===== */
/* Toggle switch（原来的 .hl-bs-switch 已删 —— 那个圆球是 ::after 伪元素，
   现在统一用公共层 .hui-sw 的「轨道 + 真子元素圆球」，见文件末尾组件层） */
.hl-bs-toggle-row { display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border-faint); margin-bottom: 14px; }
.hl-bs-toggle-label { font-size: var(--hl-fs-base); color: var(--text-primary); font-weight: 600; }

/* ===== 预设病症网格 ===== */
.hl-bs-preset-section { margin: 10px 0; }
.hl-bs-preset-group-label { font-size: 12px; color: var(--text-secondary); letter-spacing: 1px;
    font-weight: 600; margin-bottom: 8px; display: block; }
.hl-bs-preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.hl-bs-preset-btn { padding: 8px 4px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--text-secondary); font-size: 12px; cursor: pointer;
    font-family: var(--font-body); transition: all 0.15s ease; text-align: center; line-height: 1.3; }
.hl-bs-preset-btn small { display: block; font-size: 10px; color: var(--text-muted); }
.hl-bs-preset-btn:hover { border-color: var(--rose); color: var(--rose); }
.hl-bs-preset-btn:active { transform: scale(0.95); }
.hl-bs-preset-btn.selected { background: var(--rose-light); border-color: var(--rose); color: var(--rose); }

/* ===== 活跃病症卡片 ===== */
.hl-bs-active-label { font-size: 12px; color: var(--text-secondary); letter-spacing: 1px;
    font-weight: 600; margin: 14px 0 8px; }
.hl-illness-card { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface); transition: all 0.15s ease; }
.hl-illness-card .hl-ill-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hl-ill-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.hl-ill-sev { font-size: 10px; padding: 2px 8px; border-radius: 10px;
    background: var(--quote-bg); color: var(--text-muted); letter-spacing: 0.5px; }
.hl-ill-sev.mild { background: rgba(168,184,160,0.12); color: var(--sage); }
.hl-ill-sev.moderate { background: rgba(201,168,168,0.12); color: var(--rose); }
.hl-ill-sev.severe { background: rgba(212,120,120,0.12); color: #D47878; }
.hl-ill-date { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.hl-ill-symptoms { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.hl-ill-actions { display: flex; gap: 8px; }
.hl-ill-act-btn { padding: 4px 12px; border: 1px solid var(--border); border-radius: 14px;
    background: transparent; color: var(--text-secondary); font-size: 11px; cursor: pointer;
    font-family: var(--font-body); transition: all 0.15s ease; }
.hl-ill-act-btn:hover { border-color: var(--rose); color: var(--rose); }
.hl-ill-act-btn:active { transform: scale(0.95); }
.hl-ill-act-btn.recover:hover { border-color: var(--sage); color: var(--sage); }

/* ===== 过往病史 ===== */
.hl-bs-history-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--divider); }
.hl-bs-section-title { font-family: 'Playfair Display', var(--font-display), serif;
    font-style: italic; font-size: 14px; color: var(--text-secondary);
    letter-spacing: 1px; margin-bottom: 10px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.hl-bs-section-title .arr { transition: transform 0.2s ease; font-size: 10px; }
.hl-bs-section-title.open .arr { transform: rotate(90deg); }
.hl-bs-empty { text-align: center; padding: 16px; color: var(--text-muted); font-size: 12px; }
.hl-bs-history-item { display: flex; align-items: center; gap: 6px; padding: 8px 0;
    border-bottom: 1px solid var(--divider); font-size: 12px; flex-wrap: wrap; }
.hl-bs-h-name { font-weight: 600; color: var(--text-primary); min-width: 50px; }
.hl-bs-h-sev { font-size: 10px; padding: 1px 6px; border-radius: 6px; color: var(--text-muted); background: var(--quote-bg); }
.hl-bs-h-dates { color: var(--text-muted); font-size: 11px; }
.hl-bs-h-days { color: var(--text-secondary); font-size: 11px; }
.hl-bs-h-recur { font-size: 10px; padding: 1px 5px; border-radius: 4px;
    background: var(--rose-light); color: var(--rose); }
.hl-bs-h-del { border: none; background: none; color: var(--text-muted); cursor: pointer;
    font-size: 14px; padding: 2px 4px; margin-left: auto; transition: color 0.15s; }
.hl-bs-h-del:hover { color: var(--danger); }

/* ===== 自定义添加区 ===== */
.hl-bs-custom-section { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--border-faint); }
.hl-bs-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.hl-bs-chip-label { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); margin-right: 2px; }

/* ===== 健康提示条 ===== */
.hl-healthy-note { text-align: center; padding: 20px 0; }
.hl-healthy-note .en { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-lg); color: var(--hl-sage-cta); letter-spacing: 1px; margin-bottom: 6px; }
.hl-healthy-note .cn { font-size: var(--hl-fs-base); color: var(--text-secondary); }

/* ===== 「不适」页（第4窗口：不适记录 + 用药，施工单 §4.1~§4.8）=====
   全部走令牌层（颜色/圆角/间距/动画都能在顶上那一块改），触摸目标一律 ≥ var(--hl-tap)。 */

/* 区块标题：英文装饰 + 中文功能名（英文不承担功能信息）+ 计数/徽标 */
.hl-sec-head { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 10px;
    padding-bottom: 7px; border-bottom: 1px solid var(--border-faint); }
.hl-sec-en { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-sm); color: var(--gold); letter-spacing: 1px; }
.hl-sec-cn { font-size: var(--hl-fs-base); color: var(--text-primary); font-weight: 600; letter-spacing: 0.6px; }
.hl-sec-count { margin-left: auto; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
.hl-sec-badge { margin-left: auto; font-size: var(--hl-fs-xs); color: var(--hl-rose-cta);
    background: var(--hl-rose-cta-soft); border: 1px solid var(--hl-rose-line);
    border-radius: var(--radius-full); padding: 3px 10px; letter-spacing: 0.4px; }

/* 不适卡 */
.hl-illcard { padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-faint);
    background: var(--surface); box-shadow: var(--shadow-xs); margin-bottom: 10px; }
.hl-illcard-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hl-illcard-name { font-size: var(--hl-fs-md); font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; }
.hl-illcard-status { font-size: var(--hl-fs-xs); color: var(--hl-sage-cta); background: var(--hl-sage-line);
    border-radius: var(--radius-full); padding: 2px 9px; }
.hl-illcard-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 7px;
    font-size: var(--hl-fs-xs); color: var(--hl-text-faint); line-height: 1.7; }
.hl-illcard-days { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hl-illcard-sym { flex: 1 1 100%; color: var(--text-secondary); }
.hl-illcard-cat { color: var(--hl-text-faint); }
.hl-illcard-last { margin-top: 7px; font-size: var(--hl-fs-xs); color: var(--text-secondary);
    background: var(--quote-bg); border-radius: var(--radius-sm); padding: 7px 10px; line-height: 1.7; }
.hl-illcard-actions, .hl-det-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

/* 快速变化三档（好一点 / 差不多 / 差一点）：白底线条小按钮，本体 ≥44 高 */
.hl-change-btn { display: inline-flex; align-items: center; gap: 5px; flex: 1 1 auto; justify-content: center;
    min-height: var(--hl-tap); min-width: 84px; padding: 0 12px;
    border: 1px solid var(--hl-rose-line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--hl-rose-cta);
    font-family: var(--font-body); font-size: var(--hl-fs-sm); letter-spacing: 0.4px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease), border-color var(--hl-t-micro) ease; }
.hl-change-btn:hover { background: var(--hl-rose-cta-soft); }
.hl-change-btn:active { transform: scale(0.97); }
.hl-change-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }
.hl-change-btn.ghost { border-color: var(--border); color: var(--text-secondary); flex: 0 0 auto; }

/* 用药卡 */
.hl-medcard { padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-faint);
    background: var(--surface); box-shadow: var(--shadow-xs); margin-bottom: 10px;
    transition: border-color var(--hl-t-page) var(--hl-ease); }
.hl-medcard.is-done { border-color: var(--hl-sage-line); }
.hl-medcard-head { display: flex; align-items: center; gap: 6px; }
.hl-medcard-name { font-size: var(--hl-fs-md); font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; }
.hl-medcard-bell { color: var(--gold); display: inline-flex; }
.hl-medcard-more { margin-left: auto; width: var(--hl-tap); height: var(--hl-tap);
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--hl-text-faint); cursor: pointer; border-radius: 50%;
    -webkit-appearance: none; appearance: none;
    transition: color var(--hl-t-micro) ease, background var(--hl-t-micro) ease; }
.hl-medcard-more:hover { color: var(--hl-rose-cta); background: var(--hl-rose-cta-soft); }
.hl-medcard-purpose { font-size: var(--hl-fs-sm); color: var(--text-secondary); margin-top: 3px; }
.hl-medcard-today { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.hl-medcard-count { font-size: var(--hl-fs-base); color: var(--text-primary); font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: 0.4px; }
.hl-medcard-dose { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
.hl-medcard-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.hl-med-slot { display: inline-flex; align-items: center; gap: 3px; min-height: 26px; padding: 2px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-full);
    font-size: var(--hl-fs-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hl-med-slot.done { border-color: var(--hl-sage-cta); background: var(--hl-sage-line); color: var(--hl-sage-cta); }
.hl-med-slot.missed { border-color: var(--border-faint); color: var(--hl-text-faint); text-decoration: line-through; }
.hl-medcard-actions { margin-top: 11px; display: flex; }
.hl-medcard-actions .hui-btn { flex: 1; }

/* 「记录服用」小操作卡里的每一顿 */
.hl-dose-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--hl-tap);
    padding: 10px 4px; border: none; border-bottom: 1px solid var(--border-faint);
    background: transparent; color: var(--text-primary); text-align: left; cursor: pointer;
    font-family: var(--font-body); font-size: var(--hl-fs-base);
    -webkit-appearance: none; appearance: none; transition: background var(--hl-t-micro) ease; }
.hl-dose-row:hover { background: var(--hl-rose-cta-soft); }
.hl-dose-row .hl-dose-time { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.5px; }
.hl-dose-row .hl-dose-state { margin-left: auto; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
.hl-dose-row.is-done .hl-dose-state { color: var(--hl-sage-cta); }
.hl-dose-row.is-missed .hl-dose-state { color: var(--hl-text-faint); }
.hl-dose-note { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); line-height: 1.8; padding: 8px 2px 2px; }

/* 服药记录（时间线式一行） */
.hl-med-log { display: flex; align-items: baseline; gap: 8px; padding: 9px 2px;
    border-bottom: 1px solid var(--border-faint); font-size: var(--hl-fs-sm); color: var(--text-secondary); }
.hl-med-log-at { font-variant-numeric: tabular-nums; color: var(--hl-text-faint); font-size: var(--hl-fs-xs); }
.hl-med-log-name { color: var(--text-primary); font-weight: 600; }
.hl-med-log-slot { margin-left: auto; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
.hl-med-log.is-missed .hl-med-log-name { color: var(--hl-danger); }

/* 计划里选时间点的小窗（自绘，禁原生 time） */
.hl-slot-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.hl-slot-pill { display: inline-flex; align-items: center; gap: 5px; min-height: var(--hl-tap); padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface);
    font-family: var(--font-body); font-size: var(--hl-fs-sm); color: var(--text-primary);
    font-variant-numeric: tabular-nums; cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: border-color var(--hl-t-micro) ease, background var(--hl-t-micro) ease; }
.hl-slot-pill:hover { border-color: var(--hl-rose-line); }
.hl-slot-pill-add { color: var(--hl-rose-cta); border-color: var(--hl-rose-line); background: var(--hl-rose-cta-soft); }
.hl-time-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.hl-time-preset { min-height: var(--hl-tap); border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); font-family: var(--font-body); font-size: var(--hl-fs-sm); color: var(--text-primary);
    font-variant-numeric: tabular-nums; cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: border-color var(--hl-t-micro) ease, background var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease); }
.hl-time-preset:hover { border-color: var(--hl-rose-line); }
.hl-time-preset:active { transform: scale(0.97); }
.hl-time-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hl-time-col-t { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); margin-bottom: 6px; letter-spacing: 0.6px; }
.hl-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 208px; overflow-y: auto;
    padding: 2px; border: 1px solid var(--border-faint); border-radius: var(--radius-sm); background: var(--surface); }
.hl-time-cell { min-height: var(--hl-tap); border: 1px solid transparent; border-radius: var(--radius-xs);
    background: transparent; font-family: var(--font-body); font-size: var(--hl-fs-sm); color: var(--text-primary);
    font-variant-numeric: tabular-nums; cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: background var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease; }
.hl-time-cell:hover { background: var(--hl-rose-cta-soft); }
.hl-time-cell.is-on { background: var(--hl-rose-cta-soft); border-color: var(--hl-rose-cta); color: var(--hl-rose-cta); font-weight: 600; }
.hl-time-preview { text-align: center; font-size: var(--hl-fs-2xl); color: var(--hl-rose-cta);
    font-variant-numeric: tabular-nums; letter-spacing: 2px; margin: 12px 0 4px; }

/* 不适详情（抽屉里） */
.hl-det-head { padding-bottom: 12px; border-bottom: 1px solid var(--border-faint); }
.hl-det-name { font-family: var(--font-display); font-size: var(--hl-fs-lg); color: var(--text-primary); letter-spacing: 0.6px; }
.hl-det-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
    font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
.hl-det-days { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hl-det-done { color: var(--hl-sage-cta); }
.hl-det-sec { margin-top: 16px; }
.hl-det-sec-t { font-size: var(--hl-fs-base); color: var(--text-primary); font-weight: 600;
    letter-spacing: 0.6px; margin-bottom: 9px; }
.hl-det-empty { font-size: var(--hl-fs-sm); color: var(--hl-text-faint); padding: 8px 0; }
.hl-det-hint { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); line-height: 1.8; padding: 6px 2px; }

/* 症状一行：名字 + 三组胶囊 + 保存/不记了 */
.hl-sym-row { padding: 10px 0; border-bottom: 1px solid var(--border-faint); }
.hl-sym-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.hl-sym-name { font-size: var(--hl-fs-base); color: var(--text-primary); font-weight: 600; }
.hl-sym-when { margin-left: auto; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
.hl-sym-groups { display: flex; flex-direction: column; gap: 6px; }
.hl-sym-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-sym-acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hl-sym-del { min-height: var(--hl-tap); padding: 0 10px; border: none; background: none;
    color: var(--hl-text-faint); font-family: var(--font-body); font-size: var(--hl-fs-xs);
    cursor: pointer; -webkit-appearance: none; appearance: none; transition: color var(--hl-t-micro) ease; }
.hl-sym-del:hover { color: var(--hl-danger); }
.hl-sym-add { padding: 10px 0 4px; }

/* 时间线（§4.3 开始 → 变化 → 好转 → 恢复） */
.hl-tl-node { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    padding: 0 0 12px 18px; border-left: 1px solid var(--border-faint); margin-left: 5px; }
.hl-tl-node:last-child { border-left-color: transparent; padding-bottom: 2px; }
.hl-tl-dot { position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--hl-rose-cta); }
.hl-tl-node.kind-started .hl-tl-dot { background: var(--hl-rose-cta); }
.hl-tl-node.kind-change .hl-tl-dot { background: var(--gold); }
.hl-tl-node.kind-recovering .hl-tl-dot { background: var(--hl-sage-cta); }
.hl-tl-node.kind-recovered .hl-tl-dot { background: var(--hl-sage-cta); }
.hl-tl-date { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); font-variant-numeric: tabular-nums; }
.hl-tl-text { font-size: var(--hl-fs-sm); color: var(--text-secondary); }
.hl-tl-sym { flex: 1 1 100%; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }

/* 折叠行（过往记录 / 更多）：箭头 + 文字 + 计数 */
.hl-fold { display: flex; align-items: center; gap: 8px; min-height: var(--hl-tap);
    padding: 8px 2px; cursor: pointer; color: var(--text-secondary);
    font-size: var(--hl-fs-sm); letter-spacing: 0.6px; }
.hl-fold-arrow { display: inline-flex; color: var(--hl-text-faint);
    transition: transform var(--hl-t-page) var(--hl-ease); }
.hl-fold.open .hl-fold-arrow { transform: rotate(90deg); }
.hl-fold-text { color: var(--text-secondary); }
.hl-fold-count { margin-left: auto; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }

/* 过往记录一行 */
.hl-past-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 2px;
    border-bottom: 1px solid var(--border-faint); font-size: var(--hl-fs-sm); color: var(--text-secondary); }
.hl-past-name { font-weight: 600; color: var(--text-primary); }
.hl-past-sev { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
.hl-past-date { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); font-variant-numeric: tabular-nums; }
.hl-past-days { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
.hl-past-recur { font-size: 10px; padding: 1px 6px; border-radius: var(--radius-xs);
    background: var(--hl-rose-cta-soft); color: var(--hl-rose-cta); }
.hl-past-recur-btn { min-height: var(--hl-tap); padding: 0 10px; border: none; background: none;
    color: var(--hl-rose-cta); font-family: var(--font-body); font-size: var(--hl-fs-xs);
    cursor: pointer; -webkit-appearance: none; appearance: none; }
.hl-past-del { width: var(--hl-tap); height: var(--hl-tap); display: inline-flex; align-items: center;
    justify-content: center; border: none; background: none; color: var(--hl-text-faint);
    cursor: pointer; border-radius: 50%; -webkit-appearance: none; appearance: none;
    transition: color var(--hl-t-micro) ease, background var(--hl-t-micro) ease; }
.hl-past-del:hover { color: var(--hl-danger); background: var(--hl-danger-soft); }

/* 危险操作：低强调，长得跟保存明显不同（施工单 §F「删除不得与保存长得一样」）*/
.hl-danger-btn { width: 100%; min-height: var(--hl-tap); margin-top: 10px;
    border: 1px solid var(--hl-danger-soft); border-radius: var(--radius-sm);
    background: var(--hl-danger-soft); color: var(--hl-danger);
    font-family: var(--font-body); font-size: var(--hl-fs-sm); letter-spacing: 0.6px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease; }
.hl-danger-btn:hover { border-color: var(--hl-danger); }
.hl-det-more { padding-top: 4px; }

/* 「在好转」小标（施工单 §4.4 第三种状态）*/
.hl-ill-recovering { font-size: var(--hl-fs-xs); padding: 2px 9px; border-radius: var(--radius-full);
    background: var(--hl-sage-line); color: var(--hl-sage-cta); }

/* ===== 就医提示（同一处口径：可读的弱化色，不再用 opacity 压到看不见）===== */
.hl-bs-medical-disclaimer { text-align: center; padding: 10px 8px 4px; margin-top: 10px;
    font-size: var(--hl-fs-xs); color: var(--hl-text-faint); letter-spacing: 0.4px; line-height: 1.6;
    border-top: 1px solid var(--border-faint); }

/* ===== 健身Tab不适提示条 ===== */
.hl-fit-sick-warning { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    margin-bottom: 10px; background: var(--hl-rose-cta-soft); border: 1px solid var(--hl-rose-line);
    border-radius: var(--radius-md); font-size: var(--hl-fs-sm); color: var(--hl-rose-cta); line-height: 1.65; }
.hl-fit-sick-warning svg { flex-shrink: 0; color: var(--hl-rose-cta); }

/* ===== 窄屏适配 ===== */
@media (max-width: 370px) {
    .hl-bs-preset-grid { grid-template-columns: repeat(3, 1fr); }
    .hl-bs-preset-btn { padding: 7px 2px; font-size: var(--hl-fs-xs); }
    .hl-bs-history-item { font-size: var(--hl-fs-xs); gap: 4px; }
}

/* ===== 暗色模式 ===== */
[data-theme-mode="dark"] .hl-status-card.sick { background: rgba(201,168,168,0.06); }
[data-theme-mode="dark"] .hl-bs-preset-btn { background: rgba(255,255,255,0.04); border-color: var(--border); }
[data-theme-mode="dark"] .hl-bs-preset-btn.selected { background: rgba(201,168,168,0.12); }
[data-theme-mode="dark"] .hl-illness-card { background: rgba(255,255,255,0.03); }
[data-theme-mode="dark"] .hl-fit-sick-warning { background: rgba(201,168,168,0.08); }
[data-theme-mode="dark"] .hl-ill-sev { background: rgba(255,255,255,0.06); }


/* ============================================================
   ★ 组件层（.hui-*）—— 健康公共控件的唯一一份样式
   结构由 js/panels/panels-health-ui.js 产出。改结构＝两边一起改。
   施工单第 2 窗口 §2.1~§2.8：令牌统一、无系统控件、44 命中区、退场动画、禁弹跳。
   ============================================================ */

/* ===== 基础件 ===== */
.hui-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ===== 按钮：四变体 × 三态（default / busy / disabled），触碰 120ms 微反馈 ===== */
.hui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--hl-tap); padding: 0 18px;
    border-radius: var(--radius-md); border: 1px solid transparent;
    background: var(--surface); color: var(--text-primary);
    font-family: var(--font-body); font-size: var(--hl-fs-base); font-weight: 600;
    letter-spacing: 0.5px; cursor: pointer; box-sizing: border-box;
    -webkit-appearance: none; appearance: none; touch-action: manipulation;
    transition: transform var(--hl-t-micro) var(--hl-ease), background var(--hl-t-micro) ease, box-shadow var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease;
}
.hui-btn-block { width: 100%; }
.hui-btn-sm { min-height: 44px; padding: 0 14px; font-size: var(--hl-fs-sm); font-weight: 500; border-radius: var(--radius-sm); }
.hui-btn-t { white-space: nowrap; }
.hui-btn:active { transform: scale(0.97); }
.hui-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }
.hui-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 主按钮：深行动玫瑰 + 白字（对比度 5.31:1，浅 rose 只有 2.18 —— 施工单 §E.10 点名不许用浅的） */
.hui-btn-primary {
    background: var(--hl-rose-cta); color: #fff; border-color: transparent;
    box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, var(--shadow-sm);
}
.hui-btn-primary:hover { background: var(--hl-rose-cta-hover); box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, var(--shadow-md); }
[data-theme-mode="dark"] .hui-btn-primary { color: #241E1C; }

/* 次按钮：浅底 + 玫瑰描边/文字 */
.hui-btn-secondary {
    background: var(--hl-rose-cta-soft); color: var(--hl-rose-cta);
    border-color: var(--hl-rose-line);
}
.hui-btn-secondary:hover { background: var(--hl-rose-cta-soft); border-color: var(--hl-rose-cta); }

/* 文字按钮：无底无框，只有玫瑰色字 */
.hui-btn-ghost { background: transparent; color: var(--hl-rose-cta); border-color: transparent; padding: 0 10px; }
.hui-btn-ghost:hover { background: var(--hl-rose-cta-soft); }

/* 危险：低强调，绝不与保存长得一样（施工单 §F） */
.hui-btn-danger { background: var(--hl-danger-soft); color: var(--hl-danger); border-color: rgba(181,73,91,0.32); }
.hui-btn-danger:hover { background: rgba(181,73,91,0.16); border-color: var(--hl-danger); }

/* 按钮 loading：转圈用线条弧度，不是系统 gif、不是 emoji */
.hui-btn.is-busy { cursor: progress; }
.hui-btn-spin {
    width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
    border: 1.6px solid currentColor; border-top-color: transparent;
    animation: huiSpin 0.7s linear infinite;
}
@keyframes huiSpin { to { transform: rotate(360deg); } }

/* ===== 胶囊 =====
   ★ 为什么有 min-width: var(--hl-tap)（第5窗口量尺抓到的事）：只有**一个字**的胶囊
     （亲密录入里的「甜」「累」这类）按内容撑出来只有 42 宽，短的一头够不到 44 ——
     长期规则 #244 要求触摸目标「本体」达标，不许靠伪元素撑（量尺量的是本体，撑不出来）。
     加一个下限，长标签完全不受影响。 */
.hui-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hui-chip {
    position: relative; min-height: var(--hl-tap); min-width: var(--hl-tap); padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); border: 1px solid var(--border);
    background: var(--surface); color: var(--text-secondary);
    font-family: var(--font-body); font-size: var(--hl-fs-sm);
    cursor: pointer; user-select: none; -webkit-user-select: none;
    -webkit-appearance: none; appearance: none; touch-action: manipulation;
    transition: background var(--hl-t-micro) ease, color var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease);
}
.hui-chip:active { transform: scale(0.96); }
.hui-chip.is-on { background: var(--hl-rose-cta-soft); border-color: var(--hl-rose-cta); color: var(--hl-rose-cta); font-weight: 600; }
.hui-chip-sage.is-on { background: var(--hl-sage-cta); border-color: var(--hl-sage-cta); color: #fff; }
.hui-chip-gold.is-on { background: var(--gold-light); border-color: var(--gold); color: var(--gold-dark); }
[data-theme-mode="dark"] .hui-chip-gold.is-on { color: var(--gold); }
.hui-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }

/* ===== 开关：轨道 + 圆球必须同时在（选中＝圆球移动 + 底变色）===== */
.hui-sw {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: var(--hl-tap); flex: 0 0 auto; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.hui-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.hui-sw-track {
    position: relative; width: 48px; height: 28px; border-radius: 14px;
    background: var(--border); display: block;
    transition: background var(--hl-t-drawer) var(--hl-ease);
}
.hui-sw-thumb {
    position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--surface-solid); box-shadow: var(--shadow-sm);
    transition: transform var(--hl-t-drawer) var(--hl-ease);
}
.hui-sw input:checked + .hui-sw-track { background: var(--hl-rose-cta); }
.hui-sw input:checked + .hui-sw-track .hui-sw-thumb { transform: translateX(20px); }
.hui-sw input:checked + .hui-sw-track.is-sage { background: var(--hl-sage-cta); }
.hui-sw input:focus-visible + .hui-sw-track { box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }
.hui-sw input:disabled + .hui-sw-track { opacity: 0.45; }
.hui-sw-row { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.hui-sw-side { font-size: var(--hl-fs-sm); color: var(--text-secondary); }
.hui-sw-side.is-right { color: var(--hl-rose-cta); }

/* ===== 输入（标签在上、单位独立；禁浏览器蓝色 focus 与默认外观）===== */
.hui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hui-field.is-grow { flex: 1; }
.hui-label { font-size: var(--hl-fs-sm); color: var(--text-secondary); font-weight: 600; letter-spacing: 0.4px; }
.hui-hint { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); line-height: 1.5; }
.hui-input-wrap {
    display: flex; align-items: center; gap: 8px;
    min-height: var(--hl-tap); padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--input-bg);
    transition: border-color var(--hl-t-page) ease, box-shadow var(--hl-t-page) ease;
}
.hui-input-wrap:focus-within { border-color: var(--hl-rose-cta); box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }
.hui-input {
    flex: 1; min-width: 0; height: 42px; padding: 0; border: none; background: transparent;
    color: var(--text-primary); font-family: var(--font-body); font-size: var(--hl-fs-base);
    outline: none; -webkit-appearance: none; appearance: none;
}
.hui-input::placeholder { color: var(--hl-placeholder); opacity: 1; }
.hui-textarea { width: 100%; height: auto; min-height: 72px; padding: 11px 0; line-height: 1.6; resize: vertical; }
textarea.hui-textarea { display: block; }
.hui-input-wrap .hui-textarea { padding: 11px 0; }
.hui-unit, .hui-suffix { flex: 0 0 auto; font-size: var(--hl-fs-sm); color: var(--text-secondary); }
.hui-suffix { display: inline-flex; align-items: center; color: var(--hl-rose-cta); }

/* ===== 日期触发器（自绘日历；禁原生 date）===== */
.hui-date-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; min-height: var(--hl-tap); padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--input-bg); color: var(--text-primary);
    font-family: var(--font-body); font-size: var(--hl-fs-base); text-align: left;
    cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation;
    transition: border-color var(--hl-t-page) ease, box-shadow var(--hl-t-page) ease;
}
.hui-date-trigger .hui-icon { color: var(--text-secondary); }
.hui-date-trigger.is-empty .hui-date-v { color: var(--hl-placeholder); }
.hui-date-trigger:focus-visible { outline: none; border-color: var(--hl-rose-cta); box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }
.hui-date-store { display: none; }

/* ===== 浮层：遮罩 + 抽屉 / 居中窗 ===== */
.hui-scrim {
    position: fixed; inset: 0; z-index: var(--hl-z-drawer);
    display: flex; justify-content: center;
    opacity: 0; transition: opacity var(--hl-t-page) var(--hl-ease);
    background: transparent;
}
.hui-scrim.show { opacity: 1; }
/* 抽屉壳：安全区不靠遮罩的内边距让位（那样底边会离屏幕 34px、看着像没贴底），
   改成抽屉自己多垫一段 —— 背景色照样铺到屏幕最底，内容不压 home 条。 */
.hui-scrim.is-sheet { align-items: flex-end; }
.hui-scrim.is-modal { align-items: center; padding: 16px; background: rgba(30,25,20,0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hui-scrim.is-modal.show { opacity: 1; }
.hui-scrim.is-sheet.show { background: rgba(30,25,20,0.42); }
.hui-scrim.is-sheet { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hui-scrim.show .hui-sheet { transform: translateY(0); }

.hui-sheet {
    position: relative; width: 100%; max-width: 480px;
    max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--surface-solid); border: 1px solid var(--border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 8px 20px calc(20px + var(--safe-bottom));
    box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, var(--shadow-lg);
    transform: translateY(100%);
    transition: transform var(--hl-t-drawer) var(--hl-ease);
}
.hui-sheet.is-modal {
    border-radius: var(--radius-lg); max-width: 340px; max-height: 80vh;
    padding: 22px 20px 18px; transform: translateY(10px) scale(0.97);
    transition: transform var(--hl-t-page) var(--hl-ease);
}
.hui-scrim.is-modal.show .hui-sheet { transform: translateY(0) scale(1); }
.hui-grip { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 4px auto 12px; }
.hui-sheet-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.hui-sheet-title { font-size: var(--hl-fs-lg); font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; }
.hui-sheet-en { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-xs); color: var(--gold); letter-spacing: 1.4px; }
.hui-close {
    margin-left: auto; width: var(--hl-tap); height: var(--hl-tap);
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--text-secondary);
    cursor: pointer; border-radius: 50%; -webkit-appearance: none; appearance: none;
    transition: background var(--hl-t-micro) ease, color var(--hl-t-micro) ease;
}
.hui-close:hover { background: var(--hl-rose-cta-soft); color: var(--hl-rose-cta); }
.hui-close:active { transform: scale(0.93); }
.hui-sheet-body { display: flex; flex-direction: column; gap: 4px; }

/* 退场（唯一入口 huiExit / huiExitSheet）：与入场对称，绝不瞬间消失 */
.hui-out-sheet { animation: huiOutSheet 240ms var(--hl-ease) forwards; pointer-events: none; }
@keyframes huiOutSheet { from { opacity: 1; } to { opacity: 0; } }
.hui-out-fade { animation: huiOutFade 200ms var(--hl-ease) forwards; pointer-events: none; }
@keyframes huiOutFade { from { opacity: 1; } to { opacity: 0; } }

/* ===== 自绘确认窗 ===== */
.hui-confirm-msg { font-size: var(--hl-fs-md); color: var(--text-primary); line-height: 1.75; text-align: center; padding: 4px 4px 0; }
.hui-confirm-detail { font-size: var(--hl-fs-sm); color: var(--hl-text-faint); line-height: 1.7; text-align: center; margin-top: 8px; }
.hui-confirm-btns { display: flex; gap: 10px; margin-top: 20px; }
.hui-confirm-btns .hui-btn { flex: 1; }

/* ===== 自绘日历（宽度按可视宽走；小屏不挤压）===== */
.hui-scrim-date { align-items: center; z-index: var(--hl-z-confirm); background: rgba(30,25,20,0.30); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hui-date-panel {
    width: min(100%, calc(100vw - 32px)); max-width: 340px;
    background: var(--surface-solid); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 14px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, var(--shadow-lg);
    transform: translateY(8px) scale(0.98);
    transition: transform var(--hl-t-page) var(--hl-ease);
}
.hui-scrim.show .hui-date-panel { transform: translateY(0) scale(1); }
.hui-date-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hui-date-month { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-md); color: var(--text-primary); letter-spacing: 0.6px; }
.hui-cal-nav {
    position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    -webkit-appearance: none; appearance: none; touch-action: manipulation;
    transition: color var(--hl-t-micro) ease, border-color var(--hl-t-micro) ease;
}
.hui-cal-nav::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; }
.hui-cal-nav:hover { color: var(--hl-rose-cta); border-color: var(--hl-rose-cta); }
.hui-cal-nav:active { transform: scale(0.93); }
.hui-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 2px; }
.hui-cal-wk { font-size: var(--hl-fs-xs); color: var(--text-secondary); padding: 4px 0; }
.hui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hui-cal-cell {
    position: relative;
    aspect-ratio: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--hl-fs-base); color: var(--text-primary);
    cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation;
    transition: background var(--hl-t-micro) ease, color var(--hl-t-micro) ease, transform var(--hl-t-micro) var(--hl-ease);
}
/* 命中区补到 ≥46：7 列并排在 360~430 的屏上，格子本体最多 42~46 宽，
   再靠透明层往四周各撑 2px 才是稳的 44+（本体尺寸量得到，别只写 min-height） */
.hui-cal-cell::before { content: ''; position: absolute; inset: -2px; }
.hui-cal-cell.is-out::before { content: none; }
.hui-cal-cell.is-out { cursor: default; }
.hui-cal-cell:hover { background: var(--hl-rose-cta-soft); }
.hui-cal-cell:active { transform: scale(0.92); }
.hui-cal-cell.is-today { color: var(--hl-rose-cta); font-weight: 700; box-shadow: inset 0 0 0 1.2px var(--gold); }
.hui-cal-cell.is-on { background: var(--hl-rose-cta); color: #fff; font-weight: 600; }
.hui-cal-cell.is-on:hover { background: var(--hl-rose-cta-hover); }
[data-theme-mode="dark"] .hui-cal-cell.is-on { color: #241E1C; }
.hui-date-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-faint); }

/* ===== 三态 / 进度 / 星级 ===== */
.hui-skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.hui-skel-line {
    display: block; height: 14px; border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--border-faint), var(--border), var(--border-faint));
    background-size: 200% 100%; animation: huiSkel 1.4s ease-in-out infinite;
}
@keyframes huiSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.hui-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; text-align: center; }
/* 施工单 §F 的四种状态各有一套：空 / 失败 / 加载（骨架在上面）/ 成功（金线一闪 + customToast） */
.hui-state.hui-empty .hui-state-mark { background: var(--hl-rose-cta-soft); color: var(--hl-rose-cta); }
.hui-state.hui-empty .hui-state-title { color: var(--text-primary); }
.hui-state.hui-error .hui-state-mark { background: var(--hl-danger-soft); color: var(--hl-danger); }
.hui-state.hui-error .hui-state-title { color: var(--text-primary); }
.hui-state.hui-error .hui-state-sub { color: var(--hl-text-faint); }
/* 失败态给一张纸的边界感：不至于在长页里看不出来 */
.hui-state.hui-error { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.hui-state-mark {
    width: 52px; height: 52px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hl-rose-cta-soft); color: var(--hl-rose-cta); margin-bottom: 4px;
}
.hui-state-mark.is-danger { background: var(--hl-danger-soft); color: var(--hl-danger); }
.hui-state-en { font-family: var(--font-display); font-style: italic; font-size: var(--hl-fs-md); color: var(--hl-rose-cta); letter-spacing: 1px; }
.hui-state-title { font-size: var(--hl-fs-md); color: var(--text-primary); font-weight: 600; }
.hui-state-sub { font-size: var(--hl-fs-sm); color: var(--hl-text-faint); line-height: 1.7; max-width: 260px; }
.hui-state .hui-btn { margin-top: 10px; }

.hui-progress { height: 6px; border-radius: 3px; background: var(--border-faint); overflow: hidden; width: 100%; }
.hui-progress-fill { display: block; height: 100%; border-radius: 3px; transition: width var(--hl-t-page) var(--hl-ease); }
.hui-p-rose { background: var(--hl-rose-cta); }
.hui-p-gold { background: var(--gold); }
.hui-p-sage { background: var(--hl-sage-cta); }

.hui-stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.hui-star { width: 14px; height: 14px; position: relative; display: inline-block; }
.hui-star::before, .hui-star::after {
    content: ''; position: absolute; width: 8px; height: 12px; border-radius: 8px 8px 0 0; top: 0;
    background: var(--border);
}
.hui-star::before { left: 6px; transform: rotate(-45deg); transform-origin: 0 100%; }
.hui-star::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.hui-star.is-on::before, .hui-star.is-on::after { background: var(--hl-rose-cta); }

/* ===== 页面进入（唯一入口 huiPageIn；入场只做淡入，不做位移 —— 防闪跳）===== */
.hui-page-in { animation: huiPageIn var(--hl-t-page) var(--hl-ease); }
@keyframes huiPageIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== 窄屏（<370px）：日历格子、按钮内边距、抽屉内边距一起收 =====
   ⚠ 这里只许「收内边距和字号」；命中区（min-height 44 / 天数格的 40+）不许再往下降
     —— 窄屏把触摸目标压到 44 以下是长期规则 #214 点名的坑。 */
@media (max-width: 370px) {
    .hui-sheet { padding: 8px 14px calc(16px + var(--safe-bottom)); }
    .hui-cal-cell { min-height: 40px; font-size: var(--hl-fs-sm); }
    .hui-date-panel { padding: 10px; }
    .hui-btn { padding: 0 14px; }
    .hui-chip { padding: 0 11px; }
    .hui-state { padding: 26px 14px; }
    .hui-confirm-btns { flex-direction: column-reverse; }
}

/* ===== 大屏 / 平板（≥481px）：限宽居中，绝不铺满（竖屏约束铁律）===== */
@media (min-width: 481px) {
    .hui-scrim.is-sheet { align-items: flex-end; }
    .hui-sheet { border-radius: var(--radius-xl); margin-bottom: 16px; }
    .hui-sheet.is-modal { margin-bottom: 0; }
}

/* ===== 暗色 ===== */
[data-theme-mode="dark"] .hui-sheet { background: var(--surface-solid); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-lg); }
[data-theme-mode="dark"] .hui-input-wrap,
[data-theme-mode="dark"] .hui-date-trigger { background: var(--input-bg); }
[data-theme-mode="dark"] .hui-date-panel { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-lg); }
[data-theme-mode="dark"] .hui-scrim.is-modal,
[data-theme-mode="dark"] .hui-scrim.is-sheet.show { background: rgba(0,0,0,0.55); }
[data-theme-mode="dark"] .hui-scrim-date { background: rgba(0,0,0,0.45); }
[data-theme-mode="dark"] .hui-skel-line { background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03)); background-size: 200% 100%; }

/* ===== 减少动态效果：全站唯一口径（施工单与 impeccable 都要求）=====
   关掉动画不是关掉状态 —— 只把「动」换成「直接到位」，可见性判据一个不动。 */
@media (prefers-reduced-motion: reduce) {
    .hui-scrim, .hui-sheet, .hui-date-panel, .hui-progress-fill, .hui-btn, .hui-chip, .hui-star,
    .hui-sw-track, .hui-sw-thumb, .hui-skel-line, .hui-page-in {
        animation: none !important;
        transition: none !important;
    }
    .hui-scrim { opacity: 1; }
    .hui-sheet { transform: none; }
    .hui-date-panel { transform: none; }
}

/* ============================================================
   W10-C 生产 UI · 做饭 / 厨具 / 外面吃 / 口味（js/panels/panels-health-food.js）
   ------------------------------------------------------------
   改之前先看这几条（与施工单 §5 一致）：
   ① 只许用本文件令牌层的字号档（--hl-fs-*）、时长（--hl-t-*）、缓动（--hl-ease）；
      间距 / 圆角直接用 core.css 的 --space- / --radius-，绝不在这里再抄一份（长期规则 #226）。
   ② 命中区一律 ≥ var(--hl-tap)（44px）；视觉本体要小就把按钮本体画小，绝不缩命中区。
   ③ 动效只动 transform / opacity / background；缓动指数收尾、禁弹跳；尊重 reduce。
   ④ 每个类名都在 JS 里真实用过 —— tools/health-ui.test.js 的「类名 ↔ 样式一一对应」盯着它。
   ⑤ 360 / 390 / 430 都要自然撑高：宽度一律百分比或 min()，绝不写死 px 宽。
   ============================================================ */

/* ===== 这一块的外壳与块内导航 ===== */
.fd-root { display: block; margin-bottom: var(--space-3, 12px); }
.fd-page { display: block; }
.fd-tabbar {
    display: flex; gap: 6px; padding: 4px 0 var(--space-3, 12px);
    border-bottom: 1px solid var(--border); margin-bottom: var(--space-4, 16px);
}
.fd-tab {
    flex: 1; min-height: var(--hl-tap); padding: 8px 4px; border: none; background: none;
    font-family: var(--font-body); font-size: var(--hl-fs-sm); color: var(--text-secondary);
    cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: var(--radius-sm);
    transition: color var(--hl-t-micro) var(--hl-ease), background var(--hl-t-micro) var(--hl-ease);
}
.fd-tab:active { background: var(--hl-sage-soft); }
.fd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, 12px); }
.fd-head-l { flex: 1; min-width: 0; }
.fd-title { font-size: var(--hl-fs-xl); font-weight: 500; color: var(--text-primary); letter-spacing: 0.3px; }
.fd-sub { font-size: var(--hl-fs-sm); color: var(--text-secondary); line-height: 1.7; margin-top: 5px; }
.fd-back {
    flex: none; min-height: var(--hl-tap); min-width: var(--hl-tap); padding: 0 12px;
    border: 1px solid var(--border); background: var(--hl-food-card); border-radius: var(--radius-full);
    font-family: var(--font-body); font-size: var(--hl-fs-sm); color: var(--text-secondary); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: color var(--hl-t-micro) var(--hl-ease), border-color var(--hl-t-micro) var(--hl-ease);
}
.fd-back:active { transform: scale(0.97); border-color: var(--hl-sage-line); color: var(--hl-sage-ink); }
.fd-block { padding: var(--space-4, 16px) 0; }
.fd-sticky-pad { height: var(--space-5, 20px); }
.fd-ic { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ===== 首页 ===== */
.fd-hero {
    display: flex; align-items: center; gap: var(--space-4, 16px); width: 100%; text-align: left;
    margin-top: var(--space-4, 16px); padding: var(--space-5, 20px) var(--space-4, 16px);
    border: 1px solid var(--border); background: linear-gradient(150deg, var(--hl-sage-soft), var(--hl-rose-cta-soft));
    border-radius: var(--radius-lg) var(--radius-xs) var(--radius-lg) var(--radius-xs);
    cursor: pointer; font-family: var(--font-body);
    transition: transform var(--hl-t-page) var(--hl-ease);
}
.fd-hero:active { transform: scale(0.985); }
.fd-hero.is-quiet { cursor: default; }
.fd-hero-art { flex: none; color: var(--hl-sage-ink); }
.fd-hero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fd-hero-k { font-size: var(--hl-fs-xs); letter-spacing: 0.14em; color: var(--text-secondary); }
.fd-hero-name { font-size: var(--hl-fs-lg); font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.fd-hero-sub { font-size: var(--hl-fs-sm); color: var(--text-secondary); line-height: 1.6; }

.fd-sec { margin-top: var(--space-5, 20px); }
.fd-sec-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    font-size: var(--hl-fs-md); font-weight: 600; color: var(--text-primary); margin-bottom: 8px;
}
.fd-sec-h em { font-style: italic; font-size: var(--hl-fs-sm); color: var(--gold-dark); letter-spacing: 0.06em; }
.fd-sec-h2 { font-size: var(--hl-fs-sm); color: var(--text-secondary); margin: var(--space-4, 16px) 0 6px; }
.fd-quiet { font-size: var(--hl-fs-sm); color: var(--text-secondary); line-height: 1.8; padding: 10px 0; }
.fd-hint { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); line-height: 1.7; margin-top: 8px; }
.fd-note {
    margin-top: var(--space-3, 12px); padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--hl-sage-soft); font-size: var(--hl-fs-sm); line-height: 1.85; color: var(--text-secondary);
}
.fd-note b { color: var(--text-primary); font-weight: 600; }
.fd-lead { font-size: var(--hl-fs-md); line-height: 1.8; color: var(--text-primary); margin-top: var(--space-3, 12px); }
.fd-lead b { font-weight: 600; }

/* 加一道菜 */
.fd-add {
    display: flex; align-items: center; gap: var(--space-3, 12px); width: 100%; text-align: left;
    min-height: var(--hl-tap); padding: 14px; border: 1px dashed var(--border); border-radius: var(--radius-md);
    background: none; cursor: pointer; font-family: var(--font-body);
    transition: border-color var(--hl-t-micro) var(--hl-ease), background var(--hl-t-micro) var(--hl-ease);
}
.fd-add:active { transform: scale(0.99); border-color: var(--hl-sage-line); background: var(--hl-sage-soft); }
.fd-add-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hl-sage-soft); color: var(--hl-sage-ink); }
.fd-add-t { display: block; font-size: var(--hl-fs-md); font-weight: 600; color: var(--text-primary); }
.fd-add-s { display: block; font-size: var(--hl-fs-xs); color: var(--text-secondary); margin-top: 3px; }
.fd-more {
    display: block; width: 100%; min-height: var(--hl-tap); margin-top: 8px; border: none; background: none;
    color: var(--hl-sage-ink); font-family: var(--font-body); font-size: var(--hl-fs-sm); text-align: left;
    cursor: pointer; -webkit-appearance: none; appearance: none;
}
.fd-more:active { transform: scale(0.99); }

/* 一行一件事（菜谱 / 外食记录共用同一份结构） */
.fd-list { display: block; }
.fd-item {
    display: flex; align-items: center; gap: var(--space-3, 12px); width: 100%; text-align: left;
    min-height: 68px; padding: 10px; margin: 8px 0; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--hl-food-card); cursor: pointer; font-family: var(--font-body);
    transition: transform var(--hl-t-page) var(--hl-ease), background var(--hl-t-page) var(--hl-ease);
}
.fd-item:active { transform: scale(0.985); background: var(--hl-sage-soft); }
.fd-thumb {
    flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: 8px;
    background: var(--hl-sage-soft); color: var(--hl-sage-ink);
}
.fd-photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.fd-photo-lg { width: 100%; height: 130px; border-radius: var(--radius-md); }
.fd-item-txt { flex: 1; min-width: 0; }
.fd-item-name { display: block; font-size: var(--hl-fs-md); font-weight: 500; color: var(--text-primary); line-height: 1.45; }
.fd-item-sub { display: block; font-size: var(--hl-fs-xs); color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.fd-item-meta { flex: none; font-size: var(--hl-fs-sm); color: var(--gold-dark); }
.fd-badge {
    flex: none; font-size: var(--hl-fs-xs); padding: 5px 10px; border-radius: var(--radius-full);
    background: var(--hl-sage-soft); color: var(--hl-sage-ink); letter-spacing: 0.02em;
}
.fd-badge.is-wait { background: var(--hl-rose-cta-soft); color: var(--hl-rose-cta); }

/* 胶囊（口味标签 / 筛选项）：命中区与公共件同一口径 */
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3, 12px); }
.fd-chip {
    min-height: var(--hl-tap); min-width: var(--hl-tap); padding: 0 14px; border: 1px solid var(--border);
    border-radius: var(--radius-full); background: var(--hl-food-card); color: var(--text-secondary);
    font-family: var(--font-body); font-size: var(--hl-fs-sm); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background var(--hl-t-micro) var(--hl-ease), color var(--hl-t-micro) var(--hl-ease), border-color var(--hl-t-micro) var(--hl-ease);
}
.fd-chip:active { transform: scale(0.96); }
.fd-chip.is-on { background: var(--hl-sage-cta); border-color: var(--hl-sage-cta); color: #FFFFFF; font-weight: 600; }

/* ===== 添加菜谱：照片 ===== */
.fd-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fd-photo-box { position: relative; width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.fd-photo-empty { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); padding: 8px 0; }
.fd-photo-x {
    position: absolute; right: 0; top: 0; width: 32px; height: 32px; border: none; border-radius: 0 0 0 10px;
    background: rgba(26,22,20,0.55); color: #FFFFFF; font-size: var(--hl-fs-md); line-height: 1; cursor: pointer;
}
.fd-photo-x::before { content: ''; position: absolute; inset: -6px; }
.fd-upload { display: block; margin-top: 10px; }
.fd-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fd-upload span {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--hl-tap);
    border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-secondary);
    font-size: var(--hl-fs-sm); cursor: pointer;
    transition: border-color var(--hl-t-micro) var(--hl-ease), color var(--hl-t-micro) var(--hl-ease);
}
.fd-upload:active span { border-color: var(--hl-sage-line); color: var(--hl-sage-ink); }

/* ===== 匹配结果（三态：命中 / 要她选 / 没有）===== */
.fd-hit { text-align: center; padding: var(--space-5, 20px) var(--space-3, 12px) var(--space-3, 12px); }
.fd-hit-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--hl-sage-cta); color: #FFFFFF; }
.fd-hit-name { font-size: var(--hl-fs-lg); font-weight: 500; color: var(--text-primary); }
.fd-hit-sub { font-size: var(--hl-fs-sm); color: var(--text-secondary); margin-top: 6px; }
.fd-cand {
    display: flex; align-items: center; gap: var(--space-3, 12px); width: 100%; text-align: left;
    min-height: 68px; padding: 10px; margin: 8px 0; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--hl-food-card); cursor: pointer; font-family: var(--font-body);
    transition: border-color var(--hl-t-micro) var(--hl-ease), background var(--hl-t-micro) var(--hl-ease), transform var(--hl-t-micro) var(--hl-ease);
}
.fd-cand:active { transform: scale(0.99); }
.fd-cand.is-picked { border-color: var(--hl-sage-cta); background: var(--hl-sage-soft); box-shadow: 0 0 0 1px var(--hl-sage-cta); }

/* ===== 跟着做 ===== */
.fd-prog { display: flex; gap: 4px; margin: var(--space-4, 16px) 0 0; }
.fd-prog-i { flex: 1; height: 3px; border-radius: 2px; background: var(--border); transition: background var(--hl-t-page) var(--hl-ease); }
.fd-prog-i.is-on { background: var(--hl-sage-cta); }
.fd-step {
    margin-top: var(--space-4, 16px); padding: var(--space-4, 16px);
    border: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-xs) var(--radius-lg) var(--radius-xs);
    background: var(--hl-food-card);
}
.fd-step-no { font-size: var(--hl-fs-xs); letter-spacing: 0.14em; color: var(--text-secondary); }
.fd-step-act { font-size: var(--hl-fs-xl); line-height: 1.7; font-weight: 500; color: var(--text-primary); margin-top: 10px; text-wrap: pretty; }
.fd-step-heat { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--hl-fs-sm); color: var(--hl-rose-cta); }
.fd-step-tool { font-size: var(--hl-fs-sm); color: var(--text-secondary); margin-top: 6px; }
.fd-step-src { font-size: var(--hl-fs-xs); color: var(--hl-text-faint); margin-top: 12px; line-height: 1.6; }
.fd-timer {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px); padding: 14px var(--space-4, 16px);
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--hl-food-card);
}
.fd-timer-l { min-width: 0; }
.fd-timer-num { font-size: var(--hl-fs-2xl); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-primary); letter-spacing: 0.02em; }
.fd-timer-num.is-hot { color: var(--hl-rose-cta); }
.fd-timer-lbl { font-size: var(--hl-fs-xs); color: var(--text-secondary); margin-top: 3px; }
.fd-timer-btns { display: flex; gap: 8px; flex: none; }
.fd-rescue { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--hl-food-card); }
.fd-rescue-h { font-size: var(--hl-fs-md); font-weight: 600; color: var(--text-primary); padding: 14px 14px 0; }
.fd-rescue-b { padding: 8px 14px 14px; }
.fd-rescue-row { font-size: var(--hl-fs-sm); line-height: 1.8; color: var(--text-secondary); padding: 6px 0; border-bottom: 1px solid var(--border-faint, var(--border)); }
.fd-rescue-row:last-child { border-bottom: none; }
.fd-rescue-row b { display: block; color: var(--text-primary); font-weight: 600; margin-bottom: 2px; }
.fd-rescue-sig { display: block; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); margin-bottom: 4px; }
.fd-rescue-stop { display: block; margin-top: 6px; font-size: var(--hl-fs-sm); color: var(--hl-rose-cta); line-height: 1.8; }
.fd-row2 { display: flex; gap: 10px; margin-top: var(--space-3, 12px); }
.fd-row2 > * { flex: 1; }
.fd-row2-c { flex: 1; min-width: 0; }
.fd-ul { margin: 0; padding-left: 18px; }
.fd-ul li { margin: 4px 0; }

/* ===== 厨具 ===== */
.fd-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--space-4, 16px); }
.fd-tool {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left;
    min-height: 118px; padding: 14px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--hl-food-card); cursor: pointer; font-family: var(--font-body);
    transition: transform var(--hl-t-page) var(--hl-ease), background var(--hl-t-page) var(--hl-ease);
}
.fd-tool:active { transform: scale(0.98); background: var(--hl-sage-soft); }
.fd-tool-ic { color: var(--hl-sage-ink); }
.fd-tool-n { font-size: var(--hl-fs-md); font-weight: 500; color: var(--text-primary); }
.fd-tool-s { font-size: var(--hl-fs-xs); color: var(--text-secondary); line-height: 1.6; }
.fd-kv { margin-top: var(--space-4, 16px); }
.fd-kv-k { font-size: var(--hl-fs-xs); color: var(--text-secondary); letter-spacing: 0.06em; }
.fd-kv-v { font-size: var(--hl-fs-base); color: var(--text-primary); line-height: 1.9; margin-top: 5px; }

/* ===== 外面吃 / 比较 / 排行 ===== */
.fd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: var(--space-4, 16px); align-items: start; }
.fd-card {
    border: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-xs) var(--radius-lg) var(--radius-xs);
    background: var(--hl-food-card); padding: 8px; cursor: grab; user-select: none;
    transition: transform var(--hl-t-page) var(--hl-ease), box-shadow var(--hl-t-page) var(--hl-ease);
}
.fd-card.is-dragging { transition: none; cursor: grabbing; }
.fd-card.is-far { box-shadow: 0 0 0 1px var(--hl-sage-cta); }
.fd-card-pic { display: flex; align-items: center; justify-content: center; height: 118px; border-radius: var(--radius-md); overflow: hidden; background: var(--hl-sage-soft); }
.fd-card-art { color: var(--hl-sage-ink); }
.fd-card-name { font-size: var(--hl-fs-md); font-weight: 500; color: var(--text-primary); margin: 10px 6px 4px; line-height: 1.4; }
.fd-card-sub { font-size: var(--hl-fs-xs); color: var(--text-secondary); margin: 0 6px 8px; line-height: 1.5; }
.fd-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 6px 8px; }
.fd-card-tags .fd-chip { min-height: 28px; font-size: var(--hl-fs-xs); padding: 0 10px; cursor: default; }
.fd-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: var(--space-5, 20px); }
.fd-choice-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--hl-food-card); color: var(--text-primary); font-family: var(--font-body); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background var(--hl-t-micro) var(--hl-ease), border-color var(--hl-t-micro) var(--hl-ease), transform var(--hl-t-micro) var(--hl-ease);
}
.fd-choice-btn:active { transform: scale(0.97); }
.fd-choice-btn.is-on { border-color: var(--hl-sage-cta); background: var(--hl-sage-soft); }
.fd-choice-t { font-size: var(--hl-fs-sm); }
.fd-choice-s { font-size: var(--hl-fs-xs); color: var(--text-secondary); }
.fd-rank { display: flex; align-items: center; gap: var(--space-3, 12px); min-height: var(--hl-tap); padding: 10px 2px; border-bottom: 1px solid var(--border-faint, var(--border)); }
.fd-rank-n { flex: none; width: 22px; font-size: var(--hl-fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fd-rank-nm { flex: 1; min-width: 0; font-size: var(--hl-fs-md); color: var(--text-primary); }
.fd-rank-lv { flex: none; font-size: var(--hl-fs-xs); color: var(--text-secondary); }

/* ===== 窄屏（<370px）：不许撑破、不许横溢 ===== */
@media (max-width: 369px) {
    .fd-title { font-size: var(--hl-fs-lg); }
    .fd-step-act { font-size: var(--hl-fs-lg); }
    .fd-choice-t { font-size: var(--hl-fs-xs); }
    .fd-choice-s { display: none; }
    .fd-choice-btn { padding: 0 4px; }
    .fd-tools { gap: 8px; }
    .fd-cards { gap: 8px; }
    .fd-tool { padding: 12px 10px; }
}
/* 极窄：两张比较卡竖着叠，绝不挤成两条细缝 */
@media (max-width: 330px) {
    .fd-cards { grid-template-columns: minmax(0, 1fr); }
    .fd-tools { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 暗色兜底（令牌换不掉的那几处）===== */
[data-theme-mode="dark"] .fd-photo-x { background: rgba(0,0,0,0.6); }
[data-theme-mode="dark"] .fd-chip.is-on { color: #16211A; }
[data-theme-mode="dark"] .fd-hit-mark { color: #16211A; }

/* ===== 减少动态效果（这一块自己的口子）===== */
@media (prefers-reduced-motion: reduce) {
    .fd-hero, .fd-item, .fd-cand, .fd-tool, .fd-card, .fd-choice-btn, .fd-chip, .fd-add, .fd-back, .fd-prog-i {
        animation: none !important;
        transition: none !important;
    }
    .fd-card { cursor: pointer; }
}

/* ============================================================
   第11窗口（W11-C）· 今日 / 时间线 / 目标（js/panels/panels-health-td.js）
   ------------------------------------------------------------
   甲方定的方向：**B 每日任务型为骨架 + 他今天说的那句排在最上面**。
   口味一律走健康自己的令牌（--hl-rose-cta / --hl-sage-cta / --hl-danger / --hl-fs-* / --hl-tap）：
   不新造颜色、不出现碎片字号；类名前缀 hl-td-（已加进 tools/health-ui.test.js 的类名检查）。
   ============================================================ */
.hl-td-head { margin-bottom: 14px; }
.hl-td-when { font-size: var(--hl-fs-xs); letter-spacing: 0.12em; color: var(--hl-text-faint); }
.hl-td-h1 { margin: 4px 0 0; font-size: var(--hl-fs-xl); font-weight: 500; color: var(--text-primary); }

/* ① 他今天说的那句（这一页的主角） */
.hl-td-voice {
    background: rgba(255,255,255,0.58); border-radius: 12px; padding: 16px;
    box-shadow: 0 1px 2px rgba(30,28,26,0.04), 0 4px 16px rgba(30,28,26,0.06);
}
.hl-td-voice.is-quiet { background: rgba(255,255,255,0.38); }
.hl-td-who { font-size: var(--hl-fs-xs); color: var(--hl-rose-cta); letter-spacing: 0.06em; }
.hl-td-line { margin: 8px 0 0; font-size: var(--hl-fs-md); line-height: 1.75; color: var(--text-primary); }
.hl-td-quiet { margin: 8px 0 0; font-size: var(--hl-fs-base); line-height: 1.7; color: var(--hl-text-faint); }
.hl-td-why { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(196,168,106,0.28); }
.hl-td-why > span { font-size: var(--hl-fs-xs); letter-spacing: 0.12em; color: var(--hl-text-faint); }
.hl-td-why ul { margin: 6px 0 0; padding-left: 16px; }
.hl-td-why li { font-size: var(--hl-fs-sm); line-height: 1.75; color: var(--hl-text-faint); }

/* 区块标题：一行小字 + 一条金色细线 */
.hl-td-sec { margin-top: 22px; }
.hl-td-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hl-td-cap > span { font-size: var(--hl-fs-xs); letter-spacing: 0.14em; color: var(--hl-text-faint); }
.hl-td-cap > i { flex: 1; height: 1px; background: rgba(196,168,106,0.32); }

/* ② 今天要做的事 */
.hl-td-none { font-size: var(--hl-fs-base); color: var(--hl-text-faint); padding: 6px 0; }
.hl-td-task { display: flex; align-items: center; gap: 12px; min-height: var(--hl-tap); padding: 6px 0; }
.hl-td-tick {
    width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
    border: 1.4px solid var(--hl-rose-line); display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.hl-td-task.is-done .hl-td-tick { background: var(--hl-rose-cta); border-color: var(--hl-rose-cta); }
.hl-td-ttl { flex: 1; font-size: var(--hl-fs-base); line-height: 1.6; color: var(--text-primary); }
.hl-td-task.is-done .hl-td-ttl { color: var(--hl-text-faint); }
.hl-td-do {
    min-height: var(--hl-tap); padding: 0 12px; border: none; background: none; cursor: pointer;
    font: inherit; font-size: var(--hl-fs-sm); color: var(--hl-rose-cta);
    border-bottom: 1px solid var(--hl-rose-line);
}
.hl-td-do:hover { color: var(--hl-rose-cta-hover); }

/* ③ 记一笔：六格 */
.hl-td-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hl-td-cell {
    min-height: 52px; border-radius: 10px; cursor: pointer; font: inherit; font-size: var(--hl-fs-base);
    background: rgba(255,255,255,0.58); border: 1px solid rgba(30,28,26,0.07); color: var(--text-primary);
    transition: background var(--hl-t-micro) var(--hl-ease), border-color var(--hl-t-micro) var(--hl-ease);
}
.hl-td-cell:hover { background: var(--hl-rose-cta-soft); border-color: var(--hl-rose-line); }
.hl-td-sum { display: flex; gap: 16px; margin-top: 10px; font-size: var(--hl-fs-sm); color: var(--hl-text-faint); }
.hl-td-note { margin-top: 10px; font-size: var(--hl-fs-xs); line-height: 1.7; color: var(--hl-text-faint); }

/* ④ 时间线（今日页那一段 / 时间线整页共用） */
.hl-td-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; }
.hl-td-chips::-webkit-scrollbar { height: 0; }
.hl-td-chip {
    flex: 0 0 auto; min-height: var(--hl-tap); padding: 0 14px; border-radius: 22px; cursor: pointer;
    font: inherit; font-size: var(--hl-fs-sm); color: var(--text-primary);
    background: rgba(255,255,255,0.58); border: 1px solid rgba(30,28,26,0.07);
    transition: background var(--hl-t-micro) var(--hl-ease), border-color var(--hl-t-micro) var(--hl-ease);
}
.hl-td-chip.is-on { background: var(--hl-rose-cta-soft); border-color: var(--hl-rose-line); color: var(--hl-rose-cta); }
.hl-td-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.hl-td-item + .hl-td-item { border-top: 1px solid rgba(30,28,26,0.06); }
/* 时间线那一列时间单独一个类名（不能叫 .hl-td-when —— 页头那句日期已经用了它） */
.hl-td-when-tl { flex: 0 0 76px; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); padding-top: 2px; }
.hl-td-body { flex: 1; min-width: 0; }
.hl-td-what { font-size: var(--hl-fs-base); line-height: 1.6; color: var(--text-primary); }
.hl-td-src { margin-top: 3px; font-size: var(--hl-fs-xs); color: var(--hl-text-faint); }
/* 一条记录右边那组动作（看 / 删）：本体一律 44×44（触摸目标必须量得到本体尺寸，
   不许靠伪元素撑命中区 —— 那样量出来仍是本体尺寸，长期规则 #244）。 */
.hl-td-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.hl-td-open {
    flex: 0 0 auto; width: var(--hl-tap); height: var(--hl-tap); border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--hl-text-faint); border-radius: 10px;
    transition: color var(--hl-t-micro) var(--hl-ease), background var(--hl-t-micro) var(--hl-ease);
}
.hl-td-open:hover { color: var(--hl-rose-cta); background: var(--hl-rose-cta-soft); }
.hl-td-del {
    flex: 0 0 auto; width: var(--hl-tap); height: var(--hl-tap); border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--hl-text-faint); border-radius: 10px;
    transition: color var(--hl-t-micro) var(--hl-ease), background var(--hl-t-micro) var(--hl-ease);
}
.hl-td-del:hover { color: var(--hl-danger); background: var(--hl-danger-soft); }

/* ⑤ 目标 */
.hl-td-goal {
    background: rgba(255,255,255,0.58); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(30,28,26,0.04);
}
.hl-td-gname { font-size: var(--hl-fs-md); color: var(--text-primary); }
.hl-td-gsub { margin-top: 4px; font-size: var(--hl-fs-sm); color: var(--hl-text-faint); }
.hl-td-gbar { margin-top: 10px; height: 3px; border-radius: 3px; background: rgba(30,28,26,0.08); overflow: hidden; }
.hl-td-gbar > i { display: block; height: 100%; background: var(--hl-sage-cta); transition: width var(--hl-t-page) var(--hl-ease); }
.hl-td-grow { display: flex; justify-content: space-between; font-size: var(--hl-fs-sm); color: var(--text-primary); padding: 4px 0; }
.hl-td-grow > span { color: var(--hl-text-faint); }
.hl-td-gfoot { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 次要那一个（「去健身练」）：跟主按钮并排，但不当主角 */
.hl-td-do-ghost { color: var(--hl-text-faint); }
.hl-td-do-ghost:hover { color: var(--hl-text-faint); background: rgba(30,28,26,0.04); }

/* 抽屉里的那一小块 */
.hl-td-drawer { padding-bottom: 4px; }
.hl-td-dh { font-size: var(--hl-fs-lg); color: var(--text-primary); }
.hl-td-dsub { margin: 6px 0 12px; font-size: var(--hl-fs-sm); line-height: 1.7; color: var(--hl-text-faint); }
.hl-td-dfoot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
    .hl-td-cell, .hl-td-chip, .hl-td-del, .hl-td-open, .hl-td-gbar > i { transition: none !important; }
}

/* ============================================================
   2026-10 · 健康手记视觉重绘
   母题：一册被晨光照亮的法式植物手记。照片使用仓库现有素材，不覆盖共享图片。
   ============================================================ */
#hl-root {
    --hl-paper: #fbf7f0;
    --hl-paper-line: rgba(164, 135, 105, .16);
    padding: 10px 16px calc(76px + var(--safe-bottom));
    background:
        radial-gradient(ellipse at 4% 2%, rgba(219, 194, 180, .16), transparent 42%),
        radial-gradient(ellipse at 94% 20%, rgba(183, 194, 170, .14), transparent 38%);
}
[data-theme-mode="dark"] #hl-root {
    --hl-paper: #25211e;
    --hl-paper-line: rgba(222, 197, 158, .13);
    background:
        radial-gradient(ellipse at 4% 2%, rgba(161, 117, 119, .10), transparent 42%),
        radial-gradient(ellipse at 94% 20%, rgba(132, 151, 119, .09), transparent 38%);
}

.hl-cover {
    isolation: isolate;
    position: relative;
    min-height: 168px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 2px 0 16px;
    padding: 20px 19px;
    border: 1px solid rgba(190, 164, 137, .35);
    border-radius: 18px 18px 12px 12px;
    background: #f8f1eb;
    box-shadow: 0 1px 3px rgba(86, 67, 49, .06), 0 8px 22px rgba(104, 82, 63, .08);
}
.hl-cover::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 6px;
    border: 1px solid rgba(173, 143, 104, .25);
    border-radius: 13px 13px 8px 8px;
    pointer-events: none;
}
.hl-cover-copy { position: relative; z-index: 3; width: 68%; }
.hl-cover-kicker {
    display: block;
    margin-bottom: 9px;
    color: #88735f;
    font: italic 11px/1.2 var(--font-display, 'Playfair Display', Georgia, serif);
    letter-spacing: .18em;
}
.hl-cover-title {
    margin: 0;
    color: #443932;
    font: 500 24px/1.3 var(--font-reading, 'Noto Serif SC', Georgia, serif);
    letter-spacing: .12em;
}
.hl-cover-desc {
    max-width: 210px;
    margin: 7px 0 0;
    color: #72665b;
    font-size: var(--hl-fs-sm);
    line-height: 1.75;
    letter-spacing: .04em;
}
.hl-cover-art {
    position: absolute;
    z-index: 1;
    inset: 0 0 0 auto;
    width: 58%;
    overflow: hidden;
    pointer-events: none;
}
.hl-cover-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f8f1eb 0%, rgba(248,241,235,.88) 10%, rgba(248,241,235,.22) 55%, rgba(248,241,235,.02) 100%);
}
.hl-cover-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 76%;
    opacity: .82;
    filter: saturate(.82) contrast(.94);
}
.hl-cover-script {
    position: absolute;
    z-index: 1;
    right: 17px;
    bottom: 9px;
    color: rgba(126, 91, 90, .82);
    font: 36px/.9 var(--font-script, 'Great Vibes', cursive);
    transform: rotate(-7deg);
}
.hl-cover-seal {
    position: absolute;
    z-index: 1;
    top: 15px;
    right: 17px;
    display: grid;
    width: 38px;
    height: 38px;
    place-content: center;
    border: 1px solid rgba(173, 143, 104, .55);
    border-radius: 50%;
    color: rgba(130, 103, 77, .82);
    font: 7px/1.25 var(--font-display, Georgia, serif);
    letter-spacing: .11em;
    text-align: center;
}
.hl-cover-rule {
    position: absolute;
    z-index: 3;
    bottom: 14px;
    left: 19px;
    width: 46px;
    height: 1px;
    background: rgba(168, 135, 95, .6);
}
[data-theme-mode="dark"] .hl-cover { background: #302a26; border-color: rgba(207, 179, 145, .25); }
[data-theme-mode="dark"] .hl-cover::before { border-color: rgba(207, 179, 145, .18); }
[data-theme-mode="dark"] .hl-cover-art::after { background: linear-gradient(90deg, #302a26 0%, rgba(48,42,38,.91) 12%, rgba(48,42,38,.36) 58%, rgba(48,42,38,.12) 100%); }
[data-theme-mode="dark"] .hl-cover-art img { opacity: .56; }
[data-theme-mode="dark"] .hl-cover-title { color: #eee4d8; }
[data-theme-mode="dark"] .hl-cover-desc { color: #c4b8aa; }
[data-theme-mode="dark"] .hl-cover-kicker,
[data-theme-mode="dark"] .hl-cover-seal { color: #c7b292; }

/* 页签像手记里的布面索引：可横向滑动，当前页签有清晰的玫瑰色书签感。 */
.hl-tab-bar {
    gap: 5px;
    padding: 4px 2px 10px;
    margin: 0 -2px 13px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-bottom: 1px solid var(--hl-paper-line);
}
.hl-tab-bar::-webkit-scrollbar { display: none; }
.hl-tab-btn {
    position: relative;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--hl-fs-sm);
    transition: color var(--hl-t-page) var(--hl-ease), background var(--hl-t-page) var(--hl-ease), border-color var(--hl-t-page) var(--hl-ease), transform var(--hl-t-micro) var(--hl-ease);
    scroll-snap-align: center;
}
.hl-tab-btn.active {
    border-color: rgba(142, 95, 95, .20);
    background: rgba(255, 252, 248, .82);
    color: var(--hl-rose-cta);
    box-shadow: 0 2px 8px rgba(120, 86, 72, .07);
}
[data-theme-mode="dark"] .hl-tab-btn.active { background: rgba(255,255,255,.07); }
.hl-tab-btn:active { transform: scale(.96); }
.hl-tab-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }

/* 纸页式记录面、标题和分隔；不改变记录顺序与数据操作。 */
.hl-page { animation: hl-leaf-arrive 260ms var(--hl-ease) both; }
@keyframes hl-leaf-arrive { from { opacity: .58; } to { opacity: 1; } }
.hl-phase-card.card,
.hl-stats-card.card,
.hl-td-voice,
.hl-td-goal,
.hl-intimacy-section,
.hl-page .hui-card {
    border: 1px solid rgba(171, 145, 116, .18);
    border-radius: 12px 12px 8px 8px;
    background-color: rgba(255, 253, 249, .76);
    box-shadow: 0 1px 3px rgba(106, 79, 58, .05), 0 4px 14px rgba(106, 79, 58, .055);
}
[data-theme-mode="dark"] .hl-phase-card.card,
[data-theme-mode="dark"] .hl-stats-card.card,
[data-theme-mode="dark"] .hl-td-voice,
[data-theme-mode="dark"] .hl-td-goal,
[data-theme-mode="dark"] .hl-intimacy-section,
[data-theme-mode="dark"] .hl-page .hui-card { background-color: rgba(255,255,255,.045); border-color: rgba(222,197,158,.14); }
.hl-phase-title { letter-spacing: .03em; }
.hl-td-h1 { font-family: var(--font-reading, 'Noto Serif SC', Georgia, serif); letter-spacing: .08em; }
.hl-td-cap > span { letter-spacing: .10em; }
.hl-td-cap > i { background: linear-gradient(90deg, rgba(196,168,106,.34), rgba(196,168,106,.10), transparent); }
.hl-td-task + .hl-td-task,
.hl-reminder-row + .hl-reminder-row { border-top: 1px solid var(--hl-paper-line); }
.hl-td-item + .hl-td-item { border-color: var(--hl-paper-line); }
.hl-td-cell,
.hl-td-chip { border-color: rgba(171,145,116,.19); border-radius: 8px 8px 6px 6px; }
.hl-td-cell:active,
.hl-td-chip:active { transform: translateY(1px) scale(.985); }

/* 输入与日期控件统一成嵌入式纸笺；选择器仍使用项目已有的自绘日历。 */
.hl-page .hui-input-wrap,
.hl-page .hui-date-trigger,
.hl-page input:not(.hui-input):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.hl-page textarea:not(.hui-input),
.hl-page select {
    border: 1px solid rgba(160, 135, 107, .25);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    box-shadow: inset 0 1px 2px rgba(102, 78, 58, .035);
    transition: border-color var(--hl-t-page) var(--hl-ease), background var(--hl-t-page) var(--hl-ease), box-shadow var(--hl-t-page) var(--hl-ease);
}
.hl-page .hui-input-wrap:focus-within,
.hl-page .hui-date-trigger:focus-visible,
.hl-page input:not(.hui-input):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.hl-page textarea:not(.hui-input):focus,
.hl-page select:focus {
    outline: none;
    border-color: var(--hl-rose-line);
    background: var(--surface-solid);
    box-shadow: 0 0 0 3px var(--hl-rose-cta-soft), 0 0 18px rgba(200,160,160,.12);
}
.hl-page button:not(.hl-tab-btn) { transition: transform var(--hl-t-micro) var(--hl-ease), color var(--hl-t-page) var(--hl-ease), background-color var(--hl-t-page) var(--hl-ease), border-color var(--hl-t-page) var(--hl-ease), box-shadow var(--hl-t-page) var(--hl-ease); }
.hl-page button:not(:disabled):active { transform: translateY(1px) scale(.975); }
.hl-page button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--hl-rose-cta-soft); }
.hl-page .hui-btn-primary { box-shadow: 0 4px 12px rgba(112,72,70,.16); }
.hl-page .hui-btn-primary:active { box-shadow: 0 1px 4px rgba(112,72,70,.12); }
[data-theme-mode="dark"] .hl-page .hui-input-wrap,
[data-theme-mode="dark"] .hl-page .hui-date-trigger,
[data-theme-mode="dark"] .hl-page input:not(.hui-input):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-theme-mode="dark"] .hl-page textarea:not(.hui-input),
[data-theme-mode="dark"] .hl-page select { background: var(--input-bg); }

@media (max-width: 370px) {
    #hl-root { padding-right: 12px; padding-left: 12px; }
    .hl-cover { min-height: 154px; padding: 18px 15px; }
    .hl-cover-copy { width: 73%; }
    .hl-cover-title { font-size: 21px; }
    .hl-cover-art { width: 55%; }
    .hl-cover-script { right: 13px; font-size: 31px; }
    .hl-tab-btn { padding-right: 11px; padding-left: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .hl-page { animation: none !important; }
    .hl-cover *, .hl-tab-btn, .hl-page button, .hl-page input, .hl-page textarea, .hl-page select { transition: none !important; }
}