.graph-settings-host { display:inline-flex; align-items:center; flex:none; }
.graph-settings-host .gs-toggle { display:inline-flex; align-items:center; gap:5px; border:0; border-radius:7px; padding:5px 8px; background:transparent; color:#8b7aa5; font:inherit; font-size:11px; line-height:1.5; white-space:nowrap; cursor:pointer; }
.graph-settings-host .gs-toggle svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.graph-settings-host .gs-toggle:hover,.graph-settings-host .gs-toggle[aria-expanded="true"] { background:#f1eaff; color:#7754cf; }
.gs-panel { position:fixed; z-index:10000; box-sizing:border-box; width:300px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; padding:18px; border:1px solid #e9def3; border-radius:16px; background:#fff; color:#51455f; box-shadow:0 14px 50px #59416b24,0 2px 8px #59416b0b; font-family:inherit; font-size:13px; line-height:1.5; text-align:left; overscroll-behavior:contain; scrollbar-width:thin; }
.gs-panel[hidden] { display:none; }
.gs-panel[popover] { margin:0; inset:auto; }
.gs-panel::backdrop { background:transparent; }
.gs-panel * { box-sizing:border-box; }
.gs-panel .gs-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; padding:0; border:0; }
.gs-panel .gs-header h3 { margin:0; font-size:15px; color:#59466f; font-weight:600; }
.gs-panel .gs-reset { padding:3px 0 3px 8px; border:0; background:transparent; color:#947ab0; font:inherit; font-size:11px; cursor:pointer; }
.gs-panel .gs-reset:hover { color:#7554cf; }
.gs-controls { display:grid; gap:13px; }
.gs-control-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:25px; }
.gs-number-wrap { display:inline-flex; align-items:center; gap:4px; color:#9684a5; font-size:11px; }
.gs-panel .gs-number { width:57px; height:25px; margin:0; padding:1px 3px; border:1px solid #e8dff0; border-radius:5px; color:#7152a1; background:#fcfaff; font:inherit; font-size:12px; text-align:center; }
.gs-panel input[type="range"] { display:block; appearance:none; -webkit-appearance:none; width:100%; height:22px; margin:3px 0 0; padding:0; border:0; border-radius:0; outline-offset:2px; background:transparent; box-shadow:none; cursor:pointer; accent-color:#8964de; }
.gs-panel input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(to right,#a88ae4 var(--gs-fill),#eee7f5 var(--gs-fill)); }
.gs-panel input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; height:14px; width:14px; margin-top:-5px; border:2px solid #fff; border-radius:50%; background:#8964de; box-shadow:0 0 0 1px #c1a7ed; }
.gs-panel input[type="range"]::-moz-range-track { height:4px; border-radius:4px; background:#eee7f5; }
.gs-panel input[type="range"]::-moz-range-progress { height:4px; border-radius:4px; background:#a88ae4; }
.gs-panel input[type="range"]::-moz-range-thumb { height:11px; width:11px; border:2px solid #fff; border-radius:50%; background:#8964de; box-shadow:0 0 0 1px #c1a7ed; }
.gs-panel .gs-hint { margin:0; color:#9b8aa8; font-size:11px; line-height:1.4; }
.gs-label-mode { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid #f0e9f5; }
.gs-panel .gs-label-mode select { width:155px; max-width:66%; padding:5px 7px; border:1px solid #e8dff0; border-radius:7px; background:#fcfaff; color:#705584; font:inherit; font-size:12px; }
.gs-panel .gs-footer { margin:13px 0 0; color:#a18dae; font-size:11px; line-height:1.6; }
.gs-panel :is(button,input,select):focus-visible,.graph-settings-host .gs-toggle:focus-visible { outline:2px solid #a989ec; outline-offset:3px; }
@media(max-width:600px) { .graph-settings-host .gs-toggle { font-size:10px; padding:4px 6px; } }