/* ============================================================
 * Task Manager v2 — 自定义样式
 * 依赖：tokens.css / common.css / utility.css
 * 覆盖：common.css 默认的 sidebar layout (body padding-left: 0)
 * ============================================================ */

/* === 覆盖 common.css 默认的 sidebar layout === */
body { padding-left: 0 !important; background: var(--color-gray-100); }

/* ===== 浏览器兼容横幅 ===== */
.compat-banner {
  background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
  color: #874d00;
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-orange-200);
}
.compat-banner[hidden] { display: none; }

/* ===== 应用骨架 ===== */
/* v3.6.4l (咸鱼 14:14 反馈)：撤掉 min-height: 100vh，让主屏幕完全按内容走
   welcome 屏自己有 min-height: 100vh，不受影响 */
.app { display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

/* ===== Welcome 屏（DB 选择） ===== */
.welcome {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-blue-700) 0%, var(--color-blue-500) 100%);
}

.welcome__card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-9) var(--space-8);
  max-width: 520px;
  width: 100%;
  text-align: center;
}

.welcome__title {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-800);
  margin-bottom: var(--space-2);
}

.welcome__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-7);
}

.welcome__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.welcome__btn {
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-md);
  justify-content: center;
}

.welcome__hint {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  min-height: 16px;
}

/* ===== Topbar ===== */
.topbar {
  height: var(--size-navbar-height);
  background: linear-gradient(135deg, var(--color-blue-700) 0%, var(--color-blue-500) 100%);
  color: var(--color-white);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  box-shadow: var(--shadow-base);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: var(--space-4);
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
  min-width: 0;
}

.topbar__db-name {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.18s;
}
.topbar__db-name:hover { background: rgba(255, 255, 255, 0.25); }

.topbar .tabs {
  background: transparent;
  border-bottom: none;
  padding: 0;
  height: auto;
  gap: var(--space-2);
}

.topbar .tab {
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.topbar .tab:hover { color: var(--color-white); }
.topbar .tab--active {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
  font-weight: var(--font-weight-medium);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.search {
  width: 220px;
}

/* ===== Settings dropdown ===== */
.settings {
  position: relative;
}

.settings__btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}
.settings__btn:hover { background: rgba(255, 255, 255, 0.25); }

.settings__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: var(--space-1);
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.settings__menu[hidden] { display: none; }

.settings__menu button {
  background: transparent;
  border: none;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  cursor: pointer;
  border-radius: var(--radius-base);
  font-family: inherit;
}
.settings__menu button:hover {
  background: var(--color-gray-50);
  color: var(--color-blue-500);
}
.settings__menu button.danger { color: var(--color-red); }
.settings__menu button.danger:hover { background: var(--color-red-50); }

/* v3.4 (2026-07-29, PRD §全局设置) — 时区只读提示 */
.recurrence-tz-readonly {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-gray-100, #f5f5f5);
  border: 1px solid var(--color-gray-200, #eee);
  border-radius: var(--radius-base, 4px);
  font-size: var(--font-size-sm, 13px);
}
.recurrence-tz-readonly strong {
  color: var(--color-blue-700, #1d5bb5);
}

/* v3.4 (2026-07-29, PRD §全局设置) — 设置菜单·全局设置区 */
.settings__section--heading {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  color: var(--color-gray-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.settings__divider {
  height: 1px;
  background: var(--color-gray-200);
  margin: var(--space-1) 0;
}
.settings__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.settings__row-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  white-space: nowrap;
}
.settings__row-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-base);
}
.settings__row-save {
  flex-shrink: 0;
}

/* ===== View host ===== */
/* v3.6.4l (咸鱼 14:14 反馈)：撤销 flex: 1，撤销 display: flex
   原因：加 flex: 1 + min-height: 100vh 联被会把整个页面撑到视口高度，
        matrix/kanban 填满 view-host，内容只占一小部分，剩下的全是空白
   修复：view-host 按内容走，不 flex 不 fill */
.view-host {
  padding: var(--space-5);
  overflow-x: auto;
}

/* ===== 矩阵视图（艾森豪威尔 + 采铜） ===== */
/* v3.6.4h (咸鱼 11:49 反馈)：min-height: 70vh + grid-template-rows: 1fr 1fr 在 filter panel + custom panel 激活后
   撞出大量空白。改为 auto rows + min-height: 0，让 matrix 高度跟 cell 内容走
   v3.6.4i (咸鱼 12:31 反馈)：单改 matrix 不够，还要让 matrix 填满 view-host 剩余高度
   原因：view-host 有 flex: 1（填满 app 剩余），matrix 只内容高 → view-host 底部留下空白
   解决：给 matrix 加 flex: 1，让它填满 view-host 剩余空间 */
.matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;  /* v3.6.4l：恢复 auto，行跟内容走，不强行 1fr 1fr 撑高 */
  gap: var(--space-3);
  min-height: 0;
}

.matrix__cell {
  background: var(--color-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  min-height: 120px;  /* v3.6.4h: 280→120，避免空 cell 撞高 */
  transition: background 0.15s, border-color 0.15s;
}

.matrix__cell.dropzone--over {
  background: var(--color-blue-100);
  border-color: var(--color-blue-500);
}

.matrix__cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--color-gray-200);
}

.matrix__cell-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}

.matrix__cell-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-normal);
}

.matrix__cell-count {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  padding: 2px var(--space-2);
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.matrix__cell-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
}

.matrix__empty {
  text-align: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
  padding: var(--space-5);
  border: 1px dashed var(--color-gray-200);
  border-radius: var(--radius-base);
}

/* ===== Kanban ===== */
/* v3.6.4i (咸鱼 12:31)：同步加 flex: 1 填满 view-host 剩余高度
   v3.6.4j (咸鱼 12:40)：加 grid-template-rows: 1fr 让 3 列填满 kanban 高（同 matrix j 修复） */
.kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  min-height: 0;
}

.kanban__col {
  background: var(--color-gray-50);
  border-radius: var(--card-radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 120px;  /* v3.6.4h: 280→120 */
  transition: background 0.15s;
}

.kanban__col.dropzone--over { background: var(--color-blue-100); }
.kanban__col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
}

.kanban__col-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}

.kanban__col-count {
  background: var(--color-white);
  color: var(--color-gray-700);
  padding: 2px var(--space-2);
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.kanban__col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kanban__empty {
  text-align: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
  padding: var(--space-5);
  background: var(--color-white);
  border-radius: var(--radius-base);
  border: 1px dashed var(--color-gray-200);
}

/* ===== 项目视图 ===== */
.project-cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.project-col {
  background: var(--color-white);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-4);
  transition: background 0.15s, border-color 0.15s;
  /* v3.4.1b (2026-07-29) — 列容器防御性约束 */
  min-width: 0;
  overflow: hidden;
}

.project-col.dropzone--over {
  background: var(--color-blue-100);
  border-color: var(--color-blue-500);
}

.project-col__head {
  display: flex;
  flex-wrap: wrap; /* v3.4.1b (2026-07-29) — 长 head 允许换行 */
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--color-gray-200);
}

.project-col__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-col__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  flex: 1;
  /* v3.4.1b (2026-07-29) — 长项目名截断 */
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-col__count {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  padding: 2px var(--space-2);
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.project-col__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.project-col__empty {
  text-align: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
  padding: var(--space-5);
  border: 1px dashed var(--color-gray-200);
  border-radius: var(--radius-base);
}

/* ===== 时间轴视图 (v2.1.4) ===== */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-2) 0;
}

.timeline__section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  border-left-width: 4px;
  border-left-style: solid;
}

/* 各桶左侧色带：已过期=红 / 今天=蓝 / 明天=黄 / 本周=蓝浅 / 本月=灰 / 未来=灰 / 无日期=虚线灰 */
.timeline__section[data-timeline-key="overdue"]   { border-left-color: var(--alarm-lvl-1); background: var(--color-red-50); }
.timeline__section[data-timeline-key="today"]     { border-left-color: var(--color-blue-500); }
.timeline__section[data-timeline-key="tomorrow"]  { border-left-color: var(--alarm-lvl-3); }
.timeline__section[data-timeline-key="thisWeek"]  { border-left-color: var(--color-blue-300); }
.timeline__section[data-timeline-key="thisMonth"] { border-left-color: var(--color-gray-400); }
.timeline__section[data-timeline-key="future"]    { border-left-color: var(--color-gray-300); }
.timeline__section[data-timeline-key="noDue"]     { border-left-color: var(--color-gray-300); border-left-style: dashed; }

.timeline__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-200);
}

.timeline__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}

.timeline__section[data-timeline-key="overdue"] .timeline__title { color: var(--alarm-lvl-1); }
.timeline__section[data-timeline-key="today"] .timeline__title   { color: var(--color-blue-500); }

.timeline__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  flex: 1;
}

.timeline__count {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  border-radius: var(--radius-base);
  padding: 2px var(--space-2);
  min-width: 24px;
  text-align: center;
}

.timeline__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.timeline__empty {
  text-align: center;
  color: var(--color-gray-400);
  font-size: var(--font-size-xs);
  padding: var(--space-4);
  border: 1px dashed var(--color-gray-200);
  border-radius: var(--radius-base);
  background: var(--color-gray-50);
}

/* 移动端：保留时间轴堆叠，不强行横向 */
@media (max-width: 640px) {
  .timeline__head { flex-wrap: wrap; }
  .timeline__subtitle { flex: 1 1 100%; order: 3; }
}

