/* =====================================================================
 * 31 登革热防护 · 视觉母题「伊蚊 + 积水巡检盘」
 * ---------------------------------------------------------------------
 * 色板：深青（--den-pri #0d6b6b）+ 清水青（--den-pri2），与基座石墨冷调同族。
 * 版式：J 清单勾选主导 —— 勾选状态直接参与评分，页面主体是一份可勾选清单。
 * 纯 CSS / 内联 SVG，零图片请求；只作用于 .b11--dengue 容器。
 * ===================================================================== */

.b11--dengue {
    --den-pri: #0d6b6b;
    --den-pri2: #2a9d8f;
    --den-hot: #b5651d;
    --den-tint: #dceceb;
    --den-ink: #0b3b3b;
    --b11-pri: #0d6b6b;
    --b11-pri2: #2a9d8f;
    --b11-tint: #dceceb;
    --b11-bg: #eef3f2;
    --b11-bg2: #dfe7e6;
    --b11-card2: #f6f9f8;
    background-image:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--den-pri) 7%, transparent) 0 2px, transparent 2px 13px);
}
:root[data-theme="dark"] .b11.b11--dengue {
    --den-pri: #4fb3a6;
    --den-pri2: #74d3c2;
    --den-hot: #e09a4e;
    --den-tint: #13312f;
    --den-ink: #bfe6df;
    --b11-pri: #4fb3a6;
    --b11-pri2: #74d3c2;
    --b11-tint: #13312f;
    --b11-bg: #0f1614;
    --b11-bg2: #141d1b;
    --b11-card2: #182220;
}

/* ---------- 首屏 ---------- */
.dengue-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 30px; align-items: center; padding: 34px 0 6px; }
.dengue-hero .b11-h1 em { color: var(--den-pri); }
.dengue-hero .b11-lead b { box-shadow: inset 0 -.42em 0 var(--den-tint); }
.dengue-hero-cta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.dengue-motif { display: grid; place-items: center; }
.dengue-motif svg { width: min(300px, 82vw); height: auto; }

/* ---------- 勾选清单主体（版式 J） ---------- */
.dengue-check {
    margin-top: 26px; background: var(--b11-card); border: 1px solid var(--b11-line);
    border-top: 4px solid var(--den-pri); box-shadow: var(--b11-shadow);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    padding: 0;
}
.dengue-check-hd {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding: 18px 24px 14px; border-bottom: 1px solid var(--b11-line);
    background: var(--den-tint);
}
.dengue-check-hd .no {
    font-family: var(--b11-mono); font-size: 12px; font-weight: 800; letter-spacing: .12em;
    color: var(--b11-on); background: var(--den-pri); padding: 2px 9px;
}
.dengue-check-hd h2 { flex: 1 1 auto; color: var(--den-ink); }
.dengue-check-hd .note { font-size: var(--b11-sm); color: var(--den-ink); opacity: .82; }
.dengue-check-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 0; }
.dengue-check-col { padding: 20px 24px 22px; }
.dengue-check-col + .dengue-check-col { border-left: 1px dashed var(--b11-line2); background: var(--b11-card2); }
.dengue-sub {
    font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .12em;
    color: var(--den-pri); font-weight: 800; margin-bottom: 14px;
    padding-bottom: 8px; border-bottom: 2px solid var(--den-pri);
}
.dengue-check-col .b11-field { margin-bottom: 14px; }

/* 勾选行 */
.dengue-ponds { display: grid; gap: 8px; }
.dengue-pond {
    position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center; gap: 11px; cursor: pointer;
    border: 1.5px solid var(--b11-line); background: var(--b11-card);
    padding: 10px 13px; transition: all .15s;
}
.dengue-pond:hover { border-color: var(--den-pri); background: var(--b11-card2); }
.dengue-pond input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dengue-pond .bx {
    width: 22px; height: 22px; border: 2px solid var(--b11-line2); background: var(--b11-card);
    display: grid; place-items: center; font-size: 13px; font-weight: 900; color: transparent;
}
.dengue-pond .nm { font-size: var(--b11-sm); font-weight: 700; color: var(--b11-ink); line-height: 1.5; }
.dengue-pond .wh { font-family: var(--b11-mono); font-size: var(--b11-xs); color: var(--b11-mute); white-space: nowrap; }
.dengue-pond.on { border-color: var(--den-pri); background: var(--den-tint); }
.dengue-pond.on .bx { background: var(--den-pri); border-color: var(--den-pri); color: var(--b11-on); }
.dengue-pond.on .nm { color: var(--den-ink); }
.dengue-pond.on .wh { color: var(--den-pri); font-weight: 800; }
.dengue-pond:has(input:focus-visible) { outline: 3px solid var(--den-pri2); outline-offset: 2px; }
.dengue-check-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--b11-line2); }
.dengue-count { font-family: var(--b11-mono); font-size: var(--b11-sm); font-weight: 800; color: var(--den-pri); }
.dengue-hintline { font-size: var(--b11-xs); color: var(--b11-mute); }

