/* ==========================================================================
   用户端样式：移动端 + PC 自适应
   ========================================================================== */

/* ------------------------------ 登录页 ------------------------------ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(900px 420px at 12% -8%, var(--accent-soft), transparent 65%),
    var(--bg);
}

.auth-card {
  width: min(400px, 100%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

.auth-logo {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
  margin-bottom: 14px;
}

.auth-card h1 { margin-bottom: 4px; }
.auth-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-foot { margin-top: 18px; font-size: 12px; color: var(--text-muted); text-align: center; }
.auth-switch { margin-top: 14px; text-align: center; font-size: 13px; }

/* ------------------------------ 应用骨架 ------------------------------ */

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px 1fr;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 14px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 16px;
}
.brand-mark {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 18px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 15px; }
.brand-text span { font-size: 11px; color: var(--text-muted); }

.nav { display: flex; flex-direction: column; gap: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  text-align: left;
  width: 100%;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.nav-item .nav-icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.nav-item .nav-icon .ic { width: 17px; height: 17px; }

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex: none;
}
.user-chip .meta { display: flex; flex-direction: column; min-width: 0; }
.user-chip .meta strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .meta span { font-size: 11px; color: var(--text-muted); }

.prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 40;
}

.page {
  padding: 22px 26px 40px;
  max-width: 1180px;
  width: 100%;
  /* 宽屏上居中：否则内容顶在侧栏右边，显示器右侧空一大片 */
  margin-inline: auto;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-head .titles h1 { margin-bottom: 2px; }
.page-head .titles p { color: var(--text-muted); font-size: 13px; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
}

.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* ------------------------------ 记录列表 ------------------------------ */

.toolbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.toolbar .field { min-width: 150px; }

.record-duration { font-variant-numeric: tabular-nums; }
.meal-dots { display: inline-flex; gap: 4px; }
.meal-dot {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.meal-dot.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }

/* 移动端卡片列表 */
.record-cards { display: none; flex-direction: column; gap: 10px; }

.record-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.record-card .rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.record-card .rc-times {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
.record-card .rc-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--text-muted); }

/* ------------------------------ 建议页 ------------------------------ */

.advice-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.advice-layout #advice-form { position: sticky; top: 18px; }
/* 表单折叠时它是 display:none，不再是网格项：结果区会掉进左边那条 320px 的窄列，
   所以折叠态把布局切成单列，让方案占满整行（宽屏才不会挤出右边的空白） */
.advice-layout.form-folded { grid-template-columns: minmax(0, 1fr); }

