html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{display:flex;flex-direction:row;justify-content:center;align-items:flex-start}#app{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}canvas{width:100%;height:100%;display:block}#controlPanel{position:absolute;top:10px;right:60px;width:220px;background:#fff;border-radius:10px;box-shadow:0 4px 16px #00000026;font-family:system-ui,sans-serif;font-size:14px;z-index:1000;overflow:hidden}#panelBody{padding:4px 0 8px}.panel-section{padding:10px 14px 6px;border-bottom:1px solid #e8e8e8}.panel-section:last-child{border-bottom:none}.panel-section-title{font-weight:600;color:#222;margin-bottom:8px}.panel-section select{width:100%;padding:7px 28px 7px 10px;border:1.5px solid #3a7bd5;border-radius:6px;font-size:13px;color:#333;background:#fff;cursor:pointer;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.panel-section select:focus{border-color:#2563c7}.panel-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;color:#333}.panel-checkbox input[type=checkbox]{width:15px;height:15px;accent-color:#3a7bd5;cursor:pointer}#plotPanel{position:fixed;bottom:20px;left:20px;width:fit-content;z-index:10;background:#fff;opacity:.9;border:1px solid #bfbfbf;border-radius:10px 10px 0 0}#plotToggle{position:fixed;top:10px;right:10px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;border:none;border-radius:10px;box-shadow:0 4px 16px #00000026;cursor:pointer;color:#444;z-index:1000}#plotToggle:hover{background:#f0f0f0}#plotBar{width:100%;height:28px;cursor:move;background:#bfbfbf;border-radius:10px 10px 0 0;border-bottom:1px solid #bbb;box-shadow:0 1px 3px #666}#plotPanel.hidden-plot{display:none}#plotBody{margin:5px;width:600px;height:380px}#lineChartBody{margin:0 5px 5px;width:600px;height:280px;border-top:1px solid #e0e0e0}#loading-overlay{position:fixed;inset:0;background:#fffffff2;display:flex;align-items:center;justify-content:center;z-index:9999;font-family:system-ui,sans-serif}#loading-overlay.hidden{display:none}#loading-box{text-align:center;max-width:380px;padding:32px}#loading-spinner{width:36px;height:36px;border:3px solid #e0e0e0;border-top-color:#555;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}#loading-overlay.error #loading-spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}#loading-title{font-size:18px;font-weight:600;color:#222;margin:0 0 8px}#loading-overlay.error #loading-title{color:#c0392b}#loading-text{font-size:14px;color:#555;margin:0 0 6px}#loading-note{font-size:12px;color:#999;margin:0}