/**
 * 倒计时组件样式
 *   - 桌面卡片（2×2 / 4×2 共用同一套 DOM 与样式）：
 *       全卡作为"封面"展示一个主事件 —— 用「薄荷青蓝」清新色系铺底，
 *       叠四角呼吸光晕（雾青 / 浅松石 / 极淡水玉粉 / 极淡薰衣）+ 微星点装饰，
 *       中央显示：胶囊徽章「倒计时」→ 大字事件名 → 「还有/已过 N 天」文案。
 *   - 文字主色为深灰，仅"剩余天数"数字用 --cd-color 主题色（按事件 e.color 注入）。
 *   - 1×1 mini：halotab-app.js 的 mini 渲染器复用根类，靠 .halotab-widget-mini
 *     的 !important 重置布局，本文件无需特殊处理。
 *   - 详情面板：保持原有左右分栏（详情面板那一段在文件下方，未改动结构）。
 *   - 整张卡 / 详情面板的底色完全脱离 --cd-color，不会随事件主题色变化；
 *     主题色 --cd-color 只服务于：剩余天数数字 / 状态标签 / 分类胶囊 / 进度条等局部强调。
 *   - 历史版本曾使用「暖米杏」黄色系，现已替换为「薄荷青蓝」，避免黄味偏重。
 * ============================================================ */
.halotab-widget-countdown { /* SPA 主容器：halotab-widget halotab-widget-countdown */ }

.halotab-widget-cd {
  --cd-color: #ef4444;
  /* ============================================================
   * 统一固定背景变量（icon 1×1/2×2/4×2 + 详情面板 + 空态 共用同一张）：
   *   底色统一改为「薄荷青蓝」清新色系（脱离原来的暖米杏黄）：
   *   --cd-bg-base   : 极淡青蓝底渐变（#f5fbff → #eaf5fb → #e3f0f5），近白带雾
   *   --cd-bg-glow-1 : 左上 雾青      主调光晕（薄荷青）
   *   --cd-bg-glow-2 : 右下 浅松石    次调光晕（偏蓝绿，做色相呼应）
   *   --cd-bg-glow-3 : 右上 极淡水玉粉 第三色光晕（极淡，做一点暖色点缀，但不黄）
   *   --cd-bg-glow-4 : 左下 极淡薰衣  第四色光晕（极淡，做整体「四角呼吸」分布）
   *   --cd-deco      : 装饰 SVG（星点 + 弧线）的着色，灰青调，跟底色同色系不抢戏
   * 这一组完全脱离 --cd-color，不再随事件主题色变化。
   * 主题色 --cd-color 仅服务于局部：数字颜色 / 标签 / 分类 / tab 高亮等。
   * ============================================================ */
  --cd-bg-base:
    linear-gradient(135deg, #f5fbff 0%, #eaf5fb 55%, #e3f0f5 100%);
  --cd-bg-glow-1: radial-gradient(110% 75% at 0% 0%,     rgba(120, 180, 200, .18) 0%, transparent 55%);
  --cd-bg-glow-2: radial-gradient( 95% 75% at 100% 100%, rgba(110, 190, 180, .14) 0%, transparent 60%);
  --cd-bg-glow-3: radial-gradient( 80% 70% at 100% 0%,   rgba(230, 200, 210, .12) 0%, transparent 60%);
  --cd-bg-glow-4: radial-gradient( 80% 70% at 0% 100%,   rgba(190, 195, 220, .12) 0%, transparent 60%);
  --cd-deco: rgba(80, 130, 150, .42);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  background:
    var(--cd-bg-glow-1),
    var(--cd-bg-glow-2),
    var(--cd-bg-glow-3),
    var(--cd-bg-glow-4),
    var(--cd-bg-base);
  color: #1f2937;
  border-radius: inherit;
  cursor: pointer;
  overflow: hidden;
}

/* 装饰背景（光晕 + 星点）：放在内容下层；
 * 颜色脱离 --cd-color，改用暖米色 --cd-deco，跟暖底同色系，
 * SVG 内部的 fill="currentColor" / stroke 都会自动接到这层上。 */
.halotab-widget-cd-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--cd-deco);
  z-index: 0;
}
.halotab-widget-cd-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 顶层蒙层（保留 DOM 兼容，但浅底下不做暗化） */
.halotab-widget-cd-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  z-index: 1;
}

