.reports-panel{width:100%;display:flex;flex-direction:column;gap:16px;background:var(--surface);padding:20px;border-radius:16px;border:1px solid var(--border);box-shadow:0 18px 32px var(--shadow)}.reports-toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}.refresh-button{background:#39f;color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s ease}.reports-error{display:flex;flex-direction:column;gap:4px;background:#ff44441a;border:1px solid rgba(255,68,68,.3);border-radius:10px;padding:12px 16px;font-size:.9rem}.reports-loading,.reports-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0;color:var(--text-muted);font-size:.9rem}.reports-table-wrapper{overflow-x:auto}.reports-table{width:100%;border-collapse:collapse;font-size:.85rem}.reports-table th,.reports-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--overlay-sm);white-space:nowrap}.reports-table thead th{text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-size:.7rem;border-bottom:1px solid var(--border-strong)}.reports-table tbody tr:hover{background:var(--overlay-xs)}.reports-meta{font-size:.75rem;color:var(--text-muted);text-align:right}.charts-panel{width:100%;display:flex;flex-direction:column;gap:16px;background:var(--surface);padding:20px;border-radius:16px;border:1px solid var(--border);box-shadow:0 18px 32px var(--shadow)}.charts-toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}.control-group{display:flex;flex-direction:column;gap:6px;min-width:160px}.control-group label{font-size:.75rem;color:var(--text-muted);letter-spacing:.4px;text-transform:uppercase}.control-group select{background:var(--overlay-xs);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.95rem}.refresh-button{background:#39f;color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s ease;white-space:nowrap}.refresh-button:disabled{opacity:.6;cursor:not-allowed}.refresh-button:not(:disabled):hover{background:#2b83dc}.charts-error{display:flex;flex-direction:column;gap:4px;background:#ff44441a;border:1px solid rgba(255,68,68,.3);border-radius:10px;padding:12px 16px;font-size:.9rem}.charts-loading,.charts-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0;color:var(--text-muted);font-size:.9rem}.chart-wrapper{position:relative;overflow:visible}.chart-canvas{width:100%;height:auto}.chart-grid line{stroke:var(--overlay-sm);stroke-width:1}.chart-axis{stroke:var(--overlay-lg);stroke-width:1.5}.chart-line{fill:none;stroke:#4c4;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.range-band{fill:#4488ff2e;stroke:none}.chart-point{fill:var(--surface);stroke:#4c4;stroke-width:1.5}.chart-ticks{display:flex;justify-content:space-between;color:var(--text-muted);font-size:.75rem;margin-top:8px}.chart-ticks-y{flex-direction:column;position:absolute;top:24px;bottom:56px;left:0;width:64px;justify-content:space-between;align-items:flex-start;padding-left:4px;pointer-events:none}.chart-ticks-x{margin-top:12px}.chart-summary{display:flex;flex-wrap:wrap;gap:20px;background:var(--overlay-xs);border:1px solid var(--border);border-radius:12px;padding:16px}.chart-summary>div{display:flex;flex-direction:column;gap:4px}.summary-label{font-size:.75rem;color:var(--text-muted);letter-spacing:.4px;text-transform:uppercase}.summary-value{font-size:1.05rem;font-weight:600}.summary-meta{font-size:.75rem;color:var(--text-muted)}.charts-meta{font-size:.75rem;color:var(--text-muted);text-align:right}.tank-config-panel{width:100%;display:flex;flex-direction:column;gap:16px;background:var(--surface);padding:20px;border-radius:16px;border:1px solid var(--border);box-shadow:0 18px 32px var(--shadow)}.tank-config-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}.tank-config-toolbar h2{font-size:1.1rem;margin-bottom:4px}.tank-config-toolbar p{font-size:.85rem;color:var(--text-muted)}.tank-config-error{display:flex;flex-direction:column;gap:4px;background:#ff44441a;border:1px solid rgba(255,68,68,.3);border-radius:10px;padding:12px 16px;font-size:.9rem}.tank-config-loading,.tank-config-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 0;color:var(--text-muted);font-size:.9rem}.tank-config-table-wrapper{overflow-x:auto}.tank-config-table{width:100%;border-collapse:collapse;font-size:.85rem}.tank-config-table th,.tank-config-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--overlay-sm);white-space:nowrap}.tank-config-table thead th{text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-size:.7rem;border-bottom:1px solid var(--border-strong)}.tank-config-table tbody tr:hover{background:var(--overlay-xs)}.tank-error{color:#f66;font-size:.75rem}.pump-control-tab{display:flex;justify-content:center;align-items:flex-start;padding:2rem;min-height:400px}.pump-control-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:2rem;max-width:600px;width:100%;box-shadow:0 2px 8px #00000014}.pump-control-header{text-align:center;margin-bottom:2rem}.pump-control-header h2{margin:0 0 .5rem;font-size:1.75rem;color:var(--text)}.pump-control-description{margin:0;color:var(--text-secondary);font-size:.95rem}.pump-control-body{display:flex;flex-direction:column;gap:1.5rem}.pump-controls{display:flex;gap:1rem;justify-content:center}.pump-button{padding:1rem 2rem;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;flex:1;max-width:200px}.pump-button:disabled{opacity:.5;cursor:not-allowed}.pump-button-start{background:#10b981;color:#fff}.pump-button-start:hover:not(:disabled){background:#059669;transform:translateY(-2px);box-shadow:0 4px 12px #10b9814d}.pump-button-stop{background:#ef4444;color:#fff}.pump-button-stop:hover:not(:disabled){background:#dc2626;transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d}.pump-status{padding:1rem;border-radius:8px;text-align:center;font-weight:500}.pump-status.is-success{background:var(--status-success-bg);color:var(--status-success-text);border:1px solid var(--status-success-border)}.pump-status.is-error{background:var(--status-error-bg);color:var(--status-error-text);border:1px solid var(--status-error-border)}.tank-container{display:flex;justify-content:center;align-items:center}.tank-svg{width:100%;max-width:280px;height:auto}.water-body{transition:y 1s ease-in-out,height 1s ease-in-out,fill .5s ease}.water-wave{animation:waveScroll 2s linear infinite;transition:y 1s ease-in-out}@keyframes waveScroll{0%{transform:translate(0)}to{transform:translate(-80px)}}.level-line{animation:pulse 2s ease-in-out infinite;transition:y1 1s ease-in-out,y2 1s ease-in-out}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.metric-card{background:var(--overlay-xs);border:1px solid var(--overlay-sm);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;text-align:center;transition:background .3s ease}.metric-card:hover{background:var(--overlay-sm)}.metric-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.metric-value{font-size:1.6rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}.metric-value small{font-size:.75rem;font-weight:400;color:var(--text-muted)}.metric-value.time{font-size:1.1rem;font-weight:500}@media(max-width:400px){.metrics-grid{grid-template-columns:1fr}}.status-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:24px;font-size:.85rem;font-weight:700;letter-spacing:2px;border:1.5px solid;transition:all .5s ease}.status-dot{width:10px;height:10px;border-radius:50%;animation:dotPulse 2s ease-in-out infinite}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.monitor-card{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--overlay-sm);border-radius:16px;padding:20px;box-shadow:0 12px 28px var(--shadow);transition:border-color .2s ease,transform .2s ease;min-width:280px}.monitor-card.is-selected{border-color:#39f;transform:translateY(-2px)}.monitor-card:hover{border-color:#39f9}.monitor-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.monitor-card-header h3{font-size:1.1rem;margin-bottom:4px}.monitor-card-sub{font-size:.75rem;color:var(--text-muted)}.monitor-card-action{background:#3399ff1f;border:1px solid rgba(51,153,255,.4);border-radius:8px;color:#39f;font-size:.85rem;font-weight:600;padding:6px 12px;cursor:pointer;transition:background .2s ease,color .2s ease}.monitor-card-action:hover{background:#39f3;color:#66b3ff}.monitor-card-action:disabled{opacity:.6;cursor:not-allowed}.monitor-card-loading,.monitor-card-error{display:flex;flex-direction:column;gap:8px;padding:40px 0;align-items:center;color:var(--text-muted);font-size:.9rem}.monitor-card-error{color:#f66}.monitor-card-body{display:flex;flex-direction:column;gap:16px}.monitor-card-tank{display:flex;justify-content:center}.monitor-card-warning{font-size:.8rem;color:#ff8c00;background:#ff8c001f;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,140,0,.2)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px 36px;width:100%;max-width:360px}.login-card h1{font-size:1.3rem;font-weight:600;letter-spacing:.5px;text-align:center;margin-bottom:28px;color:var(--text)}.login-form{display:flex;flex-direction:column;gap:16px}.login-field{display:flex;flex-direction:column;gap:6px}.login-field label{font-size:.7rem;color:var(--text-muted);letter-spacing:.3px;text-transform:uppercase}.login-field input{background:var(--overlay-xs);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.9rem;outline:none;transition:border-color .2s ease}.login-field input:focus{border-color:#3399ff80}.login-error{font-size:.85rem;color:#f66;background:#ff444414;border:1px solid rgba(255,68,68,.2);border-radius:8px;padding:8px 12px;text-align:center}.login-btn{background:#39f;color:#fff;border:none;border-radius:8px;padding:10px 12px;font-size:.95rem;font-weight:600;cursor:pointer;margin-top:4px;transition:background .2s ease}.login-btn:hover:not(:disabled){background:#28e}.login-btn:disabled{opacity:.65;cursor:not-allowed}*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0d1117;--surface: #161b22;--text: #e6edf3;--text-muted: #7d8590;--border: rgba(255, 255, 255, .06);--border-strong: rgba(255, 255, 255, .16);--overlay-xs: rgba(255, 255, 255, .04);--overlay-sm: rgba(255, 255, 255, .08);--overlay-md: rgba(255, 255, 255, .1);--overlay-lg: rgba(255, 255, 255, .2);--shadow: rgba(0, 0, 0, .35);--status-success-bg: rgba(16, 185, 129, .15);--status-success-text: #34d399;--status-success-border: rgba(16, 185, 129, .3);--status-error-bg: rgba(239, 68, 68, .15);--status-error-text: #f87171;--status-error-border: rgba(239, 68, 68, .3);color-scheme:dark}[data-theme=light]{--bg: #f0f4f8;--surface: #ffffff;--text: #1a1f2e;--text-muted: #6b7280;--border: rgba(0, 0, 0, .08);--border-strong: rgba(0, 0, 0, .15);--overlay-xs: rgba(0, 0, 0, .03);--overlay-sm: rgba(0, 0, 0, .05);--overlay-md: rgba(0, 0, 0, .08);--overlay-lg: rgba(0, 0, 0, .12);--shadow: rgba(0, 0, 0, .12);--status-success-bg: #d1fae5;--status-success-text: #065f46;--status-success-border: #6ee7b7;--status-error-bg: #fee2e2;--status-error-text: #991b1b;--status-error-border: #fca5a5;color-scheme:light}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center}.app-header{width:100%;padding:20px;display:flex;justify-content:space-between;align-items:center;background:var(--surface);border-bottom:1px solid var(--border)}.logout-btn{background:transparent;color:var(--text-muted);border:1px solid var(--overlay-md);border-radius:8px;padding:6px 14px;font-size:.85rem;font-weight:600;cursor:pointer;transition:color .2s ease,border-color .2s ease}.logout-btn:hover{color:var(--text);border-color:var(--overlay-lg)}.theme-btn{background:transparent;color:var(--text-muted);border:1px solid var(--overlay-md);border-radius:8px;padding:6px 14px;font-size:.85rem;font-weight:600;cursor:pointer;transition:color .2s ease,border-color .2s ease}.theme-btn:hover{color:var(--text);border-color:var(--overlay-lg)}.app-header h1{font-size:1.3rem;font-weight:600;letter-spacing:.5px}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;gap:24px;padding:30px 20px;width:100%;max-width:960px;transition:max-width .2s ease}.app-main.monitor-mode,.app-main.charts-mode{max-width:1024px}.app-main.config-mode{max-width:960px}.monitor-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.tab-bar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--overlay-xs);padding:8px;border-radius:12px;border:1px solid var(--border)}.tab-buttons{display:flex;flex:1;gap:12px}.tab-button{flex:1;background:transparent;color:var(--text-muted);border:none;padding:10px 12px;font-size:.95rem;font-weight:600;border-radius:8px;cursor:pointer;transition:background .2s ease,color .2s ease}.tab-button.is-active{background:#39f;color:#fff}.tab-button:not(.is-active):hover{color:#e6edf3}.tank-selector{display:flex;flex-direction:column;gap:6px;min-width:120px}.tank-selector label{font-size:.7rem;color:var(--text-muted);letter-spacing:.3px;text-transform:uppercase}.tank-selector select{background:var(--overlay-xs);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.9rem}.tank-selector select:disabled{opacity:.6;cursor:not-allowed}.tank-section{width:100%;display:flex;justify-content:center}.loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 0;color:var(--text-muted)}.spinner{width:36px;height:36px;border:3px solid var(--overlay-md);border-top-color:#39f;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-card{text-align:center;padding:30px;background:#ff444414;border:1px solid rgba(255,68,68,.2);border-radius:12px;width:100%}.error-card p{margin-bottom:8px}.error-detail{font-size:.85rem;color:#f66;font-family:monospace}.error-hint{font-size:.8rem;color:var(--text-muted)}.error-hint code{background:var(--overlay-sm);padding:2px 6px;border-radius:4px;font-size:.8rem}.connection-warning{font-size:.8rem;color:#ff8c00;background:#ff8c001a;padding:8px 16px;border-radius:8px;border:1px solid rgba(255,140,0,.2)}.app-footer{width:100%;padding:16px;text-align:center;font-size:.7rem;color:var(--text-muted);border-top:1px solid var(--overlay-xs)}