@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: rgb(var(--color-indigo-600)) rgb(var(--color-voon-950)); }
  *, *::before, *::after { scrollbar-width: thin; }
  .cl-select-menu { scrollbar-color: rgb(var(--color-indigo-500)) rgb(var(--color-voon-900)); }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--color-voon-950) / 0.85); }
html::-webkit-scrollbar-track { background: rgb(var(--color-voon-950)); }
::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-indigo-600));
  border: 2px solid transparent; border-radius: 999px; background-clip: padding-box;
  min-height: 2.5rem;
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--color-indigo-400)); }
::-webkit-scrollbar-thumb:active { background-color: rgb(var(--color-indigo-300)); }
::-webkit-scrollbar-corner { background: rgb(var(--color-voon-950)); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-resizer {
  background-color: rgb(var(--color-voon-950));
  background-image:
    linear-gradient(135deg, transparent 0 46%, rgb(var(--color-indigo-400)) 46% 54%, transparent 54% 66%, rgb(var(--color-indigo-400)) 66% 74%, transparent 74% 86%, rgb(var(--color-indigo-400)) 86% 94%, transparent 94%);
  border-bottom-right-radius: 0.5rem;
}

.cl-select { display: contents; }
.cl-select[hidden] { display: none; }

select.cl-select-native {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important;
  overflow: hidden !important; flex: none !important;
}

:where(.cl-select-btn) {
  padding: 0.65rem 0.9rem; border-radius: 0.75rem; border: 1px solid rgb(255 255 255 / 0.1);
  background-color: rgb(var(--color-voon-900)); color: #fff; font: inherit; font-size: 0.9rem; line-height: 1.5;
}

.cl-select-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  max-width: 100%; min-width: 0; vertical-align: middle; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cl-select-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.cl-select.is-open .cl-select-btn, .cl-select-btn:focus-visible { border-color: rgb(var(--color-indigo-500)); }
.cl-select.is-invalid .cl-select-btn { border-color: rgb(var(--color-indigo-300)); box-shadow: 0 0 0 1px rgb(var(--color-indigo-300) / 0.6); }

.cl-select-value { display: grid; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.cl-select-label, .cl-select-sizer { grid-area: 1 / 1; min-width: 0; }
.cl-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-select.is-placeholder .cl-select-label { color: rgb(255 255 255 / 0.55); }
.cl-select-sizer { display: grid; height: 0; overflow: hidden; visibility: hidden; }
.cl-select-sizer > span { grid-area: 1 / 1; white-space: nowrap; }

.cl-select-chevron {
  flex: 0 0 auto; width: 0.45rem; height: 0.45rem; margin: 0 0.15rem 0.2rem 0;
  border-right: 2px solid rgb(255 255 255 / 0.6); border-bottom: 2px solid rgb(255 255 255 / 0.6);
  transform: rotate(45deg); transition: transform .15s ease, border-color .15s ease;
}
.cl-select.is-open .cl-select-chevron { transform: translateY(0.2rem) rotate(-135deg); border-color: rgb(var(--color-indigo-300)); }

.cl-select-menu {
  position: fixed; z-index: 10050; box-sizing: border-box; max-height: 20rem; overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; gap: 0.15rem; padding: 0.35rem; border-radius: 0.85rem;
  background-color: rgb(var(--color-voon-800)); border: 1px solid rgb(var(--color-indigo-500) / 0.35);
  color: #fff; font-size: 0.88rem; line-height: 1.4; text-align: left;
  -webkit-overflow-scrolling: touch;
}
.cl-select-menu[hidden] { display: none; }
.cl-select-menu::-webkit-scrollbar { width: 8px; }
.cl-select-menu::-webkit-scrollbar-track { background: transparent; }
.cl-select-menu:focus { outline: none; }

.cl-select-group { display: grid; gap: 0.15rem; }
.cl-select-group + .cl-select-group, .cl-select-item + .cl-select-group { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid rgb(255 255 255 / 0.06); }
.cl-select-group-label { padding: 0.35rem 0.7rem 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--color-indigo-300)); }

.cl-select-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0.7rem; border-radius: 0.6rem; color: rgb(255 255 255 / 0.82);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, color .12s ease;
}
.cl-select-text { min-width: 0; overflow-wrap: anywhere; }
.cl-select-item.is-active { background-color: rgb(var(--color-indigo-500) / 0.16); color: #fff; }
.cl-select-item.is-selected { background-color: rgb(var(--color-indigo-500) / 0.26); color: #fff; }
.cl-select-item.is-selected.is-active { background-color: rgb(var(--color-indigo-500) / 0.34); }
.cl-select-item.is-disabled { opacity: 0.42; cursor: not-allowed; }
.cl-select-check {
  flex: 0 0 auto; width: 0.35rem; height: 0.65rem; margin: 0 0.2rem 0.15rem 0;
  border-right: 2px solid rgb(var(--color-indigo-300)); border-bottom: 2px solid rgb(var(--color-indigo-300));
  transform: rotate(45deg); opacity: 0;
}
.cl-select-item.is-selected .cl-select-check { opacity: 1; }

@media (hover: hover) {
  .cl-select-item:not(.is-disabled):hover { color: #fff; }
}

@media (pointer: coarse) {
  .cl-select-btn { min-height: 2.75rem; }
  .cl-select-menu { gap: 0.2rem; padding: 0.4rem; font-size: 1rem; }
  .cl-select-item { min-height: 2.75rem; padding: 0.65rem 0.85rem; }
}

textarea { resize: none !important; overflow-y: auto; }