body{font-family:system-ui,sans-serif;max-width:800px;margin:0 auto;padding:2rem}.tank{background:#f5f5f5;border-radius:8px;padding:1rem;margin-bottom:1rem}.loading{text-align:center;padding:2rem}.error{color:#d32f2f;padding:1rem;background:#ffebee;border-radius:4px}.chart-controls{margin-bottom:1.5rem;display:flex;gap:.5em;justify-content:flex-start}select{padding:.5rem 1rem;border-radius:6px;border:1px solid #e0e0e0;background-color:#fff;font-size:.9rem;color:#333;box-shadow:0 1px 2px #0000000d;transition:all .2s ease;cursor:pointer}select:hover{border-color:#bdbdbd}select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 2px #1976d233}.chart-container{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 1px 3px #0000001a;width:100%;overflow:hidden;position:relative}.chart-wrapper{position:relative;min-height:400px;width:100%}.spacer{flex-grow:5}@media (max-width: 768px){.chart-container{padding:.5rem}.chart-controls{margin-bottom:1rem}.select{width:100%;max-width:200px}.chart-wrapper{height:100%}}