/* HELPER Server Directory — dashboard experience v4 */

.sdx-page-root {
  color-scheme: dark;
}

.sdx-shell {
  --sdx-bg: #02050d;
  --sdx-panel: rgba(7, 15, 30, .84);
  --sdx-panel-strong: rgba(4, 10, 22, .96);
  --sdx-line: rgba(67, 221, 255, .24);
  --sdx-cyan: #2ce4ff;
  --sdx-blue: #3f8dff;
  --sdx-violet: #8a53ff;
  --sdx-pink: #ff52cf;
  --sdx-green: #26e7aa;
  --sdx-gold: #ffc65d;
  --sdx-text: #f7faff;
  --sdx-muted: #91a0b7;
  position: relative;
  isolation: isolate;
  width: min(1520px, calc(100vw - 56px));
  margin: 0 auto;
  padding: 2rem 0 4.5rem;
  font-family: Inter, Manrope, "Segoe UI", Arial, sans-serif;
}

.sdx-shell *,
.sdx-shell *::before,
.sdx-shell *::after {
  box-sizing: border-box;
}

.sdx-shell svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sdx-shell :is(a, button, input, select):focus-visible {
  outline: 2px solid #63eaff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(68, 221, 255, .13), 0 0 24px rgba(71, 208, 255, .16);
}

.sdx-space {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 7%, rgba(26, 200, 255, .12), transparent 30rem),
    radial-gradient(circle at 12% 34%, rgba(121, 57, 255, .10), transparent 34rem),
    linear-gradient(135deg, #02050c, #030918 54%, #020711);
}

.sdx-grid-plane {
  position: absolute;
  inset: 36% -15% -35%;
  opacity: .17;
  background-image:
    linear-gradient(rgba(45, 226, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 226, 255, .12) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(650px) rotateX(66deg) translateY(12%);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 66%, transparent);
  animation: sdx-grid-drift 18s linear infinite;
}

.sdx-stars {
  position: absolute;
  inset: 0;
  opacity: .32;
  background:
    radial-gradient(circle at 12% 16%, rgba(52, 228, 255, .85) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 71%, rgba(122, 79, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 53% 24%, rgba(255, 255, 255, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 57%, rgba(39, 219, 255, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 33%, rgba(255, 84, 207, .9) 0 1px, transparent 2px);
  background-size: 390px 310px, 520px 460px, 650px 510px, 460px 390px, 710px 620px;
  animation: sdx-stars-float 22s linear infinite;
}

.sdx-orb {
  position: absolute;
  width: 36rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .11;
  animation: sdx-orb-float 14s ease-in-out infinite alternate;
}

.sdx-orb.is-one {
  top: 5%;
  right: -12rem;
  background: #17d5ff;
}

.sdx-orb.is-two {
  top: 34%;
  left: -15rem;
  background: #7a45ff;
  animation-delay: -4s;
}

.sdx-orb.is-three {
  right: 24%;
  bottom: -18rem;
  background: #ff3fd0;
  animation-delay: -8s;
}

.sdx-overview,
.sdx-console,
.sdx-card,
.sdx-empty {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.sdx-overview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .48fr);
  gap: 2rem;
  min-height: 310px;
  overflow: hidden;
  padding: 2.6rem 2.75rem;
  border: 1px solid rgba(55, 219, 255, .25);
  border-radius: 28px;
  background:
    linear-gradient(120deg, rgba(9, 19, 38, .96), rgba(4, 12, 27, .91) 56%, rgba(5, 22, 31, .88));
  box-shadow:
    0 38px 110px rgba(0, 0, 0, .38),
    inset 0 1px rgba(255, 255, 255, .03),
    0 0 46px rgba(40, 220, 255, .05);
}

.sdx-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .68;
  pointer-events: none;
  background:
    linear-gradient(132deg, transparent 0 58%, rgba(38, 218, 255, .24) 58.08%, transparent 58.34%),
    linear-gradient(152deg, transparent 0 72%, rgba(151, 73, 255, .18) 72.08%, transparent 72.33%);
}

.sdx-overview::after {
  content: "HELPER SYSTEM";
  position: absolute;
  top: 18%;
  right: 4%;
  color: transparent;
  font-size: clamp(5rem, 9vw, 9.5rem);
  font-weight: 800;
  letter-spacing: -.075em;
  -webkit-text-stroke: 1px rgba(89, 119, 255, .08);
  white-space: nowrap;
  pointer-events: none;
}

.sdx-overview-glow {
  position: absolute;
  inset: -30%;
  opacity: .48;
  pointer-events: none;
  background:
    conic-gradient(from 90deg at 76% 48%, transparent, rgba(47, 220, 255, .11), transparent 30%, rgba(145, 72, 255, .10), transparent 62%);
  animation: sdx-overview-spin 22s linear infinite;
}

.sdx-overview-main,
.sdx-overview-status {
  position: relative;
  z-index: 2;
}

.sdx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .52rem;
  min-height: 32px;
  padding: .4rem .72rem;
  border: 1px solid rgba(45, 227, 255, .25);
  border-radius: 999px;
  color: #8cefff;
  background: rgba(9, 67, 83, .18);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sdx-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sdx-green);
  box-shadow: 0 0 12px var(--sdx-green);
  animation: sdx-pulse 1.9s ease-in-out infinite;
}

.sdx-overview h1 {
  max-width: 820px;
  margin: 1rem 0 .7rem;
  color: #fff;
  font-size: clamp(3rem, 5.25vw, 5.35rem);
  line-height: .96;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.sdx-overview h1 span {
  color: transparent;
  background: linear-gradient(92deg, #31e7ff, #5294ff 44%, #a160ff 78%, #ff5acf);
  -webkit-background-clip: text;
  background-clip: text;
}

.sdx-overview-main > p {
  max-width: 760px;
  margin: 0;
  color: #a8b3c5;
  font-size: 1rem;
  line-height: 1.62;
}

.sdx-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.65rem;
  max-width: 790px;
}

.sdx-overview-stats > div {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 76px;
  padding: .95rem 1.05rem;
  border: 1px solid rgba(76, 119, 164, .20);
  border-radius: 15px;
  background: rgba(4, 12, 25, .65);
  box-shadow: inset 0 0 28px rgba(40, 221, 255, .025);
}

.sdx-overview-stats svg {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--sdx-cyan);
}

.sdx-overview-stats > div:nth-child(3) svg,
.sdx-overview-stats > div:nth-child(3) b {
  color: var(--sdx-pink);
}

.sdx-overview-stats span {
  display: grid;
  gap: .13rem;
}

.sdx-overview-stats b {
  color: #fff;
  font-size: 1.34rem;
  line-height: 1;
}

.sdx-overview-stats small {
  color: #718096;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sdx-overview-status {
  align-self: center;
  padding: 1.2rem;
  border: 1px solid rgba(49, 220, 255, .22);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(4, 17, 32, .86), rgba(3, 10, 22, .78));
  box-shadow:
    inset 0 0 32px rgba(43, 220, 255, .035),
    0 0 36px rgba(43, 220, 255, .045);
}

.sdx-status-head,
.sdx-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sdx-status-head {
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(83, 113, 148, .17);
  color: #91a0b6;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sdx-status-head b {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #76f4c7;
  font-size: .67rem;
}

.sdx-status-head b i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sdx-green);
  box-shadow: 0 0 12px var(--sdx-green);
}

.sdx-status-row {
  min-height: 46px;
  border-bottom: 1px solid rgba(83, 113, 148, .10);
  color: #9ca9bb;
  font-size: .71rem;
}

.sdx-status-row span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.sdx-status-row svg {
  color: var(--sdx-cyan);
}

.sdx-status-row b {
  color: #d5deeb;
  font-size: .68rem;
}

.sdx-status-wave {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 31px;
  margin-top: .8rem;
  overflow: hidden;
}

.sdx-status-wave i {
  flex: 1;
  min-width: 3px;
  height: 20%;
  border-radius: 4px;
  background: linear-gradient(to top, rgba(42, 228, 255, .22), rgba(42, 228, 255, .95));
  animation: sdx-wave 1.4s ease-in-out infinite alternate;
}

.sdx-status-wave i:nth-child(2) { animation-delay: -.2s; height: 62%; }
.sdx-status-wave i:nth-child(3) { animation-delay: -.45s; height: 35%; }
.sdx-status-wave i:nth-child(4) { animation-delay: -.7s; height: 78%; }
.sdx-status-wave i:nth-child(5) { animation-delay: -.25s; height: 48%; }
.sdx-status-wave i:nth-child(6) { animation-delay: -.9s; height: 88%; }
.sdx-status-wave i:nth-child(7) { animation-delay: -.55s; height: 54%; }
.sdx-status-wave i:nth-child(8) { animation-delay: -.12s; height: 72%; }
.sdx-status-wave i:nth-child(9) { animation-delay: -.78s; height: 30%; }

.sdx-console {
  position: sticky;
  z-index: 20;
  top: 12px;
  margin-top: 1.15rem;
  padding: .95rem;
  border: 1px solid rgba(67, 121, 166, .22);
  border-radius: 20px;
  background: rgba(4, 10, 21, .86);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

.sdx-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
}

