/* sg-sel — GERADO por `manage.py port_card_css` (design/card_ports.py).
 * Não editar à mão.
 * SelectMenu, byte a byte do CSS de components/forms/SelectMenu.jsx (o template literal
 * `const CSS`; o <style> do select-menu.card é só a moldura), bundle 8cd72241, ZIP 48ebf484759c.
 * O JSX marca a variante em atributos do próprio elemento; aqui cada uma vale no seu eixo, com
 * a classe do elemento no lugar do atributo: o desenho da lista e a sua abertura
 * (`data-variant` / `data-anim`, acoplados como nos 10 blocos do card) no data-menu; o efeito do
 * gatilho (`data-behavior`) no data-select-fx; o formato da caixa do múltiplo (`data-checkbox`,
 * `sonar` = `wave`) no data-checkbox-format do Checkbox. Tempos finitos e raios viram tokens;
 * os laços dos efeitos ficam literais. O movimento reduzido, o menu flutuante (position:fixed,
 * para não ser cortado em drawer e dialog) e o Menu de ações estão em static/css/menus.css.
 * Marcação: {% sg_select "uf" choices=ufs %} ou o widget SgSelect (design/forms.py). */
.sg-selw{ position:relative; display:inline-block; min-width:180px; vertical-align:top; box-sizing:border-box; }
.sg-selw *{ box-sizing:border-box; }

/* ── trigger (field, secondary-button feel) ── */
.sg-sel{
  --_h:var(--control-h); --hue:var(--primary); --on:var(--on-primary);
  position:relative; isolation:isolate; width:100%;
  display:inline-flex; align-items:center; gap:var(--control-gap);
  height:var(--_h); padding:0 var(--control-pad-x);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs); cursor:pointer; user-select:none; text-align:left;
  font-family:var(--font-display); font-size:var(--control-font); font-weight:var(--weight-medium);
  line-height:1; letter-spacing:var(--tracking-tight);
  -webkit-tap-highlight-color:transparent;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-spring);
}
.sg-sel:hover:not(:disabled){ border-color:var(--gray-400); background:var(--surface-hover); }
.sg-sel:focus-visible{ outline:none; border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
.sg-sel.is-open{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
.sg-sel.is-error{ border-color:var(--negative); }
.sg-sel.is-error.is-open, .sg-sel.is-error:focus-visible{ box-shadow:0 0 0 var(--ring-width) var(--ring-error); }
.sg-sel:disabled{ cursor:not-allowed; opacity:.55; background:var(--surface-sunken); color:var(--text-disabled); box-shadow:none; }
.sg-sel:active:not(:disabled){ transform:translateY(.5px) scale(.99); }
.sg-sel.is-open{ animation-play-state:paused !important; }
.sg-sel--sm{ --_h:var(--control-h-sm); font-size:var(--text-sm); padding:0 var(--control-pad-x-sm); }
.sg-sel--lg{ --_h:var(--control-h-lg); font-size:var(--text-md); }

.sg-sel__ic{ color:var(--text-subtle); flex:none; display:flex; position:relative; z-index:2; }
.sg-sel__lbl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative; z-index:2; }
.sg-sel.is-placeholder .sg-sel__lbl{ color:var(--text-subtle); }
.sg-sel__chev{ flex:none; color:var(--text-subtle); display:flex; position:relative; z-index:2;
  transition:transform var(--duration-base) var(--ease-emphasized); }
.sg-sel.is-open .sg-sel__chev{ transform:rotate(180deg); }

/* ── menu (listbox) ── */
.sg-sel-menu{
  position:absolute; top:calc(100% + 6px); left:0; width:100%; min-width:max-content;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:4px; margin:0; list-style:none; z-index:60;
  max-height:288px; overflow-y:auto; overscroll-behavior:contain;
  transform-origin:top center;
  scrollbar-width:none;
}
.sg-sel-menu::-webkit-scrollbar{ width:0; height:0; display:none; }
.sg-sel-menu.is-up{ top:auto; bottom:calc(100% + 6px); transform-origin:bottom center; }
/* ── 10 aberturas do menu (formato do collapse / animação dos options) ── */
@scope ([data-menu="plain"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-fade var(--duration-base) var(--ease-out); } }
@scope ([data-menu="slide"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-rise var(--duration-base) var(--ease-out); } }
@scope ([data-menu="divided"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-drop var(--duration-base) var(--ease-out); } }
@scope ([data-menu="cards"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-scale var(--duration-base) var(--ease-out); } }
@scope ([data-menu="underline"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-unfold var(--duration-base) var(--ease-emphasized); } }
@scope ([data-menu="zebra"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-clip var(--duration-base) var(--ease-emphasized); } }
@scope ([data-menu="lift"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-flip var(--duration-base) var(--ease-out); } }
@scope ([data-menu="accent"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-slide var(--duration-base) var(--ease-out); } }
@scope ([data-menu="pill"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-spring var(--sg-selectmenu-t-440) cubic-bezier(.34,1.56,.64,1); } }
@scope ([data-menu="mono"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/{ animation:sgsel-m-fade var(--duration-fast) var(--ease-out); } }
@scope ([data-menu="mono"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu · abertura*/ .sg-sel-opt{ opacity:0; animation:sgsel-m-item var(--duration-base) var(--ease-out) both; animation-delay:calc(var(--i,0) * var(--sg-selectmenu-t-26)); } }
@keyframes sgsel-m-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sgsel-m-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes sgsel-m-drop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@keyframes sgsel-m-scale{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }
@keyframes sgsel-m-unfold{ from{ opacity:0; transform:scaleY(.4); } to{ opacity:1; transform:scaleY(1); } }
@keyframes sgsel-m-clip{ from{ clip-path:inset(0 0 100% 0); opacity:.5; } to{ clip-path:inset(0 0 0 0); opacity:1; } }
@keyframes sgsel-m-flip{ from{ opacity:0; transform:perspective(620px) rotateX(-14deg); } to{ opacity:1; transform:perspective(620px) rotateX(0); } }
@keyframes sgsel-m-slide{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@keyframes sgsel-m-spring{ 0%{ opacity:0; transform:scale(.9); } 60%{ transform:scale(1.02); } 100%{ opacity:1; transform:scale(1); } }
@keyframes sgsel-m-item{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
.sg-sel-opt{
  position:relative;
  display:flex; align-items:center; gap:8px; height:var(--control-h-sm);
  padding:0 8px 0 10px; border-radius:var(--radius-sm);
  font-size:var(--text-sm); color:var(--text); cursor:pointer;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.sg-sel-opt__ic{ color:var(--text-subtle); flex:none; display:flex; }
.sg-sel-opt__lbl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sg-sel-opt__chk{ flex:none; color:var(--primary); opacity:0; display:flex; }
.sg-sel-opt.is-active{ background:var(--surface-hover); }
.sg-sel-opt.is-selected{ color:var(--primary-text); font-weight:var(--weight-medium); }
.sg-sel-opt.is-selected .sg-sel-opt__ic{ color:var(--primary); }
.sg-sel-opt.is-selected .sg-sel-opt__chk{ opacity:1; }
.sg-sel-opt.is-selected.is-active{ background:var(--primary-bg); }
.sg-sel-opt.is-disabled{ color:var(--text-disabled); cursor:not-allowed; }
.sg-sel-opt.is-disabled .sg-sel-opt__ic{ color:var(--text-disabled); }
.sg-sel-empty{ padding:10px 12px; color:var(--text-subtle); font-size:var(--text-sm); }

/* ── campo de busca (searchable) + caixa de múltipla seleção (multiple) ── */
.sg-sel-search{ position:sticky; top:0; z-index:2; padding:1px 1px 6px; background:var(--surface); }
.sg-sel-search input{ width:100%; box-sizing:border-box; height:var(--control-h-sm); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font:inherit; font-size:var(--text-sm);
  padding:0 9px; outline:none; }
.sg-sel-search input::placeholder{ color:var(--text-subtle); }
.sg-sel-search input:focus{ border-color:var(--border-focus); box-shadow:0 0 0 var(--ring-width) var(--ring); }
.sg-sel-opt__box{ flex:none; width:16px; height:16px; border:1.5px solid var(--border-strong); border-radius:var(--radius-xs,var(--sg-selectmenu-r-4));
  display:grid; place-items:center; color:var(--on-primary); transition:background-color var(--duration-fast), border-color var(--duration-fast); }
.sg-sel-opt__box svg{ opacity:0; }
.sg-sel-opt.is-selected .sg-sel-opt__box{ background:var(--primary); border-color:var(--primary); }
.sg-sel-opt.is-selected .sg-sel-opt__box svg{ opacity:1; }

/* ════════ formatos da caixa de múltipla seleção (checkbox) — pareados com os botões ════════ */
.sg-sel-opt__box{ position:relative; }
.sg-sel-opt__box svg{ position:relative; z-index:2; }

/* 02 · órbita — facho gira em volta da caixa redonda no hover */
@scope ([data-checkbox-format="orbit"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box{ border-radius:50%; overflow:visible; background:var(--surface); } }
@scope ([data-checkbox-format="orbit"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box::before{ content:""; position:absolute; inset:-3px; z-index:-1; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 55%, color-mix(in srgb,var(--primary) 45%,white) 78%, color-mix(in srgb,var(--primary) 90%,white) 88%, transparent 97%);
  opacity:0; animation:sgcb-orbit 2.4s linear infinite; animation-play-state:paused; transition:opacity var(--duration-base) var(--ease-standard); } }
@scope ([data-checkbox-format="orbit"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-active .sg-sel-opt__box::before{ opacity:1; animation-play-state:running; } }
@keyframes sgcb-orbit{ to{ transform:rotate(360deg); } }

/* 03 · splash — a caixa vira líquida e flui; acelera no hover */
@scope ([data-checkbox-format="splash"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box{ animation:sgcb-flow 6s cubic-bezier(.45,0,.55,1) infinite; } }
@scope ([data-checkbox-format="splash"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt:nth-child(2n) .sg-sel-opt__box{ animation-delay:-2s; } }
@scope ([data-checkbox-format="splash"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt:nth-child(3n) .sg-sel-opt__box{ animation-delay:-4s; } }
@scope ([data-checkbox-format="splash"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-active .sg-sel-opt__box{ animation-duration:var(--sg-selectmenu-t-2200); } }
@keyframes sgcb-flow{ 0%,100%{ border-radius:58% 42% 52% 48% / 56% 60% 40% 44%; } 25%{ border-radius:46% 54% 60% 40% / 44% 48% 52% 56%; } 50%{ border-radius:60% 40% 44% 56% / 58% 42% 58% 42%; } 75%{ border-radius:42% 58% 56% 44% / 46% 60% 40% 54%; } }

/* 04 · jelly — gelatina: estica e comprime; pula no hover */
@scope ([data-checkbox-format="jelly"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box{ border-radius:var(--radius-sm); transform-origin:center bottom; animation:sgcb-idle 3.2s var(--ease-in-out) infinite; } }
@scope ([data-checkbox-format="jelly"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt:nth-child(2n) .sg-sel-opt__box{ animation-delay:-1.1s; } }
@scope ([data-checkbox-format="jelly"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt:nth-child(3n) .sg-sel-opt__box{ animation-delay:-2.1s; } }
@keyframes sgcb-idle{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.05,.92); } }
@scope ([data-checkbox-format="jelly"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-active .sg-sel-opt__box{ animation:sgcb-jiggle var(--sg-selectmenu-t-600) var(--ease-spring); } }
@keyframes sgcb-jiggle{ 0%{ transform:scale(1,1); } 22%{ transform:scale(1.18,.8); } 45%{ transform:scale(.86,1.16); } 68%{ transform:scale(1.08,.94); } 100%{ transform:scale(1,1); } }

/* 05 · holofote — luz suave surge em volta da caixa no hover */
@scope ([data-checkbox-format="spotlight"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt{ isolation:isolate; overflow:hidden; } }
@scope ([data-checkbox-format="spotlight"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt > *{ position:relative; z-index:1; } }
@scope ([data-checkbox-format="spotlight"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(90px circle at 17px 50%, color-mix(in srgb,var(--primary) 22%,transparent), transparent 62%);
  transition:opacity var(--duration-base) var(--ease-standard); } }
@scope ([data-checkbox-format="spotlight"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-active::after{ opacity:1; } }

/* 06 · preenche — a cor cresce em círculo a partir do centro */
@scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box{ overflow:hidden; } }
@scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-selected .sg-sel-opt__box{ background:var(--surface); border-color:var(--primary); } }
@scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--primary); border-radius:50%; transform:scale(0); transition:transform var(--sg-selectmenu-t-400) var(--ease-emphasized), border-radius var(--sg-selectmenu-t-400) var(--ease-emphasized); } }
@scope ([data-checkbox-format="fill"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-selected .sg-sel-opt__box::before{ transform:scale(1.9); border-radius:0; } }

/* 07 · onda — um anel suave emana ao marcar */
@scope ([data-checkbox-format="wave"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box{ overflow:visible; } }
@scope ([data-checkbox-format="wave"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-selected .sg-sel-opt__box::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; border:2px solid var(--primary); animation:sgcb-ring var(--sg-selectmenu-t-650) var(--ease-out); pointer-events:none; } }
@keyframes sgcb-ring{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.9); opacity:0; } }

/* 08 · bolhas — bolhas sobem da caixa redonda enquanto marcada */
@scope ([data-checkbox-format="bubbles"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box{ border-radius:50%; overflow:visible; } }
@scope ([data-checkbox-format="bubbles"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-selected .sg-sel-opt__box::before,
.sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-selected .sg-sel-opt__box::after{ content:""; position:absolute; left:50%; bottom:5px; width:4.5px; height:4.5px; border-radius:50%; background:color-mix(in srgb,var(--primary) 70%,white); z-index:3; pointer-events:none; animation:sgcb-bub 1.7s var(--ease-out) infinite; } }
@scope ([data-checkbox-format="bubbles"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-selected .sg-sel-opt__box::after{ left:34%; width:3px; height:3px; animation-delay:-.85s; } }
@keyframes sgcb-bub{ 0%{ transform:translate(-50%,0) scale(.4); opacity:0; } 20%{ opacity:.9; } 80%{ opacity:.4; } 100%{ transform:translate(-50%,-18px) scale(1); opacity:0; } }

/* 09 · gel — blob gelatinoso com brilho que ondula */
@scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box{ animation:sgcb-goo 4.6s var(--ease-in-out) infinite; overflow:hidden; box-shadow:var(--shadow-xs); } }
@scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt:nth-child(2n) .sg-sel-opt__box{ animation-delay:-1.5s; } }
@scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt:nth-child(3n) .sg-sel-opt__box{ animation-delay:-3s; } }
@scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt__box::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%); } }
@scope ([data-checkbox-format="gel"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-active .sg-sel-opt__box{ animation-duration:var(--sg-selectmenu-t-2000); } }
@keyframes sgcb-goo{ 0%,100%{ border-radius:46% 54% 56% 44% / 54% 46% 54% 46%; } 25%{ border-radius:57% 43% 47% 53% / 45% 57% 43% 55%; } 50%{ border-radius:43% 57% 53% 47% / 57% 43% 57% 43%; } 75%{ border-radius:53% 47% 43% 57% / 47% 53% 47% 53%; } }

/* 10 · pulso — respira e brilha; a marca balança */
@scope ([data-checkbox-format="pulse"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-selected .sg-sel-opt__box{ animation:sgcb-breath 2.6s var(--ease-in-out) infinite; } }
@scope ([data-checkbox-format="pulse"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt:nth-child(2n).is-selected .sg-sel-opt__box{ animation-delay:-1.1s; } }
@keyframes sgcb-breath{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent); transform:scale(1); } 50%{ box-shadow:0 0 12px 1px color-mix(in srgb,var(--primary) 45%,transparent); transform:scale(1.08); } }
@scope ([data-checkbox-format="pulse"]) to ([data-checkbox-format]) { .sg-sel-menu.sg-sel-menu/*data-checkbox-format*/ .sg-sel-opt.is-selected .sg-sel-opt__box svg{ animation:sgcb-bob 2.6s var(--ease-in-out) infinite; } }
@keyframes sgcb-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-1.5px); } }

/* ════════ designs da lista de options (menuVariant) ════════ */
/* divididas — separadores hairline + scrollbar fina */
@scope ([data-menu="divided"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt{ border-radius:0; border-bottom:1px solid var(--border-subtle); } }
@scope ([data-menu="divided"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt:last-child{ border-bottom:0; } }
/* cartões — cada item um cartão com borda */
@scope ([data-menu="cards"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt{ height:auto; padding:8px 10px; margin-bottom:5px; border:1px solid var(--border); border-radius:var(--radius-md); } }
@scope ([data-menu="cards"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt:last-child{ margin-bottom:0; } }
@scope ([data-menu="cards"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active{ border-color:var(--border-focus); background:var(--surface-hover); } }
@scope ([data-menu="cards"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-selected{ border-color:var(--primary-border); background:var(--primary-bg); } }
/* acento — barra que cresce à esquerda */
@scope ([data-menu="accent"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt{ padding-left:15px; } }
@scope ([data-menu="accent"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt::before{ content:""; position:absolute; left:5px; top:50%; transform:translateY(-50%); width:3px; height:0; border-radius:99px; background:var(--primary); transition:height var(--duration-fast) var(--ease-standard); } }
@scope ([data-menu="accent"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active::before{ height:58%; } }
@scope ([data-menu="accent"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-selected::before{ height:72%; } }
/* deslize — item e ícone deslizam no hover */
@scope ([data-menu="slide"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt__ic{ transition:transform var(--duration-fast) var(--ease-standard); } }
@scope ([data-menu="slide"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active{ transform:translateX(5px); } }
@scope ([data-menu="slide"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active .sg-sel-opt__ic{ transform:translateX(2px); color:var(--primary); } }
/* zebra — linhas alternadas + scrollbar larga */
@scope ([data-menu="zebra"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt{ border-radius:0; } }
@scope ([data-menu="zebra"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt:nth-child(even){ background:color-mix(in srgb, var(--surface-sunken) 55%, var(--surface)); } }
@scope ([data-menu="zebra"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active{ background:var(--surface-hover); } }
/* pílula — realce arredondado tingido */
@scope ([data-menu="pill"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt{ border-radius:var(--radius-full); } }
@scope ([data-menu="pill"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active{ background:var(--primary-bg); color:var(--primary-text); } }
@scope ([data-menu="pill"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active .sg-sel-opt__ic{ color:var(--primary); } }
/* mono — rótulos monoespaçados, tracking */
@scope ([data-menu="mono"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt__lbl{ font-family:var(--font-mono); font-size:12px; letter-spacing:.01em; } }
/* elevar — item eleva com sombra no hover */
@scope ([data-menu="lift"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active{ background:var(--surface); transform:translateY(-1px); box-shadow:var(--shadow-sm); z-index:1; } }
@scope ([data-menu="lift"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-selected.is-active{ background:var(--primary-bg); } }
/* sublinhado — linha cresce sob o rótulo */
@scope ([data-menu="underline"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active{ background:transparent; } }
@scope ([data-menu="underline"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt__lbl{ position:relative; } }
@scope ([data-menu="underline"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt__lbl::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--primary); transition:width var(--duration-fast) var(--ease-standard); } }
@scope ([data-menu="underline"]) to ([data-menu]) { .sg-sel-menu.sg-sel-menu/*data-menu*/ .sg-sel-opt.is-active .sg-sel-opt__lbl::after{ width:100%; } }

/* ════════ 01 · default — sem efeito (base) ════════ */

/* ════════ 02 · orbit — facho gira só no hover (pílula) ════════ */
@scope ([data-select-fx="orbit"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/{ border-radius:var(--radius-full); padding:0 18px; overflow:hidden; } }
@scope ([data-select-fx="orbit"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:conic-gradient(from 0deg, transparent 0 54%, color-mix(in srgb,var(--hue) 45%,white) 76%, color-mix(in srgb,var(--hue) 85%,white) 86%, transparent 96%);
  opacity:0; animation:sgsel-rot 2.6s linear infinite; animation-play-state:paused;
  transition:opacity var(--duration-base) var(--ease-standard); } }
@scope ([data-select-fx="orbit"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/::after{ content:""; position:absolute; inset:1.8px; z-index:1; border-radius:inherit;
  background:var(--surface); transition:background-color var(--duration-fast) var(--ease-standard); } }
@scope ([data-select-fx="orbit"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled){ background:var(--surface); border-color:transparent;
  transform:translateY(-1px); box-shadow:0 0 18px color-mix(in srgb,var(--hue) 38%,transparent); } }
@scope ([data-select-fx="orbit"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled)::after{ background:var(--surface-hover); } }
@scope ([data-select-fx="orbit"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled)::before{ opacity:1; animation-play-state:running; } }
@keyframes sgsel-rot{ to{ transform:rotate(360deg); } }

/* ════════ 03 · splash — forma flui o tempo todo ════════ */
@scope ([data-select-fx="splash"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/{ animation:sgsel-flow 7s cubic-bezier(.45,0,.55,1) infinite;
  transition:transform var(--sg-selectmenu-t-550) cubic-bezier(.34,1.3,.5,1), background-color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } }
@scope ([data-select-fx="splash"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled){ transform:scale(1.02); } }
@keyframes sgsel-flow{
  0%,100%{ border-radius:58% 42% 52% 48% / 56% 60% 40% 44%; }
  20%{ border-radius:46% 54% 60% 40% / 44% 48% 52% 56%; }
  40%{ border-radius:60% 40% 44% 56% / 58% 42% 58% 42%; }
  60%{ border-radius:42% 58% 56% 44% / 46% 60% 40% 54%; }
  80%{ border-radius:54% 46% 48% 52% / 52% 44% 56% 48%; } }

/* ════════ 04 · jelly — gelatina (squash & stretch) ════════ */
@scope ([data-select-fx="jelly"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/{ border-radius:var(--radius-lg); transform-origin:center bottom; animation:sgsel-idle 3.2s var(--ease-in-out) infinite; } }
@keyframes sgsel-idle{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.02,.97); } }
@scope ([data-select-fx="jelly"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled){ animation:sgsel-jig var(--sg-selectmenu-t-650) var(--ease-spring); } }
@keyframes sgsel-jig{ 0%{ transform:scale(1,1); } 22%{ transform:scale(1.1,.88); } 45%{ transform:scale(.93,1.09); } 68%{ transform:scale(1.04,.97); } 100%{ transform:scale(1,1); } }
@scope ([data-select-fx="jelly"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:active:not(:disabled){ animation:none; transform:scale(.9,1.1); } }

/* ════════ 05 · spotlight — luz segue o cursor (hover) ════════ */
@scope ([data-select-fx="spotlight"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/{ overflow:hidden; --spot:color-mix(in srgb, var(--primary) 22%, transparent);
  transition:transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-standard),
             background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } }
@scope ([data-select-fx="spotlight"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 60%);
  transition:opacity var(--duration-base) var(--ease-standard); } }
@scope ([data-select-fx="spotlight"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled)::before{ opacity:1; } }
@scope ([data-select-fx="spotlight"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled){ transform:translateY(-1px); box-shadow:var(--shadow-md); } }

/* ════════ 06 · fill — cor cresce a partir do cursor ════════ */
@scope ([data-select-fx="fill"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/{ overflow:hidden; --fill:var(--primary);
  transition:color var(--duration-base) var(--ease-standard) var(--sg-selectmenu-t-50), border-color var(--duration-fast) var(--ease-standard); } }
@scope ([data-select-fx="fill"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/::before{ content:""; position:absolute; left:var(--mx,50%); top:var(--my,50%); width:0; height:0; z-index:0;
  border-radius:50%; transform:translate(-50%,-50%); background:var(--fill); pointer-events:none;
  transition:width var(--sg-selectmenu-t-550) var(--ease-emphasized), height var(--sg-selectmenu-t-550) var(--ease-emphasized); } }
@scope ([data-select-fx="fill"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled)::before{ width:620px; height:620px; } }
@scope ([data-select-fx="fill"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled){ color:var(--on-primary); border-color:var(--primary); background:var(--surface); } }
@scope ([data-select-fx="fill"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled) .sg-sel__ic,
.sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled) .sg-sel__chev{ color:var(--on-primary); } }
@scope ([data-select-fx="fill"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/.is-placeholder:hover:not(:disabled) .sg-sel__lbl{ color:color-mix(in srgb,var(--on-primary) 78%,transparent); } }

/* ════════ 07 · sonar — anéis emanam em volta ════════ */
@scope ([data-select-fx="sonar"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/::before, .sg-sel.sg-sel/*data-select-fx*/::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  border:1.5px solid var(--hue); opacity:0; animation:sgsel-wave 3.6s var(--ease-out) infinite; pointer-events:none; } }
@scope ([data-select-fx="sonar"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/::after{ animation-delay:var(--sg-selectmenu-t-1800); } }
@keyframes sgsel-wave{ 0%{ transform:scale(1); opacity:.26; } 100%{ transform:scale(1.14); opacity:0; } }
@scope ([data-select-fx="sonar"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled)::before, .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled)::after{ animation-duration:var(--sg-selectmenu-t-1800); } }
@scope ([data-select-fx="sonar"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled){ transform:translateY(-1px); } }

/* ════════ 08 · bubbles — bolhas sobem (pílula) ════════ */
@scope ([data-select-fx="bubbles"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/{ border-radius:var(--radius-full); padding:0 18px; overflow:hidden;
  --bub:color-mix(in srgb, var(--primary) 55%, var(--surface)); } }
@scope ([data-select-fx="bubbles"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/ .sg-bub{ position:absolute; bottom:-6px; border-radius:50%; background:var(--bub); z-index:0;
  pointer-events:none; opacity:0; animation:sgsel-bub var(--_d,2200ms) linear var(--_dl,0ms) infinite; } }
@keyframes sgsel-bub{ 0%{ transform:translateY(6px) scale(.5); opacity:0; } 16%{ opacity:.85; } 75%{ opacity:.45; } 100%{ transform:translateY(-40px) scale(1.05); opacity:0; } }

/* ════════ 09 · gel — blob gelatinoso com brilho ════════ */
@scope ([data-select-fx="gel"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/{ animation:sgsel-goo 4.6s var(--ease-in-out) infinite; box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-base) var(--ease-spring); } }
@scope ([data-select-fx="gel"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%); } }
@scope ([data-select-fx="gel"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled){ animation-duration:var(--sg-selectmenu-t-2000); transform:scale(1.02);
  box-shadow:var(--shadow-md), 0 0 18px color-mix(in srgb,var(--hue) 32%,transparent); } }
@keyframes sgsel-goo{
  0%,100%{ border-radius:46% 54% 56% 44% / 54% 46% 54% 46%; }
  25%{ border-radius:57% 43% 47% 53% / 45% 57% 43% 55%; }
  50%{ border-radius:43% 57% 53% 47% / 57% 43% 57% 43%; }
  75%{ border-radius:53% 47% 43% 57% / 47% 53% 47% 53%; } }

/* ════════ 10 · pulse — respira e brilha; chevron balança ════════ */
@scope ([data-select-fx="pulse"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/{ animation:sgsel-breath 2.8s var(--ease-in-out) infinite; } }
@keyframes sgsel-breath{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb,var(--hue) 0%,transparent); }
  50%{ transform:scale(1.02); box-shadow:0 0 14px 1px color-mix(in srgb,var(--hue) 35%,transparent); } }
@scope ([data-select-fx="pulse"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:not(.is-open) .sg-sel__chev{ animation:sgsel-bob 2.8s var(--ease-in-out) infinite; } }
@keyframes sgsel-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(2px); } }
@scope ([data-select-fx="pulse"]) to ([data-select-fx]) { .sg-sel.sg-sel/*data-select-fx*/:hover:not(:disabled){ animation:none; transform:scale(1.03);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--hue) 45%,transparent); } }