/* 17 · 梦游原因科普 —— 视觉母题「夜航」：靛蓝夜空 / 月相 / 睡眠阶段条
   与其余 13 页完全独立：色板、栅格、圆角、字族、装饰均单独定义。 */
.t28.sw-wrap {
    --t28-bg: #f3f5fc;
    --t28-surface: #ffffff;
    --t28-surface-2: #eef1fa;
    --t28-ink: #1b2440;
    --t28-sub: #4a5573;
    --t28-muted: #7a86a3;
    --t28-line: #dfe4f2;
    --t28-accent: #4657c8;
    --t28-accent-2: #8a6ee6;
    --t28-soft: #e9ecff;
    --t28-on-accent: #ffffff;
    --t28-ok: #1b7f6b;
    --t28-warn: #a97310;
    --t28-danger: #b93b60;
    --t28-ok-soft: #e2f4ee;
    --t28-warn-soft: #fcf1da;
    --t28-danger-soft: #fce9ef;
    --t28-radius: 20px;
    --t28-font: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
    --t28-fs-hero: clamp(31px, 4.2vw, 44px);
    --t28-shadow: 0 10px 34px rgba(46, 60, 120, .09);
    --t28-shadow-lift: 0 18px 46px rgba(46, 60, 120, .18);
}
:root[data-theme="dark"] .t28.sw-wrap {
    --t28-bg: #0b1020;
    --t28-surface: #141c30;
    --t28-surface-2: #1a243c;
    --t28-ink: #eaf0ff;
    --t28-sub: #b6c2e0;
    --t28-muted: #8897bb;
    --t28-line: #2a3552;
    --t28-accent: #93a5ff;
    --t28-accent-2: #c3a9ff;
    --t28-soft: #212d4e;
    --t28-on-accent: #0b1020;
    --t28-ok: #6dd6b4;
    --t28-warn: #f0c274;
    --t28-danger: #ff95ae;
    --t28-ok-soft: #17342f;
    --t28-warn-soft: #3b2f1a;
    --t28-danger-soft: #3c2130;
    --t28-shadow: 0 10px 34px rgba(0, 0, 0, .4);
}

/* 首屏：左文案右夜空，右侧为纯 CSS 绘制的睡眠阶段图 */
.sw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 30px; align-items: center;
    padding: 38px 0 30px;
}
.sw-hero h1 em {
    display: block; font-size: .56em; font-weight: 650; letter-spacing: .02em;
    color: var(--t28-accent-2); margin-top: 8px;
}
.sw-hero-art {
    position: relative; min-height: 250px; border-radius: 26px; overflow: hidden;
    background: radial-gradient(120% 90% at 78% 18%, #3f4d92 0%, #232f63 48%, #182247 100%);
    box-shadow: 0 20px 48px rgba(30, 42, 100, .24);
    padding: 24px 20px 18px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.sw-stars {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.9) 50%, transparent 51%),
        radial-gradient(1.3px 1.3px at 30% 12%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(2px 2px at 52% 30%, rgba(255,255,255,.85) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 22% 52%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1.7px 1.7px at 88% 62%, rgba(255,255,255,.75) 50%, transparent 51%),
        radial-gradient(1.1px 1.1px at 68% 8%, rgba(255,255,255,.65) 50%, transparent 51%);
    pointer-events: none;
}
.sw-moon {
    position: absolute; top: 26px; right: 30px; width: 76px; height: 76px;
    border-radius: 50%; background: #f7f2d8;
    box-shadow: 0 0 34px rgba(247, 242, 216, .48), inset -14px -6px 0 #d9d2b2;
}
.sw-moon span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }
.sw-stages { position: relative; display: grid; gap: 7px; margin-top: auto; }
.sw-stages > div {
    display: flex; align-items: center; gap: 9px;
    font-size: 12.5px; color: rgba(255,255,255,.74);
    background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px; padding: 7px 11px;
}
.sw-stages > div i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.42); flex: none; }
.sw-stages > div.on { background: rgba(255,255,255,.2); color: #fff; font-weight: 700; border-color: rgba(255,255,255,.34); }
.sw-stages > div.on i { background: #ffe9a8; box-shadow: 0 0 10px #ffe9a8; }

/* 首屏自查：左侧渐变竖条 + 加宽勾选区 */
.sw-quick {
    position: relative; overflow: hidden;
    border-top: 3px solid var(--t28-accent);
}
.sw-quick::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--t28-accent), var(--t28-accent-2));
}
.sw-grow { flex: 2 1 420px; }
.sw-wrap .t28-check { border-radius: 12px; }
.sw-wrap .t28-btn--ghost { border-style: dashed; }

/* 结果区：清单卡片与红旗高亮 */
.sw-list { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.sw-list li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 14.5px; line-height: 1.7; padding: 9px 12px;
    background: var(--t28-surface); border: 1px solid var(--t28-line); border-radius: 10px;
}
.sw-list li b { color: var(--t28-accent); flex: none; }
.sw-flag {
    margin-top: 12px; padding: 12px 14px; border-radius: 10px;
    background: var(--t28-danger-soft); color: var(--t28-danger);
    font-size: 14px; line-height: 1.7; font-weight: 700;
}
.sw-prose-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--t28-gap); }
.sw-prose-grid .t28-panel { border-bottom: 3px solid var(--t28-accent-2); }
.sw-prose-grid h3 { margin-bottom: 10px; color: var(--t28-accent); }
:root[data-theme="dark"] .sw-hero-art {
    background: radial-gradient(120% 90% at 78% 18%, #4b5aa6 0%, #2b376e 48%, #1b2550 100%);
}

@media (max-width: 860px) {
    .sw-hero { grid-template-columns: minmax(0, 1fr); }
    .sw-hero-art { min-height: 200px; }
    .sw-prose-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .sw-hero { padding: 22px 0 18px; gap: 18px; }
    .sw-hero-art { min-height: 180px; border-radius: 18px; padding: 16px; }
    .sw-moon { width: 56px; height: 56px; top: 18px; right: 20px; }
    .sw-stages > div { font-size: 11.5px; padding: 6px 9px; }
}