.thermostat-container{max-width:1200px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.thermostat-selector{margin:20px 0;padding:20px;background:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}.thermostat-selector label{display:block;margin-bottom:8px;font-weight:600;color:#495057}.thermostat-selector select{width:100%;max-width:300px;padding:10px 15px;border:2px solid #dee2e6;border-radius:6px;font-size:16px;background-color:#fff;transition:border-color .15s ease-in-out}.thermostat-selector select:focus{outline:none;border-color:#0073aa;box-shadow:0 0 0 3px rgba(0,115,170,.1)}.thermo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:15px 20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.thermo-header h3{margin:0;font-size:24px;font-weight:600}.thermo-status{display:flex;align-items:center;gap:8px;font-size:14px}.status-indicator{width:12px;height:12px;border-radius:50%;display:inline-block;animation:pulse 2s infinite}.thermo-status.online .status-indicator{background-color:#28a745;box-shadow:0 0 10px rgba(40,167,69,.5)}.thermo-status.offline .status-indicator{background-color:#dc3545;box-shadow:0 0 10px rgba(220,53,69,.5);animation:none}.last-seen{font-size:12px;opacity:.8;margin-left:10px}@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}.thermo-zones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:20px}.thermo-zone-card{border:1px solid #e9ecef;padding:20px;border-radius:12px;background:linear-gradient(145deg,#fff 0%,#f8f9fa 100%);box-shadow:0 4px 6px rgba(0,0,0,.05);transition:all .3s ease;position:relative;overflow:hidden}.thermo-zone-card:hover{transform:translateY(-2px);box-shadow:0 8px 15px rgba(0,0,0,.1)}.zone-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:2px solid #e9ecef;padding-bottom:10px}.zone-header h4{margin:0;font-size:18px;font-weight:600;color:#495057}.sync-status{font-size:12px;font-weight:500}.syncing{color:#fd7e14;animation:pulse 1.5s infinite}.synced{color:#28a745}.thermo-zone-info p{margin:8px 0;color:#6c757d;font-size:14px}.thermo-progress{margin:15px 0}.thermo-progress p{margin-bottom:8px;font-weight:500;color:#495057}.temp-now{font-size:18px;font-weight:700;color:#0073aa}.progress-bar{width:100%;height:8px;background-color:#e9ecef;border-radius:4px;overflow:hidden;position:relative}.progress-bar .progress{height:100%;background:linear-gradient(90deg,#0073aa 0%,#005177 100%);border-radius:4px;transition:width 1s ease-in-out;position:relative}.progress-bar .progress::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}.target-temp-control{margin:15px 0}.target-temp-control label{display:block;margin-bottom:8px;font-weight:500;color:#495057;font-size:14px}.temp-input-wrapper{position:relative;display:flex;align-items:center;gap:8px}.target-temp-input{width:100px;padding:10px 12px;border:2px solid #dee2e6;border-radius:6px;font-size:16px;font-weight:600;text-align:center;transition:all .15s ease-in-out}.target-temp-input:focus{outline:none;border-color:#0073aa;box-shadow:0 0 0 3px rgba(0,115,170,.1)}.target-temp-input.pending-change{border-color:#fd7e14;background-color:#fff3cd}.target-temp-input.command-sent{border-color:#28a745;background-color:#d4edda}.target-temp-input.error{border-color:#dc3545;background-color:#f8d7da}.temp-unit{font-weight:500;color:#6c757d}.temp-saved-indicator{color:#28a745;font-size:18px;font-weight:bold}.zone-controls{display:flex;gap:10px;margin-top:20px}.power-toggle,.show-history-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none}.power-toggle{background:linear-gradient(135deg,#28a745 0%,#20c997 100%);color:#fff}.power-toggle:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(40,167,69,.3)}.power-toggle.pending-command{background:linear-gradient(135deg,#fd7e14 0%,#ffc107 100%);animation:pulse 1s infinite}.power-toggle.command-sent{background:linear-gradient(135deg,#6f42c1 0%,#e83e8c 100%)}.power-toggle.error{background:linear-gradient(135deg,#dc3545 0%,#fd1d53 100%)}.show-history-btn{background:linear-gradient(135deg,#0073aa 0%,#005177 100%);color:#fff}.show-history-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,115,170,.3)}.button-icon{font-size:16px}.button-text{font-size:13px}.value-updated{transition:all .5s ease;background-color:rgba(255,235,59,.6)!important;border-radius:4px;padding:2px 4px}#thermo-chart-overlay{backdrop-filter:blur(5px);animation:fadeIn .3s ease}@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}#thermo-chart{width:100%!important;height:100%!important}.loader{padding:40px;font-size:20px;color:#fff;display:flex;align-items:center;justify-content:center;height:100%}@media (max-width:768px){.thermo-zones-grid{grid-template-columns:1fr}.thermo-header{flex-direction:column;gap:10px;text-align:center}.zone-controls{flex-direction:column}.power-toggle,.show-history-btn{width:100%}}