/* 24 · 猫咪年龄换算 —— 视觉母题「猫爪与阶段尺」：丁香紫 / 爪印 / 横向时间轴
   独立布局：右侧爪印大数字卡、六段时间轴、公式卡，与其它页不共用组件。 */
.t28.ca-wrap {
    --t28-bg: #f8f6fd;
    --t28-surface: #ffffff;
    --t28-surface-2: #f1edfb;
    --t28-ink: #272040;
    --t28-sub: #564b73;
    --t28-muted: #8a80a3;
    --t28-line: #e4ddf3;
    --t28-accent: #7253c9;
    --t28-accent-2: #d1789b;
    --t28-soft: #ece5fc;
    --t28-on-accent: #ffffff;
    --t28-ok: #3f7a62;
    --t28-warn: #9a6b12;
    --t28-danger: #a94b64;
    --t28-ok-soft: #e2f2ea;
    --t28-warn-soft: #faf0d7;
    --t28-danger-soft: #f9e6ec;
    --t28-radius: 20px;
    --t28-radius-sm: 11px;
    --t28-font: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
    --t28-shadow: 0 8px 28px rgba(114,83,201,.1);
}
:root[data-theme="dark"] .t28.ca-wrap {
    --t28-bg: #100e1a;
    --t28-surface: #1a1729;
    --t28-surface-2: #231f36;
    --t28-ink: #efe9ff;
    --t28-sub: #c7bce4;
    --t28-muted: #9a8dbb;
    --t28-line: #332b4d;
    --t28-accent: #b49bff;
    --t28-accent-2: #f0a2c0;
    --t28-soft: #2d2447;
    --t28-on-accent: #100e1a;
    --t28-ok: #7fd3ad;
    --t28-warn: #ecc079;
    --t28-danger: #f39ab4;
    --t28-ok-soft: #183429;
    --t28-warn-soft: #372c18;
    --t28-danger-soft: #3a202c;
    --t28-shadow: 0 8px 28px rgba(0,0,0,.42);
}
.ca-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; padding: 34px 0 26px; }
.ca-hero h1 em { display: block; font-style: normal; font-size: .5em; color: var(--t28-accent-2); margin-top: 10px; font-weight: 650; }
.ca-paw-card { position: relative; display: flex; align-items: center; gap: 18px; padding: 24px;
    border-radius: 24px; background: var(--t28-surface); box-shadow: var(--t28-shadow); overflow: hidden; }
.ca-paw { position: relative; width: 96px; height: 96px; flex: none; }
.ca-paw i { position: absolute; width: 22px; height: 27px; border-radius: 50%; background: var(--t28-accent); opacity: .82; }
.ca-paw i:nth-child(1) { left: 4px; top: 18px; transform: rotate(-24deg); }
.ca-paw i:nth-child(2) { left: 28px; top: 2px; }
.ca-paw i:nth-child(3) { left: 54px; top: 2px; }
.ca-paw i:nth-child(4) { left: 76px; top: 20px; transform: rotate(24deg); }
.ca-paw span { position: absolute; left: 24px; top: 40px; width: 54px; height: 46px; border-radius: 48% 48% 44% 44%; background: var(--t28-accent); }
.ca-paw-out small { display: block; font-size: 12px; color: var(--t28-muted); letter-spacing: .08em; }
.ca-paw-out b { font-size: clamp(38px, 6vw, 58px); font-weight: 800; color: var(--t28-accent); line-height: 1.15; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ca-paw-out span { font-size: 15px; color: var(--t28-sub); }
.ca-quick { border-top: 4px solid var(--t28-accent); }

/* 生命阶段时间轴 */
.ca-timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
    padding: 20px; border-radius: 20px; background: var(--t28-surface); box-shadow: var(--t28-shadow); }
.ca-stage { position: relative; padding: 14px 10px; border-radius: 12px; background: var(--t28-surface-2); border: 2px solid transparent; }
.ca-stage::before { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--t28-accent); opacity: .4; margin-bottom: 9px; }
.ca-stage b { display: block; font-size: 14px; }
.ca-stage small { display: block; font-size: 11.5px; color: var(--t28-muted); line-height: 1.55; margin-top: 4px; }
.ca-stage.is-on { border-color: var(--t28-accent); background: var(--t28-soft); }
.ca-stage.is-on::before { opacity: 1; box-shadow: 0 0 0 4px var(--t28-soft); }
.ca-formula { font-family: var(--t28-mono); font-size: 13.5px; line-height: 1.7; padding: 11px 13px; border-radius: 10px;
    background: var(--t28-surface-2); color: var(--t28-accent); margin: 10px 0 14px; overflow-x: auto; white-space: nowrap; }
.ca-formula-card { border-bottom: 3px solid var(--t28-accent-2); }
.ca-big { font-size: clamp(30px, 5vw, 42px); font-weight: 800; color: var(--t28-accent); letter-spacing: -.04em; }

@media (max-width: 860px) { .ca-hero { grid-template-columns: minmax(0, 1fr); } .ca-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ca-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; } .ca-paw { width: 76px; height: 76px; transform: scale(.85); } }