/* =====================================================================
 * 48 手机丢失应对 · 视觉母题「定位信号波纹 + 挂失顺序竖轴」
 * ---------------------------------------------------------------------
 * 色板：电光紫（--pl-pri #6b4bc4）+ 霓虹粉（--pl-hot），科技冷调。
 * 版式：E 时间轴主导 —— 纵向时间轴贯穿结果区，动作挂在轴上。
 * 本页只作用于 .b11--lost 容器，不外溢到其它任何页面。
 * ===================================================================== */

.b11--lost {
    --pl-pri: #6b4bc4;
    --pl-pri2: #9070e0;
    --pl-hot: #d76bc0;
    --pl-tint: #ece4fa;
    --b11-pri: #6b4bc4;
    --b11-pri2: #9070e0;
    --b11-tint: #ece4fa;
    --b11-bg: #efecf5;
    --b11-bg2: #e3ddef;
    --b11-card2: #f9f7fd;
    background-image:
        radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--b11-line2) 46%, transparent) 1px, transparent 0);
    background-size: 18px 18px;
}
:root[data-theme="dark"] .b11.b11--lost {
    --pl-pri: #a487ea;
    --pl-pri2: #bda6f2;
    --pl-hot: #e89ad5;
    --pl-tint: #241c38;
    --b11-pri: #a487ea;
    --b11-pri2: #bda6f2;
    --b11-tint: #241c38;
    --b11-bg: #100e15;
    --b11-bg2: #1a1723;
    --b11-card2: #1e1a28;
}

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

/* ---------- 条件输入 ---------- */
.pl-cond {
    margin-top: 24px; background: var(--b11-card); border: 1px solid var(--b11-line);
    border-left: 6px solid var(--pl-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%);
}
.pl-cond-hd { margin-bottom: 14px; }
.pl-micro { display: block; font-family: var(--b11-mono); font-size: var(--b11-xs); letter-spacing: .16em; color: var(--pl-pri); margin-bottom: 6px; }
.pl-cond-hd h2 { font-size: var(--b11-lg); }
.pl-conds { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.pl-opt {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    border: 1px solid var(--b11-line); background: var(--b11-card2); padding: 11px 13px;
    font-size: var(--b11-sm); color: var(--b11-sub); line-height: 1.66; transition: all .15s;
}
.pl-opt:hover { border-color: var(--pl-pri); }
.pl-opt input { accent-color: var(--pl-pri); margin-top: 4px; flex: none; }
.pl-opt b { display: block; color: var(--b11-ink); font-size: var(--b11-sm); }
.pl-opt span { display: block; font-size: var(--b11-xs); color: var(--b11-mute); margin-top: 2px; }
.pl-opt:has(input:checked) { border-color: var(--pl-pri); background: var(--pl-tint); }
.pl-opt.risk:has(input:checked) { border-color: var(--b11-bad); background: var(--b11-badbg); }

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

/* ---------- 置顶三条 ---------- */
.pl-top { list-style: none; margin: 0; padding: 0; counter-reset: plt; }
.pl-top li {
    position: relative; counter-increment: plt; 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;
}
.pl-top li:last-child { margin-bottom: 0; }
.pl-top li::before {
    content: counter(plt); position: absolute; left: 12px; top: 12px; width: 26px; height: 26px;
    display: grid; place-items: center; background: var(--pl-pri); color: #fff;
    font-family: var(--b11-mono); font-size: 13px; font-weight: 800;
}
.pl-top li:first-child { background: var(--pl-tint); border-color: var(--pl-pri); }
.pl-top li b { display: block; color: var(--b11-ink); margin-bottom: 3px; font-size: var(--b11-base); }
.pl-top li span { display: block; font-size: var(--b11-xs); color: var(--b11-mute); font-family: var(--b11-mono); }

/* ---------- 风险提示 ---------- */
.pl-risk { list-style: none; margin: 0; padding: 0; }
.pl-risk li {
    position: relative; padding: 8px 0 8px 30px; font-size: var(--b11-sm); color: var(--b11-sub);
    border-bottom: 1px dotted var(--b11-line2); line-height: 1.72;
}
.pl-risk li:last-child { border-bottom: 0; }
.pl-risk li::before {
    content: "!"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px;
    display: grid; place-items: center; background: var(--b11-badbg); color: var(--b11-bad);
    font-size: 12px; font-weight: 800;
}
.pl-risk li.ok::before { content: "✓"; background: var(--b11-okbg); color: var(--b11-ok); }
.pl-risk li b { color: var(--b11-ink); }

/* ---------- 纵向时间轴 ---------- */
.pl-timeline { list-style: none; margin: 0; padding: 0; }
.pl-timeline li {
    position: relative; padding: 0 0 22px 34px; border-left: 2px solid var(--b11-line2); margin-left: 8px;
}
.pl-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pl-timeline li::before {
    content: ""; position: absolute; left: -8px; top: 5px; width: 14px; height: 14px;
    background: var(--b11-card); border: 2px solid var(--pl-pri); border-radius: 50%;
}
.pl-timeline li.hot::before { background: var(--pl-pri); box-shadow: 0 0 0 4px var(--pl-tint); }
.pl-timeline .pl-t-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pl-t-time {
    font-family: var(--b11-mono); font-size: var(--b11-xs); font-weight: 800; letter-spacing: .08em;
    background: var(--pl-tint); color: var(--pl-pri); padding: 2px 8px;
}
.pl-t-title { font-size: var(--b11-base); font-weight: 800; color: var(--b11-ink); }
.pl-t-list { margin: 0; padding-left: 18px; }
.pl-t-list li { border: 0; padding: 0 0 0 0; margin: 0 0 4px; font-size: var(--b11-sm); color: var(--b11-sub); line-height: 1.7; }
.pl-t-list li::before { content: none; }
.pl-t-list li b { color: var(--b11-ink); }

/* ---------- 材料清单 ---------- */
.pl-mat { list-style: none; margin: 0; padding: 0; }
.pl-mat 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;
}
.pl-mat li:last-child { border-bottom: 0; }
.pl-mat li::before {
    content: "▣"; position: absolute; left: 2px; top: 8px; color: var(--pl-hot); font-size: 12px;
}
.pl-mat li b { color: var(--b11-ink); }

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

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