/* =====================================================================
 * H17 · 生活健康自查台 —— 全批独立设计系统（只作用于 .h17 新页面）
 * 配色：暖纸本 / 墨绿松石 / 陶土红；字体层级：宋体标题 + 无衬线正文 + 等宽数据
 * 主题：只读导航 #themeToggle 写入的 <html data-theme>，本文件不自建第二套开关
 * 头尾仍由 layouts.app 公共提供；面包屑为 partials.tool-station.crumb
 * ===================================================================== */
.h17 {
    --paper:#f4f2ec; --card:#fffdf8; --card2:#f9f6ef; --card3:#efece3;
    --ink:#18262c; --ink2:#42565e; --muted:#7d8b8d;
    --line:#e4e0d5; --line2:#cfd2c7;
    --a:#0f766e; --a2:#0b4f4a; --asoft:#e2f0eb;
    --ok:#1c6b52; --okbg:#e1f1e7; --warn:#9a5b12; --warnbg:#faeed8;
    --bad:#a82c43; --badbg:#fae6e9; --info:#285b8a; --infobg:#e6eff7;
    --shadow:0 18px 46px rgba(24,38,44,.075); --shadow2:0 6px 18px rgba(24,38,44,.06);
    --r:20px; --r2:12px;
    --fd:"Noto Serif SC","Songti SC","STSong",Georgia,serif;
    --fb:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    --fm:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
    color:var(--ink); font-family:var(--fb); font-size:15px; line-height:1.9;
    background:var(--paper) radial-gradient(900px 380px at 92% -6%,rgba(15,118,110,.07),transparent 65%) no-repeat;
    -webkit-font-smoothing:antialiased;
}
:root[data-theme="dark"] .h17 {
    --paper:#0d1518; --card:#141f23; --card2:#18252a; --card3:#1e2d32;
    --ink:#e9f0ec; --ink2:#b0c2c2; --muted:#819596;
    --line:#25373b; --line2:#345056;
    --a:#5cc7b4; --a2:#8fdccd; --asoft:#16332f;
    --ok:#79d0a5; --okbg:#153329; --warn:#e2b972; --warnbg:#382b16;
    --bad:#f0a0ac; --badbg:#3a1f25; --info:#8ab9e8; --infobg:#172b3d;
    --shadow:0 18px 46px rgba(0,0,0,.38); --shadow2:0 6px 18px rgba(0,0,0,.3);
}
.h17 *, .h17 *::before, .h17 *::after { box-sizing:border-box; }
.h17-wrap { max-width:1180px; margin:0 auto; padding:0 22px 68px; }
.h17 b, .h17 strong { font-weight:750; color:var(--a2); }
:root[data-theme="dark"] .h17 b, :root[data-theme="dark"] .h17 strong { color:var(--a2); }
.h17 p { margin:0 0 14px; }
.h17 h1,.h17 h2,.h17 h3,.h17 h4 { font-family:var(--fd); letter-spacing:-.02em; line-height:1.35; margin:0; }
.h17 a { color:var(--a); }
.h17 code,.h17 .h17-mono { font-family:var(--fm); font-size:12px; background:var(--card3); color:var(--a2); border-radius:5px; padding:1px 6px; }
.h17 small { font-size:12px; }

/* 面包屑（公共组件，在本批内重绘） */
.h17 .tsk-crumb-bar { background:transparent; border:0; margin:0; }
.h17 .tsk-crumb-bar-in { max-width:1180px; margin:0 auto; padding:18px 22px 4px; }
.h17 .tsk-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; }
.h17 .tsk-crumb a { color:var(--muted); text-decoration:none; }
.h17 .tsk-crumb a:hover { color:var(--a); }
.h17 .tsk-crumb-sep { color:var(--line2); }
.h17 .tsk-crumb-cur { color:var(--ink2); font-weight:700; }