/* 内容层在装饰 / 蒙层之上 */
.halotab-widget-cd-event,
.halotab-widget-cd-empty { position: relative; z-index: 2; }

/* 中央事件区
 * 布局节奏（自上而下）：
 *   1) 胶囊小徽章「倒计时」（青蓝调，浅底淡边，体积小，做副标识）
 *   2) 大字事件名（最显眼）
 *   3) 数字行：还有 N 天（数字仍走 --cd-color 主题色，文字保持中性灰）
 *   4) meta 副信息（农历/日期等，可空）
 * 各行之间用 gap 控制，比之前的 4px 略松，但徽章与名称之间收紧 2px，
 * 让"徽章 + 名称"看起来像同一组（标签 + 标题）。 */
.halotab-widget-cd-event {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  text-align: center;
  color: #1f2937;
}
/* 副标改成胶囊小徽章：浅青蓝底、青调描边、字间距 1px，
 * 跟整张卡的薄荷青蓝色系一致，避免 4×2 大空间时副标被淹没。 */
.halotab-widget-cd-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  font-size: clamp(9px, 2.8cqi, 11px);
  color: #4a7a8c;
  background: rgba(120, 180, 200, .12);
  border: 1px solid rgba(120, 180, 200, .26);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.4;
  margin-bottom: 0;
}
.halotab-widget-cd-name {
  display: block;
  width: 100%;
  margin-top: -2px;        /* 与徽章靠近，形成「徽章 + 标题」组合 */
  font-size: clamp(15px, 5.2cqi, 22px);
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .5px;
}
.halotab-widget-cd-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  line-height: 1;
}
.halotab-widget-cd-pre,
.halotab-widget-cd-unit {
  font-size: clamp(11px, 3.6cqi, 14px);
  font-weight: 600;
  color: #475569;
}
.halotab-widget-cd-num {
  font-size: clamp(28px, 11cqi, 56px);
  font-weight: 800;
  letter-spacing: -1px;
  font-style: normal;
  color: var(--cd-color);
  text-shadow: 0 2px 10px color-mix(in srgb, var(--cd-color) 22%, transparent);
}
.halotab-widget-cd-meta {
  display: block;
  font-size: clamp(10px, 3cqi, 11px);
  color: #94a3b8;
  margin-top: 2px;
  min-height: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 状态着色（today/past）：
 *   - today：用青松石（#06b6d4）替代原来的琥珀黄（#f59e0b），跟整张卡的薄荷青蓝色系协调；
 *   - past：仍用中性灰，强调"已过去"的克制感。 */
.halotab-widget-cd[data-state="today"] {
  --cd-color: #06b6d4;
}
.halotab-widget-cd[data-state="past"] {
  --cd-color: #94a3b8;
}

/* 空态：铺满整张卡，居中 icon + 双行提示 */
.halotab-widget-cd-empty {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  text-align: center;
  color: #64748b;
}
.halotab-widget-cd.is-empty .halotab-widget-cd-event { display: none; }
.halotab-widget-cd.is-empty .halotab-widget-cd-empty { display: flex; }
/* 空态：背景与有事件态完全一致（暖米杏 + 暖光晕），不再独立覆盖；
 * 只把装饰 SVG 透明度压低一档，让空态视觉更克制，icon 当主视觉。 */
.halotab-widget-cd.is-empty .halotab-widget-cd-bg { opacity: .55; }

.halotab-widget-cd-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 去掉圆底后 SVG 直接铺满容器，所以容器尺寸即图标视觉尺寸；
   * 整体再收一档，让线性图标更克制，标题/提示文字更主视觉。 */
  width: clamp(32px, 12.5cqi, 48px);
  height: clamp(32px, 12.5cqi, 48px);
  margin-bottom: 4px;
  /* 描线颜色用青松石（与 today 状态、详情面板时钟同款），
   * 跟整张卡薄荷青蓝色系协调，比原来的中性 slate 更有空气感。 */
  color: #06b6d4;
}
.halotab-widget-cd-empty-ico svg {
  /* 没有圆形容器了，SVG 直接铺满，主视觉更大方 */
  width: 100%;
  height: 100%;
  display: block;
}
.halotab-widget-cd-empty-title {
  font-size: clamp(13px, 4.4cqi, 16px);
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
}
.halotab-widget-cd-empty-tip {
  font-size: clamp(10px, 3.2cqi, 12px);
  color: #64748b;
}