/* ===== 任务卡片 ===== */
.task-card {
  background: var(--color-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  cursor: grab;
  position: relative;
  transition: box-shadow 0.18s, transform 0.18s;
  user-select: none;
  /* v3.4.1b (2026-07-29) — 防御性约束，防止项目视图卡片撑爆列宽 / 排序乱 */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.task-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.task-card[draggable="true"]:active {
  cursor: grabbing;
}

.task-card--p0 {
  border-left: 4px solid var(--color-red);
}

.task-card--p0 .task-card__title {
  font-weight: var(--font-weight-bold);
}

.task-card__title {
  font-size: var(--font-size-sm);
  color: var(--color-gray-800);
  margin-bottom: var(--space-2);
  word-break: break-word;
  padding-right: 18px; /* reserve for top-right badge */
  /* v3.4.1b (2026-07-29) — 长标题 2 行截断 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.task-card__desc {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  margin-top: var(--space-2);
  /* v3.4.1b (2026-07-29) — 防御 meta 行溢出 */
  max-width: 100%;
  overflow: hidden;
}

.task-card__project {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.task-card__due {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.task-card__due--over {
  color: var(--color-red);
  font-weight: var(--font-weight-semibold);
}

.task-card__due-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-red);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.15);
}

.task-card__actions {
  display: flex;
  flex-wrap: wrap; /* v3.4.1b (2026-07-29) — 操作按钮换行 */
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-gray-100);
}

.task-card__action {
  background: transparent;
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
  font-size: var(--font-size-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
}
.task-card__action:hover {
  border-color: var(--color-blue-500);
  color: var(--color-blue-500);
}
.task-card__action--danger:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}
.task-card__action--success {
  border-color: var(--color-green-500, #52c41a);
  color: var(--color-green-500, #52c41a);
}
.task-card__action--success:hover {
  background: var(--color-green-50, #f6ffed);
  border-color: var(--color-green-500, #52c41a);
  color: var(--color-green-500, #52c41a);
}

/* v3.4 (2026-07-29, PRD §9) — 实例卡片与 master 接管标记 */
.task-card--instance {
  border-left: 3px solid var(--color-orange-500, #fa8c16);
}
.task-card__instance-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: var(--font-size-sm);
  opacity: 0.7;
}
.task-card__instance-meta {
  font-size: var(--font-size-xs);
  color: var(--color-orange-500, #fa8c16);
  margin-bottom: var(--space-1);
}

/* v3.4.1c (2026-07-29) — 卡片 + drop-gap 合并为单一 grid item */
.task-slot {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.task-slot > .task-card {
  flex: 0 0 auto;
}

.task-slot > .task-drop-gap {
  flex: 0 0 auto;
}

/* v3.4.2 (2026-07-29) — 拖拽重排 gap-zone */
.task-drop-gap {
  height: 4px;
  margin: 2px 0;
  border-radius: 2px;
  transition: height 0.12s ease, background 0.12s ease;
  position: relative;
  cursor: move;
}
.task-drop-gap.dropzone--over {
  height: 12px;
  background: var(--color-blue-100, #e6f7ff);
  border: 1px dashed var(--color-blue-500, #1890ff);
  margin: 4px 0;
}

/* ===== Badge (priority / status) ===== */
.t-prio {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}
.t-prio--P0 { background: var(--color-red-50); color: var(--color-red); }
.t-prio--P1 { background: var(--color-orange-50); color: var(--color-orange); }
.t-prio--P2 { background: var(--color-blue-100); color: var(--color-blue-500); }
.t-prio--P3 { background: var(--color-gray-100); color: var(--color-gray-600); }

.t-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}
.t-status--todo { background: var(--color-gray-100); color: var(--color-gray-700); }
.t-status--doing { background: var(--color-blue-100); color: var(--color-blue-500); }
.t-status--done { background: var(--color-green-50); color: var(--color-green); }

/* ===== Modal ===== */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.modal-mask[hidden] { display: none; }

.modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal--wide { max-width: 820px; }

.modal__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}

.modal__close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--color-gray-500);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-base);
  font-family: inherit;
  line-height: 1;
}
.modal__close:hover { background: var(--color-gray-100); color: var(--color-gray-800); }

.modal__body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.modal__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ===== 表单 ===== */
.form-row {
  margin-bottom: var(--space-4);
}

.form-row__label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-medium);
}

.form-row__label--required::after {
  content: " *";
  color: var(--color-red);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}

.form-row textarea.input {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.form-row__hint {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--space-1);
}

.form-row__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-actions-smart {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ===== Confirm dialog ===== */
.confirm__msg {
  font-size: var(--font-size-base);
  color: var(--color-gray-800);
  white-space: pre-wrap;
  line-height: 1.6;
}

.confirm__msg--danger { color: var(--color-red); }

/* ===== Archive view ===== */
.archive__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.archive__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-base);
}

.archive__item-title {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-gray-800);
  word-break: break-word;
}

.archive__item-meta {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.archive__item-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* ===== Toast ===== */
.toast-host {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  background: var(--color-gray-800);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  animation: toast-in 0.2s ease-out;
  max-width: 80vw;
  pointer-events: auto;
}

.toast--success { background: var(--color-green); }
.toast--error { background: var(--color-red); }
.toast--warning { background: var(--color-orange); color: var(--color-white); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Loading mask ===== */
.loading-mask {
  position: fixed; inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 400;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3);
}
.loading-mask[hidden] { display: none; }

.loading-mask__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--color-blue-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-mask__text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== Empty state 增强 ===== */
.empty-state--block {
  grid-column: 1 / -1;
  padding: var(--space-9);
  text-align: center;
  color: var(--color-gray-500);
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--card-radius);
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; padding: var(--space-2) var(--space-3); }
  .topbar .tabs { order: 3; flex: 1 1 100%; overflow-x: auto; }
  .search { width: 140px; }
  /* v3.6.4j (咸鱼 12:40)：去掉 grid-template-rows: auto，让主 CSS 的 1fr 1fr 生效
     否则小屏 matrix 内部留白（行只占内容高，不填 matrix 剩余高度） */
  .matrix, .kanban { grid-template-columns: 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .modal { max-height: 95vh; }
}

/* ============================================================
 * v2.1 Phase A: 项目 CRUD UI + 3 看板项目筛选
 * ============================================================ */

/* --- 项目筛选条 (5 视图顶部筛选区复用) --- */
.project-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  align-items: center;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-white, #fff);
  border: 1px solid var(--card-border, #e8e8e8);
  border-radius: var(--card-radius, 6px);
  margin-bottom: var(--space-4, 16px);
}
/* v3.2: 自定义时间范围面板 — datetime-local × 2 + 应用/重置
   紧贴时间筛选行下方 (margin-top: -8px 抵消 .project-filter 的 margin-bottom) */
