/* 12 乳腺自查手法图解 · 灰玫 + 钟点定位圆；步骤竖排、记录卡 */
.be { --a:#a25372; --a2:#7c3755; --asoft:#f8e9ef; }
:root[data-theme="dark"] .be { --a:#e5a2ba; --a2:#f0c0d0; --asoft:#38202b; }
.be-hero-grid { display:grid; grid-template-columns:.86fr 1.14fr; }
.be-intro { background:linear-gradient(180deg,var(--card),var(--card2)); }
.be-steps { margin-top:24px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.be-steps > b { font-family:var(--fd); font-size:15px; }
.be-steps ol { list-style:none; padding:0; margin:10px 0 8px; }
.be-steps li { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink2); padding:6px 0; border-bottom:1px dashed var(--line); }
.be-steps li:last-child { border-bottom:0; }
.be-steps li i { font-family:var(--fm); font-style:normal; font-size:10px; font-weight:800; color:var(--a); background:var(--asoft); border-radius:6px; padding:3px 7px; }
.be-steps small { font-size:11.5px; color:var(--muted); line-height:1.7; }
.be-map-wrap { padding:28px 30px; border-left:1px solid var(--line); background:var(--card); }
.be-map-hd { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--a2); padding-bottom:10px; margin-bottom:12px; }
.be-map-hd b { font-family:var(--fd); font-size:19px; }
.be-map-hd span { font-family:var(--fm); font-size:11px; color:var(--a); }
.be-clock { position:relative; width:216px; height:216px; margin:0 auto 10px; }
.be-clock-face { position:absolute; inset:24px; border-radius:50%; border:2px solid var(--line2); background:radial-gradient(circle,var(--asoft) 0 24%,var(--card2) 25% 100%); }
.be-clock-face::before { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 88deg,var(--line) 88deg 92deg,transparent 92deg 178deg,var(--line) 178deg 182deg,transparent 182deg 268deg,var(--line) 268deg 272deg,transparent 272deg 358deg,var(--line) 358deg 360deg); }
.be-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:11.5px; font-weight:700; color:var(--a2); background:var(--card); border:1px solid var(--line2); border-radius:999px; padding:3px 9px; }
.be-clock > button { position:absolute; transform:translate(-50%,-50%); width:27px; height:27px; border-radius:50%; border:1px solid var(--line2); background:var(--card); color:var(--ink2); font-family:var(--fm); font-size:11px; font-weight:700; cursor:pointer; }
.be-clock > button:hover { border-color:var(--a); color:var(--a); }
.be-clock > button.is-on { background:var(--a); border-color:var(--a); color:#fff; }
.be-map-note { font-size:12px; color:var(--ink2); text-align:center; margin:0 0 16px; }
.be-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.be-skin { display:flex; margin-top:2px; color:var(--bad); }
.be-map-wrap .h17-note b { color:var(--a2); }

.be-record { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.be-rec { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.be-rec.is-red { background:var(--badbg); border-color:var(--bad); }
.be-rec span { font-family:var(--fm); font-size:10px; letter-spacing:.1em; color:var(--muted); }
.be-rec b { display:block; font-family:var(--fd); font-size:19px; margin:5px 0; }
.be-rec p { font-size:12.5px; line-height:1.8; color:var(--ink2); margin:0; }
.be-summary-card { margin-top:14px; }
.be-summary-card h3 { font-size:18px; margin-bottom:10px; }
.be-summary { background:var(--card2); border-left:3px solid var(--a); border-radius:0 10px 10px 0; padding:12px 16px; font-size:14px; line-height:2; color:var(--ink2); }
.be .h17-bench-in { border-top:4px solid var(--a); }
@media (max-width:900px){
    .be-hero-grid,.be-row2,.be-record { grid-template-columns:1fr; }
    .be-map-wrap { border-left:0; border-top:1px solid var(--line); padding:24px 20px; }
}