.graph-picker, .graph-picker * { box-sizing: border-box; }
.graph-picker { --gp-bg:#fff; --gp-text:#34374b; --gp-muted:#697086; --gp-border:#dcdff1; --gp-accent:#625be3; position:relative; display:inline-block; width:100%; max-width:560px; text-align:left; vertical-align:middle; color:var(--gp-text); font-weight:400; }
.graph-picker[data-theme="dark"] { --gp-bg:#242638; --gp-text:#f2f3fb; --gp-muted:#b6bcd0; --gp-border:#50546d; --gp-accent:#b3afff; }
select.graph-picker-native { display:none !important; }
.graph-picker-trigger { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--gp-border); border-radius:9px; background:var(--gp-bg); color:var(--gp-text); font:inherit; text-align:left; cursor:pointer; }
.graph-picker-trigger:hover { border-color:var(--gp-accent); }
.graph-picker-prefix { color:var(--gp-muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.graph-picker-caption { flex:1; min-width:0; overflow-wrap:anywhere; font-weight:600; font-size:14px; }
.graph-picker-caret { color:var(--gp-accent); }
.graph-picker-panel { position:absolute; top:calc(100% + 6px); left:0; width:100%; min-width:0; z-index:1060; padding:14px 12px 10px; border:1px solid var(--gp-border); border-radius:12px; background:var(--gp-bg); color:var(--gp-text); box-shadow:0 12px 36px rgba(22,26,62,.18); }
.graph-picker-panel[hidden] { display:none; }
.graph-picker.opens-up .graph-picker-panel { top:auto; bottom:calc(100% + 6px); }
.graph-picker-search-label { display:block; margin:0 0 6px; font-size:12px; font-weight:600; color:var(--gp-muted); }
.graph-picker-search { box-sizing:border-box; width:100%; padding:10px 12px; border:1px solid var(--gp-border); border-radius:7px; background:var(--gp-bg); color:var(--gp-text); font:inherit; font-size:14px; }
.graph-picker-search:focus,.graph-picker-trigger:focus-visible { outline:2px solid var(--gp-accent); outline-offset:2px; }
.graph-picker-results { overflow-y:auto; overscroll-behavior:contain; max-height:320px; margin-top:10px; scrollbar-gutter:stable; }
.graph-picker-group-title { padding:10px 9px 5px; color:var(--gp-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.graph-picker-option { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px; border:0; border-radius:6px; background:transparent; color:var(--gp-text); text-align:left; font:inherit; font-size:14px; line-height:1.35; cursor:pointer; }
.graph-picker-option[aria-selected="true"] { color:var(--gp-accent); font-weight:700; background:rgba(118,114,251,.09); }
.graph-picker-option:hover,.graph-picker-option.is-active { background:rgba(118,114,251,.16); }
.graph-picker-check { flex:0 0 15px; }
.graph-picker-status { margin-top:10px; font-size:11px; line-height:1.4; color:var(--gp-muted); }
@media(max-width:575px) { .graph-picker-trigger{gap:8px;padding:10px;} .graph-picker-panel{padding:12px 8px;} .graph-picker-status{font-size:10px;} }

.graph-picker-categories { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.graph-picker-category { border:1px solid var(--gp-border); border-radius:16px; padding:5px 10px; background:var(--gp-bg); color:var(--gp-text); font:inherit; font-size:12px; cursor:pointer; }
.graph-picker-category[aria-pressed="true"] { background:var(--gp-accent); border-color:var(--gp-accent); color:var(--gp-bg); }
.graph-picker-category:focus-visible { outline:2px solid var(--gp-accent); outline-offset:2px; }
.graph-picker-option-label,.graph-picker-description { display:block; }
.graph-picker-description { margin-top:3px; color:var(--gp-muted); font-size:12px; font-weight:400; }
#graph-selection-element > .graph-picker { display:block; margin-inline:auto; }
#graph-selection-element > .graph-selection-label { max-width:560px; margin-inline:auto; }

.graph-picker-floating { position:fixed; display:flex; flex-direction:column; max-width:none; overflow:hidden; z-index:1080; }
.graph-picker-floating .graph-picker-results { flex:1 1 auto; min-height:0; }
.graph-picker-floating > :not(.graph-picker-results) { flex-shrink:0; }

/* Neutral section dividers; purple is reserved for the selected graph. */
.graph-picker-group + .graph-picker-group { margin-top:18px; }
.graph-picker-group-title { display:flex; align-items:center; gap:10px; margin:0 4px 7px; padding:5px 0; border:0; border-radius:0; background:transparent; color:var(--gp-muted); font-size:10px; font-weight:700; letter-spacing:.12em; line-height:1.4; }
.graph-picker-group-title::after { content:""; height:1px; flex:1; background:var(--gp-border); }
.graph-picker-option { margin:2px 0; padding:10px 12px; border-left:3px solid transparent; }
.graph-picker-option-label { font-weight:400; }
.graph-picker-option[aria-selected="true"] { border-left-color:var(--gp-accent); background:rgba(118,114,251,.12); }
.graph-picker-option[aria-selected="true"] .graph-picker-option-label { font-weight:700; }
.graph-picker-description { line-height:1.45; }