/* Seletores (select) com a lista aberta no estilo do sistema: escura, arredondada e com destaque na opcao marcada.
   Usa o recurso nativo appearance:base-select (Chrome/Edge). Em navegadores sem suporte continua o seletor padrao. */
@supports (appearance: base-select) {
  select,
  select::picker(select) { appearance: base-select; }

  select::picker-icon { color: var(--muted, #8993a2); transition: rotate .18s ease; }
  select:open::picker-icon { rotate: 180deg; }

  select::picker(select) {
    box-sizing: border-box;
    min-width: anchor-size(width);
    max-height: min(340px, 60vh);
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--line, #242c38);
    border-radius: 12px;
    background: var(--panel2, #111720);
    color: var(--text, #f5f7fb);
    box-shadow: 0 18px 44px #000a, 0 0 0 1px #ffffff08 inset;
    scrollbar-width: thin;
    scrollbar-color: #3a4658 transparent;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, display .14s allow-discrete, overlay .14s allow-discrete;
  }
  select:open::picker(select) { opacity: 1; transform: none; }
  @starting-style { select:open::picker(select) { opacity: 0; transform: translateY(-4px); } }

  select option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--text, #f5f7fb);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  select option::checkmark { order: 2; margin-left: auto; color: #fff; font-size: 11px; }
  select option:hover,
  select option:focus-visible { background: #ffffff14; outline: 0; }
  select option:checked { background: linear-gradient(90deg, #ef008c, #1688ff); color: #fff; }
  select option:disabled { opacity: .45; cursor: not-allowed; }

  html[data-theme="light"] select::picker(select) { border-color: #d3dbe7; background: #fff; box-shadow: 0 16px 38px #33476533; }
  html[data-theme="light"] select option { color: #172033; }
  html[data-theme="light"] select option:hover,
  html[data-theme="light"] select option:focus-visible { background: #eef2f8; }
  html[data-theme="light"] select option:checked { color: #fff; }
}