/* =====================================================================
 * 49 手机进水急救 · 视觉母题「水滴下潜 + 波纹步进条」
 * ---------------------------------------------------------------------
 * 色板：潜水蓝（--pw-pri #146b8c）+ 水面亮青（--pw-hot），清冷通透。
 * 版式：G 分步向导 —— 四颗水滴徽章串成步进条，阶段带波纹头部。
 * 本页只作用于 .b11--dive 容器，不外溢到其它任何页面。
 * ===================================================================== */

.b11--dive {
    --pw-pri: #146b8c;
    --pw-pri2: #2f92b8;
    --pw-hot: #56c0d8;
    --pw-tint: #dcecf3;
    --b11-pri: #146b8c;
    --b11-pri2: #2f92b8;
    --b11-tint: #dcecf3;
    --b11-bg: #ecf2f5;
    --b11-bg2: #dbe5ea;
    --b11-card2: #f7fbfc;
    background-image:
        repeating-linear-gradient(180deg, color-mix(in srgb, var(--b11-line2) 26%, transparent) 0 1px, transparent 1px 14px);
}
:root[data-theme="dark"] .b11.b11--dive {
    --pw-pri: #5aaccb;
    --pw-pri2: #85c6de;
    --pw-hot: #7fd7ea;
    --pw-tint: #16262e;
    --b11-pri: #5aaccb;
    --b11-pri2: #85c6de;
    --b11-tint: #16262e;
    --b11-bg: #0e1316;
    --b11-bg2: #171e22;
    --b11-card2: #1b2226;
}

/* ---------- 首屏 ---------- */
.pw-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px; align-items: center; }
.pw-hero .b11-h1 em { color: var(--pw-pri); }
.pw-hero .b11-lead b { box-shadow: inset 0 -.42em 0 var(--pw-tint); }
.pw-dive { display: grid; place-items: center; }
.pw-dive svg { width: min(260px, 76vw); height: auto; }

/* ---------- 水滴步进条 ---------- */
.pw-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.pw-steps-wave {
    position: absolute; left: 0; right: 0; bottom: 14px; height: 14px; z-index: 0;
    background:
        radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--pw-pri) 38%, transparent) 10px, transparent 11px) 0 0 / 24px 14px repeat-x;
}
.pw-step {
    position: relative; z-index: 1; cursor: pointer; text-align: center; font-family: inherit;
    background: var(--b11-card); border: 1.5px solid var(--b11-line2);
    padding: 16px 10px 15px; transition: all .16s; color: var(--b11-sub);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.pw-step:hover { border-color: var(--pw-pri); }
.pw-step .drop {
    display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px;
    background: var(--pw-tint); color: var(--pw-pri); font-family: var(--b11-mono); font-weight: 800; font-size: 15px;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.pw-step .drop::first-line { transform: rotate(45deg); }
.pw-step .st { display: block; font-size: var(--b11-md); font-weight: 800; color: var(--b11-ink); }
.pw-step .sd { display: block; font-size: var(--b11-xs); color: var(--b11-mute); margin-top: 2px; }
.pw-step.on { background: var(--pw-tint); border-color: var(--pw-pri); }
.pw-step.on .st { color: var(--pw-pri); }
.pw-step.on .drop { background: var(--pw-pri); color: #fff; }
.pw-step.done .drop { background: var(--pw-hot); color: #fff; }

/* ---------- 阶段 ---------- */
.pw-stage {
    margin-top: 22px; background: var(--b11-card); border: 1px solid var(--b11-line);
    border-left: 5px solid var(--pw-pri); padding: 22px 24px 18px; box-shadow: var(--b11-shadow);
    clip-path: polygon(0 0, calc(100% - var(--b11-cut)) 0, 100% var(--b11-cut), 100% 100%, 0 100%);
}
.pw-stage-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pw-no {
    font-family: var(--b11-mono); font-size: 12px; font-weight: 800; letter-spacing: .16em;
    color: var(--pw-pri); border: 1.5px solid var(--pw-pri); padding: 1px 8px;
}
.pw-stage-hd h2 { font-size: var(--b11-lg); }

/* ---------- 送修清单 ---------- */
.pw-send { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: pws; }
.pw-send li {
    position: relative; counter-increment: pws; padding: 11px 14px 11px 46px; margin-bottom: 8px;
    background: var(--b11-card2); border: 1px solid var(--b11-line); font-size: var(--b11-sm); color: var(--b11-sub); line-height: 1.72;
}
.pw-send li::before {
    content: counter(pws); position: absolute; left: 12px; top: 11px; width: 24px; height: 24px;
    display: grid; place-items: center; background: var(--pw-pri); color: #fff;
    font-family: var(--b11-mono); font-size: 12px; font-weight: 800;
}
.pw-send li b { color: var(--b11-ink); }

/* ---------- 结果读数 ---------- */
.pw-readout { display: grid; gap: 10px; margin-bottom: var(--b11-gap); }
.pw-readout .b11-readout-row { border-left: 3px solid var(--pw-pri); }
.pw-readout .b11-readout-row.is-hot { background: var(--pw-tint); border-color: transparent; border-left-color: var(--pw-hot); }
.pw-readout .b11-readout-row.is-hot .vl { color: var(--pw-pri); }
.pw-readout .b11-readout-row.is-bad { background: var(--b11-badbg); border-color: transparent; border-left-color: var(--b11-bad); }
.pw-readout .b11-readout-row.is-bad .vl { color: var(--b11-bad); }

/* ---------- 四步清单 ---------- */
.pw-stepslist { list-style: none; margin: 0; padding: 0; counter-reset: pwl; }
.pw-stepslist li {
    position: relative; counter-increment: pwl; margin-bottom: 10px; padding: 13px 14px 13px 48px;
    background: var(--b11-card2); border: 1px solid var(--b11-line); font-size: var(--b11-sm); color: var(--b11-sub); line-height: 1.72;
}
.pw-stepslist li:last-child { margin-bottom: 0; }
.pw-stepslist li::before {
    content: counter(pwl); position: absolute; left: 12px; top: 12px; width: 26px; height: 26px;
    display: grid; place-items: center; background: var(--pw-pri); color: #fff;
    font-family: var(--b11-mono); font-size: 13px; font-weight: 800;
}
.pw-stepslist li b { display: block; color: var(--b11-ink); margin-bottom: 3px; font-size: var(--b11-base); }
.pw-stepslist li.hot { background: var(--pw-tint); border-color: var(--pw-pri); }

/* ---------- 禁忌 ---------- */
.pw-dont { list-style: none; margin: 0; padding: 0; }
.pw-dont li {
    position: relative; padding: 8px 0 8px 28px; font-size: var(--b11-sm); color: var(--b11-sub);
    border-bottom: 1px dotted var(--b11-line2); line-height: 1.72;
}
.pw-dont li:last-child { border-bottom: 0; }
.pw-dont li::before {
    content: "×"; position: absolute; left: 0; top: 8px; width: 19px; height: 19px;
    display: grid; place-items: center; background: var(--b11-badbg); color: var(--b11-bad); font-size: 13px; font-weight: 800;
}
.pw-dont li b { color: var(--b11-ink); }

/* ---------- 批量清洗条 ---------- */
.pw-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);
}
.pw-clean > b { color: var(--pw-pri); font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .08em; }
.pw-clean code { margin-left: auto; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .pw-hero { grid-template-columns: minmax(0, 1fr); }
    .pw-dive { order: -1; }
    .pw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pw-steps-wave { display: none; }
    .pw-clean code { margin-left: 0; }
}