/* 08 鬼压床科普 · 夜蓝 + 星点；三段夜间时间轴、说法对照、夜记录卡 */
.sp { --a:#4a4c92; --a2:#33356e; --asoft:#e9e9f7; }
:root[data-theme="dark"] .sp { --a:#a3a5f0; --a2:#c1c2f8; --asoft:#22224a; }
.sp-hero { background:linear-gradient(115deg,var(--card) 0%,var(--card) 44%,#20244b 44%,#141733 100%); }
:root[data-theme="dark"] .sp-hero { background:linear-gradient(115deg,var(--card) 0%,var(--card) 44%,#0e1030 44%,#090a1d 100%); }
.sp-hero-grid { display:grid; grid-template-columns:.9fr 1.1fr; }
.sp-intro { background:transparent; }
.sp-myth { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; }
.sp-myth > div { background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:13px 15px; }
.sp-myth > div:last-child { background:var(--asoft); border-color:var(--a); }
.sp-myth span { display:block; font-family:var(--fm); font-size:10px; letter-spacing:.1em; color:var(--muted); }
.sp-myth b { display:block; font-family:var(--fd); font-size:16px; margin:4px 0; }
.sp-myth small { font-size:11.5px; color:var(--ink2); line-height:1.6; }
.sp-night { padding:30px 30px 26px; color:#e8e9fa; position:relative; overflow:hidden; }
.sp-night::before { content:''; position:absolute; inset:0; background:radial-gradient(2px 2px at 18% 12%,#fff8,transparent),radial-gradient(2px 2px at 72% 8%,#fff6,transparent),radial-gradient(1px 1px at 42% 22%,#fff7,transparent),radial-gradient(2px 2px at 88% 28%,#fff5,transparent); pointer-events:none; }
.sp-night > * { position:relative; }
.sp-night-hd { display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid #ffffff30; padding-bottom:10px; margin-bottom:16px; }
.sp-night-hd b { font-family:var(--fd); font-size:19px; }
.sp-night-hd span { font-family:var(--fm); font-size:10.5px; color:#a9abda; }
.sp-axis { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-bottom:14px; }
.sp-axis button { text-align:left; padding:12px 10px 12px 0; background:transparent; border:0; border-top:2px solid #ffffff30; color:#c9cbe9; cursor:pointer; }
.sp-axis button.is-on { border-top-color:#8f92ff; color:#fff; }
.sp-axis button i { display:block; font-family:var(--fm); font-style:normal; font-size:10px; letter-spacing:.1em; }
.sp-axis button b { display:block; font-family:var(--fd); font-size:17px; margin:3px 0; }
.sp-axis button small { font-size:11px; line-height:1.6; opacity:.8; }
.sp-phase-text { min-height:66px; background:#ffffff12; border:1px solid #ffffff20; border-radius:10px; padding:12px 15px; font-size:12.5px; line-height:1.85; color:#dfe0f5; margin-bottom:16px; }
.sp-night label { color:#c9cbe9; }
.sp-night input,.sp-night select { background:#ffffff14; border-color:#ffffff30; color:#f2f2ff; }
.sp-night select option { color:#18262c; }
.sp-night .h17-check { color:#dfe0f5; }
.sp-night .h17-btn:not(.h17-btn-main) { color:#dfe0f5; border-color:#ffffff40; }
.sp-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.sp-flags { display:flex; flex-wrap:wrap; gap:2px 0; padding-top:8px; border-top:1px dashed #ffffff30; }
.sp-freq { margin-top:12px; }
.sp-night .h17-note { color:#adb0d8; }
.sp-night .h17-note b { color:#c5c6ff; }

.sp-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sp-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.sp-card.is-warn { border-top:4px solid var(--warn); }
.sp-card.is-bad { border-top:4px solid var(--bad); }
.sp-card.is-ok { border-top:4px solid var(--ok); }
.sp-card span { font-family:var(--fm); font-size:10px; letter-spacing:.1em; color:var(--muted); }
.sp-card b { display:block; font-family:var(--fd); font-size:19px; margin:6px 0; }
.sp-card p { font-size:12.5px; line-height:1.8; color:var(--ink2); margin:0; }
.sp-summary-card { margin-top:14px; }
.sp-summary-card h3 { font-size:18px; margin-bottom:10px; }
.sp-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); }
.sp .h17-bench-out { background:linear-gradient(180deg,var(--asoft),var(--card) 42%); }
:root[data-theme="dark"] .sp .h17-bench-out { background:linear-gradient(180deg,#1e1e42,var(--card) 42%); }
@media (max-width:900px){
    .sp-hero { background:var(--card); }
    .sp-hero-grid,.sp-row2,.sp-cards,.sp-myth { grid-template-columns:1fr; }
    .sp-night { background:#1b1e42; }
    .sp-axis { grid-template-columns:1fr; }
}