/* ==========================================================================
   微迹 Weetrack — 看板组件样式
   ========================================================================== */

/* ==========================================================================
   1. 顶部四个快捷信息框
   --------------------------------------------------------------------------
   它们是**独立的网格组件**（默认各占 3 列 × 2 行），
   所以卡片必须撑满所在的网格单元，不能写死宽高。
   ========================================================================== */
.stat-card {
  position: relative;
  /* 撑满看板格子：宽高都由网格决定 */
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: var(--r-md);
  padding: 12px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: pointer;
  text-align: left;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 网格里的小卡片字号放大一点：空间比原来宽裕 */
.stat-card.stat-square .stat-value {
  font-size: 26px;
}
.stat-card.stat-square .stat-label {
  font-size: 12.5px;
}
.stat-card.stat-square .stat-list {
  margin-top: 3px;
}
.stat-card.stat-square .stat-list span {
  font-size: 11.5px;
  line-height: 1.5;
}

/* ---------- 窄屏 ----------
   窄屏时看板本身会退化成纵向堆叠，每张卡片占满整行，
   所以这里不需要再特殊处理宽度 —— 卡片已经 width: 100% 了。
   只把内边距收一点，别浪费手机上的空间。 */
@media (max-width: 860px) {
  .stat-card {
    padding: 10px 12px;
  }
  .stat-card.stat-square .stat-value {
    font-size: 22px;
  }
}
.stat-value {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-value .of {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.55;
}
.stat-label {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.82;
  letter-spacing: 0.02em;
}
.stat-extra {
  font-size: 10.5px;
  opacity: 0.68;
  margin-top: 1px;
}
.stat-mark {
  position: absolute;
  right: -6px;
  bottom: -10px;
  font-size: 46px;
  line-height: 1;
  opacity: 0.22;
  filter: saturate(0.85);
  pointer-events: none;
}
.stat-mini-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.stat-list {
  font-size: 10.5px;
  line-height: 1.5;
  opacity: 0.92;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.stat-list span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 108px;
}

/* 窄屏时数据卡片会变宽/变小，行内文字跟着容器走 */
@media (max-width: 860px) {
  .stat-list span {
    max-width: 100%;
  }
}

/* ==========================================================================
   配色 —— 走 --tone-* 令牌，这样昼夜两套自动生效
   --------------------------------------------------------------------------
   【为什么改】用户 2026-10-03 报的：「夜间模式下 迹览的一些组件 看不清，
   尤其是顶部四大组件」。

   原来这里是**写死的浅色渐变**（粉/米/蓝），完全不看主题 ——
   夜间模式下屏幕一片深色里亮着三块浅色卡，又扎眼、字又糊。

   现在底色用已有的 --tone-*-bg/-chip（那两个令牌本来就跟着主题变：
   白天浅底、夜间深底），文字色用新加的 --tone-*-fg（白天深、夜间浅）。
   卡片的"四种性格"保留了（玫/米/正红/蓝紫），只是会跟着昼夜走。
   ========================================================================== */
.stat-rose { background: linear-gradient(142deg, var(--tone-rose-bg) 0%, var(--tone-rose-chip) 100%); color: var(--tone-rose-fg); }
.stat-cream { background: linear-gradient(142deg, var(--tone-amber-bg) 0%, var(--tone-amber-chip) 100%); color: var(--tone-amber-fg); }
.stat-peri { background: linear-gradient(142deg, var(--tone-blue-bg) 0%, var(--tone-blue-chip) 100%); color: var(--tone-blue-fg); }
/* 正红那张是"最响"的一张（超期/告警用），昼夜都要保持够响：
   白天深红配白字，夜间暗红配浅红字。 */
.stat-crimson { background: linear-gradient(142deg, #b8453d 0%, #a3342e 100%); color: #fff; }
.stat-crimson .stat-mini-title { color: #ffd98a; }
[data-theme="night"] .stat-crimson { background: linear-gradient(142deg, #7d2c27 0%, #5f1f1b 100%); color: #ffd2cf; }
[data-theme="night"] .stat-crimson .stat-mini-title { color: #ffcf8a; }

/* ==========================================================================
   2. 今日计划 — 卡片网格
   ========================================================================== */
.today-grid {
  display: grid;
  /* 自适应列数：约 880px 宽时正好 3 列，带鱼屏自动排更多列 */
  grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
  gap: 11px;
}

.today-card {
  position: relative;
  display: flex;
  align-items: center;
  /* 【行高压缩】同 .up-card：用户说这一块浪费空间。
     原来 min-height 82px、图标块 42px、内边距 12px，
     一条只有"标题 + 一两个标签"的待办也占 82px。
     现在 62px / 图标 32px / 内边距 9px —— 实测降到 62px。 */
  gap: 9px;
  padding: 9px 10px 9px 9px;
  min-height: 62px;
  border-radius: var(--r-md);
  border: 1px solid var(--tone-gray-bd);
  background: var(--tone-gray-bg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
  cursor: pointer;
  overflow: hidden;
  /* 同 .up-card：完成按钮要和待办模块同尺寸（26 / 15） */
  --acts-size: 26px;
  --acts-icon: 15px;
}
.today-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.today-card .chip {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--tone-gray-chip);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.today-card .body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 18px;
}
.today-card .name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.today-card .meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-3);
}
.today-card .meta .tag {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 500;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text-2);
}
.today-card .meta .tag.t-important { background: var(--tone-rose-bg); color: var(--tone-rose-fg); }
.today-card .meta .tag.t-urgent { background: var(--tone-rose-bg); color: var(--tone-rose-fg); }
.today-card .meta .tag.t-handy { background: var(--tone-green-bg); color: var(--tone-green-fg); }
.today-card .check {
  position: absolute;
  top: 10px;
  right: 10px;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
}
.today-card .notes {
  font-size: 10.5px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-card .card-add {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

/* 完成态 */
.today-card.done {
  opacity: 0.5;
}
.today-card.done .name {
  text-decoration: line-through;
  text-decoration-color: var(--text-3);
}

/* 色调 */
.tone-green { background: var(--tone-green-bg); border-color: var(--tone-green-bd); }
.tone-green .chip { background: var(--tone-green-chip); }
.tone-blue { background: var(--tone-blue-bg); border-color: var(--tone-blue-bd); }
.tone-blue .chip { background: var(--tone-blue-chip); }
.tone-amber { background: var(--tone-amber-bg); border-color: var(--tone-amber-bd); }
.tone-amber .chip { background: var(--tone-amber-chip); }
.tone-rose { background: var(--tone-rose-bg); border-color: var(--tone-rose-bd); }
.tone-rose .chip { background: var(--tone-rose-chip); }
.tone-violet { background: var(--tone-violet-bg); border-color: var(--tone-violet-bd); }
.tone-violet .chip { background: var(--tone-violet-chip); }
.tone-gray { background: var(--tone-gray-bg); border-color: var(--tone-gray-bd); }
.tone-gray .chip { background: var(--tone-gray-chip); }

/* 空白占位卡（网格未满时提示新建） */
.today-card.ghost {
  border-style: dashed;
  background: transparent;
  border-color: var(--line-strong);
  box-shadow: none;
  color: var(--text-3);
  justify-content: center;
  cursor: pointer;
}
.today-card.ghost:hover {
  background: var(--surface-2);
  transform: none;
  box-shadow: none;
}

/* 纯占位卡：只为把最后一行填齐，不显示任何内容、也不可点 */
.today-card.spacer {
  visibility: hidden;
  pointer-events: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  min-height: 82px;
}

/* ==========================================================================
   3. 近日待办 — 分组卡片
   ========================================================================== */
.up-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 11px;
}

.up-card {
  display: flex;
  flex-direction: column;
  /* 【行高压缩】
     用户反馈「待办内容行高有点高，浪费了很多空间」。
     实测原来一条只有"标题 + 勾 + 进度条"的卡片要 109px，
     其中真正的内容只有 20px（标题）+ 27px（进度条），
     剩下 60 多 px 全是内边距和行间距。
     这里把 gap 从 8 收到 5、内边距从 13/11 收到 10/8，
     进度条那一行也压薄 —— 实测从 109px 降到约 76px，省掉三分之一。 */
  gap: 5px;
  padding: 10px 12px 8px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  /* 【完成按钮必须和待办模块一模一样】
     .check 的尺寸取自 --acts-size / --acts-icon，默认是 24/15；
     而待办页的 .task-row 把它设成了 26/15。
     迹览这些组件没有设，于是同一个「完成」按钮在两处是 24 和 26 两种大小 ——
     并排看就是迹览那个小一圈。
     这里补上同样的值，两边彻底一致。 */
  --acts-size: 26px;
  --acts-icon: 15px;
}
.up-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}
.up-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 勾要和标题**垂直居中**，不要往下压。
   原来 align-items: flex-start + margin-top: 2px，
   26px 的按钮把整行撑到 28px，标题却在顶上飘着。 */
.up-head .check {
  margin-top: 0;
  align-self: center;
}
/* 完成按钮放在标题右边，且**始终显示**。
   以前它在左边、未完成时还隐藏，导致每条待办左边一片空白，
   用户也找不到地方勾完成。 */
.up-head .check.check-right {
  margin-left: auto;
  flex: none;
  order: 99;
}
.up-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.up-card.done .up-title {
  text-decoration: line-through;
  color: var(--text-3);
}
.up-card.done {
  opacity: 0.62;
}
.up-due {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.up-due.warn { color: #b8453d; }
.up-due.danger { color: #9c2f28; }
.up-due.steady { color: var(--text-2); font-size: 14px; }
.up-date {
  font-size: 10.5px;
  color: var(--text-3);
  text-align: right;
  margin-top: -4px;
}

.up-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  position: relative;
  max-height: 96px;
  overflow-y: auto;
}
/* 没有子任务时整块不占位。
   以前每条待办都挂着「暂无子任务，点击卡片查看」，
   N 条待办看起来就是密密麻麻一屏废话。 */
.up-items:empty {
  display: none;
}
.up-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
}
.up-item:hover {
  color: var(--text);
}
.up-item.on {
  color: var(--text-3);
  text-decoration: line-through;
}
.up-item .txt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-empty {
  font-size: 11.5px;
  color: var(--text-3);
  padding: 2px 0 4px;
}

.up-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px dashed var(--line);
  /* 【进度条这一行压薄】
     原来是 padding-top: 8px + 24px 的高度（被里面的按钮撑着），
     一条卡片里它单独占掉 32px，而它只是一根进度条。
     改成 5px + 更矮的按钮，整行从 32px 收到 23px。 */
  padding-top: 5px;
  min-height: 0;
}
.mini-note {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  color: var(--text-2);
  background: var(--surface-3);
  transition: all var(--dur) var(--ease);
}
.mini-note:hover {
  background: var(--brand);
  color: var(--on-brand);
}
.bar {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width 0.4s var(--ease);
}
.bar-pct {
  flex: none;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* ==========================================================================
   4. 日历
   ========================================================================== */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 8px;
}
.cal-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cal-nav {
  display: flex;
  gap: 2px;
}
.cal-nav button {
  width: 24px;
  height: 24px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
}
.cal-nav button:hover {
  background: var(--surface-3);
  color: var(--text);
}
.cal-grid {
  padding: 0 12px 14px;
}
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.cal-week span {
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
  padding: 2px 0;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}
.cal-day {
  position: relative;
  height: 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  font-variant-numeric: tabular-nums;
}
.cal-day:hover {
  background: var(--surface-3);
}
.cal-day.out {
  color: #cdc7bf;
}
.cal-day.weekend {
  color: #b3aca3;
}
.cal-day.today {
  background: #2b2926;
  color: #fff;
  font-weight: 600;
}
.cal-day.today:hover {
  background: #2b2926;
}
.cal-day .dots {
  position: absolute;
  bottom: 3px;
  display: flex;
  gap: 2px;
}
.cal-day .dots i {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--brand);
}
.cal-day .dots i.all-done {
  background: var(--green);
}
.cal-day.today .dots i {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}
.cal-day.selected {
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

/* ==========================================================================
   5. 写一个想法
   ========================================================================== */
.idea-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  /* 【跟着容器高度走，别写死 40px】
     这个组件的最小高度是 1 行（60px）。如果按钮写死 40px、
     外面再套卡片内边距，1 行就放不下了，用户缩到最小会看到溢出。
     改成 flex:1 + min-height:40，这样一行时正好铺满、
     拉高时按钮也跟着变高，中间的文字始终居中。 */
  flex: 1 1 auto;
  min-height: 40px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--tone-violet-fg);
  background: linear-gradient(135deg, var(--tone-violet-bg) 0%, var(--tone-violet-chip) 100%);
  border: 1px solid color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--shadow-xs);
  transition: all var(--dur) var(--ease);
}
.idea-btn:hover {
  background: linear-gradient(135deg, var(--tone-violet-chip) 0%, var(--tone-violet-bd) 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.idea-btn .plus {
  font-size: 14px;
  opacity: 0.7;
}

/* ==========================================================================
   6. 总进度环形图
   ========================================================================== */
.ring-card {
  position: relative;
  overflow: hidden;
}
.ring-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 16px 20px;
}
.ring {
  position: relative;
  width: 148px;
  height: 148px;
}
.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring .track {
  fill: none;
  stroke: #f0ece6;
  stroke-width: 11;
}
.ring .value {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 11;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s var(--ease);
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.ring-center .pct {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ring-center .cap {
  font-size: 11.5px;
  color: var(--text-3);
}
.ring-deco {
  position: absolute;
  font-size: 14px;
  opacity: 0.45;
  pointer-events: none;
}
.ring-deco.bl { left: 14px; bottom: 16px; }
.ring-deco.br { right: 16px; bottom: 14px; }
.ring-play {
  position: absolute;
  right: 14px;
  bottom: 36px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
}
.ring-play:hover {
  transform: scale(1.08);
  color: var(--brand);
}
.ring-legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--text-3);
}
.ring-legend b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. 灵感列表 / 待办分布 / 提醒 / 热力 / 模块状态
   ========================================================================== */
.idea-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  transition: background var(--dur) var(--ease);
  position: relative;
}
.idea-item:hover {
  background: var(--surface-3);
}
.idea-item .txt {
  flex: 1 1 auto;
  min-width: 0;
}
.idea-item .act {
  opacity: 0;
  font-size: 11px;
  color: var(--text-3);
  transition: opacity var(--dur) var(--ease);
  flex: none;
  display: flex;
  gap: 4px;
}
.idea-item:hover .act {
  opacity: 1;
}
.idea-item .act button:hover {
  color: var(--brand);
}
.idea-item .stamp {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}
.idea-item.c-violet { border-left: 2.5px solid var(--violet); }
.idea-item.c-rose { border-left: 2.5px solid var(--rose); }
.idea-item.c-amber { border-left: 2.5px solid var(--amber); }
.idea-item.c-green { border-left: 2.5px solid var(--green); }
.idea-item.c-blue { border-left: 2.5px solid var(--blue); }
.idea-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.dist-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--text-2);
  padding: 3px 0;
}
.dist-row .name {
  width: 34px;
  flex: none;
  color: var(--text-3);
}
.dist-row .bar {
  height: 6px;
}
.dist-row .n {
  width: 30px;
  text-align: right;
  flex: none;
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.remind-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
}
.remind-item:last-child {
  border-bottom: none;
}
.remind-item:hover .nm {
  color: var(--brand-deep);
}
.remind-item .nm {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}
.remind-item .dd {
  flex: none;
  font-size: 11px;
  color: #b8453d;
  font-variant-numeric: tabular-nums;
}

