.statrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  padding: 6px 0 2px;
}
.statrow > div {
  background: rgba(115, 134, 112, 0.07);
  border: none;
  padding: 12px 4px;
}
.statrow .n {
  font-family: var(--serif);
  font-size: 27px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.statrow .lb {
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-top: 4px;
}
/* 连续专注条 */
.streak {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--sage);
  padding: 8px 0 2px;
}
.chart-hint {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-muted);
  opacity: 0.6;
  margin-top: 6px;
}
/* 心情分布 */
.mood-dist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mood-dist span {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-light);
  border: transparent;
  border-radius: 4px;
  background: rgba(115, 134, 112, 0.08);
  padding: 3px 10px;
}

/* 回顾竖线 */
.spans {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
  align-items: baseline;
}
.spans button {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  background: none;
  border: none;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 0 6px; /* 给下划线留位（原先靠 ::after 撑高度，会顺带把按钮撑宽） */
  position: relative; /* 下划线的定位锚 */
}
.spans button.on {
  color: var(--ink);
}
/* 下划线脱离文档流：绝不参与宽度计算，四个字就不会被推来推去 */
.spans button.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 14px;
  height: 1px;
  background: var(--sage);
}
.vchart {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  height: 104px;
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.vcol {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  height: 100%;
  padding: 0;
  position: relative;
}
.vcol .tip {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  white-space: nowrap;
  line-height: 1;
  margin-bottom: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.vcol .dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  
  /* 1：去掉实心背景，变成透明 */
  background: transparent; 
  
  /*2：用内阴影画出弯月（偏移量决定了月牙的胖瘦和朝向） */
  /* -2px -1px 表示阴影从右下方往左上方推，形成右下缺口的残月 */
  box-shadow: inset -2px -1px 0 0 var(--sage); 
  transform: rotate(-3deg);
  
  opacity: 1;
  flex: none;
  margin-bottom: 0;
  
  /* 3：把过渡属性从 background 换成 box-shadow */
  transition:
    opacity 0.18s,
    box-shadow 0.18s;
}
.vcol .dot::after {
  display: none;
}
.vcol .line {
  width: 1.5px;
  background: var(--hairline);
  opacity: 1;
  flex: none;
  transition:
    height 0.2s,
    background 0.2s,
    opacity 0.18s;
}
.vcol .lbl {
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
  min-height: 10px;
  line-height: 10px;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
}
.vcol.sel .tip {
  opacity: 0.75;
}

.vcol.sel .line {
  opacity: 0.9;
  background: var(--sage-dark);
}
.vcol.zero {
  cursor: default;
}
.vcol.zero .lbl {
  opacity: 0.45;
}

.core {
  margin-top: 0;
  animation: fadein 0.4s ease;
}
.core .cap {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--sage);
  padding-bottom: 4px;
}

.core .rows {
  margin-top: 10px;
}
.core .r {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: none;
  cursor: pointer;
}
.core .r:hover .g {
  color: var(--sage);
}
.core .r .g {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
}
.core .r .v {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-muted);
}

/* 回顾 · 导航翻页 + 竖线图 */
.snav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 6px 0 12px;
}
.snav .nbtn {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.snav .nbtn:hover:not(:disabled) {
  color: var(--ink);
}
.snav .nbtn:disabled {
  opacity: 0.2;
  cursor: default;
}
.snav span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-light);
  min-width: 120px;
  text-align: center;
}

