@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-primary:#020817;--bg-secondary:#0f172a;--bg-surface:#1e293b;--bg-surface-hover:#334155;--accent:#e7bd52;--accent-dim:#e7bd5299;--accent-subtle:#e7bd5226;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--border:#1e293b;--border-strong:#e7bd524d;--danger:#ef4444;--success:#22c55e;--info:#3b82f6;--radius:8px;--radius-sm:4px;--transition:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 24px;display:flex}.header h1{color:var(--accent);letter-spacing:-.3px;margin-bottom:2px;font-size:18px;font-weight:600}.header-desc{color:var(--text-secondary);max-width:680px;font-size:11px;line-height:1.6}.header-right{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:6px;display:flex;position:relative}.powered-label{color:var(--text-secondary);font-size:11px}.distill-name{color:var(--accent);letter-spacing:.5px;font-weight:600}.header-buttons{align-items:center;gap:6px;display:flex}.btn-icon{border:1px solid var(--border);background:var(--bg-surface);width:28px;height:28px;color:var(--accent);cursor:pointer;transition:all var(--transition);border-radius:50%;justify-content:center;align-items:center;font-size:14px;text-decoration:none;display:flex}.btn-icon:hover{background:var(--accent-subtle);border-color:var(--accent)}.btn-icon-img{border-radius:50%;width:18px;height:18px}.nav-menu{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius);z-index:50;min-width:180px;margin-top:6px;padding:4px 0;position:absolute;top:100%;right:0;box-shadow:0 8px 24px #0006}.nav-menu.hidden{display:none}.nav-menu-item{color:var(--text-secondary);transition:all var(--transition);padding:8px 14px;font-size:12px;font-weight:500;text-decoration:none;display:block}.nav-menu-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.nav-menu-item.active{color:var(--accent);font-weight:600}html,body{height:100%;overflow:hidden}#app{grid-template-rows:auto 1fr;grid-template-columns:320px 1fr;gap:0;height:100vh;display:grid}.header{grid-column:1/-1}.sidebar-toggle{z-index:20;border:1px solid var(--border);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--bg-surface);width:20px;height:40px;color:var(--text-muted);cursor:pointer;transition:all var(--transition);justify-content:center;align-items:center;padding:0;font-size:10px;display:flex;position:absolute;top:50%;left:320px;transform:translate(-50%,-50%)}.sidebar-toggle:hover{background:var(--bg-surface-hover);border-color:var(--accent-dim);color:var(--accent)}.sidebar-hidden .left-panel{display:none}.sidebar-hidden{grid-template-columns:1fr!important}.sidebar-hidden .sidebar-toggle{border-radius:0 var(--radius-sm) var(--radius-sm) 0;left:0;transform:translateY(-50%)}.sidebar-hidden .right-panel{grid-column:1;padding-left:10px}.left-panel{background:var(--bg-secondary);border-right:1px solid var(--border);flex-direction:column;grid-area:2/1;display:flex;overflow-y:auto}.panel-section{border-bottom:1px solid var(--border);padding:12px 16px}.panel-section h2{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:8px;font-size:10px;font-weight:600}.unit-search{background:var(--bg-surface);border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:var(--radius-sm);outline:none;padding:6px 10px;font-family:inherit;font-size:12px}.unit-search:focus{border-color:var(--accent-dim)}.unit-search::placeholder{color:var(--text-muted)}.unit-search-results{max-height:150px;margin-top:4px;overflow-y:auto}.unit-search-results:empty{display:none}.unit-search-item{color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);align-items:center;gap:6px;padding:4px 8px;font-size:11px;display:flex}.unit-search-item:hover{background:var(--bg-surface-hover)}.unit-search-item .fuel-dot{width:6px;height:6px}.unit-search-item .unit-price{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:10px}.panel-hint{color:var(--text-muted);margin-bottom:6px;font-size:9px;line-height:1.4}.select-input{background:var(--bg-surface);border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;outline:none;padding:6px 10px;font-family:inherit;font-size:13px}.select-input:focus{border-color:var(--accent-dim)}.demand-control{align-items:center;gap:8px;display:flex}.demand-control input[type=range]{appearance:none;background:var(--bg-surface);border-radius:2px;outline:none;flex:1;height:4px}.demand-control input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;border:2px solid var(--bg-primary);background:#ff6b6b;border-radius:50%;width:14px;height:14px}.demand-control input[type=range]::-moz-range-thumb{cursor:pointer;border:2px solid var(--bg-primary);background:#ff6b6b;border-radius:50%;width:14px;height:14px}.demand-hint{color:var(--text-muted);margin-top:4px;font-size:10px;font-style:italic}.demand-input{background:var(--bg-surface);border:1px solid var(--border);width:70px;color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums;border-radius:3px;outline:none;padding:3px 6px;font-family:inherit;font-size:12px;font-weight:600}.demand-input:focus{border-color:var(--accent-dim)}.demand-price{color:#ff6b6b;font-variant-numeric:tabular-nums;margin-top:6px;font-size:12px;font-weight:600}.btn-advanced{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);width:100%;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);text-align:left;padding:6px 12px;font-family:inherit;font-size:11px;font-weight:500}.btn-advanced:hover{background:var(--bg-surface-hover);border-color:var(--border-strong);color:var(--text-primary)}.advanced-hidden{display:none}.btn-reset{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);width:100%;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);padding:6px 12px;font-family:inherit;font-size:11px;font-weight:500}.btn-reset:hover{background:var(--bg-surface-hover);border-color:var(--border-strong);color:var(--accent)}.fuel-toggles{flex-wrap:wrap;gap:4px;display:flex}.fuel-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:all var(--transition);white-space:nowrap;align-items:center;gap:5px;padding:3px 8px;font-family:inherit;font-size:10px;font-weight:500;display:inline-flex}.fuel-toggle:hover{background:var(--bg-surface-hover);border-color:var(--border-strong)}.fuel-toggle.active{border-color:var(--border-strong)}.fuel-toggle.inactive{opacity:.35}.fuel-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.toggle-label{cursor:pointer;color:var(--text-primary);align-items:center;gap:6px;font-size:12px;display:inline-flex}.toggle-label input[type=checkbox]{appearance:none;background:var(--bg-surface);border:1px solid var(--border);cursor:pointer;border-radius:3px;flex-shrink:0;width:14px;height:14px;position:relative}.toggle-label input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}.toggle-label input[type=checkbox]:checked:after{content:"";border:solid var(--bg-primary);border-width:0 2px 2px 0;width:5px;height:9px;position:absolute;top:0;left:3px;transform:rotate(45deg)}.toggle-text{white-space:nowrap;font-size:11px;font-weight:500}.cap-group{align-items:center;gap:8px;margin-bottom:6px;display:flex}.cap-group:last-child{margin-bottom:0}.cap-group label{color:var(--text-secondary);white-space:nowrap;min-width:52px;font-size:11px;font-weight:500}.cap-group input[type=range]{appearance:none;background:var(--bg-surface);border-radius:2px;outline:none;flex:1;height:4px}.cap-group input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:2px solid var(--bg-primary);border-radius:50%;width:14px;height:14px}.cap-group input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid var(--bg-primary);border-radius:50%;width:14px;height:14px}.cap-value{color:var(--accent);font-variant-numeric:tabular-nums;text-align:right;min-width:32px;font-size:11px;font-weight:600}.bid-adjust-controls{flex-direction:column;gap:4px;display:flex}.bid-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:5px;padding:3px 6px;font-size:10px;display:flex}.bid-card-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.bid-card-name{color:var(--text-primary);min-width:56px;font-size:10px;font-weight:500}.bid-card-avg{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;min-width:48px;font-size:10px}.bid-card-btn{border:1px solid var(--border);background:var(--bg-primary);width:16px;height:16px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:12px;font-weight:600;line-height:1;display:inline-flex}.bid-card-btn:hover{background:var(--bg-surface-hover);border-color:var(--accent-dim);color:var(--accent)}.bid-card-input{background:var(--bg-primary);border:1px solid var(--border);width:44px;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums;border-radius:3px;outline:none;padding:1px 4px;font-family:inherit;font-size:10px;font-weight:600}.bid-card-input:focus{border-color:var(--accent-dim)}.bid-card-unit{color:var(--text-muted);font-size:9px}.stats-section{margin-top:auto}.stats{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:11px;line-height:1.6}.stats strong{color:var(--accent);font-weight:600}.right-panel{background:var(--bg-primary);flex-direction:column;grid-area:2/2;min-width:0;display:flex;overflow:hidden}.chart-container{flex:1;min-height:0;padding:8px 12px}.chart-container .js-plotly-plot{width:100%!important;height:100%!important}.unit-panel{border-top:1px solid var(--border);flex-shrink:0;transition:max-height .3s;overflow:hidden}.unit-panel.hidden{display:none}.unit-panel-header{justify-content:space-between;align-items:center;padding:6px 16px;display:flex}.unit-panel-header h3{color:var(--accent);letter-spacing:-.2px;font-size:12px;font-weight:600}.unit-tabs{gap:2px;display:flex}.unit-tab{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);padding:3px 10px;font-family:inherit;font-size:10px;font-weight:500}.unit-tab:hover{border-color:var(--border-strong);color:var(--text-primary)}.unit-tab.active{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent)}.unit-tab-content.hidden{display:none}.config-select{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;outline:none;padding:2px 6px;font-family:inherit;font-size:10px}.config-select:focus{border-color:var(--accent-dim)}.config-select.hidden{display:none}.btn-close{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border-radius:3px;padding:0 6px;font-size:16px;line-height:1.2}.btn-close:hover{color:var(--accent);border-color:var(--accent-dim)}.unit-chart{height:200px;padding:0 12px 8px}.unit-chart .js-plotly-plot{width:100%!important;height:100%!important}.legend-bar{border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;justify-content:center;gap:14px;padding:6px 16px;display:flex}.legend-item{color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);-webkit-user-select:none;user-select:none;align-items:center;gap:5px;padding:3px 8px;font-size:10px;display:flex}.legend-item:hover{background:var(--bg-surface-hover)}.legend-item.active{color:var(--text-primary)}.legend-item.inactive{opacity:.3}.legend-swatch{border-radius:2px;width:12px;height:8px}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay.hidden{display:none}.modal{background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:var(--radius);flex-direction:column;width:560px;max-width:90vw;max-height:80vh;display:flex;box-shadow:0 20px 60px #00000080}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px 12px;display:flex}.modal-header h2{color:var(--accent);font-size:16px;font-weight:600}.modal-body{color:var(--text-secondary);padding:16px 20px 20px;font-size:12px;line-height:1.7;overflow-y:auto}.modal-body h3{text-transform:uppercase;letter-spacing:.8px;color:var(--text-primary);margin-top:14px;margin-bottom:6px;font-size:11px;font-weight:600}.modal-body h3:first-child{margin-top:0}.modal-body p{margin-bottom:8px}.modal-body ul{margin-bottom:8px;padding-left:16px}.modal-body li{margin-bottom:4px}.modal-body a{color:var(--accent-dim);text-decoration:none}.modal-body a:hover{color:var(--accent);text-decoration:underline}.modal-body .disclaimer-text{color:var(--text-muted);font-size:10px;line-height:1.6}@media (width<=768px){#app{grid-template-rows:auto 260px 1fr;grid-template-columns:1fr}.left-panel{border-right:none;border-bottom:1px solid var(--border);grid-area:2/1}.right-panel{grid-area:3/1}}