:root{--bg-drawer:#101114;--bg-drawer-border:#292c32;--bg-drawer-text:#e7e9ee;--bg-drawer-muted:#9298a4;--bg-field:#17191e;--bg-accent:#4169f5;--bg-accent-soft:color-mix(in srgb,var(--bg-accent) 16%,transparent)}
body.theme-light{--bg-drawer:#fff;--bg-drawer-border:#e4e7ed;--bg-drawer-text:#242a35;--bg-drawer-muted:#697383;--bg-field:#f5f6f8;--bg-accent:#315efb;--bg-accent-soft:color-mix(in srgb,var(--bg-accent) 12%,transparent)}
.chart-stage{isolation:isolate}
.chart-bg-layer{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--terminal-panel,#0a0a0c)}
.chart-bg-layer[hidden]{display:none!important}
.chart-bg-media{position:absolute;inset:auto;width:var(--bg-size);height:var(--bg-size);max-width:none;max-height:none;left:var(--bg-x);top:var(--bg-y);transform:translate(-50%,-50%) scale(var(--bg-zoom,1));filter:blur(var(--bg-blur,0px));opacity:var(--bg-opacity);object-fit:cover;pointer-events:none}
.chart-bg-layer[data-fit="cover"] .chart-bg-media{width:100%;height:100%;object-fit:cover}
.chart-bg-layer[data-fit="contain"] .chart-bg-media{width:100%;height:100%;object-fit:contain}
.chart-bg-layer[data-fit="stretch"] .chart-bg-media{width:100%;height:100%;object-fit:fill}
.chart-bg-layer[data-fit="center"] .chart-bg-media{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.chart-bg-layer[data-fit="tile"] .chart-bg-media{width:100%;height:100%;object-fit:cover;opacity:0}
.chart-bg-layer[data-fit="tile"]::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--bg-image);background-repeat:repeat;background-size:auto;opacity:var(--bg-opacity)}
.chart-bg-layer::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,5,8,.25),rgba(3,5,8,.65));opacity:var(--bg-darkness,0)}
#chartHost{position:relative;z-index:1!important}
.chart-stage:has(.chart-bg-layer:not([hidden])) #chartHost canvas{background:transparent!important}
.chart-stage:has(.chart-bg-layer:not([hidden])) .terminal-chart-grid,.chart-stage:has(.chart-bg-layer:not([hidden])) .terminal-chart-cell,.chart-stage:has(.chart-bg-layer:not([hidden])) .chart-host{background:transparent!important}
.chart-bg-btn{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid var(--line,#2a2d33);border-radius:7px;background:var(--terminal-panel,#17191e);color:var(--terminal-text,#d6dbe5);font:600 10px var(--sans,system-ui,sans-serif);cursor:pointer}
.chart-bg-btn:hover{border-color:var(--bg-accent);background:var(--bg-accent-soft)}
.chart-bg-panel{position:fixed;z-index:9999;inset:0 0 0 auto;width:min(360px,100vw);max-height:100dvh;overflow:auto;background:var(--bg-drawer);border-left:1px solid var(--bg-drawer-border);box-shadow:-18px 0 50px #0005;color:var(--bg-drawer-text);font:12px/1.45 var(--sans,system-ui,sans-serif);animation:bg-drawer-in .18s ease-out}
@keyframes bg-drawer-in{from{transform:translateX(24px);opacity:.6}to{transform:translateX(0);opacity:1}}
.chart-bg-panel>header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg-drawer);border-bottom:1px solid var(--bg-drawer-border);font-size:14px}
.chart-bg-panel button,.chart-bg-panel select{font:inherit;color:var(--bg-drawer-text);background:var(--bg-field);border:1px solid var(--bg-drawer-border);border-radius:6px}
.chart-bg-panel button{padding:6px 9px;cursor:pointer}.chart-bg-panel button:hover{border-color:var(--bg-accent)}.chart-bg-panel button:disabled{opacity:.5;cursor:not-allowed}
.chart-bg-panel>header button{width:30px;height:30px;padding:0;font-size:19px;color:var(--bg-drawer-muted)}
.chart-bg-panel section{display:grid;gap:8px;padding:13px 16px;border-bottom:1px solid var(--bg-drawer-border)}
.chart-bg-panel section>b{font-size:11px}.chart-bg-panel p{margin:0;color:var(--bg-drawer-muted);font-size:10px}.chart-bg-panel small,.chart-bg-panel footer{color:var(--bg-drawer-muted);font-size:10px}
.bg-check{display:flex;align-items:center;gap:8px}.bg-check input{accent-color:var(--bg-accent);width:15px;height:15px;margin:0}.bg-file-actions{display:flex;align-items:center;gap:8px}.bg-change{position:relative;display:inline-flex;align-items:center;padding:6px 9px;border:1px solid var(--bg-accent);border-radius:6px;color:var(--bg-accent);cursor:pointer}.bg-change input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.bg-filename{overflow-wrap:anywhere;color:var(--bg-drawer-muted);font-size:10px}.bg-error{color:#e94c63!important}
.bg-controls{gap:12px!important}.bg-slider{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px}.bg-slider b{color:var(--bg-drawer-muted);font-size:10px;font-weight:500}.bg-slider input{grid-column:1/-1;width:100%;accent-color:var(--bg-accent)}.bg-select{display:grid;grid-template-columns:1fr 130px;align-items:center;gap:8px}.bg-select select{height:30px;padding:0 7px}.chart-bg-panel details{border-top:1px solid var(--bg-drawer-border);border-bottom:1px solid var(--bg-drawer-border);padding:8px 0}.chart-bg-panel details summary{cursor:pointer;margin-bottom:8px;color:var(--bg-drawer-muted)}.chart-bg-panel footer{padding:13px 16px}
.chart-note-marker{touch-action:none;cursor:grab}.chart-note-marker:active{cursor:grabbing}
@media(max-width:600px){.chart-bg-panel{width:100vw}}