.heat-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 62px;
  padding-top: 4px;
}
.heat-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
  justify-content: flex-end;
}
.heat-col .bar-v {
  width: 100%;
  max-width: 22px;
  border-radius: 5px;
  background: linear-gradient(180deg, #7fd4bd, var(--brand));
  min-height: 3px;
  transition: height 0.4s var(--ease);
}
.heat-col .lb {
  font-size: 10px;
  color: var(--text-3);
}
.heat-col.zero .bar-v {
  background: var(--surface-sunken);
}

.mod-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 1px dashed var(--line);
}
.mod-row:last-child {
  border-bottom: none;
}
.mod-row:hover {
  color: var(--text);
}
.mod-row .mi {
  width: 24px;
  height: 24px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: none;
}
.mod-row .nm {
  flex: 1 1 auto;
}
.mod-row .st {
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.quick-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
}
.quick-cell:hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.quick-cell .ico {
  font-size: 15px;
}

/* ==========================================================================
   8. 看板自定义模式
   ========================================================================== */

/* ---- 底部状态栏（编辑模式的操作条） ----
   固定在视口底部：不占文档流，所以进编辑模式时看板不会跳一下。
   左右留出一点边距，做成悬浮的圆角条，和整体的纸感风格一致。 */
.board-status-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* 避开 iPhone 底部横条 */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 120;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: min(1080px, calc(100vw - 32px));
  padding: 10px 12px 10px 16px;

  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line, #e6e2dc);
  box-shadow:
    0 12px 34px -10px rgba(40, 34, 30, 0.24),
    0 3px 10px -3px rgba(40, 34, 30, 0.12);

  font-size: 12.5px;
  color: #565073;
  animation: statusbar-in 0.22s var(--ease);
}