.due-filter__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  margin-top: calc(var(--space-4, 16px) * -0.5);
  margin-bottom: var(--space-4, 16px);
  background: var(--color-gray-100, #fafafa);
  border: 1px solid var(--card-border, #e8e8e8);
  border-radius: var(--card-radius, 6px);
  font-size: var(--font-size-sm, 13px);
}
.due-filter__custom-label {
  color: var(--color-gray-500, #888);
  font-weight: 500;
  margin-right: var(--space-1, 4px);
}
.due-filter__custom-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  color: var(--color-gray-700, #444);
}
.due-filter__custom-field input[type="datetime-local"] {
  padding: 2px var(--space-1, 4px);
  border: 1px solid var(--color-gray-200, #d9d9d9);
  border-radius: var(--radius-sm, 4px);
  font-family: inherit;
  font-size: var(--font-size-sm, 13px);
  background: var(--color-white, #fff);
  color: var(--color-gray-700, #444);
}
.due-filter__custom-field input[type="datetime-local"]:focus {
  outline: 2px solid var(--color-blue-500, #1d5bb5);
  outline-offset: 1px;
  border-color: var(--color-blue-500, #1d5bb5);
}
/* v3.1: 顶部筛选区变成 5 行后，首行加小标签「状态 / 时间」提升扫读性 */
.project-filter__label {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-gray-500, #888);
  font-weight: 500;
  margin-right: var(--space-2, 8px);
  min-width: 36px;
}
/* v3: 多行筛选条相邻时收紧上间距（项目+艾森+采铜 3 行总间距过大问题） */
.project-filter + .project-filter { margin-top: calc(var(--space-4, 16px) * -0.5); }
.project-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 4px var(--space-3, 12px);
  font-size: var(--font-size-sm, 13px);
  background: var(--color-gray-100, #fafafa);
  border: 1px solid var(--color-gray-200, #d9d9d9);
  border-radius: var(--radius-pill, 999px);
  color: var(--color-gray-700, #444);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.project-filter__chip:hover {
  border-color: var(--color-blue-500, #1d5bb5);
  color: var(--color-blue-700, #1a3a6e);
}
.project-filter__chip--active,
.project-filter__chip--active:hover {
  background: var(--color-blue-500, #1d5bb5);
  border-color: var(--color-blue-700, #1a3a6e);
  color: var(--color-white, #fff);
}
.project-filter__chip:focus-visible {
  outline: 2px solid var(--color-blue-500, #1d5bb5);
  outline-offset: 1px;
}
.project-filter__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* --- 项目视图工具栏 --- */
.project-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-white, #fff);
  border: 1px solid var(--card-border, #e8e8e8);
  border-radius: var(--card-radius, 6px);
  margin-bottom: var(--space-4, 16px);
}
.project-toolbar__title {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-800, #333);
  font-size: var(--font-size-md, 14px);
}
.project-toolbar__hint {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-gray-500, #999);
  flex: 1;
}
.project-toolbar__btn--new {
  padding: 6px var(--space-4, 16px);
  background: var(--color-blue-500, #1d5bb5);
  color: var(--color-white, #fff);
  border: none;
  border-radius: var(--radius-base, 4px);
  cursor: pointer;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-medium, 500);
  transition: background 0.15s ease;
}
.project-toolbar__btn--new:hover {
  background: var(--color-blue-700, #1a3a6e);
}
.project-toolbar__btn--new:focus-visible {
  outline: 2px solid var(--color-blue-500, #1d5bb5);
  outline-offset: 2px;
}

/* --- 项目列操作按钮 --- */
.project-col__actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}
.project-col__btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-gray-500, #999);
  border-radius: var(--radius-base, 4px);
  cursor: pointer;
  font-size: var(--font-size-md, 14px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.project-col__btn:hover {
  background: var(--color-gray-100, #fafafa);
  color: var(--color-gray-800, #333);
}
.project-col__btn--del:hover {
  color: var(--color-red-500, #f5222d);
  background: var(--color-red-50, rgba(245, 34, 45, 0.06));
}
.project-col__btn:focus-visible {
  outline: 2px solid var(--color-blue-500, #1d5bb5);
  outline-offset: 1px;
}

/* --- 项目编辑器调色板 --- */
.project-editor__palette {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  align-items: center;
}
.project-editor__swatch {
  width: 28px;
  height: 28px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.project-editor__swatch:hover {
  transform: scale(1.1);
}
.project-editor__swatch--active {
  border-color: var(--color-gray-800, #333);
  box-shadow: 0 0 0 2px var(--color-white, #fff) inset;
}
.project-editor__swatch:focus-visible {
  outline: 2px solid var(--color-blue-500, #1d5bb5);
  outline-offset: 2px;
}

/* ===== Abandon confirm (inline, above modal) ===== */
.abandon-confirm {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abandon-confirm__box {
  background: var(--color-white, #fff);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-5, 20px) var(--space-6, 24px);
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}
.abandon-confirm__msg {
  font-size: var(--text-base, 14px);
  color: var(--color-gray-900, #222);
  text-align: center;
}
.abandon-confirm__actions {
  display: flex;
  gap: var(--space-3, 12px);
  justify-content: center;
}

/* ===== Draft restore bar (inside modal, above form) ===== */
.draft-restore {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-sm, 13px);
  color: var(--color-gray-900, #222);
}
.draft-restore__icon {
  font-size: 16px;
}
.draft-restore__msg {
  flex: 1;
}
.draft-restore__actions {
  display: flex;
  gap: var(--space-2, 8px);
}

/* ===== btn--danger (red primary, used by abandon-confirm) ===== */
.btn--danger {
  background: var(--color-red, #ff4d4f);
  border-color: var(--color-red, #ff4d4f);
  color: var(--color-white, #fff);
}
.btn--danger:hover {
  background: #d9363e;
  border-color: #d9363e;
}

/* ===== Task view (只读查看窗) ===== */
.task-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
}
.task-view__archived {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-sm, 13px);
  color: var(--color-gray-600, #666);
}
.task-view__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-gray-900, #222);
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}
.task-view__badges {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  align-items: center;
}
.task-view__project {
  font-size: var(--text-base, 14px);
  color: var(--color-gray-700, #555);
  padding: var(--space-2, 8px) 0;
  border-bottom: 1px dashed var(--color-gray-200, #eee);
}
.task-view__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.task-view__label {
  font-size: var(--text-xs, 12px);
  color: var(--color-gray-500, #888);
  font-weight: 500;
}
.task-view__content {
  font-size: var(--text-base, 14px);
  color: var(--color-gray-900, #222);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.task-view__section--meta {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--color-gray-200, #eee);
}
.task-view__meta {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  margin-bottom: var(--space-2, 8px);
}
.task-view__tag {
  display: inline-block;
  padding: 2px var(--space-2, 8px);
  background: #f0f7ff;
  border: 1px solid #d6e4ff;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-xs, 12px);
  color: var(--color-blue-700, #1d5bb5);
}
.task-view__time {
  font-size: var(--text-xs, 12px);
  color: var(--color-gray-500, #888);
}

/* v3.4 (2026-07-29, PRD §9) — 实例场景上下文：详情页顶部实例卡 */
.task-view__instance-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  margin-bottom: var(--space-2, 8px);
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: var(--radius-base, 4px);
  font-size: var(--font-size-sm, 13px);
}
.task-view__instance-banner strong { color: var(--color-orange-500, #fa8c16); }
.task-view__instance-due { color: var(--color-gray-700); }

/* ===== Archive item 可点击提示 ===== */
.archive__item {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.archive__item:hover {
  background: #fffbe6;
  border-color: #ffe58f;
}

/* ============================================================
 * ✅ 已完成视图 (v3.3 T6, PRD §8.3)
 * ============================================================ */

/* 视图容器 */
.view-completed {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* 筛选条 */
.completed-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}
.completed-filters__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
}
.completed-filters__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}
.completed-filters__field input,
.completed-filters__field select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-base);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}
.completed-filters__field input:focus,
.completed-filters__field select:focus {
  border-color: var(--color-blue-500);
  outline: none;
}
.completed-filters__spacer { flex: 1; }

/* 表格 */
.completed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.completed-table th,
.completed-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
  vertical-align: middle;
}
.completed-table thead th {
  background: var(--color-gray-50);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-gray-300);
}
.completed-table tbody tr:hover {
  background: var(--color-gray-50);
}
.completed-table__time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  white-space: nowrap;
}
.completed-table__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-800);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.completed-table__desc {
  color: var(--color-gray-600);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.completed-table__empty {
  text-align: center;
  color: var(--color-gray-500);
  padding: var(--space-7) !important;
  font-style: italic;
}
.completed-table__actions {
  white-space: nowrap;
}

/* 来源徽章 */
.source-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.source-badge--normal {
  background: var(--color-blue-100);
  color: var(--color-blue-500);
}
.source-badge--master_instance {
  background: var(--color-green-50);
  color: var(--color-green);
}
.source-badge--orphan {
  background: var(--color-red-50);
  color: var(--alarm-lvl-1);
  border: 1px solid var(--color-orange-200);
}

/* 分页 */
.completed-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-200);
}
.completed-pagination__info {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  font-variant-numeric: tabular-nums;
}

/* === 重复规则编辑器 (v3.3 T4, PRD §8.1) === */
.recurrence-fold {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-3);
  background: var(--color-white);
}
.recurrence-fold > summary {
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  color: var(--color-gray-700);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.recurrence-fold > summary::before {
  content: '🔁';
}
.recurrence-options {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.recurrence-options > label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  display: flex;
  align-items: center;
}
.recurrence-options > .field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.weekday-chips {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.weekday-chip {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-base);
  background: var(--color-white);
  cursor: pointer;
  font-size: var(--font-size-sm);
  user-select: none;
}
.weekday-chip--active {
  background: var(--color-blue-500);
  color: var(--color-white);
  border-color: var(--color-blue-500);
}
.rule-summary {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-base);
  margin-top: var(--space-3);
  font-style: italic;
}
.recurrence-options--hidden { display: none; }

/* ============================================================
 * 🔁 重复任务视图 (v3.3 T5, PRD §8.2)
 * Master 卡片列表 + 实例表格 + D15 底部批量操作栏
 * ============================================================ */

/* 视图容器 */
.view-recurring {
  padding: var(--space-4);
}

/* 顶部条 */
.recurring-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-200);
}
.recurring-header__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.recurring-header__title h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-gray-800);
}
.recurring-header__count {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}
.recurring-header__actions {
  display: flex;
  gap: var(--space-2);
}

/* 空状态 */
.recurring-empty {
  text-align: center;
  padding: var(--space-9) var(--space-4);
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  color: var(--color-gray-600);
}
.recurring-empty__icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}
.recurring-empty__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}
.recurring-empty__hint {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Master 卡片容器 */
.recurring-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Master 卡片 */
.master-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease;
  /* v3.4.1b (2026-07-29) — 防御 master 卡片撑爆父容器 */
  min-width: 0;
}
.master-card:hover {
  box-shadow: var(--shadow-base);
}
.master-card--collapsed .master-card__instances {
  display: none;
}
.master-card--collapsed .rule-summary {
  display: none;
}

.master-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-2) 0;
}
.master-card__title {
  font-weight: var(--font-weight-semibold);
  flex: 1;
  color: var(--color-gray-800);
  font-size: var(--font-size-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.master-card__counts {
  display: inline-flex;
  gap: var(--space-1);
}
.master-card__actions {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* v3.4 (2026-07-29, PRD §8.2) — Master 卡片头部重设 */
.master-card__header--v34 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  cursor: default;
  min-width: 0;
}
.master-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.master-card__title-row .master-card__title {
  flex: 1;
}
.master-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs, 11px);
  max-width: 100%;
  overflow: hidden;
}
.master-card__badges .task-view__tag { font-size: var(--font-size-xs, 11px); }
.master-card__project {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-gray-600);
}
.master-card__expand {
  margin-top: var(--space-2);
  text-align: center;
}
.master-card__instances--v34 .instance-table--history {
  margin-top: var(--space-2);
}

/* 实例表格 */
.master-card__instances {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-100);
  overflow-x: auto;
  max-width: 100%;
  display: block;
}
.instance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.instance-table th,
.instance-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-100);
}
.instance-table thead th {
  background: var(--color-gray-50);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.instance-table tbody tr:hover {
  background: var(--color-gray-50);
}
.instance-table__empty {
  text-align: center;
  padding: var(--space-5) !important;
  color: var(--color-gray-500);
  font-style: italic;
}
.instance-row__actions {
  display: inline-flex;
  gap: var(--space-1);
  white-space: nowrap;
}

/* 状态徽章（与已存在 .status-badge 兼容 + 实例任务专属） */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.status-badge--pending {
  background: var(--color-orange-50, #fff7e6);
  color: var(--color-orange, #d46b08);
}
.status-badge--done {
  background: var(--color-green-50, #f6ffed);
  color: var(--color-green, #389e0d);
}
.status-badge--skipped {
  background: var(--color-gray-100, #f5f5f5);
  color: var(--color-gray-500, #8c8c8c);
}
.status-badge--missed {
  background: var(--color-red-50, #fff1f0);
  color: var(--color-red, #cf1322);
}

/* 按钮尺寸：btn--xs（实例操作行用） */
.btn--xs {
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  min-width: 24px;
}
.btn--xs.btn--success {
  background: var(--color-green, #52c41a);
  color: var(--color-white, #ffffff);
  border-color: var(--color-green, #52c41a);
}
.btn--xs.btn--success:hover {
  background: #73d13d;
  border-color: #73d13d;
}

/* 底部 sticky 批量操作栏 */
.bulk-actions {
  position: sticky;
  bottom: 0;
  margin-top: var(--space-4);
  background: var(--color-white);
  border-top: 2px solid var(--color-blue-500);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 10;
}
.bulk-actions.hidden {
  display: none;
}
.bulk-actions__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-gray-200);
  margin-right: var(--space-2);
}
.bulk-actions__spacer {
  flex: 1;
}

/* 删除 Master 弹窗 */
.delete-master-choice {
  font-size: var(--font-size-sm);
  color: var(--color-gray-800);
}
.delete-master-choice__count {
  margin: var(--space-2) 0;
  color: var(--color-gray-600);
}
.delete-master-choice__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-2);
  cursor: pointer;
  background: var(--color-white);
  transition: background 0.15s ease;
}
.delete-master-choice__option:hover {
  background: var(--color-gray-50);
}
.delete-master-choice__option--danger {
  border-color: var(--color-red-50, #ffa39e);
  background: var(--color-red-50, #fff1f0);
}
.delete-master-choice__option--danger:hover {
  background: #ffccc7;
}
.delete-master-choice__option input[type="radio"] {
  margin-top: 3px;
}

/* ==================== v3.5 打卡/习惯 ==================== */
.habit-page{max-width:800px;margin:0 auto;padding:var(--space-4);display:flex;flex-direction:column;min-height:calc(100vh - var(--size-navbar-height) - var(--size-tab-height))}
@media(max-width:480px){.habit-page{padding:var(--space-2)}}
.habit-page__empty{text-align:center;padding:var(--space-8) var(--space-4);color:var(--color-gray-500)}
.habit-page__empty-icon{font-size:48px;margin-bottom:var(--space-3)}
.habit-page__empty-text{font-size:var(--font-size-base);color:var(--color-gray-500)}
.habit-page__cards{flex:1;padding-bottom:var(--space-4)}
.habit-hero{text-align:center;padding:var(--space-5)}
.habit-hero__text{margin-top:var(--space-2)}
.habit-hero__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-gray-700)}
.habit-hero__subtitle{font-size:var(--font-size-sm);color:var(--color-gray-500);margin-top:var(--space-1)}
.habit-progress-ring{transform:rotate(-90deg);display:inline-block}
.habit-card{background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--space-4);margin:var(--space-2) 0;display:flex;align-items:center;transition:box-shadow .18s,transform .18s}
.habit-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.habit-card__icon{font-size:var(--font-size-xl);margin-right:var(--space-3);flex-shrink:0;width:32px;text-align:center}
.habit-card__body{flex:1;min-width:0}
.habit-card__title{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-gray-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.habit-card__streak{font-size:var(--font-size-xs);color:var(--color-gray-500);margin-top:var(--space-1)}
.habit-card__check-circle{width:32px;height:32px;border-radius:50%;border:2px solid var(--color-gray-300);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-left:var(--space-3);font-size:16px;font-weight:var(--font-weight-bold);color:var(--color-white);transition:background .15s,border-color .15s}
.habit-card__check-circle:hover{border-color:var(--color-blue-500)}
.habit-card__check-circle--done{background:var(--color-blue-500);border-color:var(--color-blue-500)}

/* 底部 sticky */
.habit-page__footer{position:sticky;bottom:0;padding:var(--space-4);background:var(--color-white);border-top:1px solid var(--color-gray-200);margin:0 calc(-1 * var(--space-4))}
@media(max-width:480px){.habit-page__footer{margin:0 calc(-1 * var(--space-2))}}
.habit-page__manage-btn{width:100%;padding:var(--space-3);background:var(--color-blue-500);color:var(--color-white);border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--font-size-base);font-family:inherit;transition:background .15s}
.habit-page__manage-btn:hover{background:var(--color-blue-700)}
.habit-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ==================== v3.5 管理附页面 ==================== */
.habits-manage{padding:var(--space-4);max-width:800px;margin:0 auto}
.habits-manage__header{display:flex;align-items:center;margin-bottom:var(--space-4)}
.habits-manage__back{margin-right:var(--space-3);background:none;border:none;cursor:pointer;font-size:var(--font-size-md);color:var(--color-blue-500);padding:var(--space-1) var(--space-2);border-radius:var(--radius-base);font-family:inherit}
.habits-manage__back:hover{background:var(--color-gray-100)}
.habits-manage__title{display:inline-block;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-gray-800);margin:0;flex:1}
.habits-manage__create-btn{float:right;background:var(--color-blue-500);color:var(--color-white);border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-family:inherit;transition:background .15s}
.habits-manage__create-btn:hover{background:var(--color-blue-700)}
.habits-manage__list{margin-top:var(--space-6)}
.habits-manage__row{border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);background:var(--color-white)}
.habits-manage__row-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:var(--space-2,8px)}
.habits-manage__row-title{font-weight:var(--font-weight-medium);font-size:var(--font-size-base);color:var(--color-gray-800)}
/* v3.6.3 (2026-07-30, Bug #6.4)：描述文字在标题下方，颜色淡一些 */
.habits-manage__row-desc{font-size:var(--font-size-xs,12px);color:var(--color-gray-500,#888);line-height:1.4;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.habits-manage__row-delete{color:var(--color-red);background:none;border:none;cursor:pointer;font-size:var(--font-size-sm);padding:var(--space-1) var(--space-2);border-radius:var(--radius-base);font-family:inherit}
.habits-manage__row-delete:hover{background:var(--color-red-50)}
/* v3.6.3 (2026-07-30, Bug #6.5)：编辑按钮（不显眼，文字链接风格） */
.habits-manage__row-edit{color:var(--color-gray-500,#888);background:none;border:none;cursor:pointer;font-size:var(--font-size-sm);padding:var(--space-1) var(--space-2);border-radius:var(--radius-base);font-family:inherit}
.habits-manage__row-edit:hover{color:var(--color-gray-700,#444);background:var(--color-gray-100)}
.habits-manage__row-actions{display:flex;align-items:center;gap:var(--space-1,4px)}
.habits-manage__row-title-block{flex:1;min-width:0}
.habits-manage__row-calendar{margin-top:var(--space-3)}
.habits-manage__empty{text-align:center;padding:var(--space-9);color:var(--color-gray-500)}
.habits-manage__empty-icon{font-size:48px;margin-bottom:var(--space-3)}
.habits-manage__empty-text{font-size:var(--font-size-base);color:var(--color-gray-500);margin-bottom:var(--space-4)}
.habits-manage__calendar-error{color:var(--color-red);font-size:var(--font-size-sm);padding:var(--space-2);text-align:center}

/* ==================== v3.5 习惯日历 ==================== */
.habit-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}
.habit-calendar__header{grid-column:1/-1;display:flex;justify-content:center;padding:var(--space-2) 0}
.habit-calendar__month-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-gray-700)}
.habit-calendar__grid{grid-column:1/-1;display:contents}
.habit-calendar__weekday{text-align:center;font-size:var(--font-size-xs);color:var(--color-gray-500);padding:var(--space-1) 0;font-weight:var(--font-weight-medium)}
.habit-calendar__day{text-align:center;padding:var(--space-2) var(--space-1);font-size:var(--font-size-xs);border-radius:var(--radius-base);color:var(--color-gray-700)}
.habit-calendar__day--empty{visibility:hidden}
.habit-calendar__date{display:block;line-height:1.4}
/* v3.6.1 — 内层 dot 已废弃：状态由 day 圆圈表达（dot CSS 留作 fallback） */
.habit-calendar__dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-top:var(--space-1)}
/* v3.6.1 — 3 状态：圈住日期 = status（day 修饰类） */
.habit-calendar__day--checked{background:var(--color-green-500,#52c41a);border:2px solid var(--color-green-500,#52c41a);border-radius:50%;color:var(--color-white,#fff)}
.habit-calendar__day--checked .habit-calendar__dot{display:none}
.habit-calendar__day--missed{background:var(--color-white,#fff);border:2px solid var(--color-gray-300,#d9d9d9);border-radius:50%;color:var(--color-gray-400,#bfbfbf)}
.habit-calendar__day--missed .habit-calendar__dot{display:none}
.habit-calendar__day--due{background:var(--color-white,#fff);border:2px solid var(--color-gray-900,#1a1a1a);border-radius:50%;color:var(--color-gray-900,#1a1a1a)}
.habit-calendar__day--due .habit-calendar__dot{display:none}
/* v3.8.6 — 已跳过（手动跳过 / 规则配置跳过特定日期）：斜线删除线 + 浅灰 */
.habit-calendar__day--skipped{background:var(--color-white,#fff);border:2px dashed var(--color-gray-400,#bfbfbf);border-radius:50%;color:var(--color-gray-400,#bfbfbf);text-decoration:line-through}
.habit-calendar__day--skipped .habit-calendar__dot{display:none}
.habit-calendar__error{color:var(--color-red);font-size:var(--font-size-sm);padding:var(--space-4);text-align:center}

/* ==================== v3.5 习惯弹窗 ==================== */
.habit-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center}
.habit-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.habit-modal__dialog{position:relative;background:var(--color-white);max-width:500px;width:calc(100% - var(--space-6));margin:64px auto;border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-lg);max-height:85vh;overflow-y:auto}
@media(max-width:480px){.habit-modal__dialog{margin:var(--space-4) auto;padding:var(--space-4)}}
.habit-modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}
.habit-modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-gray-800);margin:0}
.habit-modal__close{background:none;border:none;cursor:pointer;font-size:var(--font-size-xl);color:var(--color-gray-500);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-base);font-family:inherit;line-height:1}
.habit-modal__close:hover{background:var(--color-gray-100);color:var(--color-gray-800)}
.habit-modal__body{margin-bottom:var(--space-6)}
.habit-modal__field{margin-bottom:var(--space-4)}
.habit-modal__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-gray-600);margin-bottom:var(--space-1)}
.habit-modal__title-input,.habit-modal__desc-input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:inherit;box-sizing:border-box}
.habit-modal__title-input:focus,.habit-modal__desc-input:focus{outline:none;border-color:var(--color-blue-500);box-shadow:0 0 0 2px var(--color-blue-100)}
.habit-modal__rule-chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.habit-modal__footer{display:flex;justify-content:flex-end;gap:var(--space-2)}

/* ==================== v3.5 筛选收缩面板 ==================== */
.filter-panel{margin-bottom:var(--space-3)}
.filter-panel--collapsed{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-md)}
.filter-panel__summary{color:var(--color-gray-500);font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:var(--space-2)}
.filter-panel__expand-btn{background:none;border:none;cursor:pointer;color:var(--color-blue-500);font-size:var(--font-size-sm);font-family:inherit;padding:var(--space-1) var(--space-2);border-radius:var(--radius-base)}
.filter-panel__expand-btn:hover{background:var(--color-blue-100)}
.filter-panel--expanded{padding:var(--space-3);background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-md)}
/* v3.6.4g (咸鱼 11:35 反馈)：flex 不管用，换 CSS Grid 强制等宽
   根因：flex 算法用 hypothetical main size = max(basis, content-width) 判断 wrap
        时间/艾森/采铜 内容宽 ~500-600px > 25% basis = 300px
        flex 算法按 content-width wrap，4 块不能 fit 一行 (50+25+25+42+42 = 184% > 100%)
        → 4 块 wrap 成 3+2，flex-grow 把它们拉开成不等宽
   修复：grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
        强制每列均分容器宽度（无视内容宽度） */
.filter-panel__controls{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 4px;
  align-items: start;
  margin-bottom: 4px;
}
.filter-panel__collapse-btn{background:none;border:none;cursor:pointer;color:var(--color-gray-500);font-size:var(--font-size-xs);font-family:inherit;padding:var(--space-1) var(--space-2);border-radius:var(--radius-base)}
.filter-panel__collapse-btn:hover{background:var(--color-gray-200)}

/* 卡片底部连续进度条（v3.6.1 Ex-5 — 替换 v3.6 D5=B 7 天点状周视图） */
.habit-card__progress{height:6px;background:var(--color-gray-100,#f5f5f5);border-radius:3px;overflow:hidden;width:100%;position:relative}
.habit-card__progress-bar{height:100%;background:var(--color-primary);border-radius:3px;transition:width .3s ease;min-width:0}
@media(max-width:600px){.habit-card{padding:var(--space-3)}.habit-card__icon{width:28px;font-size:var(--font-size-lg);margin-right:var(--space-2)}.habit-card__check-circle{width:28px;height:28px}}
@media(max-width:480px){.habits-manage{padding:var(--space-2)}.habits-manage__title{font-size:var(--font-size-lg)}.habit-calendar__day{padding:var(--space-1) 2px;font-size:11px}}

/* ============================================================
 * v3.5 打卡/习惯视图样式（PRD §2 主页面 + §3 附页面 + §6 筛选收缩）
 * ============================================================ */

/* ===== 主页面 #habits ===== */
.habit-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Hero 区（进度环 + 文字） */
.habit-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-blue-100) 100%);
  border-radius: var(--radius-lg);
}
.habit-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.habit-hero__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.habit-hero__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* 进度环 SVG */
.habit-progress-ring {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.habit-progress-ring__track {
  stroke: var(--color-gray-200);
}
.habit-progress-ring__fill {
  stroke: var(--color-primary);
  transition: stroke-dasharray 0.3s ease;
}

/* 卡片流 */
.habit-page__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.habit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* v3.6.6（2026-07-31 10:30）— 明确 align-items: stretch，覆盖老声明的 center
   * 原因：老 .habit-card (line 1912) 有 align-items:center，新声明未设，cascade 后仍生效
   *       导致 __main/__footer 在 card 里水平居中（不撑满），肉眼看到“图标+文字+按钮挤中间” */
  align-items: stretch;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s ease;
}
/* 卡片上半部：图标 + 主体（标题/描述/连续天数） + 打勾圆 横向一行 */
.habit-card__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* v3.6.6（2026-07-31 10:20）— 明确 flex-start，图标组固定靠最左，body 靠 flex:1 撑满中间，✓ 按钮靠最右 */
  justify-content: flex-start;
}
/* 卡片底部 footer（v3.6.1 Ex-5）：承载 .habit-card__progress 连续进度条
 * .habit-card 为 flex column，gap: var(--space-2)，footer 自然贴底 */
.habit-card__footer {
  /* 预留 hook：后续可在 footer 加数字标签 / hover 详情等扩展 */
  display: block;
  width: 100%;
}
.habit-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.habit-card--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.habit-card__icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}
.habit-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.habit-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v3.6.6（2026-07-31 10:20）— 习惯描述：主页面需显示，样式介于 title 和 streak 之间
 * - 字号 xs、颜色 gray-500（与 streak 同级）
 * - line-clamp: 2（超过 2 行省略，避免撑高卡片）
 * - word-break: break-word（中文长句/URL 不溢出）
 */
.habit-card__desc {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
}
.habit-card__streak {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}
.habit-card__check-circle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--color-gray-300);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.habit-card__check-circle:hover {
  border-color: var(--color-primary);
}
.habit-card__check-circle--done {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* 空状态 */
.habit-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--color-gray-500);
}
.habit-page__empty-icon {
  font-size: 48px;
}
.habit-page__empty-text {
  font-size: var(--font-size-base);
}

/* 底部按钮 */
.habit-page__footer {
  position: sticky;
  bottom: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
}
/* v3.6.1 Ex-5 — 降低视觉权重（透明背景 + 灰边框 + 灰文字）
 * 原为蓝色实心按钮（视觉中心）；改为边框样式，让卡片仍是页面主角 */
.habit-page__manage-btn {
  width: 100%;
  padding: var(--space-3);
  background: transparent;
  color: var(--color-gray-700, #333);
  border: 1px solid var(--color-gray-300, #d9d9d9);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.habit-page__manage-btn:hover {
  background: var(--color-gray-100, #f5f5f5);
  border-color: var(--color-gray-400, #bfbfbf);
}

/* ===== 附页面 #habits/manage ===== */
.habits-manage {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.habits-manage__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.habits-manage__back {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
  font-family: inherit;
}
.habits-manage__back:hover {
  background: var(--color-gray-100);
}
.habits-manage__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  flex: 1;
}
.habits-manage__create-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-sm);
}
.habits-manage__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.habits-manage__row {
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.habits-manage__row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.habits-manage__row-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  flex: 1;
}
.habits-manage__row-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-red-500);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-base);
  font-family: inherit;
  font-size: var(--font-size-sm);
}
.habits-manage__row-delete:hover {
  background: var(--color-red-50);
}
.habits-manage__row-calendar {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-100);
}
.habits-manage__calendar-error {
  color: var(--color-red-500);
  font-size: var(--font-size-sm);
  padding: var(--space-2);
}
.habits-manage__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--color-gray-500);
}
.habits-manage__empty-icon {
  font-size: 48px;
}
.habits-manage__empty-text {
  font-size: var(--font-size-base);
}

/* ===== 月历 ===== */
.habit-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.habit-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
}
.habit-calendar__month-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.habit-calendar__weekday {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}
.habit-calendar__grid {
  display: grid !important; /* 覆盖 v3.5 旧 display:contents */
  /* v3.6.3 修复（2026-07-31 09:52）— minmax(0,1fr) 允许列收缩到内容宽度以下，
   * 防止 span min-width 把 7 列撑出容器、最后一列（31 号）被 overflow:hidden 裁掉 */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* v3.6.1 优化 C（2026-07-31）— gap 从 space-1 提到 space-2 (8px)，圆圈之间更透气 */
  gap: var(--space-2);
}
.habit-calendar__day {
  aspect-ratio: 1;
  /* v3.6.3 修复（2026-07-31 09:52）— min-width:0 允许 cell 收缩，避免被内部 span 撑宽 */
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  color: var(--color-gray-700);
}
.habit-calendar__day--empty {
  visibility: hidden;
}
/* v3.6.1 — 内层 dot 已废弃：状态由 day 圆圈表达（仅作 fallback） */
.habit-calendar__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gray-300);
}

/* v3.6.1 (2026-07-30) — 3 状态：圈住日期
 * --checked  绿色实心圆（已打卡，亮眼识别）
 * --missed   浅灰空心圆（应打未打，温和识别）
 * --due      黑色空心圆（未来待打，醒目提示）
 * 注：'not_due' 不渲染修饰类，默认日样式即非应打
 */
/* v3.6.1 修复 v2（2026-07-31 09:30）— 圆圈下沉到内层 date span，圆 = 正圆
 * v1 教训：圆写在 cell 上，cell 是 grid item，行高被同行最高内容（日期文字 ~16px）压缩，
 *        aspect-ratio:1 在 grid item + display:flex 组合下被 align-self:stretch 覆盖，
 *        结果变成 35×16 的椭圆。
 * v2 方案：cell 保持正方形（base aspect-ratio:1 不动），圆移到 .habit-calendar__date 内层，
 *        span 不受 grid 行高约束，aspect-ratio:1 正常生效 → 真正的正圆。
 *        比例：clamp(24px, 78%, 36px)，margin:auto 居中，四周留呼吸空间。
 */
.habit-calendar__day--checked,
.habit-calendar__day--missed,
.habit-calendar__day--due {
  /* cell 本身保持透明/无样式，只是 inline-flex 容器的父 */
  background: transparent;
  border: none;
  border-radius: 0;
}

.habit-calendar__day--checked .habit-calendar__date,
.habit-calendar__day--missed .habit-calendar__date,
.habit-calendar__day--due .habit-calendar__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 78%, 36px);
  /* v3.6.3 修复（2026-07-31 09:52）— max-width:100% 保证圆不超 cell，窄容器不溢出 */
  max-width: 100%;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 50%;
  line-height: 1;
  /* v3.6.1 优化 B（2026-07-31）— 状态切换/hover 0.2s 缓动 */
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  cursor: pointer;
}

/* v3.6.1 优化 A（2026-07-31）— hover 微放大 + 阴影，3 状态统一 */
.habit-calendar__day--checked:hover .habit-calendar__date,
.habit-calendar__day--missed:hover .habit-calendar__date,
.habit-calendar__day--due:hover .habit-calendar__date {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.habit-calendar__day--checked .habit-calendar__date {
  /* v3.6.5（2026-07-31 10:03）— 回退 v3.6.4 的实心+图标，改回空心圆
   * 绿色空心：白底 + 绿边 + 绿字
   */
  background: var(--color-white, #fff);
  border: 2px solid #52c41a;
  color: #389e0d;
}
.habit-calendar__day--checked:hover .habit-calendar__date {
  box-shadow: 0 2px 10px rgba(82, 196, 26, .35);
}
.habit-calendar__day--checked .habit-calendar__dot { display: none; }

.habit-calendar__day--missed .habit-calendar__date {
  /* v3.6.5（2026-07-31 10:03）— 淡橙空心：白底 + 淡橙边 + 深橙字 */
  background: var(--color-white, #fff);
  border: 2px solid #ffbb96;
  color: #d46b08;
}
.habit-calendar__day--missed .habit-calendar__dot { display: none; }

.habit-calendar__day--due .habit-calendar__date {
  background: var(--color-white, #fff);
  border: 2px solid var(--color-gray-900, #1a1a1a);
  color: var(--color-gray-900, #1a1a1a);
}
.habit-calendar__day--due .habit-calendar__dot { display: none; }

/* v3.6.5（2026-07-31 10:03）— not_due 保留之前的浅灰文字 */
.habit-calendar__day:not(.habit-calendar__day--empty):not(.habit-calendar__day--checked):not(.habit-calendar__day--missed):not(.habit-calendar__day--due) .habit-calendar__date {
  color: var(--color-gray-400, #bfbfbf);
  opacity: .85;
}

/* ===== 弹窗（新建/编辑习惯） ===== */
.habit-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.habit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.habit-modal__dialog {
  position: relative;
  background: var(--color-white);
  max-width: 480px;
  width: 90%;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 85vh;
  overflow-y: auto;
}
.habit-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.habit-modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.habit-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--color-gray-500);
  padding: var(--space-1);
  border-radius: var(--radius-base);
  font-family: inherit;
}
.habit-modal__close:hover {
  background: var(--color-gray-100);
}
.habit-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.habit-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.habit-modal__label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}
.habit-modal__title-input,
.habit-modal__desc-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-family: inherit;
  box-sizing: border-box;
}
.habit-modal__title-input:focus,
.habit-modal__desc-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.habit-modal__desc-input {
  resize: vertical;
  min-height: 60px;
}
.habit-modal__rule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.habit-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-100);
}
.habit-modal__save,
.habit-modal__cancel {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  cursor: pointer;
  font-family: inherit;
  border: none;
}
.habit-modal__save {
  background: var(--color-primary);
  color: var(--color-white);
}
.habit-modal__save:hover {
  opacity: 0.9;
}
.habit-modal__cancel {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}
.habit-modal__cancel:hover {
  background: var(--color-gray-200);
}

/* ===== v3.6 (2026-07-30, D6=A) — 习惯管理页面日历 3 月并排 + 左右切换 ===== */
.habit-calendar--triple {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}
.habit-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) 0;
}
.habit-calendar__nav-btn {
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-300, #d9d9d9);
  border-radius: var(--radius-base, 4px);
  font-size: var(--font-size-sm, 14px);
  color: var(--color-gray-700, #333);
  cursor: pointer;
  font-family: inherit;
}
.habit-calendar__nav-btn:hover {
  background: var(--color-gray-100, #f5f5f5);
  border-color: var(--color-primary, #1d5bb5);
  color: var(--color-primary, #1d5bb5);
}
.habit-calendar__current-label {
  font-size: var(--font-size-lg, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-900, #1a1a1a);
}
.habit-calendar__triple-grid {
  display: grid;
  /* minmax(0, 1fr) 防止 3 月并排被 row 内容撑出边界（D6=B v3.6.1 修复） */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2, 8px);
}
.habit-calendar__month {
  border: 1px solid var(--color-gray-200, #f0f0f0);
  border-radius: var(--radius-base, 4px);
  padding: var(--space-2, 8px);
  background: var(--color-white, #fff);
  /* v3.6.1 — minmax(0, 1fr) 生效需要 grid item min-width=0 */
  min-width: 0;
  overflow: hidden; /* 隐藏 grid:contents 泄露 */
}
.habit-calendar__month-header {
  text-align: center;
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--color-gray-100, #f5f5f5);
  margin-bottom: var(--space-2, 8px);
}
.habit-calendar__month-label {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-gray-700, #333);
}
.habit-calendar__month[data-month-role="current"] {
  border-color: var(--color-primary, #1d5bb5);
  box-shadow: 0 0 0 1px var(--color-primary, #1d5bb5);
}
@media (max-width: 768px) {
  .habit-calendar__triple-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 兼容类（subagent 偶尔生成非 BEM 样式） ===== */
.habit-modal-close,
.habit-modal-save {
  /* 兼容 fallback，理论不会触发 */
}
.habit-delete,
.habit-toggle {
  /* 兼容老数据 attribute */
  cursor: pointer;
}

/* ==================== v3.6 筛选面板交互改造（D3=A · D7=C） ==================== */
/* 整行可点击 + hover 高亮（D3=A） */
/* 背景变化让用户感知可点击；弱化 ⤵ 提示保留视觉引导 */
.filter-panel--collapsed {
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.filter-panel--collapsed:hover {
  background: var(--color-blue-50, #f0f7ff);
  border-color: var(--color-blue-200, #bae0ff);
}
.filter-panel--collapsed:active {
  background: var(--color-blue-100, #e6f4ff);
}

/* 弱化展开提示（D3=A）：span 不是 button，避免双重点击 */
.filter-panel__expand-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  color: var(--color-gray-400, #bfbfbf);
  font-size: var(--font-size-xs, 12px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-base, 4px);
  transition: color .15s ease, background-color .15s ease;
  user-select: none;
  pointer-events: none;  /* span 不响应点击，避免与外层 div 事件冲突 */
}
.filter-panel--collapsed:hover .filter-panel__expand-hint {
  color: var(--color-blue-500, #1890ff);
  background: var(--color-blue-100, #e6f4ff);
}

/* 弱化收起提示（D3=A 同步）：保持按钮功能，但视觉一致 */
.filter-panel__collapse-hint {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-gray-400, #bfbfbf);
  font-size: var(--font-size-xs, 12px);
  font-family: inherit;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-base, 4px);
  transition: color .15s ease, background-color .15s ease;
}
.filter-panel__collapse-hint:hover {
  color: var(--color-gray-700, #404040);
  background: var(--color-gray-200, #f0f0f0);
}

/* v3.6.4 (2026-07-31)：筛选块紧凑化（去掉 80px min-height + 收紧 padding · 咸鱼 10:35 反馈）
   - 去掉 min-height: 80px → 让内容决定高度（4 块不再被强行拉到 80px+）
   - padding 8px → 4px(上下) 8px(左右) → 上下各省 4px
   - 父容器 align-items: flex-start → 4 块不被 stretch 撑高，状态块自然矮
   - 历史：D7=C 曾要求统一 80px 高度对齐 4 块，但 80px 过大 + stretch 导致 状态 块空白
           现在改为各块自然高度 + 4px 紧凑 padding，整体更紧凑 */
.filter-panel__controls > .project-filter {
  margin-top: 0;  /* v3.6.4c (咸鱼 11:05 反馈)：覆盖 base 的 .project-filter + .project-filter { margin-top: -8px }
                     原规则给项目 CRUD 页 3 块垂直堆叠时收紧间距，filter panel 里 4 块是横向 flex 排列，
                     非首块被往上拉 8px，导致 状态 块(首)总比 时间/艾森/采铜 低 8px */
  margin-bottom: 0;  /* 同步覆盖 base 的 margin-bottom: 16px，filter 内用父 gap 控间距 */
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-100, #f5f5f5);
  border-radius: var(--radius-md, 6px);
  min-width: 0;   /* grid item 默认 min-width: auto 会被内容撑超 1fr，置 0 让 grid 严格均分 */
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;  /* v3.6.4d (咸鱼 11:10 反馈)：行间 4px 太挤，uniform 调到 6px（原 base 8px→v3.6.4 4px→v3.6.4d 6px） */
  box-sizing: border-box;
  overflow: hidden;  /* 防止超 1fr 的内容溢出布局 */
}

/* v3.6.4：筛选块内 chip 紧凑化（4px → 2px 上下，12px → 10px 左右） */
.filter-panel__controls > .project-filter .project-filter__chip {
  padding: 2px 10px;
}

/* v3.6.4 (咸鱼 10:44 反馈)：状态/时间 块上边缘总比艾森/采铜低 2-3px
   根因：__label 是 <span> 默认 inline，文字基线 ~y=14；chip 是 <button> padding 2+文字居中，文字基线 ~y=12
        同一行内 label 文字明显偏低，肉眼看像 块 被往下推
   修复：label 也变 inline-flex + 居中 + min-height 22px（与 chip 同），文字与 chip 文字同 y */
.filter-panel__controls > .project-filter .project-filter__label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;  /* 与 chip 内容高度对齐 (2+13+2+border ≈ 20-22px) */
  line-height: 1;    /* 避免默认 1.2 line-height 撑高 label */
}

/* v3.6.4p (咸鱼 15:18 反馈)：去掉内联 .due-filter__custom 面板
   根因：v3.6.4n 的「点击 panel 外部 blur 关 picker」会被筛选面板收缩事件拦截
         （panel 整行可点击收起，点 panel padding/collapse-hint 会折叠面板）
   修复：取消内联面板，改用独立的 due-filter-modal（见 index.html + app.js）
         自定义 chip 点击 → 打开 modal；chip 文本返显已选日期范围 */

/* ===== v3.6.4p due-filter 弹窗字段样式 ===== */
.modal--narrow { max-width: 460px; }

.due-modal__hint {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm, 13px);
  line-height: 1.5;
}

.due-modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}

.due-modal__field {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

.due-modal__label {
  flex: 0 0 auto;
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  font-size: var(--font-size-md, 14px);
  min-width: 32px;
}

.due-modal__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--color-gray-300, #d9d9d9);
  border-radius: var(--radius-base, 4px);
  font-family: inherit;
  font-size: var(--font-size-md, 14px);
  background: var(--color-white, #fff);
  color: var(--color-gray-800);
  box-sizing: border-box;
}
.due-modal__input:focus {
  outline: 2px solid var(--color-blue-500, #1d5bb5);
  outline-offset: 1px;
  border-color: var(--color-blue-500, #1d5bb5);
}

/* 快捷选择 chips */
.due-modal__quickpick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--color-gray-200, #e8e8e8);
}
.due-modal__quickpick-label {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-gray-500);
  margin-right: var(--space-1, 4px);
}
.due-modal__quickpick-chip {
  padding: 3px 10px;
  border: 1px solid var(--color-gray-300, #d9d9d9);
  border-radius: var(--radius-base, 4px);
  background: var(--color-white, #fff);
  color: var(--color-gray-700);
  font-size: var(--font-size-xs, 12px);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.due-modal__quickpick-chip:hover {
  background: var(--color-blue-100);
  border-color: var(--color-blue-500);
  color: var(--color-blue-500);
}

/* 自定义 chip 返显已选范围（v3.6.4p）：echo 样式略窄 + tooltip 显示完整 */
.project-filter__chip--echo {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
 * v3.6 习惯模块 CSS 补全 + 关键 var 兜底（ex-2, 2026-07-30）
 *
 * 根因汇总（先 grep 再动手 — 每个 bug 的真实原因）：
 *
 *   Bug 1 (管理习惯按钮白底白字)
 *     - CSS 已存在（line 1925/2148 都有 .habit-page__manage-btn）
 *     - 但 background: var(--color-primary) → --color-primary 从未定义
 *     - 解法：定义 --color-primary 兜底（不修改 v3.5 已写好的 CSS）
 *
 *   Bug 2 (顶部进度环百分比竖排)
 *     - 旧 v3.5 compact CSS (line 1911) 给 .habit-progress-ring 加了
 *       transform: rotate(-90deg)，整个 SVG（含 <text>）跟着旋转 -90°
 *     - 解法：在末尾追加新规则覆盖 transform: none + 给 SVG text 加
 *       writing-mode: horizontal-tb 兜底
 *
 *   Bug 3 (实心圆对勾不可见)
 *     - CSS 已存在（line 2119 .habit-card__check-circle--done）
 *     - 但 background: var(--color-primary) 同样未定义 → 圈没填充
 *     - 解法：定义 --color-primary 即可
 *
 *   Bug 4 (新建习惯按钮看不到)
 *     - CSS 已存在（line 2199 .habits-manage__create-btn）
 *     - 同样 --color-primary 未定义
 *
 *   Bug 5 (弹窗确认按钮看不到)
 *     - CSS 已存在（line 2436 .habit-modal__save）
 *     - .habit-modal__save 与 .btn--primary 同特异性，但 .habit-modal__save
 *       在 style.css 后定义，胜出 → background: var(--color-primary) 生效
 *     - 同样 --color-primary 未定义
 *     - 解法：定义 --color-primary（最小改动原则）
 *
 *   Bug 6 (卡片缺描述 + 进度条)
 *     - CSS 已部分存在（.habit-card__progress 在 line 1962）
 *     - 但 HTML 模板 line 978-985 完全没有 __desc 和 __progress 节点
 *     - 解法：HTML 模板补节点 + CSS 补 .habit-card__desc + 7 天周视图
 * ============================================================ */

/* ---- 设计 token 兜底：--color-primary 在 vendor/tokens.css 中未定义 ---- */
/* 仅当 vendor/tokens.css 没定义时生效（CSS variables 是后定义胜出）；
 * 习惯模块 CSS 用了 --color-primary，必须兜底，否则按钮全不可见。
 * 取色与 vendor/common.css .btn--primary 一致 → var(--button-primary-bg)
 * → var(--color-blue-500) = #1d5bb5，保持视觉一致。 */
:root {
  --color-primary: var(--color-blue-500, #1d5bb5);
  --color-primary-hover: var(--color-blue-700, #1a3a6e);
  --color-green-500: #52c41a;
}

/* ---- 进度环 transform 修复（Bug 2） ---- */
/* 旧 v3.5 compact CSS 在 .habit-progress-ring 加了 transform: rotate(-90deg)，
 * 导致整个 SVG（含文字）旋转 -90° → "100%" 横排文字看起来是竖排。
 * 这里用更高优先级的 transform: none 覆盖，环本身的圆环旋转由 SVG
 * 内部 <circle transform="rotate(-90, 48, 48)"> 处理，不影响文字。 */
.habit-progress-ring {
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.habit-progress-ring svg text {
  writing-mode: horizontal-tb;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ---- 卡片描述（D4=A：常驻显示，2 行截断） ---- */
.habit-card__desc {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-gray-600, #595959);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  margin-top: 2px;
}
.habit-card__desc:empty {
  display: none;
}

/* ---- 卡片打勾圆旁的小状态色块（预留 / 兼容扩展） ---- */
.habit-card__check-state {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 4px;
  vertical-align: middle;
}
.habit-card__check-state--checked {
  background: var(--color-green-500, #52c41a);
}
.habit-card__check-state--missed {
  background: var(--color-gray-300, #d9d9d9);
}
.habit-card__check-state--future {
  background: var(--color-gray-400, #bfbfbf);
}
.habit-card__check-state--not-due {
  background: var(--color-gray-100, #f5f5f5);
  border: 1px solid var(--color-gray-200, #f0f0f0);
}

/* ---- 关键按钮 hover 加深（兜底 vendor 无 hover 时的体验） ---- */
/* 当 --color-primary 是有效色时，opacity: 0.9 即可；这里额外加深蓝色版，
 * 避免某些浏览器 opacity 渲染异常。注释保留，不激活。 */
/* .habit-page__manage-btn:hover,
.habits-manage__create-btn:hover,
.habit-modal__save:hover { background: var(--color-primary-hover); } */

/* ---- 移动端微调（习惯卡片专属，避开公共卡片） ---- */
@media (max-width: 480px) {
  .habit-card__desc {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
}

/* ==================== v3.6.1 筛选面板展开态整行可点（Ex-4 P3 · Bug 2 修复） ==================== */
/* 根因汇总：
 * Bug 2（咸鱼 2026-07-30 11:22）：之前 <button class="filter-panel__collapse-btn">⤴ 收起</button>
 *   必须精准点中按钮才能触发收起，用户反馈"点不动"。
 *   app.js renderFilterPanelExpanded 已把 data-action + data-view-id 提到外层 div。
 *   这里 CSS 配套：
 *   1) .filter-panel--expanded 加 cursor: pointer + hover 高亮（与 .filter-panel--collapsed 一致）
 *   2) .filter-panel__collapse-hint 加 pointer-events: none（span 不响应点击，避免双重点击冲突）
 *
 * 约束：
 *   - CSS 只追加不修改（沿用 v3.6 Ex-2 习惯）
 *   - 不动 .filter-panel--expanded 原 padding/background/border 基础属性（line 1987）
 *   - 不动 .filter-panel__collapse-btn（line 1989，旧 class 已不再用，保留防兼容）
 *   - 不动 .filter-panel__collapse-hint 原视觉样式（line 2561-2577），只追加 pointer-events 兜底
 */

/* 整行可点（外层 div 接管 click · 与 .filter-panel--collapsed 视觉一致） */
.filter-panel--expanded {
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.filter-panel--expanded:hover {
  background: var(--color-gray-100, #f5f5f5);
  border-color: var(--color-gray-300, #d9d9d9);
}
.filter-panel--expanded:active {
  background: var(--color-gray-200, #f0f0f0);
}

/* ⤴ 收起 span 视觉提示：不再响应点击（避免与外层 div 事件冲突 · 咸鱼 11:22 拍板） */
/* 注意：仅追加 pointer-events/user-select，原视觉样式（color/font-size/padding/transition）保留 */
.filter-panel__collapse-hint {
  pointer-events: none;
  user-select: none;
}

/* === v3.8.0 webdav 多 db UI === */
.welcome__multidb { margin-top: 18px; text-align: left; }
.welcome__multidb-title { font-size: 13px; color: var(--color-gray-700, #555); margin-bottom: 10px; font-weight: 500; }
.welcome__multidb-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.welcome__multidb-actions .input { flex: 1; padding: 6px 10px; font-size: 13px; }
.db-list { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 6px; padding: 8px; max-height: 280px; overflow-y: auto; }
.db-list__loading, .db-list__empty, .db-list__error { padding: 16px; text-align: center; font-size: 13px; color: var(--color-gray-600, #777); }
.db-list__error { color: #c0392b; }
.db-list__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 4px; transition: background 0.15s; }
.db-list__row:hover { background: rgba(29, 91, 181, 0.06); }
.db-list__row--current { background: rgba(29, 91, 181, 0.12); font-weight: 600; }
.db-list__name { font-family: 'SF Mono', Monaco, monospace; font-size: 13px; }
.db-list__actions { display: flex; gap: 4px; }
.db-list__actions .btn { padding: 2px 10px; font-size: 12px; }

/* === v3.8.0 auth modal === */
.auth-modal__panel { max-width: 360px; padding: 24px; }
.auth-modal__input { width: 100%; margin: 12px 0; padding: 8px 12px; font-size: 14px; box-sizing: border-box; }
.auth-modal__error { color: #c0392b; font-size: 13px; margin: 8px 0; }
.auth-modal__hint { font-size: 11px; color: var(--color-gray-500, #999); margin-top: 12px; text-align: center; }

/* === v3.8.5 操作手册（docs 弹窗 + MD 渲染） === */
.modal--docs { max-width: 880px; max-height: 88vh; }
.docs-modal__body { padding: var(--space-4) var(--space-5); }

.docs-list { display: flex; flex-direction: column; gap: 12px; }
.docs-list__hint { font-size: 13px; color: var(--color-gray-500, #999); margin: 0 0 4px; }
.docs-entry {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: 8px; background: #fff; cursor: pointer;
  font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s;
}
.docs-entry:hover { border-color: var(--color-primary, #1d5bb5); box-shadow: 0 1px 6px rgba(29, 91, 181, 0.12); }
.docs-entry__title { font-size: 15px; font-weight: 600; color: var(--color-gray-800, #333); }
.docs-entry__desc { font-size: 12.5px; color: var(--color-gray-500, #999); line-height: 1.5; }

.docs-loading { padding: 40px 0; text-align: center; color: var(--color-gray-500, #999); font-size: 14px; }
.docs-error { padding: 24px; text-align: center; }
.docs-error__icon { font-size: 28px; }
.docs-error__title { font-size: 15px; font-weight: 600; margin: 8px 0 6px; color: var(--color-gray-800, #333); }
.docs-error__detail { font-size: 12.5px; color: #c0392b; word-break: break-all; line-height: 1.6; }
.docs-error__hint { font-size: 12.5px; color: var(--color-gray-500, #999); margin: 10px 0 16px; line-height: 1.6; }

/* Markdown 正文排版（docs 弹窗内） */
.md-body { font-size: 14px; line-height: 1.75; color: var(--color-gray-800, #333); word-break: break-word; }
.md-body h1 { font-size: 20px; font-weight: 700; margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--color-primary, #1d5bb5); }
.md-body h2 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; padding-left: 10px; border-left: 4px solid var(--color-primary, #1d5bb5); }
.md-body h3 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
.md-body h4, .md-body h5, .md-body h6 { font-size: 14px; font-weight: 600; margin: 14px 0 4px; }
.md-body p { margin: 8px 0; }
.md-body ul, .md-body ol { margin: 8px 0; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body strong { font-weight: 700; }
.md-body a { color: var(--color-primary, #1d5bb5); text-decoration: underline; }
.md-body blockquote {
  margin: 10px 0; padding: 8px 14px;
  background: rgba(29, 91, 181, 0.05); border-left: 4px solid var(--color-primary, #1d5bb5);
  color: var(--color-gray-700, #555); border-radius: 0 6px 6px 0;
}
.md-body code {
  background: var(--color-gray-100, #f5f5f5); padding: 1.5px 5px; border-radius: 4px;
  font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 12.5px; color: #c7254e;
}
.md-body pre.md-code {
  background: #1e293b; color: #e2e8f0; padding: 12px 14px; border-radius: 8px;
  overflow-x: auto; margin: 10px 0; line-height: 1.6;
}
.md-body pre.md-code code { background: none; color: inherit; padding: 0; font-size: 12.5px; }
.md-body hr { border: none; border-top: 1px solid var(--color-gray-200, #e5e7eb); margin: 18px 0; }
.md-body img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--color-gray-200, #e5e7eb); margin: 8px 0; }
.md-body .md-table-wrap { overflow-x: auto; margin: 10px 0; }
.md-body table.md-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.md-body table.md-table th, .md-body table.md-table td {
  border: 1px solid var(--color-gray-300, #d1d5db); padding: 6px 10px; text-align: left; vertical-align: top;
}
.md-body table.md-table th { background: rgba(29, 91, 181, 0.08); font-weight: 600; white-space: nowrap; }
.md-body table.md-table tr:nth-child(even) td { background: #fafafa; }

/* v3.8.5 文档阅读工具栏（返回列表 + 文档名） */
.docs-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}
.docs-toolbar__name { font-size: 13px; font-weight: 600; color: var(--color-gray-600, #666); }

/* ============================================================
 * v3.8.6 追加（仅追加，不删现有规则）
 * 1) 习惯管理页「导出历史」按钮  2) 习惯编辑弹窗新字段
 * 3) 导出格式选择弹窗  4) 操作手册新窗口 .docs-win 布局
 * ============================================================ */

/* --- 习惯管理页「导出历史」按钮（与 编辑/删除 同排） --- */
.habits-manage__row-export {
  color: var(--color-primary, #1d5bb5);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-base);
  font-family: inherit;
}
.habits-manage__row-export:hover {
  background: rgba(29, 91, 181, 0.08);
}

/* --- 习惯编辑弹窗：截止方式下拉 / 结束日期 / 共 N 次 / 跳过日期 --- */
.habit-modal__endtype-select,
.habit-modal__date-input,
.habit-modal__count-input,
.habit-modal__holidays-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-family: inherit;
  box-sizing: border-box;
  background: var(--color-white, #fff);
}
.habit-modal__endtype-select:focus,
.habit-modal__date-input:focus,
.habit-modal__count-input:focus,
.habit-modal__holidays-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.habit-modal__holidays-input {
  resize: vertical;
  min-height: 52px;
}
.habit-modal__endvalue-row { margin-bottom: var(--space-4); }
/* v3.8.6 — 修复：.habit-modal__field 的 display:flex 会覆盖 [hidden] 的 display:none（作者样式优先级高于 UA 样式），
 * 导致「截止方式」切换时结束日期/共打卡次数永远显示。用 !important 强制隐藏。 */
.habit-modal__field[hidden],
.habit-modal__endvalue-row[hidden] { display: none !important; }

/* --- 导出格式选择弹窗 --- */
.habit-export__hint {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-gray-600, #666);
  margin-bottom: var(--space-3, 12px);
}
.habit-export__formats {
  display: flex;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
.habit-export__fmt {
  flex: 1;
  min-width: 140px;
  justify-content: center;
}

/* --- 操作手册新窗口（.docs-win 左右布局）
     说明：新窗口 HTML 由 app.js _docsWindowShellHtml() 生成，内联了同款关键样式
     使窗口在脱离主应用样式表时也能正常布局；此处规则与内联版保持一致 --- */
.docs-win { display: flex; min-height: 100vh; }
.docs-win__toc {
  width: 260px; flex: 0 0 260px;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
  background: #fff; border-right: 1px solid #e5e7eb;
  padding: 20px 16px; box-sizing: border-box;
}
.docs-win__brand { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.docs-win__switch { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.docs-win__switch-btn {
  text-align: left; border: 1px solid #e5e7eb; background: #f9fafb;
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
  font-size: 13px; color: #374151; font-family: inherit;
}
.docs-win__switch-btn:hover { border-color: #93c5fd; }
.docs-win__switch-btn.is-active { background: #1d5bb5; border-color: #1d5bb5; color: #fff; font-weight: 600; }
.docs-win__toc-nav { font-size: 13px; }
.docs-win__toc-link { display: block; padding: 5px 8px; border-radius: 6px; color: #374151; text-decoration: none; }
.docs-win__toc-link:hover { background: #eff6ff; color: #1d5bb5; }
.docs-win__toc-link--l2 { padding-left: 20px; color: #6b7280; font-size: 12.5px; }
.docs-win__toc-empty { color: #9ca3af; padding: 8px; }
.docs-win__content { flex: 1; min-width: 0; padding: 28px 36px 60px; max-width: 860px; box-sizing: border-box; }
.docs-win__content-header { border-bottom: 1px solid #e5e7eb; margin-bottom: 18px; padding-bottom: 10px; }
.docs-win__doc-title { font-size: 20px; font-weight: 700; }
.docs-win__loading { color: #9ca3af; padding: 40px 0; text-align: center; }
.docs-win__error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 8px; padding: 16px; margin-top: 12px; }
.docs-win__error button { margin-top: 10px; }
@media (max-width: 720px) {
  .docs-win { flex-direction: column; }
  .docs-win__toc { width: 100%; flex: none; height: auto; position: static; border-right: none; border-bottom: 1px solid #e5e7eb; }
  .docs-win__content { padding: 20px 16px 40px; }
}