/* ===========================================================
   日历样式（从 theme2.css 拆出）
   ------------------------------------------------------------
   为什么要拆：theme2.css 里日历规则占了近一半，.ax-scroll 有 28 处、
   .cal-wrap 有 44 处定义，后写的覆盖先写的 —— 排查时看到的永远是
   「最后一条生效」，极易误判。

   拆法：只把「选择器全部属于日历」的规则整块搬到这里，
        **保持它们在原文件里的相对顺序**（层叠结果不变）；
        混了通用选择器的规则留在 theme2.css 不动。

   加载顺序：必须在 theme2.css 之后（要用它定义的
   --glass / --glass-line / --ink / --green 等变量）。

   ⚠️ 改样式前先在这里搜选择器。文件末尾有一段「最终生效值（收口）」，
   关键布局都写在那里，不要再往中间插规则。
   =========================================================== */

.cd-chip {
  padding: 2px 9px;
  font-size: 11px; color: #fff;
  background: var(--red);
  border-radius: 9px;
}

/* ---------------- 日历视图 ---------------- */
.cal-hd7 {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 6px;
}
.cal-hd7 div { text-align: center; font-size: 11px; color: var(--ink-4); padding: 3px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  aspect-ratio: 1 / .92;
  padding: 6px 7px;
  background: var(--glass-hi);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--r-sm);
  text-align: left;
  transition: background .12s;
  overflow: hidden;
}
.cal-cell:hover { background: rgba(255,255,255,.14); }
.cal-cell.out { opacity: .3; }
.cal-cell.today { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.13); }
.cal-d { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-cell.today .cal-d { color: #fff; font-weight: 500; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.cal-dot { width: 4px; height: 4px; border-radius: 50%; }
.cal-mn { font-size: 10px; color: var(--ink-5); margin-top: 3px; }

/* 倒计时行 */
.cd-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0;
  font-size: 12px; color: var(--ink-2);
}
.cd-row + .cd-row { border-top: 1px solid var(--glass-line-2); }
.cd-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-d { flex-shrink: 0; font-size: 11.5px; color: var(--amber); }
.cd-colors { display: flex; gap: 6px; }
.cd-colors button {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: transform .12s;
}
.cd-colors button:hover { transform: scale(1.12); }
.cd-colors button.on { border-color: #fff; }

.cd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
}
.cd-item + .cd-item { border-top: 1px solid var(--glass-line-2); }
.cal-hd { flex-wrap: wrap; row-gap: 8px; }
.cal-wrap {
  flex: 1; min-height: 0;
  display: flex; gap: 12px;
  max-width: 1180px; width: 100%;
  margin: 10px auto 0;
  padding: 0 24px 24px;
}
.cal-wrap > .view-body {
  flex: 1; min-width: 0; max-width: none;
  margin: 0; padding: 0;
}
.cal-wrap > .view-body.nopad { padding: 0; gap: 0; }

/* ---------------- 时间轴 ---------------- */
.ax {
  position: relative;
  height: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.ax-gutter {
  position: absolute; left: 0; top: 0; right: 0; height: 26px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid var(--glass-line-2);
}
.ax-heads {
  position: absolute; left: 44px; right: 0; top: 0; height: 26px;
  display: flex; z-index: 3;
}
.ax-col-hd {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; color: var(--ink-2);
  border-left: 1px solid var(--glass-line-2);
}
.ax-col-hd b { font-weight: 500; color: var(--ink-2); }
.ax-col-hd.today { background: rgba(78,122,58,.2); }
.ax-col-hd.today b { color: #8FC46A; }

.ax-hours {
  position: absolute; left: 0; top: 26px; bottom: 0;
  width: 44px; z-index: 2;
  background: rgba(0,0,0,.12);
}
.ax-h {
  position: absolute; left: 0; right: 0;
  height: 0;
}
.ax-h span {
  position: absolute; right: 6px; top: -6px;
  font-size: 10px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.ax-grid {
  position: absolute; left: 44px; right: 0; top: 26px; bottom: 0;
  overflow-y: auto;
  --ax-cw: calc((100% - 0px) / 7);
}
.ax-col {
  position: absolute; top: 0; bottom: 0;
  width: var(--ax-cw);
  left: calc(var(--ax-cw) * var(--i, 0));
  border-left: 1px solid var(--glass-line-2);
}
/* 用 nth-child 定位更稳 */
.ax-grid { background-image:
  repeating-linear-gradient(180deg,
    rgba(255,255,255,.06) 0 1px,
    transparent 1px 44px); }

.ax-item {
  position: absolute;
  width: calc(var(--ax-cw) - 5px);
  margin-left: 3px;
  padding: 3px 5px;
  border: 1px solid;
  border-left-width: 2.5px;
  border-radius: 5px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex; flex-direction: column; gap: 1px;
}
.ax-item:active { cursor: grabbing; }
.ax-t {
  font-size: 10.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ax-time {
  font-size: 8.5px; opacity: .75;
  font-variant-numeric: tabular-nums;
}
.ax-grip {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px; cursor: ns-resize;
}
.ax-grip::after {
  content: ''; position: absolute; left: 50%; bottom: 1px;
  transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 1px;
  background: currentColor; opacity: .4;
}

.ax-now {
  position: absolute; left: 0; right: 0;
  height: 0;
  border-top: 1.5px dashed var(--red);
  z-index: 6; pointer-events: none;
}
.ax-now::before {
  content: ''; position: absolute; left: -3px; top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
}
.cg-head {
  flex-shrink: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 5px; margin-bottom: 7px;
}
.cg-h { text-align: center; font-size: 11px; color: var(--ink-4); }
.cg-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(74px, 1fr);
  gap: 5px;
}
.cg-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 8px;
  text-align: left;
  background: var(--glass-hi);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--r-sm);
  transition: background .13s;
  overflow: hidden;
}
.cg-cell:hover { background: rgba(255,255,255,.14); }
.cg-cell.out { opacity: .32; }
.cg-cell.today { border-color: rgba(78,122,58,.55); background: rgba(78,122,58,.15); }
.cg-cell.ghost { border-style: dashed; opacity: .6; }
.cg-n { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cg-cell.today .cg-n { color: #8FC46A; font-weight: 500; }
.cg-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.cg-bar i { display: block; height: 100%; background: var(--green-hi); border-radius: 2px; }
.cg-m { font-size: 10px; color: var(--ink-4); }
.cg-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; }
.cg-dot { width: 4px; height: 4px; border-radius: 50%; }
.cg-none {
  margin-top: auto;
  font-size: 9.5px; color: var(--ink-5);
}

/* ---------------- 右侧回顾 ---------------- */
.cal-side {
  flex-shrink: 0; width: 236px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 15px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}
.cs-hd { display: flex; flex-direction: column; gap: 2px; }
.cs-t { font-size: 13px; font-weight: 500; color: #fff; }
.cs-s { font-size: 10.5px; color: var(--ink-5); font-variant-numeric: tabular-nums; }
.cs-stat {
  display: flex; align-items: baseline; gap: 4px;
  padding: 9px 11px;
  background: var(--glass-hi);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--r-sm);
  font-size: 11px; color: var(--ink-4);
}
.cs-stat b { font-size: 17px; font-weight: 500; color: #fff; }
.cs-u { font-size: 10px; color: var(--ink-5); }
.cs-k { flex: 1; }
.cs-sep { width: 1px; height: 12px; background: var(--border-strong); }
.cs-habits { display: flex; flex-direction: column; gap: 5px; }
.cs-hb {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11px; color: var(--ink-2);
}
.cs-hb span:first-child { flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-hb b { font-size: 13px; font-weight: 500; color: #fff; }
.cs-pie { margin: 2px 0; }
.cs-btn {
  height: 30px;
  font-size: 11.5px; color: var(--ink-2);
  background: var(--glass-hi);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--r-sm);
}
.cs-btn:hover { background: rgba(255,255,255,.15); }
.cs-btn.go { color: #fff; background: var(--green); border-color: transparent; }
.cs-btn.go:hover { background: var(--green-hi); }

@media (max-width: 860px) {
  .cal-wrap { flex-direction: column; padding: 0 14px 16px; }
  .cal-side { width: 100%; }
  .ax-item .ax-time { display: none; }
}
.ax-floats {
  position: absolute; left: 44px; right: 0; top: 26px;
  display: flex; height: 0; z-index: 4;
  pointer-events: none;
}
.ax-float {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 3px;
  pointer-events: auto;
}
.ax-ftask {
  padding: 3px 6px;
  font-size: 10.5px; color: var(--ink-2);
  background: rgba(255,255,255,.13);
  border: 1px dashed var(--glass-line-2);
  border-radius: 5px;
  cursor: grab;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ax-ftask:hover { background: rgba(255,255,255,.22); color: #fff; }
.ax-ftask:active { cursor: grabbing; }
.ax-fmore {
  font-size: 9.5px; color: var(--ink-5);
  padding-left: 6px;
}

/* 有浮动任务的列，刻度线从下方开始，避免和任务卡重叠 */
.ax.has-float .ax-h:first-child span { margin-top: 0; }

/* 时间轴工具栏图标与文字垂直居中（之前靠上） */
.cal-hd { align-items: center; }
.cal-hd .btn { align-self: center; }
.cal-hd .view-title { line-height: 1.4; }

/* 浮动任务：贴在各自日期那一列顶部，不再横穿整行 */
.ax-floats {
  position: absolute; left: 44px; right: 0; top: 26px;
  display: flex; height: 0; z-index: 5;
  pointer-events: none;
}
.ax-float {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 3px 3px 0;
  pointer-events: auto;
  /* 限制高度，超出显示 +N，避免把整个表头撑爆 */
  max-height: 84px;
  overflow: hidden;
}
.ax-ftask {
  padding: 3px 6px;
  font-size: 10.5px; line-height: 1.35;
  color: var(--ink-2);
  background: rgba(255,255,255,.14);
  border: 1px dashed var(--glass-line-2);
  border-radius: 5px;
  cursor: grab;
  /* 内容完整可见：两行截断而不是一行挤成省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
.ax-ftask:hover { background: rgba(255,255,255,.24); color: #fff; }
.ax-ftask:active { cursor: grabbing; }
.ax-fmore {
  font-size: 9.5px; color: var(--ink-5);
  padding-left: 6px; flex-shrink: 0;
}
/* 有浮动任务的列，刻度起点下移，别和卡片重叠 */
.ax-col.has-float .ax-item { }

/* 浮动任务改为绝对定位 + --i，与列严格对齐（覆盖上面的 flex 版本） */
.ax-floats {
  position: absolute; left: 44px; right: 0; top: 26px;
  height: 0; z-index: 6;
  pointer-events: none;
}
.ax-float {
  position: absolute;
  top: 0;
  width: calc(var(--ax-cw) - 6px);
  margin-left: 3px;
  left: calc(var(--ax-cw) * var(--i, 0));
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 3px;
  pointer-events: auto;
  max-height: 88px;
  overflow: hidden;
}
.ax-fmore {
  font-size: 9.5px; color: var(--ink-5);
  padding: 1px 6px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.ax-fmore:hover { color: #fff; background: rgba(255,255,255,.18); }
/* 浮动任务所在列，刻度线从下方起，别和卡片重叠 */
.ax-grid.has-float { }
.ax-ftask { touch-action: none; }          /* 让 pointermove 在触摸上不滚页 */
.ax-ftask.dragging { opacity: .3; }

.ax-ghost {
  position: fixed;
  z-index: 900;
  max-width: 190px;
  padding: 5px 9px;
  font-size: 11.5px; color: #fff;
  background: var(--green);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ax-dropzone {
  position: absolute;
  z-index: 7;
  border: 1.5px dashed var(--green-hi);
  border-radius: 6px;
  background: rgba(78,122,58,.18);
  pointer-events: none;
}
.ax {
  --ax-cw: calc((100% - 0px) / 7);
  /* 网格上方留出浮动任务的高度 */
  --ax-float-h: 0px;
}
.ax-grid {
  --ax-cw: calc((100% - 0px) / 7);
}

/* 浮动任务与列对齐（绝对定位，--i 由 JS 写） */
.ax-floats {
  position: absolute;
  left: 44px; right: 0;
  top: calc(26px + var(--ax-float-h, 0px));
  height: 0;
  z-index: 6;
  pointer-events: none;
}
.ax-float {
  position: absolute;
  top: 0;
  width: calc(var(--ax-cw) - 5px);
  margin-left: 2px;
  left: calc(var(--ax-cw) * var(--i, 0));
  display: flex; flex-direction: column; gap: 2px;
  pointer-events: auto;
}
.ax-ftask {
  padding: 3px 6px;
  font-size: 10.5px; line-height: 1.35;
  color: var(--ink-2);
  background: rgba(255,255,255,.15);
  border: 1px dashed var(--glass-line-2);
  border-radius: 5px;
  cursor: grab;
  touch-action: none;
  /* 两行截断，长任务名也能看清 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
.ax-ftask:hover { background: rgba(255,255,255,.26); color: #fff; }
.ax-ftask:active { cursor: grabbing; }
.ax-ftask.dragging { opacity: .3; }
.ax-fmore {
  font-size: 9.5px; color: var(--ink-5);
  padding: 1px 6px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}
.ax-fmore:hover { color: #fff; background: rgba(255,255,255,.2); }

/* 网格内容整体下移，给浮动任务腾位置 */
.ax.has-float .ax-grid { top: calc(26px + var(--ax-float-h, 0px)); }
.ax-scroll {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 让刻度列跟着一起滚 */
  scrollbar-width: thin;
}
.ax-scroll::-webkit-scrollbar { width: 5px; }
.ax-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 3px;
}
.ax-scroll::-webkit-scrollbar-track { background: transparent; }

/* grid 在 scroll 容器内：left 缩进留给刻度列，宽度 100% */
.ax-scroll .ax-grid {
  position: relative;      /* 相对滚动容器 */
  left: 44px;
  right: auto;
  width: calc(100% - 44px);
  top: 0;
  bottom: auto;
  overflow: visible;       /* 滚动交给父级 .ax-scroll */
  min-height: 100%;
}

/* 刻度列改成 sticky，随横向固定但不随纵向滚走 */
.ax-hours {
  position: absolute;
  left: 0;
  top: calc(26px + var(--ax-float-h, 0px));
  bottom: 0;
  width: 44px;
  z-index: 3;
  background: var(--glass-2);
  border-right: 1px solid var(--glass-line-2);
}
.ax-gutter {
  position: absolute; left: 0; top: 0; right: 0;
  height: 26px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid var(--glass-line-2);
  z-index: 5;
}
.ax-heads {
  position: absolute; left: 44px; right: 0;
  top: var(--ax-float-h, 0px);
  height: 26px;
  display: flex; z-index: 5;
  background: var(--glass-2);
}

/* 工具栏：周/月、翻页、日期、按钮 全部同一基线 */
.cal-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.cal-hd > * { flex-shrink: 0; align-self: center; }
.cal-hd .seg { display: inline-flex; align-items: center; }
.cal-hd .seg button {
  height: 28px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-hd .icon-nav {
  width: 28px; height: 28px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.cal-hd .btn {
  height: 28px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
}
.cal-hd .view-title {
  font-size: 15px; line-height: 28px;   /* 与 28px 控件对齐 */
  margin: 0;
}
.ax-heads {
  position: absolute;
  left: 44px; right: 0;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}
.ax-floats {
  top: var(--ax-float-h, 0px);
  height: auto;
  z-index: 6;
}
.ax-heads {
  top: 0;
  height: 26px;
  z-index: 5;
  pointer-events: auto;
}

/* 列头：一列一个 flex:1 */
.ax-col-hd {
  flex: 1 1 0;
  min-width: 0;
  height: 26px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; color: var(--ink-2);
  border-left: 1px solid var(--glass-line-2);
}
.ax-col-hd b { font-weight: 500; color: var(--ink-2); }
.ax-col-hd.today { background: rgba(78,122,58,.2); }
.ax-col-hd.today b { color: #8FC46A; }
.ax-float {
  position: static;      /* 关键：不再 absolute 定位 */
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  left: auto;
  margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 3px 3px 0;
  pointer-events: auto;
}
.ax-scroll .ax-grid {
  position: relative;
  left: 44px;
  width: calc(100% - 44px);
  min-height: 100%;
}
.ax-scroll .ax-grid .ax-col {
  position: absolute;
  top: 0; bottom: 0;
  width: 14.2857%;
  border-left: 1px solid var(--glass-line-2);
}
.ax-scroll .ax-grid .ax-item {
  position: absolute;
  width: calc(14.2857% - 5px);
  margin-left: 3px;
  padding: 3px 5px;
  border: 1px solid;
  border-left-width: 2.5px;
  border-radius: 5px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex; flex-direction: column; gap: 1px;
}
/* 网格背景线：每小时一条 */
.ax-scroll .ax-grid {
  background-image: repeating-linear-gradient(180deg,
    rgba(255,255,255,.06) 0 1px,
    transparent 1px 44px);
}
/* seg 外壳有边框导致比同级高 2px，去掉边框改用内部分隔 */
.cal-hd .seg {
  border: none;
  background: transparent;
  padding: 0;
  gap: 4px;
  height: 28px;
  align-items: center;
}
.cal-hd .seg button {
  border: 1px solid var(--glass-line-2);
  background: var(--glass-hi);
}
.cal-hd .seg button.on {
  border-color: transparent;
}
.ax-floats {
  position: absolute;
  left: 44px; right: 0;
  top: 26px;                 /* 紧贴列头下方，不随 floatH 移动 */
  display: flex;
  align-items: flex-start;
  z-index: 6;
  pointer-events: none;
  height: var(--ax-float-h, 0px);
  overflow: hidden;
}
.ax-scroll {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
/* 表头 + 浮动任务区 = 滚动区顶部偏移 */
.ax-scroll[style] { top: calc(26px + var(--ax-float-h, 0px)); }
.ax-scroll::-webkit-scrollbar { width: 5px; }
.ax-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18); border-radius: 3px;
}
/* 刻度列与滚动区顶部对齐 */
.ax-hours {
  position: absolute;
  left: 0;
  top: calc(26px + var(--ax-float-h, 0px));
  bottom: 0;
  width: 44px;
  z-index: 4;
  background: var(--glass-2);
  border-right: 1px solid var(--glass-line-2);
}
/* 浮动任务容器：一列一个，不绝对定位 */
.ax-float {
  position: static;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  left: auto;
  margin: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 4px 3px 0;
  pointer-events: auto;
}
/* 空列不占视觉 */
.ax-float.empty { padding-top: 0; }

/* 工具栏：整体下移一点，视觉居中，不要贴着上一行 */
.cal-hd {
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding-top: 2px;
  margin-bottom: 4px;
}
.cal-hd .btn { height: 30px; }
.cal-hd .view-title { line-height: 30px; }
.cal-hd .seg { height: 30px; }
.cal-hd .seg {
  margin-bottom: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: 4px;
}
.cal-hd .seg button {
  flex: 0 0 auto;
  padding: 0 12px;
  height: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-side {
  width: 216px;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
}

.cs-sec {
  background: var(--glass-hi);
  border: 1px solid var(--glass-line-2);
  border-radius: var(--r-md);
  padding: 10px 11px 11px;
}
.cs-hd {
  font-size: 11.5px; color: var(--ink-2);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.cs-n {
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 9.5px; color: #fff;
  background: var(--green);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-hint {
  margin-top: 7px; padding-top: 7px;
  font-size: 10px; color: var(--ink-5);
  border-top: 1px solid var(--glass-line-2);
}

/* ---------- 迷你月历 ---------- */
.mc-wk, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mc-wk { margin-bottom: 3px; }
.mc-wk span {
  font-size: 9px; color: var(--ink-5);
  text-align: center;
}
.mc-b { height: 22px; }
.mc-d {
  position: relative;
  height: 22px;
  font-size: 10.5px; color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: background .12s;
}
.mc-d:hover { background: rgba(255,255,255,.1); }
.mc-d.in { background: rgba(255,255,255,.07); color: #fff; }
.mc-d.today {
  background: var(--green);
  color: #fff; font-weight: 500;
  border-color: transparent;
}
.mc-dot {
  position: absolute; bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%;
}
.mc-d.today .mc-dot { background: #fff !important; }

/* ---------- 今日清单 ---------- */
.cl-list { display: flex; flex-direction: column; gap: 5px; }
.cl-row {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cl-row:hover { background: rgba(255,255,255,.13); border-color: var(--glass-line-2); }
.cl-bar {
  width: 2.5px; align-self: stretch;
  min-height: 22px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cl-t {
  flex: 1; min-width: 0;
  font-size: 11px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-m {
  flex-shrink: 0;
  font-size: 9.5px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.cl-empty {
  font-size: 10.5px; color: var(--ink-5);
  padding: 10px 0; text-align: center;
}

/* ---------- 本周概览 ---------- */
.cs-stat { display: flex; flex-direction: column; gap: 5px; }
.cs-r {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  font-size: 10.5px; color: var(--ink-4);
}
.cs-r b {
  font-weight: 500; color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- 移动端：侧栏改为横向条 ---------- */
@media (max-width: 860px) {
  .cal-side { width: 100%; flex-direction: row; overflow-x: auto; }
  .cs-sec { min-width: 190px; flex-shrink: 0; }
}
.ax-ftask {
  display: flex; align-items: flex-start; gap: 5px;
  user-select: none;
  -webkit-user-select: none;
}
.ax-fchk {
  flex-shrink: 0;
  width: 12px; height: 12px;
  margin-top: 2px;
  border: 1.4px solid var(--border-strong);
  border-radius: 3px;
  background: rgba(0,0,0,.2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ax-fchk:hover { background: rgba(255,255,255,.28); }
.ax-fchk.busy { opacity: .5; pointer-events: none; }
.ax-ftxt {
  flex: 1; min-width: 0;
  /* 两行截断，别让卡片高度跳动 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
  line-height: 1.35;
}
.ax-float {
  /* 高度由内容撑开，但 overflow:hidden + 固定 gap，避免抖动 */
  gap: 3px;
}
.ax-floats { will-change: height; }
.ax-ftask.grabbing {
  opacity: .32;
  transform: none;             /* 不要 scale，缩放会引发抖动 */
  transition: opacity .1s;
  pointer-events: none;        /* 让 window 收事件更稳 */
}
.ax-ftask.grabbing { cursor: grabbing; }

/* 幽灵卡跟随时更明确 */
.ax-ghost {
  transform: rotate(-1.2deg) scale(1.02);
  opacity: .95;
}
.ct-list { display: flex; flex-direction: column; gap: 4px; }
.ct-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: grab;
  transition: background .12s, border-color .12s;
}
.ct-row:hover { background: rgba(255,255,255,.13); border-color: var(--glass-line-2); }
.ct-row:active { cursor: grabbing; }
.ct-row.dragging { opacity: .32; pointer-events: none; }
.ct-chk {
  flex-shrink: 0;
  width: 13px; height: 13px;
  border: 1.4px solid var(--border-strong);
  border-radius: 3px;
  background: rgba(0,0,0,.2);
  cursor: pointer;
  transition: background .12s;
}
.ct-chk:hover { background: rgba(255,255,255,.3); }
.ct-chk.busy { opacity: .5; pointer-events: none; }
.ct-txt {
  flex: 1; min-width: 0;
  font-size: 11px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-kind {
  flex-shrink: 0;
  font-size: 8.5px; color: var(--ink-5);
  padding: 1px 5px;
  background: rgba(0,0,0,.2);
  border-radius: 7px;
}
.ct-more {
  flex-shrink: 0;
  width: 16px; height: 16px;
  font-size: 12px; line-height: 1;
  color: var(--ink-5);
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  cursor: pointer;
}
.ct-more:hover { background: rgba(255,255,255,.18); color: #fff; }

/* 拖拽落点的时间标签 —— 让用户看得见拖到了几点 */
.ax-dztime {
  position: absolute;
  z-index: 8;
  font-size: 9.5px; color: #fff;
  text-align: center;
  background: var(--green);
  border-radius: 4px;
  padding: 1px 0;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* .ax-hours 只做左侧 44px 底板，不再放刻度 */
.ax-hours {
  position: absolute;
  left: 0; top: 26px; bottom: 0;
  width: 44px;
  z-index: 4;
  background: var(--glass-2);
  border-right: 1px solid var(--glass-line-2);
  pointer-events: none;
}

/* 刻度线：在滚动容器内，宽度覆盖整个网格 */
.ax-scroll .ax-h {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid var(--glass-line-2);
  pointer-events: none;
}
.ax-scroll .ax-h span {
  position: absolute;
  left: 5px;
  top: -13px;
  font-size: 9.5px;
  color: var(--ink-5);
  background: var(--glass-2);
  padding-right: 4px;
  line-height: 1;
}

/* 整点线加重，半点线减淡 —— 层次更清楚 */
.ax-scroll .ax-h:nth-child(odd) { border-top-color: var(--glass-line-2); }

/* 去掉 grid 的背景重复渐变，改由 .ax-h 画线，避免双重叠加 */
.ax-scroll .ax-grid { background-image: none; }

/* 竖线：列分隔线贯穿整个高度 */
.ax-scroll .ax-grid .ax-col {
  position: absolute;
  top: 0; bottom: 0;
  width: 14.2857%;
  border-left: 1px solid var(--glass-line-2);
  pointer-events: none;
}
.cs-rev {
  border-color: rgba(78,122,58,.4);
  background: linear-gradient(180deg, rgba(78,122,58,.10), rgba(255,255,255,.02));
}
.cs-sub {
  font-size: 9.5px; color: var(--ink-5);
  margin: -4px 0 8px;
}
.cs-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  margin-left: auto;
}
.cs-dot.off { background: var(--ink-5); opacity: .6; }

.cs-lbl {
  font-size: 9px; color: var(--ink-5);
  margin: 9px 0 4px;
}
.cs-kw {
  font-size: 11px; color: #fff;
  padding: 4px 7px;
  background: rgba(0,0,0,.22);
  border-radius: 5px;
  line-height: 1.4;
}

/* 三个小方块：任务 / 习惯 / 花销 */
.cs-cards { display: flex; gap: 4px; }
.cs-c {
  flex: 1; min-width: 0;
  padding: 5px 4px;
  border-radius: 6px;
  text-align: center;
}
.cs-c span { display: block; font-size: 8px; opacity: .75; }
.cs-c b {
  display: block;
  font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.cs-ul {
  margin: 0; padding-left: 14px;
  font-size: 10px; color: var(--ink-2);
  line-height: 1.6;
}
.cs-focus {
  font-size: 10.5px; color: #fff;
  padding: 4px 7px;
  background: rgba(209,149,72,.2);
  border-left: 2px solid var(--green-hi);
  border-radius: 0 5px 5px 0;
  line-height: 1.45;
}

.cs-btn {
  width: 100%;
  height: 30px;
  margin-top: 11px;
  font-size: 11.5px; color: #fff;
  background: var(--green);
  border: none; border-radius: 6px;
  transition: background .12s;
}
.cs-btn:hover { background: var(--green-hi); }
.cs-btn.ghost {
  background: rgba(255,255,255,.1);
  border: 1px solid var(--glass-line-2);
}
.cs-btn.ghost:hover { background: rgba(255,255,255,.18); }
.cs-btn:disabled { opacity: .5; }

/* 空状态统一 */
.cs-empty {
  font-size: 10.5px; color: var(--ink-5);
  padding: 14px 0; text-align: center;
}
.cal-wrap { gap: 16px; }
.cal-side {
  width: 248px;                 /* 216 → 248 */
  padding-right: 6px;           /* 别贴着右边缘 */
}
.cs-sec {
  padding: 12px 13px 13px;
  border-radius: 10px;
}
/* 月历格子跟着变宽，数字更透气 */
.mc-d { height: 26px; font-size: 11.5px; border-radius: 6px; }
.mc-b { height: 26px; }
.mc-wk span { font-size: 9.5px; }
.mc-grid, .mc-wk { gap: 3px; }

/* 回顾卡片里的数字别挤 */
.cs-c { padding: 7px 5px; }
.cs-c b { font-size: 13px; }
.cs-btn { height: 32px; font-size: 12px; }

@media (max-width: 1180px) {
  .cal-side { width: 218px; }
}
.cd-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
  align-content: start;
  padding-bottom: 20px;
}
.cd-row.mini { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.cd {
  background: #fff;
  border: 1px solid #E4E1DC;
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cd.today { border-color: #CFE4D6; box-shadow: 0 0 0 1.5px #CFE4D6; }
.cd.empty { background: #FCFBF9; border-style: dashed; border-color: #EDEAE5; }

/* 照片区：自动填顶部 */
.cd-photos {
  height: 94px;
  background: #F7F5F1;
  display: grid;
  gap: 2px;
  overflow: hidden;
  position: relative;
}
.cd-photos.empty {
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #EFEDE9;
}
.cd-no-pic { font-size: 10.5px; color: #C8C2B8; }
.cd-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-photos:has(.big) { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.cd-photos img.big { grid-row: span 2; }
.cd-pn {
  position: absolute; right: 6px; bottom: 6px;
  padding: 1px 7px; border-radius: 9px;
  font-size: 9.5px; color: #fff;
  background: rgba(0,0,0,.5);
}

/* 头部 */
.cd-hd {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 6px;
}
.cd-d { font-size: 12px; font-weight: 500; color: #2C2C2A; }
.cd-w { font-size: 10px; color: #8B8499; }
.cd-badge {
  font-size: 8.5px; color: #fff;
  background: #4E7A3A; border-radius: 8px;
  padding: 1px 7px;
}
.cd-mood { font-size: 13px; margin-left: auto; }
.cd-open {
  margin-left: auto;
  width: 20px; height: 20px;
  font-size: 11px; color: #B9B2A8;
  background: transparent; border: none; border-radius: 5px;
  cursor: pointer;
}
.cd-mood + .cd-open { margin-left: 0; }
.cd-open:hover { background: rgba(0,0,0,.06); color: #5F5E5A; }

/* 折叠行：习惯 / 今日任务 */
.cd-fold {
  display: flex; align-items: center; gap: 6px;
  margin: 0 10px 6px;
  padding: 6px 8px;
  font-size: 10px; color: #5F5E5A;
  background: #F7F5F1;
  border: 1px solid #EFEDE9;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.cd-fold:hover { background: #F1EFEB; }
.cd-fold.tk { background: #FFFDF7; border-color: #F0E6D2; }

.cd-fold-body {
  margin: 0 10px 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.cd-fold-body[hidden] { display: none; }

/* 汇总 */
.cd-sum {
  margin: 0 10px 8px;
  font-size: 10px; color: #A8A49C;
}
.cd-sum b { color: #3E3D3A; font-weight: 500; }

/* 竖向时间轴 */
.cd-tl {
  margin: 0 10px 6px;
  padding-left: 34px;
  position: relative;
}
.cd-tl.empty {
  padding-left: 10px;
  font-size: 10px; color: #B9B2A8;
}

/* 空日 */
.cd-none {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 22px 10px;
  font-size: 10px; color: #C8C2B8;
}
.cd-write {
  font-size: 10px; color: #FF5A5F;
  background: #fff;
  border: 1px solid #F0D8D4;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.cd-write:hover { background: #FFF5F3; }
.gl-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-content: start;
  padding-bottom: 20px;
}
.gl-strip {
  height: 110px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  margin-bottom: 9px;
}
.gl-strip:has(> img:nth-child(1):last-child) { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.gl-strip.empty {
  display: flex; align-items: center; justify-content: center;
  background: #F7F5F1;
  border: 1px dashed #E4E1DC;
  color: #C8C2B8; font-size: 10.5px;
}
.gl-strip img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.gl-strip img:hover { filter: brightness(1.08); }

.gl-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.gl-t { font-size: 13px; font-weight: 500; color: #2C2C2A; }
.gl-r { font-size: 9.5px; color: #8B8499; }

.gl-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 5px; }
.gl-stats span { font-size: 10px; color: #A8A49C; }
.gl-stats b { color: #3E3D3A; font-weight: 500; font-variant-numeric: tabular-nums; }

.gl-hab { font-size: 10px; color: #A8A49C; margin-bottom: 9px; }
.gl-hab b { color: #3E3D3A; font-weight: 500; }

.gl-acts { display: flex; gap: 6px; }
.gl-btn {
  flex: 1;
  height: 28px;
  font-size: 10.5px; color: #fff;
  background: #4E7A3A;
  border: none; border-radius: 6px;
  cursor: pointer;
}
.gl-btn:hover { background: #5A8A3E; }
.gl-btn.ghost {
  background: #F7F5F1;
  border: 1px solid #E4E1DC;
  color: #5F5E5A;
}
.gl-btn.ghost:hover { background: #F1EFEB; }

.gl-days {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #EFEDE9;
}
.gl-days[hidden] { display: none; }

/* 移动端 */
@media (max-width: 860px) {
  .cd-row, .gl-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* 卡片 / 画廊：单列铺满 */
.cal-wrap.no-side {
  display: block;
  max-width: none;
  padding: 0 20px 24px;
}
.cal-wrap.no-side > .view-body {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  padding: 0;
}
.cal-wrap.no-side > .cal-side { display: none; }

/* 卡片网格：一行放得下几张就放几张 */
.cd-row, .gl-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-content: start;
  width: 100%;
}
.cd-row.mini, .gl-days.cd-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* 视口窄时（笔记本 1280）至少两列 */
@media (max-width: 900px) {
  .cd-row, .gl-row { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
.cd.empty .cd-photos.empty { height: 22px; }
.cd.empty .cd-none { padding: 20px 10px 24px; }
.cd:not(.empty) .cd-photos { height: 94px; }

/* 空日的照片占位更轻 */
.cd-photos.empty {
  background: transparent;
  border-bottom: 1px solid #F0EDE8;
}
.cd-no-pic { font-size: 9.5px; color: #D8D2C8; }
.cal-wrap.no-side { padding: 0 20px 24px; }

.cd-row, .gl-row {
  display: grid;
  /* 竖列：一周七行 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-flow: row;
  gap: 12px;
  align-content: start;
  width: 100%;
}

/* ---- 玻璃拟态配色（对齐主页 .card / .view-body 的底色） ---- */
.cd {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  color: var(--ink);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cd.today {
  border-color: rgba(78,122,58,.55);
  box-shadow: 0 0 0 1px rgba(78,122,58,.35), 0 2px 12px rgba(0,0,0,.18);
}
.cd.empty {
  background: var(--glass);
  border-style: solid;
  border-color: var(--glass-line);
}

/* 照片区 */
.cd-photos { background: rgba(0,0,0,.22); }
.cd.empty .cd-photos.empty {
  background: transparent;
  border-bottom: 1px solid var(--glass-line);
}
.cd-no-pic { color: var(--ink-5); }
.cd-pn { background: rgba(0,0,0,.55); }

/* 文字 */
.cd-d { color: var(--ink); }
.cd-w { color: var(--ink-4); }
.cd-open { color: var(--ink-5); }
.cd-open:hover { background: rgba(255,255,255,.1); color: var(--ink-2); }

/* 折叠行 */
.cd-fold {
  background: rgba(255,255,255,.05);
  border-color: var(--glass-line);
  color: var(--ink-2);
}
.cd-fold:hover { background: rgba(255,255,255,.1); }
.cd-fold.tk { background: rgba(209,149,72,.1); border-color: rgba(209,149,72,.28); }
.cd-fold-body { background: transparent; }

/* 汇总 */
.cd-sum { color: var(--ink-5); }
.cd-sum b { color: var(--ink); }

/* 空态 */
.cd-none { color: var(--ink-5); }
.cd-write {
  background: rgba(255,255,255,.06);
  border-color: var(--glass-line-2);
  color: var(--pink, #FF7A6B);
}
.cd-write:hover { background: rgba(255,255,255,.12); }
.gl-strip { background: rgba(0,0,0,.22); }
.gl-strip.empty {
  background: rgba(0,0,0,.16);
  border-color: var(--glass-line);
  color: var(--ink-5);
}
.gl-t { color: var(--ink); }
.gl-r { color: var(--ink-4); }
.gl-stats span { color: var(--ink-5); }
.gl-stats b { color: var(--ink); }
.gl-hab { color: var(--ink-5); }
.gl-hab b { color: var(--ink-2); }
.gl-btn { background: var(--green); color: #fff; }
.gl-btn:hover { background: var(--green-hi); }
.gl-btn.ghost {
  background: rgba(255,255,255,.07);
  border-color: var(--glass-line-2);
  color: var(--ink-2);
}
.gl-btn.ghost:hover { background: rgba(255,255,255,.13); }
.gl-days { border-top-color: var(--glass-line); }

/* 侧栏回顾的紧凑块 */
.cs-mini { margin-top: 2px; }
.cs-mini .cs-empty { padding: 10px 0 8px; }
.gl-days, .gl-weeks, .gw-days {
  overflow-x: hidden;
  max-width: 100%;
}
.gl-days.cd-row, .gw-days.cd-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .gl-days.cd-row, .gw-days.cd-row { grid-template-columns: minmax(0, 1fr); }
}

/* 月卡展开出来的周卡 */
.gl-weeks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.gw-strip {
  height: 58px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.gw-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gw-strip.empty {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.18);
  color: var(--ink-5); font-size: 10px;
}
.gw-hd {
  display: flex; align-items: baseline; gap: 7px;
  margin-bottom: 5px;
}
.gw-hd b { font-size: 12px; color: var(--ink); }
.gw-hd span { font-size: 9.5px; color: var(--ink-5); }
.gw-stats {
  font-size: 10px; color: var(--ink-5);
  margin-bottom: 8px;
}
.gw-stats b { color: var(--ink-2); font-weight: 500; }
.gw-btn {
  display: inline-block;
  height: 25px;
  padding: 0 11px;
  margin-right: 5px;
  font-size: 10px;
  color: #fff;
  background: var(--green);
  border: none; border-radius: 5px;
  cursor: pointer;
}
.gw-btn:hover { background: var(--green-hi); }
.gw-btn.ghost {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-line-2);
  color: var(--ink-2);
}
.gw-btn.ghost:hover { background: rgba(255,255,255,.13); }
.gw-btn:disabled { opacity: .5; }
.gw-days {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--glass-line);
}
.gw-days[hidden] { display: none; }

.cal-wrap.no-side {
  display: block;
  max-width: none;
  padding: 0 20px 28px;
}
.cal-wrap.no-side > .view-body {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;      /* 让整页滚，不要内部再套一层 */
  padding: 0;
}
.cal-wrap.no-side > .cal-side { display: none; }
.cal-wrap.no-side .cd-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  width: 100%;
}
@media (max-width: 1500px) {
  .cal-wrap.no-side .cd-row { gap: 8px; }
}
@media (max-width: 860px) {
  .cal-wrap.no-side .cd-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 画廊的展开区仍用 2 列（7 张挤一行太窄） */
.cal-wrap.no-side .cd-row.mini {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 卡片/画廊：内容撑开整页高度 */
.cal-wrap.no-side {
  display: block;
  max-width: none;
  padding: 0 20px 32px;
  min-height: 100%;
}
.cal-wrap.no-side > .view-body {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 0;
}

/* 七列一行，卡片顶端对齐（内容多的卡片不把整行拉高） */
.cal-wrap.no-side .cd-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 10px;
  align-content: start;
  width: 100%;
}
.cal-wrap.no-side .cd-row > .cd { align-self: start; }

@media (max-width: 1280px) {
  .cal-wrap.no-side .cd-row { gap: 8px; }
}
@media (max-width: 1080px) {
  .cal-wrap.no-side .cd-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cal-wrap.no-side .cd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cal-wrap.no-side .cd-row.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal-wrap.no-side .cd-row { gap: 8px; }

.cal-wrap.no-side .cd .hb-i {
  flex-wrap: wrap;
  gap: 3px 5px;
  padding: 5px 6px;
  row-gap: 3px;
}
.cal-wrap.no-side .cd .hb-i .hb-e { font-size: 12px; }
.cal-wrap.no-side .cd .hb-i .hb-k {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  line-height: 1.2;
}
.cal-wrap.no-side .cd .hb-i .hb-in {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 1px;
}
.cal-wrap.no-side .cd .hb-i .hb-unit {
  position: absolute;
  right: 12px;
  margin-top: 2px;
}
.cal-wrap.no-side .cd .hb-i { position: relative; }

/* 心情面板铺满整行 */
.cal-wrap.no-side .cd .hb-moods {
  width: 100%;
  gap: 4px;
  padding: 4px 0 2px;
}
.cal-wrap.no-side .cd .hb-m { width: 26px; height: 26px; }

/* 卡片内边距略减，七列才不显挤 */
.cal-wrap.no-side .cd-hd { padding: 7px 8px 5px; }
.cal-wrap.no-side .cd-fold { margin: 0 8px 5px; }
.cal-wrap.no-side .cd-fold-body { margin: 0 8px 5px; }
.cal-wrap.no-side .cd-sum { margin: 0 8px 7px; }
.cal-wrap.no-side .cd-tl { margin: 0 8px 5px; padding-left: 32px; }
.cal-wrap.no-side .cd-tl.empty { padding-left: 8px; }
.cal-wrap.no-side .tl-t { left: -32px; width: 28px; }
.ax {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
}

/* 列头：与网格同宽同起点，保证对齐 */
.ax-heads {
  position: absolute;
  left: 44px; right: 0; top: 0;
  height: 26px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  z-index: 3;
  background: var(--glass-2);
  border-bottom: 1px solid var(--glass-line);
}
.ax-col-hd {
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  font-size: 10.5px; color: var(--ink-4);
  border-left: 1px solid var(--glass-line-2);
}
.ax-col-hd.today { background: rgba(78,122,58,.22); color: #CFEBB4; }
.ax-col-hd b { font-weight: 600; color: var(--ink-2); }
.ax-col-hd.today b { color: #CFEBB4; }

/* 网格滚动区：列头下方 */
.ax-scroll {
  position: absolute;
  left: 44px; right: 0;
  top: 26px; bottom: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 1;
}
.ax-scroll::-webkit-scrollbar { width: 6px; }
.ax-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 3px;
}
.ax-scroll::-webkit-scrollbar-track { background: transparent; }

.ax-scroll .ax-grid {
  position: relative;
  /* .ax-scroll 自己已经 left:44px（让开刻度列），
     网格在这个容器里，必须 left:0 —— 之前又写了 44px，
     结果整体右移 44px，列头和网格永远对不齐。 */
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-image: none;   /* 横线由 .ax-h 画 */
}

/* 七列：百分比定位，与列头严格对齐 */
.ax-scroll .ax-grid .ax-col {
  position: absolute;
  top: 0; bottom: 0;
  width: calc(100% / 7);
  border-left: 1px solid var(--glass-line-2);
  pointer-events: none;
}
.ax-scroll .ax-grid .ax-col:first-of-type { border-left: none; }

/* 色块在列内定位 */
.ax-scroll .ax-grid .ax-item {
  position: absolute;
  z-index: 2;
  border-radius: 6px;
  overflow: hidden;
}

/* 左侧刻度列（盖在网格左边 44px 上） */
.ax-hours {
  position: absolute;
  left: 0; top: 26px; bottom: 0;
  width: 44px;
  z-index: 4;
  background: var(--glass-2);
  border-right: 1px solid var(--glass-line);
  pointer-events: none;
}
.ax-scroll .ax-h {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid var(--glass-line-2);
  pointer-events: none;
  z-index: 1;
}
.ax-scroll .ax-h span {
  position: absolute;
  left: 0; top: -13px;
  width: 44px;
  text-align: center;
  font-size: 9.5px; color: var(--ink-5);
  line-height: 1;
  background: var(--glass-2);
}
.ax-now { position: absolute; left: 0; right: 0; height: 0;
  border-top: 1.5px solid #C05746; z-index: 5; pointer-events: none; }
.cal-side {
  width: 248px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;                 /* 关键：允许在 flex 里收缩 */
  overflow: hidden;
  padding-right: 6px;
}

/* 迷你月历：固定高，不参与伸缩 */
.cal-side > .cs-sec:first-child {
  flex: 0 0 auto;
}

/* 待排任务：吃掉所有剩余高度 */
.cal-side > .cs-sec:nth-child(2) {
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

/* 任务列表占满剩余、内部滚动 */
.cal-side .ct-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 -3px;
  padding: 0 3px;
}
.cal-side .ct-wrap::-webkit-scrollbar { width: 5px; }
.cal-side .ct-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14); border-radius: 3px;
}
.cal-side .ct-wrap::-webkit-scrollbar-track { background: transparent; }

/* 空态居中显示 */
.cal-side .ct-empty { flex: 1; display: flex; align-items: center; }

/* 任务行：稍微加大，铺满更耐看 */
.cal-side .ct-row { padding: 7px 8px; }
.cal-side .ct-txt { font-size: 11px; }
.cal-wrap:not(.no-side) {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.cal-wrap:not(.no-side) > .view-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0; min-height: 0;
  height: auto;
}
.cal-wrap:not(.no-side) > .view-body > .ax {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cal-side {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.cal-side > .cs-sec:first-child {
  flex: 0 0 auto;
  padding: 10px 11px 11px;
}
.cal-side > .cs-sec:nth-child(2) {
  flex: 1 1 auto;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 月历压紧 */
.cal-side .mc-b { height: 21px; font-size: 10.5px; border-radius: 5px; }
.cal-side .mc-wk { gap: 2px; }
.cal-side .cs-hd { margin-bottom: 6px; font-size: 11px; }

/* 待排任务：标题固定，列表吃掉剩余并内部滚动 */
.cal-side > .cs-sec:nth-child(2) .cs-hd { flex: 0 0 auto; }
.cal-side .ct-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 -3px;
  padding: 0 3px;
}
.cal-side .cs-hint { flex: 0 0 auto; margin-top: 7px; }
.cd-hb {
  display: flex; align-items: center; gap: 6px;
  margin: 0 8px 6px;
  padding: 5px 6px 5px 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-line);
  border-radius: 6px;
}
.cd-hb-sum {
  flex: 1; min-width: 0;
  font-size: 10px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-hb-btn {
  flex-shrink: 0;
  height: 21px; padding: 0 9px;
  font-size: 10px; color: #fff;
  background: var(--green);
  border: none; border-radius: 5px;
  cursor: pointer;
}
.cd-hb-btn:hover { background: var(--green-hi); }

/* ===========================================================
   最终生效值（收口）
   ------------------------------------------------------------
   日历规则搬到本文件后优先级整体抬高，这里集中写「必须生效」的最终值。
   以后改样式就改这一段，不要再往文件中间插 —— 否则又会回到
   「同一个类十几处定义、只能靠试」的老路。

   ⚠️ 特别注意：多选择器写跨行时，末尾那个逗号后面必须紧跟
   同组的其它选择器。否则浏览器会做「错误恢复」，
   把下一条不相关的规则接上来（实测把 .mc-grid 接成了 display:flex）。
   =========================================================== */

/* ---- 侧栏：迷你月历压紧 + 待排任务铺满剩余 ---- */
.cal-side { height: 100%; min-height: 0; overflow: hidden; }
.cal-side > .cs-sec:first-child { flex: 0 0 auto; padding: 10px 11px 11px; }
.cal-side > .cs-sec:nth-child(2) {
  flex: 1 1 auto; min-height: 100px;
  display: flex; flex-direction: column; overflow: hidden;
}
.cal-side .mc-d,
.cal-side .mc-b {
  height: 21px; font-size: 10.5px; border-radius: 5px;
}
.cal-side .mc-grid,
.cal-side .mc-wk { gap: 2px; }
.cal-side .cs-hd { margin-bottom: 6px; font-size: 11px; }
.cal-side > .cs-sec:nth-child(2) .cs-hd { flex: 0 0 auto; }
.cal-side .ct-wrap {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  margin: 0 -3px; padding: 0 3px;
}
.cal-side .cs-hint { flex: 0 0 auto; margin-top: 7px; }

/* ---- 时间轴：列头与七列严格对齐 ---- */
/* .ax-scroll 已 left:44px（让开刻度列），网格在它内部必须 left:0 */
.ax-scroll .ax-grid { left: 0; }
.ax-scroll .ax-grid .ax-col { width: calc(100% / 7); }

/* ---- 滚动：时间轴内部滚，卡片/画廊整页滚 ---- */
#view-calendar { min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; }
#view-calendar.cal-mode-axis { overflow: hidden; }

/* ===========================================================
   时间轴：刻度必须是独立的左侧一列
   ------------------------------------------------------------
   之前的结构：.ax-scroll left:44px（让开刻度），刻度线放在
   .ax-scroll 内部、left:0 —— 于是刻度文字落在 x=119，正好压在
   周一列上（用户反馈「时间轴在周一这一列」）。

   改成：整个网格从 x=0 开始，**第一列 44px 是刻度列**，
   七列日期从 44px 之后平分。列头同步。
   这样刻度和日期彻底分开，互不遮挡。
   =========================================================== */

.ax {
  --ax-hour-w: 46px;          /* 左侧刻度列宽 */
  --ax-cols: 7;
}

.ax-heads {
  left: var(--ax-hour-w); right: 0; top: 0;
  height: 26px;
  display: grid;
  grid-template-columns: repeat(var(--ax-cols), minmax(0, 1fr));
  z-index: 3;
  background: var(--glass-2);
  border-bottom: 1px solid var(--glass-line);
}

/* 滚动区从最左开始，刻度列包含在内部 */
.ax-scroll {
  left: 0; right: 0;
  top: 26px; bottom: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 1;
}

.ax-scroll .ax-grid {
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-image: none;
}

/* 七列：从刻度列之后开始平分 */
.ax-scroll .ax-grid .ax-col {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--ax-hour-w) + var(--i) * (100% - var(--ax-hour-w)) / var(--ax-cols));
  width: calc((100% - var(--ax-hour-w)) / var(--ax-cols));
  border-left: 1px solid var(--glass-line-2);
  pointer-events: none;
}
.ax-scroll .ax-grid .ax-col:first-of-type { border-left: 1px solid var(--glass-line-2); }

/* 横线铺满整个网格（含刻度列下方，视觉更连贯） */
.ax-scroll .ax-h {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid var(--glass-line-2);
  pointer-events: none;
  z-index: 1;
}
/* 刻度文字：贴左侧刻度列，居中 */
.ax-scroll .ax-h span {
  position: absolute;
  left: 0;
  top: -12px;
  width: var(--ax-hour-w);
  text-align: center;
  font-size: 9.5px;
  color: var(--ink-5);
  line-height: 1;
  background: var(--glass-2);
}

/* 左侧刻度列底板：现在盖在网格最左侧 46px 上 */
.ax-hours {
  position: absolute;
  left: 0; top: 26px; bottom: 0;
  width: var(--ax-hour-w);
  z-index: 4;
  background: var(--glass-2);
  border-right: 1px solid var(--glass-line);
  pointer-events: none;
}

/* 色块：同样从刻度列之后开始 */
.ax-scroll .ax-grid .ax-item {
  position: absolute;
  z-index: 2;
  border-radius: 6px;
  overflow: hidden;
}

/* 当前时刻红线 */
.ax-now {
  position: absolute;
  left: var(--ax-hour-w); right: 0;
  height: 0;
  border-top: 1.5px solid #C05746;
  z-index: 5;
  pointer-events: none;
}

/* 列头第一列左侧留出刻度宽度 */
.ax-heads::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--ax-hour-w));
  top: 0; bottom: 0;
  width: var(--ax-hour-w);
  background: var(--glass-2);
  border-right: 1px solid var(--glass-line);
}

/* 色块定位：由 --i 驱动，与网格列严格同一套算法 */
.ax-scroll .ax-grid .ax-item {
  left: calc(var(--ax-hour-w) + var(--i) * (100% - var(--ax-hour-w)) / var(--ax-cols) + 2px);
  width: calc((100% - var(--ax-hour-w)) / var(--ax-cols) - 4px);
}

/* ===========================================================
   卡片里的番茄钟数量行
   （只报数量，详情去「专注」页看 —— 与主页今日流水一致）
   =========================================================== */
.cd-pomo {
  display: flex; align-items: center; gap: 5px;
  margin: 0 8px 5px;
  padding: 4px 8px;
  font-size: 10px; color: var(--ink-2);
  background: rgba(78,122,58,.13);
  border: 1px solid rgba(78,122,58,.28);
  border-radius: 6px;
}
.cd-pomo b {
  color: #CFEBB4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================
   视图切换按钮：宽度塌成 0 的修复
   ------------------------------------------------------------
   症状：日历顶部看不到「时间轴 / 卡片 / 画廊」切换按钮。
   原因：theme2 的 `.seg button { flex: 1 }` —— 按钮在
   `display:inline-flex` 的 `.cal-hd .seg` 里，父容器按内容收缩，
   flex:1 没有可分配的空间，按钮全被压成 0 宽。
   （`#calGal` 虽然 hidden，但仍参与 flex 布局，也被压成 0。）

   修法：给 .cal-hd 里的 seg 明确宽度行为 —— 容器不收缩、按钮用固定 padding。
   =========================================================== */
.cal-hd {
  flex-wrap: wrap;
  align-items: center;
}
.cal-hd > .seg {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;    /* 之前漏了这条，导致容器被压到 4px */
  margin: 0;
  padding: 2px;
  gap: 2px;
}
.cal-hd > .seg[hidden] { display: none; }
.cal-hd > .seg button {
  flex: 0 0 auto;          /* 关键：不要 flex:1 */
  width: auto;
  min-width: 56px;
  padding: 0 12px;
  height: 28px;
  line-height: 1;
  white-space: nowrap;
}

/* ===========================================================
   画廊 = 周回顾 / 月回顾
   =========================================================== */
.rv-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  align-content: start;
  width: 100%;
}

.rv {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.rv.cur { border-color: rgba(78,122,58,.5); box-shadow: 0 0 0 1px rgba(78,122,58,.25); }
.rv.done .rv-none { color: var(--ink-4); }

/* 顶部：标题 + 照片条 */
.rv-top { padding: 11px 12px 0; }
.rv-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.rv-t { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.rv-badge {
  font-size: 8.5px; color: #fff;
  background: var(--green);
  border-radius: 8px; padding: 1px 7px;
}
.rv-r { font-size: 10px; color: var(--ink-5); margin-left: auto; }

.rv-strip {
  height: 96px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 2px; border-radius: 7px; overflow: hidden;
  position: relative;
  margin: 0 -12px;
}
.rv-strip img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.rv-strip img:hover { filter: brightness(1.08); }
.rv-strip.empty {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.16);
  color: var(--ink-5); font-size: 10.5px;
}

/* 主体：左正文 + 右数据 */
.rv-main {
  display: flex; gap: 12px;
  padding: 11px 12px 12px;
  flex: 1;
}
.rv-body { flex: 1; min-width: 0; }
.rv-side {
  width: 108px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 5px;
}

.rv-l { font-size: 9px; color: var(--ink-5); margin-bottom: 3px; }
.rv-kw {
  font-size: 11px; color: var(--ink);
  padding: 4px 7px;
  background: rgba(255,255,255,.06);
  border-radius: 5px; line-height: 1.4;
}
.rv-ul {
  margin: 0; padding-left: 14px;
  font-size: 10px; color: var(--ink-2); line-height: 1.6;
}
.rv-fo {
  font-size: 10.5px; color: var(--ink);
  padding: 4px 7px;
  background: rgba(209,149,72,.14);
  border-left: 2px solid #D19548;
  border-radius: 0 5px 5px 0;
  line-height: 1.45;
}
.rv-sec { margin-bottom: 9px; }
.rv-none {
  font-size: 10.5px; color: var(--ink-5);
  padding: 16px 0; text-align: center;
}

.rv-c {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 8px;
  background: rgba(255,255,255,.05);
  border-radius: 5px;
}
.rv-c span { font-size: 9px; color: var(--ink-5); }
.rv-c b {
  font-size: 11.5px; color: var(--ink);
  font-weight: 500; font-variant-numeric: tabular-nums;
}

.rv-btn {
  margin-top: auto;
  height: 30px;
  font-size: 11px; color: #fff;
  background: var(--green);
  border: none; border-radius: 6px;
  cursor: pointer;
}
.rv-btn:hover { background: var(--green-hi); }
.rv-btn.ghost {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glass-line-2);
  color: var(--ink-2);
}
.rv-btn.ghost:hover { background: rgba(255,255,255,.13); }
.rv-btn:disabled { opacity: .5; }

@media (max-width: 1080px) {
  .rv-row { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ===========================================================
   切换按钮最终修复
   ------------------------------------------------------------
   `.view-hd` 是 flex 容器 + gap:6px，末尾 `#calNewBlock` 有
   `margin-left:auto`，它会把前面所有兄弟元素往左挤 ——
   `.seg` 没有 flex-shrink:0，被压到只剩边框宽度（实测 4px）。

   关键：flex-shrink 的默认值是 1，容器空间不够时
   所有可收缩项按比例缩小。必须显式设 0。
   =========================================================== */
.view-hd > .seg {
  flex: 0 0 auto !important;
  width: auto;
  min-width: max-content;
  display: inline-flex;
  margin: 0;
  padding: 2px;
  gap: 2px;
}
.view-hd > .seg[hidden] { display: none !important; }
.view-hd > .seg button {
  flex: 0 0 auto !important;
  width: auto;
  min-width: 52px;
  padding: 0 12px;
  height: 28px;
  line-height: 1;
  white-space: nowrap;
}
.view-hd .icon-nav,
.view-hd .btn,
.view-hd .view-title { flex: 0 0 auto; }

/* ===========================================================
   切换按钮最终方案：显式宽度，不依赖 max-content
   ------------------------------------------------------------
   症状：#calMode 只有 4px（按钮跑到 left=608，容器 right=128）。
   试过 min-width:max-content —— 在 flex 容器里会算出
   「按钮内容宽度」但容器本身按 0 收缩，结果按钮溢出到外面。

   可靠做法：直接给容器一个固定宽度（3 个按钮 × 68px + padding）。
   按钮用 padding 定宽、flex-shrink:0，两者都不参与内容计算。
   =========================================================== */
.view-hd > .seg#calMode { width: 216px; }     /* 3 × 68 + 3 × 2 + 4 */
.view-hd > .seg#calGal  { width: 148px; }     /* 2 × 68 + 2 × 2 + 4 */

.view-hd > .seg {
  flex: 0 0 auto;
  display: flex;
  margin: 0;
  padding: 2px;
  gap: 2px;
  min-width: 0;                /* 关键：别用 max-content */
  width: auto;
  overflow: visible;
}
.view-hd > .seg[hidden] { display: none; }
.view-hd > .seg button {
  flex: 0 0 auto;
  width: 68px;
  min-width: 0;
  padding: 0;
  height: 28px;
  line-height: 1;
  white-space: nowrap;
  font-size: 12px;
}

/* ===========================================================
   切换按钮：强制重置定位
   ------------------------------------------------------------
   实测按钮 computed position = fixed、transform = matrix(...,-34,14)，
   但遍历 styleSheets 找不到任何 position/transform 规则，
   内联 style 也是空的 —— 说明是某个祖先的 containing block
   让 fixed 相对它定位（元素被移到视口固定点 left=606）。

   保险做法：直接 !important 强制回到正常流内。
   =========================================================== */
.view-hd > .seg,
.view-hd > .seg button {
  position: static !important;
  transform: none !important;
  translate: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}
.view-hd > .seg#calMode { width: 216px; }
.view-hd > .seg#calGal  { width: 148px; }

/* ===========================================================
   切换按钮：opacity 归位
   ------------------------------------------------------------
   实测按钮 rect 正常（126,202,68×28）、position=static，
   但 computed opacity = 0 —— 完全透明，所以「看不见」。
   来源不明（可能是某条淡入动画的初始帧没被触发）。

   保险：显式设 opacity:1 和 visibility:visible。
   =========================================================== */
.view-hd > .seg,
.view-hd > .seg button {
  opacity: 1 !important;
  visibility: visible !important;
  color: var(--ink-2) !important;
}
.view-hd > .seg button.on {
  color: #fff !important;
}

/* ===========================================================
   切换按钮：pointer-events 修复
   ------------------------------------------------------------
   实测 computed pointer-events = none —— 按钮完全不可点，
   elementFromPoint 命中的是容器而不是按钮。
   来源不明（找不到对应规则），直接 !important 强制。
   =========================================================== */
.view-hd > .seg,
.view-hd > .seg button {
  pointer-events: auto !important;
  cursor: pointer;
}
.view-hd > .seg#calMode { width: 148px; }   /* 2 × 68 + gap 2 + padding 4 */