.advice-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.advice-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.summary-cell {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.summary-cell .label { font-size: 12px; color: var(--text-muted); }
.summary-cell .value { font-size: 17px; font-weight: 600; font-family: var(--mono); }

.day-list { display: flex; flex-direction: column; gap: 12px; }
/* 目标作息与调整步长：宽屏并排（2 : 1），窄屏仍上下堆叠。
   只在外层加 grid，两张卡内部布局不变，窄屏视觉与改动前一致。 */
.plan-pair { display: grid; gap: 12px; }
@media (min-width: 1100px) {
  /* 两卡等高：grid 项默认 stretch，右栏卡片会被拉到与左栏一样高（用户要求上下高度对齐）。 */
  .plan-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
}

/* 并排后右栏变窄：数值不折行（否则「60 分钟」会被拆成两行），标签允许换行。 */
.plan-pair [data-steps-card] .info-line > strong { white-space: nowrap; }

/* 宽屏：7 天方案排两栏，免得每张日卡都独占一整行、页面被拉得很长 */
@media (min-width: 1200px) {
  .day-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------ 24 小时时间图 ------------------------------ */
/* 位置全部由 --pos / --len 百分比驱动（--pos 是起点、--len 是长度）。
   宽屏用 .tl-h（横向），窄屏用 .tl-v（纵向），两套标记都在 DOM 里，
   靠媒体查询切换显示，避免监听 resize。 */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

/* 轨道自己撑高度。早先写成 position:absolute; inset:0，位置相对的却是外层 .timeline，
   于是时间条铺满整块、压到下面的时间刻度与"睡眠/早餐/午餐/晚餐"示例上（用户报的交叉）。 */
.tl-track {
  position: relative;
  height: 58px;
}

.tl-h { display: flex; flex-direction: column; gap: 6px; }
.tl-h .tl-axis { position: relative; height: 32px; }

.tl-v { display: none; }
/* 窄屏的轨道只是"行的容器"：不再有固定高度，也不再按时间比例压缩 */
.tl-v .tl-track {
  position: static;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 纵向轴：三段文字顺着排，不做绝对定位 */
.tl-axis-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: auto;
  font-variant-numeric: tabular-nums;
}
.tl-axis-v .tl-axis-end,
.tl-axis-v .tl-axis-sleep {
  position: static;
  transform: none;
}

.tl-axis { position: relative; font-size: 11px; color: var(--text-muted); }
.tl-axis-end { position: absolute; top: 0; }
.tl-axis-end.tl-axis-first { left: 0; }
.tl-axis-end.tl-axis-last { right: 0; }

/* 轴上的整点时间直接把文字放在对应百分比位置，和上面的条严格对齐 */
.tl-tick {
  position: absolute;
  top: 0;
  left: var(--pos);
  transform: translateX(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 睡眠时段单独放一行，做成小徽标，不与时间刻度抢位置 */
.tl-axis-sleep {
  position: absolute;
  left: 50%;
  top: 17px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-soft);
}

.tl-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 1px;
  background: var(--border);
}

/* 宽屏：条本体就是胶囊，位置与长度都由 --pos / --len 决定 */
.tl-h .tl-item {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--pos);
  width: var(--len);
  min-width: 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 窄屏：一行一条（名称 | 比例小条 | 时间区间）。
   早先是"把 144px 高的竖轨按 --pos/--len 压缩"，20 小时轴窗里 30 分钟的早餐
   只有 3.6px 高，名称又被 overflow:hidden 裁掉 —— 用户报的"手机版很多不显示"。
   现在行高由 CSS 保证，比例只体现在中间小条的长度上，两端的文字都排成横排。 */
.tl-v .tl-item {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  overflow: visible;
  border-radius: 0;
}

/* 配色只定义一次（自定义属性）：宽屏落在条本体上，窄屏落在行里的小条与名称文字上 */
.tl-item.sleep {
  --bar-bg: var(--accent-soft);
  --bar-border: rgba(79, 140, 255, 0.45);
  --bar-fg: var(--accent);
}
.tl-item.sleep-morning { --bar-bg: rgba(79, 140, 255, 0.1); }

.tl-item.meal {
  --bar-bg: rgba(240, 177, 55, 0.16);
  --bar-border: rgba(240, 177, 55, 0.5);
  --bar-fg: var(--warn);
}
.tl-item.meal-dinner {
  --bar-bg: rgba(53, 196, 141, 0.16);
  --bar-border: rgba(53, 196, 141, 0.5);
  --bar-fg: var(--ok);
}

.tl-h .tl-item {
  background: var(--bar-bg);
  border: 1px solid var(--bar-border);
  color: var(--bar-fg);
}

.tl-item-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  line-height: 1.1;
  padding: 0 3px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.tl-icon { font-size: 11px; }
.tl-icon .ic { width: 12px; height: 12px; }
.tl-name { overflow: hidden; text-overflow: ellipsis; }

/* --- 窄屏的"一行一条"（见上面 .tl-v .tl-item） --- */
/* 名称列定宽：行与行之间的小条因此左端对齐。
   超长文案在列内裁掉（配 min-width:0 让 ellipsis 生效），不会溢到小条上 */
.tl-v .tl-item-label {
  writing-mode: horizontal-tb;
  flex: 0 0 auto;
  width: 84px;
  max-width: none;
  padding: 0;
  font-size: 11px;
  color: var(--bar-fg);
}
.tl-v .tl-name { min-width: 0; }
/* 小条的轨道：宽度留给比例计算，背景只做"这一天"的参照 */
.tl-v .tl-rowtrack {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.tl-v .tl-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: var(--pos);
  width: var(--len);
  min-width: 4px;
  border-radius: 3px;
  background: var(--bar-bg);
  border: 1px solid var(--bar-border);
}
/* 时间区间：右对齐 + 等宽数字，跨零点时也只看区间本身 */
.tl-v .tl-item-time {
  flex: 0 0 auto;
  width: 72px;
  text-align: right;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 行布局用不到的节点：比例刻线、时间刻度（行里已经写了时间）、"现在"标记
   （横线本身依赖按比例压缩的竖轨，行布局里放不下，故窄屏不画） */
.tl-v .tl-grid-line,
.tl-v .tl-tick,
.tl-v .tl-now { display: none; }

/* 这两个节点只服务于窄屏行布局，宽屏隐藏 */
.tl-h .tl-rowtrack,
.tl-h .tl-item-time { display: none; }

/* "现在"标记：轴线 + 文字都挂在同一个 --pos 上 */
.tl-now { position: absolute; inset: 0; pointer-events: none; }
.tl-h .tl-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--danger);
  border-radius: 2px;
}
.tl-h .tl-now-text {
  position: absolute;
  top: -16px;
  left: var(--pos);
  transform: translateX(-50%);
  font-size: 10px;
  font-style: normal;
  color: var(--danger);
  white-space: nowrap;
  background: var(--bg-elevated);
  padding: 0 4px;
  border-radius: 4px;
}

.tl-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
}
.tl-legend-item { white-space: nowrap; }
/* 宽屏（.tl-h）的条带只有十几分钟宽，字放进去必然被裁（早餐尤其明显）：
   条带内不写任何文字，名字与区间由悬停提示 + 下面的图例承担。窄屏（.tl-v）
   的名字在条带左侧的固定列里，不受这条影响。 */
