/* =====================================================================
 * 04 异宠环境参数 · 独立版式「饲养箱剖面 + 六只径向仪表」
 * 苔绿 + 玻璃箱轴测剖面 + 半圆表盘
 * ===================================================================== */
.pb--ee { --pb-a: #4a7a52; --pb-a-soft: #e6f0e6; }
:root[data-theme="dark"] .pb--ee { --pb-a: #8cc898; --pb-a-soft: #1d3023; }

.ee-hero { padding-top: 32px; }
.ee-console { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .88fr); gap: 14px; margin-top: 22px; align-items: start; }
.ee-form { border-top: 3px solid var(--pb-a); }
.ee-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ee-fields .ee-span { grid-column: 1 / -1; }
.ee-custom { margin-top: 13px; padding: 12px; border: 1px dashed var(--pb-a); border-radius: var(--pb-r-sm); background: var(--pb-a-soft); }
.ee-custom-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }

/* 饲养箱剖面 */
.ee-vivarium { background: var(--pb-card); border: 1px solid var(--pb-line2); border-radius: var(--pb-r); box-shadow: var(--pb-shadow-sm); padding: 17px; }
.ee-viv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--pb-line2); padding-bottom: 9px; }
.ee-viv-head span { font-family: var(--pb-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--pb-a); }
.ee-viv-head b { font-size: 15px; }
.ee-viv-svg { width: 100%; height: auto; display: block; margin: 10px 0; background: var(--pb-card2); border-radius: var(--pb-r-sm); }
.ee-glass { fill: color-mix(in srgb, var(--pb-a-soft) 38%, transparent); stroke: var(--pb-a); stroke-width: 2; }
.ee-substrate { fill: #a98a63; opacity: .55; }
:root[data-theme="dark"] .ee-substrate { opacity: .38; }
.ee-lamp-shade { fill: var(--pb-card); stroke: var(--pb-ink2); stroke-width: 1.6; }
.ee-lamp-bulb { fill: var(--pb-warn); }
.ee-heat { fill: none; stroke: var(--pb-warm); stroke-width: 1.6; opacity: .7; }
.ee-hide { fill: var(--pb-card); stroke: var(--pb-ink2); stroke-width: 1.6; }
.ee-water { fill: color-mix(in srgb, var(--pb-brand) 30%, transparent); stroke: var(--pb-brand2); stroke-width: 1.2; }
.ee-vent { stroke: var(--pb-muted); stroke-width: 1.6; fill: none; }
.ee-zone-label { fill: var(--pb-muted); font-size: 11px; font-family: var(--pb-sans); }
.ee-zone-val { fill: var(--pb-ink); font-size: 15px; font-family: var(--pb-mono); font-weight: 700; }
.ee-zone-mid { fill: var(--pb-ink2); font-size: 11.5px; font-family: var(--pb-mono); }
.ee-viv-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ee-viv-foot > div { border: 1px solid var(--pb-line2); border-radius: var(--pb-r-sm); background: var(--pb-card2); padding: 8px 9px; min-width: 0; }
.ee-viv-foot span { display: block; font-size: 11px; color: var(--pb-muted); }
.ee-viv-foot b { display: block; font-family: var(--pb-mono); font-size: 12.5px; color: var(--pb-ink); word-break: break-all; }
.ee-viv-note { font-size: 11.5px; line-height: 1.75; color: var(--pb-muted); margin: 12px 0 0; }

/* 六只仪表 */
.ee-gauges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ee-gauge { background: var(--pb-card); border: 1px solid var(--pb-line2); border-radius: var(--pb-r); box-shadow: var(--pb-shadow-sm); padding: 13px 10px 11px; text-align: center; }
.ee-gauge-name { font-size: 12px; color: var(--pb-muted); }
.ee-gauge svg { width: 100%; height: auto; display: block; margin: 6px 0 2px; }
.ee-gauge-bg { fill: none; stroke: var(--pb-line2); stroke-width: 9; stroke-linecap: round; }
.ee-gauge-fg { fill: none; stroke: var(--pb-ok); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 157; transition: stroke-dashoffset .5s ease, stroke .3s; }
.ee-gauge.lv-warn .ee-gauge-fg { stroke: var(--pb-warn); }
.ee-gauge.lv-danger .ee-gauge-fg { stroke: var(--pb-danger); }
.ee-gauge-val { fill: var(--pb-ink); font-family: var(--pb-mono); font-size: 21px; font-weight: 700; }
.ee-gauge-range { font-family: var(--pb-mono); font-size: 10.5px; color: var(--pb-muted); }
.ee-gauge-tag { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.ee-gauge.lv-ok .ee-gauge-tag { background: var(--pb-ok-soft); color: var(--pb-ok); }
.ee-gauge.lv-warn .ee-gauge-tag { background: var(--pb-warn-soft); color: var(--pb-warn); }
.ee-gauge.lv-danger .ee-gauge-tag { background: var(--pb-danger-soft); color: var(--pb-danger); }

.ee-split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 14px; }
.ee-prose { font-size: 14.5px; line-height: 2; color: var(--pb-ink2); }
.ee-prose b { color: var(--pb-ink); }
.ee-prose p { margin-bottom: 11px; }

@media (max-width: 1100px) {
    .ee-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ee-console, .ee-split { grid-template-columns: 1fr; }
    .ee-viv-svg { max-height: 280px; }
}
@media (max-width: 700px) {
    .ee-fields, .ee-custom-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ee-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ee-viv-foot { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .ee-fields, .ee-custom-fields { grid-template-columns: 1fr; } }