/* ============================================================
 * 桌面卡片 · 2×2 专属空态紧凑布局
 * ------------------------------------------------------------
 * 原 cqi 缩放在 2×2(~140px) 下会全部贴到 clamp 的 min 值，icon 偏小、
 * 字号死板、padding 偏大。这里改用定档 px，并：
 *   - icon 圆稍微放大到 52px，主视觉更明确
 *   - 标题 13px / 提示 11px，加 tabular & 居中对齐
 *   - 提示限两行省略，避免长文案撑破卡片
 * ============================================================ */
.halotab-card[data-size="2x2"] .halotab-widget-cd-empty {
  gap: 6px;
  padding: 10px 12px;
}
.halotab-card[data-size="2x2"] .halotab-widget-cd-empty-ico {
  width: 38px;
  height: 38px;
  margin-bottom: 2px;
}
.halotab-card[data-size="2x2"] .halotab-widget-cd-empty-title {
  font-size: 13px;
}
.halotab-card[data-size="2x2"] .halotab-widget-cd-empty-tip {
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 暗色：底色压暗 + 文字提亮（同样固定不随事件变色） */
html[data-theme="dark"] .halotab-widget-cd,
html[data-theme="auto"] .halotab-widget-cd {
  /* 暗色版深青蓝底：跟亮色版薄荷青蓝同色系（H 偏青蓝），只是明度压到深色档；
   * 四角光晕也对应改为暗色版（薄荷青 / 浅松石 / 暗水玉粉 / 暗薰衣），仍保持极低 alpha */
  --cd-bg-base:
    linear-gradient(135deg, #131c22 0%, #0f181d 55%, #0c1418 100%);
  --cd-bg-glow-1: radial-gradient(110% 75% at 0% 0%,     rgba(120, 180, 200, .14) 0%, transparent 55%);
  --cd-bg-glow-2: radial-gradient( 95% 75% at 100% 100%, rgba(110, 190, 180, .12) 0%, transparent 60%);
  --cd-bg-glow-3: radial-gradient( 80% 70% at 100% 0%,   rgba(180, 150, 165, .10) 0%, transparent 60%);
  --cd-bg-glow-4: radial-gradient( 80% 70% at 0% 100%,   rgba(150, 155, 185, .10) 0%, transparent 60%);
  --cd-deco: rgba(120, 180, 200, .30);
  color: #e5e7eb;
}
html[data-theme="dark"] .halotab-widget-cd-name,
html[data-theme="auto"] .halotab-widget-cd-name { color: #f1f5f9; }
/* 暗色版的胶囊徽章：浅青调字 + 半透明青底（与暗底反差更柔和） */
html[data-theme="dark"] .halotab-widget-cd-sub,
html[data-theme="auto"] .halotab-widget-cd-sub {
  color: #9ec9d6;
  background: rgba(120, 180, 200, .14);
  border-color: rgba(120, 180, 200, .28);
}
html[data-theme="dark"] .halotab-widget-cd-pre,
html[data-theme="dark"] .halotab-widget-cd-unit,
html[data-theme="auto"] .halotab-widget-cd-pre,
html[data-theme="auto"] .halotab-widget-cd-unit { color: #cbd5e1; }
html[data-theme="dark"] .halotab-widget-cd-meta,
html[data-theme="auto"] .halotab-widget-cd-meta { color: #64748b; }
html[data-theme="dark"] .halotab-widget-cd-empty-title,
html[data-theme="auto"] .halotab-widget-cd-empty-title { color: #f1f5f9; }
html[data-theme="dark"] .halotab-widget-cd-empty,
html[data-theme="dark"] .halotab-widget-cd-empty-tip,
html[data-theme="auto"] .halotab-widget-cd-empty,
html[data-theme="auto"] .halotab-widget-cd-empty-tip { color: #94a3b8; }
/* 暗色空态：背景完全沿用，icon 不再加圆底；
 * 描线用稍亮的青松石（cyan-400），暗底下保持足够辨识度。 */
html[data-theme="dark"] .halotab-widget-cd-empty-ico,
html[data-theme="auto"] .halotab-widget-cd-empty-ico {
  color: #22d3ee;
}


/* ============================================================
 * 详情面板（appBox 内）
 * ------------------------------------------------------------
 * 底色与 1×1 / 2×2 / 4×2 icon 完全同源 —— 都是固定薄荷青蓝渐变
 * (#f5fbff → #e3f0f5) + 四角呼吸光晕（雾青 / 浅松石 / 极淡水玉粉 / 极淡薰衣），
 * 不再随事件主题色变化，也不再使用任何暖黄/米色。
 * 侧栏 / meta / note / 表单抽屉 统一使用「冷白」半透明卡 (.82)
 * + blur(10px)，跟青蓝背景同色系，叠加后温润不发黄。
 * 主题色 --cd-color 仅服务于：标签 / 分类 / tab 高亮 / 局部强调。
 * ============================================================ */
.ht-appbox-body[data-key="countdown"] { padding: 0; height: 100%; }

.ht-cd-app {
  --cd-color: #ef4444;
  --cd-text: #1f2937;
  --cd-text-soft: #64748b;
  /* 冷白半透明卡（带一丝青调 #f7fbfd），跟薄荷青蓝背景同色系，叠加后温润不发灰 */
  --cd-card-bg: rgba(247, 251, 253, .82);
  --cd-border: rgba(80, 130, 150, .14);
  --cd-track: rgba(80, 130, 150, .12);
  /* 与 .halotab-widget-cd 同源的固定薄荷青蓝背景 + 四角呼吸光晕（雾青 / 浅松石 / 极淡水玉粉 / 极淡薰衣） */
  --cd-bg-base:
    linear-gradient(135deg, #f5fbff 0%, #eaf5fb 55%, #e3f0f5 100%);
  --cd-bg-glow-1: radial-gradient(110% 75% at 0% 0%,     rgba(120, 180, 200, .18) 0%, transparent 55%);
  --cd-bg-glow-2: radial-gradient( 95% 75% at 100% 100%, rgba(110, 190, 180, .14) 0%, transparent 60%);
  --cd-bg-glow-3: radial-gradient( 80% 70% at 100% 0%,   rgba(230, 200, 210, .12) 0%, transparent 60%);
  --cd-bg-glow-4: radial-gradient( 80% 70% at 0% 100%,   rgba(190, 195, 220, .12) 0%, transparent 60%);
  --cd-deco: rgba(80, 130, 150, .42);
  position: relative;
  display: grid;
  grid-template-columns: 320px 1fr;
  width: 100%;
  height: 100%;
  background:
    var(--cd-bg-glow-1),
    var(--cd-bg-glow-2),
    var(--cd-bg-glow-3),
    var(--cd-bg-glow-4),
    var(--cd-bg-base);
  color: var(--cd-text);
  font-size: 14px;
  overflow: hidden;
}

/* 详情面板装饰层（星点 + 弧线 + 主星）：跨越整张面板，
 * 左侧冷白卡 (.ht-cd-side) 是半透明，会让装饰隐隐透出；
 * 右侧 .ht-cd-main 透明，直接显示装饰。currentColor 接 --cd-deco（薄荷青蓝色系）。 */
.ht-cd-app-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--cd-deco);
  z-index: 0;
}
.ht-cd-app-bg svg { width: 100%; height: 100%; display: block; }

/* side / main 抬到装饰之上 */
.ht-cd-app > .ht-cd-side,
.ht-cd-app > .ht-cd-main { position: relative; z-index: 1; }

/* ---------- 左列 ---------- */
.ht-cd-side {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--cd-border);
  /* 半透明白卡 + 模糊（透明度与 meta/note/表单抽屉统一为 .78） */
  background: var(--cd-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: 0;
}
.ht-cd-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cd-border);
  flex: 0 0 auto;
}
.ht-cd-side-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cd-text);
}
.ht-cd-side-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  /* 青松石 → 海蓝 渐变，跟整张卡的薄荷青蓝色系一致（替换原紫色 6366f1/8b5cf6） */
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
}
.ht-cd-side-add:hover { filter: brightness(1.08); }

.ht-cd-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.ht-cd-list-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 16px;
  color: var(--cd-text-soft);
  font-size: 13px;
  text-align: center;
}
.ht-cd-list-empty span:first-child { font-size: 28px; }

