/* 39 · 狗皮肤病自查 —— 视觉母题「犬体病灶定位图」
   独立布局：左侧可点选 SVG 犬体 + 右侧参数；结果用带部位标签的方向条，非普通卡片网格。 */
.b29.ds-wrap {
    --b29-bg: #f8f5ec;
    --b29-surface: #fffdf7;
    --b29-surface-2: #f5efe2;
    --b29-ink: #2c271d;
    --b29-sub: #605745;
    --b29-muted: #968b74;
    --b29-line: #e9dfc9;
    --b29-line-strong: #d8c9a9;
    --b29-accent: #9a7530;
    --b29-accent-2: #4b7c6a;
    --b29-tint: #f7edd7;
    --b29-radius: 16px;
    --b29-radius-sm: 10px;
}
:root[data-theme="dark"] .b29.ds-wrap {
    --b29-bg: #15130d;
    --b29-surface: #211e15;
    --b29-surface-2: #2b261a;
    --b29-ink: #f3ecd9;
    --b29-sub: #c9bda0;
    --b29-muted: #9e9176;
    --b29-line: #3a3322;
    --b29-line-strong: #4e452c;
    --b29-accent: #e0bd72;
    --b29-accent-2: #8dc5ab;
    --b29-tint: #3a2f19;
}
.ds-hero h1 em { font-style: normal; color: var(--b29-accent); display: block; font-size: .57em; margin-top: 10px; }
.ds-console { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0;
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius); overflow: hidden; box-shadow: var(--b29-shadow); }
.ds-map { padding: 26px; background: var(--b29-surface-2); }
.ds-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--b29-accent); margin-bottom: 11px; }
.ds-map h2 { font-size: var(--b29-xl); margin-bottom: 10px; }
.ds-svg-wrap { background: var(--b29-surface); border: 1px solid var(--b29-line); border-radius: var(--b29-radius-sm); padding: 8px; }
.ds-dog { width: 100%; height: auto; display: block; }
.ds-body { fill: var(--b29-line-strong); stroke: var(--b29-muted); stroke-width: 2; stroke-linejoin: round; }
.ds-body > * { fill: var(--b29-line-strong); }
.ds-hot { cursor: pointer; }
.ds-hot circle { fill: var(--b29-surface); stroke: var(--b29-accent); stroke-width: 2.5; opacity: .82; transition: all .16s; }
.ds-hot text { text-anchor: middle; font-size: 13px; font-weight: 800; fill: var(--b29-accent); font-family: var(--b29-font); }
.ds-hot:hover circle { opacity: 1; stroke-width: 4; }
.ds-hot.is-on circle { fill: var(--b29-accent); opacity: 1; }
.ds-hot.is-on text { fill: #fff; }
.ds-picked { margin-top: 12px; font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.75; }
.ds-picked b { color: var(--b29-accent); }

.ds-side { padding: 26px 24px; background: var(--b29-surface); border-left: 1px solid var(--b29-line); display: flex; flex-direction: column; gap: 13px; }
.ds-side-title { font-size: var(--b29-sm); font-weight: 800; letter-spacing: .1em; color: var(--b29-accent); }
.ds-verdict { padding: 17px 20px; border-radius: var(--b29-radius); background: var(--b29-tint);
    border-left: 5px solid var(--b29-accent); font-size: var(--b29-sm); line-height: 1.85; margin-bottom: 20px; }
.ds-verdict b { color: var(--b29-accent); }
.ds-dirs { display: flex; flex-direction: column; gap: 11px; }
.ds-dir { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 17px 19px;
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius-sm); background: var(--b29-surface); }
.ds-dir.is-top { border-left: 4px solid var(--b29-accent); }
.ds-dir-tag { align-self: start; padding: 5px 10px; border-radius: 6px; background: var(--b29-tint); color: var(--b29-accent);
    font-size: var(--b29-xs); font-weight: 800; text-align: center; }
.ds-dir h3 { font-size: var(--b29-md); margin-bottom: 5px; }
.ds-dir p { font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.78; margin: 0 0 6px; }
.ds-dir small { color: var(--b29-accent-2); font-size: var(--b29-xs); line-height: 1.7; }
.ds-ai-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 22px; border: 2px dashed var(--b29-accent); border-radius: var(--b29-radius); background: var(--b29-tint); }
.ds-ai-box b { font-size: var(--b29-md); }
.ds-ai-box p { font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.75; margin: 6px 0 0; max-width: 700px; }

@media (max-width: 900px) {
    .ds-console { grid-template-columns: minmax(0, 1fr); }
    .ds-side { border-left: 0; border-top: 1px solid var(--b29-line); }
}
@media (max-width: 560px) {
    .ds-map, .ds-side { padding: 18px 16px; }
    .ds-dir { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .ds-dir-tag { justify-self: start; }
}