.sdx-search label {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-height: 50px;
  padding: 0 .92rem;
  border: 1px solid rgba(87, 118, 157, .22);
  border-radius: 13px;
  color: #68778d;
  background: rgba(7, 13, 24, .92);
}

.sdx-search label:focus-within {
  border-color: rgba(46, 225, 255, .50);
  box-shadow: 0 0 0 3px rgba(46, 225, 255, .07);
}

.sdx-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: #eef5ff;
  background: transparent;
  font: inherit;
}

.sdx-search input::placeholder {
  color: #657286;
}

.sdx-search kbd {
  padding: .1rem .34rem;
  border: 1px solid rgba(105, 127, 158, .22);
  border-radius: 5px;
  color: #627088;
  background: rgba(255, 255, 255, .025);
  font-size: .65rem;
}

.sdx-search > button {
  min-width: 118px;
  border: 1px solid rgba(44, 225, 255, .44);
  border-radius: 13px;
  color: #04111d;
  background: linear-gradient(105deg, #28d9ef, #4b8eff);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(43, 219, 255, .13);
}

.sdx-console-row,
.sdx-sortbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sdx-console-row {
  margin-top: .78rem;
}

.sdx-categories,
.sdx-sortbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
}

.sdx-categories a,
.sdx-sortbar nav a {
  min-height: 31px;
  padding: .44rem .72rem;
  border: 1px solid rgba(91, 117, 151, .20);
  border-radius: 999px;
  color: #8794a9;
  background: rgba(10, 17, 28, .76);
  font-size: .67rem;
  font-weight: 800;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.sdx-categories a:hover,
.sdx-categories a.is-active,
.sdx-sortbar nav a:hover,
.sdx-sortbar nav a.is-active {
  transform: translateY(-1px);
  border-color: rgba(47, 227, 255, .48);
  color: #69edff;
  background: rgba(10, 84, 101, .20);
}

.sdx-result-count {
  flex: 0 0 auto;
  color: #647288;
  font-size: .67rem;
}

.sdx-result-count b {
  color: #dfe7f2;
}

.sdx-sortbar {
  margin-top: .78rem;
  padding-top: .78rem;
  border-top: 1px solid rgba(90, 117, 151, .15);
}

.sdx-sort-label {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: #65748a;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sdx-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin: 2rem 0 1rem;
}

.sdx-section-head > div > span {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  color: #68eaff;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sdx-section-head h2 {
  margin: .35rem 0 0;
  color: #f5f8ff;
  font-size: clamp(1.75rem, 2.8vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.sdx-section-head > p {
  max-width: 540px;
  margin: 0;
  color: #758398;
  font-size: .75rem;
  line-height: 1.45;
  text-align: right;
}

.sdx-section-head.is-compact {
  margin-top: 2.4rem;
}

.sdx-card {
  --mx: 50%;
  --my: 50%;
  --accent-rgb: 44, 228, 255;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .28);
  background: rgba(4, 10, 22, .90);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .30);
  isolation: isolate;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.sdx-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle 260px at var(--mx) var(--my), rgba(var(--accent-rgb), .16), transparent 68%);
  transition: opacity .2s ease;
}

.sdx-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .66);
  box-shadow:
    0 30px 75px rgba(0, 0, 0, .39),
    0 0 34px rgba(var(--accent-rgb), .10);
}

.sdx-card:hover::before {
  opacity: 1;
}

.sdx-card-cover {
  position: absolute;
  z-index: 4;
  inset: 0;
}

.sdx-card-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 46%, rgba(var(--accent-rgb), .13), transparent 27rem),
    linear-gradient(112deg, #030a17, #061127 54%, #080d20);
}

.sdx-card-bg > img,
.sdx-card-bg-icon {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  opacity: .24;
  filter: saturate(.85) contrast(1.09);
}

.sdx-card-bg-icon {
  background-position: 78% 50%;
  background-repeat: no-repeat;
  background-size: 40%;
  filter: blur(20px) saturate(1.24);
  transform: scale(1.18);
}

.sdx-card-bg-mono {
  position: absolute;
  right: 8%;
  top: 50%;
  color: rgba(255, 255, 255, .045);
  font-size: 8rem;
  font-weight: 800;
  transform: translateY(-50%);
}

.sdx-card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 7, 16, .98) 0%, rgba(2, 7, 16, .80) 36%, rgba(3, 7, 18, .42) 73%, rgba(2, 7, 16, .84) 100%),
    linear-gradient(180deg, transparent, rgba(1, 4, 12, .42));
}

.sdx-card-grid,
.sdx-card-beam,
.sdx-card-scan {
  position: absolute;
  pointer-events: none;
}

.sdx-card-grid {
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .09) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
}

.sdx-card-beam {
  inset: -55% -8%;
  opacity: .52;
  background:
    linear-gradient(136deg, transparent 0 53.8%, rgba(var(--accent-rgb), .42) 53.95%, transparent 54.25%);
}

.sdx-card-scan {
  z-index: 2;
  top: -20%;
  bottom: -20%;
  width: 18%;
  left: -26%;
  opacity: .10;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .54), transparent);
  transform: skewX(-18deg);
  animation: sdx-scan 7.5s ease-in-out infinite;
}

.sdx-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

.sdx-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 26px;
  padding: .33rem .58rem;
  border: 1px solid rgba(52, 223, 255, .34);
  border-radius: 7px;
  color: #75edff;
  background: rgba(13, 90, 111, .20);
  font-size: .59rem;
  font-weight: 800;
  letter-spacing: .015em;
  white-space: nowrap;
}

.sdx-badge svg {
  width: .85rem;
  height: .85rem;
}

.sdx-badge.is-owner {
  border-color: rgba(150, 100, 255, .40);
  color: #cfb2ff;
  background: rgba(75, 42, 135, .23);
}

.sdx-badge.is-warning {
  border-color: rgba(255, 186, 58, .40);
  color: #ffd378;
  background: rgba(94, 63, 7, .23);
}

.sdx-avatar-shell {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3px;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 1), #edf8ff 28%, #8752ff 68%, #ff53d0);
  box-shadow:
    0 0 24px rgba(var(--accent-rgb), .18),
    0 0 34px rgba(135, 82, 255, .12);
}

.sdx-avatar-shell img,
.sdx-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: calc(inherit - 3px);
  object-fit: cover;
  background: #040916;
}

.sdx-avatar-fallback {
  display: grid;
  place-items: center;
  color: #d8e9ff;
  font-size: 1.4rem;
  font-weight: 800;
}

.sdx-category {
  display: flex;
  flex-wrap: wrap;
  gap: .36rem;
}

.sdx-category .is-category {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 29px;
  padding: .32rem .56rem;
  border: 1px solid rgba(74, 184, 229, .28);
  border-radius: 999px;
  color: #a9dff2;
  background: linear-gradient(105deg, rgba(7, 27, 42, .76), rgba(22, 16, 50, .68));
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
}

.sdx-category-icon {
  display: grid;
  place-items: center;
  color: #54dcff;
}

.sdx-category-icon svg {
  width: .9rem;
  height: .9rem;
}

.sdx-metric,
.sdx-vote,
.sdx-vote button {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .58rem;
  min-height: 56px;
  margin: 0;
  padding: .72rem .85rem;
  border: 1px solid rgba(87, 119, 157, .21);
  border-radius: 12px;
  color: #aab6c7;
  background: rgba(3, 10, 22, .76);
  text-decoration: none;
}

form.sdx-vote {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sdx-vote button {
  width: 100%;
  cursor: pointer;
  font: inherit;
}

.sdx-metric svg {
  color: var(--sdx-cyan);
}

.sdx-vote svg,
.sdx-vote button svg {
  color: var(--sdx-pink);
  fill: currentColor;
  stroke: none;
}

.sdx-metric > span,
.sdx-vote > span,
.sdx-vote button > span {
  display: grid;
  gap: .14rem;
}

.sdx-metric b,
.sdx-vote b {
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}

.sdx-metric small,
.sdx-vote small {
  color: #6e7d92;
  font-size: .56rem;
  font-weight: 800;
}

.sdx-metric.is-compact,
.sdx-vote.is-compact,
.sdx-vote.is-compact button {
  min-height: 48px;
  padding: .58rem .68rem;
}

.sdx-open {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 56px;
  border: 1px solid rgba(80, 166, 214, .36);
  border-radius: 12px;
  color: #dcecff;
  background: linear-gradient(105deg, rgba(6, 19, 36, .92), rgba(18, 18, 48, .88));
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .16),
    inset 0 1px rgba(255, 255, 255, .07);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
}

.sdx-open svg {
  transition: transform .18s ease;
}

.sdx-open:hover {
  transform: translateY(-1px);
  border-color: rgba(82, 220, 255, .56);
  background: linear-gradient(105deg, rgba(9, 29, 49, .96), rgba(30, 24, 66, .92));
  box-shadow: 0 14px 30px rgba(0, 0, 0, .2), 0 0 20px rgba(69, 203, 255, .09);
}

