.reports-panel{width:100%;display:flex;flex-direction:column;gap:16px;background:var(--surface);padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 32px #00000059}.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 rgba(255,255,255,.08);white-space:nowrap}.reports-table thead th{text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-size:.7rem;border-bottom:1px solid rgba(255,255,255,.16)}.reports-table tbody tr:hover{background:#ffffff0a}.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 rgba(255,255,255,.06);box-shadow:0 18px 32px #00000059}.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:#ffffff0a;color:var(--text);border:1px solid rgba(255,255,255,.06);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:#ffffff14;stroke-width:1}.chart-axis{stroke:#fff3;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:#fff;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:#ffffff0a;border:1px solid rgba(255,255,255,.06);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 rgba(255,255,255,.06);box-shadow:0 18px 32px #00000059}.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 rgba(255,255,255,.08);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 rgba(255,255,255,.16)}.tank-config-table tbody tr:hover{background:#ffffff0a}.tank-error{color:#f66;font-size:.75rem}.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:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;text-align:center;transition:background .3s ease}.metric-card:hover{background:#ffffff14}.metric-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#888}.metric-value{font-size:1.6rem;font-weight:700;color:#eee;font-variant-numeric:tabular-nums}.metric-value small{font-size:.75rem;font-weight:400;color:#888}.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 rgba(255,255,255,.08);border-radius:16px;padding:20px;box-shadow:0 12px 28px #00000059;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)}*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0d1117;--surface: #161b22;--text: #e6edf3;--text-muted: #7d8590}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;text-align:center;background:var(--surface);border-bottom:1px solid rgba(255,255,255,.06)}.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:#ffffff0a;padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,.06)}.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:#ffffff0a;color:var(--text);border:1px solid rgba(255,255,255,.06);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 rgba(255,255,255,.1);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:#ffffff14;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 rgba(255,255,255,.04)}