#st-detail {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 64px; /* 贴在 tabbar 上方 */
  width: 100%;
  max-width: 560px;
  background: var(--paper);
  border-radius: 10px 10px 0 0;
  border-top: 1px solid rgba(115, 134, 112, 0.2);
  box-shadow: 
    0 -2px 6px rgba(115, 134, 112, 0.08),
    0 -12px 28px rgba(115, 134, 112, 0.03);
  padding: 14px 26px 18px;
  z-index: 55;
  max-height: 46vh;
  overflow-y: auto;
}
/* 无内容（点同一柱子再点一下收起）时自动隐藏 */
#st-detail:empty {
  display: none;
}
/* 点击某格后展开的详情块 */
#st-detail .core {
  padding: 14px 4px 4px;

  animation: fadein 0.3s ease;
}
#st-detail .core .cap {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--sage);
  padding-bottom: 1px; /* cap（时间戳标题）与下方正文收近：只留 1px */
}
#st-detail .core .rows {
  margin-top: 2px; /* 标题与目标行间收近（原 8px → 2px） */
}
/* 第一行不该再吃 8px 的 padding-top —— 否则「时间戳 → 第一行文字」的视觉间距还是偏大 */
#st-detail .core .rows .r:first-child {
  padding-top: 2px;
}
#st-detail .core .r {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  
  cursor: pointer;
}
/* 新增：只有非最后一项才显示下划线 */
#st-detail .core .r:not(:last-child) {
  border-bottom: 1px solid var(--hairline-subtle);
}
#st-detail .core .r:hover .g {
  color: var(--sage);
}
#st-detail .core .r .g {
  font-family: var(--serif);
  font-size: 15px;
}
#st-detail .core .r .v {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-muted);
}

/* 日视图 · 横向时间轴（对齐原版 Sleep-Tracker 风格） */
.cal-tl {
  width: 100%;
}
/* 日视图横向滚动：横轴就是 00:00 → 24:00（24 小时）。
   --tl-w 是「1 小时 = 48px」换算出来的总宽；想缩放只改这一个数。
   跨午夜的记录会伸出右边界，滑过去就能看到（只是被挡住，没有裁掉）。 */
.cal-tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.cal-tl-inner {
  width: var(--tl-w, 1152px);
}
/* 修改日视图轨道的布局和边距，对齐周/月/年视图 */
.cal-tl-track {
  position: relative;
  height: 80px; /* 拉高轨道，使其与 .vchart 的 104px 比例接近 */

  margin: 0; /* 清除默认负边距/下推 */
}


.cal-tl-block {
  position: absolute;
  top: 6px;
  bottom: 6px;
  background: var(--sage);
  opacity: 0.5;
  border-radius: 4px;
  cursor: pointer;
  min-width: 2px;
}
.cal-tl-block:hover {
  background: var(--sage-dark);
}
.cal-tl-block.sel {
  background: var(--sage-dark);
  opacity: 1;
}
/* 调整时间刻度文字的外边距，使其与 .vchart .lbl 的 margin-top: 5px 对齐 */
.cal-tl-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-top: 5px; /* 与 .vcol .lbl 保持一样的边距 */
}
/* 月/年 柱间收紧 */
#st-chart.vchart {
  margin-top: 2px;
}
/* 日视图：轨道高度跟着车道数走，不能被 .vchart 的 104px 截断 */
#st-chart.is-timeline {
  height: auto;
}
/* 空态：整段无记录时一句“这里没有专注记录”，贴在横轴上方 */
#st-chart .st-empty {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
/* =========================================
   月度热力图专属样式
   ========================================= */
.vchart.is-heatmap {
  display: block;
  height: auto;
  border-bottom: none;
  padding-top: 0;
}
.heatmap-calendar {
  width: 100%;
  max-width: 230px; /* 【新增】限制最大宽度，方块就会变小啦（数字越小方块越小，比如改成 240px） */
  margin: 0 auto;   /* 让它在卡片里居中显示 */
}
.weekdays, .days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.weekdays {
  margin-bottom: 6px;
}
.weekdays span {
  text-align: center;
  font-family: var(--sans);
  font-size: 9px;
  color: var(--ink-muted);
}
.day-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #edefec; /* 空白底色 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 9px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.day-cell.empty {
  background-color: transparent;
  pointer-events: none;
  color: transparent;
}

/* 选中某天时的边框 */
.day-cell.sel {
  box-shadow: inset 0 0 0 1px var(--sage);
}
/* 颜色阶梯 (借用了你原本的 sage 绿色调) */
.day-cell.level-1 { background-color: #d4e8d4; color: #2e7d32; }
.day-cell.level-2 { background-color: #a9d18e; color: #fff; }
.day-cell.level-3 { background-color: #70ad47; color: #fff; }
.day-cell.level-4 { background-color: var(--sage-dark, #548235); color: #fff; }