/* 07 头屑成因与改善 · 橄榄绿 + 货架卡；四周计划时间轴、成分对照表 */
.dg { --a:#4d7746; --a2:#33562f; --asoft:#e8f1e3; }
:root[data-theme="dark"] .dg { --a:#97c98d; --a2:#b7dcae; --asoft:#1d3020; }
.dg-hero-grid { display:grid; grid-template-columns:.84fr 1.16fr; }
.dg-intro { position:relative; background:linear-gradient(180deg,var(--card),var(--card2)); }
.dg-bottle { width:120px; height:152px; margin:26px auto 0; border-radius:18px 18px 12px 12px; background:linear-gradient(160deg,var(--asoft),var(--card)); border:2px solid var(--line2); display:grid; place-content:center; text-align:center; position:relative; }
.dg-bottle::before { content:''; position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:44px; height:18px; border-radius:6px 6px 0 0; background:var(--a); }
.dg-bottle i { display:block; width:46px; height:46px; margin:0 auto 8px; border-radius:50%; border:3px dashed var(--a); }
.dg-bottle b { font-family:var(--fm); font-size:10px; letter-spacing:.14em; color:var(--a2); }
.dg-bottle small { font-family:var(--fm); font-size:10px; color:var(--muted); }
.dg-shelf { padding:28px 30px; border-left:1px solid var(--line); background:var(--card); }
.dg-shelf-hd { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--a2); padding-bottom:10px; margin-bottom:16px; }
.dg-shelf-hd b { font-family:var(--fd); font-size:19px; }
.dg-shelf-hd span { font-family:var(--fm); font-size:11px; color:var(--a); }
.dg-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px; }
.dg-cards button { text-align:left; padding:15px 13px; background:var(--card2); border:1px solid var(--line2); border-radius:12px; cursor:pointer; color:var(--ink2); }
.dg-cards button i { display:block; font-style:normal; font-size:22px; color:var(--a); margin-bottom:6px; }
.dg-cards button b { display:block; font-size:13.5px; color:var(--ink); }
.dg-cards button small { display:block; font-size:11.5px; line-height:1.6; margin-top:4px; }
.dg-cards button:hover { border-color:var(--a); }
.dg-cards button.is-on { background:var(--asoft); border-color:var(--a); box-shadow:inset 0 0 0 1px var(--a); }
.dg-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.dg-row2 input[type=range] { margin-top:8px; }
.dg-rv { font-family:var(--fm); font-size:11px; color:var(--a2); }
.dg-red { display:flex; margin-top:14px; color:var(--bad); }
.dg-shelf .h17-note b { color:var(--a2); }

.dg-plan { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.dg-week { position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 15px; }
.dg-week::after { content:''; position:absolute; right:-10px; top:50%; width:10px; border-top:1px dashed var(--line2); z-index:1; }
.dg-week:last-child::after { display:none; }
.dg-week span { font-family:var(--fm); font-size:10.5px; letter-spacing:.1em; color:var(--a); }
.dg-week b { display:block; font-family:var(--fd); font-size:17px; margin:6px 0; }
.dg-week p { font-size:12px; line-height:1.75; color:var(--ink2); margin:0; }
.dg-summary-card { margin-top:14px; }
.dg-summary-card h3 { font-size:18px; margin-bottom:10px; }
.dg-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); }
.dg-ingredients .h17-scroll { background:var(--card); }
.dg-ingredients td { font-size:12.5px; line-height:1.8; }
.dg .h17-bench-in { border-top:4px solid var(--a); }
@media (max-width:900px){
    .dg-hero-grid,.dg-row2,.dg-cards,.dg-plan { grid-template-columns:1fr; }
    .dg-shelf { border-left:0; border-top:1px solid var(--line); padding:24px 20px; }
    .dg-bottle { display:none; }
}