@keyframes statusbar-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.board-status-bar .bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.board-status-bar .bar-icon {
  font-size: 14px;
  line-height: 1;
  flex: none;
}
.board-status-bar .bar-title {
  font-weight: 600;
  color: var(--text, #2f2a26);
  white-space: nowrap;
  flex: none;
}
.board-status-bar .bar-hint {
  color: #8b8496;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-status-bar .bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* 给页面底部留出位置，免得最后一行内容被状态栏盖住 */
body.board-editing {
  padding-bottom: 84px;
}

/* ---- 窄屏：竖着排，按钮换行 ---- */
.board-status-bar.is-narrow {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  border-radius: var(--r-lg, 16px);
  padding: 12px 14px;
}
.board-status-bar.is-narrow .bar-info {
  flex-wrap: wrap;
}
.board-status-bar.is-narrow .bar-hint {
  flex-basis: 100%;
  white-space: normal;
}
.board-status-bar.is-narrow .bar-actions {
  flex-wrap: wrap;
}
.board-status-bar.is-narrow .bar-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* 手机上左下角有那颗圆形导航按钮，状态栏往上让一点，别叠在一起 */
@media (max-width: 1023px) {
  .board-status-bar {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body.board-editing {
    padding-bottom: 168px;
  }
}

/* 尊重「减少动画」偏好 */
@media (prefers-reduced-motion: reduce) {
  .board-status-bar {
    animation: none;
  }
}

/* ==========================================================================
   装饰组件（分隔线 / 珠链 / 枝叶 / 留白）
   --------------------------------------------------------------------------
   用户的要求：「增加一些装饰用的分隔组件，尺寸最小 1*1，
   用于做一些组件分隔，提供情绪价值用的」。

   它们不显示数据，只负责好看和分区。所以这里只有视觉，没有逻辑。
   共同的规矩：铺满格子、内容居中、平时不吃指针事件。
   颜色一律走主题变量，换配色时不用改这里。
   ========================================================================== */
.deco {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  /* 【平时不要吃点击】
     装饰块铺在别的组件旁边，如果它接指针事件，
     就会挡住底下/旁边组件的点击。留白那个尤其明显。 */
  pointer-events: none;
  user-select: none;
}

/* ---- 分隔线 ---- */
.deco-rule { gap: 6px; }
.deco-rule .deco-line {
  flex: 1 1 auto;
  min-width: 8px;
  height: 1px;
  /* 从中间往两边渐隐，比一条生硬的实线软 */
  background: linear-gradient(90deg, transparent, var(--line-strong, #d1d5db), transparent);
}
.deco-rule .deco-gem {
  flex: none;
  font-size: 9px;
  line-height: 1;
  color: var(--brand);
  opacity: .55;
}

/* ---- 珠链 ---- */
.deco-dots { gap: 0; justify-content: space-between; padding: 0 6px; }
.deco-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong, #d1d5db);
}
/* 中间那颗稍微大一点、用品牌色，整串就有了节奏 */
.deco-dot:nth-child(4) {
  width: 7px;
  height: 7px;
  background: var(--brand);
  opacity: .6;
}

/* ---- 枝叶 ---- */
.deco-leaf { gap: 8px; color: var(--brand); opacity: .5; }
.deco-leaf span { line-height: 1; }
.deco-leaf span:nth-child(1),
.deco-leaf span:nth-child(3) { font-size: 11px; }
.deco-leaf span:nth-child(2) { font-size: 14px; opacity: .8; }

/* ---- 留白 ---- */
.deco-space {
  border-radius: var(--r-md, 10px);
  /* 平时完全看不见（就是一块空白） */
  border: 1px dashed transparent;
}
/* 编辑模式下才显形 —— 不然它是一块空白，用户根本点不中它、也调不了尺寸 */
.board-grid.editing .deco-space {
  border-color: var(--line-strong, #d1d5db);
  background: repeating-linear-gradient(
    45deg,
    transparent 0 6px,
    rgba(0, 0, 0, .022) 6px 12px
  );
}

.widget-shell {
  position: relative;
  border-radius: var(--r-lg);
  transition: opacity var(--dur) var(--ease);
}
.editing .widget-shell {
  outline: 1.5px dashed #cfc6ea;
  outline-offset: 3px;
  cursor: grab;
}
.editing .widget-shell.dragging {
  opacity: 0.4;
}
.editing .widget-shell.drop-before::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent);
}
.widget-tools {
  position: absolute;
  top: -11px;
  right: -6px;
  z-index: 6;
  display: none;
  gap: 4px;
}
.editing .widget-tools {
  display: flex;
}
.widget-tools button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  color: var(--text-2);
  transition: all var(--dur) var(--ease);
}
.widget-tools button:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.widget-tools button.ghost-btn {
  cursor: grab;
  font-size: 13px;
}
.widget-tools button.del:hover {
  background: var(--red);
  border-color: var(--red);
}

/* 添加组件面板 */
.widget-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 9px;
}
.picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  transition: all var(--dur) var(--ease);
}
.picker-item:hover {
  border-color: var(--brand);
  background: var(--surface-2);
}
.picker-item.on {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.picker-item .pi {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.picker-item .nm {
  font-size: 12.5px;
  font-weight: 500;
}
.picker-item .ds {
  font-size: 11px;
  color: var(--text-3);
}

/* ==========================================================================
   工具组件 —— 系统资源 / 天气 / 每日一言 / 行情 / 番茄钟 / 纪念日
   --------------------------------------------------------------------------
   这一组组件都遵循同一个结构：
     .card > .card-head（标题）   +   .card-body.tool-body（内容）
   tool-body 统一负责「内容区可滚动 + 内容垂直铺开」，各组件只管自己的行。
   ========================================================================== */

.tool-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}

.tool-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 8px;
}

