/* 45 · 乙醇汽油科普 —— 视觉母题「分层量杯 / 停放日历轨」
   独立布局：左侧 SVG 量杯（含水层随天数变化）+ 右侧车辆参数；结果用带优先级编号的清单和横向日历节点。 */
.b29.eg-wrap {
    --b29-bg: #f6f7ee;
    --b29-surface: #fdfdf7;
    --b29-surface-2: #f1f3e4;
    --b29-ink: #262b1c;
    --b29-sub: #585f49;
    --b29-muted: #8d9478;
    --b29-line: #e6e9d4;
    --b29-line-strong: #d2d8b5;
    --b29-accent: #647437;
    --b29-accent-2: #a8792e;
    --b29-tint: #edf2da;
    --b29-radius: 17px;
    --b29-radius-sm: 10px;
}
:root[data-theme="dark"] .b29.eg-wrap {
    --b29-bg: #12150d;
    --b29-surface: #1d2115;
    --b29-surface-2: #252b19;
    --b29-ink: #eef2dc;
    --b29-sub: #c2cba6;
    --b29-muted: #949e7d;
    --b29-line: #333a22;
    --b29-line-strong: #46502c;
    --b29-accent: #b6d078;
    --b29-accent-2: #e0b476;
    --b29-tint: #2b341b;
}
.eg-hero h1 em { font-style: normal; color: var(--b29-accent-2); display: block; font-size: .56em; margin-top: 10px; }
.eg-console { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 0;
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius); overflow: hidden; box-shadow: var(--b29-shadow); }
.eg-glass { padding: 26px; background: var(--b29-surface-2); text-align: center; }
.eg-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--b29-accent); margin-bottom: 11px; text-align: left; }
.eg-glass h2 { font-size: var(--b29-lg); margin-bottom: 14px; text-align: left; }
.eg-cup { width: min(200px, 100%); height: auto; display: block; margin: 0 auto; }
.eg-cup-outline { fill: none; stroke: var(--b29-line-strong); stroke-width: 5; }
.eg-gas { fill: #d9c88c; opacity: .85; transition: y .3s, height .3s; }
.eg-water { fill: #8fb3c0; transition: y .3s, height .3s; }
:root[data-theme="dark"] .eg-gas { fill: #8b7c46; }
:root[data-theme="dark"] .eg-water { fill: #39606e; }
.eg-label { font-size: 13px; font-weight: 800; fill: #5f532c; font-family: var(--b29-font); }
.eg-label--water { fill: #2b5463; font-size: 11px; }
.eg-foot-label { font-size: 10px; fill: var(--b29-muted); font-family: var(--b29-font); }
.eg-glass-note { margin-top: 14px; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.8; text-align: left; }
.eg-side { padding: 26px 24px; background: var(--b29-surface); border-left: 1px solid var(--b29-line); display: flex; flex-direction: column; gap: 12px; }
.eg-side-title { font-size: var(--b29-sm); font-weight: 800; letter-spacing: .1em; color: var(--b29-accent); }

.eg-verdict { padding: 18px 21px; border-radius: var(--b29-radius); background: var(--b29-tint);
    border-left: 5px solid var(--b29-accent); font-size: var(--b29-sm); line-height: 1.85; margin-bottom: 18px; }
.eg-verdict--warn { background: var(--b29-warn-tint); border-left-color: var(--b29-warn); }
.eg-verdict--danger { background: var(--b29-danger-tint); border-left-color: var(--b29-danger); }
.eg-verdict b { color: var(--b29-accent); }
.eg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.eg-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 17px;
    border-radius: var(--b29-radius-sm); background: var(--b29-surface); border: 1px solid var(--b29-line); }
.eg-item > span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
    background: var(--b29-tint); color: var(--b29-accent); font-family: var(--b29-mono); font-size: var(--b29-xs); font-weight: 800; }
.eg-item b { display: block; font-size: var(--b29-sm); }
.eg-item small { display: block; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.75; margin-top: 4px; }

.eg-cal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.eg-cal-item { padding: 16px; border-radius: var(--b29-radius-sm); background: var(--b29-surface); border: 1px solid var(--b29-line); }
.eg-cal-item.is-hit { border-color: var(--b29-warn); background: var(--b29-warn-tint); }
.eg-cal-item b { display: block; font-family: var(--b29-mono); font-size: var(--b29-md); color: var(--b29-accent); }
.eg-cal-item small { display: block; font-size: var(--b29-xs); color: var(--b29-sub); line-height: 1.7; margin-top: 5px; }

@media (max-width: 900px) {
    .eg-console { grid-template-columns: minmax(0, 1fr); }
    .eg-side { border-left: 0; border-top: 1px solid var(--b29-line); }
    .eg-list, .eg-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .eg-glass, .eg-side { padding: 18px 16px; }
    .eg-list, .eg-cal { grid-template-columns: minmax(0, 1fr); }
}