.tl-h .tl-item-label { display: none; }
/* 建议面板：折叠时只占一行，展开后才是列表；引文在最底下、比建议更弱一档。 */
.advice-panel {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raised);
}
.advice-panel > summary {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
}
.advice-panel > summary::-webkit-details-marker { display: none; }
.advice-panel > summary::before { content: "\25B8"; margin-right: 8px; font-size: 11px; }
.advice-panel[open] > summary { color: var(--text); border-bottom: 1px solid var(--border); }
.advice-panel[open] > summary::before { content: "\25BE"; }
.advice-panel .tips { margin: 0; padding: 12px 16px 0 30px; }
.advice-panel .quote-block {
  margin: 6px 16px 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.6;
}
.advice-panel .quote-block p { margin: 0; }
.advice-panel .quote-block cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 11.5px;
  opacity: 0.8;
}
.tl-legend-span { color: var(--text-soft); font-size: 11px; }

/* 小号变体：方案列表里每一天一条 */
.timeline-mini { gap: 8px; }
.timeline-mini .tl-track { height: 34px; }              /* 宽屏迷你轨道 */
.timeline-mini .tl-h .tl-axis { height: 22px; font-size: 10px; }
.timeline-mini .tl-axis-sleep { top: 12px; font-size: 9px; padding: 0 6px; }
.timeline-mini .tl-item-label { font-size: 10px; }
.timeline-mini .tl-icon { display: none; }
.timeline-mini .tl-h .tl-now-text { display: none; }
/* 窄屏迷你：同样是行列表，只是行更矮、名称列更窄、不重复时间区间 */
.timeline-mini .tl-v .tl-track { height: auto; gap: 3px; }
.timeline-mini .tl-v .tl-item { height: 18px; gap: 5px; }
.timeline-mini .tl-v .tl-item-label { width: 54px; }
.timeline-mini .tl-v .tl-rowtrack { height: 10px; }

