:root{
  --bg:#080711; --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.1);
  --txt:#f0f1ff; --muted:#9aa0b5; --acc:#7c5cff; --acc2:#00e5ff; --ok:#2ef2a0;
  --r:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  min-height:100vh;display:grid;place-items:center;padding:50px 18px;overflow-x:hidden}
.bg-glow{position:fixed;inset:0;background:
  radial-gradient(600px 340px at 15% 10%, rgba(124,92,255,.35), transparent 65%),
  radial-gradient(520px 320px at 85% 85%, rgba(0,229,255,.25), transparent 65%);
  animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.15) translateY(-30px)}}

.wrap{position:relative;width:min(760px,100%)}
.head{text-align:center;margin-bottom:32px;animation:up .7s cubic-bezier(.2,.8,.2,1) both}
.pill{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc2);
  border:1px solid var(--line);padding:7px 15px;border-radius:99px;background:var(--card)}
h1{font-size:clamp(32px,6.5vw,50px);margin:16px 0 8px;letter-spacing:-.02em}
h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:var(--muted);font-size:15px}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;animation:up .7s .1s cubic-bezier(.2,.8,.2,1) both}
.field{position:relative}
.field label{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.select{display:flex;align-items:center;gap:11px;padding:15px 16px;border-radius:16px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);backdrop-filter:blur(14px);transition:.3s;user-select:none}
.select:hover{border-color:rgba(124,92,255,.6);transform:translateY(-2px)}
.select.open{border-color:var(--acc2);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.s-dot{width:12px;height:12px;border-radius:50%;background:var(--c,#7c5cff);box-shadow:0 0 12px var(--c,#7c5cff);transition:.3s}
.s-val{flex:1;font-size:15.5px;font-weight:500}
.chev{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;transition:.35s cubic-bezier(.34,1.56,.64,1)}
.select.open .chev{transform:rotate(180deg);stroke:var(--acc2)}

.menu{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:20;list-style:none;
  background:rgba(16,15,30,.92);border:1px solid var(--line);border-radius:18px;padding:10px;
  backdrop-filter:blur(20px);box-shadow:0 26px 60px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-12px) scale(.97);transform-origin:top;
  transition:.3s cubic-bezier(.2,.8,.2,1);max-height:290px;overflow:auto}
.field.open .menu{opacity:1;visibility:visible;transform:none}
.menu .search{padding:4px 4px 9px;position:sticky;top:-10px;background:rgba(16,15,30,.98);z-index:2}
.menu .search input{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--txt);font-family:inherit;font-size:14px;outline:none;transition:.25s}
.menu .search input:focus{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(0,229,255,.15)}
.menu li[role=option]{padding:11px 13px;border-radius:11px;font-size:14.5px;cursor:pointer;
  display:flex;align-items:center;gap:10px;transition:.2s;animation:pop .3s both}
.menu li[role=option]:hover,.menu li.hover{background:rgba(124,92,255,.22);transform:translateX(4px)}
.menu li[role=option].active{background:linear-gradient(90deg,rgba(124,92,255,.35),rgba(0,229,255,.14));
  color:#fff;font-weight:600}
.menu li[role=option]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc2);opacity:.5}
.menu li.active::before{background:var(--ok);opacity:1;box-shadow:0 0 8px var(--ok)}
.menu .empty{display:none;padding:14px;color:var(--muted);font-size:14px;text-align:center}
.menu .empty.show{display:block}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.result{margin-top:22px;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:20px;
  background:var(--card);border:1px solid var(--line);backdrop-filter:blur(16px);
  animation:up .7s .2s cubic-bezier(.2,.8,.2,1) both;flex-wrap:wrap}
.avatar{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:700;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#08070f;transition:.4s}
.avatar + .avatar{margin-left:-24px;background:linear-gradient(135deg,var(--acc2),var(--ok))}
.txt{flex:1;min-width:180px}
.txt strong{display:block;font-size:16px}
.txt small{color:var(--muted);font-size:12.5px}
.cta{padding:13px 24px;border:none;border-radius:14px;font-family:inherit;font-weight:600;font-size:14.5px;
  color:#08070f;background:linear-gradient(90deg,var(--acc),var(--acc2));cursor:pointer;
  transition:.3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 12px 30px rgba(124,92,255,.4)}
.cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 40px rgba(124,92,255,.55)}
.cta:active{transform:scale(.97)}

@media (max-width:720px){.grid{grid-template-columns:1fr}.result{gap:11px}.cta{width:100%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}