.sdx-open:hover svg {
  transform: translateX(3px);
}

.sdx-open:active {
  transform: translateY(0);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.sdx-open.is-compact {
  min-height: 46px;
  font-size: .7rem;
}

.sdx-join-server {
  border-color: rgba(45, 224, 255, .56);
  background:
    linear-gradient(105deg, #12cce8, #347eea 56%, #7757f4);
  color: #fff;
  box-shadow:
    0 14px 32px rgba(42, 135, 235, .22),
    0 0 24px rgba(47, 220, 255, .13),
    inset 0 1px rgba(255, 255, 255, .22);
}

.sdx-join-server:hover {
  border-color: rgba(129, 242, 255, .82);
  background:
    linear-gradient(105deg, #1bd8ef, #438af4 56%, #875fff);
  filter: brightness(1.04) saturate(1.04);
  box-shadow:
    0 16px 36px rgba(42, 135, 235, .28),
    0 0 28px rgba(47, 220, 255, .18),
    inset 0 1px rgba(255, 255, 255, .24);
}

.sdx-join-server:active {
  filter: none;
  box-shadow: 0 8px 20px rgba(42, 135, 235, .16);
}

.sdx-open.is-icon {
  width: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 11px;
  background: rgba(7, 17, 32, .88);
}

.sdx-podium {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.sdx-card-first {
  --accent-rgb: 78, 197, 235;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 104px 200px minmax(0, 1fr) 240px;
  align-items: center;
  gap: 1.3rem;
  min-height: 300px;
  padding: 1.45rem;
  border-color: rgba(145, 126, 86, .34);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255, 210, 107, .035),
    0 0 36px rgba(78, 153, 255, .07),
    0 28px 70px rgba(0, 0, 0, .36);
}

.sdx-card-first::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 197, 82, .15), transparent 9%, transparent 91%, rgba(255, 197, 82, .06)),
    linear-gradient(180deg, rgba(255, 220, 140, .055), transparent 20%);
  opacity: .3;
}

.sdx-first-rank,
.sdx-first-avatar,
.sdx-first-content,
.sdx-first-stats {
  position: relative;
  z-index: 3;
}

.sdx-first-rank {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 138px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  border: 1px solid rgba(255, 198, 79, .42);
  color: #ffd66f;
  background: linear-gradient(180deg, rgba(81, 51, 8, .88), rgba(24, 15, 5, .94));
  box-shadow: inset 0 0 28px rgba(255, 191, 67, .08);
}

.sdx-first-rank svg {
  width: 1.55rem;
  height: 1.55rem;
}

