.App{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.container{width:100%;max-width:1200px}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh}.login-card{background:#fff;border-radius:16px;padding:40px;box-shadow:0 10px 40px #00000026;width:100%;max-width:450px}.login-card h1{margin:0 0 8px;font-size:28px;color:#333;text-align:center}.subtitle{margin:0 0 32px;font-size:16px;color:#666;text-align:center}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:#333}.form-group input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}.error-message{background:#fee;color:#c33;padding:12px;border-radius:8px;margin-bottom:16px;font-size:14px}.login-button{width:100%;padding:14px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.login-button:disabled{opacity:.6;cursor:not-allowed}.info-text{margin-top:20px;text-align:center}.info-text p{margin:0;font-size:13px;color:#999}.dashboard{padding:20px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;background:#fff;padding:20px 30px;border-radius:16px;box-shadow:0 4px 12px #0000001a}.dashboard-header h1{margin:0 0 8px;font-size:28px;color:#333}.header-actions{display:flex;align-items:center;gap:12px}.connection-status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600}.status-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.status-connected{background:#d4edda;color:#155724}.status-connected .status-dot{background:#28a745}.status-connecting{background:#fff3cd;color:#856404}.status-connecting .status-dot{background:#ffc107}.status-disconnected,.status-error{background:#f8d7da;color:#721c24}.status-disconnected .status-dot,.status-error .status-dot{background:#dc3545}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.logout-button{padding:10px 24px;background:#dc3545;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600}.logout-button:hover{background:#c82333}.reconnect-button{padding:10px 20px;background:#17a2b8;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600}.reconnect-button:hover{background:#138496}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px}.card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 12px #0000001a}.card h2{margin:0 0 20px;font-size:20px;color:#333}.card h3{margin:0 0 12px;font-size:16px;color:#555}.nightly-test-section{margin-bottom:24px;padding:16px;border:1px solid #e4e7eb;border-radius:12px;background:#f9fbff}.nightly-test-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.nightly-test-header h3{margin:0;font-size:18px;color:#2c3e50}.nightly-test-button{padding:8px 16px;border:none;border-radius:8px;font-weight:600;font-size:14px;color:#fff;cursor:pointer;transition:background .2s ease}.nightly-test-button.enabled{background:#dc3545}.nightly-test-button.enabled:hover{background:#c82333}.nightly-test-button.disabled{background:#28a745}.nightly-test-button.disabled:hover{background:#218838}.nightly-test-button:disabled{opacity:.7;cursor:not-allowed}.nightly-test-description{margin:0 0 16px;color:#4a5568;line-height:1.4}.nightly-test-meta{display:flex;flex-wrap:wrap;gap:16px}.nightly-test-meta-item{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:10px;background:#eef2ff;min-width:150px}.nightly-test-meta-item .label{font-size:12px;font-weight:600;color:#5a6c90;text-transform:uppercase}.nightly-test-meta-item .value{font-size:14px;font-weight:600;color:#2d3748}.pump-window-section{margin-bottom:24px;padding:16px;border:1px solid #e4e7eb;border-radius:12px;background:#f8f9ff}.pump-window-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.pump-window-toggle{padding:8px 16px;border:none;border-radius:8px;font-weight:600;font-size:14px;color:#fff;cursor:pointer;transition:background .2s ease}.pump-window-toggle.enabled{background:#2563eb}.pump-window-toggle.enabled:hover{background:#1d4ed8}.pump-window-toggle.disabled{background:#6b7280}.pump-window-toggle.disabled:hover{background:#4b5563}.pump-window-toggle:disabled{opacity:.7;cursor:not-allowed}.pump-window-description{margin:0 0 12px;color:#4a5568;line-height:1.4}.pump-window-inputs{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px}.pump-window-field{display:flex;flex-direction:column;gap:6px;min-width:140px}.pump-window-field label{font-weight:600;color:#333}.pump-window-field input{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}.pump-window-field input:disabled{background:#e9ecef;cursor:not-allowed}.pump-window-summary{margin:0;color:#2d3748;font-size:13px}.pump-window-notes{display:flex;flex-direction:column;gap:6px}.pump-window-overnight{margin:0;font-size:12px;color:#6b21a8;font-weight:600}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.refresh-button{padding:6px 12px;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600}.refresh-button:hover{background:#5568d3}.status-content{display:flex;flex-direction:column;gap:16px}.status-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f8f9fa;border-radius:8px}.status-item-info{display:flex;gap:8px;align-items:center}.status-item .label{font-weight:600;color:#666}.status-item .value{font-weight:700;color:#333}.status-item .control-button{flex-shrink:0;padding:10px 16px}.status-item .sensor{flex:0 0 auto;min-width:auto;padding:6px 12px}.value.state-PM{color:#28a745}.value.state-FP{color:#fd7e14}.value.state-ID{color:#6c757d}.value.state-ER{color:#dc3545}.sensors{display:flex;gap:8px;flex-wrap:wrap}.sensor{padding:8px 12px;border-radius:6px;font-size:13px;font-weight:600;flex:1;min-width:80px;text-align:center}.sensor.ok{background:#d4edda;color:#155724}.sensor.warning{background:#f8d7da;color:#721c24}.last-update{font-size:16px;color:#444;text-align:right}.loading{text-align:center;padding:40px;color:#999;font-style:italic}.event-content{display:flex;flex-direction:column;gap:16px}.event-type{font-size:20px;font-weight:700;padding:16px;border-radius:8px;text-align:center}.event-type.event-start{background:#d4edda;color:#155724}.event-type.event-stop{background:#f8d7da;color:#721c24}.event-type.event-online{background:#d1ecf1;color:#0c5460}.event-type.event-log{background:#e2e3ff;color:#383d7c}.event-details{display:flex;flex-direction:column;gap:12px}.event-item{display:flex;justify-content:space-between;padding:8px 12px;background:#f8f9fa;border-radius:6px}.status-ok{color:#155724}.status-warning{color:#721c24}.controls{display:flex;flex-direction:column;gap:24px}.control-group{display:flex;flex-direction:column;gap:12px}.button-group{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control-button{padding:14px;border:none;border-radius:8px;font-size:14px;font-weight:600;color:#fff}.control-button.valve-open{background:#28a745}.control-button.valve-open:hover:not(:disabled){background:#218838}.control-button.valve-close{background:#6c757d}.control-button.valve-close:hover:not(:disabled){background:#5a6268}.control-button.pump-start{background:#007bff}.control-button.pump-start:hover:not(:disabled){background:#0056b3}.control-button.pump-force{background:#fd7e14}.control-button.pump-force:hover:not(:disabled){background:#e36f0f}.control-button.pump-stop{background:#dc3545}.control-button.pump-stop:hover:not(:disabled){background:#c82333}.warning-text{padding:12px;background:#fff3cd;color:#856404;border-radius:8px;font-size:13px;text-align:center;font-weight:600}.value.force-on{color:#dc3545}.value.force-off{color:#6c757d}.history-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto}.history-item{display:flex;align-items:center;gap:12px;padding:12px;background:#f8f9fa;border-radius:8px}.config-card form{display:flex;flex-direction:column;gap:16px}.config-header-actions{display:flex;gap:8px}.config-list{display:flex;flex-direction:column;gap:16px}.config-field{display:flex;flex-direction:column;gap:6px;padding:12px;background:#f8f9fa;border-radius:8px}.config-field label{font-weight:600;color:#333}.config-field input{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}.config-field input:disabled{background:#e9ecef;cursor:not-allowed}.config-description{font-size:13px;color:#555;margin:0}.config-helper{font-size:12px;color:#4a5568;margin:0}.config-actions{display:flex;gap:12px;justify-content:flex-end}.config-submit,.config-reset{padding:10px 16px;border:none;border-radius:6px;font-weight:600}.config-submit{background:#2563eb;color:#fff}.config-submit:disabled{background:#93c5fd;cursor:not-allowed}.config-submit:hover:not(:disabled){background:#1d4ed8}.config-reset{background:#e2e8f0;color:#1f2937}.config-reset:hover:not(:disabled){background:#cbd5f5}.config-status{padding:10px 12px;border-radius:6px;font-size:13px;font-weight:600}.config-status-success{background:#d1fae5;color:#065f46}.config-status-error{background:#fee2e2;color:#991b1b}.config-status-saving{background:#e0e7ff;color:#3730a3}.history-event{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:18px;font-weight:700}.history-event.event-start{background:#d4edda;color:#155724}.history-event.event-stop{background:#f8d7da;color:#721c24}.history-event.event-online{background:#d1ecf1;color:#0c5460}.history-details{flex:1;display:flex;flex-direction:column;gap:4px}.history-type{font-weight:700;font-size:14px;color:#333}.history-time{font-size:12px;color:#666}.history-info{font-size:12px;color:#999}.update-notification{margin:0 0 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:16px 20px;box-shadow:0 4px 12px #667eea4d;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.notification-content{display:flex;align-items:center;gap:16px;color:#fff}.notification-icon{font-size:28px;animation:ring 2s infinite}@keyframes ring{0%,to{transform:rotate(0)}10%,30%{transform:rotate(-10deg)}20%,40%{transform:rotate(10deg)}}.notification-text{flex:1;display:flex;flex-direction:column;gap:4px}.notification-text strong{font-size:16px;font-weight:600}.notification-text span{font-size:14px;opacity:.9}.notification-actions{display:flex;gap:10px}.update-button,.dismiss-button{padding:8px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.update-button{background:#fff;color:#667eea}.update-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.dismiss-button{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3)}.dismiss-button:hover{background:#ffffff4d}.update-progress-banner{margin:0 0 20px;background:#fff3cd;border:1px solid #ffc107;border-radius:12px;padding:16px 20px}.progress-content{display:flex;flex-direction:column;gap:12px;color:#856404;font-weight:600}.progress-bar{position:relative;height:24px;background:#ffc10733;border-radius:12px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#ffc107,#ff9800);transition:width .3s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#856404}.system-info-card{grid-column:span 2}.system-info-card .card-actions{display:flex;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0}.action-button{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.reboot-button{background:#ff9800;color:#fff}.reboot-button:hover:not(:disabled){background:#f57c00;transform:translateY(-2px);box-shadow:0 4px 8px #ff98004d}.update-button-card{background:#667eea;color:#fff}.update-button-card:hover:not(:disabled){background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d}.action-button:disabled{opacity:.5;cursor:not-allowed}.status-updating{color:#ff9800;font-weight:600}.status-ready{color:#4caf50;font-weight:600}.status-failed,.status-error{color:#f44336;font-weight:600}.status-rebooting{color:#2196f3;font-weight:600}@media (max-width: 768px){.dashboard-grid,.button-group{grid-template-columns:1fr}.system-info-card{grid-column:span 1}.notification-content{flex-direction:column;align-items:flex-start}.notification-actions{width:100%}.update-button,.dismiss-button{flex:1}.system-info-card .card-actions{flex-direction:column}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}*{box-sizing:border-box}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{cursor:pointer;transition:all .3s ease}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #0003}button:disabled{cursor:not-allowed;opacity:.6}