/* ======================================================================
 * 47 · 空气能热水器选型与运行费用 —— 「空气能选型盘」
 * 视觉：冷蓝 + 橙（热）；COP 衰减曲线；参数盘式布局；
 *       与其余 29 页不共用配色与构图。
 * ====================================================================== */

.hx.ash {
    --bg: #eef4f7;
    --bg2: #e0ebf0;
    --card: #ffffff;
    --card2: #f3f8fa;
    --card3: #e6eff3;
    --ink: #10222b;
    --ink2: #334b57;
    --muted: #6b8492;
    --line: #cddde6;
    --line2: #e4eef3;
    --accent: #0d6e8c;
    --accent-ink: #ffffff;
    --accent-soft: #dcebf1;
    --accent2: #e0661a;
    --accent2-soft: #fce6d6;
    --ok: #1c6b3c;
    --ok-bg: #e0f0e5;
    --warn: #92600a;
    --warn-bg: #f9efd6;
    --bad: #a4271c;
    --bad-bg: #f9e1dd;
    --info: #1d6076;
    --info-bg: #e1eef3;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 3px 10px rgba(16, 34, 43, .07), 0 16px 40px rgba(16, 34, 43, .07);

    background:
        radial-gradient(circle at 84% 6%, rgba(224, 102, 26, .08), transparent 42%),
        var(--bg);
}
:root[data-theme="dark"] .hx.ash {
    --bg: #0c161b;
    --bg2: #121e25;
    --card: #16242c;
    --card2: #1c2c35;
    --card3: #24363f;
    --ink: #e4eff3;
    --ink2: #b6c8d1;
    --muted: #7e929d;
    --line: #2e424c;
    --line2: #24343c;
    --accent: #63c2de;
    --accent-ink: #04141a;
    --accent-soft: #173039;
    --accent2: #f28f4c;
    --accent2-soft: #3a2414;
    --shadow: 0 3px 10px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .34);
}

.ash-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.52fr) minmax(282px, .88fr);
    gap: 0;
    margin: 22px 0 26px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ash-main { padding: 26px 26px 24px; min-width: 0; }
.ash-kicker { font: 700 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent2); margin: 0 0 8px; }
.ash-hero h1 { font-size: clamp(28px, 3.5vw, 40px); margin-bottom: 10px; }
.ash-lede { font-size: 14.8px; line-height: 1.9; color: var(--ink2); margin: 0 0 18px; max-width: 58em; }
.ash-lede b { color: var(--accent); border-bottom: 2px solid var(--accent-soft); }
:root[data-theme="dark"] .ash-lede b { color: var(--accent2); border-bottom-color: var(--accent2-soft); }

.ash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ash-input {
    width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card2); color: var(--ink); font: 600 15px/1.6 var(--font-mono); padding: 9px 12px; outline: none;
}
.ash-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.ash-side { background: var(--card2); border-left: 1px solid var(--line); padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.ash-side-hd { font: 700 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ash-chart { width: 100%; height: auto; }
.ash-svg-t { font: 600 9px var(--font-mono); fill: var(--muted); }
.ash-svg-v { font: 700 11px var(--font-mono); fill: var(--accent2); }
.ash-side-note { margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; }
.ash-side-note b { display: block; font-size: 13px; margin-bottom: 4px; color: var(--accent); }
.ash-side-note p { font-size: 12.2px; line-height: 1.78; color: var(--ink2); margin: 0; }

/* 结果 */
.ash-result { display: none; }
.ash-result.is-on { display: block; }
.ash-verdict { border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 16px; background: var(--accent-soft); border-left: 5px solid var(--accent); }
.ash-verdict.is-warn { background: var(--warn-bg); border-left-color: var(--warn); }
.ash-verdict.is-bad { background: var(--bad-bg); border-left-color: var(--bad); }
.ash-verdict b { display: block; font-size: 18px; margin-bottom: 4px; }
.ash-verdict p { font-size: 13.7px; line-height: 1.85; margin: 0; color: var(--ink2); }

.ash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 11px; margin-bottom: 16px; }
.ash-card { background: var(--card2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 14px; }
.ash-card .k { font-size: 12px; color: var(--muted); }
.ash-card .v { font: 800 22px var(--font-mono); color: var(--accent); line-height: 1.35; }
.ash-card .v small { font-size: 12px; font-weight: 500; color: var(--muted); }
.ash-card p { font-size: 12.2px; line-height: 1.7; color: var(--ink2); margin: 5px 0 0; }
.ash-card.is-warm { border-left-color: var(--accent2); }
.ash-card.is-warm .v { color: var(--accent2); }

.ash-rows { display: grid; gap: 0; margin-bottom: 16px; }
.ash-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line2); }
.ash-row:last-child { border-bottom: 0; }
.ash-row-k { font-size: 13.2px; font-weight: 700; color: var(--accent); }
.ash-row-v { font-size: 13.6px; line-height: 1.82; color: var(--ink2); }
.ash-row-v b { color: var(--ink); }
.ash-row-v ul { margin: 5px 0 0; padding-left: 19px; }
.ash-row-v li { margin-bottom: 4px; }

.ash-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ash-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.7px; color: var(--ink2); line-height: 1.75; }
.ash-check input { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; margin-top: 4px; }
.ash-check li.done > span { text-decoration: line-through; color: var(--muted); }

.ash-no { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 11px; }
.ash-no-card { background: var(--bad-bg); border: 1px solid var(--bad); border-radius: var(--radius-sm); padding: 13px 15px; }
.ash-no-card h4 { font-size: 14px; color: var(--bad); margin-bottom: 6px; }
.ash-no-card p { font-size: 12.9px; line-height: 1.78; color: var(--ink2); margin: 0; }

.hx.ash .hx-table th { background: var(--accent-soft); color: var(--accent); }

@media (max-width: 980px) {
    .ash-hero { grid-template-columns: minmax(0, 1fr); }
    .ash-side { border-left: 0; border-top: 1px solid var(--line); }
    .ash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ash-main { padding: 20px 15px; }
    .ash-grid { grid-template-columns: minmax(0, 1fr); }
    .ash-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}