.sdx-first-rank small {
  margin-top: .32rem;
  color: #9b7d45;
  font-size: .52rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.sdx-first-rank b {
  color: #ffe19a;
  font-size: 2.4rem;
  line-height: 1;
}

.sdx-first-avatar {
  width: 190px;
  height: 190px;
  border-radius: 32px;
}

.sdx-first-content {
  min-width: 0;
}

.sdx-first-content h2 {
  margin: .78rem 0 .55rem;
  font-size: clamp(2rem, 3.3vw, 3.7rem);
  line-height: .96;
  letter-spacing: -.055em;
}

.sdx-first-content h2 a {
  color: #fff4ce;
  text-decoration: none;
}

.sdx-first-content > p {
  display: -webkit-box;
  overflow: hidden;
  max-width: 760px;
  margin: 0 0 .9rem;
  color: #aeb7c7;
  font-size: .88rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sdx-first-stats {
  display: grid;
  gap: .62rem;
}

.sdx-card-podium {
  min-height: 218px;
  padding: 1rem;
  border-radius: 19px;
  display: grid;
  grid-template-columns: 72px 108px minmax(0, 1fr) 150px;
  align-items: center;
  gap: .85rem;
}

.sdx-card-podium.is-rank-2 {
  --accent-rgb: 63, 225, 255;
  border-color: rgba(63, 225, 255, .52);
}

.sdx-card-podium.is-rank-3 {
  --accent-rgb: 179, 103, 255;
  border-color: rgba(179, 103, 255, .46);
}

.sdx-card-podium:nth-child(2):last-child {
  grid-column: 1 / -1;
}

.sdx-podium-rank,
.sdx-card-podium > .sdx-avatar-shell,
.sdx-podium-content,
.sdx-podium-side {
  position: relative;
  z-index: 3;
}

.sdx-podium-rank {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 90px;
  border: 1px solid rgba(var(--accent-rgb), .32);
  border-radius: 14px;
  background: rgba(4, 11, 23, .74);
}

.sdx-podium-rank small {
  color: #738198;
  font-size: .5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sdx-podium-rank b {
  color: rgba(var(--accent-rgb), 1);
  font-size: 1.7rem;
}

.sdx-card-podium > .sdx-avatar-shell {
  width: 104px;
  height: 104px;
  border-radius: 22px;
}

.sdx-podium-content {
  min-width: 0;
}

.sdx-podium-content h3 {
  margin: .55rem 0 .4rem;
  font-size: 1.35rem;
  line-height: 1.05;
}

.sdx-podium-content h3 a {
  display: block;
  overflow: hidden;
  color: #f7f9ff;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdx-podium-content > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 .55rem;
  color: #94a0b2;
  font-size: .7rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sdx-podium-side {
  display: grid;
  gap: .48rem;
}

.sdx-list {
  display: grid;
  gap: .62rem;
}

.sdx-card-list {
  min-height: 118px;
  display: grid;
  grid-template-columns: 58px 78px minmax(0, 1fr) 270px 46px;
  align-items: center;
  gap: .85rem;
  padding: .75rem .85rem;
  border-radius: 16px;
}

.sdx-list-rank,
.sdx-card-list > .sdx-avatar-shell,
.sdx-list-main,
.sdx-list-metrics,
.sdx-card-list > .sdx-open {
  position: relative;
  z-index: 3;
}

.sdx-list-rank {
  display: grid;
  place-items: center;
  width: 46px;
  height: 58px;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 11px;
  color: #6f7d91;
  background: rgba(5, 12, 24, .72);
  font-size: .78rem;
  font-weight: 800;
}

.sdx-card-list > .sdx-avatar-shell {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

.sdx-list-main {
  min-width: 0;
}

.sdx-list-heading {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.sdx-list-heading h3 {
  min-width: 0;
  margin: 0;
  font-size: 1rem;
}

.sdx-list-heading h3 a {
  display: block;
  overflow: hidden;
  color: #f3f7ff;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdx-list-main > p {
  overflow: hidden;
  margin: .28rem 0 .38rem;
  color: #8491a5;
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdx-list-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .48rem;
}

.sdx-empty {
  display: grid;
  place-items: center;
  min-height: 310px;
  margin-top: 1.4rem;
  padding: 2rem;
  border: 1px dashed rgba(48, 220, 255, .30);
  border-radius: 22px;
  text-align: center;
  background: rgba(4, 11, 23, .66);
}

.sdx-empty > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(46, 225, 255, .30);
  border-radius: 18px;
  color: var(--sdx-cyan);
  background: rgba(10, 86, 104, .17);
}

.sdx-empty h2 {
  margin: .9rem 0 .35rem;
  color: #f2f6ff;
}

.sdx-empty p {
  max-width: 520px;
  margin: 0;
  color: #8491a5;
}

.sdx-empty a {
  margin-top: .9rem;
  color: var(--sdx-cyan);
}

.sdx-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(91, 118, 153, .16);
  color: #637187;
  font-size: .7rem;
}

.sdx-footer a {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: var(--sdx-cyan);
  font-weight: 800;
  text-decoration: none;
}

.sdx-js [data-sd-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

.sdx-js [data-sd-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .75, .2, 1);
}

@media (max-width: 1260px) {
  .sdx-card-first {
    grid-template-columns: 90px 168px minmax(0, 1fr) 210px;
  }

  .sdx-first-avatar {
    width: 160px;
    height: 160px;
  }

  .sdx-card-podium {
    grid-template-columns: 62px 90px minmax(0, 1fr);
  }

  .sdx-card-podium > .sdx-avatar-shell {
    width: 86px;
    height: 86px;
  }

  .sdx-podium-side {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr 140px;
  }

  .sdx-card-list {
    grid-template-columns: 50px 68px minmax(0, 1fr) 235px 44px;
  }

  .sdx-card-list > .sdx-avatar-shell {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 980px) {
  .sdx-shell {
    width: min(100% - 28px, 1520px);
  }

  .sdx-overview {
    grid-template-columns: 1fr;
  }

  .sdx-overview-status {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sdx-console {
    position: relative;
    top: auto;
  }

  .sdx-card-first {
    grid-template-columns: 82px 150px minmax(0, 1fr);
  }

  .sdx-first-stats {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr 180px;
  }

  .sdx-first-avatar {
    width: 142px;
    height: 142px;
  }

  .sdx-podium {
    grid-template-columns: 1fr;
  }

  .sdx-card-podium {
    grid-column: 1;
  }

  .sdx-card-list {
    grid-template-columns: 46px 62px minmax(0, 1fr) 44px;
  }

  .sdx-list-metrics {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .sdx-shell {
    width: min(100% - 18px, 1520px);
    padding-top: 1rem;
  }

  .sdx-overview {
    padding: 1.4rem;
    border-radius: 21px;
  }

  .sdx-overview h1 {
    font-size: 2.65rem;
  }

  .sdx-overview-stats {
    grid-template-columns: 1fr;
  }

  .sdx-search {
    grid-template-columns: 1fr;
  }

  .sdx-search > button {
    min-height: 46px;
  }

  .sdx-console-row,
  .sdx-sortbar,
  .sdx-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sdx-categories,
  .sdx-sortbar nav {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: .25rem;
  }

  .sdx-categories a,
  .sdx-sortbar nav a {
    flex: 0 0 auto;
  }

  .sdx-section-head > p {
    text-align: left;
  }

  .sdx-card-first {
    grid-template-columns: 68px 100px minmax(0, 1fr);
    min-height: 0;
    padding: .9rem;
  }

  .sdx-first-rank {
    min-height: 102px;
  }

  .sdx-first-avatar {
    width: 94px;
    height: 94px;
    border-radius: 22px;
  }

  .sdx-first-content h2 {
    font-size: 1.7rem;
  }

  .sdx-first-content > p {
    display: none;
  }

  .sdx-first-stats {
    grid-template-columns: 1fr 1fr;
  }

  .sdx-first-stats .sdx-open {
    grid-column: 1 / -1;
  }

  .sdx-card-podium {
    grid-template-columns: 54px 72px minmax(0, 1fr);
  }

  .sdx-card-podium > .sdx-avatar-shell {
    width: 68px;
    height: 68px;
  }

  .sdx-podium-content > p {
    display: none;
  }

  .sdx-podium-side {
    grid-template-columns: 1fr 1fr;
  }

  .sdx-podium-side .sdx-open {
    grid-column: 1 / -1;
  }

  .sdx-card-list {
    grid-template-columns: 40px 54px minmax(0, 1fr) 40px;
    padding: .65rem;
  }

  .sdx-card-list > .sdx-avatar-shell {
    width: 50px;
    height: 50px;
    border-radius: 13px;
  }

  .sdx-list-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .28rem;
  }

  .sdx-list-main > p {
    display: none;
  }

  .sdx-list-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .sdx-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .sdx-card-first {
    grid-template-columns: 54px 72px minmax(0, 1fr);
  }

  .sdx-first-rank {
    min-height: 80px;
  }

  .sdx-first-rank small {
    display: none;
  }

  .sdx-first-rank b {
    font-size: 1.7rem;
  }

  .sdx-first-avatar {
    width: 68px;
    height: 68px;
    border-radius: 17px;
  }

  .sdx-first-content h2 {
    font-size: 1.25rem;
  }

  .sdx-badge.is-helper,
  .sdx-badge.is-owner {
    display: none;
  }

  .sdx-card-podium {
    grid-template-columns: 44px 58px minmax(0, 1fr);
    padding: .7rem;
  }

  .sdx-podium-rank {
    min-height: 64px;
  }

  .sdx-card-podium > .sdx-avatar-shell {
    width: 54px;
    height: 54px;
  }

  .sdx-card-list {
    grid-template-columns: 36px 48px minmax(0, 1fr) 36px;
    gap: .48rem;
  }

  .sdx-list-rank {
    width: 34px;
    height: 44px;
  }

  .sdx-card-list > .sdx-avatar-shell {
    width: 44px;
    height: 44px;
  }

  .sdx-list-metrics {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdx-grid-plane,
  .sdx-stars,
  .sdx-orb,
  .sdx-overview-glow,
  .sdx-status-wave i,
  .sdx-card-scan,
  .sdx-live-dot {
    animation: none;
  }

  .sdx-card {
    transition: none;
  }

  .sdx-js [data-sd-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* v4.7 — expressive WOW motion and system typography. */
.sdx-shell {
  --sd-font-display:
    "Segoe UI Variable Display",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    sans-serif;
  --sd-font-body:
    "Segoe UI Variable Text",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    sans-serif;
  --sd-font-ui:
    "Segoe UI Variable Text",
    "Segoe UI Variable",
    "Segoe UI",
    system-ui,
    sans-serif;
  --sd-font-mono:
    "Cascadia Code",
    "Segoe UI Mono",
    ui-monospace,
    monospace;
  --sdx-font-display: var(--sd-font-display);
  --sdx-font-ui: var(--sd-font-ui);
  font-family: var(--sd-font-body);
  font-weight: 400;
}

.sdx-shell :is(button, input, select, textarea, nav, .sdx-badge, .sdx-category) {
  font-family: var(--sd-font-ui);
}

.sdx-shell :is(h1, h2, h3, .sdx-first-rank b, .sdx-open, .sdx-vote-action) {
  font-family: var(--sd-font-display);
}

.sdx-shell :is(
  .sdx-status-row b,
  .sdx-result-count,
  .sdx-first-rank b,
  .sdx-metric b,
  .sdx-vote-meta b
) {
  font-variant-numeric: tabular-nums;
}

.sdx-overview h1 {
  max-width: 850px;
  font-size: clamp(2.7rem, 5vw, 5.4rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
}

.sdx-overview-main > p {
  max-width: 72ch;
  color: #b6c2d3;
  font-size: clamp(.95rem, 1.1vw, 1.12rem);
  font-weight: 500;
  line-height: 1.58;
}

.sdx-section-head h2,
.sdx-first-content h2 {
  font-weight: 800;
  letter-spacing: -.035em;
}

.sdx-section-head h2 {
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  line-height: 1.08;
}

.sdx-shell :is(.sdx-eyebrow, .sdx-sort-label, .sdx-section-head > div > span, .sdx-status-head) {
  font-weight: 700;
  letter-spacing: .09em;
}

.sdx-shell :is(.sdx-open, .sdx-search > button, .sdx-categories a, .sdx-sortbar nav a) {
  font-weight: 700;
  letter-spacing: -.01em;
}

.sdx-js:not(.is-motion-ready) :is(.sdx-overview, .sdx-console) {
  opacity: 0;
  transform: translateY(10px);
}

.sdx-js.is-motion-ready .sdx-overview.is-visible {
  animation: sdx-cinematic-hero .82s cubic-bezier(.16, .78, .24, 1) backwards;
}

.sdx-js.is-motion-ready .sdx-console.is-visible {
  animation: sdx-cinematic-console .72s .12s cubic-bezier(.2, .75, .2, 1) backwards;
}

.sdx-js.is-motion-ready .sdx-card-first.is-visible {
  animation: sdx-cinematic-leader .82s .18s cubic-bezier(.16, .78, .24, 1) backwards;
}

.sdx-overview h1 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sdx-overview h1::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -18% auto -18% -32%;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .58), rgba(73, 224, 255, .46), transparent);
  mix-blend-mode: screen;
  transform: skewX(-16deg) translateX(0);
}

.sdx-js.is-motion-ready .sdx-overview.is-visible h1::after {
  animation: sdx-title-sweep .72s .18s ease-out both;
}

.sdx-card-first {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform-style: preserve-3d;
  transition:
    transform .28s cubic-bezier(.2, .75, .2, 1),
    border-color .22s ease,
    box-shadow .25s ease;
}

.sdx-card-first::before {
  opacity: calc(var(--pointer-opacity) * .92);
  background:
    radial-gradient(
      circle 430px at var(--pointer-x) var(--pointer-y),
      rgb(53 226 255 / 27%),
      rgb(132 75 255 / 13%) 43%,
      transparent 72%
    );
}

.sdx-card-first::after {
  opacity: .68;
  background:
    linear-gradient(112deg, rgba(29, 228, 255, .28), rgba(113, 76, 255, .42), rgba(255, 72, 211, .31), rgba(29, 228, 255, .28));
  background-size: 210% 100%;
  animation: sdx-leader-energy 6.2s linear infinite;
}

.sdx-card-first .sdx-card-bg::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #3deaff 30%, #9d6dff 67%, #ff68d8);
  box-shadow:
    0 0 10px rgba(53, 229, 255, .9),
    0 0 24px rgba(122, 82, 255, .58);
  offset-path: inset(3px round 20px);
  offset-distance: 0%;
  animation: sdx-energy-arc 6.2s linear infinite;
}

.sdx-js .sdx-card-first.is-visible:is(:hover, :focus-within) {
  transform:
    perspective(1100px)
    translateY(-3px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
}

.sdx-card-first:is(:hover, :focus-within) .sdx-card-beam {
  animation: sdx-leader-beam 2.8s ease-in-out infinite alternate;
}

.sdx-card-first:is(:hover, :focus-within) .sdx-first-rank::after {
  animation-duration: 1.15s;
}

.sdx-card-first .sdx-join-server {
  --magnet-x: 0px;
  --magnet-y: 0px;
  --cta-x: 50%;
  --cta-y: 50%;
  --ripple-x: 50%;
  --ripple-y: 50%;
  background:
    radial-gradient(circle 90px at var(--cta-x) var(--cta-y), rgba(255, 255, 255, .22), transparent 70%),
    linear-gradient(112deg, #17ccea, #367fff 43%, #7958ff 72%, #e044dd);
  background-size: 100% 100%, 220% 100%;
  animation: sdx-cta-gradient 4.8s ease-in-out infinite alternate;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  box-shadow:
    0 0 0 1px rgba(86, 223, 255, .2),
    0 0 28px rgba(43, 205, 255, .22),
    0 0 48px rgba(126, 76, 255, .14);
}

.sdx-card-first .sdx-join-server:is(:hover, :focus-visible) {
  transform: translate3d(var(--magnet-x), calc(var(--magnet-y) - 2px), 0);
  filter: brightness(1.12) saturate(1.08);
}

.sdx-card-first .sdx-join-server:is(:hover, :focus-visible) svg {
  transform: translateX(4px);
}

.sdx-card-first .sdx-join-server::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  left: var(--ripple-x);
  top: var(--ripple-y);
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
}

.sdx-card-first .sdx-join-server.is-cta-rippling::after {
  animation: sdx-cta-ripple .5s ease-out both;
}

@keyframes sdx-cinematic-hero {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sdx-cinematic-console {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sdx-cinematic-leader {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sdx-title-sweep {
  from { transform: skewX(-16deg) translateX(0); opacity: 0; }
  20% { opacity: .85; }
  to { transform: skewX(-16deg) translateX(620%); opacity: 0; }
}

@keyframes sdx-energy-arc {
  to { offset-distance: 100%; }
}

@keyframes sdx-leader-beam {
  from { transform: translate3d(-1.5%, 0, 0); opacity: .48; }
  to { transform: translate3d(2%, 0, 0); opacity: .72; }
}

@keyframes sdx-cta-gradient {
  from { background-position: center, 0 50%; }
  to { background-position: center, 100% 50%; }
}

@keyframes sdx-cta-ripple {
  0% { opacity: .75; transform: translate(-50%, -50%) scale(.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(9); }
}

@media (hover: none), (pointer: coarse) {
  .sdx-card-first {
    --pointer-opacity: 0;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
  }

  .sdx-js .sdx-card-first.is-visible:is(:hover, :focus-within),
  .sdx-card-first .sdx-join-server,
  .sdx-card-first .sdx-join-server:is(:hover, :focus-visible) {
    transform: none;
  }

  .sdx-card-first .sdx-join-server {
    animation-duration: 7s;
  }
}

@media (max-width: 720px) {
  .sdx-overview h1 {
    font-size: clamp(2.45rem, 12.4vw, 3.35rem);
    line-height: .98;
  }

  .sdx-overview-main > p {
    font-size: .95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdx-js:not(.is-motion-ready) :is(.sdx-overview, .sdx-console),
  .sdx-js [data-sd-reveal] {
    opacity: 1;
    transform: none;
  }

  .sdx-js.is-motion-ready :is(
    .sdx-overview.is-visible,
    .sdx-console.is-visible,
    .sdx-card-first.is-visible
  ),
  .sdx-js.is-motion-ready .sdx-overview.is-visible h1::after,
  .sdx-card-first::after,
  .sdx-card-first .sdx-card-bg::before,
  .sdx-card-first:is(:hover, :focus-within) .sdx-card-beam,
  .sdx-card-first .sdx-join-server,
  .sdx-card-first .sdx-join-server.is-cta-rippling::after {
    animation: none;
  }

  .sdx-card-first,
  .sdx-js .sdx-card-first.is-visible:is(:hover, :focus-within),
  .sdx-card-first .sdx-join-server,
  .sdx-card-first .sdx-join-server:is(:hover, :focus-visible) {
    --pointer-opacity: 0;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --magnet-x: 0px;
    --magnet-y: 0px;
    transform: none;
  }
}

@keyframes sdx-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 64px, 64px 0; }
}

@keyframes sdx-stars-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-80px, 42px, 0); }
}

@keyframes sdx-orb-float {
  from { transform: translate3d(-3%, -2%, 0) scale(.94); }
  to { transform: translate3d(6%, 5%, 0) scale(1.08); }
}

@keyframes sdx-overview-spin {
  to { transform: rotate(360deg); }
}

@keyframes sdx-pulse {
  0%, 100% { opacity: .58; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes sdx-wave {
  from { transform: scaleY(.34); opacity: .45; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes sdx-scan {
  0%, 12% { transform: skewX(-18deg) translateX(0); }
  54%, 100% { transform: skewX(-18deg) translateX(780%); }
}

/* v4.1 — typography and premium hierarchy refinement */
.sdx-shell {
  --sdx-font-ui: "Segoe UI Variable Text", "Segoe UI", Inter, Arial, sans-serif;
  --sdx-font-display: "Segoe UI Variable Display", "Segoe UI", Inter, Arial, sans-serif;
  font-family: var(--sdx-font-ui);
}

.sdx-overview {
  min-height: 330px;
  padding: 2.8rem 3rem;
}

.sdx-overview h1 {
  display: grid;
  gap: .08em;
  max-width: 850px;
  margin: 1.05rem 0 .82rem;
  font-family: var(--sdx-font-display);
  font-size: clamp(3rem, 4.8vw, 4.85rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.055em;
  text-wrap: normal;
}

.sdx-title-main,
.sdx-title-accent {
  display: block;
}

.sdx-title-main {
  color: #f7f9ff;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .28);
}

.sdx-title-accent {
  width: max-content;
  max-width: 100%;
  color: transparent;
  background:
    linear-gradient(92deg, #38e7ff 0%, #4d9aff 37%, #8667ff 68%, #ff59cf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(76, 151, 255, .12));
}

.sdx-overview-main > p {
  max-width: 790px;
  color: #aeb9ca;
  font-size: 1.03rem;
  line-height: 1.68;
}

.sdx-overview-stats > div {
  min-height: 82px;
  padding: 1rem 1.12rem;
  border-color: rgba(75, 134, 180, .24);
  background:
    linear-gradient(180deg, rgba(7, 17, 33, .80), rgba(3, 10, 22, .72));
}

.sdx-overview-stats b {
  font-family: var(--sdx-font-display);
  font-size: 1.48rem;
  font-weight: 700;
}

.sdx-overview-stats small {
  color: #8290a5;
  font-size: .68rem;
  letter-spacing: .045em;
}

.sdx-overview-status {
  border-color: rgba(55, 221, 255, .27);
  background:
    radial-gradient(circle at 88% 15%, rgba(38, 220, 255, .075), transparent 9rem),
    linear-gradient(180deg, rgba(5, 20, 37, .92), rgba(3, 10, 22, .84));
}

.sdx-status-head {
  color: #a7b5c9;
}

.sdx-status-row {
  min-height: 49px;
  color: #a8b4c6;
  font-size: .74rem;
}

.sdx-status-row b {
  color: #e1e8f2;
  font-size: .71rem;
}

.sdx-console {
  padding: 1rem;
  border-color: rgba(62, 143, 185, .25);
  background:
    linear-gradient(180deg, rgba(5, 13, 26, .92), rgba(3, 9, 20, .89));
}

.sdx-search label {
  min-height: 54px;
  font-size: .9rem;
}

.sdx-search > button {
  min-width: 126px;
  font-family: var(--sdx-font-display);
  font-size: .8rem;
  font-weight: 700;
}

.sdx-categories a,
.sdx-sortbar nav a {
  min-height: 33px;
  padding: .48rem .78rem;
  font-size: .7rem;
}

.sdx-result-count,
.sdx-sort-label {
  font-size: .7rem;
}

.sdx-section-head {
  margin-top: 2.2rem;
}

.sdx-section-head > div > span {
  font-size: .71rem;
}

.sdx-section-head h2 {
  font-family: var(--sdx-font-display);
  font-size: clamp(1.95rem, 2.65vw, 2.65rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
}

.sdx-section-head > p {
  color: #8491a5;
  font-size: .78rem;
}

.sdx-card-first {
  min-height: 315px;
  border-color: rgba(152, 132, 90, .34);
  background:
    linear-gradient(112deg, rgba(9, 12, 19, .97), rgba(4, 12, 24, .94) 52%, rgba(12, 9, 22, .93));
  box-shadow:
    0 0 0 1px rgba(255, 215, 127, .035),
    0 0 44px rgba(61, 174, 255, .07),
    0 0 34px rgba(128, 75, 255, .055),
    0 34px 82px rgba(0, 0, 0, .40);
}

.sdx-card-first::after {
  opacity: .34;
  background:
    linear-gradient(90deg, rgba(255, 198, 82, .16), transparent 11%, transparent 89%, rgba(255, 198, 82, .065)),
    linear-gradient(180deg, rgba(255, 225, 155, .07), transparent 23%);
}

.sdx-card-first .sdx-card-bg::after {
  background:
    linear-gradient(90deg, rgba(3, 7, 15, .98) 0%, rgba(3, 7, 16, .82) 38%, rgba(3, 7, 18, .42) 73%, rgba(4, 7, 16, .83) 100%),
    linear-gradient(180deg, rgba(58, 37, 8, .035), rgba(1, 4, 12, .46));
}

.sdx-first-rank {
  border-color: rgba(255, 202, 93, .52);
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 210, 106, .14), transparent 5rem),
    linear-gradient(180deg, rgba(86, 53, 7, .93), rgba(24, 15, 5, .96));
  box-shadow:
    inset 0 0 30px rgba(255, 193, 65, .10),
    0 0 26px rgba(255, 190, 61, .08);
}

.sdx-first-rank b {
  font-family: var(--sdx-font-display);
  font-weight: 800;
}

.sdx-first-avatar {
  width: 198px;
  height: 198px;
  border-radius: 34px;
}

.sdx-first-content h2 {
  margin: .82rem 0 .58rem;
  font-family: var(--sdx-font-display);
  font-size: clamp(2.1rem, 3.15vw, 3.55rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.05em;
}

.sdx-first-content h2 a {
  color: transparent;
  background: linear-gradient(92deg, #fff7d9, #ffffff 54%, #b7eaff);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}

.sdx-first-content > p {
  color: #b0bac9;
  font-size: .92rem;
  line-height: 1.5;
}

.sdx-first-stats {
  gap: .68rem;
}

.sdx-metric,
.sdx-vote,
.sdx-vote button {
  border-color: rgba(84, 128, 167, .25);
  background:
    linear-gradient(180deg, rgba(5, 14, 29, .84), rgba(3, 9, 20, .76));
}

.sdx-open {
  min-height: 58px;
  font-family: var(--sdx-font-display);
  font-size: .82rem;
  font-weight: 700;
}

.sdx-card-podium h3,
.sdx-list-heading h3 {
  font-family: var(--sdx-font-display);
  font-weight: 700;
  letter-spacing: -.025em;
}

.sdx-card-podium h3 {
  font-size: 1.42rem;
}

.sdx-list-heading h3 {
  font-size: 1.04rem;
}

.sdx-card-podium,
.sdx-card-list {
  background:
    linear-gradient(112deg, rgba(5, 12, 26, .95), rgba(4, 10, 22, .90));
}

@media (max-width: 980px) {
  .sdx-overview {
    padding: 2rem;
  }

  .sdx-overview h1 {
    font-size: clamp(2.8rem, 7.2vw, 4.3rem);
  }
}

@media (max-width: 720px) {
  .sdx-overview {
    min-height: 0;
    padding: 1.45rem;
  }

  .sdx-overview h1 {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  .sdx-title-accent {
    width: auto;
  }

  .sdx-first-avatar {
    width: 96px;
    height: 96px;
  }
}

/* v4.2 — expressive controls, hover motion and header breathing room */
.sdx-shell {
  padding-top: 2.85rem;
}

/* Console receives the same luminous framing language as the admin dashboard. */
.sdx-console {
  position: sticky;
  overflow: hidden;
  padding: 1.05rem;
  border-color: rgba(91, 104, 255, .38);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% -30%, rgba(119, 67, 255, .12), transparent 24rem),
    linear-gradient(180deg, rgba(6, 14, 29, .95), rgba(3, 9, 20, .92));
  box-shadow:
    0 20px 55px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(52, 226, 255, .035),
    inset 0 1px rgba(255, 255, 255, .025);
}

.sdx-console::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 4%;
  right: 4%;
  top: 0;
  height: 1px;
  opacity: .9;
  background:
    linear-gradient(90deg, transparent, #37e3ff 22%, #7867ff 58%, #ed50ff 82%, transparent);
  box-shadow:
    0 0 14px rgba(69, 219, 255, .38),
    0 0 24px rgba(132, 77, 255, .22);
}

.sdx-console > * {
  position: relative;
  z-index: 1;
}

/* Search field */
.sdx-search {
  gap: .78rem;
}

.sdx-search label {
  min-height: 56px;
  border-color: rgba(73, 111, 158, .30);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(7, 15, 29, .96), rgba(4, 10, 21, .92));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .025),
    inset 0 0 24px rgba(42, 216, 255, .018);
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    transform .2s ease;
}

.sdx-search label:hover {
  border-color: rgba(55, 197, 236, .42);
}

.sdx-search label:focus-within {
  transform: translateY(-1px);
  border-color: rgba(49, 225, 255, .67);
  background:
    linear-gradient(180deg, rgba(8, 21, 38, .98), rgba(4, 11, 24, .95));
  box-shadow:
    0 0 0 3px rgba(45, 223, 255, .075),
    0 0 26px rgba(45, 223, 255, .11),
    inset 0 0 28px rgba(45, 223, 255, .025);
}

.sdx-search kbd {
  border-color: rgba(89, 141, 183, .31);
  color: #8190a8;
  background: rgba(37, 57, 82, .18);
}

.sdx-search > button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 132px;
  min-height: 56px;
  border-color: rgba(91, 219, 255, .62);
  border-radius: 14px;
  color: #f7fbff;
  background:
    linear-gradient(112deg, #17c7e8 0%, #338cff 52%, #7b58ff 100%);
  box-shadow:
    0 0 0 1px rgba(95, 215, 255, .12),
    0 0 24px rgba(42, 205, 255, .18),
    inset 0 1px rgba(255, 255, 255, .18);
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.sdx-search > button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80%;
  bottom: -80%;
  left: -60%;
  width: 38%;
  opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: left .48s ease;
}

.sdx-search > button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.08);
  box-shadow:
    0 0 0 1px rgba(101, 224, 255, .18),
    0 0 30px rgba(42, 208, 255, .27),
    0 0 48px rgba(122, 80, 255, .20),
    inset 0 1px rgba(255, 255, 255, .20);
}

.sdx-search > button:hover::before {
  left: 130%;
}

.sdx-search > button:active {
  transform: translateY(0) scale(.985);
}

/* Category chips */
.sdx-categories {
  gap: .46rem;
}

.sdx-categories a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 36px;
  padding: .52rem .88rem;
  border-color: rgba(93, 119, 158, .28);
  color: #9da9bb;
  background:
    linear-gradient(180deg, rgba(14, 24, 40, .94), rgba(7, 14, 27, .92));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .025);
  transition:
    transform .18s ease,
    color .18s ease,
    border-color .18s ease,
    background .2s ease,
    box-shadow .22s ease;
}

.sdx-categories a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(120deg, rgba(38, 220, 255, .20), rgba(84, 112, 255, .16) 56%, rgba(220, 68, 255, .14));
  transition: opacity .2s ease;
}

.sdx-categories a:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 220, 255, .57);
  color: #effbff;
  box-shadow:
    0 0 0 1px rgba(51, 220, 255, .08),
    0 0 18px rgba(45, 210, 255, .13),
    0 0 30px rgba(124, 77, 255, .08);
}

.sdx-categories a:hover::before,
.sdx-categories a.is-active::before {
  opacity: 1;
}

.sdx-categories a.is-active {
  border-color: rgba(53, 228, 255, .76);
  color: #f4fdff;
  background:
    linear-gradient(115deg, rgba(7, 151, 190, .44), rgba(41, 99, 218, .40) 56%, rgba(116, 52, 207, .42));
  box-shadow:
    0 0 0 1px rgba(52, 224, 255, .14),
    0 0 20px rgba(39, 218, 255, .20),
    0 0 36px rgba(119, 75, 255, .13),
    inset 0 1px rgba(255, 255, 255, .10);
}

/* Dashboard-style segmented sort controls */
.sdx-sortbar {
  min-height: 55px;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top-color: rgba(93, 120, 158, .20);
}

.sdx-sortbar nav {
  gap: .48rem;
}

.sdx-sortbar nav a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  padding: .62rem .96rem;
  border-color: rgba(91, 119, 157, .28);
  border-radius: 10px;
  color: #a2aec0;
  background:
    linear-gradient(180deg, rgba(14, 23, 39, .94), rgba(7, 14, 27, .94));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .025);
  transition:
    transform .18s ease,
    color .18s ease,
    border-color .18s ease,
    background .2s ease,
    box-shadow .22s ease;
}

.sdx-sortbar nav a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(120deg, rgba(42, 222, 255, .18), rgba(74, 116, 255, .18) 58%, rgba(201, 66, 255, .16));
  transition: opacity .2s ease;
}

.sdx-sortbar nav a::after {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: -1px;
  height: 2px;
  opacity: 0;
  border-radius: 99px;
  background:
    linear-gradient(90deg, transparent, #35e5ff, #8a62ff, transparent);
  box-shadow:
    0 0 12px rgba(54, 224, 255, .46);
  transition: opacity .2s ease, left .2s ease, right .2s ease;
}

.sdx-sortbar nav a:hover {
  transform: translateY(-2px);
  border-color: rgba(67, 213, 255, .48);
  color: #f1f7ff;
  box-shadow:
    0 0 20px rgba(43, 207, 255, .10),
    0 0 30px rgba(117, 77, 255, .08);
}

.sdx-sortbar nav a:hover::before,
.sdx-sortbar nav a.is-active::before,
.sdx-sortbar nav a.is-active::after {
  opacity: 1;
}

.sdx-sortbar nav a.is-active {
  transform: translateY(-1px);
  border-color: rgba(58, 226, 255, .76);
  color: #ffffff;
  background:
    linear-gradient(115deg, #12bad9 0%, #348cff 54%, #765dff 100%);
  box-shadow:
    0 0 0 1px rgba(67, 224, 255, .14),
    0 0 24px rgba(38, 209, 255, .21),
    0 0 40px rgba(116, 80, 255, .16),
    inset 0 1px rgba(255, 255, 255, .14);
}

.sdx-sortbar nav a.is-active::after {
  left: 8%;
  right: 8%;
}

.sdx-sort-label {
  color: #8290a6;
}

.sdx-sort-label svg {
  color: #55dff5;
}

.sdx-result-count {
  color: #79879c;
}

/* Common micro-interactions */
.sdx-categories a:active,
.sdx-sortbar nav a:active {
  transform: translateY(0) scale(.98);
}

@media (max-width: 980px) {
  .sdx-shell {
    padding-top: 2rem;
  }
}

@media (max-width: 720px) {
  .sdx-shell {
    padding-top: 1.4rem;
  }

  .sdx-console {
    padding: .82rem;
    border-radius: 18px;
  }

  .sdx-sortbar nav a {
    min-height: 38px;
    padding: .56rem .82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdx-search label,
  .sdx-search > button,
  .sdx-categories a,
  .sdx-sortbar nav a {
    transition: none;
  }

  .sdx-search > button::before {
    display: none;
  }
}

/* v4.3 — visible catalogue voting */
.sdx-vote,
.sdx-vote button {
  --vote-accent: 255, 82, 207;
  position: relative;
  z-index: 8;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .72rem;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: .66rem .78rem;
  border: 1px solid rgba(var(--vote-accent), .34);
  border-radius: 13px;
  color: #e9eff8;
  background:
    radial-gradient(circle at 12% 50%, rgba(var(--vote-accent), .11), transparent 6rem),
    linear-gradient(180deg, rgba(8, 17, 33, .94), rgba(4, 10, 22, .92));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .03),
    inset 0 0 24px rgba(var(--vote-accent), .025);
  text-align: left;
  text-decoration: none;
}

form.sdx-vote {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sdx-vote button {
  cursor: pointer;
  font: inherit;
  transition:
    transform .18s ease,
    border-color .2s ease,
    background .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.sdx-vote::before,
.sdx-vote button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70%;
  bottom: -70%;
  left: -55%;
  width: 34%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .52), transparent);
  transform: skewX(-18deg);
  transition: left .52s ease, opacity .22s ease;
}

.sdx-vote-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--vote-accent), .42);
  border-radius: 12px;
  color: rgb(var(--vote-accent));
  background:
    radial-gradient(circle, rgba(var(--vote-accent), .18), rgba(var(--vote-accent), .055));
  box-shadow:
    0 0 18px rgba(var(--vote-accent), .11),
    inset 0 1px rgba(255, 255, 255, .05);
  transition:
    transform .2s cubic-bezier(.2, .8, .2, 1),
    box-shadow .22s ease,
    background .22s ease;
}

.sdx-vote-icon svg {
  width: 1.12rem;
  height: 1.12rem;
  color: currentColor;
  fill: currentColor;
  stroke: none;
}

.sdx-vote-copy {
  min-width: 0;
  display: grid;
  gap: .22rem;
}

.sdx-vote-action {
  overflow: hidden;
  color: #f7f9ff;
  font-family: var(--sdx-font-display);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdx-vote-meta {
  display: flex;
  align-items: baseline;
  gap: .38rem;
}

.sdx-vote-meta b {
  color: rgb(var(--vote-accent));
  font-family: var(--sdx-font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.sdx-vote-meta small {
  color: #748297;
  font-size: .55rem;
  font-weight: 800;
}

/* Active voting button */
.sdx-vote.is-available {
  --vote-accent: 255, 80, 204;
}

.sdx-vote.is-available button {
  border-color: rgba(255, 82, 207, .56);
  background:
    radial-gradient(circle at 10% 50%, rgba(255, 71, 202, .19), transparent 7rem),
    linear-gradient(112deg, rgba(44, 12, 47, .94), rgba(13, 18, 40, .94) 52%, rgba(28, 15, 58, .93));
  box-shadow:
    0 0 0 1px rgba(255, 82, 207, .07),
    0 0 24px rgba(255, 69, 199, .11),
    inset 0 1px rgba(255, 255, 255, .045);
}

.sdx-vote.is-available button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 106, 220, .88);
  filter: brightness(1.08) saturate(1.08);
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 81, 207, .28), transparent 8rem),
    linear-gradient(112deg, rgba(73, 15, 70, .97), rgba(22, 25, 55, .97) 52%, rgba(57, 23, 91, .96));
  box-shadow:
    0 0 0 1px rgba(255, 100, 217, .12),
    0 0 28px rgba(255, 67, 199, .24),
    0 0 48px rgba(135, 70, 255, .17),
    inset 0 1px rgba(255, 255, 255, .08);
}