.ht-cd-list-item {
  --cd-item-color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
  background: transparent;
}
.ht-cd-list-item:hover {
  background: color-mix(in srgb, var(--cd-item-color) 8%, transparent);
}
.ht-cd-list-item.is-active {
  background: color-mix(in srgb, var(--cd-item-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--cd-item-color) 50%, transparent);
}
.ht-cd-list-num {
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 6px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cd-item-color) 18%, transparent);
  color: var(--cd-item-color);
  line-height: 1;
  flex: 0 0 auto;
}
.ht-cd-list-pre { font-size: 10px; opacity: .8; margin-bottom: 2px; }
.ht-cd-list-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.ht-cd-list-unit { font-size: 10px; margin-top: 2px; opacity: .8; }
.ht-cd-list-info {
  flex: 1 1 0;
  min-width: 0;
}
.ht-cd-list-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.ht-cd-list-pin { margin-right: 4px; }
.ht-cd-list-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cd-text-soft);
}
.ht-cd-list-cat {
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cd-item-color) 15%, transparent);
  color: var(--cd-item-color);
  font-weight: 600;
}
.ht-cd-list-rep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  /* 重复事件标识：跟主色系一致，用青松石淡底 */
  background: rgba(6, 182, 212, .15);
  color: #0891b2;
  font-size: 10px;
}
.ht-cd-list-item[data-state="past"] .ht-cd-list-num {
  background: rgba(148, 163, 184, .15);
  color: #94a3b8;
}

