*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#f0f2f5}#root{width:100%;height:100%}.App{width:100%;height:100%;display:flex;flex-direction:column;padding:20px;background-color:#f0f2f5;overflow-y:auto}header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000001a;margin-bottom:20px;flex-shrink:0}header h1{color:#1a73e8;font-size:2rem}.connection-status{padding:8px 16px;border-radius:20px;font-weight:600}.connection-status.connected{background:#d4edda;color:#155724}.connection-status.disconnected{background:#f8d7da;color:#721c24}.emergency-control{display:flex;align-items:center}.emergency-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 16px;border-radius:20px;background:#fff;border:2px solid #ddd;transition:all .3s ease}.emergency-toggle:hover{border-color:#d32f2f}.emergency-toggle.active{background:#ffebee;border-color:#d32f2f}.emergency-toggle input[type=checkbox]{appearance:none;width:48px;height:24px;background:#ccc;border-radius:12px;position:relative;cursor:pointer;transition:background .3s ease}.emergency-toggle input[type=checkbox]:checked{background:#d32f2f}.emergency-toggle input[type=checkbox]:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .3s ease;box-shadow:0 2px 4px #0003}.emergency-toggle input[type=checkbox]:checked:before{left:26px}.emergency-toggle .toggle-label{font-weight:600;color:#333;-webkit-user-select:none;user-select:none}.emergency-toggle.active .toggle-label{color:#d32f2f}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:30px;flex-shrink:0}.status-card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px #0000001a;text-align:center}.status-card h3{color:#666;font-size:.9rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}.pump-status{font-size:1.2rem;font-weight:700;padding:10px;border-radius:5px}.pump-status.active{background:#d4edda;color:#155724}.pump-status.inactive{background:#f8d7da;color:#721c24}.value{font-size:1.8rem;font-weight:700;color:#1a73e8;margin-bottom:5px}.value.positive{color:#d32f2f}.value.negative{color:#0277bd}.timestamp{font-size:.75rem;color:#999;margin-top:8px;font-family:monospace}.charts-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:20px;flex:1;min-height:0}@media(min-width:1200px){.charts-container{grid-template-columns:repeat(2,1fr)}}.chart{background:#fff;padding:25px;border-radius:10px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;min-height:400px;height:450px}.chart h3{margin-bottom:15px;color:#333;flex-shrink:0}.chart>div{flex:1;min-height:0;position:relative}.no-data{display:flex;justify-content:center;align-items:center;min-height:300px;background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000001a;margin-top:20px}.no-data p{color:#666;font-size:1.2rem}@media(max-width:768px){.charts-container{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}