.timeline-slot { margin-top: 12px; }
.timeline-slot.mini { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* ------------------------------ 今日卡片 ------------------------------ */

.today-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-color: rgba(79, 140, 255, 0.35);
}

.today-head h2 { margin: 0; }
.today-head .mono { font-size: 13px; }

/* 今日一天的时间轴：标题行 + 大号时间图 */
.today-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.today-actions .tiny { color: var(--text-soft); }

.today-timeline { display: flex; flex-direction: column; gap: 8px; }
.today-timeline .label { font-size: 12px; color: var(--text-muted); }

.today-meals { display: flex; flex-direction: column; gap: 8px; }
.today-meals .label { font-size: 12px; color: var(--text-muted); }

.today-meal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.today-meal {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.today-meal .tm-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.today-meal .tm-best { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.today-meal .tm-best strong { font-size: 20px; }
.today-meal .tm-best-label { font-size: 11px; color: var(--text-muted); }
.today-meal .tm-window {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.today-meal .tm-window strong { font-size: 12px; color: var(--text-soft); }

.checkin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.checkin-btn.active-ok {
  border-color: rgba(53, 196, 141, 0.6);
  color: var(--ok);
  background: rgba(53, 196, 141, 0.12);
  font-weight: 600;
}
.checkin-btn.active-skip {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-hover);
  font-weight: 600;
}
/* 「不想吃」会顺手把今天的午餐和晚餐一起提前，用醒目一点的底色把它和「跳过」分开 */
.checkin-btn.active-refused {
  border-color: rgba(240, 177, 55, 0.6);
  color: var(--warn);
  background: rgba(240, 177, 55, 0.12);
  font-weight: 600;
}

/* 点之前先看到结果：这行常驻在「不想吃」按钮下方 */
.today-meal .meal-preview { margin: 2px 0 0; color: var(--text-soft); }
/* 点下去的一瞬间时间就变了：闪一下 + 一行「旧 → 新」，2.6 秒后自己消失 */
.today-meal.tm-flash [data-best] { color: var(--accent); }
.today-meal .meal-moved { margin: 2px 0 0; color: var(--accent); font-weight: 600; }

/* 每日方案里的三餐速览（比今日卡片轻一档） */
.day-meals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.day-meal {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  font-size: 12px;
}
.day-meal .dm-name { color: var(--text-soft); }
.day-meal .dm-best { font-weight: 600; }
.day-meal .dm-window { color: var(--text-muted); font-size: 11px; }

/* ------------------------------ 提示条 / 偏离说明 ------------------------------ */

.notice {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--bg-elevated);
  font-size: 13px;
}
.notice-body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.notice-body p { flex: 1 1 240px; margin: 0; }
.notice-info { border-left-color: var(--accent); }
.notice-warn { border-left-color: var(--warn); }
.notice-danger { border-left-color: var(--danger); }

.deviation-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 4px;
}

.deviation-options { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.deviation-options .btn { justify-content: center; text-align: center; }

/* ------------------------------ 达标统计 / 表单折叠 ------------------------------ */

.adherence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

/* 折叠态整张卡不显示：展开入口是结果区的「重新生成方案」按钮（syncForm 切这个类） */
#advice-form.form-collapsed { display: none; }

/* ------------------------------ 参考文献弹窗 ------------------------------ */

.ref-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.ref-item {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.ref-item:last-child { border-bottom: none; padding-bottom: 0; }

.ref-line { margin: 0 0 6px; font-size: 13px; line-height: 1.5; }
.ref-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 6px;
  font-size: 12px;
}
.ref-links a { word-break: break-all; }
.ref-ids { color: var(--text-muted); font-size: 11px; font-family: var(--mono); }
.ref-summary {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-soft);
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.ref-note { margin: 16px 0 0; line-height: 1.6; }

.day-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.day-card .dc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.day-card .dc-times {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.day-time { display: flex; flex-direction: column; }
.day-time .label { font-size: 11px; color: var(--text-muted); }
.day-time .value { font-family: var(--mono); font-size: 20px; font-weight: 600; }
.day-times-arrow { color: var(--text-muted); font-size: 18px; }

.meal-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.meal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: 13px;
}
.meal-pill .m-time { font-family: var(--mono); font-weight: 600; }
.meal-pill.off { opacity: 0.5; text-decoration: line-through; }

.tips { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-soft); }
.tips li { margin: 2px 0; }