/* ---------- 右列 ---------- */
.ht-cd-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.ht-cd-stage {
  flex: 1 1 auto;
  min-height: 0;
  padding: 28px 32px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* 空态 */
.ht-cd-stage-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1;
  text-align: center;
  color: var(--cd-text-soft);
}
.ht-cd-stage[data-empty="true"] .ht-cd-stage-empty { display: flex; }
.ht-cd-stage[data-empty="true"] .ht-cd-stage-detail { display: none; }
/* 详情面板空态 icon：SVG 简笔时钟（与桌面卡 / 1×1 mini 同源）。
 * - 尺寸由 56 收到 48，跟下方文字层级更匹配
 * - 颜色用青松石 #06b6d4（与桌面卡 icon、today 状态同款），
 *   跟整张面板薄荷青蓝色系协调。暗色由全局 dark 规则覆盖。 */
.ht-cd-stage-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #06b6d4;
}
.ht-cd-stage-empty-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ht-cd-stage-empty-title { font-size: 18px; font-weight: 700; color: var(--cd-text); }
.ht-cd-stage-empty-tip { font-size: 13px; }
.ht-cd-stage-empty-btn {
  margin-top: 8px;
  padding: 8px 20px;
  border: 0;
  border-radius: 8px;
  /* 青松石 → 海蓝 渐变，与 .ht-cd-side-add 同色，统一主操作风格 */
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* 详情态 */
.ht-cd-stage-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.ht-cd-stage[data-empty="false"] .ht-cd-stage-detail { display: flex; }

.ht-cd-stage-tagrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ht-cd-stage-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--cd-color);
}
.ht-cd-stage-tag[data-state="today"] { background: #06b6d4; }
.ht-cd-stage-tag[data-state="past"]  { background: #94a3b8; }
.ht-cd-stage-cat {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--cd-color) 15%, transparent);
  color: var(--cd-color);
}
.ht-cd-stage-spacer { flex: 1; }
.ht-cd-stage-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--cd-border);
  border-radius: 6px;
  background: var(--cd-card-bg);
  color: var(--cd-text);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ht-cd-stage-act:hover { background: rgba(15, 23, 42, .06); }
