/* 10 咳嗽分类自查 · 桉绿 + 病程标尺；可移动指针、干湿咳分段、红旗卡 */
.cg { --a:#2b7a68; --a2:#175447; --asoft:#e2f2ea; }
:root[data-theme="dark"] .cg { --a:#6ac6ac; --a2:#96ddc7; --asoft:#16332b; }
.cg-hero-grid { display:grid; grid-template-columns:.86fr 1.14fr; }
.cg-intro { background:linear-gradient(180deg,var(--card),var(--card2)); }
.cg-legend { margin-top:24px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.cg-legend > b { font-size:13px; }
.cg-legend span { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2); padding:5px 0; }
.cg-legend i { width:11px; height:11px; border-radius:3px; background:var(--a); opacity:.85; }
.cg-legend span:nth-of-type(2) i { background:#c6973f; } .cg-legend span:nth-of-type(3) i { background:var(--bad); }
.cg-board { padding:28px 30px; border-left:1px solid var(--line); background:var(--card); }
.cg-board-hd { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--a2); padding-bottom:10px; margin-bottom:18px; }
.cg-board-hd b { font-family:var(--fd); font-size:19px; }
.cg-board-hd span { font-family:var(--fm); font-size:11px; color:var(--a); }
.cg-ruler { position:relative; padding-bottom:22px; }
.cg-zones { display:grid; grid-template-columns:3fr 5fr 4fr; height:38px; border-radius:8px; overflow:hidden; border:1px solid var(--line2); }
.cg-zones i { display:grid; place-items:center; font-family:var(--fm); font-style:normal; font-size:11px; font-weight:700; color:#fff; background:var(--a); }
.cg-zones i:nth-child(2) { background:#b98a3c; } .cg-zones i:nth-child(3) { background:#a4445a; }
:root[data-theme="dark"] .cg-zones i { color:#0d1518; }
.cg-marker { position:absolute; left:8%; top:-8px; bottom:22px; width:2px; background:var(--ink); transition:left .2s; }
.cg-marker span { position:absolute; top:-4px; left:-5px; width:12px; height:12px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 4px var(--asoft); }
.cg-ticks { display:flex; justify-content:space-between; font-family:var(--fm); font-size:10.5px; color:var(--muted); margin-top:6px; }
.cg-weeks { margin:14px 0 16px; }
.cg-weeks input { max-width:200px; }
.cg-type { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cg-type button { padding:11px 8px; background:var(--card2); border:1px solid var(--line2); border-radius:10px; color:var(--ink2); font-size:13.5px; font-weight:700; cursor:pointer; }
.cg-type button small { display:block; font-size:11px; font-weight:500; color:var(--muted); margin-top:3px; }
.cg-type button.is-on { background:var(--a); border-color:var(--a); color:#fff; }
.cg-type button.is-on small { color:#e6f5ef; }
.cg-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.cg-flags { display:flex; flex-wrap:wrap; gap:2px 0; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line2); }
.cg-board .h17-note b { color:var(--a2); }

.cg-zone { border-radius:16px; padding:22px 26px; background:var(--card); border:1px solid var(--line); border-left:6px solid var(--a); }
.cg-zone span { font-family:var(--fm); font-size:10.5px; letter-spacing:.12em; color:var(--muted); }
.cg-zone b { display:block; font-family:var(--fd); font-size:25px; margin:6px 0; }
.cg-zone p { font-size:13.5px; line-height:1.9; color:var(--ink2); margin:0; }
.cg-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.cg-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:15px 17px; }
.cg-card.is-red { background:var(--badbg); border-color:var(--bad); }
.cg-card span { font-family:var(--fm); font-size:10px; letter-spacing:.1em; color:var(--muted); }
.cg-card b { display:block; font-size:15px; margin:5px 0; }
.cg-card p { font-size:12px; line-height:1.8; color:var(--ink2); margin:0; }
.cg-summary-card { margin-top:14px; }
.cg-summary-card h3 { font-size:18px; margin-bottom:10px; }
.cg-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); }
.cg .h17-bench-in { border-top:4px solid var(--a); }
@media (max-width:900px){
    .cg-hero-grid,.cg-row2,.cg-cards { grid-template-columns:1fr; }
    .cg-board { border-left:0; border-top:1px solid var(--line); padding:24px 20px; }
    .cg-type { grid-template-columns:1fr 1fr 1fr; }
}