/* 日卡里的建议默认收成一行，点开就地展开（收起时列表整体不占位） */
.tips-fold { margin-top: 10px; }
.tips-fold .tips { margin-top: 8px; }
.tips-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-soft);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.tips-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.tips-caret { font-size: 11px; transition: transform 0.15s ease; }
.tips-toggle[aria-expanded="true"] .tips-caret { transform: rotate(90deg); }

.note-list { display: flex; flex-direction: column; gap: 6px; }
.note {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--bg-raised);
  border-left: 3px solid var(--border-strong);
}
.note.warn { border-left-color: var(--warn); }
.note.info { border-left-color: var(--accent); }

/* ------------------------------ 设置页 ------------------------------ */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
  align-items: start;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.setting-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.setting-line:last-child { border-bottom: none; }
.setting-line .label { font-size: 14px; }
.setting-line .hint { font-size: 12px; color: var(--text-muted); }

.danger-zone { border-color: rgba(242, 85, 90, 0.35); }
.danger-card { border-color: rgba(242, 85, 90, 0.35); }
.danger-card h2 { color: var(--danger); }

/* ------------------------------ 响应式 ------------------------------ */

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .advice-layout { grid-template-columns: 1fr; }
  .advice-layout #advice-form { position: static; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 250px;
    z-index: 60;
    transform: translateX(-102%);
    transition: transform 200ms ease;
    box-shadow: var(--shadow);
    height: 100vh;
  }
  .sidebar.open { transform: translateX(0); }
  .topbar { display: flex; }
  .page { padding: 16px 14px 60px; }
  .table-wrap { display: none; }
  .record-cards { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .page-head { margin-bottom: 14px; }
}

@media (min-width: 901px) {
  .sidebar-backdrop { display: none !important; }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 12, 0.5);
  z-index: 55;
}

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ------------------------------ 片段切换（模式 / 语言 / 主题） ------------------------------ */

.segment {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
}

.segment-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.segment-btn:hover { color: var(--text); background: var(--bg-hover); }

.segment-btn.active,
.segment-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ------------------------------ 建议摘要 / 信息列表 ------------------------------ */

.summary-lines { display: flex; flex-direction: column; gap: 6px; }

.summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.summary-line span { color: var(--text-soft); }
.summary-line strong { font-weight: 600; }

.info-list { display: flex; flex-direction: column; gap: 8px; }

.info-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.info-line:last-child { border-bottom: 0; padding-bottom: 0; }
.info-line span { color: var(--text-soft); }
.info-line strong { font-weight: 600; }

/* ------------------------------ 三餐图标 / 空态图标 ------------------------------ */

.m-icon { font-size: 15px; line-height: 1; }
.m-name { color: var(--text-soft); }

.empty-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .form-row { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }

  /* 窄屏时间图改纵向：两个变体都在 DOM 里，这里只切换显示哪一个 */
  .tl-h { display: none; }
  .tl-v { display: flex; flex-direction: column; gap: 6px; }
  .today-head h2 { font-size: 18px; }
  .page-foot { padding: 4px 14px 28px; }
}

@media (min-width: 901px) {
  /* 宽屏时生成表单固定在左侧，滚动看方案时始终可点 */
  .advice-layout #advice-form { position: sticky; top: 18px; }
}