.ht-cd-stage-del:hover { background: rgba(239, 68, 68, .12); border-color: #fca5a5; color: #dc2626; }

.ht-cd-stage-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--cd-text);
  line-height: 1.3;
}

.ht-cd-stage-numbox {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0;
  color: var(--cd-color);
  line-height: 1;
}
.ht-cd-stage-num {
  font-size: 120px;
  font-weight: 800;
  letter-spacing: -4px;
  line-height: 1;
}
.ht-cd-stage-unit {
  font-size: 32px;
  font-weight: 700;
}

.ht-cd-stage-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 16px;
  background: var(--cd-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid var(--cd-border);
}
.ht-cd-stage-metaitem {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ht-cd-stage-metalabel {
  font-size: 11px;
  color: var(--cd-text-soft);
}
.ht-cd-stage-metaval {
  font-size: 14px;
  font-weight: 600;
  color: var(--cd-text);
}

.ht-cd-stage-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ht-cd-stage-barlabel {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--cd-text-soft);
}
.ht-cd-stage-bartip {
  color: var(--cd-color);
  font-weight: 600;
}
.ht-cd-stage-bartrack {
  height: 8px;
  border-radius: 999px;
  background: var(--cd-track);
  overflow: hidden;
}
.ht-cd-stage-barfill {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cd-color) 70%, #fff) 0%, var(--cd-color) 100%);
  transition: width .4s ease;
}

.ht-cd-stage-note {
  padding: 12px 14px;
  background: var(--cd-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  border: 1px solid var(--cd-border);
  color: var(--cd-text-soft);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- 表单（底部抽屉） ---------- */
.ht-cd-form {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 32px 18px;
  /* 与 side/meta/note 统一：--cd-card-bg (.78) + blur(10px) */
  background: var(--cd-card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--cd-border);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
  z-index: 5;
  animation: ht-cd-slidein .18s ease;
}
.ht-cd-form[hidden] { display: none; }
@keyframes ht-cd-slidein {
  from { transform: translateY(20%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.ht-cd-form-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ht-cd-form-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cd-text);
}
.ht-cd-form-close {
  border: 0;
  background: transparent;
  color: var(--cd-text-soft);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ht-cd-form-close:hover { background: rgba(15, 23, 42, .06); color: var(--cd-text); }

.ht-cd-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.ht-cd-form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ht-cd-form-row-2col > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ht-cd-form-label {
  font-size: 12px;
  color: var(--cd-text-soft);
  font-weight: 500;
}
.ht-cd-form-req { color: #ef4444; margin-left: 2px; }
.ht-cd-form-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--cd-border);
  border-radius: 6px;
  /* 暖白（带杏色），与卡片/抽屉同色系，叠在暖底上不会发冷 */
  background: rgba(255, 252, 240, .7);
  color: var(--cd-text);
  font-size: 13px;
  box-sizing: border-box;
  font-family: inherit;
}
.ht-cd-form-input:focus {
  outline: none;
  /* focus 边框色与主操作色一致：青松石 + 半透明青光环 */
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .18);
}
.ht-cd-form-textarea {
  height: auto;
  min-height: 56px;
  padding: 8px 10px;
  resize: vertical;
}

.ht-cd-form-colors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ht-cd-form-color {
  --c: #ef4444;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
  transition: box-shadow .12s, transform .12s ease;
  border: 2px solid transparent;
}
.ht-cd-form-color:active { transform: scale(.9); }
.ht-cd-form-color.is-active {
  border-color: var(--c);
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px var(--c);
}

.ht-cd-form-checkrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cd-text);
  cursor: pointer;
  user-select: none;
}
.ht-cd-form-checkrow input { margin: 0; }

