*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Arial,sans-serif;background:#0f172a;color:#fff}
body{overflow:hidden;display:flex;flex-direction:column}
header{height:48px;display:flex;align-items:center;gap:10px;padding:0 10px;background:#111827;border-bottom:1px solid #334155}
header h1{margin:0;font-size:21px;font-weight:800;letter-spacing:.2px}
header .webver{color:#22d3ee;font-weight:800;font-size:12px;margin-left:2px}
.livebox{height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#172033;border:1px solid #334155;border-radius:4px;white-space:nowrap}
.live-label{color:#cbd5e1;font-size:10px;font-weight:800}
.live-value{color:#22d3ee;font-family:Consolas,monospace;font-size:19px;font-weight:900;letter-spacing:.2px}
.time-value{font-size:18px}
.btcbox{margin-left:4px}
.toolbar{height:38px;display:flex;align-items:center;gap:6px;padding:3px 8px;background:#172033;border-bottom:1px solid #334155;white-space:nowrap}
.group{display:flex;align-items:center;gap:4px}
.group b,.selectors label{font-size:10px;font-weight:800}
select{height:27px;background:#1e293b;color:#fff;border:1px solid #475569;border-radius:4px;padding:1px 5px;font-weight:800;font-size:11px}
.selectors{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.selectors label{display:flex;align-items:center;gap:3px;color:#cbd5e1}
#status{margin-left:auto;color:#67e8f9;font-size:10px;font-weight:800}
#history{height:27px;flex:0 0 27px;display:flex;align-items:center;gap:8px;padding:0 8px;background:#111827;border-top:1px solid #334155;font-size:10px;order:4}
#historySlider{flex:1;accent-color:#0ea5e9;cursor:pointer}
main#graphs{height:auto;flex:1 1 auto;min-height:0;display:grid;gap:5px;padding:4px;align-items:stretch;overflow:hidden;order:3}
.panel{min-width:0;min-height:0;background:#111827;border:1px solid #334155;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.panel-title{height:22px;display:flex;align-items:center;padding:0 5px;background:#172033;color:#f8fafc;font-size:11px;font-weight:800;border-bottom:1px solid #334155}
.panel canvas{display:block;flex:1 1 0;width:100%;height:0;min-height:0;background:#020617}
@media(max-width:1100px){.selectors{overflow:hidden}header h1{font-size:18px}}

/* V17: History slider — latest (offset 0) is always on the RIGHT. */
#historySlider{direction:rtl}