/* ------------------------------ 内容区页脚（参考文献入口 + ICP 备案号） ------------------------------ */

.page-foot {
  padding: 4px 26px 28px;
  max-width: 1180px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

/* 备案号是法规要求的公示信息，任何语言下都显示中文原文，所以不挂 data-i18n */
.page-foot-icp {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.page-foot-icp:hover {
  color: var(--text);
  text-decoration: underline;
}

/* 大屏（宽显示器）：把内容上限跟着放宽，否则侧栏右边永远留一大片空白 */
@media (min-width: 1600px) {
  .page,
  .page-foot { max-width: 1440px; }
}


/* --- 步长曲线（建议页：横轴天数 / 纵轴累计移动分钟） --- */
.curve-wrap { position: relative; width: 100%; }
.curve-svg { display: block; width: 100%; height: auto; overflow: visible; }
.curve-svg .curve-grid-line { stroke: var(--border); stroke-width: 1; }
.curve-svg .curve-axis-text { fill: var(--text-soft); font-size: 11px; font-family: inherit; }
.curve-svg .curve-grid { font-variant-numeric: tabular-nums; }
.curve-svg .curve-fill-top { stop-color: var(--accent); stop-opacity: 0.26; }
.curve-svg .curve-fill-bottom { stop-color: var(--accent); stop-opacity: 0; }
.curve-svg .curve-area { fill: url(#curve-fill); }
.curve-svg .curve-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.curve-svg .curve-avg {
    fill: none;
    stroke: var(--text-soft);
    stroke-width: 1.2;
    stroke-dasharray: 5 5;
    opacity: 0.6;
}
.curve-svg .curve-dot { fill: var(--accent); }
.curve-svg .curve-dot.is-over { fill: var(--warn); }
.curve-svg .curve-hit { fill: transparent; }
.curve-svg .curve-point:hover .curve-dot { stroke: var(--bg); stroke-width: 2; }
.curve-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12.5px;
    color: var(--text-soft);
}
.curve-legend span { display: inline-flex; align-items: center; gap: 6px; }
.curve-legend .curve-key { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
.curve-legend .curve-key.is-avg {
    background: transparent;
    border-top: 2px dashed var(--text-soft);
    height: 0;
}

.curve-legend .curve-key.is-cap {
    background: transparent;
    border-top: 2px dotted var(--text-soft);
    height: 0;
}
.curve-svg .curve-cap {
    fill: none;
    stroke: var(--text-soft);
    stroke-width: 1.4;
    stroke-dasharray: 2 5;
    opacity: 0.7;
}
.curve-svg .curve-cap-mark {
    fill: var(--bg-raised);
    stroke: var(--text-soft);
    stroke-width: 1.4;
}
.curve-svg .curve-cap-label {
    fill: var(--text-soft);
    font-size: 11px;
    font-family: inherit;
}
.curve-svg .curve-point { cursor: pointer; outline: none; }
.curve-svg .curve-point.is-active .curve-dot { stroke: var(--bg); stroke-width: 2; }
.curve-svg .curve-point:focus-visible .curve-dot { stroke: var(--accent); stroke-width: 2; }
.curve-bubble {
    position: absolute;
    z-index: 3;
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--bg-raised);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, -100%);
    pointer-events: none;
}
.curve-bubble[hidden] { display: none; }
.curve-bubble.is-open { display: block; }
.curve-badge {
    padding: 1px 8px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 11.5px;
}
.day-card.is-linked { box-shadow: 0 0 0 2px var(--accent); }

.form-error {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  color: var(--warn);
  font-size: 13px;
}
.records-overview { gap: 12px; }
.records-overview.is-empty .ov-stats,
.records-overview.is-empty .ov-split { display: none; }
.ov-stats { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ov-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ov-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--bg-raised); border: 1px solid var(--border); }
.ov-tile .label { font-size: 12px; color: var(--text-soft); }
.ov-tile strong { font-size: 20px; }
.ov-tile strong.is-fast { color: var(--warn); }
.ov-split { display: grid; gap: 12px; }
@media (min-width: 1100px) { .ov-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.ov-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--border); }
.ov-title { font-size: 13px; font-weight: 600; }
.ov-lane { display: flex; flex-direction: column; gap: 4px; }
.ov-axis { position: relative; height: 16px; margin-left: 52px; }
.ov-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--text-soft); white-space: nowrap; }
.ov-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px; align-items: center; }
.ov-day { font-size: 11px; color: var(--text-soft); }
.ov-track { position: relative; height: 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.ov-band { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(79, 140, 255, 0.85), rgba(79, 140, 255, 0.45)); cursor: pointer; }
.ov-row:hover .ov-band { filter: brightness(1.15); }
.ov-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-soft); }
.ov-key { display: inline-flex; align-items: center; gap: 6px; }
.ov-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ov-swatch.is-band { background: rgba(79, 140, 255, 0.7); }
.ov-swatch.is-fast { background: var(--warn); }
.ov-pace { width: 100%; height: 96px; }
.ov-pace .ov-zero { stroke: currentColor; opacity: 0.25; stroke-width: 0.5; stroke-dasharray: 2 2; }
.ov-pace .ov-line { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.ov-pace .ov-dot { fill: var(--accent); }
.ov-pace .ov-dot.is-fast { fill: var(--warn); }
.ov-bars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 0 2px; }
.ov-ref { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--warn); opacity: 0.6; }
.ov-bar-wrap { position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; }
.ov-bar { width: 100%; max-width: 28px; border-radius: 5px 5px 0 0; background: rgba(79, 140, 255, 0.75); }
.ov-bar.is-short { background: rgba(240, 177, 55, 0.8); }
.ov-bar-day { margin-top: 4px; font-size: 10px; color: var(--text-soft); }
.ov-empty { margin: 0; font-size: 13px; color: var(--text-soft); }
#records-body tr.is-hot td { background: rgba(79, 140, 255, 0.14); }