.ht-cd-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}
.ht-cd-btn {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--cd-border);
  background: var(--cd-card-bg);
  color: var(--cd-text);
  transition: filter .15s, background .15s;
}
.ht-cd-btn-ghost:hover { background: rgba(15, 23, 42, .06); }
.ht-cd-btn-primary {
  border: 0;
  /* 主按钮：青松石 → 海蓝（与 .ht-cd-side-add / .ht-cd-stage-empty-btn 一致） */
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  color: #fff;
}
.ht-cd-btn-primary:hover { filter: brightness(1.08); }

/* ---------- 暗色：详情面板 ---------- */
html[data-theme="dark"] .ht-cd-app,
html[data-theme="auto"] .ht-cd-app {
  --cd-text: #e5e7eb;
  --cd-text-soft: #94a3b8;
  /* 暗色版「深青蓝」半透明卡 (.74)，跟暗色青蓝底同色系，避免叠加发暖 */
  --cd-card-bg: rgba(28, 38, 46, .74);
  --cd-border: rgba(120, 180, 200, .18);
  --cd-track: rgba(120, 180, 200, .16);
  /* 暗色版固定深青蓝背景，跟 icon 暗色配方完全同源 */
  --cd-bg-base:
    linear-gradient(135deg, #131c22 0%, #0f181d 55%, #0c1418 100%);
  --cd-bg-glow-1: radial-gradient(110% 75% at 0% 0%,     rgba(120, 180, 200, .14) 0%, transparent 55%);
  --cd-bg-glow-2: radial-gradient( 95% 75% at 100% 100%, rgba(110, 190, 180, .12) 0%, transparent 60%);
  --cd-bg-glow-3: radial-gradient( 80% 70% at 100% 0%,   rgba(180, 150, 165, .10) 0%, transparent 60%);
  --cd-bg-glow-4: radial-gradient( 80% 70% at 0% 100%,   rgba(150, 155, 185, .10) 0%, transparent 60%);
  --cd-deco: rgba(120, 180, 200, .30);
}
html[data-theme="dark"] .ht-cd-stage-act:hover,
html[data-theme="auto"] .ht-cd-stage-act:hover { background: rgba(255, 255, 255, .08); }
/* 暗色：详情面板空态时钟 icon —— 与桌面卡 icon 暗色同源（cyan-400），暗底下保持高对比 */
html[data-theme="dark"] .ht-cd-stage-empty-ico,
html[data-theme="auto"] .ht-cd-stage-empty-ico { color: #22d3ee; }
html[data-theme="dark"] .ht-cd-form-input,
html[data-theme="auto"] .ht-cd-form-input {
  /* 暗色输入框：跟暗色青蓝底同色系（淡青蓝半透明），不再走暖色 */
  background: rgba(20, 28, 34, .55);
  color: #e5e7eb;
}
html[data-theme="dark"] .ht-cd-btn-ghost:hover,
html[data-theme="auto"] .ht-cd-btn-ghost:hover { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .ht-cd-form-close:hover,
html[data-theme="auto"] .ht-cd-form-close:hover { background: rgba(255, 255, 255, .08); color: #e5e7eb; }

/* ---------- 窄屏：左列折叠为顶部条 ---------- */
@media (max-width: 720px) {
  .ht-cd-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .ht-cd-side {
    border-right: 0;
    border-bottom: 1px solid var(--cd-border);
    max-height: 38%;
  }
  .ht-cd-stage { padding: 20px; }
  .ht-cd-stage-num { font-size: 80px; }
  .ht-cd-stage-meta { grid-template-columns: repeat(2, 1fr); }
  .ht-cd-form { padding: 14px 20px 16px; }
}