.tool-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
}

.tool-sep { opacity: .5; }

/* ==========================================================================
   组件内置设置（右键菜单 → 组件设置）
   ========================================================================== */

.wcfg-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wcfg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wcfg-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.wcfg-input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.wcfg-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft, rgba(107, 122, 90, .15));
}

/* 【下拉框要单独一套：不改的话就是"系统原生那个样子"】
   .wcfg-input 只设了 padding/border，没动 appearance。
   而 <select> 默认是 `appearance: auto` —— 浏览器会拿**系统原生控件**
   去画它（Windows 上是那个灰底方角、带原生箭头的框），
   于是同一行里的下拉和输入框看起来不是一套东西（用户原话："像是原始的，没有样式"）。

   还有对齐问题：原生 select 的高度由内容 + 原生内边距决定，
   实测 36px，而同排的 <input> 是 39px —— 差 3px，
   并排时下沿参差不齐。

   做法：
     · appearance: none  —— 收回控制权，改用和 base.css 里 .select 同一套画法
     · height: 39px      —— 和输入框**钉死同一个高度**（不靠 padding 凑，
                            因为不同平台原生 select 的基线不一样）
     · 右侧留出箭头的位置（padding-right + 自绘箭头） */
select.wcfg-input {
  appearance: none;
  -webkit-appearance: none;
  height: 39px;
  padding-right: 30px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* 深色主题（ink）下自绘箭头要跟着变浅，否则看不见 */
:root[data-theme="night"] select.wcfg-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
}
/* 下拉里每一项：不设的话长名字会被原生宽度裁掉 */
select.wcfg-input option {
  color: var(--text);
  background: var(--surface);
}

