/* The chart and its markers share the actual free rectangle above/beside the panel. */
html body .chart-wrap,html body #dao-barrages{top:var(--market-chart-top,var(--safe-top));bottom:var(--market-chart-bottom,var(--nav-total));right:var(--market-chart-right,0px);left:var(--safe-left);height:auto;}
html body #controls{--market-side-panel:0;display:flex;flex-direction:column;gap:8px;transition:none;}
html body #controls .controls-card{max-height:calc(var(--viewport-height) - var(--nav-total) - var(--safe-top) - 280px)!important;overflow-y:auto;min-height:0;}
html body .chart-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;pointer-events:auto;padding-inline:4px;}
html body #controls .chart-tool{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--text);cursor:pointer;font-size:12px;line-height:1;box-shadow:none;}
html body #controls .chart-range{width:auto;min-width:84px;padding-inline:12px;font-variant-numeric:tabular-nums;}
html body #controls .chart-tool select{position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:44px;font-size:16px;cursor:pointer;}
html body #controls .chart-tool:focus-within,html body #controls .chart-tool:focus-visible{outline:2px solid var(--text);outline-offset:3px;}
html body #controls .chart-tool:active{background:var(--surface-soft);}
.chart-candles-icon,.chart-mode[data-mode=candles] .chart-line-icon{display:none;}
.chart-mode[data-mode=candles] .chart-candles-icon{display:block;}
html body #controls.panel-minimized .controls-card{display:none;}
html body #controls.panel-minimized .chart-toolbar{margin-right:64px;max-width:calc(100% - 64px);}
html body #controls .panel-head{padding-top:6px;}
html body #controls .hint{display:none;}
html body #controls .data-notes summary{min-height:44px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
html body #controls .data-notes{padding-bottom:8px;}
.picker-metric .picker-metric-source{display:block;max-width:120px;white-space:normal;font-size:10px;line-height:1.4;color:var(--muted);font-weight:400;margin-top:4px;}
@media(min-width:900px),(orientation:landscape) and (max-height:600px){
 html body #controls{--market-side-panel:1;top:calc(8px + var(--safe-top));bottom:auto;left:auto;right:calc(12px + var(--safe-right));width:340px;max-width:42vw;}
 html body #controls .controls-card{max-height:calc(var(--viewport-height) - var(--nav-total) - var(--safe-top) - 80px)!important;}
 html body #hud{width:min(380px,calc(100vw - 380px - var(--safe-left) - var(--safe-right)));}
}
@media(max-height:650px) and (orientation:portrait){
 html body #controls .controls-card{max-height:calc(var(--viewport-height) - var(--nav-total) - var(--safe-top) - 240px)!important;}
 html body #hud .pair-card{padding-block:6px;}
}

/* One touch-scroll row; inset ends keep the first/last action clear of the fade. */
html body #controls .chart-toolbar{
 align-self:stretch;flex-wrap:nowrap;justify-content:flex-start;min-width:0;max-width:100%;flex-shrink:0;box-sizing:border-box;
 overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
 padding:6px 14px;scroll-padding-inline:14px;
 overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);
 mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);
}
html body #controls .chart-toolbar::-webkit-scrollbar{display:none;}
html body #controls .chart-toolbar>.chart-tool{flex-shrink:0;white-space:nowrap;}
html body #controls .chart-toolbar>.chart-tool:first-child{margin-left:0;}
html body #controls .chart-tool.active{color:var(--accent);border-color:currentColor;}
html body #controls .panel-actions{justify-content:flex-start;}
#arena-status:empty{display:none;}

html body #controls .market-panel-footer{display:flex;align-items:center;gap:8px;padding-right:60px;min-height:44px;}
html body #controls .market-panel-footer .panel-actions{width:auto;display:flex;gap:8px;}
html body #controls .market-panel-footer:has(.ui-help[open]){flex-wrap:wrap;}
html body #controls .market-panel-footer .ui-help[open]{flex-basis:100%;}