.sdx-vote.is-available button:hover::before,
.sdx-vote.is-guest:hover::before {
  left: 128%;
  opacity: .7;
}

.sdx-vote.is-available button:hover .sdx-vote-icon,
.sdx-vote.is-guest:hover .sdx-vote-icon {
  transform: scale(1.09) rotate(-6deg);
  background:
    radial-gradient(circle, rgba(var(--vote-accent), .30), rgba(var(--vote-accent), .09));
  box-shadow:
    0 0 22px rgba(var(--vote-accent), .28),
    inset 0 1px rgba(255, 255, 255, .10);
}

.sdx-vote.is-available button:hover .sdx-vote-icon svg,
.sdx-vote.is-guest:hover .sdx-vote-icon svg {
  animation: sdx-heart-beat .72s ease-in-out infinite alternate;
}

.sdx-vote.is-available button:active {
  transform: translateY(0) scale(.985);
}

/* Guest login action */
.sdx-vote.is-guest {
  --vote-accent: 143, 93, 255;
  border-color: rgba(143, 93, 255, .52);
  background:
    radial-gradient(circle at 10% 50%, rgba(143, 83, 255, .17), transparent 7rem),
    linear-gradient(112deg, rgba(24, 16, 55, .95), rgba(9, 16, 35, .94));
  transition:
    transform .18s ease,
    border-color .2s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.sdx-vote.is-guest:hover {
  transform: translateY(-2px);
  border-color: rgba(161, 116, 255, .82);
  background:
    radial-gradient(circle at 12% 50%, rgba(155, 93, 255, .25), transparent 8rem),
    linear-gradient(112deg, rgba(43, 23, 84, .97), rgba(14, 21, 47, .96));
  box-shadow:
    0 0 26px rgba(132, 76, 255, .21),
    0 0 44px rgba(42, 203, 255, .09);
}

/* Already voted */
.sdx-vote.is-cooldown {
  --vote-accent: 46, 229, 179;
  border-color: rgba(46, 229, 179, .37);
  background:
    radial-gradient(circle at 10% 50%, rgba(46, 229, 179, .12), transparent 7rem),
    linear-gradient(112deg, rgba(5, 35, 33, .91), rgba(4, 13, 27, .91));
}

.sdx-vote.is-cooldown .sdx-vote-action {
  color: #8ef6d4;
}

/* Owner state */
.sdx-vote.is-owner {
  --vote-accent: 153, 116, 255;
  border-color: rgba(153, 116, 255, .29);
  opacity: .83;
}

.sdx-vote.is-owner .sdx-vote-action {
  color: #cdbdff;
}

/* Closed state */
.sdx-vote.is-blocked {
  --vote-accent: 116, 132, 158;
  border-color: rgba(116, 132, 158, .20);
  opacity: .69;
}

.sdx-vote.is-blocked .sdx-vote-action {
  color: #9da9ba;
}

/* Compact cards */
.sdx-vote.is-compact,
.sdx-vote.is-compact button {
  min-height: 50px;
  padding: .52rem .58rem;
  gap: .52rem;
  border-radius: 11px;
}

.sdx-vote.is-compact .sdx-vote-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
}