/* ---------- 结果：评分盘 ---------- */
.dengue-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; margin-bottom: var(--b11-gap); }
.dengue-score-dial { flex: none; }
.dengue-score-dial svg { width: min(190px, 46vw); height: auto; }
.dengue-score-side { min-width: 0; }
.dengue-level {
    display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
    padding: 12px 16px; background: var(--den-tint); border-left: 4px solid var(--den-pri);
}
.dengue-level b { font-family: var(--b11-mono); font-size: 26px; color: var(--den-pri); letter-spacing: .02em; }
.dengue-level span { font-size: var(--b11-sm); color: var(--b11-sub); }
.dengue-score .b11-readout-row .vl { color: var(--den-ink); }
.dengue-score .b11-readout-row.is-hot .vl { color: var(--den-pri); }
.dengue-score .b11-readout-row { border-left: 3px solid var(--b11-line2); }
.dengue-score .b11-readout-row.is-hot { background: var(--den-tint); }

/* ---------- 优先清理顺序 ---------- */
.dengue-rank { list-style: none; margin: 0; padding: 0; counter-reset: dr; }
.dengue-rank li {
    position: relative; counter-increment: dr; padding: 10px 0 10px 40px;
    border-bottom: 1px dotted var(--b11-line2); font-size: var(--b11-sm); color: var(--b11-sub);
}
.dengue-rank li:last-child { border-bottom: 0; }
.dengue-rank li::before {
    content: counter(dr, decimal-leading-zero); position: absolute; left: 0; top: 9px;
    width: 28px; height: 24px; display: grid; place-items: center;
    font-family: var(--b11-mono); font-size: 12px; font-weight: 800;
    background: var(--den-tint); color: var(--den-pri);
}
.dengue-rank li b { display: block; color: var(--b11-ink); }
.dengue-rank li .p { font-family: var(--b11-mono); font-size: var(--b11-xs); color: var(--den-pri); }
.dengue-rank li.done { opacity: .55; }
.dengue-rank li.done b { text-decoration: line-through; }

/* ---------- 该做什么 ---------- */
.dengue-do { list-style: none; margin: 0; padding: 0; }
.dengue-do li {
    position: relative; padding: 9px 0 9px 28px; font-size: var(--b11-sm);
    color: var(--b11-sub); border-bottom: 1px dotted var(--b11-line2); line-height: 1.75;
}
.dengue-do li:last-child { border-bottom: 0; }
.dengue-do li::before {
    content: "✓"; position: absolute; left: 0; top: 9px; width: 19px; height: 19px;
    display: grid; place-items: center; background: var(--b11-okbg); color: var(--b11-ok);
    font-size: 11px; font-weight: 800;
}
.dengue-do li b { color: var(--b11-ink); }

/* ---------- 批量清洗条 ---------- */
.dengue-clean {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin-top: 14px; padding: 12px 14px; background: var(--b11-card2);
    border: 1px solid var(--b11-line); font-size: var(--b11-sm);
}
.dengue-clean > b { color: var(--den-pri); font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .08em; }
.dengue-clean code { margin-left: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .dengue-hero, .dengue-check-body, .dengue-score { grid-template-columns: minmax(0, 1fr); }
    .dengue-check-col + .dengue-check-col { border-left: 0; border-top: 1px dashed var(--b11-line2); }
    .dengue-motif { order: -1; }
    .dengue-clean code { margin-left: 0; }
}
@media (max-width: 560px) {
    .dengue-pond { grid-template-columns: 24px minmax(0, 1fr); }
    .dengue-pond .wh { grid-column: 2; }
}