.monitor-container{max-width:100%;margin:0 auto;padding:4px;font-family:sans-serif}.state-msg{text-align:center;color:#666;padding:20px;font-size:1.1em}.error-box{text-align:center;background:#fff5f5;border:1px solid #fed7d7;border-radius:8px;max-width:100%;margin:10px auto;padding:15px}.error-icon{color:#fff;background:#e53e3e;border-radius:50%;justify-content:center;align-items:center;width:35px;height:35px;margin-bottom:8px;font-size:1.5em;font-weight:700;display:inline-flex}.error-box p{color:#c53030;margin:0;font-size:.95em;font-weight:700}.monitor-layout{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:10px;display:grid}.data-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px;box-shadow:0 2px 4px #00000008}.border-green{border-top:4px solid #41936b}.border-yellow{border-top:4px solid #ecce3d}.border-blue{border-top:4px solid #4688b8}.full-width{grid-column:span 1}@media (width>=680px){.full-width{grid-column:span 2}}.data-card h2{color:#718096;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #edf2f7;margin-top:0;margin-bottom:8px;padding-bottom:4px;font-size:.95em}.data-field{border-bottom:1px dashed #edf2f7;justify-content:space-between;padding:5px 0;font-size:.9em;display:flex}.data-field.font-large{border-bottom:1px solid #edf2f7;font-size:1.05em;font-weight:700}.label{color:#718096}.value{color:#2d3748;font-weight:600}.price{color:#41936b}.text-center{text-align:center}.program-control{margin-top:12px;padding-top:8px}.control-label{color:#718096;text-transform:uppercase;margin-bottom:6px;font-size:.8em;font-weight:700;display:block}.btn-group{gap:4px;width:100%;display:flex}.program-btn{color:#4a5568;cursor:pointer;text-align:center;white-space:nowrap;background:#f7fafc;border:1px solid #cbd5e0;border-radius:4px;outline:none;flex:1;padding:6px 4px;font-size:.8em;font-weight:600;transition:all .2s}.program-btn:hover:not(:disabled){background:#edf2f7;border-color:#a0aec0}.program-btn.active{color:#fff;background:#41936b;border-color:#41936b;box-shadow:0 2px 4px #41936b33}.program-btn.active:hover,.program-btn.active:focus{color:#fff;background:repeating-linear-gradient(45deg,#41936b,#41936b 6px,#367e5a 6px 12px)}.program-btn:disabled{opacity:.6;cursor:not-allowed}.status-mini-text{color:#a0aec0;text-align:right;margin-top:2px;font-size:.7em;font-style:italic}.gauge-container{width:100%;max-width:185px;margin:0 auto}.gauge-bg{fill:none;stroke:#edf2f7;stroke-width:16px;stroke-linecap:round}.gauge-fill{fill:none;stroke:#ecce3d;stroke-width:16px;stroke-linecap:round;transition:stroke-dasharray .5s}.gauge-text{fill:#2d3748;text-anchor:middle;font-size:2.3em;font-weight:700}.gauge-unit{fill:#718096;text-anchor:middle;font-size:.95em;font-weight:700}.gauge-scale{color:#a0aec0;justify-content:space-between;max-width:200px;margin:-5px auto 0;font-size:.75em;font-weight:700;display:flex}.energy-header{justify-content:space-between;align-items:baseline;margin-bottom:3px;display:flex}.energy-display-value{color:#4688b8;font-size:1.5em}.energy-display-value small{color:#4a5568;font-size:.6em;font-weight:700}.energy-scale-label{color:#718096;font-size:.75em;font-weight:700}.progress-bar-container{background:#edf2f7;border:1px solid #e2e8f0;border-radius:6px;height:12px;overflow:hidden}.progress-bar-fill{background:#4688b8;height:100%;transition:width .5s ease-in-out}