/* 首屏通用骨架：具体版式由各页 CSS 重写 */
.h17-hero { margin-top:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.h17-hero-in { padding:34px 36px 30px; }
.h17-kicker { display:inline-block; font-family:var(--fm); font-size:10.5px; letter-spacing:.18em; color:var(--a); background:var(--asoft); border:1px solid var(--line); border-radius:999px; padding:5px 14px; margin-bottom:16px; }
.h17-hero h1 { font-size:clamp(32px,4vw,52px); font-weight:800; margin-bottom:12px; }
.h17-lede { font-size:16px; line-height:2; color:var(--ink2); max-width:44em; }
.h17-facts { display:grid; gap:9px; margin-top:20px; }
.h17-facts > div { display:flex; gap:14px; align-items:baseline; background:var(--card2); border-left:3px solid var(--a); border-radius:0 var(--r2) var(--r2) 0; padding:9px 14px; }
.h17-facts b { font-size:13px; white-space:nowrap; }
.h17-facts small { color:var(--muted); line-height:1.7; }
.h17-hero-art { max-width:100%; height:auto; display:block; }

/* 章节标题 / 卡片 / 按钮 */
.h17-sec-hd { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:44px 0 16px; }
.h17-sec-hd h2 { font-size:23px; display:flex; align-items:center; gap:12px; }
.h17-sec-hd h2 i { font-family:var(--fm); font-style:normal; font-size:11px; color:var(--card); background:var(--a); border-radius:8px; padding:4px 9px; letter-spacing:.04em; }
.h17-sec-hd > span { font-size:12.5px; color:var(--muted); }
.h17-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow2); }
.h17-grid { display:grid; gap:14px; }
.h17-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.h17-btn { font-family:var(--fb); font-size:13.5px; font-weight:750; line-height:1.5; padding:10px 19px; border-radius:999px; border:1px solid var(--line2); background:transparent; color:var(--ink2); cursor:pointer; transition:transform .14s,box-shadow .14s,background .14s; }
.h17-btn:hover { transform:translateY(-1px); border-color:var(--a); color:var(--a); }
.h17-btn:active { transform:none; }
.h17-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.h17-btn-main { background:var(--a); border-color:var(--a); color:#fff; box-shadow:0 8px 20px rgba(15,118,110,.2); }
.h17-btn-main:hover { background:var(--a2); border-color:var(--a2); color:#fff; }
.h17-btn-soft { background:var(--asoft); border-color:var(--line); color:var(--a2); }
.h17-btn-mini { font-size:12px; padding:6px 13px; }
.h17 label { display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin-bottom:5px; }
.h17 input[type=text],.h17 input[type=number],.h17 input[type=date],.h17 input[type=time],.h17 select,.h17 textarea {
    width:100%; font-family:var(--fb); font-size:14px; line-height:1.7; color:var(--ink);
    background:var(--card2); border:1px solid var(--line2); border-radius:10px; padding:9px 12px; outline:none;
}
.h17 textarea { font-family:var(--fm); font-size:12.5px; resize:vertical; }
.h17 input:focus,.h17 select:focus,.h17 textarea:focus { border-color:var(--a); box-shadow:0 0 0 3px var(--asoft); }
.h17 [aria-invalid=true] { border-color:var(--bad) !important; box-shadow:0 0 0 3px var(--badbg) !important; }
.h17 input[type=range] { width:100%; accent-color:var(--a); }
.h17 .h17-check { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink2); margin:0 12px 0 0; cursor:pointer; }
.h17 .h17-check input { width:auto; accent-color:var(--a); }

/* 提示 / 结果 / 表格 */
.h17-err { background:var(--badbg); color:var(--bad); border:1px solid var(--badbg); border-radius:10px; padding:10px 14px; font-size:13px; margin-top:12px; line-height:1.8; }
.h17-note { font-size:12.5px; color:var(--muted); line-height:1.85; margin-top:10px; }
.h17-tag { display:inline-block; font-family:var(--fm); font-size:11px; font-weight:700; border-radius:999px; padding:3px 11px; background:var(--card3); color:var(--ink2); }
.h17-tag-ok { background:var(--okbg); color:var(--ok); }
.h17-tag-warn { background:var(--warnbg); color:var(--warn); }
.h17-tag-bad { background:var(--badbg); color:var(--bad); }
.h17-tag-info { background:var(--infobg); color:var(--info); }
.h17-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r2); }
.h17 table { width:100%; border-collapse:collapse; font-size:13px; }
.h17 th,.h17 td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.h17 th { font-weight:750; color:var(--ink2); background:var(--card2); white-space:nowrap; font-size:12.5px; }
.h17 tr:last-child td { border-bottom:0; }
.h17 .is-bad { color:var(--bad); font-weight:700; }

