.custom-select {
  --dropdown-bg: var(--panel, #161b22);
  --dropdown-text: var(--text, #e6edf3);
  --dropdown-border: var(--line, #2a3340);
  --dropdown-accent: var(--accent, #35d0a5);
  --dropdown-hover: var(--panel-2, #1c232d);
  display: inline-flex; min-width: 0; vertical-align: middle;
}
.custom-select > select[hidden], .custom-select-menu[hidden] { display: none !important; }
.custom-select .custom-select-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .65em;
  width: 100%; min-width: 0; margin: 0; padding: .4em .65em;
  font: inherit; line-height: 1.5; text-align: left; cursor: pointer;
  color: var(--dropdown-text); background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border); border-radius: 6px;
}
.custom-select-trigger::after {
  content: ''; flex: none; width: .4em; height: .4em; margin: -.2em .15em 0;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.custom-select-trigger[aria-expanded="true"]::after { transform: translateY(.2em) rotate(225deg); }
.custom-select-trigger:hover, .custom-select-trigger[aria-expanded="true"] { border-color: var(--dropdown-accent); }
.custom-select-trigger:focus-visible { outline: 2px solid var(--dropdown-accent); outline-offset: 3px; }
.custom-select-trigger:disabled { opacity: .45; cursor: default; }
.custom-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-menu {
  position: fixed; inset: auto; z-index: 100; box-sizing: border-box; margin: 0; padding: 4px;
  width: max-content; overflow: auto; overscroll-behavior: contain;
  color: var(--dropdown-text); background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border); border-radius: 9px;
  box-shadow: 0 12px 32px #0005; scrollbar-color: var(--dropdown-border) var(--dropdown-bg);
}
.custom-select-option {
  position: relative; padding: .55em 2em .55em .75em; border-radius: 5px;
  cursor: pointer; overflow-wrap: anywhere; line-height: 1.5;
}
.custom-select-option:hover, .custom-select-option.is-active { background: var(--dropdown-hover); }
.custom-select-option[aria-selected="true"] { color: var(--dropdown-accent); }
.custom-select-option[aria-selected="true"]::after { content: '✓'; position: absolute; right: .65em; }
.custom-select-option[aria-disabled="true"] { opacity: .45; cursor: default; }
@media (pointer: coarse) {
  .custom-select .custom-select-trigger, .custom-select-option { min-height: 44px; }
}