.wcfg-hint {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-3);
}

/* 多选（一组复选框）：近日待办的"显示哪几个周期"用的 */
.wcfg-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 2px 0;
}
.wcfg-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.wcfg-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--brand);
  cursor: pointer;
  margin: 0;
}

/* 天气卡片的补充信息（体感 / 湿度 / 风）*/
.wx-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* 数据来源提示（离线兜底时才出现）*/
.wx-src {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-3);
  opacity: .85;
}

/* 天气卡片标题旁边显示城市 */
.card-head .card-sub,
.tool-body + .card-head .sub {
  font-size: 11.5px;
  color: var(--text-3);
}

/* ------------------------------ 骨架屏 ------------------------------ */

.sk-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.sk-line {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--line) 25%, var(--line-2, var(--line)) 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: skShine 1.4s ease infinite;
}

@keyframes skShine {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; }
}

/* ------------------------------ 进度条（系统资源） ------------------------------ */

.meter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.meter-label {
  font-size: 12px;
  color: var(--text-2);
}

.meter-val {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.meter-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.meter-bar > i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent, #0081ff);
  transition: width .5s ease;
}

.meter.warn .meter-bar > i   { background: #d59a2e; }
.meter.danger .meter-bar > i { background: #c8553d; }

.meter-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ 天气 ------------------------------ */

.wx-now {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wx-icon { font-size: 30px; line-height: 1; flex: none; }

.wx-main { flex: 1; min-width: 0; }

.wx-temp {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.wx-text { font-size: 12px; color: var(--text-2); }

.wx-loc {
  font-size: 11px;
  color: var(--text-3);
  flex: none;
  align-self: flex-start;
}

.wx-tip {
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--soft, rgba(0,0,0,.03));
  border-radius: 7px;
  padding: 5px 8px;
}

.wx-strip {
  display: flex;
  gap: 4px;
  margin-top: auto;
}

.wx-day {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 0;
  border-radius: 7px;
  background: var(--soft, rgba(0,0,0,.03));
}

.wx-day .lb { font-size: 10.5px; color: var(--text-3); }
.wx-day .ic { font-size: 13px; line-height: 1.2; }
.wx-day .tp { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ------------------------------ 每日一言 ------------------------------ */

.quote-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  text-indent: 0;
}

.quote-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quote-from { font-size: 11.5px; color: var(--text-3); }

.quote-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--soft, rgba(0,0,0,.05));
  color: var(--text-3);
  white-space: nowrap;
}

/* ------------------------------ 行情 ------------------------------ */

.mk-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow: auto;
}