.sdx-vote.is-compact .sdx-vote-icon svg {
  width: .95rem;
  height: .95rem;
}

.sdx-vote.is-compact .sdx-vote-action {
  font-size: .61rem;
}

.sdx-vote.is-compact .sdx-vote-meta b {
  font-size: .88rem;
}

.sdx-vote.is-compact .sdx-vote-meta small {
  font-size: .49rem;
}

/* First place receives the largest voting CTA. */
.sdx-card-first .sdx-vote,
.sdx-card-first .sdx-vote button {
  min-height: 68px;
  border-radius: 15px;
}

.sdx-card-first .sdx-vote-icon {
  width: 43px;
  height: 43px;
  border-radius: 13px;
}

.sdx-card-first .sdx-vote-action {
  font-size: .78rem;
}

.sdx-card-first .sdx-vote-meta b {
  font-size: 1.12rem;
}

/* Keep interactive voting above the full-card link. */
.sdx-vote,
.sdx-vote button,
.sdx-vote a {
  pointer-events: auto;
}

@media (max-width: 1260px) {
  .sdx-vote.is-compact .sdx-vote-action {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .sdx-vote-action {
    white-space: normal;
  }

  .sdx-first-stats .sdx-vote {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdx-vote,
  .sdx-vote button,
  .sdx-vote-icon,
  .sdx-open,
  .sdx-open svg {
    transition: none;
  }

  .sdx-vote::before,
  .sdx-vote button::before {
    display: none;
  }

  .sdx-vote-icon svg {
    animation: none;
  }

  .sdx-open:hover,
  .sdx-open:hover svg {
    transform: none;
  }
}

@keyframes sdx-heart-beat {
  from { transform: scale(.94); }
  to { transform: scale(1.12); }
}

/* v4.6 — restrained premium motion for the public catalogue. */
.sdx-card-first {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-opacity: 0;
}

.sdx-card-first::before {
  opacity: var(--pointer-opacity);
  background:
    radial-gradient(
      circle 310px at var(--pointer-x) var(--pointer-y),
      rgb(57 218 255 / 16%),
      rgb(120 76 255 / 6%) 42%,
      transparent 72%
    );
}

.sdx-card-first::after {
  inset: 0;
  padding: 1px;
  opacity: .72;
  background:
    linear-gradient(112deg, transparent 8%, #ffd779 22%, #38dcff 45%, #875dff 67%, transparent 88%);
  background-position: 0 50%;
  background-size: 260% 100%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: sdx-leader-energy 14s ease-in-out infinite;
}

.sdx-card-first:hover,
.sdx-card-first:focus-within {
  transform: translateY(-2px);
  border-color: rgba(255, 206, 101, .58);
  box-shadow:
    0 0 0 1px rgba(255, 215, 127, .05),
    0 0 38px rgba(255, 195, 70, .07),
    0 0 48px rgba(74, 184, 255, .09),
    0 36px 84px rgba(0, 0, 0, .42);
}

.sdx-js .sdx-card-first.is-visible:is(:hover, :focus-within) {
  transform: translateY(-2px);
}

.sdx-card-first .sdx-card-grid {
  opacity: .11;
  transform: translate3d(8px, 5px, 0);
  transition: opacity .32s ease, transform .5s ease;
}

.sdx-card-first:is(:hover, :focus-within) .sdx-card-grid {
  opacity: .29;
  transform: translate3d(0, 0, 0);
}

.sdx-first-rank {
  position: relative;
  overflow: hidden;
}

.sdx-first-rank::after {
  content: "";
  position: absolute;
  inset: -45% -80%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 43%, rgba(255, 242, 184, .42) 49%, transparent 55%);
  transform: translateX(-54%);
  animation: sdx-medal-shimmer 10s ease-in-out infinite;
}

.sdx-first-rank svg {
  transform-origin: 50% 82%;
}

.sdx-js .sdx-card-first.is-visible .sdx-first-rank svg {
  animation: sdx-crown-lift .55s cubic-bezier(.2, .8, .2, 1) both;
}

.sdx-badge.is-helper,
.sdx-badge.is-owner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sdx-badge.is-helper::after,
.sdx-badge.is-owner::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -48%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-18deg);
}

