/* Groups preview. Keep the section order, columns and actions in place. */
.gp.gp-refined {
  --fg: #f7f4ff;
  --dim: #bbb2c9;
  --mute: #a298b0;
  --line: #ffffff1c;
  --line2: #ffffff10;
}
.gp-refined .back-link { color: #bdb3ce; background: #17131e; box-shadow: inset 0 0 0 1px #ffffff10; }
.gp-refined .back-link:hover { color: #fff; background: #241a33; }
.gp-refined .gp-eyebrow { color: #bda3df; font-size: .75rem; letter-spacing: .055em; }
.gp-refined .gp-title { font-size: 2.35rem; font-weight: 800; letter-spacing: -.045em; color: #faf7ff; }
.gp-refined .gp-sub { color: #bbb2c9; }

/* Verifier: a clear visual hierarchy within the original full-width panel. */
.gp-refined .gp-finder {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.25rem;
  background: radial-gradient(ellipse at 100% 0%, #713cb82b, transparent 58%), #17121f;
  border: 1px solid #9870c345;
  border-radius: 18px;
  box-shadow: inset 3px 0 #9f5aef, 0 12px 32px -24px #000;
}
.gp-refined .gp-finder::before {
  content: '';
  position: absolute;
  width: 230px;
  height: 230px;
  right: -100px;
  top: -150px;
  border: 1px solid #c797ff16;
  border-radius: 50%;
  box-shadow: 0 0 0 30px #c797ff07, 0 0 0 60px #c797ff05;
  pointer-events: none;
  z-index: -1;
}
.gp-refined .gp-finder .top { color: #b67aff; gap: .5rem; }
.gp-refined .gp-finder .top .mlab { color: #b9a0d8; font-size: .72rem; letter-spacing: .035em; }
.gp-refined .gp-finder h3 { color: #faf6ff; font-size: 1.35rem; line-height: 1.25; margin-top: .5rem; }
.gp-refined .gp-finder > p { color: #b3a9c0; font-size: .8rem; margin-top: .4rem; }
.gp-refined .search-box {
  margin-top: 1rem;
  background: #0d0a13;
  border: 1px solid #5b436f;
  border-radius: 11px;
  padding: .35rem .35rem .35rem 1rem;
  box-shadow: 0 2px 5px #0002;
}
.gp-refined .grp-lupa { color: #af9cc4; }
.gp-refined .search-box input::placeholder { color: #9d90af; }
.gp-refined .search-box input { min-height: 34px; }
.gp-refined .search-box:focus-within { border-color: #b879ff; box-shadow: 0 0 0 3px #ad65ff20; }
.gp-refined .search-box input:focus-visible { outline: none; box-shadow: none; }
.gp-refined .search-btn {
  padding: .65rem 1.45rem;
  border-radius: 8px;
  background: linear-gradient(110deg, #a04df2, #7e31dc);
  color: white;
  box-shadow: inset 0 1px #ffffff30, 0 4px 12px #6e27cb30;
}
.gp-refined .legend { border-color: #ffffff0b; gap: 1.25rem; margin-top: .9rem; padding-top: .85rem; }
.gp-refined .legend div { color: #b4a9c3; font-size: .72rem; gap: .4rem; }
.gp-refined .legend b { color: #f0e6fc; }
.gp-refined .legend .sq { width: 6px; height: 6px; border-radius: 50%; }
.gp-refined .mrow > .mlab { color: #ded4ed; font-size: .86rem; }
.gp-refined .mrow .line { background: linear-gradient(90deg, #ffffff1c, #ffffff04); }
.gp-refined #groupCount { color: #b6a8c6; }

/* Recognizable artwork and an open two-column stats strip. */
.gp-refined .gcard {
  background: #19141f;
  border: 1px solid #ffffff20;
  border-radius: 18px;
  box-shadow: 0 10px 28px -18px #000c, inset 0 1px #ffffff08;
  transition: border-color .2s, box-shadow .2s;
}
.gp-refined .gcard:hover {
  transform: none;
  border-color: #a963ee80;
  box-shadow: 0 12px 28px -18px #000, 0 0 0 1px #a963ee1c;
}
.gp-refined .gbanner { background: #251733; border-bottom: 1px solid #ffffff10; }
.gp-refined .gbanner img {
  filter: saturate(.85) brightness(.75);
  transform: none;
  object-position: center 42%;
  opacity: .85;
  transition: filter .2s;
}
.gp-refined .gbanner::after {
  background: linear-gradient(90deg, #17101fb3, #17101f00 70%), linear-gradient(0deg, #19141f, #19141f12 80%);
}
.gp-refined .gcard:hover .gbanner img { filter: saturate(1) brightness(.9); }
.gp-refined .gav {
  border: 3px solid #19141f;
  border-radius: 16px;
  background: #271b34;
  box-shadow: 0 0 0 1px #cb9cff45, 0 5px 12px #0005;
}
.gp-refined .gbody h3 { color: #faf6ff; font-size: 1.05rem; letter-spacing: -.02em; font-weight: 750; }
.gp-refined .gbody .chips { gap: .4rem; align-items: center; }
.gp-refined .chip { border-radius: 5px; font-size: .65rem; padding: .22rem .4rem; }
.gp-refined .chip.id { background: transparent; color: #a99bb7; font-size: .66rem; padding-left: 0; }
.gp-refined .chip.slow,
.gp-refined .chip.ver { border-radius: 50px; padding-inline: .5rem; }
.gp-refined .chip.slow { color: #edbc77; background: #e6a34b12; box-shadow: inset 0 0 0 1px #e6a34b24; }
.gp-refined .chip.ver { color: #9bc7ff; background: #6ea6ed12; box-shadow: inset 0 0 0 1px #6ea6ed29; }
.gp-refined .chip.slow::before,
.gp-refined .chip.ver::before { content: ''; width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: currentColor; }
.gp-refined .gmeta {
  gap: 0;
  padding: .95rem 0;
  border-top: 1px solid #ffffff0e;
  border-bottom: 1px solid #ffffff0e;
  margin-top: 1rem;
}
.gp-refined .gmeta div { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.gp-refined .gmeta > div { padding: .1rem .8rem .1rem .1rem; min-width: 0; }
.gp-refined .gmeta > div + div { padding-left: 1.15rem; border-left: 1px solid #ffffff14; }
.gp-refined .gmeta .v { color: #faf7ff; font-size: 1.85rem; font-weight: 800; line-height: 1.2; letter-spacing: -.045em; }
.gp-refined .gmeta .v.slow { color: #f0c68b; }
.gp-refined .gmeta .v.fast { color: #7cdeb2; }
.gp-refined .gmeta .k { color: #aa9eb9; font-size: .72rem; font-weight: 500; margin-top: .22rem; line-height: 1.5; }
.gp-refined .gjoin {
  position: relative;
  min-height: 42px;
  margin-top: 1rem;
  font-size: .85rem;
  font-weight: 700;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(105deg, #9d42f0, #792bd6);
  box-shadow: inset 0 1px #ffffff30, inset 0 0 0 1px #c082fb38, 0 4px 10px #6922b826;
}
.gp-refined .gjoin::after {
  content: '';
  position: absolute;
  right: 1rem;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid #ffffffa6;
  border-right: 1.5px solid #ffffffa6;
  transform: rotate(45deg);
}
.gp-refined .gjoin svg { opacity: .85; }
.gp-refined .search-btn:hover,
.gp-refined .gjoin:hover { transform: none; filter: brightness(1.12); }
.gp-refined .gcard.off:hover { border-color: var(--line); box-shadow: none; }

/* Related states and keyboard interaction use the same surfaces. */
.gp-refined .gsk,
.gp-refined .empty-state,
.gp-refined .result-header,
.gp-refined .result-card { background: #19141f; border-color: #ffffff20; border-radius: 14px; }
.gp-refined .result-card.eligible { background: #17251f; border-color: #5fb69250; }
.gp-refined .result-card.pending { background: #292018; border-color: #c89c4850; }
.gp-refined .result-card.not-member { border-color: #b86d6d40; }
.gp-refined :is(.search-btn, .gjoin, .back-link, .result-close):focus-visible { outline: 2px solid #ca9bff; outline-offset: 3px; }
@media (max-width: 768px) {
  .gp-refined .gp-title { font-size: 2rem; }
  .gp-refined .gp-finder { padding: 1rem; }
  .gp-refined .gp-finder h3 { font-size: 1.2rem; }
  .gp-refined .search-btn { padding-inline: 1rem; }
  .gp-refined .legend { gap: .7rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-refined :is(.gcard, .gbanner img, .search-btn, .gjoin) { transition: none; }
}