/* 批量工作台（每页 CSS 可重写版式） */
.h17-bench { margin-top:44px; }
.h17-bench-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:14px; align-items:start; }
.h17-bench-in,.h17-bench-out { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.h17-bench-in label { margin-bottom:8px; }
.h17-clean { display:flex; flex-wrap:wrap; gap:4px 0; align-items:center; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line2); }
.h17-clean > b { width:100%; font-size:12px; color:var(--muted); margin-bottom:4px; }
.h17-bench-sum { font-family:var(--fm); font-size:12px; color:var(--muted); margin-bottom:10px; }
.h17-bench [data-b=preview] { display:block; margin-top:10px; background:transparent; padding:0; color:var(--muted); font-size:11.5px; word-break:break-all; }

/* 科普正文 / FAQ / 页脚声明 */
.h17-read { margin-top:48px; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--a); border-radius:0 var(--r) var(--r) 0; padding:28px 32px; }
.h17-read h2 { font-size:22px; margin-bottom:16px; }
.h17-read p { font-size:14.5px; line-height:2.1; color:var(--ink2); margin-bottom:15px; }
.h17-read p:last-child { margin-bottom:0; }
.h17-faq { margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.h17-faq details { background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:14px 18px; }
.h17-faq summary { font-weight:750; font-size:14px; cursor:pointer; color:var(--ink); }
.h17-faq p { margin:10px 0 0; font-size:13.5px; line-height:1.95; color:var(--ink2); }
.h17-foot { margin-top:34px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; line-height:1.9; color:var(--muted); }

/* AI 卡片 */
.h17-ai { margin-top:16px; background:var(--card2); border:1px dashed var(--line2); border-radius:var(--r); padding:20px 22px; }
.h17-ai h3 { font-size:17px; margin-bottom:8px; }
.h17-ai p { font-size:13px; color:var(--ink2); line-height:1.9; }
.h17-ai-out { margin-top:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:14px 16px; font-size:13.5px; line-height:1.95; white-space:pre-wrap; }

/* 完成操作后的弹窗 / 轻提示（加载时绝不出现） */
.h17-modal { position:fixed; inset:0; z-index:100001; display:grid; place-items:center; padding:20px; }
.h17-modal-mask { position:absolute; inset:0; background:rgba(10,22,25,.55); backdrop-filter:blur(3px); }
.h17-modal-card { position:relative; width:min(480px,100%); background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 30px 90px rgba(0,0,0,.3); padding:28px 30px 24px; }
.h17-modal-kicker { font-family:var(--fm); font-size:10.5px; letter-spacing:.16em; color:var(--a); }
.h17-modal-card h3 { font-size:22px; margin:8px 0 12px; }
.h17-modal-body { font-size:14px; line-height:1.9; color:var(--ink2); }
.h17-modal-ft { display:flex; gap:9px; justify-content:flex-end; margin-top:20px; }
.h17-toast { position:fixed; left:50%; bottom:34px; transform:translate(-50%,14px); z-index:100002; background:#18262c; color:#fff; font-size:13.5px; padding:10px 20px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; box-shadow:0 10px 28px rgba(0,0,0,.22); }
.h17-toast.is-on { opacity:1; transform:translate(-50%,0); }
.h17-toast.is-err { background:#8d2337; }
/* 兜底：即便弹窗被挂到 body，深色模式下也不掉变量 */
:root[data-theme="dark"] .h17-modal-card {
    --card:#141f23; --ink:#e9f0ec; --ink2:#b0c2c2; --line:#25373b;
    --a:#5cc7b4; --a2:#8fdccd; --bad:#f0a0ac; --badbg:#3a1f25;
    color:var(--ink);
}

@media (max-width:900px) {
    .h17-bench-grid,.h17-faq { grid-template-columns:1fr; }
    .h17-hero-in { padding:26px 22px; }
    .h17-wrap { padding:0 14px 52px; }
    .h17 .tsk-crumb-bar-in { padding:14px 14px 2px; }
    .h17-read { padding:22px 20px; }
}