/* 原生日期控件跟随主题：深色主题下系统日历面板也是深色的，图标略微提亮、悬停更明显。 */
input[type="date"] { color-scheme: dark; }
[data-theme="light"] input[type="date"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }

/* 自绘日期弹层（原生 input[type=date] 的日历无法改配色，故自己画） */
.date-native { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.date-field { display: flex; align-items: center; }
.date-field-btn { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.date-field-btn:hover { border-color: var(--border-strong); }
.date-field-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp { position: fixed; z-index: 99999; padding: 10px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-raised); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.dp-title { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; }
.dp-title:hover { background: rgba(127, 127, 127, 0.16); }
.dp-title .ic { width: 12px; height: 12px; color: var(--text-soft); }
.dp-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 2px 0 4px; }
.dp-month { padding: 10px 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.dp-month:hover { background: rgba(127, 127, 127, 0.18); }
.dp-month.is-current { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.dp-nav { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--text-soft); font-size: 15px; line-height: 1; cursor: pointer; }
.dp-nav:hover { color: var(--text); border-color: var(--border-strong); }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week span { padding: 2px 0; text-align: center; font-size: 11px; color: var(--text-soft); }
.dp-day { padding: 6px 0; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.dp-day:hover { background: rgba(127, 127, 127, 0.18); }
.dp-day.is-outside { color: var(--text-soft); opacity: 0.55; }
.dp-day.is-marked { background: var(--ok); color: #06130d; font-weight: 600; }
.dp-day.is-marked:hover { filter: brightness(1.08); }
.dp-day.is-marked-soft { background: rgba(53, 196, 141, 0.22); color: var(--ok); }
.dp-day.is-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.dp-day.is-disabled { color: var(--text-soft); opacity: 0.35; cursor: not-allowed; }

/* ------------------------------ 手机（≤620px） ------------------------------ */
/* 这一档才是手机真正吃到的排版：弹窗变成贴底抽屉、手指目标放大、原生日期筛选独占一行。
   320px 的窄屏也落在这一档里，所以尺寸都用 min()/百分比，不写死。 */
@media (max-width: 620px) {
  .app-shell { min-height: 100dvh; }

  .sidebar {
    width: min(320px, 86vw);
    height: 100dvh;
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .topbar { padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
  .page { padding: 14px 12px calc(28px + env(safe-area-inset-bottom)); }
  .page-foot { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

  /* 弹窗：贴底的抽屉。长表单在抽屉里滚动，保存/取消钉在底部，不用滚到屏幕外去找。 */
  .modal-host { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding: 18px 14px 0;
  }
  /* base.css 把弹窗做成竖向 flex，正文滚动、底栏天然常驻，这里只要把它摊满整行 */
  .modal .modal-foot {
    margin-top: 14px;
    margin-inline: -14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
  }
  .modal .modal-foot .btn { flex: 1; }
  .modal > [data-role="body"] { padding-bottom: 8px; }

  /* iOS 对字号 <16px 的输入框会在聚焦时放大整页（手机上"点一下页面就变大"的原因） */
  .input,
  textarea,
  select,
  .date-field-btn { font-size: 16px; }
  /* 日历里的标题和月份格不是输入框，不用跟着放大；手指目标靠高度撑 */
  .dp-title { font-size: 14px; }
  .dp-month { padding: 12px 0; font-size: 14px; }

  /* 圆筒时间：行高放大到 40px，手指拖起来更好对位 */
  .time-wheel { --drum-row: 40px; gap: 8px; padding: 6px 8px; }
  .time-drum { width: 62px; }
  .time-drum-item { font-size: 24px; }
  .time-wheel-foot { padding-left: 8px; }

  /* 手指目标：主要控件不低于 40px */
  .btn,
  .segment-btn,
  .nav-item,
  .icon-btn { min-height: 40px; }
  .icon-btn { width: 42px; height: 42px; }
  .segment-btn { padding: 8px 16px; }
  .nav-item { padding: 11px 12px; }

  /* 记录页的原生日期筛选：日期各占一行，搜索/重置两人一行 */
  .toolbar { flex-wrap: wrap; row-gap: 8px; }
  .toolbar .field { flex: 1 1 100%; min-width: 0; }
  .toolbar .btn { flex: 1 1 calc(50% - 5px); }
  .toolbar .grow { display: none; }
  .toolbar #records-total { flex: 1 1 100%; text-align: right; }

  /* 日期弹层别超出屏幕 */
  .dp { max-width: calc(100vw - 24px); }

  /* 建议页"今天"的三块：固定两列 + 第三块通栏，别让第三块孤零零缩在一列里换行 */
  .advice-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advice-summary .summary-cell:last-child { grid-column: 1 / -1; }
  .summary-line { flex-wrap: wrap; }
}

/* 320px 这类窄屏：记录卡顶部的日期和时长别折行，宁可字号小一号 */
@media (max-width: 380px) {
  .record-card .rc-head .mono { font-size: 12px; letter-spacing: -0.02em; white-space: nowrap; }
  .record-card .rc-times { flex-wrap: wrap; gap: 6px 10px; font-size: 15px; }
  .record-card .rc-times > span { white-space: nowrap; }
  .record-card .rc-times .badge { flex: none; white-space: nowrap; margin-left: auto; }
}

/* 程序替用户顺延了日期（起床日跟着入睡日）：按钮闪一下，提示这次变动 */
.date-field.is-flash .date-field-btn {
  animation: date-field-flash 0.9s ease-out;
}

@keyframes date-field-flash {
  0% {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  100% {
    border-color: var(--border);
    box-shadow: none;
  }
}