/* 29 · 猫发情期表现与应对 —— 视觉母题「月相环」：暖粉 / 月牙 / 清单进度条
   独立布局：月相插画、勾选清单四宫格、周期双栏与进度条，与其它页不共用组件。 */
.t28.ch-wrap {
    --t28-bg: #fdf5f7;
    --t28-surface: #fffafb;
    --t28-surface-2: #f8ebf0;
    --t28-ink: #3a2330;
    --t28-sub: #6a4a59;
    --t28-muted: #9d7d8c;
    --t28-line: #eddce3;
    --t28-accent: #b0527b;
    --t28-accent-2: #7c6bb0;
    --t28-soft: #f7e3ec;
    --t28-on-accent: #ffffff;
    --t28-ok: #3f7a62;
    --t28-warn: #9a6b12;
    --t28-danger: #ad4555;
    --t28-ok-soft: #e2f0e9;
    --t28-warn-soft: #faf0d5;
    --t28-danger-soft: #f9e5e9;
    --t28-radius: 24px;
    --t28-radius-sm: 12px;
    --t28-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --t28-shadow: 0 8px 28px rgba(176,82,123,.09);
}
:root[data-theme="dark"] .t28.ch-wrap {
    --t28-bg: #170f14;
    --t28-surface: #21161d;
    --t28-surface-2: #2c1e27;
    --t28-ink: #f9edf2;
    --t28-sub: #ddbed0;
    --t28-muted: #ae8fa0;
    --t28-line: #3c2a33;
    --t28-accent: #eda5c4;
    --t28-accent-2: #b6a8ea;
    --t28-soft: #3b2432;
    --t28-on-accent: #170f14;
    --t28-ok: #7fd0ac;
    --t28-warn: #ecc079;
    --t28-danger: #f39ab0;
    --t28-ok-soft: #183429;
    --t28-warn-soft: #372c18;
    --t28-danger-soft: #3a2029;
    --t28-shadow: 0 8px 28px rgba(0,0,0,.42);
}
.ch-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; padding: 34px 0 26px; }
.ch-hero h1 em { display: block; font-style: normal; font-size: .52em; color: var(--t28-accent-2); margin-top: 10px; }
.ch-moon { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px;
    border-radius: 28px; background: var(--t28-surface); box-shadow: var(--t28-shadow); }
.ch-moon-disc { position: relative; width: 132px; height: 132px; border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, #ffe9c9, #e6b98d);
    box-shadow: 0 0 34px rgba(230,185,141,.4), inset -18px -10px 0 rgba(0,0,0,.06); overflow: hidden; }
.ch-moon-disc::after { content: ''; position: absolute; top: -12px; left: 42px; width: 132px; height: 132px;
    border-radius: 50%; background: var(--t28-surface-2); box-shadow: inset 8px 0 18px rgba(176,82,123,.12); }
.ch-moon-label { font-size: 12px; color: var(--t28-muted); text-align: center; }
.ch-quick { border-top: 4px solid var(--t28-accent); }
.ch-wrap .t28-check.ch-alert:has(input:checked) { border-color: var(--t28-danger); background: var(--t28-danger-soft); color: var(--t28-danger); }

/* 应对清单进度 */
.ch-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ch-progress-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--t28-surface-2); overflow: hidden; }
.ch-progress-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--t28-accent-2), var(--t28-accent)); transition: width .25s; }
.ch-progress > span { font-size: 13px; color: var(--t28-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-lists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ch-list { padding: 16px; border-radius: 18px; background: var(--t28-surface); border: 1px solid var(--t28-line); }
.ch-list h3 { font-size: 15px; margin-bottom: 10px; color: var(--t28-accent); }
.ch-list label { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.65;
    color: var(--t28-sub); margin-bottom: 9px; cursor: pointer; }
.ch-list input { margin-top: 4px; accent-color: var(--t28-accent); flex: none; }
.ch-list label:has(input:checked) { color: var(--t28-muted); text-decoration: line-through; }
.ch-day { font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--t28-accent); }

@media (max-width: 860px) { .ch-hero { grid-template-columns: minmax(0, 1fr); } .ch-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ch-lists { grid-template-columns: minmax(0, 1fr); } .ch-moon-disc { width: 104px; height: 104px; } .ch-moon-disc::after { width: 104px; height: 104px; left: 34px; } }