/* 05 耳石症自查 · 深海青 + 环形罗盘；发作时长横向时间轴、四步顺序核对 */
.bp { --a:#126c86; --a2:#0a4a5e; --asoft:#e0f1f5; }
:root[data-theme="dark"] .bp { --a:#69c6dd; --a2:#96dcea; --asoft:#12313a; }
.bp-hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; }
.bp-intro { background:linear-gradient(170deg,var(--card),var(--card2)); }
.bp-canal { margin-top:22px; }
.bp-canal svg { width:100%; max-width:300px; height:auto; display:block; margin:0 auto; border-radius:14px; }
.bp-compass { padding:28px 30px; border-left:1px solid var(--line); background:var(--card); }
.bp-compass-hd { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--a2); padding-bottom:10px; margin-bottom:16px; }
.bp-compass-hd b { font-family:var(--fd); font-size:19px; }
.bp-compass-hd span { font-family:var(--fm); font-size:11px; color:var(--a); }
.bp-pos-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:18px; }
.bp-pos-grid button { display:grid; place-items:center; gap:2px; aspect-ratio:1/.82; font-size:24px; font-family:var(--fm); color:var(--ink2); background:var(--card2); border:1px solid var(--line2); border-radius:14px; cursor:pointer; transition:transform .15s,background .15s; }
.bp-pos-grid button small { font-family:var(--fb); font-size:12px; font-weight:700; }
.bp-pos-grid button:hover { transform:translateY(-2px); border-color:var(--a); }
.bp-pos-grid button.is-on { background:var(--a); border-color:var(--a); color:#fff; }
.bp-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bp-flags { display:flex; flex-wrap:wrap; gap:2px 0; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line2); }
.bp-compass .h17-note b { color:var(--a2); }

.bp-timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.bp-seg { padding:18px 20px; border-right:1px dashed var(--line2); position:relative; }
.bp-seg:last-child { border-right:0; }
.bp-seg.is-on { background:var(--asoft); }
.bp-seg.is-on::after { content:'本次'; position:absolute; right:12px; top:12px; font-family:var(--fm); font-size:10px; color:var(--a2); background:var(--card); border-radius:999px; padding:2px 8px; }
.bp-seg span { font-family:var(--fm); font-size:10.5px; color:var(--muted); }
.bp-seg b { display:block; font-family:var(--fd); font-size:19px; margin:5px 0; }
.bp-seg p { font-size:12.5px; line-height:1.8; color:var(--ink2); margin:0; }
.bp-flags-out { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.bp-flag { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--line2); border-radius:0 10px 10px 0; padding:12px 15px; font-size:12.5px; line-height:1.8; color:var(--ink2); }
.bp-flag.is-red { border-left-color:var(--bad); background:var(--badbg); color:var(--bad); }
.bp-flag.is-warn { border-left-color:var(--warn); background:var(--warnbg); }
.bp-summary-card { margin-top:14px; }
.bp-summary-card h3 { font-size:18px; margin-bottom:10px; }
.bp-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); }
.bp-seq-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.bp-seq-grid > div { background:var(--card); border:1px solid var(--line); border-top:4px solid var(--a); border-radius:0 0 14px 14px; padding:18px; }
.bp-seq-grid i { font-family:var(--fm); font-style:normal; font-size:12px; font-weight:800; color:var(--a); }
.bp-seq-grid b { display:block; font-family:var(--fd); font-size:15px; margin:7px 0; }
.bp-seq-grid p { font-size:12.5px; line-height:1.85; color:var(--ink2); margin:0; }
.bp .h17-bench-in { background:linear-gradient(135deg,var(--asoft),var(--card) 55%); }
:root[data-theme="dark"] .bp .h17-bench-in { background:linear-gradient(135deg,#123039,var(--card) 55%); }
@media (max-width:900px){
    .bp-hero-grid,.bp-row2,.bp-timeline,.bp-flags-out,.bp-seq-grid { grid-template-columns:1fr; }
    .bp-compass { border-left:0; border-top:1px solid var(--line); padding:24px 20px; }
    .bp-seg { border-right:0; border-bottom:1px dashed var(--line2); }
    .bp-pos-grid { grid-template-columns:repeat(2,1fr); }
}