.sdx-js .sdx-card-first.is-visible :is(.sdx-badge.is-helper, .sdx-badge.is-owner)::after {
  animation: sdx-badge-shine .72s ease-out both;
}

.sdx-category .is-category {
  background:
    linear-gradient(rgba(5, 18, 33, .94), rgba(5, 18, 33, .94)) padding-box,
    linear-gradient(112deg, rgba(52, 221, 255, .35), rgba(132, 80, 255, .48), rgba(52, 221, 255, .35)) border-box;
  background-size: 100% 100%, 220% 100%;
  border-color: transparent;
  transition: color .18s ease, transform .18s ease, box-shadow .2s ease;
}

.sdx-category .is-category:hover {
  transform: translateY(-1px);
  color: #dffaff;
  box-shadow: 0 0 17px rgba(68, 204, 255, .09);
  animation: sdx-category-border .8s ease-out both;
}

.sdx-open {
  overflow: hidden;
}

.sdx-open::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -45%;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .19), transparent);
  transform: skewX(-18deg);
}

.sdx-open:is(:hover, :focus-visible)::before {
  animation: sdx-button-shine .62s ease-out both;
}

@keyframes sdx-leader-energy {
  0%, 100% { background-position: 0 50%; opacity: .52; }
  50% { background-position: 100% 50%; opacity: .78; }
}

