/* 25 · 狗狗年龄换算 —— 视觉母题「犬骨与四柱」：焦糖棕 / 骨形 / 并列柱状
   独立布局：骨形插画、四柱对照、双栏公式卡，与猫龄页的爪印时间轴完全不同。 */
.t28.da-wrap {
    --t28-bg: #faf6ef;
    --t28-surface: #fffdf8;
    --t28-surface-2: #f2e9da;
    --t28-ink: #33261a;
    --t28-sub: #6a5540;
    --t28-muted: #9c876c;
    --t28-line: #e7dac6;
    --t28-accent: #a5672e;
    --t28-accent-2: #4d7f6d;
    --t28-soft: #f7e9d3;
    --t28-on-accent: #fffdf8;
    --t28-ok: #3f7a5a;
    --t28-warn: #9a6b12;
    --t28-danger: #a6522c;
    --t28-ok-soft: #e3f0e6;
    --t28-warn-soft: #faf0d5;
    --t28-danger-soft: #f8e5da;
    --t28-radius: 12px;
    --t28-radius-sm: 8px;
    --t28-font: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
    --t28-shadow: 0 4px 0 rgba(165,103,46,.06), 0 10px 28px rgba(120,85,45,.08);
}
:root[data-theme="dark"] .t28.da-wrap {
    --t28-bg: #16110b;
    --t28-surface: #201810;
    --t28-surface-2: #2b2116;
    --t28-ink: #f7ecdd;
    --t28-sub: #d4bba0;
    --t28-muted: #a68e73;
    --t28-line: #3c2d1e;
    --t28-accent: #e6ab6a;
    --t28-accent-2: #8ec8ab;
    --t28-soft: #38291a;
    --t28-on-accent: #201810;
    --t28-ok: #8ec8ab;
    --t28-warn: #e8c477;
    --t28-danger: #efa07d;
    --t28-ok-soft: #1e3227;
    --t28-warn-soft: #372c18;
    --t28-danger-soft: #3a2419;
    --t28-shadow: 0 8px 28px rgba(0,0,0,.42);
}
.da-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 28px; align-items: center; padding: 34px 0 26px; }
.da-hero h1 em { display: block; font-style: normal; font-size: .52em; color: var(--t28-accent-2); margin-top: 10px; }
.da-bone { position: relative; width: 210px; height: 90px; margin: 0 auto; }
.da-bone i { position: absolute; left: 22px; right: 22px; top: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(180deg, #f0dfbd, #d8bd90); box-shadow: 0 8px 18px rgba(120,85,45,.18); }
.da-bone span { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: #ead6ad; top: 8px; }
.da-bone span:nth-child(1) { left: 4px; }
.da-bone span:nth-child(2) { left: 16px; top: 48px; }
.da-bone span:nth-child(3) { right: 16px; top: 48px; }
.da-bone span:nth-child(4) { right: 4px; }
.da-quick { border-left: 5px solid var(--t28-accent); }

/* 四柱对照 */
.da-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end;
    padding: 24px 20px 18px; border-radius: 16px; background: var(--t28-surface); box-shadow: var(--t28-shadow); }
.da-col { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.da-col-num { font-size: 20px; font-weight: 800; color: var(--t28-accent); font-variant-numeric: tabular-nums; }
.da-col-bar { width: 100%; max-width: 82px; border-radius: 10px 10px 4px 4px; min-height: 12px;
    background: linear-gradient(180deg, var(--t28-accent), var(--t28-accent-2)); transition: height .3s; }
.da-col.is-on .da-col-bar { box-shadow: 0 0 0 3px var(--t28-soft); }
.da-col-name { font-size: 14px; font-weight: 700; }
.da-col small { font-size: 11.5px; color: var(--t28-muted); text-align: center; line-height: 1.5; }
.da-formula { font-family: var(--t28-mono); font-size: 13px; line-height: 1.7; padding: 11px 13px; border-radius: 8px;
    background: var(--t28-surface-2); color: var(--t28-accent); margin: 10px 0 14px; overflow-x: auto; white-space: nowrap; }
.da-formula-card { border-top: 3px solid var(--t28-accent-2); }
.da-big { font-size: clamp(30px, 5vw, 42px); font-weight: 800; color: var(--t28-accent); letter-spacing: -.04em; }
.da-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.da-mini { padding: 12px; border-radius: 10px; background: var(--t28-surface-2); text-align: center; }
.da-mini b { display: block; font-size: 19px; color: var(--t28-accent); }
.da-mini small { font-size: 11.5px; color: var(--t28-muted); }

@media (max-width: 860px) { .da-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .da-chart { gap: 8px; padding: 16px 10px; } .da-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }