.sps{ position:relative; }
.sps > select{ position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; clip:rect(0 0 0 0); }
.sps-btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  font-family:var(--head,'Space Grotesk',system-ui,sans-serif); font-size:15px; color:var(--ink,#eaf2ff);
  background:rgba(8,11,24,.7); border:1px solid var(--line,rgba(180,200,255,.14)); border-radius:10px;
  padding:11px 14px; cursor:pointer; text-align:left; line-height:1.2;
  transition:border-color .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1), background .25s;
}
.sps-btn:hover{ border-color:rgba(122,248,255,.4); background:rgba(10,14,30,.8); }
.sps-btn:focus-visible{ outline:none; border-color:var(--cyan,#7af8ff); box-shadow:0 0 0 3px rgba(122,248,255,.15); }
.sps.is-open .sps-btn{ border-color:var(--cyan,#7af8ff); box-shadow:0 0 0 3px rgba(122,248,255,.15); background:rgba(10,14,30,.85); }
.sps-lbl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sps-chev{
  width:9px; height:9px; flex:none; margin-right:2px;
  border-right:2px solid var(--cyan,#7af8ff); border-bottom:2px solid var(--cyan,#7af8ff);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.sps.is-open .sps-chev{ transform:rotate(-135deg) translateY(-1px); }

.sps-panel{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 8px);
  background:linear-gradient(180deg,rgba(14,18,38,.98),rgba(8,11,24,.98));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(122,248,255,.22); border-radius:12px; padding:6px;
  max-height:min(320px,60vh); overflow:auto;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.85), 0 0 22px -10px rgba(122,248,255,.4);
  opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top center; pointer-events:none;
  transition:opacity .26s cubic-bezier(.22,.61,.36,1), transform .26s cubic-bezier(.22,.61,.36,1);
}
.sps-panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan,#7af8ff),var(--violet,#b48cff),transparent); opacity:.6;
}
.sps.is-open .sps-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.sps-opt{
  position:relative; padding:10px 12px 10px 34px; border-radius:8px;
  font-family:var(--head,'Space Grotesk',system-ui,sans-serif); font-size:14.5px; color:#c8d4ee;
  cursor:pointer; opacity:0; transform:translateX(-6px);
  transition:background .2s, color .2s;
}
.sps.is-open .sps-opt{ opacity:1; transform:none; transition:background .2s, color .2s, opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1); }
.sps.is-open .sps-opt:nth-child(1){ transition-delay:.02s }
.sps.is-open .sps-opt:nth-child(2){ transition-delay:.05s }
.sps.is-open .sps-opt:nth-child(3){ transition-delay:.08s }
.sps.is-open .sps-opt:nth-child(4){ transition-delay:.11s }
.sps.is-open .sps-opt:nth-child(5){ transition-delay:.14s }
.sps.is-open .sps-opt:nth-child(6){ transition-delay:.17s }
.sps.is-open .sps-opt:nth-child(7){ transition-delay:.20s }
.sps.is-open .sps-opt:nth-child(8){ transition-delay:.23s }
.sps-opt::before{
  content:""; position:absolute; left:13px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  border:1px solid rgba(122,248,255,.5); transition:background .2s, box-shadow .2s, border-color .2s;
}
.sps-opt:hover, .sps-opt.is-active{ background:rgba(122,248,255,.08); color:#eafdff; }
.sps-opt.is-active::before{ border-color:var(--cyan,#7af8ff); box-shadow:0 0 7px rgba(122,248,255,.5); }
.sps-opt.is-sel{ color:#eafdff; }
.sps-opt.is-sel::before{ background:linear-gradient(135deg,var(--cyan,#7af8ff),var(--violet,#b48cff)); border-color:transparent; box-shadow:0 0 9px var(--cyan,#7af8ff); }
.sps-opt[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }

@media (prefers-reduced-motion:reduce){
  .sps-panel, .sps-chev, .sps-opt, .sps-btn{ transition:none !important; }
  .sps.is-open .sps-opt{ transition-delay:0 !important; }
  .sps-opt{ opacity:1; transform:none; }
}