.mk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 7px;
}

.mk-row:hover { background: var(--soft, rgba(0,0,0,.03)); }

.mk-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mk-name .nm {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-name .un { font-size: 10px; color: var(--text-3); }

.mk-spark { flex: none; width: 56px; height: 20px; }
.mk-spark polyline { stroke: var(--text-3); }
.mk-spark.up polyline   { stroke: #c8553d; }
.mk-spark.down polyline { stroke: #4a8f6a; }

.mk-price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.mk-price .pv { font-size: 12.5px; font-weight: 600; }
.mk-price .ch,
.mk-price .pc { font-size: 10.5px; }

.mk-row.up   .mk-price .ch, .mk-row.up   .mk-price .pc { color: #c8553d; }
.mk-row.down .mk-price .ch, .mk-row.down .mk-price .pc { color: #4a8f6a; }
.mk-row.flat .mk-price .ch, .mk-row.flat .mk-price .pc { color: var(--text-3); }

/* ------------------------------ 番茄钟 ------------------------------ */

.pomo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pomo-dial {
  position: relative;
  width: min(150px, 62%);
  aspect-ratio: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pomo-ring { position: absolute; inset: 0; }
.pomo-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.pomo-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 7;
}

.pomo-bar {
  fill: none;
  stroke: var(--accent, #0081ff);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset .9s linear;
}

.pomo-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pomo-time {
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  line-height: 1.1;
}

.pomo-mode { font-size: 11.5px; color: var(--text-3); }
.pomo-mode.work { color: var(--accent, #0081ff); }
.pomo-mode.break { color: #d59a2e; }

.pomo-acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.pomo-btn {
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.pomo-btn:hover { background: var(--soft, rgba(0,0,0,.04)); color: var(--text); }

.pomo-btn.primary {
  background: var(--accent, #0081ff);
  border-color: var(--accent, #0081ff);
  color: var(--on-accent);
  min-width: 68px;
}

.pomo-btn.primary:hover { filter: brightness(1.08); }

.pomo-done { font-variant-numeric: tabular-nums; }

/* ------------------------------ 纪念日 ------------------------------ */

.ann-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: auto;
}

.ann-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--soft, rgba(0,0,0,.03));
}

.ann-row.today { background: color-mix(in srgb, var(--accent, #0081ff) 14%, transparent); }
.ann-row.past { opacity: .62; }

.ann-days {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-width: 54px;
}

.ann-days b {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ann-days .u { font-size: 10.5px; color: var(--text-3); }

.ann-info { flex: 1; min-width: 0; }

.ann-name {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-date { font-size: 10.5px; color: var(--text-3); }