@keyframes sdx-medal-shimmer {
  0%, 78%, 100% { transform: translateX(-54%); opacity: 0; }
  84% { opacity: .8; }
  94% { transform: translateX(54%); opacity: 0; }
}

@keyframes sdx-crown-lift {
  0% { transform: translateY(0) rotate(0); }
  52% { transform: translateY(-3px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes sdx-badge-shine {
  from { transform: skewX(-18deg) translateX(0); }
  to { transform: skewX(-18deg) translateX(520%); }
}

@keyframes sdx-category-border {
  from { background-position: 0 0, 0 50%; }
  to { background-position: 0 0, 100% 50%; }
}

@keyframes sdx-button-shine {
  from { transform: skewX(-18deg) translateX(0); }
  to { transform: skewX(-18deg) translateX(560%); }
}

@media (max-width: 720px), (hover: none) {
  .sdx-card-first::after,
  .sdx-first-rank::after {
    animation: none;
  }

  .sdx-card-first::after {
    background-position: 50% 50%;
  }

  .sdx-card-first .sdx-card-grid {
    opacity: .13;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdx-card-first {
    --pointer-opacity: 0;
  }

  .sdx-card-first::after,
  .sdx-first-rank::after,
  .sdx-js .sdx-card-first.is-visible .sdx-first-rank svg,
  .sdx-js .sdx-card-first.is-visible :is(.sdx-badge.is-helper, .sdx-badge.is-owner)::after,
  .sdx-category .is-category:hover,
  .sdx-open:is(:hover, :focus-visible)::before {
    animation: none;
  }

  .sdx-card-first:hover,
  .sdx-card-first:focus-within,
  .sdx-js .sdx-card-first.is-visible:is(:hover, :focus-within),
  .sdx-category .is-category:hover {
    transform: none;
  }
}

/* v4.7 cascade guardrails: keep the signature layer above legacy v4 rules. */
.sdx-shell {
  --sdx-font-display: var(--sd-font-display);
  --sdx-font-ui: var(--sd-font-ui);
  font-family: var(--sd-font-body);
}

.sdx-grid-plane,
.sdx-stars,
.sdx-orb,
.sdx-overview-glow,
.sdx-status-wave i,
.sdx-card-scan {
  animation: none;
}

.sdx-card-first::after {
  animation: none;
  background-position: 50% 50%;
}

.sdx-card-first .sdx-card-bg::before {
  inset: 0 auto auto 0;
  offset-path: none;
  animation: sdx-energy-arc 6.2s linear infinite;
}

.sdx-first-rank::after {
  animation: none;
}

.sdx-card-first:is(:hover, :focus-within) .sdx-first-rank::after {
  animation: sdx-medal-shimmer 1.15s ease-out both;
}

.sdx-card-first:hover,
.sdx-card-first:focus-within,
.sdx-js .sdx-card-first.is-visible:is(:hover, :focus-within) {
  transform:
    perspective(900px)
    translateY(-3px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
}

.sdx-card-first .sdx-join-server {
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  animation: sdx-cta-gradient 4.8s ease-in-out infinite alternate;
}

.sdx-card-first .sdx-join-server:is(:hover, :focus-visible) {
  transform: translate3d(var(--magnet-x), calc(var(--magnet-y) - 2px), 0);
}

@keyframes sdx-energy-arc {
  from { opacity: .34; transform: translate3d(-120%, 0, 0); }
  45% { opacity: 1; }
  to { opacity: .34; transform: translate3d(calc(100vw - 80px), 0, 0); }
}

@media (hover: none), (pointer: coarse) {
  .sdx-card-first .sdx-card-bg::before,
  .sdx-card-first .sdx-join-server,
  .sdx-first-rank::after {
    animation: none;
  }

  .sdx-card-first:hover,
  .sdx-card-first:focus-within,
  .sdx-js .sdx-card-first.is-visible:is(:hover, :focus-within),
  .sdx-card-first .sdx-join-server,
  .sdx-card-first .sdx-join-server:is(:hover, :focus-visible) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdx-js:not(.is-motion-ready) :is(.sdx-overview, .sdx-console, .sdx-card-first),
  .sdx-js [data-sd-reveal] {
    opacity: 1;
    transform: none;
  }

  .sdx-stars,
  .sdx-card-first .sdx-card-bg::before,
  .sdx-card-first .sdx-join-server,
  .sdx-first-rank::after {
    animation: none;
  }
}