:root{--gpu0:#006b94;--gpu1:#7541a5;--gpu2:#00795a;--gpu3:#a05b00;--gpu4:#b83e60;--gpu5:#647500;--gpu6:#355baf;--gpu7:#925818}
:root[data-theme="dark"]{--gpu0:#57d8ff;--gpu1:#b594ff;--gpu2:#41e1b1;--gpu3:#ffb657;--gpu4:#ff7d9c;--gpu5:#d2e76b;--gpu6:#75a7ff;--gpu7:#e5a775}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--gpu0:#57d8ff;--gpu1:#b594ff;--gpu2:#41e1b1;--gpu3:#ffb657;--gpu4:#ff7d9c;--gpu5:#d2e76b;--gpu6:#75a7ff;--gpu7:#e5a775}}
.gpu-series-row{clear:both;display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;align-items:center}
.gpu-history-legend{display:grid;gap:4px;font-size:12px;font-variant-numeric:tabular-nums}
.gpu-history-key{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--dim)}
.gpu-history-key i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gpu-history-key b{margin-left:auto;color:var(--fg);font-weight:500}
@media(max-width:640px){.gpu-series-row{clear:both;grid-template-columns:1fr;gap:6px}.gpu-history-legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;order:1}.gpu-series-row>div:last-child{order:0}.gpu-history-key{font-size:11px}}
.chart-row{position:relative;clear:both;margin-bottom:28px;padding-top:32px;border-top:1px solid var(--line)}
.chart-expand{position:absolute;right:0;top:2px;min-width:32px;min-height:28px}
.chart-detail{width:min(1400px,94vw);max-width:94vw;max-height:94vh;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg)}
.chart-detail::backdrop{background:rgba(0,0,0,.7)}
.chart-detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.chart-detail-head h3{margin:0}
.chart-detail-body{position:relative;padding-bottom:180px}
.chart-detail .chart-row{padding-top:0;border:0;margin-bottom:10px}
.chart-detail svg{width:100%;display:block}
@media(max-width:640px){.chart-row{margin-bottom:22px}.chart-detail{padding:12px}.chart-detail .gpu-series-row{display:block}.chart-detail .gpu-history-legend{margin-bottom:12px}}
.chart-detail-body{padding-bottom:140px}
.chart-navigator{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.chart-navigator label{display:grid;gap:6px;font-size:12px}
.chart-navigator input{width:100%;accent-color:var(--s1)}
.chart-overview{grid-column:1/-1;position:relative;overflow:hidden;border:1px solid var(--line)}
.chart-overview svg{height:54px!important}
.chart-overview svg text,.chart-overview .cross{display:none}
.chart-overview:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,.4) 0 var(--range-start),transparent var(--range-start) var(--range-end),rgba(0,0,0,.4) var(--range-end) 100%)}
.chart-navigator output{grid-column:1/-1;font-size:12px;color:var(--dim)}
@media(max-width:640px){.chart-navigator{grid-template-columns:1fr}.chart-detail-head select{max-width:65%}}
.chart-overview{touch-action:none;cursor:ew-resize}.chart-overview:before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:var(--range-start);right:calc(100% - var(--range-end));border-left:3px solid var(--dim);border-right:3px solid var(--dim);pointer-events:none}
.chart-detail[open]{display:flex;flex-direction:column;box-sizing:border-box}
.chart-detail-head,.chart-navigator{flex-shrink:0}
.chart-detail-body{min-height:0;overflow:auto;flex:1;padding-bottom:150px}
.chart-navigator{background:var(--surface);padding-top:10px;border-top:1px solid var(--line)}
.chart-calendar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;flex-shrink:0}.chart-calendar [aria-pressed="true"]{border-color:var(--s1);box-shadow:inset 0 0 0 1px var(--s1)}.chart-load-status{font-size:12px;color:var(--dim)}
button.gpu-history-key{background:transparent;border:0;border-radius:4px;padding:3px 2px;text-align:left;box-shadow:none;min-height:26px;cursor:pointer;font:inherit}
button.gpu-history-key:hover{background:var(--panel2)}
button.gpu-history-key[aria-pressed="false"]{opacity:.5;text-decoration:line-through}
button.gpu-history-key:focus-visible{outline:2px solid var(--s1);outline-offset:2px}
