:root {
  color-scheme: dark;
  --bg: #07080c;
  --ink: #f7f7fb;
  --muted: #a9adba;
  --soft: #d6d9e4;
  --panel: rgba(14, 17, 25, 0.82);
  --panel-solid: #10131c;
  --panel-2: rgba(22, 26, 37, 0.78);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --violet: #8b5cf6;
  --pink: #f472b6;
  --cyan: #4dd7c8;
  --green: #45d483;
  --amber: #f4c95d;
  --danger: #ff6377;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* The topbar is fixed and 74px tall, so an anchor jump would otherwise
     park the target's heading underneath it. This offsets every anchor
     navigation - in-page links and scrollIntoView alike, which is what the
     feature planets use - so headings land clear of the header. */
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(77, 215, 200, 0.11), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(244, 114, 182, 0.09), transparent 28%),
    linear-gradient(180deg, #07080c, #0b0e16 42%, #07080c);
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(127, 0, 255, 0.86);
  outline-offset: 4px;
}
main { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 70px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  padding: 14px max(18px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(7, 8, 12, 0.82);
  backdrop-filter: blur(18px);
}
.brand, .nav { display: flex; align-items: center; gap: 12px; }
.brand { font-weight: 900; font-size: 18px; }
.mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--violet), var(--cyan));
  color: white;
  font-weight: 950;
  box-shadow: 0 16px 40px rgba(77, 215, 200, 0.2);
}
.premium-emoji {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 7px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  color: #f9f7ff;
  background:
    linear-gradient(135deg, rgba(255,54,217,0.55), rgba(67,230,212,0.52)),
    rgba(255,255,255,0.06);
  box-shadow: 0 10px 28px rgba(255,54,217,0.18);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0;
  vertical-align: middle;
  object-fit: cover;
}
.premium-emoji.small {
  width: 18px;
  height: 18px;
  font-size: 6px;
}
.nav .premium-emoji {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  font-size: 6px;
}
.bot-avatar {
  object-fit: cover;
  border: 1px solid var(--line-strong);
  background: var(--panel-solid);
}
.nav { gap: 4px; }
.nav a {
  color: var(--muted);
  padding: 9px 11px;
  border-radius: 8px;
  font-weight: 760;
}
.nav a:hover, .nav .active { color: var(--ink); background: rgba(255, 255, 255, 0.07); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #8b5cf6, #0cbfaf);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(29, 185, 166, 0.2);
}
.button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.62;
  transform: none;
}
.button.small { min-height: 36px; padding: 0 13px; font-size: 14px; }
.button.xl { min-height: 50px; padding: 0 20px; }
.button.ghost { background: rgba(255, 255, 255, 0.08); border-color: var(--line); box-shadow: none; }
.button.quiet { background: transparent; border-color: var(--line-strong); box-shadow: none; }
.button.small.ghost { color: var(--soft); }

.landing-page main { width: 100%; padding: 0; }
.slayya-world {
  --slayya-purple: #7f00ff;
  --black: #050505;
  --surface: #0d0d0f;
  --surface-raised: #141416;
  --world-text: #f5f5f5;
  --world-muted: #8a8a91;
  background: #050505;
  color: var(--world-text);
  cursor: none;
}

.slayya-world::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Flat page colour. This used to layer two centred radial gradients that
     faded to transparent at 24-28% radius, which lit the middle of the
     viewport and left the far left and right noticeably darker - reading as
     a gap or a panel inset into the page rather than one continuous
     background. The scene's own lighting comes from the WebGL disk. */
  background: #050505;
}


.slayya-world .topbar {
  position: fixed;
  inset: 0 0 auto;
  min-height: 74px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.82), rgba(5,5,5,0));
  backdrop-filter: none;
}

.slayya-world .brand {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
}

.slayya-world .mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d0d0f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 32px rgba(127,0,255,0.18);
}

.slayya-world .nav {
  gap: 20px;
}

.slayya-world .nav a {
  position: relative;
  padding: 0;
  border-radius: 0;
  color: rgba(245,245,245,0.62);
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.slayya-world .nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, var(--slayya-cyan), var(--slayya-purple));
  box-shadow: 0 0 18px rgba(0,245,255,0.35);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.slayya-world .nav a:hover,
.slayya-world .nav .active {
  color: #fff;
  background: transparent;
}

.slayya-world .nav a:hover::after,
.slayya-world .nav .active::after {
  transform: scaleX(1);
}

.slayya-world .nav .premium-emoji,
.slayya-world .nav .button.small {
  display: none;
}

.slayya-world main {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: transparent;
}

.slayya-world .site-footer {
  display: block;
}

.slayya-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background: #000;
  color: #f5f5f5;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.slayya-loader.done {
  opacity: 0;
  visibility: hidden;
  /* Must never intercept input once finished. Without this the loader stayed
     the topmost hit-test target over the whole viewport even after fading. */
  pointer-events: none;
}

/* Taken out of the page entirely once the fade has finished.
   Relying on opacity/visibility alone left a full-viewport #000 element
   stacked at z-index 100 above everything: any situation where the
   transition does not complete - a tab that was never painted, a stalled
   style recalc - leaves that black sheet sitting over the page. Removing it
   from layout means there is nothing left that can paint or intercept. */
.slayya-loader.gone {
  display: none;
}

.loader-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(0.85);
}

.slayya-loader i {
  width: min(220px, 48vw);
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,0.16);
}

.slayya-loader b {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--slayya-purple);
  transition: transform 0.24s ease;
}

.core-3d,
.core-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.core-3d {
  opacity: 1;
  background: transparent;
  /* Saturation only. contrast()/brightness() are affine on colour, so on a
     transparent canvas they lift fragments that should composite to nothing
     and leave a faint tint across the whole element - exactly the seam this
     layer must not have. Saturation scales toward luminance and leaves a
     zero-alpha, zero-light fragment at zero. */
  filter: saturate(1.25);
}

.guild-orbit-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  perspective: 1000px;
}

.guild-object {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 238px;
  max-width: min(360px, 78vw);
  padding: 11px 15px 11px 11px;
  color: rgba(255,255,255,0.94);
  background:
    linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0.035)),
    rgba(3,5,9,0.72);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(127,0,255,0.08),
    0 0 34px rgba(127,0,255,0.14),
    0 18px 60px rgba(0,0,0,0.48);
  opacity: 0;
  transform-origin: center;
  backdrop-filter: blur(18px);
  will-change: transform, opacity, filter;
}

.guild-object::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(127,0,255,0.42), rgba(0,219,255,0.16), rgba(255,255,255,0.08));
  opacity: 0.34;
  z-index: -1;
  filter: blur(14px);
}

.guild-object.visible {
  opacity: 0.88;
}

.guild-object img {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 24px rgba(127,0,255,0.26);
}

.guild-object span {
  display: grid;
  min-width: 0;
}

.guild-object b,
.guild-object i {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-object b {
  font-size: 15px;
  line-height: 1.08;
  letter-spacing: 0;
}

.guild-object i {
  margin-top: 5px;
  color: rgba(230,233,242,0.66);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 760px) {
  .guild-object {
    grid-template-columns: 34px minmax(0, 1fr);
    min-width: 158px;
    padding: 7px 10px 7px 7px;
  }

  .guild-object img {
    width: 34px;
    height: 34px;
  }

  .guild-object b {
    font-size: 11px;
  }

  .guild-object i {
    font-size: 9px;
  }
}

.core-fallback {
  display: none;
  place-items: center;
  perspective: 900px;
}

.core-fallback span {
  position: absolute;
  width: 220px;
  height: 420px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #171719, #080809);
  box-shadow: inset 0 0 0 1px rgba(127,0,255,0.08), 0 0 80px rgba(127,0,255,0.12);
  transform: rotateY(calc(var(--i, 0) * 36deg)) translateZ(80px);
}

.core-fallback span:nth-child(1) { --i: -1; }
.core-fallback span:nth-child(2) { --i: 0; }
.core-fallback span:nth-child(3) { --i: 1; }

.no-webgl .core-3d {
  display: none;
}

.no-webgl .core-fallback {
  display: grid;
}

/* ---------------------------------------------------------------------
   Landing layout. Apple-style hierarchy: the eyebrow, headline, lede,
   actions and stats form one left-aligned column, with the WebGL scene
   occupying the right half of the viewport. Type is sized for reading
   rather than for filling the screen - the old design used a 190px
   display face that left no room to breathe.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
.slayya-world Landing layout. Apple-style hierarchy: the eyebrow,
.slayya-world headline,
.slayya-world lede,
   actions and stats form one left-aligned column, with the WebGL scene
   occupying the right half of the viewport. Type is sized for reading
   rather than for filling the screen - the old design used a 190px
   display face that left no room to breathe.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Landing layout. Apple-style hierarchy: the eyebrow, headline, lede,
   actions and stats form one left-aligned column, with the WebGL scene
   occupying the right half of the viewport. Type is sized for reading
   rather than for filling the screen - the old design used a 190px
   display face that left no room to breathe.
   --------------------------------------------------------------------- */

.slayya-world .topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slayya-world .topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding-inline: max(24px, calc((100vw - 1320px) / 2));
}

.slayya-world .topbar .nav {
  justify-self: center;
}

.slayya-world .topbar-actions {
  justify-self: end;
}

.slayya-world .eyebrow-line {
  margin: 0 0 18px;
  /* Brand #7F00FF on near-black is 3.25:1 - below the 4.5:1 AA floor at
     this size. A lighter tint of the same hue clears it. */
  color: #a06bff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.slayya-world .hero,
.slayya-world .features,
.slayya-world .chapter,
.slayya-world .world-dashboard,
.slayya-world .world-final {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  opacity: var(--section-opacity, 1);
  filter: blur(var(--section-blur, 0));
  transform: translate3d(0, var(--section-y, 0), 0);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  will-change: opacity, filter, transform;
}

/* Hero copy sits in the left column; the black hole renders in the right
   half of the canvas behind it (see the `focus` uniform in landing3d). */
.slayya-world .hero {
  --section-opacity: 1;
  --section-y: 0px;
  --section-blur: 0px;
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding-top: 96px;
}

.slayya-world .hero-copy {
  max-width: 560px;
}

.slayya-world .hero h1 {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #fff;
  text-transform: none;
}

.slayya-world .hero h1 em {
  font-style: normal;
  color: var(--slayya-purple);
}

.slayya-world .hero-lede {
  max-width: 460px;
  margin: 22px 0 0;
  color: var(--world-muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

.slayya-world .hero-lede.centered {
  margin-inline: auto;
  text-align: center;
}

.slayya-world .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.slayya-world .hero-actions.centered {
  justify-content: center;
}

.slayya-world .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.slayya-world .cta.primary {
  color: #fff;
  background: var(--slayya-purple);
  box-shadow: 0 10px 40px rgba(127, 0, 255, 0.32);
}

.slayya-world .cta.primary:hover,
.slayya-world .cta.primary:focus-visible {
  background: #8f1aff;
  transform: translateY(-1px);
}

.slayya-world .cta.secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.slayya-world .cta.secondary:hover,
.slayya-world .cta.secondary:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.slayya-world .hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 52px;
}

.slayya-world .stat {
  display: grid;
  gap: 4px;
  min-width: 78px;
}

.slayya-world .stat b {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.slayya-world .stat span {
  color: var(--world-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Feature constellation ------------------------------------------------ */

.slayya-world .section-head {
  text-align: center;
  margin-bottom: 64px;
}

.slayya-world .section-head h2,
.slayya-world .chapter h2,
.slayya-world .world-dashboard h2,
.slayya-world .world-final h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-transform: none;
}

.slayya-world .features {
  padding: 16vh 0 12vh;
}

.slayya-world .planet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 48px 24px;
}

.slayya-world .planet-cell {
  position: relative;
  display: grid;
  justify-items: center;
}

.slayya-world .feature-orb {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: 8px;
  color: var(--world-text);
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Each planet gets its own body colour, ring tilt and moon offset so the
   six read as distinct worlds rather than six copies of one sphere. */
.slayya-world .orb-core {
  position: relative;
  width: clamp(88px, 9vw, 118px);
  height: clamp(88px, 9vw, 118px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5), transparent 42%),
    radial-gradient(circle at 50% 50%, var(--planet-a) 38%, var(--planet-b) 72%, #05050a 100%);
  box-shadow:
    inset -10px -12px 26px rgba(0,0,0,0.6),
    inset 6px 6px 18px rgba(255,255,255,0.10),
    0 0 42px var(--planet-glow);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.slayya-world .orb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 178%;
  height: 46%;
  border: 1px solid var(--planet-ring);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--ring-tilt, -18deg));
  box-shadow: 0 0 18px var(--planet-glow);
  opacity: 0.75;
}

.slayya-world .orb-moon {
  position: absolute;
  left: var(--moon-x, 92%);
  top: var(--moon-y, 12%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 0 12px rgba(255,255,255,0.5);
}

.planet-moderation { --planet-a: #a06bff; --planet-b: #3b1d78; --planet-glow: rgba(127,0,255,0.34); --planet-ring: rgba(178,140,255,0.5); --ring-tilt: -16deg; }
.planet-music      { --planet-a: #6aa8ff; --planet-b: #16306b; --planet-glow: rgba(74,140,255,0.28); --planet-ring: rgba(150,190,255,0.45); --ring-tilt: 14deg; --moon-x: 6%; --moon-y: 22%; }
.planet-economy    { --planet-a: #55d996; --planet-b: #10432c; --planet-glow: rgba(69,212,131,0.26); --planet-ring: rgba(140,235,190,0.42); --ring-tilt: -24deg; --moon-x: 88%; --moon-y: 78%; }
.planet-tickets    { --planet-a: #f2c766; --planet-b: #5c3d0d; --planet-glow: rgba(244,201,93,0.26); --planet-ring: rgba(248,222,160,0.42); --ring-tilt: 20deg; --moon-x: 10%; --moon-y: 74%; }
.planet-ai         { --planet-a: #ff7b7b; --planet-b: #5e1330; --planet-glow: rgba(255,99,119,0.26); --planet-ring: rgba(255,168,178,0.42); --ring-tilt: -10deg; --moon-x: 90%; --moon-y: 18%; }
.planet-utilities  { --planet-a: #5fd8d0; --planet-b: #0e4048; --planet-glow: rgba(77,215,200,0.26); --planet-ring: rgba(160,238,232,0.42); --ring-tilt: 26deg; --moon-x: 8%; --moon-y: 30%; }

.slayya-world .feature-orb .orb-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(245,245,245,0.86);
  transition: color 0.2s ease;
}

.slayya-world .feature-orb:hover .orb-core,
.slayya-world .feature-orb:focus-visible .orb-core {
  transform: scale(1.06) translateY(-4px);
  box-shadow:
    inset -10px -12px 26px rgba(0,0,0,0.55),
    inset 6px 6px 18px rgba(255,255,255,0.14),
    0 0 72px var(--planet-glow);
}

.slayya-world .feature-orb:hover .orb-label,
.slayya-world .feature-orb:focus-visible .orb-label {
  color: #fff;
}

.slayya-world .orb-panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 4;
  width: min(240px, 72vw);
  padding: 14px 16px;
  color: rgba(245,245,245,0.9);
  background: linear-gradient(150deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)), rgba(6,6,10,0.9);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  backdrop-filter: blur(20px);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.slayya-world .feature-orb[aria-expanded="true"] + .orb-panel {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Chapters ------------------------------------------------------------- */

.slayya-world .chapter {
  min-height: 78vh;
  display: grid;
  align-content: center;
  max-width: 620px;
  margin-left: max(24px, calc((100vw - 1320px) / 2));
}

.slayya-world .chapter.align-right {
  margin-left: auto;
  margin-right: max(24px, calc((100vw - 1320px) / 2));
}

.slayya-world .chapter-body {
  max-width: 520px;
  margin: 20px 0 0;
  color: var(--world-muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
}

.slayya-world .chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.slayya-world .chip-list li {
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: rgba(245,245,245,0.76);
  background: rgba(255,255,255,0.03);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.world-constellation {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
  width: min(1100px, calc(100% - 42px));
  margin: 0 auto;
  padding: 12vh 0 8vh;
}

.feature-orb {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 6px;
  color: var(--world-text);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.orb-core {
  width: clamp(52px, 6vw, 78px);
  height: clamp(52px, 6vw, 78px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.42), rgba(127,0,255,0.55) 46%, rgba(5,5,5,0.9) 78%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 0 26px rgba(127,0,255,0.32),
    0 0 60px rgba(127,0,255,0.16);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  /* No spin here. This rule predates the artwork planets and used to rotate
     the whole orb, which spun the planet image (and the caption text baked
     into it) around. Only the rings and moons orbit - see the
     slayya-ring-orbit / slayya-moon-orbit keyframes. */
}

.feature-orb .orb-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,245,245,0.7);
  transition: color 0.2s ease;
}

.feature-orb:hover .orb-core,
.feature-orb:focus-visible .orb-core {
  transform: scale(1.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 0 40px rgba(127,0,255,0.5),
    0 0 90px rgba(127,0,255,0.26);
}

.feature-orb:hover .orb-label,
.feature-orb:focus-visible .orb-label {
  color: #fff;
}

.orb-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  z-index: 4;
  width: min(240px, 60vw);
  padding: 12px 14px;
  color: rgba(245,245,245,0.88);
  background: linear-gradient(120deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)), rgba(3,5,9,0.86);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(127,0,255,0.1), 0 18px 44px rgba(0,0,0,0.5);
  backdrop-filter: blur(18px);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.feature-orb[aria-expanded="true"] + .orb-panel {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Dashboard preview: deliberately reuses the real dashboard components
   (.real-stat-card / .dashboard-tool-panel / .activity-list), so only the
   surrounding frame is styled here. Nothing below restyles the components
   themselves - the preview should look like the product, not like a
   prettier marketing version of it. */
.world-dashboard {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 42px));
  margin: 0 auto;
  padding: 14vh 0 10vh;
}

.world-dashboard h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.9;
  text-transform: uppercase;
}

.hero-lede.wide {
  max-width: 620px;
}

.dashboard-preview-frame {
  margin: 38px 0 34px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), rgba(8,8,11,0.72);
  box-shadow: inset 0 0 0 1px rgba(127,0,255,0.08), 0 30px 90px rgba(0,0,0,0.5);
  backdrop-filter: blur(18px);
}

.dashboard-preview-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.dashboard-preview-frame .dashboard-tool-panel h3 {
  margin: 6px 0 12px;
  color: #fff;
  font-size: 18px;
  line-height: 1.25;
}

.world-final {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding-bottom: 80px;
}

.world-final p {
  margin: 28px 0 0;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.final-actions {
  justify-content: center;
}

.world-final nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 70px;
}

.world-final nav a {
  color: rgba(245,245,245,0.5);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.world-final nav a:hover {
  color: #fff;
}

.core-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  background: #fff;
  mix-blend-mode: difference;
  transition: width 0.16s ease, height 0.16s ease, margin 0.16s ease, border 0.16s ease, background 0.16s ease;
}

.core-cursor.active {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(255,255,255,0.78);
  background: transparent;
}

.core-cursor.active::after {
  content: attr(data-state);
  position: absolute;
  left: 48px;
  top: 50%;
  color: rgba(255,255,255,0.86);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.18em;
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .slayya-loader,
  .cta,
  .hero,
  .features,
  .chapter,
  .world-dashboard,
  .world-final,
  .core-cursor,
  .orb-core,
  .feature-orb .orb-label,
  .orb-panel {
    transition: none;
  }
  .orb-core {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 980px) {
  .slayya-world {
    cursor: auto;
  }
  .core-cursor {
    display: none;
  }
  .slayya-world .topbar {
    position: fixed;
  }
  .slayya-world .nav {
    gap: 12px;
    overflow-x: auto;
  }
  .slayya-world .nav a {
    white-space: nowrap;
  }
  .chapter,
  .chapter.align-right {
    min-height: 96vh;
    margin-left: auto;
    margin-right: auto;
  }
  .world-constellation {
    gap: 26px;
    padding: 8vh 0 5vh;
  }
}

@media (max-width: 620px) {
  .hero,
  .features,
  .chapter,
  .world-final {
    width: min(100% - 28px, 1320px);
  }
  .chapter h2,
  .section-head h2,
  .world-final h2 {
    font-size: clamp(42px, 15vw, 76px);
  }
  .hero-actions {
    gap: 10px;
  }
  .world-constellation {
    gap: 20px 16px;
  }
  .orb-panel {
    width: min(200px, 70vw);
  }
  .hero-stats {
    gap: 20px 24px;
  }

  /* Mobile legibility and touch ergonomics. The desktop design leans on
     10-11px uppercase micro-labels, which fall below the 12px legible-text
     floor on phones, and the inline text links resolved to ~16px tall -
     well under the 48px minimum for a comfortable tap target. Sizes are
     raised only at this breakpoint so the desktop typography is unchanged. */
  .chip-list li,
  .stat span,
  .eyebrow-line,
  .feature-orb .orb-label,
  .world-final nav a,
  .slayya-world .nav a {
    font-size: 12px;
  }

  .cta,
  .world-final nav a,
  .slayya-world .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }

  .world-final nav {
    gap: 10px 20px;
  }

  .feature-orb {
    min-height: 48px;
    padding: 10px 6px;
  }

  /* The premium-emoji chips are icon stand-ins used when no custom emoji
     image is configured. Their 7px label is illegible on a phone, so they
     are raised to the same 12px floor as the rest of the mobile type.
     Scoped to the landing page so other dashboard pages keep their sizing. */
  .slayya-world .premium-emoji,
  .slayya-world .real-stat-card span .premium-emoji,
  .slayya-world .eyebrow .premium-emoji {
    font-size: 12px;
  }

  .slayya-world .brand {
    min-height: 48px;
  }

  /* Topbar CTAs use the shared .button.small sizing, which lands at ~36px
     - under the 44px comfortable-tap minimum on a phone. */
  .slayya-world .topbar-actions .button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Orbiting guild cards are decorative (aria-hidden) but still rendered
     text, so they are held to the same 12px legibility floor. */
  .slayya-world .guild-object b {
    font-size: 12px;
  }
}

.react-style-page {
  --bg: #050506;
  --ink: #fbfbfb;
  --muted: #a5a5ad;
  --soft: #e8e8ee;
  --panel: rgba(18, 18, 20, 0.78);
  --panel-solid: #111113;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
}
.react-style-page main {
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    #050506;
  background-size: 46px 46px;
}
.react-style-page .topbar {
  background: rgba(0, 0, 0, 0.56);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.react-style-page .site-footer {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.62);
}

.igloo-page {
  --bg: #050607;
  --ink: #f7f7f1;
  --muted: #9ea5a4;
  --soft: #dfe8e4;
  --line: rgba(226, 239, 232, 0.12);
  --line-strong: rgba(226, 239, 232, 0.22);
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    #050607;
  background-size: 68px 68px;
}
.igloo-page .topbar {
  background: rgba(5, 6, 7, 0.74);
  border-bottom-color: rgba(226, 239, 232, 0.1);
}
.igloo-page main,
.igloo-page .site-footer {
  position: relative;
  z-index: 1;
}
.ice-3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
}
.ice-hero {
  width: min(1320px, calc(100% - 34px));
  min-height: calc(100vh - 70px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(430px, 0.72fr);
  gap: 28px;
  align-items: center;
  padding: 70px 0 62px;
}
.ice-hero-copy h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(58px, 8.5vw, 132px);
  line-height: 0.82;
  letter-spacing: 0;
}
.ice-hero-copy p {
  max-width: 700px;
  margin: 26px 0 0;
  color: var(--soft);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.42;
  font-weight: 640;
}
.ice-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 28px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(14px);
  font-size: 14px;
  font-weight: 900;
}
.ice-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
}
.ice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.center-actions {
  justify-content: center;
}
.ice-hero-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  perspective: 1200px;
}
.ice-card {
  min-height: 190px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    rgba(8, 12, 12, 0.74);
  box-shadow: 0 32px 90px rgba(0,0,0,0.34);
  transform: rotateX(4deg) rotateY(-6deg);
}
.ice-card:nth-child(even) {
  transform: rotateX(2deg) rotateY(5deg) translateY(22px);
}
.ice-card.tall { min-height: 310px; }
.ice-card.wide { grid-column: span 2; min-height: 150px; }
.ice-card span,
.ice-bento span {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 950;
}
.ice-card b {
  font-size: 28px;
}
.ice-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.ice-strip {
  width: min(1320px, calc(100% - 34px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ice-strip span {
  min-height: 74px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-weight: 950;
}
.ice-strip span:last-child {
  border-right: 0;
}
.ice-section {
  width: min(1320px, calc(100% - 34px));
  margin: 0 auto;
  padding: 110px 0 70px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.7fr);
  gap: 36px;
  align-items: end;
}
.ice-section-copy h2,
.ice-final h2 {
  margin: 0;
  font-size: clamp(42px, 7vw, 92px);
  line-height: 0.9;
}
.ice-section-copy p:not(.eyebrow),
.ice-final p {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}
.ice-terminal {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(16px);
}
.ice-terminal div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}
.ice-terminal span {
  color: var(--muted);
  text-align: right;
}
.ice-bento {
  width: min(1320px, calc(100% - 34px));
  margin: 0 auto;
  padding: 42px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ice-bento article {
  min-height: 260px;
  display: grid;
  align-content: space-between;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.052);
  backdrop-filter: blur(14px);
}
.ice-bento h2 {
  margin: 0;
  font-size: 38px;
}
.ice-bento p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}
.ice-final {
  width: min(980px, calc(100% - 34px));
  margin: 0 auto;
  padding: 96px 0 112px;
  text-align: center;
}

.commands-page {
  background:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px),
    #050607;
  background-size: 54px 54px;
}
.commands-page main {
  width: min(1420px, calc(100% - 28px));
  padding-top: 22px;
}
.catalog-commands-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.catalog-command-nav {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 11, 13, 0.82);
  backdrop-filter: blur(16px);
}
.mini-brand {
  width: fit-content;
}
.catalog-nav-block {
  display: grid;
  gap: 6px;
}
.catalog-nav-block > b {
  padding: 0 8px 8px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.catalog-command-nav a:not(.brand) {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 850;
}
.catalog-command-nav a:hover,
.catalog-command-nav a.active {
  color: var(--ink);
  background: rgba(255,255,255,0.07);
}
.catalog-command-nav b {
  color: var(--soft);
}
.catalog-command-main {
  display: grid;
  gap: 18px;
}
.catalog-command-hero {
  min-height: 320px;
  display: grid;
  align-content: end;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(77,215,200,0.18), rgba(139,92,246,0.08) 46%, rgba(255,255,255,0.035)),
    rgba(8, 10, 12, 0.82);
  box-shadow: var(--shadow);
}
.catalog-command-hero h1 {
  margin: 0;
  font-size: clamp(64px, 11vw, 156px);
  line-height: 0.82;
}
.catalog-command-hero p:not(.eyebrow) {
  max-width: 650px;
  margin: 18px 0 0;
  color: var(--soft);
  font-size: 20px;
  line-height: 1.5;
}
.catalog-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}
.catalog-search-row input {
  min-height: 54px;
  font-size: 17px;
  background: rgba(0, 0, 0, 0.46);
}
.catalog-search-row span {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(0,0,0,0.28);
  font-weight: 900;
}
.catalog-command-group {
  display: grid;
  gap: 12px;
}
.catalog-group-head {
  display: flex;
  align-items: end;
  gap: 12px;
  padding-top: 16px;
}
.catalog-group-head span {
  color: var(--cyan);
  font-weight: 950;
}
.catalog-group-head h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
}
.catalog-command-list {
  display: grid;
  gap: 10px;
}
.catalog-command-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.catalog-command-row:hover {
  transform: translateY(-1px);
  border-color: rgba(77,215,200,0.28);
  background: rgba(255,255,255,0.065);
}
.catalog-command-row h3 {
  margin: 0;
  font-size: 24px;
}
.catalog-command-row p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.5;
}
.catalog-command-row > a {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--soft);
  font-weight: 900;
  background: rgba(0,0,0,0.24);
}
.catalog-command-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.re-page-3d {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}
.react-style-page main > section {
  position: relative;
  z-index: 1;
}
.re-hero {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 92px 0 56px;
  text-align: center;
}
.re-hero-full {
  min-height: calc(100vh - 70px);
  display: grid;
  align-items: center;
  padding: 58px 0 76px;
  text-align: left;
}
.re-hero-copy {
  width: min(640px, 100%);
}
.re-product-icon {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: 1px solid rgba(77, 215, 200, 0.36);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(77, 215, 200, 0.34), transparent 62%),
    rgba(6, 18, 22, 0.78);
  box-shadow:
    inset 0 0 28px rgba(77, 215, 200, 0.22),
    0 30px 90px rgba(0, 206, 255, 0.18);
}
.re-product-avatar {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  object-fit: cover;
}
.re-pill-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.re-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.045);
  font-size: 13px;
  font-weight: 850;
}
.re-pill-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.re-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(46px, 6.3vw, 76px);
  line-height: 0.92;
  letter-spacing: 0;
}
.re-subtitle {
  max-width: 610px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.48;
  font-weight: 620;
}
.re-actions {
  justify-content: flex-start;
}
.re-primary {
  color: #050506;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(255, 255, 255, 0.13);
}
.re-command {
  color: #d9dee8;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.re-3d-stage {
  position: relative;
  width: min(1040px, 100%);
  height: clamp(360px, 48vw, 560px);
  margin: 46px auto 0;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(77, 215, 200, 0.16), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
}
.re-3d-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.re-3d-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,6,0.72), transparent 22%, transparent 78%, rgba(5,5,6,0.72)),
    linear-gradient(0deg, rgba(5,5,6,0.72), transparent 26%, transparent 74%, rgba(5,5,6,0.55));
}
.re-3d-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: grid;
  gap: 4px;
  max-width: min(360px, calc(100% - 36px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(5, 5, 6, 0.72);
  backdrop-filter: blur(14px);
  text-align: left;
}
.re-3d-caption b {
  color: var(--ink);
}
.re-3d-caption span {
  font-size: 13px;
  line-height: 1.45;
}
.re-shell-preview {
  margin: 36px auto 0;
  width: min(980px, 100%);
}
.re-window {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(12, 12, 14, 0.92);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.56);
  text-align: left;
}
.re-window-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
}
.re-window-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.26);
}
.re-window-top b {
  margin-left: 8px;
  font-size: 13px;
}
.re-code-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
}
.re-code-grid pre {
  margin: 0;
  min-height: 360px;
  padding: 28px;
  border-right: 1px solid var(--line);
  color: #f2f2f5;
  background: rgba(0, 0, 0, 0.22);
  white-space: pre-wrap;
  line-height: 1.62;
  font-size: 15px;
}
.re-output {
  display: grid;
  gap: 12px;
  align-content: center;
  padding: 28px;
}
.re-output > span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}
.re-output i {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
  font-weight: 850;
}
.re-logo-strip {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}
.re-logo-strip span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-weight: 900;
}
.re-section {
  padding-top: 92px;
}
.re-tool-section {
  padding-top: 118px;
}
.re-section-head {
  max-width: 780px;
  margin: 0 auto 28px;
  text-align: center;
}
.re-section-head h2 {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 74px);
  line-height: 0.96;
}
.re-section-head .big {
  margin-inline: auto;
  max-width: 720px;
}
.re-feature-grid .feature-card,
.re-command-grid .command-card,
.re-doc-card {
  background: rgba(12, 12, 14, 0.82);
  border-color: var(--line);
  backdrop-filter: blur(14px);
}
.re-floating-window {
  width: min(980px, 100%);
  margin: 42px auto 0;
}
.re-feature-grid .feature-card {
  min-height: 235px;
}
.re-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.re-doc-card {
  min-height: 330px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.re-doc-card h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 0.96;
}
.re-doc-card p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
.muted-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    rgba(12, 12, 14, 0.76);
}
.re-final-cta {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 88px 0 96px;
  text-align: center;
}
.re-final-cta h2 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.94;
}
.re-final-cta p {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.5;
}
.hero {
  position: relative;
  min-height: calc(100vh - 70px);
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: min(12vh, 110px) max(24px, calc((100vw - 1240px) / 2)) 76px;
}
/* REMOVED: .hero-media and .hero::after.
 *
 * These belonged to an earlier hero design built around a edge-to-edge
 * background photo (/slayya-hero.png) with a dark scrim over it for text
 * legibility. `.hero-media` no longer appears in any markup, but `.hero::after`
 * kept applying because the current landing section reuses the `.hero` class -
 * and it was THE hero "glass pane":
 *
 *   position: absolute; inset: 0; z-index: -1;
 *   background: linear-gradient(90deg, rgba(7,8,12,0.94) ...)
 *
 * It painted rgb(7,8,12) at up to 94% opacity across a box measured at
 * exactly [24, 0, 652, 900] - the hero's own bounds - over a page that is
 * rgb(5,5,5). Hence a hard-edged rectangle in a slightly different dark tone,
 * inset 24px on each side by the hero's own max-width, which is also what
 * produced the "gap" down the left and right. It sat at z-index -1, behind
 * the copy but in front of the page background, so no amount of WebGL
 * transparency work could affect it.
 *
 * The scrim is not needed now: the hero copy sits on the left where the
 * scene is dark, and the black hole renders on the right. */
.hero-copy {
  width: min(780px, 100%);
  padding-bottom: 10px;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--cyan);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 950;
}
.hero h1 {
  margin: 0;
  font-size: clamp(74px, 13vw, 178px);
  line-height: 0.84;
  letter-spacing: 0;
}
.hero-subtitle {
  max-width: 700px;
  margin: 24px 0 0;
  color: var(--soft);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.38;
  font-weight: 660;
}
.hero-actions, .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.hero-proof span, .pill, code {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.hero-proof span {
  padding: 9px 11px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}

.landing-band, .feature-section {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 72px 0;
}
.command-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(9, 12, 18, 0.86);
  box-shadow: var(--shadow);
}
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.preview-toolbar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.preview-toolbar b { margin-left: 8px; color: var(--soft); }
.preview-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 370px; }
.preview-layout aside {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}
.preview-layout aside b { margin-bottom: 12px; }
.preview-layout aside span { color: var(--muted); padding: 10px; border-radius: 8px; }
.preview-layout aside .active { color: var(--ink); background: rgba(77, 215, 200, 0.13); }
.preview-main { display: grid; gap: 16px; align-content: start; padding: 24px; }
.mini-strip, .preview-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini-strip div, .preview-row div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.045);
}
.mini-strip small, .preview-row small { color: var(--muted); font-weight: 800; }
.mini-strip b, .preview-row b { display: block; margin-top: 10px; font-size: 24px; }
.save-line {
  border: 1px solid rgba(69, 212, 131, 0.28);
  border-radius: 8px;
  padding: 14px;
  color: #b9ffd5;
  background: rgba(69, 212, 131, 0.09);
  font-weight: 850;
}
.save-line span {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--green);
}

.section-head { max-width: 720px; margin-bottom: 24px; }
.section-head h2, .split-feature h2, .page-head h1, .guild-shell h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.98;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.command-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.command-card {
  min-height: 210px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}
.command-card h3 { margin: 0; font-size: 22px; }
.command-card p { min-height: 52px; color: var(--muted); line-height: 1.5; }
.command-card div, .command-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.feature-card, .signal-list div, .panel, .server-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
  box-shadow: var(--shadow);
}
.feature-card { min-height: 210px; padding: 22px; }
.feature-card h3 { margin: 0; font-size: 24px; }
.feature-card p { color: var(--muted); line-height: 1.6; font-size: 16px; }
.split-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 30px;
  align-items: start;
}
.big { font-size: 18px; line-height: 1.7; }
.muted { color: var(--muted); }
.signal-list { display: grid; gap: 12px; }
.signal-list div { padding: 18px; }
.signal-list b, .signal-list span { display: block; }
.signal-list span { margin-top: 6px; color: var(--muted); line-height: 1.5; }

.page-head { margin: 28px 0 22px; }
.premium-head {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(77,215,200,0.08));
}
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.server-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.server-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(77, 215, 200, 0.08), transparent 38%, rgba(244, 201, 93, 0.05));
  opacity: 0;
  transition: opacity 0.18s ease;
}
.server-card > * { position: relative; }
.server-card:hover {
  transform: translateY(-2px);
  border-color: rgba(77, 215, 200, 0.28);
}
.server-card:hover::before { opacity: 1; }
.server-card .button { min-width: 92px; }
.server-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.server-tags span {
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  font-size: 11px;
  font-weight: 900;
}
.server-card h2 { margin: 0; font-size: 18px; }
.server-card p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.server-icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--panel-solid);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 950;
}
.server-icon img { width: 100%; height: 100%; object-fit: cover; }
.muted-pill { color: var(--muted); padding: 7px 9px; font-size: 13px; }
.toast {
  position: fixed;
  right: 20px;
  top: 82px;
  z-index: 30;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(69, 212, 131, 0.3);
  background: rgba(13, 32, 24, 0.94);
  color: #ccffde;
  box-shadow: var(--shadow);
}

.dashboard-page main {
  display: grid;
  gap: 20px;
}
.dashboard-page,
.landing-page {
  cursor: url("/slayya-cursor-24.png") 4 4, url("/slayya-cursor-32.png") 6 6, auto;
}
.dashboard-page a,
.dashboard-page button,
.dashboard-page select,
.dashboard-page label,
.dashboard-page [role="button"],
.landing-page a,
.landing-page button,
.landing-page select,
.landing-page label,
.landing-page [role="button"] {
  cursor: url("/slayya-cursor-24.png") 4 4, url("/slayya-cursor-32.png") 6 6, pointer;
}
.bump-redeem-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.bump-redeem-actions form,
.bump-redeem-actions button {
  width: 100%;
}
.bump-redeem-actions button:disabled {
  opacity: 0.42;
}
.guild-dashboard-page {
  --guild-black: #050505;
  --guild-ink: #f6f8fb;
  --guild-muted: rgba(226, 232, 240, 0.66);
  --guild-cyan: #4df0dc;
  --guild-violet: #7f00ff;
  min-height: 100vh;
  background: #050505;
  color: var(--guild-ink);
  overflow-x: hidden;
}
.guild-dashboard-page::before,
.guild-dashboard-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.guild-dashboard-page::before {
  z-index: 0;
  background:
    radial-gradient(ellipse 92vw 56vh at 50% 10%, rgba(255,255,255,0.12), transparent 27%),
    radial-gradient(ellipse 120vw 72vh at 50% 18%, rgba(127,0,255,0.30), transparent 46%),
    radial-gradient(ellipse 112vw 60vh at 48% 26%, rgba(77,240,220,0.17), transparent 48%),
    conic-gradient(from 118deg at 50% 19%, transparent 0 42deg, rgba(127,0,255,0.34) 58deg 92deg, transparent 114deg 186deg, rgba(77,240,220,0.20) 205deg 238deg, transparent 262deg 360deg),
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 18%, transparent 74%, rgba(127,0,255,0.05));
  opacity: 1;
  transform-origin: 50% 20%;
  animation: guildCoreBreathe 16s ease-in-out infinite alternate;
}
.guild-dashboard-page::after {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(5,5,5,1), transparent 10%, transparent 90%, rgba(5,5,5,1)),
    linear-gradient(180deg, rgba(5,5,5,0.02), transparent 30%, rgba(5,5,5,0.90)),
    linear-gradient(120deg, transparent 0 28%, rgba(255,255,255,0.045) 34%, transparent 43%),
    linear-gradient(250deg, transparent 0 44%, rgba(127,0,255,0.10) 50%, transparent 62%);
  opacity: 0.88;
}
.guild-dashboard-page .topbar,
.guild-dashboard-page main,
.guild-dashboard-page .site-footer {
  position: relative;
  z-index: 1;
}
.guild-dashboard-page .topbar {
  border-bottom-color: rgba(255,255,255,0.075);
  background: linear-gradient(180deg, rgba(5,5,5,0.92), rgba(5,5,5,0.56), rgba(5,5,5,0));
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}
.guild-3d-bg {
  display: none;
}
.guild-dashboard-page main {
  isolation: isolate;
  width: min(1680px, calc(100% - 28px));
  padding-top: 28px;
}

@keyframes guildCoreBreathe {
  from {
    filter: saturate(1.05) brightness(0.95);
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    filter: saturate(1.34) brightness(1.12);
    transform: translate3d(0, 1.5%, 0) scale(1.045) rotate(1.2deg);
  }
}
.neon-dashboard-page {
  --neon-bg: #050709;
  --neon-card: rgba(9, 16, 18, 0.82);
  --neon-card-2: rgba(5, 8, 11, 0.86);
  --neon-pink: #46f4dc;
  --neon-purple: #65a7ff;
  --neon-coral: #7ef7ba;
  --neon-cyan: #45f0d5;
}

.real-dashboard-page {
  background:
    radial-gradient(circle at 18% 4%, rgba(69,240,213,0.10), transparent 28%),
    linear-gradient(180deg, #050709, #070b0f 42%, #050709);
}
.real-dashboard-page main {
  width: min(1240px, calc(100% - 32px));
}
.real-dashboard-hero {
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(8, 12, 15, 0.82);
  box-shadow: 0 28px 90px rgba(0,0,0,0.42);
}
.real-dashboard-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.real-dashboard-head h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
}
.real-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.real-stat-card,
.real-panel {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.real-stat-card {
  min-height: 138px;
  padding: 16px;
  grid-column: span 2;
}
.real-stat-card span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  font-weight: 850;
}

.real-stat-card span .premium-emoji {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-right: 0;
  overflow: hidden;
  font-size: 7px;
  line-height: 1;
}
.real-stat-card b {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 38px;
  line-height: 1;
}
.real-stat-card p,
.real-panel p {
  margin: 10px 0 0;
  color: rgba(255,255,255,0.62);
}
.real-dashboard-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.real-panel {
  padding: 18px;
}
.real-panel h2 {
  margin: 0 0 12px;
  font-size: 20px;
}
.activity-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.activity-list li:first-child {
  border-top: 0;
}
.activity-list b {
  color: #fff;
}
.activity-list span,
.activity-list time {
  color: rgba(255,255,255,0.58);
  font-size: 12px;
}
.activity-list span {
  grid-column: 1 / -1;
}

.dashboard-app-page {
  background:
    radial-gradient(ellipse 86vw 54vh at 58% 0%, rgba(255,255,255,0.08), transparent 30%),
    radial-gradient(ellipse 120vw 72vh at 50% 8%, rgba(127,0,255,0.24), transparent 46%),
    radial-gradient(ellipse 100vw 58vh at 42% 22%, rgba(77,240,220,0.12), transparent 50%),
    linear-gradient(180deg, #020303, #050506 48%, #020303);
}

.dashboard-command-center {
  display: grid;
  gap: 18px;
  background:
    linear-gradient(135deg, rgba(12, 18, 22, 0.94), rgba(7, 10, 14, 0.94)),
    rgba(8, 12, 15, 0.86);
}

.dashboard-stats-only {
  margin-top: 34px;
}

.dashboard-live-shell {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(2,3,3,0.90), rgba(2,3,3,0.56) 43%, rgba(2,3,3,0.24)),
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent 24%, rgba(127,0,255,0.05)),
    rgba(2,3,3,0.72);
  box-shadow: 0 40px 140px rgba(0,0,0,0.62);
}

.dashboard-live-shell #dashboard-live-3d {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  opacity: 0.92;
  pointer-events: none;
}

.dashboard-live-shell::before,
.dashboard-live-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.dashboard-live-shell::before {
  background:
    radial-gradient(circle at 72% 44%, transparent 0 26%, rgba(2,3,3,0.14) 45%, rgba(2,3,3,0.72) 100%),
    linear-gradient(90deg, rgba(2,3,3,0.94), rgba(2,3,3,0.56) 28%, transparent 74%);
}

.dashboard-live-shell::after {
  background:
    linear-gradient(180deg, rgba(2,3,3,0.04), transparent 48%, rgba(2,3,3,0.72)),
    linear-gradient(90deg, rgba(2,3,3,0.76), transparent 18%, transparent 88%, rgba(2,3,3,0.68));
}

.dashboard-live-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
}

.dashboard-live-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-live-head h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.9;
}

.dashboard-user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(5, 7, 11, 0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

.dashboard-user-chip img,
.dashboard-user-chip .small {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
}

.dashboard-user-chip span {
  color: rgba(255,255,255,0.62);
  font-size: 13px;
  font-weight: 850;
}

.dashboard-user-chip b {
  display: block;
  color: white;
  font-size: 16px;
}

.dashboard-stat-grid {
  margin-top: 8px;
}

.dashboard-live-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-live-overview span {
  min-height: 74px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.64);
  font-weight: 850;
}

.dashboard-live-overview b {
  display: block;
  color: #fff;
  font-size: 28px;
}

.dashboard-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 14px;
  margin-top: 14px;
}

.dashboard-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.82fr);
  gap: 14px;
  margin-top: 14px;
}

.dashboard-route-card {
  min-height: 280px;
  display: grid;
  align-content: space-between;
}

.dashboard-route-card h2 {
  max-width: 760px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
}

.primary-route {
  grid-row: span 2;
  background:
    radial-gradient(circle at 18% 0%, rgba(69, 240, 213, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
}

.route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.dashboard-tool-panel {
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 24px 80px rgba(0,0,0,0.28);
}

.dashboard-tool-panel h2 {
  margin: 0;
  font-size: 24px;
}

.dashboard-side-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.dashboard-search {
  width: 100%;
  height: 48px;
  margin: 14px 0;
  border: 1px solid rgba(69,240,213,0.18);
  border-radius: 8px;
  background: rgba(4, 7, 11, 0.78);
  color: #fff;
  padding: 0 15px;
  font: inherit;
  font-weight: 850;
}

.dashboard-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-command-card {
  min-height: 120px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

.dashboard-command-card[hidden] {
  display: none;
}

.dashboard-command-card span {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 8px;
  color: rgba(255,255,255,0.72);
  background: rgba(69,240,213,0.10);
  font-size: 11px;
  font-weight: 950;
}

.dashboard-command-card b {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: 22px;
}

.dashboard-command-card p {
  margin: 8px 0 0;
  color: rgba(255,255,255,0.60);
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-server-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.dashboard-server-mini {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

.dashboard-server-mini b,
.dashboard-server-mini span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-server-mini span {
  color: rgba(255,255,255,0.58);
  font-size: 12px;
}

.dashboard-server-mini .button,
.dashboard-server-mini .pill {
  min-width: 72px;
}

.activity-list.compact li {
  grid-template-columns: 1fr;
}

.dashboard-app-page .real-dashboard-head {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dashboard-app-page .real-dashboard-head h1 {
  max-width: 760px;
  font-size: clamp(36px, 5vw, 64px);
}

.dashboard-app-page .real-dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-app-page .real-stat-card {
  min-height: 112px;
  padding: 15px;
  grid-column: span 1;
  background: rgba(255,255,255,0.045);
}

.dashboard-app-page .real-stat-card b {
  margin-top: 10px;
  font-size: 34px;
}

.dashboard-app-page .real-stat-card p {
  margin-top: 8px;
  font-size: 12px;
}

.control-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.control-summary span {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  font-weight: 850;
}

.control-summary b {
  color: #fff;
  font-size: 24px;
}

.dashboard-app-page .real-dashboard-split {
  margin-top: 0;
}

.dashboard-app-page .server-head {
  margin-top: 26px;
}

.dashboard-app-page .server-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dash-server-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.dash-server-card h2 {
  margin: 0;
  font-size: 16px;
}

.dash-server-card p {
  margin: 3px 0 8px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
}

.dash-server-card .button {
  min-width: 86px;
}

.guild-dashboard-page .guild-3d-bg {
  display: none;
}

.guild-dashboard-page .guild-shell {
  gap: 18px;
}

.guild-dashboard-page .sidebar {
  position: relative;
  overflow: hidden;
  gap: 14px;
  border-color: rgba(255,255,255,0.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.028)),
    rgba(5,5,5,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 36px 120px rgba(0,0,0,0.52),
    0 0 80px rgba(127,0,255,0.075);
  backdrop-filter: blur(28px) saturate(1.2);
}

.guild-dashboard-page .sidebar::before {
  content: "";
  position: absolute;
  width: min(62vw, 860px);
  height: min(62vw, 860px);
  right: -24%;
  top: -84%;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(-12deg);
  box-shadow:
    inset 0 0 80px rgba(127,0,255,0.16),
    0 0 120px rgba(127,0,255,0.10);
  opacity: 0.72;
}

.guild-dashboard-page .sidebar::after {
  content: "";
  position: absolute;
  inset: auto 7% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), rgba(127,0,255,0.54), transparent);
  opacity: 0.9;
}

.guild-dashboard-page .rail-links {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 4px 10px;
  scrollbar-width: thin;
}

.guild-dashboard-page .rail-links a {
  display: grid;
  align-content: center;
  gap: 7px;
  flex: 0 0 176px;
  min-height: 82px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.092), rgba(255,255,255,0.026)),
    rgba(5,5,5,0.76);
  color: rgba(235,239,247,0.68);
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.guild-dashboard-page .rail-links a span,
.guild-dashboard-page .rail-links a b {
  display: flex;
  align-items: center;
  min-width: 0;
}

.guild-dashboard-page .rail-links a b {
  color: rgba(235,239,247,0.46);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-dashboard-page .rail-links a:hover,
.guild-dashboard-page .rail-links a.active {
  transform: translateY(-2px);
  border-color: rgba(127,0,255,0.45);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(127,0,255,0.20)),
    rgba(5,5,5,0.84);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 20px 64px rgba(127,0,255,0.14);
}

.guild-dashboard-page .rail-links a.active b {
  color: rgba(255,255,255,0.72);
}

.guild-signal-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.guild-signal-row .rail-toggle {
  min-height: 40px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(3,4,5,0.48);
  backdrop-filter: blur(12px);
}

.guild-active-module {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(255,255,255,0.09), transparent 38%),
    linear-gradient(275deg, rgba(127,0,255,0.18), transparent 42%),
    rgba(5,5,5,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 24px 90px rgba(0,0,0,0.42);
  backdrop-filter: blur(26px) saturate(1.18);
}

.guild-active-module::after {
  content: "";
  position: absolute;
  inset: auto 4% -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), rgba(127,0,255,0.58), transparent);
}

.guild-active-module h2 {
  margin: 2px 0 4px;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.95;
}

.guild-active-module .save-dock {
  min-width: 230px;
  margin: 0;
}
.guild-live-meter {
  display: grid;
  gap: 7px;
  width: min(220px, 20vw);
  min-width: 150px;
}
.guild-live-meter span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(77,240,220,0.95), rgba(127,0,255,0.88), rgba(255,255,255,0.55)),
    rgba(255,255,255,0.08);
  box-shadow: 0 0 24px rgba(77,240,220,0.12);
  transform-origin: left;
}
.guild-live-meter span:nth-child(1) { transform: scaleX(0.84); }
.guild-live-meter span:nth-child(2) { transform: scaleX(0.62); opacity: 0.72; }
.guild-live-meter span:nth-child(3) { transform: scaleX(0.92); opacity: 0.46; }

.guild-dashboard-page .guild-tab-panel {
  display: none;
  animation: guildPanelIn 0.22s ease both;
}

.guild-dashboard-page .guild-tab-panel.active {
  display: grid;
}

.guild-premium-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.guild-premium-board article {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.095), transparent 35%),
    linear-gradient(330deg, rgba(127,0,255,0.16), transparent 42%),
    rgba(5,5,5,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.075),
    0 28px 90px rgba(0,0,0,0.46);
  backdrop-filter: blur(26px) saturate(1.15);
}

.guild-premium-board article::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -68px;
  bottom: -86px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: rotateX(64deg);
  box-shadow: inset 0 0 54px rgba(127,0,255,0.18);
}

.guild-premium-board span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  color: var(--guild-muted);
  font-size: 13px;
  font-weight: 950;
}

.guild-premium-board b {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 22px;
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.95;
}

.guild-premium-board em {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,0.58);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.guild-feature-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.guild-feature-wall a {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(77,240,220,0.14), transparent 36%),
    radial-gradient(circle at 94% 18%, rgba(127,0,255,0.16), transparent 36%),
    linear-gradient(150deg, rgba(255,255,255,0.082), rgba(255,255,255,0.024)),
    rgba(5,5,5,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 24px 80px rgba(0,0,0,0.32);
  backdrop-filter: blur(24px) saturate(1.14);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.guild-feature-wall a:hover,
.guild-feature-wall a.active {
  transform: translateY(-2px);
  border-color: rgba(77,240,220,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 30px 110px rgba(77,240,220,0.10);
}

.guild-feature-wall span {
  display: flex;
  align-items: center;
  color: rgba(235,239,247,0.68);
  font-size: 13px;
  font-weight: 950;
}

.guild-feature-wall b {
  display: block;
  max-width: 330px;
  margin-top: 20px;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.05;
}

.guild-feature-wall em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-top: 14px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.055);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

@keyframes guildPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.guild-dashboard-page .status-strip {
  gap: 8px;
}

.guild-dashboard-page .status-strip div {
  min-height: 72px;
  padding: 12px;
  border-color: rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.082), rgba(255,255,255,0.022)),
    rgba(5,5,5,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  backdrop-filter: blur(16px);
}

.guild-dashboard-page .overview-grid,
.guild-dashboard-page .two-col {
  gap: 12px;
}

.guild-dashboard-page .settings-panel {
  padding: 16px;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,0.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), transparent 32%),
    linear-gradient(230deg, rgba(127,0,255,0.12), transparent 42%),
    rgba(5,5,5,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 22px 72px rgba(0,0,0,0.42);
  backdrop-filter: blur(26px) saturate(1.15);
}

.guild-dashboard-page .panel {
  border-color: rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.078), rgba(255,255,255,0.022)),
    rgba(5,5,5,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 64px rgba(0,0,0,0.26);
  backdrop-filter: blur(24px) saturate(1.15);
}

.guild-dashboard-page .settings-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent 18%, transparent 82%, rgba(127,0,255,0.18));
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.guild-dashboard-page .settings-panel:hover::before {
  opacity: 1;
}

.guild-dashboard-page .settings-panel .panel-title {
  position: relative;
  align-items: start;
  gap: 12px;
  min-height: 0;
  margin-bottom: 12px;
}

.guild-dashboard-page .settings-panel .panel-title h2 {
  font-size: 20px;
}

.guild-dashboard-page .settings-panel .panel-title p {
  margin-top: 4px;
  max-width: 580px;
  font-size: 13px;
}

.guild-dashboard-page .settings-panel label {
  position: relative;
  gap: 6px;
  margin-top: 9px;
}

.guild-dashboard-page .settings-panel input:not([type="checkbox"]),
.guild-dashboard-page .settings-panel select:not([multiple]) {
  min-height: 42px;
  padding: 10px 12px;
  border-color: rgba(255,255,255,0.10);
  background: rgba(2,4,5,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.guild-dashboard-page .settings-panel textarea {
  min-height: 78px;
  border-color: rgba(255,255,255,0.10);
  background: rgba(2,4,5,0.72);
}

.guild-dashboard-page .settings-panel select[multiple] {
  max-height: 142px;
  border-color: rgba(255,255,255,0.10);
  background: rgba(2,4,5,0.72);
}

.ticket-command-center {
  display: grid;
  gap: 16px;
  overflow: hidden;
  border-color: rgba(69,240,213,0.22);
  background:
    radial-gradient(circle at 16% 12%, rgba(69,240,213,0.16), transparent 36%),
    radial-gradient(circle at 92% 20%, rgba(127,0,255,0.16), transparent 34%),
    linear-gradient(135deg, rgba(14,22,24,0.94), rgba(8,9,15,0.96));
}

.ticket-hero {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
}

.ticket-hero h2 {
  margin: 4px 0 8px;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 0.95;
}

.ticket-score {
  min-width: 118px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.ticket-score b {
  display: block;
  font-size: 36px;
  color: #fff;
}

.ticket-score span {
  color: rgba(255,255,255,0.64);
  font-size: 12px;
  font-weight: 900;
}

.ticket-metrics,
.ticket-routing-map,
.ticket-readiness-list,
.ticket-ops-grid,
.ticket-option-row {
  display: grid;
  gap: 10px;
}

.ticket-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ticket-metrics span,
.ticket-routing-map div,
.ticket-ops-grid span,
.ticket-readiness-list span {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.ticket-metrics b,
.ticket-routing-map b,
.ticket-ops-grid b {
  display: block;
  color: #fff;
  font-size: 20px;
}

.ticket-routing-map {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ticket-routing-map span,
.ticket-ops-grid span,
.ticket-readiness-list span,
.ticket-metrics span {
  color: rgba(230,233,242,0.66);
  font-size: 12px;
  font-weight: 850;
}

.ticket-routing-map b {
  overflow: hidden;
  margin-top: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-readiness-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ticket-readiness-list i {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  margin-right: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #101419;
  background: rgba(255,255,255,0.54);
  font-style: normal;
  font-size: 10px;
  font-weight: 950;
}

.ticket-readiness-list .ready i {
  color: #031512;
  background: #45f0d5;
}

.ticket-form-grid,
.ticket-panel-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ticket-option-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.ticket-panel-editor {
  margin-top: 12px;
}

.ticket-panel-editor label:nth-last-child(-n+2) {
  grid-column: span 3;
}

.ticket-panel-preview {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 5px solid #45f0d5;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(69,240,213,0.11), rgba(127,0,255,0.08)),
    rgba(255,255,255,0.04);
}

.ticket-panel-preview b {
  font-size: 24px;
  color: #fff;
}

.ticket-panel-preview p {
  margin: 0;
  color: rgba(255,255,255,0.72);
}

.ticket-panel-preview div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-panel-preview span,
.ticket-panel-preview button {
  width: fit-content;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.075);
  color: #fff;
  font: inherit;
  font-weight: 900;
}

.ticket-panel-preview span {
  padding: 7px 10px;
}

.ticket-panel-preview button {
  padding: 10px 14px;
  background: linear-gradient(135deg, #7366ff, #16bdd0);
}

.ticket-ops-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ticket-rating-list {
  margin-top: 12px;
}

.setup-check-grid,
.timeline-list,
.public-profile-grid,
.public-profile-badges div {
  display: grid;
  gap: 12px;
}

.setup-check-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 18px;
}

.setup-check-grid span,
.timeline-list li,
.public-profile-grid span,
.public-profile-badges span {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.setup-check-grid span {
  display: grid;
  gap: 6px;
  padding: 16px;
}

.setup-check-grid i {
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 177, 108, 0.16);
  color: #ffd9ad;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.setup-check-grid .ready i {
  background: rgba(77, 255, 218, 0.16);
  color: #7fffe8;
}

.setup-check-grid b,
.timeline-list b {
  color: var(--ink);
}

.setup-check-grid em,
.timeline-list span {
  color: var(--muted);
  font-style: normal;
}

.timeline-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.timeline-list li {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  position: relative;
}

.timeline-list li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, #7f00ff, #29e5df);
}

.public-profile-body {
  background:
    radial-gradient(circle at 20% 8%, rgba(127, 0, 255, 0.24), transparent 28rem),
    radial-gradient(circle at 80% 20%, rgba(41, 229, 223, 0.16), transparent 30rem),
    #05070d;
}

.public-profile-page {
  min-height: 75vh;
  display: grid;
  place-items: center;
  padding: 90px 24px;
}

.public-profile-card {
  width: min(920px, 100%);
  padding: clamp(28px, 5vw, 56px);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(18, 23, 32, 0.92), rgba(6, 8, 14, 0.96)),
    radial-gradient(circle at 80% 0%, rgba(127, 0, 255, 0.24), transparent 24rem);
}

.public-profile-card h1 {
  font-size: clamp(42px, 7vw, 86px);
  margin: 0;
}

.public-profile-about {
  margin-top: 26px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.22);
}

.public-profile-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 22px;
}

.public-profile-grid span,
.public-profile-badges span {
  padding: 14px 16px;
}

.public-profile-grid b {
  display: block;
  color: var(--ink);
  font-size: 28px;
}

.public-profile-badges {
  margin-top: 26px;
}

.public-profile-badges div {
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
}
.neon-dashboard-page main {
  width: min(1320px, calc(100% - 32px));
}
.neon-dashboard-hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 10%, rgba(69,240,213,0.14), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(101,167,255,0.12), transparent 32%),
    linear-gradient(135deg, rgba(5,10,12,0.96), rgba(6,12,18,0.94));
  box-shadow: 0 36px 120px rgba(0,0,0,0.58);
}
#dashboard-live-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.36;
  pointer-events: none;
}
.neon-dashboard-head,
.neon-board {
  position: relative;
  z-index: 1;
}
.neon-dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 22px;
}
.neon-dashboard-head h1 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(42px, 6vw, 86px);
  line-height: 0.92;
}
.neon-board {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.neon-tile {
  min-height: 178px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(69,240,213,0.11), rgba(101,167,255,0.04)),
    linear-gradient(180deg, var(--neon-card), var(--neon-card-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 24px 70px rgba(0,0,0,0.38);
  transform: perspective(900px) rotateX(0deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.neon-tile:hover {
  transform: perspective(900px) rotateX(2deg) translateY(-2px);
  border-color: rgba(69,240,213,0.35);
}
.neon-tile small,
.tile-index {
  display: block;
}
.tile-index {
  color: var(--neon-pink);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
}
.neon-tile small {
  margin-top: 4px;
  color: rgba(255,255,255,0.76);
  font-weight: 850;
}
.tile-ring,
.tile-upgrade {
  grid-column: span 4;
}
.tile-bars {
  grid-column: span 4;
}
.tile-wave {
  grid-column: span 5;
}
.tile-sliders {
  grid-column: span 3;
}
.tile-info,
.tile-indexes,
.tile-command {
  grid-column: span 4;
}
.ring-stat,
.orbit-stat,
.multi-ring {
  width: 126px;
  height: 126px;
  margin: -6px auto 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.ring-stat {
  background: conic-gradient(var(--neon-pink) var(--pct), rgba(255,255,255,0.11) 0);
}
.ring-stat::before,
.orbit-stat::before,
.multi-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: rgba(16, 9, 43, 0.96);
  box-shadow: inset 0 0 28px rgba(255,54,217,0.16);
}
.ring-stat b,
.orbit-stat b,
.multi-ring b {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 30px;
  line-height: 1;
}
.ring-stat span,
.orbit-stat span {
  position: absolute;
  z-index: 1;
  bottom: 31px;
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  font-weight: 850;
}
.orbit-stat {
  background:
    radial-gradient(circle, transparent 56%, rgba(255,255,255,0.12) 57% 59%, transparent 60%),
    conic-gradient(var(--neon-purple) var(--pct), rgba(255,255,255,0.1) 0);
}
.multi-ring {
  background:
    conic-gradient(var(--neon-pink) var(--a), transparent 0),
    conic-gradient(from 70deg, var(--neon-coral) var(--b), transparent 0),
    conic-gradient(from 145deg, var(--neon-purple) var(--c), rgba(255,255,255,0.08) 0);
}
.mini-legend,
.wave-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 850;
}
.mini-legend span,
.wave-keys span {
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
}
.bar-wave {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 100px;
  margin-top: 12px;
}
.bar-wave span {
  flex: 1;
  height: 100%;
  display: grid;
  align-items: end;
  justify-items: center;
  color: rgba(255,255,255,0.72);
  font-size: 10px;
}
.bar-wave i {
  width: 100%;
  height: var(--bar-h);
  min-height: 10px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--bar-c), var(--neon-purple));
  box-shadow: 0 0 22px color-mix(in srgb, var(--bar-c), transparent 45%);
}
.bar-wave b {
  margin-top: 5px;
}
.tile-wave svg {
  width: 100%;
  height: 98px;
  margin-top: 10px;
  overflow: visible;
}
.tile-wave polyline {
  fill: none;
  stroke: url("#unused");
  stroke: var(--neon-pink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255,54,217,0.45));
}
.meter-line {
  position: relative;
  height: 18px;
  margin-top: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
}
.meter-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 999px;
  background: var(--neon-pink);
  box-shadow: 0 0 20px rgba(255,54,217,0.45);
}
.meter-line b {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: min(var(--w), calc(100% - 28px));
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--neon-pink);
  font-size: 10px;
}
.meter-line.purple i,
.meter-line.purple b { background: var(--neon-purple); }
.meter-line.coral i,
.meter-line.coral b { background: var(--neon-coral); }
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.info-grid span {
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.68);
  background: rgba(255,255,255,0.055);
  font-size: 12px;
  font-weight: 850;
}
.info-grid b {
  display: block;
  color: white;
  font-size: 22px;
}
.index-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 13px;
}
.index-grid span {
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.07);
  font-size: 11px;
  font-weight: 950;
}
.index-grid span.manage { background: rgba(255,112,72,0.28); }
.index-grid span.installed { background: rgba(138,77,255,0.3); }
.index-grid span.ready { background: rgba(69,240,213,0.28); color: white; }
.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(240px, 0.38fr);
  gap: 22px;
  align-items: center;
  min-height: 300px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(77, 215, 200, 0.17), rgba(244, 114, 182, 0.08) 42%, rgba(244, 201, 93, 0.08)),
    rgba(255, 255, 255, 0.045);
  box-shadow: var(--shadow);
}
.dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/slayya-hero.png");
  background-image: image-set(
    url("/slayya-hero.avif") type("image/avif"),
    url("/slayya-hero.webp") type("image/webp"),
    url("/slayya-hero.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  z-index: -1;
}
.dashboard-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.92;
}
.dash-orbit {
  align-self: start;
}
.dash-bot-avatar {
  width: 78px;
  height: 78px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  box-shadow: 0 22px 70px rgba(77, 215, 200, 0.28);
}
.dash-health {
  display: grid;
  gap: 10px;
}
.dash-health span {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--muted);
  font-weight: 850;
}
.dash-health b {
  color: var(--ink);
  font-size: 28px;
}
.dashboard-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dashboard-command-strip div {
  border: 1px solid rgba(77, 215, 200, 0.18);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(77, 215, 200, 0.1), rgba(255, 255, 255, 0.035));
}
.dashboard-command-strip span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.dashboard-command-strip b {
  display: block;
  margin-top: 6px;
  font-size: 16px;
}
.dashboard-lab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lab-card {
  min-height: 172px;
  display: grid;
  align-content: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
    rgba(9, 12, 18, 0.88);
}
.lab-card.accent {
  border-color: rgba(244, 201, 93, 0.2);
  background:
    linear-gradient(135deg, rgba(244, 201, 93, 0.1), rgba(77, 215, 200, 0.06)),
    rgba(9, 12, 18, 0.88);
}
.lab-card h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1;
}
.server-head {
  margin-top: 0;
}

.bump-page main {
  padding: 0;
}
.bump-center {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100vh - 72px);
  padding: 118px 22px 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 34%, rgba(77, 240, 220, 0.16), transparent 30%),
    radial-gradient(circle at 76% 42%, rgba(127, 0, 255, 0.22), transparent 34%),
    linear-gradient(135deg, #030506 0%, #071013 42%, #06040b 100%);
}
.bump-center::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle at 50% 48%, black 0, transparent 70%);
  opacity: 0.45;
}
.bump-orbit {
  position: absolute;
  inset: auto 4vw 8vh auto;
  width: min(54vw, 720px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.82;
  filter: blur(0.2px);
}
.bump-orbit span {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(77, 240, 220, 0.22);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(-18deg);
  box-shadow: 0 0 44px rgba(127, 0, 255, 0.18);
}
.bump-orbit span:nth-child(2) {
  inset: 20%;
  border-color: rgba(127, 0, 255, 0.28);
  transform: rotateX(66deg) rotateZ(18deg);
}
.bump-orbit span:nth-child(3) {
  inset: 31%;
  border-color: rgba(255, 72, 220, 0.34);
  transform: rotateX(70deg) rotateZ(44deg);
}
.bump-card {
  position: relative;
  z-index: 1;
  width: min(1220px, 100%);
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 18%, rgba(77, 240, 220, 0.11), transparent 28%),
    radial-gradient(circle at 8% 12%, rgba(127, 0, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
    rgba(5, 7, 11, 0.74);
  box-shadow: 0 28px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
}
.bump-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 38px);
}
.bot-chip,
.bump-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: var(--soft);
  background: rgba(0, 0, 0, 0.28);
  font-weight: 900;
}
.bump-user-chip {
  justify-content: center;
}
.bump-user-chip span {
  color: var(--muted);
  font-size: 12px;
}
.bump-user-chip b {
  color: var(--ink);
}
.bump-user-chip img,
.chip-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
}
.muted-chip {
  opacity: 0.74;
}
.bump-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
  gap: clamp(26px, 5vw, 70px);
  align-items: end;
}
.bump-copy h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(58px, 10vw, 128px);
  line-height: 0.9;
  letter-spacing: 0;
}
.bump-copy .hero-subtitle {
  max-width: 720px;
  margin-top: 22px;
  font-size: clamp(19px, 2.4vw, 34px);
  line-height: 1.18;
  color: rgba(255,255,255,0.9);
  font-weight: 900;
}
.alert-line {
  max-width: 680px;
  margin: 22px 0 0;
  padding: 13px 14px;
  border: 1px solid rgba(244, 201, 93, 0.3);
  border-radius: 8px;
  color: #ffe7a7;
  background: rgba(244, 201, 93, 0.1);
  font-weight: 850;
}
.bump-form {
  margin: 0;
}
.bump-primary {
  box-shadow: 0 18px 40px rgba(77, 240, 220, 0.22);
}
.bump-note {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--muted);
  font-weight: 800;
}
.bump-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
    rgba(3, 5, 9, 0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 20px 60px rgba(0,0,0,0.35);
}
.bump-points {
  display: grid;
  gap: 4px;
}
.bump-points span {
  color: var(--soft);
  font-weight: 950;
}
.bump-points b {
  font-size: clamp(76px, 11vw, 132px);
  line-height: 0.82;
}
.bump-points em {
  color: var(--muted);
  font-style: normal;
  font-weight: 850;
}
.bump-progress {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.11);
}
.bump-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7f00ff, #4df0dc);
  box-shadow: 0 0 26px rgba(77, 240, 220, 0.42);
}
.bump-metrics,
.bump-rates,
.bump-redeem-actions {
  display: grid;
  gap: 10px;
}
.bump-metrics {
  grid-template-columns: repeat(3, 1fr);
}
.bump-metrics span,
.bump-rates div,
.bump-pass {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.bump-metrics b,
.bump-rates b,
.bump-pass b {
  color: var(--ink);
  font-size: 18px;
}
.bump-pass {
  grid-template-columns: 1fr;
}
.bump-pass span {
  color: var(--muted);
}
.bump-redeem-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bump-redeem-actions form,
.bump-redeem-actions button {
  width: 100%;
}
.bump-redeem-actions button:disabled,
.bump-form button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.guild-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.sidebar {
  position: relative;
  top: auto;
  align-self: start;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 15%, rgba(77,215,200,0.18), transparent 35%),
    radial-gradient(circle at 88% 20%, rgba(139,92,246,0.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035)),
    rgba(7, 8, 12, 0.78);
  box-shadow: var(--shadow);
}
.sidebar-brand {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.sidebar h1 {
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.92;
  margin: 4px 0 0;
}
.guild-title-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.guild-page-icon {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(77,240,220,0.28);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(127,0,255,0.62), rgba(77,240,220,0.44)),
    rgba(4,6,8,0.86);
  color: #fff;
  font-size: 40px;
  font-weight: 950;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 24px 80px rgba(77,240,220,0.14),
    0 0 42px rgba(127,0,255,0.12);
}
.guild-page-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guild-server-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.guild-server-facts span {
  display: grid;
  gap: 5px;
  min-height: 70px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.095);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
    rgba(2,4,5,0.58);
  color: var(--guild-muted);
  font-size: 12px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.guild-server-facts b {
  color: #fff;
  font-size: 22px;
}
.guild-premium-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.guild-premium-signals span {
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.058), rgba(255,255,255,0.018)),
    rgba(2,4,5,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.guild-premium-signals span.live {
  border-color: rgba(77,240,220,0.24);
  background:
    linear-gradient(145deg, rgba(77,240,220,0.12), rgba(127,0,255,0.07)),
    rgba(2,4,5,0.68);
}
.guild-premium-signals i {
  width: max-content;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.68);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.guild-premium-signals .live i {
  color: #d9fff9;
  border-color: rgba(77,240,220,0.34);
  background: rgba(77,240,220,0.12);
}
.guild-premium-signals b {
  color: #fff;
  font-size: 17px;
}
.guild-premium-signals em {
  color: var(--guild-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}
.guild-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.guild-hero-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(77,240,220,0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(77,240,220,0.13), rgba(127,0,255,0.11)),
    rgba(4,6,8,0.72);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.26);
}
.guild-hero-actions a:hover {
  border-color: rgba(77,240,220,0.38);
  transform: translateY(-1px);
}
.rail-links {
  display: grid;
  gap: 6px;
}
.sidebar a {
  color: var(--muted);
  padding: 11px 12px;
  border-radius: 8px;
  font-weight: 850;
}
.sidebar a:hover { color: var(--ink); background: rgba(255,255,255,0.07); }
.back-link { color: var(--cyan) !important; }
.guild-dashboard-page .guild-hero-actions a {
  color: #fff;
  padding: 0 13px;
}
.guild-dashboard-page .guild-hero-actions a:hover {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(77,240,220,0.18), rgba(127,0,255,0.16)),
    rgba(4,6,8,0.82);
}
.rail-group {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.rail-heading {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.rail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
}
.rail-toggle b { font-weight: 850; }
.rail-toggle i {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  flex: 0 0 auto;
}
.rail-toggle i::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s ease, background 0.18s ease;
}
.rail-toggle.on {
  color: var(--ink);
  background: rgba(77, 215, 200, 0.1);
}
.rail-toggle.on i {
  background: rgba(77, 215, 200, 0.28);
}
.rail-toggle.on i::after {
  transform: translateX(14px);
  background: var(--cyan);
}
.save-dock {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(244, 201, 93, 0.2);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(244, 201, 93, 0.08);
  font-size: 12px;
}
.save-dock b {
  color: var(--ink);
  font-size: 13px;
}
.guild-main { display: grid; gap: 18px; }
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
}
.hero-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  background:
    linear-gradient(135deg, rgba(139,92,246,0.16), rgba(77,215,200,0.09)),
    var(--panel);
}
.hero-control h2 {
  margin: 0;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1;
}
.overview-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px;
  min-width: 300px;
}
.overview-metrics span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.overview-metrics b {
  color: var(--ink);
  font-size: 18px;
}
.command-help {
  display: grid;
  align-content: start;
  gap: 10px;
}
.status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}
.status-strip div {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}
.status-strip div.good { border-color: rgba(69, 212, 131, 0.24); background: rgba(69, 212, 131, 0.08); }
.status-strip div.idle { background: rgba(255, 255, 255, 0.035); }
.status-strip span { display: block; color: var(--muted); font-size: 12px; font-weight: 850; }
.status-strip b { display: block; margin-top: 7px; font-size: 18px; }
.status-strip .status-card {
  min-width: 0;
  min-height: 82px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-solid);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.status-strip .status-card.good {
  border-color: rgba(69, 212, 131, 0.24);
  background: rgba(69, 212, 131, 0.08);
}
.status-strip .status-card.idle { background: rgba(255, 255, 255, 0.035); }
.status-strip .status-card > button,
.status-strip a.status-card {
  width: 100%;
  min-height: 80px;
  padding: 13px 14px;
  display: block;
  color: var(--ink);
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.status-strip a.status-card { text-decoration: none; }
.status-strip .status-card:hover {
  border-color: rgba(191, 114, 255, 0.5);
  background: rgba(127, 0, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 28px rgba(36, 5, 72, 0.24);
  transform: translateY(-2px);
}
.status-strip .status-card:focus-within {
  outline: 2px solid rgba(191, 114, 255, 0.72);
  outline-offset: 2px;
}
.status-strip .status-card em {
  display: block;
  margin-top: 6px;
  color: rgba(224, 206, 239, 0.58);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}
.status-strip .status-card.saving { opacity: 0.66; pointer-events: none; }
.status-strip .status-card.saved {
  border-color: rgba(72, 236, 184, 0.72);
  box-shadow: 0 0 24px rgba(72, 236, 184, 0.2);
}
.status-strip .status-card.save-error {
  border-color: rgba(255, 94, 122, 0.78);
  box-shadow: 0 0 24px rgba(255, 94, 122, 0.18);
}
.section { display: grid; gap: 14px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; }
.panel {
  padding: 18px;
  background-color: var(--panel);
  backdrop-filter: blur(16px);
}
.settings-panel {
  align-self: start;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 12px;
  padding: 16px;
  min-height: 0;
}
.settings-panel:hover {
  border-color: rgba(77, 215, 200, 0.22);
}
.priority-panel { border-color: rgba(77, 215, 200, 0.2); }
.danger-panel { border-color: rgba(255, 99, 119, 0.22); }
.panel-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.settings-panel .panel-title {
  align-items: center;
}
.panel h2 { margin: 0; font-size: 20px; }
.panel p { margin: 5px 0 0; color: var(--muted); }
.settings-panel p { font-size: 14px; line-height: 1.45; }
.settings-panel label {
  align-self: start;
}
.settings-panel input:not([type="checkbox"]),
.settings-panel select:not([multiple]) {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
}
.settings-panel textarea {
  min-height: 64px;
  max-height: 140px;
}
.settings-panel .button {
  min-height: 38px;
  padding: 0 15px;
}
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 850; }
input, select, textarea {
  width: 100%;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(5, 7, 11, 0.72);
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
}
textarea {
  min-height: 64px;
  padding-block: 9px;
  resize: vertical;
}
select[multiple] {
  min-height: 112px;
  padding-block: 8px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(77, 215, 200, 0.45);
  outline-offset: 1px;
}
.check-grid, .field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.check-grid label, .switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.check-grid label:hover, .switch-row:hover {
  border-color: rgba(77, 215, 200, 0.22);
  background: rgba(77, 215, 200, 0.07);
}
.check-grid input, .switch-row input { width: auto; min-height: auto; accent-color: var(--cyan); }
.hint { font-size: 13px; }
.audit-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.audit-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.audit-list b { color: var(--ink); }
.center { min-height: calc(100vh - 160px); display: grid; place-items: center; }
.narrow { max-width: 560px; width: 100%; }
.code-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
code { padding: 3px 6px; color: #eef7ff; }
.empty { color: var(--muted); padding: 30px; border: 1px dashed var(--line); border-radius: 8px; }

.site-footer {
  position: relative;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 54px 0 42px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr 0.8fr;
  gap: clamp(34px, 6vw, 96px);
}
.footer-brand p {
  max-width: 320px;
  margin: 18px 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}
.footer-logo {
  width: fit-content;
  font-size: 22px;
  text-transform: uppercase;
}
.footer-social {
  display: inline-flex;
  color: var(--muted);
  font-weight: 850;
}
.footer-copyright {
  display: block;
  margin-top: 28px;
  color: var(--muted);
  font-size: 13px;
}
.site-footer h2 {
  margin: 0 0 18px;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-footer section:not(.footer-brand) {
  display: grid;
  align-content: start;
  gap: 13px;
}
.site-footer section a {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}
.site-footer a:hover { color: var(--ink); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.footer-bottom nav {
  display: flex;
  gap: 24px;
}
.legal-page {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 36px 0 24px;
}
.legal-head {
  margin-bottom: 18px;
}
.legal-head h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 76px);
  line-height: 0.95;
}
.legal-panel {
  display: grid;
  gap: 12px;
}
.legal-panel h2 {
  margin-top: 12px;
}
.legal-panel p {
  max-width: 780px;
  line-height: 1.7;
}

@media (max-width: 980px) {
  .feature-grid, .split-feature, .two-col, .three-col, .preview-layout { grid-template-columns: 1fr; }
  .command-grid, .overview-grid, .hero-control, .dashboard-hero, .dashboard-command-strip, .dashboard-lab-grid, .bump-layout, .re-code-grid, .re-split { grid-template-columns: 1fr; }
  .dashboard-app-page .real-dashboard-grid,
  .dashboard-app-page .server-grid,
  .control-summary,
  .dashboard-app-page .real-dashboard-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .neon-dashboard-head { display: grid; }
  .neon-board { grid-template-columns: repeat(6, 1fr); }
  .tile-ring, .tile-upgrade, .tile-bars, .tile-wave, .tile-sliders, .tile-info, .tile-indexes, .tile-command { grid-column: span 6; }
  .overview-metrics { min-width: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .preview-layout aside { display: none; }
  .mini-strip, .preview-row { grid-template-columns: 1fr; }
  .re-code-grid pre { border-right: 0; border-bottom: 1px solid var(--line); min-height: 260px; }
  .dashboard-live-head,
  .dashboard-tools-grid,
  .dashboard-live-overview {
    grid-template-columns: 1fr;
  }
  .dashboard-live-head {
    display: grid;
  }
  .dashboard-command-grid {
    grid-template-columns: 1fr;
  }
  .ticket-metrics,
  .ticket-routing-map,
  .ticket-readiness-list,
  .ticket-form-grid,
  .ticket-option-row,
  .ticket-panel-editor,
  .ticket-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ticket-panel-editor label:nth-last-child(-n+2) {
    grid-column: span 2;
  }
}

@media (max-width: 860px) {
  .topbar { position: static; }
  .nav { overflow-x: auto; justify-content: end; }
  .nav a { padding: 8px; white-space: nowrap; }
  .hero { min-height: calc(100vh - 62px); padding-top: 44px; }
  .guild-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; display: grid; overflow: visible; }
  .rail-links { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; }
  .guild-dashboard-page .rail-links { display: flex; }
  .guild-server-facts,
  .guild-premium-signals,
  .guild-premium-board,
  .guild-feature-wall,
  .guild-signal-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guild-active-module {
    align-items: stretch;
    flex-direction: column;
  }
  .guild-active-module .save-dock {
    display: grid;
    min-width: 0;
  }
  .guild-live-meter {
    width: 100%;
  }
  .rail-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-heading { grid-column: 1 / -1; }
  .save-dock { display: none; }
  .panel-title { display: grid; }
}

@media (max-width: 560px) {
  main { width: min(100% - 20px, 1240px); }
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    padding-inline: 10px;
    min-height: 62px;
  }
  .brand { flex: 0 0 auto; }
  .brand span:last-child { display: inline; }
  .nav {
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .nav a { flex: 0 0 auto; }
  .ticket-hero,
  .ticket-metrics,
  .ticket-routing-map,
  .ticket-readiness-list,
  .ticket-form-grid,
  .ticket-option-row,
  .ticket-panel-editor,
  .ticket-ops-grid {
    grid-template-columns: 1fr;
  }
  .ticket-hero {
    display: grid;
  }
  .ticket-panel-editor label:nth-last-child(-n+2) {
    grid-column: span 1;
  }
  .react-style-page .nav {
    overflow-x: visible;
    flex-wrap: wrap;
  }
  .react-style-page .nav a {
    font-size: 13px;
    padding: 7px 8px;
  }
  .premium-emoji { width: 20px; height: 20px; font-size: 7px; }
  .dashboard-app-page main { width: min(100% - 14px, 1240px); }
  .dashboard-command-center { padding: 14px; }
  .ice-hero,
  .ice-section,
  .catalog-commands-shell {
    grid-template-columns: 1fr;
  }
  .ice-hero-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ice-strip,
  .ice-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-command-nav {
    position: static;
  }
  .dashboard-app-page .real-dashboard-head,
  .dashboard-app-page .real-dashboard-grid,
  .dashboard-app-page .server-grid,
  .control-summary,
  .dashboard-app-page .real-dashboard-split {
    display: grid;
    grid-template-columns: 1fr;
  }
  .dashboard-app-page .real-dashboard-head h1 { font-size: clamp(34px, 14vw, 56px); }
  .dashboard-app-page .dashboard-live-shell {
    min-height: 0;
    padding: 16px;
  }
  .dashboard-live-head h1 {
    font-size: clamp(42px, 17vw, 70px);
  }
  .dashboard-user-chip {
    min-width: 0;
  }
  .dashboard-server-mini {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .dashboard-server-mini .button,
  .dashboard-server-mini .pill {
    grid-column: 1 / -1;
  }
  .dash-server-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .dash-server-card .button,
  .dash-server-card .pill {
    grid-column: 1 / -1;
  }
  .neon-dashboard-page main { width: min(100% - 14px, 1320px); }
  .neon-dashboard-hero { min-height: 0; padding: 14px; }
  #dashboard-live-3d { opacity: 0.68; }
  .neon-dashboard-head h1 { font-size: clamp(36px, 14vw, 58px); }
  .neon-board { grid-template-columns: 1fr; gap: 10px; }
  .tile-ring, .tile-upgrade, .tile-bars, .tile-wave, .tile-sliders, .tile-info, .tile-indexes, .tile-command { grid-column: auto; }
  .neon-tile { min-height: 160px; padding: 14px; }
  .ring-stat, .orbit-stat, .multi-ring { width: 112px; height: 112px; }
  .index-grid { grid-template-columns: repeat(5, 1fr); }
  .hero { padding-inline: 16px; padding-bottom: 42px; }
  .hero h1 { font-size: clamp(62px, 23vw, 110px); }
  .hero-actions .button { width: 100%; }
  .re-hero { width: min(100% - 20px, 1180px); padding-top: 58px; }
  .re-hero h1 { font-size: clamp(43px, 15vw, 76px); }
  .ice-hero {
    width: min(100% - 20px, 1320px);
    min-height: 0;
    padding: 48px 0;
  }
  .ice-hero-copy h1 {
    font-size: clamp(48px, 18vw, 86px);
  }
  .ice-card,
  .ice-card:nth-child(even) {
    transform: none;
  }
  .ice-card.tall,
  .ice-card.wide {
    grid-column: auto;
    min-height: 180px;
  }
  .ice-strip,
  .ice-section,
  .ice-bento,
  .ice-final {
    width: min(100% - 20px, 1320px);
  }
  .ice-strip,
  .ice-bento,
  .ice-hero-board {
    grid-template-columns: 1fr;
  }
  .ice-strip span {
    min-height: 48px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .ice-terminal div,
  .catalog-command-row,
  .catalog-search-row {
    grid-template-columns: 1fr;
  }
  .catalog-command-hero {
    min-height: 240px;
    padding: 22px;
  }
  .catalog-command-hero h1 {
    font-size: clamp(54px, 19vw, 92px);
  }
  .re-shell-preview { margin-top: 34px; }
  .re-3d-stage { height: 360px; margin-top: 32px; }
  .re-3d-caption { position: static; margin: -86px 12px 12px; max-width: none; }
  .re-code-grid pre, .re-output, .re-doc-card { padding: 18px; }
  .re-output > span { display: grid; align-content: center; }
  .re-logo-strip, .re-final-cta { width: min(100% - 20px, 1180px); }
  .landing-band, .feature-section { width: min(100% - 20px, 1240px); padding-block: 48px; }
  .server-card { grid-template-columns: 48px 1fr; }
  .server-card .button, .server-card .pill { grid-column: 1 / -1; }
  .rail-group { grid-template-columns: 1fr; }
  .site-footer { width: min(100% - 20px, 1240px); padding-top: 42px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { display: grid; }
  .guild-title-row {
    grid-template-columns: 1fr;
  }
  .guild-page-icon {
    width: 74px;
    height: 74px;
    font-size: 30px;
  }
  .guild-server-facts,
  .guild-premium-signals,
  .guild-premium-board,
  .guild-feature-wall,
  .guild-signal-row {
    grid-template-columns: 1fr;
  }
  .guild-dashboard-page .rail-links a {
    flex-basis: 156px;
    min-height: 78px;
  }
  .guild-dashboard-page .sidebar {
    padding: 12px;
  }
}

.commands-page {
  --bg: #0c0d0d;
  --ink: #ffffff;
  --muted: #9ca3ad;
  --soft: #d6d9e0;
  --panel: #111212;
  --panel-solid: #161717;
  --line: #242525;
  --line-strong: #313232;
  background:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px),
    #0c0d0d;
  background-size: 64px 64px;
}

.commands-page .topbar {
  background: rgba(12, 13, 13, 0.78);
  border-bottom-color: #1f2020;
}

.commands-page main {
  width: min(1024px, calc(100% - 32px));
  padding: 78px 0 96px;
}

.catalog-command-page {
  display: grid;
  gap: 24px;
}

.catalog-command-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.catalog-command-title h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}

.catalog-search-compact {
  width: min(320px, 42vw);
  display: block;
}

.catalog-search-compact input {
  height: 48px;
  min-height: 48px;
  border-radius: 16px;
  border-color: #242525;
  background: #161717;
  color: #ffffff;
  font-size: 15px;
}

.catalog-tabs {
  display: flex;
  overflow-x: auto;
  border: 1px solid #1f2020;
  border-radius: 16px;
  background: #161717;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.catalog-tabs button,
.catalog-tabs a {
  flex: 0 0 auto;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  border: 0;
  border-right: 1px solid #242525;
  color: #999fa8;
  background: transparent;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.catalog-tabs button:last-child,
.catalog-tabs a:last-child {
  border-right: 0;
}

.catalog-tabs button.active,
.catalog-tabs button:hover,
.catalog-tabs a.active,
.catalog-tabs a:hover {
  color: #ffffff;
  background: #1f2020;
}

.catalog-tabs b {
  color: #d8dbe0;
  font-size: 13px;
}

.catalog-command-count {
  justify-self: end;
  display: inline-flex;
  gap: 8px;
  padding: 13px 18px;
  border: 1px solid #242525;
  border-radius: 16px;
  color: #9ca3ad;
  background: #111212;
  font-weight: 900;
}

.catalog-command-count b {
  color: #ffffff;
}

.catalog-command-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.catalog-command-card {
  min-height: 276px;
  display: grid;
  grid-template-rows: auto auto 1fr 1fr;
  gap: 18px;
  padding: 24px;
  border: 1px solid #242525;
  border-radius: 24px;
  background: #111212;
}

.catalog-command-card:hover {
  border-color: #313232;
  background: #141515;
}

.catalog-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.catalog-card-top h2 {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.12;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.catalog-card-top span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid #242525;
  border-radius: 999px;
  color: #aeb4bd;
  background: #181919;
  font-size: 11px;
  font-weight: 900;
}

.catalog-command-card > p {
  margin: 0;
  color: #9ca3ad;
  line-height: 1.5;
  font-size: 14px;
}

.catalog-card-section {
  align-self: end;
  display: grid;
  gap: 8px;
}

.catalog-card-section b {
  color: #6f7680;
  font-size: 12px;
  font-weight: 950;
  text-transform: lowercase;
}

.catalog-card-section div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.catalog-card-section span {
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid #242525;
  border-radius: 999px;
  color: #d8dbe0;
  background: #181919;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.catalog-empty {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .catalog-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .commands-page main {
    width: min(100% - 20px, 1024px);
    padding-top: 36px;
  }
  .catalog-command-title {
    display: grid;
  }
  .catalog-search-compact {
    width: 100%;
  }
  .catalog-tabs button,
  .catalog-tabs a {
    min-height: 50px;
    padding-inline: 16px;
  }
  .catalog-command-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .catalog-command-card {
    min-height: 230px;
    padding: 18px;
    border-radius: 18px;
  }
}

body.commands-page {
  background:
    radial-gradient(circle at 13% 8%, rgba(69, 240, 213, 0.12), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(139, 92, 246, 0.12), transparent 31%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    #080909 !important;
  background-size: auto, auto, 64px 64px, 64px 64px, auto !important;
}

body.commands-page main {
  width: min(1180px, calc(100% - 44px)) !important;
  padding: 82px 0 110px !important;
}

body.commands-page .catalog-command-page {
  display: grid !important;
  gap: 24px !important;
}

body.commands-page .catalog-command-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body.commands-page .catalog-command-title h1 {
  margin: 0 !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 18px 50px rgba(69, 240, 213, 0.16) !important;
}

body.commands-page .catalog-search-compact {
  width: min(420px, 45vw) !important;
}

body.commands-page .catalog-search-compact input {
  height: 54px !important;
  min-height: 54px !important;
  border: 1px solid rgba(96, 245, 230, 0.28) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
    rgba(7, 9, 10, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 22px 70px rgba(0,0,0,0.34) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  backdrop-filter: blur(18px) !important;
}

body.commands-page .catalog-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(96, 245, 230, 0.18) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)),
    rgba(10, 13, 14, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.11),
    0 24px 85px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(22px) !important;
}

body.commands-page .catalog-tabs button,
body.commands-page .catalog-tabs a {
  appearance: none !important;
  flex: 0 0 auto !important;
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  color: #a8afb8 !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.commands-page .catalog-tabs button.active,
body.commands-page .catalog-tabs button:hover,
body.commands-page .catalog-tabs a.active,
body.commands-page .catalog-tabs a:hover {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(96,245,230,0.2), rgba(139,92,246,0.18)),
    rgba(255,255,255,0.055) !important;
}

body.commands-page .catalog-tabs b {
  min-width: 24px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.1) !important;
  font-size: 12px !important;
}

body.commands-page .catalog-command-count {
  justify-self: end !important;
  display: inline-flex !important;
  gap: 8px !important;
  padding: 12px 17px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  color: #a8afb8 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
    rgba(12, 14, 16, 0.74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(18px) !important;
  font-weight: 900 !important;
}

body.commands-page .catalog-command-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

body.commands-page .catalog-command-card {
  position: relative !important;
  min-height: 286px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr 1fr !important;
  gap: 18px !important;
  padding: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.115), rgba(255,255,255,0.035) 48%, rgba(96,245,230,0.035)),
    rgba(13, 15, 17, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.045),
    0 28px 86px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
}

body.commands-page .catalog-command-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(96, 245, 230, 0.22), transparent 34%),
    linear-gradient(115deg, rgba(255,255,255,0.14), transparent 28%, transparent 72%, rgba(255,255,255,0.05)) !important;
  opacity: 0.72 !important;
}

body.commands-page .catalog-command-card > * {
  position: relative !important;
  z-index: 1 !important;
}

body.commands-page .catalog-command-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(96,245,230,0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 34px 100px rgba(0,0,0,0.42),
    0 0 0 1px rgba(96,245,230,0.08) !important;
}

body.commands-page .catalog-card-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.commands-page .catalog-card-top h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 23px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

body.commands-page .catalog-card-top span {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  color: #d6d9e0 !important;
  background: rgba(255,255,255,0.08) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  text-transform: lowercase !important;
}

body.commands-page .catalog-command-card > p {
  margin: 0 !important;
  color: #aeb4bd !important;
  line-height: 1.55 !important;
  font-size: 14px !important;
}

body.commands-page .catalog-card-section {
  align-self: end !important;
  display: grid !important;
  gap: 8px !important;
}

body.commands-page .catalog-card-section b {
  color: #737b85 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: lowercase !important;
}

body.commands-page .catalog-card-section div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}

body.commands-page .catalog-card-section span {
  max-width: 100% !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255,255,255,0.105) !important;
  border-radius: 999px !important;
  color: #eef2f4 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035)),
    rgba(0,0,0,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 980px) {
  body.commands-page .catalog-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  body.commands-page main {
    width: min(100% - 20px, 1180px) !important;
    padding-top: 38px !important;
  }
  body.commands-page .catalog-command-title {
    display: grid !important;
  }
  body.commands-page .catalog-search-compact {
    width: 100% !important;
  }
  body.commands-page .catalog-command-grid {
    grid-template-columns: 1fr !important;
  }
}

body.commands-page {
  --catalog-bg: #0b0c0c;
  --catalog-panel: rgba(18, 19, 19, 0.84);
  --catalog-panel-2: rgba(24, 25, 25, 0.9);
  --catalog-line: rgba(255, 255, 255, 0.08);
  --catalog-line-2: rgba(255, 255, 255, 0.14);
  --catalog-ink: #f8f8f8;
  --catalog-muted: #a4a8ad;
  background: #0b0c0c !important;
  background-image: none !important;
}

body.commands-page::before,
body.commands-page::after {
  display: none !important;
}

body.commands-page .topbar {
  max-width: 1340px;
  min-height: 92px;
  margin: 0 auto;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body.commands-page .nav {
  gap: 10px;
}

body.commands-page .nav a {
  border-radius: 16px;
  background: transparent;
}

body.commands-page .nav a.active {
  background: rgba(255, 255, 255, 0.055);
}

body.commands-page main {
  width: min(1280px, calc(100% - 42px)) !important;
  padding: 106px 0 120px !important;
}

body.commands-page .catalog-command-page {
  gap: 40px !important;
}

body.commands-page .catalog-command-title {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: end !important;
  gap: 24px !important;
}

body.commands-page .catalog-title-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid var(--catalog-line);
  border-radius: 50%;
  color: #bfd6da;
  background: var(--catalog-panel-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 950;
}

body.commands-page .catalog-command-title h1 {
  margin: 0 !important;
  color: var(--catalog-ink) !important;
  font-size: clamp(42px, 4vw, 58px) !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

body.commands-page .catalog-search-compact {
  width: 68px !important;
  display: grid !important;
  gap: 8px !important;
}

body.commands-page .catalog-search-compact::before {
  content: "search";
  color: #858a90;
  font-size: 16px;
  font-weight: 700;
  text-transform: lowercase;
}

body.commands-page .catalog-search-compact input {
  width: 68px !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 !important;
  border: 1px solid var(--catalog-line) !important;
  border-radius: 22px !important;
  color: transparent !important;
  caret-color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)),
    rgba(20, 21, 21, 0.94) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  cursor: pointer;
}

body.commands-page .catalog-search-compact::after {
  content: "";
  width: 24px;
  height: 24px;
  margin: -46px 0 0 22px;
  pointer-events: none;
  border: 3px solid #a9c7cf;
  border-radius: 50%;
  box-shadow: 14px 14px 0 -10px #a9c7cf;
  transform: rotate(45deg);
}

body.commands-page .catalog-search-compact:focus-within {
  width: min(430px, 40vw) !important;
}

body.commands-page .catalog-search-compact:focus-within input,
body.commands-page .catalog-search-compact input:not(:placeholder-shown) {
  width: 100% !important;
  padding: 0 18px !important;
  color: #ffffff !important;
}

body.commands-page .catalog-search-compact:focus-within::after,
body.commands-page .catalog-search-compact:has(input:not(:placeholder-shown))::after {
  display: none;
}

body.commands-page .catalog-tabs {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid var(--catalog-line) !important;
  border-radius: 22px !important;
  background: rgba(18, 19, 19, 0.88) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.commands-page .catalog-tabs::-webkit-scrollbar {
  height: 0;
}

body.commands-page .catalog-tabs a,
body.commands-page .catalog-tabs button {
  min-height: 72px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.055) !important;
  color: #a8adb3 !important;
  background: transparent !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

body.commands-page .catalog-tabs a.active,
body.commands-page .catalog-tabs a:hover,
body.commands-page .catalog-tabs button.active,
body.commands-page .catalog-tabs button:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.055) !important;
}

body.commands-page .catalog-tabs b {
  padding: 6px 10px !important;
  border-radius: 12px !important;
  color: #d8dcdf !important;
  background: rgba(255,255,255,0.08) !important;
}

body.commands-page .catalog-command-count {
  display: none !important;
}

body.commands-page .catalog-command-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
}

body.commands-page .catalog-command-card {
  min-height: 370px !important;
  padding: 30px !important;
  border: 1px solid var(--catalog-line) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
    rgba(18, 19, 19, 0.82) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

body.commands-page .catalog-command-card[hidden] {
  display: none !important;
}

body.commands-page .catalog-command-card::before {
  display: none !important;
}

body.commands-page .catalog-command-card:hover {
  transform: none !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(21, 22, 22, 0.92) !important;
  box-shadow: none !important;
}

body.commands-page .catalog-card-top h2 {
  font-size: 26px !important;
}

body.commands-page .catalog-card-top span {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  border-radius: 4px !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: 6px 6px 0 -2px #121313, 6px 6px 0 0 rgba(255,255,255,0.35) !important;
}

body.commands-page .catalog-command-card > p {
  color: #b7bdc5 !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
}

body.commands-page .catalog-card-section {
  align-self: auto !important;
  gap: 14px !important;
}

body.commands-page .catalog-card-section b {
  color: #b9d5df !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

body.commands-page .catalog-card-section span {
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.055) !important;
  box-shadow: none !important;
  font-size: 15px !important;
}

@media (max-width: 980px) {
  body.commands-page .catalog-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 660px) {
  body.commands-page main {
    width: min(100% - 22px, 1280px) !important;
    padding-top: 44px !important;
  }
  body.commands-page .catalog-command-title {
    grid-template-columns: auto 1fr !important;
  }
  body.commands-page .catalog-search-compact {
    grid-column: 1 / -1;
    width: 100% !important;
  }
  body.commands-page .catalog-search-compact input {
    width: 100% !important;
    padding: 0 18px !important;
    color: #ffffff !important;
  }
  body.commands-page .catalog-search-compact::after {
    display: none;
  }
  body.commands-page .catalog-tabs a,
  body.commands-page .catalog-tabs button {
    min-height: 58px !important;
    padding-inline: 18px !important;
    font-size: 15px !important;
  }
  body.commands-page .catalog-command-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body.commands-page .catalog-command-card {
    min-height: 300px !important;
    padding: 24px !important;
  }
}

body.commands-page .catalog-search-compact {
  width: min(360px, 34vw) !important;
  display: block !important;
  gap: 0 !important;
}

body.commands-page .catalog-search-compact::before,
body.commands-page .catalog-search-compact::after {
  display: none !important;
  content: none !important;
}

body.commands-page .catalog-search-compact input {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
  background: rgba(18, 19, 19, 0.92) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  cursor: text !important;
}

body.commands-page .catalog-search-compact input::placeholder {
  color: #858a90 !important;
  opacity: 1 !important;
}

body.commands-page .catalog-search-compact:focus-within {
  width: min(360px, 34vw) !important;
}

body.commands-page .catalog-tabs a {
  cursor: pointer !important;
}

body.slayya-world .hero,
body.slayya-world .features,
body.slayya-world .chapter,
body.slayya-world .world-dashboard,
body.slayya-world .world-final {
  position: relative !important;
  top: auto !important;
  display: grid !important;
  opacity: var(--section-opacity, 1);
}

body.slayya-world .world-final {
  min-height: 100vh !important;
}

@media (max-width: 660px) {
  body.commands-page .catalog-search-compact,
  body.commands-page .catalog-search-compact:focus-within {
    width: 100% !important;
  }
}

body.dashboard-page,
body.guild-dashboard-page,
body.commands-page,
body.landing-page,
body.dashboard-page *,
body.guild-dashboard-page *,
body.commands-page *,
body.landing-page * {
  cursor: url("/slayya-cursor-24.png") 4 4, url("/slayya-cursor-32.png") 6 6, auto !important;
}

body.dashboard-page a,
body.dashboard-page button,
body.dashboard-page select,
body.dashboard-page label,
body.dashboard-page [role="button"],
body.guild-dashboard-page a,
body.guild-dashboard-page button,
body.guild-dashboard-page select,
body.guild-dashboard-page label,
body.guild-dashboard-page [role="button"],
body.commands-page a,
body.commands-page button,
body.commands-page select,
body.commands-page label,
body.commands-page [role="button"],
body.landing-page a,
body.landing-page button,
body.landing-page select,
body.landing-page label,
body.landing-page [role="button"] {
  cursor: url("/slayya-cursor-24.png") 4 4, url("/slayya-cursor-32.png") 6 6, pointer !important;
}

body.dashboard-page input,
body.dashboard-page textarea,
body.guild-dashboard-page input,
body.guild-dashboard-page textarea,
body.commands-page input,
body.commands-page textarea {
  cursor: text !important;
}

/* Guild control room: fixed photographic bridge with focused glass tooling. */
body.guild-control-room-page {
  --guild-rail-width: 316px;
  --guild-glass: rgba(8, 6, 18, 0.48);
  --guild-glass-strong: rgba(8, 6, 18, 0.68);
  --guild-glass-soft: rgba(18, 12, 34, 0.34);
  --guild-line: rgba(239, 212, 255, 0.19);
  --guild-line-bright: rgba(225, 155, 255, 0.42);
  min-height: 100vh;
  background-color: #05030c;
}

body.guild-control-room-page::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(3, 2, 8, 0.54), rgba(3, 2, 8, 0.08) 28%, rgba(3, 2, 8, 0.10) 70%, rgba(3, 2, 8, 0.48)),
    linear-gradient(180deg, rgba(3, 2, 8, 0.34), transparent 32%, rgba(3, 2, 8, 0.28));
  opacity: 1;
  animation: none;
  transform: none;
}

body.guild-control-room-page::after {
  z-index: 0;
  background:
    radial-gradient(ellipse 76% 58% at 54% 46%, transparent 38%, rgba(3, 2, 8, 0.28) 100%),
    linear-gradient(180deg, transparent 72%, rgba(3, 2, 8, 0.42));
  opacity: 1;
}

.guild-control-room-page .topbar {
  border-color: rgba(239, 212, 255, 0.14);
  background: rgba(5, 3, 13, 0.58);
  box-shadow: 0 16px 54px rgba(2, 1, 6, 0.34);
  backdrop-filter: blur(20px) saturate(1.28);
}

.guild-control-room-page main {
  width: min(1780px, calc(100% - 28px));
  padding: 20px 0 64px;
}

.guild-control-room-page .guild-bridge {
  display: grid;
  grid-template-columns: var(--guild-rail-width) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.guild-control-room-page .guild-glass-rail {
  position: sticky;
  top: 84px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100svh - 102px);
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--guild-line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), transparent 28%),
    var(--guild-glass-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    0 30px 90px rgba(2,1,8,0.44);
  backdrop-filter: blur(24px) saturate(1.3);
}

.guild-control-room-page .guild-glass-rail::before,
.guild-control-room-page .guild-glass-rail::after {
  display: none;
}

.guild-control-room-page .sidebar-brand {
  flex: 0 0 auto;
  gap: 11px;
  padding: 2px 2px 12px;
  border-color: rgba(239, 212, 255, 0.13);
}

.guild-rail-kicker,
.guild-rail-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.guild-rail-kicker span,
.guild-rail-label span {
  color: rgba(255,255,255,0.64);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guild-rail-kicker i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #bfffe9;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.guild-rail-kicker i::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55efad;
  box-shadow: 0 0 16px rgba(85,239,173,0.8);
}

.guild-rail-label {
  flex: 0 0 auto;
  padding: 1px 2px 0;
}

.guild-rail-label b {
  color: rgba(255,255,255,0.42);
  font-size: 10px;
}

.guild-control-room-page .back-link {
  width: max-content;
  color: rgba(255,255,255,0.62);
  font-size: 11px;
}

.guild-control-room-page .guild-title-row {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 11px;
}

.guild-control-room-page .guild-page-icon {
  width: 56px;
  height: 56px;
  border-color: rgba(225,155,255,0.36);
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(111,30,153,0.24);
  font-size: 24px;
}

.guild-control-room-page .sidebar h1 {
  max-width: 210px;
  margin-top: 2px;
  overflow: hidden;
  color: #fff;
  font-size: 20px;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-control-room-page .sidebar .eyebrow {
  font-size: 9px;
}

.guild-control-room-page .sidebar .muted {
  margin: 3px 0 0;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-control-room-page .guild-server-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.guild-control-room-page .guild-server-facts span {
  min-height: 50px;
  padding: 8px 9px;
  border-color: rgba(239,212,255,0.12);
  background: rgba(10,6,21,0.38);
  font-size: 10px;
  backdrop-filter: blur(12px);
}

.guild-control-room-page .guild-server-facts b {
  font-size: 16px;
}

.guild-control-room-page .guild-hero-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.guild-control-room-page .guild-hero-actions a {
  min-width: 0;
  min-height: 36px;
  padding: 7px;
  border-color: rgba(239,212,255,0.14);
  background: rgba(17,10,32,0.46);
  font-size: 10px;
}

.guild-control-room-page .guild-tab-nav {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 5px;
  min-height: 0;
  padding: 0 3px 5px 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(220,154,255,0.36) transparent;
}

.guild-control-room-page .guild-tab-nav a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  flex: initial;
  min-height: 48px;
  padding: 8px 10px;
  border-color: transparent;
  background: rgba(8,5,17,0.28);
  box-shadow: none;
}

.guild-control-room-page .guild-tab-nav a span {
  gap: 7px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guild-control-room-page .guild-tab-nav a b {
  max-width: 92px;
  font-size: 9px;
  text-align: right;
}

.guild-control-room-page .guild-tab-nav a:hover,
.guild-control-room-page .guild-tab-nav a.active {
  transform: none;
  border-color: rgba(225,155,255,0.30);
  background:
    linear-gradient(90deg, rgba(171,74,255,0.25), rgba(255,255,255,0.04)),
    rgba(14,8,28,0.58);
  box-shadow: inset 3px 0 0 #d18cff, inset 0 1px 0 rgba(255,255,255,0.09);
}

.guild-control-room-page .guild-workspace {
  min-width: 0;
  gap: 14px;
}

.guild-control-room-page .guild-workspace > * {
  min-width: 0;
  max-width: 100%;
}

.guild-control-room-page .guild-console-heading {
  flex-wrap: wrap;
  min-height: 116px;
  padding: 18px 20px;
  border-color: var(--guild-line);
  background:
    linear-gradient(110deg, rgba(255,255,255,0.09), transparent 40%),
    rgba(8,5,18,0.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 26px 80px rgba(2,1,8,0.34);
  backdrop-filter: blur(22px) saturate(1.25);
}

.guild-control-room-page .guild-console-heading > div:first-child {
  flex: 1 1 420px;
  min-width: 0;
}

.guild-control-room-page .guild-console-heading .guild-live-meter {
  flex: 0 1 200px;
}

.guild-control-room-page .guild-console-heading .save-dock {
  flex: 0 1 230px;
  min-width: 190px;
}

.guild-control-room-page .guild-console-heading h2 {
  font-size: clamp(30px, 4vw, 52px);
}

.guild-control-room-page .guild-console-heading .muted {
  max-width: 690px;
}

.guild-control-room-page .guild-tab-panel.active {
  display: grid;
  gap: 14px;
}

.guild-control-room-page .guild-premium-board {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.guild-control-room-page .guild-premium-board article {
  min-height: 118px;
  padding: 14px;
  border-color: var(--guild-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), transparent 36%),
    rgba(9,6,20,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 18px 54px rgba(2,1,8,0.26);
  backdrop-filter: blur(18px) saturate(1.2);
}

.guild-control-room-page .guild-premium-board article::after {
  display: none;
}

.guild-control-room-page .guild-premium-board b {
  margin-top: 13px;
  font-size: clamp(22px, 3vw, 34px);
}

.guild-control-room-page .guild-premium-board em {
  margin-top: 6px;
  font-size: 11px;
}

.guild-control-room-page .guild-overview-signals {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 8px;
}

.guild-control-room-page .guild-premium-signals span {
  min-height: 84px;
  padding: 11px;
  border-color: var(--guild-line);
  background: rgba(9,6,20,0.40);
  backdrop-filter: blur(16px);
}

.guild-control-room-page .guild-premium-signals span.live {
  border-color: rgba(96,255,196,0.23);
  background: rgba(8,28,25,0.40);
}

.guild-control-room-page .status-strip div,
.guild-control-room-page .guild-signal-row .rail-toggle {
  border-color: rgba(239,212,255,0.13);
  background: rgba(8,5,18,0.38);
  backdrop-filter: blur(14px);
}

.guild-control-room-page .guild-overview-toggles {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.guild-control-room-page .guild-feature-wall {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.guild-control-room-page .guild-feature-wall a,
.guild-control-room-page .settings-panel,
.guild-control-room-page .panel {
  border-color: var(--guild-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), transparent 34%),
    rgba(8,5,18,0.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 20px 64px rgba(2,1,8,0.28);
  backdrop-filter: blur(22px) saturate(1.24);
}

.guild-control-room-page .guild-feature-wall a {
  min-height: 126px;
  padding: 15px;
}

.guild-control-room-page .guild-feature-wall b {
  margin-top: 14px;
  font-size: clamp(18px, 2vw, 23px);
}

.guild-control-room-page .guild-feature-wall em {
  margin-top: 10px;
}

.guild-control-room-page .settings-panel input:not([type="checkbox"]),
.guild-control-room-page .settings-panel select:not([multiple]),
.guild-control-room-page .settings-panel textarea,
.guild-control-room-page .settings-panel select[multiple] {
  border-color: rgba(239,212,255,0.17);
  background: rgba(4,3,10,0.64);
}

.guild-control-room-page .settings-panel input:focus,
.guild-control-room-page .settings-panel select:focus,
.guild-control-room-page .settings-panel textarea:focus {
  border-color: rgba(225,155,255,0.58);
  box-shadow: 0 0 0 3px rgba(171,74,255,0.12);
}

.guild-control-room-page .site-footer {
  border-color: rgba(239,212,255,0.12);
  background: rgba(5,3,13,0.46);
  backdrop-filter: blur(18px);
}

@media (max-width: 1180px) {
  .guild-control-room-page .guild-bridge {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .guild-control-room-page .guild-console-heading > div:first-child {
    flex-basis: 100%;
  }
}

@media (max-width: 900px) {
  body.guild-control-room-page {
    background-position: 58% top;
    background-attachment: scroll;
  }

  .guild-control-room-page .guild-bridge {
    grid-template-columns: 1fr;
  }

  .guild-control-room-page .guild-glass-rail {
    position: relative;
    top: 0;
    max-height: none;
  }

  .guild-control-room-page .guild-tab-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 310px;
  }

  .guild-control-room-page .guild-tab-nav a {
    min-height: 56px;
  }

  .guild-control-room-page .guild-console-heading {
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  .guild-control-room-page main {
    width: min(100% - 16px, 1780px);
    padding-top: 10px;
  }

  .guild-control-room-page .guild-tab-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guild-control-room-page .guild-premium-board,
  .guild-control-room-page .guild-overview-signals,
  .guild-control-room-page .guild-overview-toggles,
  .guild-control-room-page .guild-feature-wall {
    grid-template-columns: 1fr;
  }

  .guild-control-room-page .guild-console-heading {
    padding: 15px;
  }

  .guild-control-room-page .guild-live-meter {
    min-width: 0;
  }
}

/* Guild cockpit HUD: the supplied starship view is the room, controls are holograms. */
body.guild-control-room-page {
  --cockpit-x: 0px;
  --cockpit-y: 0px;
  --cockpit-scroll: 0px;
  --hud-pink: #ff75d8;
  --hud-pink-soft: rgba(255, 117, 216, 0.58);
  --hud-pink-line: rgba(255, 153, 226, 0.62);
  --hud-white: #fff4fc;
  --hud-green: #71ffcf;
  --hud-panel: rgba(4, 6, 18, 0.24);
  --hud-panel-strong: rgba(4, 5, 16, 0.56);
  --guild-line: rgba(255, 139, 222, 0.48);
  --guild-line-bright: rgba(255, 190, 236, 0.82);
  background-color: #02040b;
  background-image:
    linear-gradient(rgba(2, 4, 12, 0.06), rgba(2, 4, 12, 0.18)),
    url("/guild-cockpit.png");
  background-image:
    linear-gradient(rgba(2, 4, 12, 0.06), rgba(2, 4, 12, 0.18)),
    image-set(
      url("/guild-cockpit.avif") type("image/avif"),
      url("/guild-cockpit.webp") type("image/webp"),
      url("/guild-cockpit.png") type("image/png")
    );
  background-position:
    center,
    calc(50% + var(--cockpit-x)) calc(50% + var(--cockpit-y) + var(--cockpit-scroll));
  background-size: cover;
  background-attachment: fixed;
}

body.guild-control-room-page::before {
  z-index: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 51% 44%, transparent 0 32%, rgba(1,2,9,0.22) 76%, rgba(1,2,8,0.64) 100%);
  opacity: 0.62;
  animation: none;
  transform: none;
  pointer-events: none;
}

body.guild-control-room-page::after {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(1,2,8,0.76), transparent 18%, transparent 82%, rgba(1,2,8,0.76)),
    linear-gradient(180deg, rgba(1,2,8,0.42), transparent 19%, transparent 78%, rgba(1,2,8,0.68));
  opacity: 1;
  pointer-events: none;
}

.guild-control-room-page .topbar {
  min-height: 64px;
  border-bottom: 1px solid rgba(255, 117, 216, 0.28);
  background: rgba(2, 3, 11, 0.58);
  box-shadow: 0 10px 42px rgba(0, 0, 0, 0.46), inset 0 -1px rgba(255, 169, 230, 0.08);
  backdrop-filter: blur(18px) saturate(1.18);
}

.guild-control-room-page .topbar .brand,
.guild-control-room-page .topbar nav a {
  text-shadow: 0 0 18px rgba(255, 117, 216, 0.2);
}

.guild-control-room-page main {
  width: min(1840px, calc(100% - 28px));
  padding: 18px 0 72px;
}

.guild-control-room-page .guild-bridge {
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 18px;
}

.guild-control-room-page .guild-glass-rail {
  top: 80px;
  max-height: calc(100svh - 96px);
  padding: 13px;
  border: 1px solid var(--hud-pink-line);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 117, 216, 0.07), transparent 30%),
    rgba(2, 4, 14, 0.64);
  box-shadow:
    inset 0 0 32px rgba(255, 92, 202, 0.045),
    0 0 0 1px rgba(255, 208, 240, 0.04),
    0 24px 70px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px) saturate(1.15);
}

.guild-control-room-page .guild-glass-rail::before,
.guild-control-room-page .guild-glass-rail::after {
  display: block;
  content: "";
  position: absolute;
  pointer-events: none;
}

.guild-control-room-page .guild-glass-rail::before {
  inset: 7px;
  border: 1px solid rgba(255, 130, 218, 0.13);
}

.guild-control-room-page .guild-glass-rail::after {
  right: -1px;
  top: 24px;
  width: 2px;
  height: 76px;
  background: var(--hud-pink);
  box-shadow: 0 0 16px var(--hud-pink);
}

.guild-control-room-page .sidebar-brand {
  position: relative;
  z-index: 1;
  padding: 6px 6px 14px;
  border-bottom-color: rgba(255, 117, 216, 0.24);
}

.guild-control-room-page .guild-rail-kicker span,
.guild-control-room-page .guild-rail-label span,
.guild-control-room-page .sidebar .eyebrow,
.guild-control-room-page .guild-console-heading .eyebrow {
  color: var(--hud-pink);
  letter-spacing: 0.14em;
}

.guild-control-room-page .guild-rail-kicker i,
.guild-control-room-page .guild-rail-label b {
  color: rgba(255, 229, 248, 0.76);
}

.guild-control-room-page .guild-rail-kicker i::before {
  background: var(--hud-green);
  box-shadow: 0 0 14px var(--hud-green);
}

.guild-control-room-page .back-link {
  color: var(--hud-pink);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guild-control-room-page .guild-page-icon {
  border: 1px solid var(--hud-pink-line);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255, 117, 216, 0.24);
}

.guild-control-room-page .guild-server-facts span,
.guild-control-room-page .guild-hero-actions a {
  border: 1px solid rgba(255, 139, 222, 0.28);
  border-radius: 3px;
  background: rgba(3, 5, 15, 0.3);
  box-shadow: inset 0 0 18px rgba(255, 117, 216, 0.035);
}

.guild-control-room-page .guild-hero-actions a:hover {
  border-color: var(--hud-pink-line);
  background: rgba(255, 117, 216, 0.1);
  box-shadow: 0 0 20px rgba(255, 117, 216, 0.12);
}

.guild-control-room-page .guild-tab-nav {
  position: relative;
  z-index: 1;
  gap: 3px;
}

.guild-control-room-page .guild-tab-nav a {
  min-height: 43px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: rgba(3, 4, 14, 0.2);
}

.guild-control-room-page .guild-tab-nav a:hover,
.guild-control-room-page .guild-tab-nav a.active {
  border-color: rgba(255, 117, 216, 0.46);
  background: rgba(255, 117, 216, 0.1);
  box-shadow: inset 2px 0 0 var(--hud-pink), 0 0 18px rgba(255, 117, 216, 0.07);
}

.guild-control-room-page .guild-tab-nav a.active b {
  color: var(--hud-white);
}

.guild-control-room-page .guild-workspace {
  gap: 12px;
}

.guild-control-room-page .guild-console-heading {
  min-height: 96px;
  padding: 14px 18px;
  overflow: hidden;
  border: 1px solid var(--hud-pink-line);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255, 117, 216, 0.08), transparent 36%),
    rgba(3, 5, 15, 0.66);
  box-shadow: inset 0 0 26px rgba(255, 117, 216, 0.035), 0 16px 46px rgba(0,0,0,0.24);
  backdrop-filter: blur(13px) saturate(1.16);
}

.guild-control-room-page .guild-console-heading::before,
.guild-control-room-page .guild-console-heading::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.guild-control-room-page .guild-console-heading::before {
  left: 0;
  top: 0;
  width: 52px;
  height: 2px;
  background: var(--hud-pink);
  box-shadow: 0 0 16px var(--hud-pink);
}

.guild-control-room-page .guild-console-heading::after {
  right: 15px;
  bottom: 10px;
  width: 78px;
  height: 14px;
  border-right: 1px solid var(--hud-pink-soft);
  border-bottom: 1px solid var(--hud-pink-soft);
}

.guild-control-room-page .guild-console-heading h2 {
  color: var(--hud-white);
  font-family: var(--font-display);
  font-size: clamp(27px, 3vw, 40px);
  letter-spacing: 0;
  text-shadow: 0 0 22px rgba(255, 117, 216, 0.16);
}

.guild-control-room-page .guild-console-heading .muted {
  font-size: 12px;
}

.guild-control-room-page .guild-console-heading .save-dock {
  border: 1px solid rgba(255, 139, 222, 0.3);
  border-radius: 2px;
  background: rgba(3, 5, 15, 0.3);
}

.guild-control-room-page .guild-live-meter span {
  background: var(--hud-pink);
  box-shadow: 0 0 12px rgba(255, 117, 216, 0.38);
}

.guild-control-room-page .guild-tab-panel.active {
  gap: 12px;
}

.guild-control-room-page .guild-premium-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.guild-control-room-page .guild-premium-board article {
  position: relative;
  min-height: 120px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid var(--hud-pink-line);
  border-radius: 2px;
  background:
    linear-gradient(145deg, rgba(255, 117, 216, 0.08), transparent 42%),
    rgba(3, 5, 15, 0.5);
  box-shadow:
    inset 0 0 24px rgba(255, 117, 216, 0.035),
    0 14px 38px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px) saturate(1.15);
}

.guild-control-room-page .guild-premium-board article:nth-child(1),
.guild-control-room-page .guild-premium-board article:nth-child(5) {
  grid-column: span 2;
}

.guild-control-room-page .guild-premium-board article::before {
  content: "";
  position: absolute;
  right: 9px;
  top: 9px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 148, 224, 0.36);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(255, 117, 216, 0.04);
}

.guild-control-room-page .guild-premium-board article::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--hud-pink);
  box-shadow: 0 0 14px var(--hud-pink);
}

.guild-control-room-page .guild-premium-board span,
.guild-control-room-page .guild-premium-signals b,
.guild-control-room-page .guild-feature-wall span {
  color: rgba(255, 229, 248, 0.82);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.guild-control-room-page .guild-premium-board b {
  margin-top: 15px;
  color: var(--hud-white);
  font-size: clamp(22px, 2.4vw, 34px);
  text-shadow: 0 0 18px rgba(255, 117, 216, 0.13);
}

.guild-control-room-page .guild-premium-board em,
.guild-control-room-page .guild-premium-signals em,
.guild-control-room-page .guild-feature-wall em {
  color: rgba(255, 225, 246, 0.62);
}

.guild-control-room-page .guild-overview-signals {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.guild-control-room-page .guild-premium-signals span {
  min-height: 78px;
  border: 1px solid rgba(255, 139, 222, 0.34);
  border-radius: 2px;
  background: rgba(3, 5, 15, 0.52);
  box-shadow: inset 0 0 20px rgba(255, 117, 216, 0.03);
  backdrop-filter: blur(9px);
}

.guild-control-room-page .guild-premium-signals span.live {
  border-color: rgba(113, 255, 207, 0.38);
  background: rgba(4, 20, 20, 0.24);
}

.guild-control-room-page .guild-premium-signals span i {
  border-radius: 1px;
  color: var(--hud-pink);
  background: rgba(255, 117, 216, 0.1);
}

.guild-control-room-page .guild-premium-signals span.live i {
  color: var(--hud-green);
  background: rgba(113, 255, 207, 0.09);
}

.guild-control-room-page .status-strip {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.guild-control-room-page .status-strip div,
.guild-control-room-page .guild-signal-row .rail-toggle {
  border: 1px solid rgba(255, 139, 222, 0.3);
  border-radius: 2px;
  background: rgba(3, 5, 15, 0.54);
  box-shadow: inset 0 0 20px rgba(255, 117, 216, 0.025);
  backdrop-filter: blur(8px);
}

.guild-control-room-page .status-strip div:hover,
.guild-control-room-page .guild-signal-row .rail-toggle:hover {
  border-color: var(--hud-pink-line);
  background: rgba(255, 117, 216, 0.08);
  box-shadow: 0 0 18px rgba(255, 117, 216, 0.1);
}

.guild-control-room-page .guild-feature-wall {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.guild-control-room-page .guild-feature-wall a,
.guild-control-room-page .settings-panel,
.guild-control-room-page .panel {
  border: 1px solid var(--hud-pink-line);
  border-radius: 3px;
  background:
    linear-gradient(145deg, rgba(255, 117, 216, 0.065), transparent 38%),
    rgba(3, 5, 15, 0.72);
  box-shadow: inset 0 0 28px rgba(255, 117, 216, 0.03), 0 18px 50px rgba(0,0,0,0.24);
  backdrop-filter: blur(15px) saturate(1.12);
}

.guild-control-room-page .guild-feature-wall a:hover,
.guild-control-room-page .settings-panel:hover {
  border-color: var(--guild-line-bright);
  box-shadow: inset 0 0 32px rgba(255, 117, 216, 0.055), 0 0 26px rgba(255, 117, 216, 0.08);
}

.guild-control-room-page .settings-panel::before {
  background: var(--hud-pink);
  box-shadow: 0 0 14px var(--hud-pink);
}

.guild-control-room-page .settings-panel input:not([type="checkbox"]),
.guild-control-room-page .settings-panel select:not([multiple]),
.guild-control-room-page .settings-panel textarea,
.guild-control-room-page .settings-panel select[multiple] {
  border: 1px solid rgba(255, 139, 222, 0.34);
  border-radius: 2px;
  background: rgba(1, 3, 11, 0.72);
  color: var(--hud-white);
}

.guild-control-room-page .settings-panel input:focus,
.guild-control-room-page .settings-panel select:focus,
.guild-control-room-page .settings-panel textarea:focus {
  border-color: var(--hud-pink);
  box-shadow: 0 0 0 2px rgba(255, 117, 216, 0.12), 0 0 22px rgba(255, 117, 216, 0.09);
}

.guild-control-room-page .settings-panel button,
.guild-control-room-page .panel button {
  border-radius: 2px;
}

.guild-control-room-page .site-footer {
  border-top-color: rgba(255, 117, 216, 0.22);
  background: rgba(2, 3, 11, 0.58);
}

@media (max-width: 1280px) {
  .guild-control-room-page .guild-bridge {
    grid-template-columns: 258px minmax(0, 1fr);
  }

  .guild-control-room-page .guild-premium-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guild-control-room-page .guild-premium-board article:nth-child(1),
  .guild-control-room-page .guild-premium-board article:nth-child(5) {
    grid-column: span 1;
  }

  .guild-control-room-page .guild-overview-signals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.guild-control-room-page {
    background-position: center, center top;
    background-size: auto, auto 100svh;
    background-attachment: scroll;
  }

  .guild-control-room-page .guild-bridge {
    grid-template-columns: 1fr;
  }

  .guild-control-room-page .guild-glass-rail {
    position: relative;
    top: 0;
  }

  .guild-control-room-page .guild-tab-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guild-control-room-page .guild-premium-board,
  .guild-control-room-page .guild-feature-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .guild-control-room-page main {
    width: calc(100% - 14px);
  }

  .guild-control-room-page .guild-tab-nav,
  .guild-control-room-page .guild-premium-board,
  .guild-control-room-page .guild-overview-signals,
  .guild-control-room-page .guild-feature-wall {
    grid-template-columns: 1fr;
  }

  .guild-control-room-page .guild-console-heading {
    min-height: 0;
  }

  .guild-control-room-page .guild-console-heading .save-dock,
  .guild-control-room-page .guild-console-heading .guild-live-meter {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------
   Landing refinements: glyphs inside each feature planet, always-visible
   descriptions under the labels (previously hover-only, which hid the
   copy entirely on touch), and the three-column dashboard band.
   Appended last so these win over the earlier landing block.
   --------------------------------------------------------------------- */

.slayya-world .orb-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  transform: translate(-50%, -50%);
  color: #fff;
  filter: drop-shadow(0 0 12px var(--planet-glow));
  pointer-events: none;
}

.slayya-world .orb-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.slayya-world .planet-cell {
  max-width: 260px;
  margin: 0 auto;
  text-align: center;
}

.slayya-world .feature-orb {
  gap: 18px;
}

.slayya-world .orb-copy {
  margin: 10px 0 0;
  color: rgba(233, 233, 240, 0.62);
  font-size: 13px;
  line-height: 1.55;
}

/* Dashboard band ------------------------------------------------------- */

.slayya-world .world-dashboard {
  padding: 14vh 0 12vh;
}

/* Two columns since the live-status rail was removed: copy on the left, the
   real dashboard components on the right. */
.slayya-world .dashboard-columns {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.slayya-world .dashboard-intro h2 {
  font-size: clamp(26px, 2.3vw, 34px);
}

.slayya-world .dashboard-intro .hero-lede {
  font-size: 15px;
  max-width: none;
}

.slayya-world .dashboard-rail .rail-title {
  margin: 0 0 26px;
  color: #fff;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.slayya-world .rail-stat {
  display: grid;
  gap: 2px;
  margin-bottom: 18px;
}

.slayya-world .rail-stat b {
  color: #fff;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.slayya-world .rail-stat span {
  color: var(--world-muted);
  font-size: 12px;
  font-weight: 600;
}

.slayya-world .rail-note {
  margin: 24px 0 0;
  color: rgba(233, 233, 240, 0.5);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .slayya-world .dashboard-columns {
    grid-template-columns: 1fr;
  }
  .slayya-world .dashboard-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0 20px;
  }
  .slayya-world .dashboard-rail .eyebrow-line,
  .slayya-world .dashboard-rail .rail-title,
  .slayya-world .dashboard-rail .rail-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .slayya-world .orb-copy {
    font-size: 12px;
  }
}

/* Image-backed feature planets. When artwork exists in public/planets/ the
   markup emits .orb-art instead of the procedural sphere, so none of the
   CSS body/ring/glow styling should apply - the supplied image is the whole
   planet and must not sit inside a drawn circle. */
.slayya-world .orb-core.orb-art {
  background: none;
  box-shadow: none;
  border-radius: 0;
  width: clamp(112px, 11vw, 156px);
  height: clamp(112px, 11vw, 156px);
  display: grid;
  place-items: center;
}

.slayya-world .orb-core.orb-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slayya-world .feature-orb:hover .orb-core.orb-art,
.slayya-world .feature-orb:focus-visible .orb-core.orb-art {
  box-shadow: none;
  transform: scale(1.05) translateY(-4px);
}

/* Stat values inside the landing preview. The dashboard sizes these at 38px,
   which fits a number like "1,127" but not the 11-character "Unavailable"
   state - that overflowed its card and collided with the neighbouring one.
   Scoped to the landing page so the real dashboard keeps its larger type. */
.slayya-world .real-stat-card b {
  font-size: clamp(17px, 1.9vw, 26px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.slayya-world .real-stat-card {
  min-width: 0;
}

/* The rail repeats the same values and has the same long-word problem. */
.slayya-world .rail-stat b {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Procedural feature planets, closer to the reference render: a textured
   lit sphere, three thin tilted rings, four moons, a bright neon glyph and
   an outer bloom. This is an approximation - the reference art is a 3D
   render. Supplying files in public/planets/ replaces all of this.
   --------------------------------------------------------------------- */

.slayya-world .orb-core {
  position: relative;
  width: clamp(120px, 12vw, 168px);
  height: clamp(120px, 12vw, 168px);
  overflow: visible;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: grid;
  place-items: center;
  transition: transform 0.45s ease;
}

/* The sphere itself: base colour, mottled surface, limb darkening, and a
   specular highlight lit from the upper left. */
.slayya-world .orb-body {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.55), transparent 34%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,0.55), transparent 46%),
    radial-gradient(ellipse 38% 26% at 62% 38%, rgba(0,0,0,0.34), transparent 60%),
    radial-gradient(ellipse 30% 22% at 34% 66%, rgba(0,0,0,0.30), transparent 60%),
    radial-gradient(ellipse 24% 18% at 72% 20%, rgba(255,255,255,0.14), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--planet-a) 34%, var(--planet-b) 74%, #04040a 100%);
  box-shadow:
    inset -14px -16px 34px rgba(0,0,0,0.72),
    inset 8px 8px 22px rgba(255,255,255,0.13),
    0 0 34px var(--planet-glow),
    0 0 78px var(--planet-glow);
}

.slayya-world .orb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid var(--planet-ring);
  transform: translate(-50%, -50%) rotate(var(--ring-tilt, -18deg));
  box-shadow: 0 0 14px var(--planet-glow);
}

.slayya-world .orb-ring.r1 { width: 168%; height: 44%; opacity: 0.85; }
.slayya-world .orb-ring.r2 { width: 150%; height: 36%; opacity: 0.55; }
.slayya-world .orb-ring.r3 { width: 188%; height: 54%; opacity: 0.32; }

.slayya-world .orb-moon {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.9), var(--planet-a) 60%, #05050a 100%);
  box-shadow: 0 0 10px var(--planet-glow);
}

.slayya-world .orb-moon.m1 { width: 13%; height: 13%; left: -4%;  top: 26%; }
.slayya-world .orb-moon.m2 { width: 9%;  height: 9%;  left: 92%;  top: 16%; }
.slayya-world .orb-moon.m3 { width: 7%;  height: 7%;  left: 84%;  top: 82%; }
.slayya-world .orb-moon.m4 { width: 6%;  height: 6%;  left: 8%;   top: 86%; }

/* Bright neon glyph, matched to the planet hue rather than plain white. */
.slayya-world .orb-icon {
  position: relative;
  z-index: 2;
  width: 40%;
  height: 40%;
  color: #fff;
  filter:
    drop-shadow(0 0 6px var(--planet-a))
    drop-shadow(0 0 18px var(--planet-glow))
    drop-shadow(0 0 34px var(--planet-glow));
}

.slayya-world .orb-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke-width: 1.9;
}

.slayya-world .feature-orb:hover .orb-core,
.slayya-world .feature-orb:focus-visible .orb-core {
  transform: scale(1.05) translateY(-5px);
  box-shadow: none;
}

.slayya-world .feature-orb:hover .orb-body,
.slayya-world .feature-orb:focus-visible .orb-body {
  box-shadow:
    inset -14px -16px 34px rgba(0,0,0,0.68),
    inset 8px 8px 22px rgba(255,255,255,0.17),
    0 0 48px var(--planet-glow),
    0 0 120px var(--planet-glow);
}

@media (prefers-reduced-motion: reduce) {
  .slayya-world .orb-core,
  .slayya-world .orb-body {
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Ring + moon orbital motion. The planet body itself stays completely
   still - only the ring system and moons move around it.

   Rings rotate on rotateY inside a perspective, so the ellipse narrows and
   widens as it turns rather than just spinning flat, which is what reads as
   a ring orbiting a sphere. Each ring runs at its own speed and direction so
   the system has depth instead of moving as one rigid object.
   --------------------------------------------------------------------- */

.slayya-world .orb-core {
  perspective: 620px;
}

/* Static: the sphere must not rotate. */
.slayya-world .orb-body {
  animation: none;
}

@keyframes slayya-ring-orbit {
  from { transform: translate(-50%, -50%) rotate(var(--ring-tilt, -18deg)) rotateY(0deg); }
  to   { transform: translate(-50%, -50%) rotate(var(--ring-tilt, -18deg)) rotateY(360deg); }
}

@keyframes slayya-ring-orbit-reverse {
  from { transform: translate(-50%, -50%) rotate(var(--ring-tilt, -18deg)) rotateY(360deg); }
  to   { transform: translate(-50%, -50%) rotate(var(--ring-tilt, -18deg)) rotateY(0deg); }
}

.slayya-world .orb-ring {
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
}

.slayya-world .orb-ring.r1 { animation: slayya-ring-orbit 22s linear infinite; }
.slayya-world .orb-ring.r2 { animation: slayya-ring-orbit-reverse 31s linear infinite; }
.slayya-world .orb-ring.r3 { animation: slayya-ring-orbit 44s linear infinite; }

/* Moons orbit the centre: parked at the middle, then pushed out along a
   radius that is itself rotating. Sizes stay as set; only position moves. */
.slayya-world .orb-moon {
  left: 50%;
  top: 50%;
  margin-left: -4%;
  margin-top: -4%;
  will-change: transform;
}

@keyframes slayya-moon-orbit {
  from { transform: rotate(var(--moon-start, 0deg)) translateX(var(--moon-radius, 82%)) rotate(calc(var(--moon-start, 0deg) * -1)); }
  to   { transform: rotate(calc(var(--moon-start, 0deg) + 360deg)) translateX(var(--moon-radius, 82%)) rotate(calc((var(--moon-start, 0deg) + 360deg) * -1)); }
}

.slayya-world .orb-moon.m1 { --moon-start: 0deg;   --moon-radius: 92%; animation: slayya-moon-orbit 26s linear infinite; }
.slayya-world .orb-moon.m2 { --moon-start: 130deg; --moon-radius: 78%; animation: slayya-moon-orbit 34s linear infinite; }
.slayya-world .orb-moon.m3 { --moon-start: 232deg; --moon-radius: 99%; animation: slayya-moon-orbit 41s linear infinite; }
.slayya-world .orb-moon.m4 { --moon-start: 310deg; --moon-radius: 70%; animation: slayya-moon-orbit 19s linear infinite; }

/* Motion is decorative, so it stops entirely when reduced motion is asked
   for - the rings and moons simply hold their starting positions. */
@media (prefers-reduced-motion: reduce) {
  .slayya-world .orb-ring,
  .slayya-world .orb-moon {
    animation: none;
  }
}

/* Nav matched to the reference: sentence case, not uppercase tracking. */
.slayya-world .topbar .nav a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(245,245,245,0.72);
}

.slayya-world .topbar .nav a:hover,
.slayya-world .topbar .nav a.active {
  color: #fff;
}

/* Headline sized to sit on two lines in the left column rather than three. */
.slayya-world .hero h1 {
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1.06;
}

.slayya-world .hero-copy {
  max-width: 520px;
}

.slayya-world .hero-lede {
  max-width: 430px;
  font-size: clamp(14px, 1.05vw, 16px);
}

.slayya-world .stat b {
  font-size: clamp(17px, 1.35vw, 21px);
}

/* The supplied hero backdrop image was removed. Masking it produced a
   visibly edged rectangle sitting over the page - a translucent panel
   rather than a background. The flat page colour plus the WebGL disk now
   provide the whole scene. */


/* Hero stat row. Flex-wrap laid these out by content width, so the long
   "Unavailable" state pushed the fourth item onto its own ragged second row
   while the numeric states fitted three-up. A fixed grid keeps the columns
   aligned regardless of whether a value reads "1,127" or "Unavailable". */
.slayya-world .hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 18px;
  max-width: 560px;
}

.slayya-world .hero-stats .stat {
  min-width: 0;
}

.slayya-world .hero-stats .stat b {
  display: block;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.slayya-world .hero-stats .stat span {
  font-size: 11px;
}

@media (max-width: 860px) {
  .slayya-world .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 380px;
  }
}

/* Offline state in the dashboard preview. Six cards each shouting
   "Unavailable" at full stat size read as a broken page rather than as an
   idle bot, so the unavailable state is set smaller and dimmer than a real
   figure. A number still renders at full weight, so live data stands out. */
.slayya-world .real-stat-card b[data-stat] {
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.slayya-world .real-stat-card b[data-unavailable="true"] {
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 600;
  color: rgba(245, 245, 245, 0.42);
  letter-spacing: 0.01em;
}

/* Getting-started steps. Replaces the old live dashboard preview, which
   depended on bot telemetry and showed six "Loading…" cards whenever the
   bot was offline. */
.slayya-world .setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.slayya-world .setup-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 30px 28px 26px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)), rgba(9,9,13,0.6);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.slayya-world .setup-step:hover {
  border-color: rgba(160,107,255,0.34);
  transform: translateY(-3px);
}

.slayya-world .setup-num {
  position: absolute;
  top: 22px;
  right: 24px;
  color: rgba(160,107,255,0.42);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.slayya-world .setup-icon {
  margin: 0;
  font-size: 0;
}

.slayya-world .setup-step h3 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.slayya-world .setup-body {
  margin: 0;
  color: var(--world-muted);
  font-size: 14px;
  line-height: 1.6;
}

.slayya-world .setup-link {
  margin-top: 6px;
  color: #a06bff;
  font-size: 13px;
  font-weight: 700;
  transition: color 0.2s ease;
}

.slayya-world .setup-link:hover,
.slayya-world .setup-link:focus-visible {
  color: #c39bff;
}

/* ---------------------------------------------------------------------
   Cosmic reference landing page
   --------------------------------------------------------------------- */

body.cosmic-reference-page {
  --cosmic-purple: #8f35ff;
  --cosmic-purple-soft: #b875ff;
  --cosmic-ink: #f8f6ff;
  --cosmic-muted: #aaa6b5;
  --pointer-x: 0;
  --pointer-y: 0;
  --hero-scroll: 0;
  overflow-x: hidden;
  background: #030207;
  color: var(--cosmic-ink);
}

body.cosmic-reference-page::before {
  z-index: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(83, 30, 148, 0.12), transparent 24%),
    radial-gradient(circle at 81% 72%, rgba(89, 28, 165, 0.12), transparent 28%),
    #030207;
}

.cosmic-reference-page main,
.cosmic-reference-page .site-footer {
  position: relative;
  z-index: 1;
}

.cosmic-reference-page .topbar {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 30;
  width: min(1380px, calc(100% - 64px));
  min-height: 64px;
  padding: 12px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  transform: translateX(-50%);
}

.cosmic-reference-page .topbar .brand {
  justify-self: start;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.cosmic-reference-page .topbar .brand > :first-child {
  display: none;
}

.cosmic-reference-page .topbar .brand::before {
  content: "";
  width: 27px;
  height: 27px;
  border: 4px solid #9139ff;
  border-right-color: rgba(145, 57, 255, 0.24);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #120822, 0 0 18px rgba(145, 57, 255, 0.48);
  transform: rotate(-28deg);
}

.cosmic-reference-page .topbar .nav {
  justify-self: center;
  gap: 17px;
}

.cosmic-reference-page .topbar .nav a {
  padding: 8px 5px;
  color: rgba(247, 244, 255, 0.82);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}

.cosmic-reference-page .topbar .nav a:hover,
.cosmic-reference-page .topbar .nav a:focus-visible {
  color: #fff;
  background: transparent;
}

.cosmic-reference-page .topbar-actions {
  justify-self: end;
  display: flex;
  gap: 10px;
}

.cosmic-reference-page .topbar-actions .button {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 750;
  background: linear-gradient(135deg, #7a18e9, #a43fff);
  border-color: rgba(191, 125, 255, 0.45);
  box-shadow: 0 10px 24px rgba(108, 23, 210, 0.28);
}

.cosmic-reference-page .topbar-actions .button.ghost {
  background: rgba(8, 5, 14, 0.62);
  border-color: rgba(153, 84, 225, 0.45);
  box-shadow: none;
}

.cosmic-hero {
  position: relative;
  min-height: 448px;
  overflow: hidden;
  isolation: isolate;
  background: #020106;
}

.cosmic-hero::before,
.cosmic-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cosmic-hero::before {
  background:
    linear-gradient(90deg, rgba(2, 1, 6, 0.97) 0%, rgba(2, 1, 6, 0.88) 18%, rgba(2, 1, 6, 0.22) 47%, rgba(2, 1, 6, 0.04) 76%, rgba(2, 1, 6, 0.58) 100%),
    linear-gradient(180deg, rgba(2, 1, 6, 0.24), transparent 38%, rgba(2, 1, 6, 0.64));
}

.cosmic-hero::after {
  opacity: 0.34;
  background-image:
    radial-gradient(circle at 7% 23%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 78%, #ac7cff 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 13%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 64%, #b95cff 0 1px, transparent 1.5px);
  background-size: 211px 167px, 283px 227px, 173px 251px, 307px 193px;
}

.cosmic-hero-art {
  position: absolute;
  inset: -9% -4% -14%;
  z-index: -2;
  background-image: url("/slayya-black-hole.png");
  background-image: image-set(
    url("/slayya-black-hole.avif") type("image/avif"),
    url("/slayya-black-hole.webp") type("image/webp"),
    url("/slayya-black-hole.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: 62% 50%;
  background-size: cover;
  filter: saturate(1.08) contrast(1.04);
  transform: translate3d(calc(var(--pointer-x) * -12px), calc(var(--pointer-y) * -8px + var(--hero-scroll) * 20px), 0) scale(1.045);
  transition: filter 0.25s ease;
  will-change: transform;
}

.cosmic-hero-inner {
  position: relative;
  width: min(1380px, calc(100% - 64px));
  min-height: 448px;
  margin: 0 auto;
  padding-top: 96px;
}

.cosmic-reference-page .cosmic-hero .hero-copy {
  position: relative;
  z-index: 5;
  width: 350px;
  max-width: 100%;
}

.cosmic-reference-page .eyebrow-line {
  margin: 0 0 14px;
  color: #bb78ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.cosmic-reference-page .cosmic-hero h1 {
  margin: 0;
  color: #f8f7fb;
  font-size: 42px;
  line-height: 0.98;
  font-weight: 820;
  letter-spacing: 0;
}

.cosmic-reference-page .cosmic-hero h1 em,
.cosmic-dashboard-band h2 em {
  display: inline;
  color: #9c45ff;
  font-style: normal;
}

.cosmic-reference-page .cosmic-hero .hero-lede {
  max-width: 320px;
  margin-top: 18px;
  color: rgba(230, 227, 237, 0.73);
  font-size: 13px;
  line-height: 1.55;
}

.cosmic-reference-page .hero-actions {
  gap: 12px;
  margin-top: 21px;
}

.cosmic-reference-page .cta {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 760;
}

.cosmic-reference-page .cta.primary {
  background: linear-gradient(135deg, #7515df, #a53eff);
  border: 1px solid rgba(192, 130, 255, 0.38);
  box-shadow: 0 10px 30px rgba(110, 20, 225, 0.34), inset 0 1px rgba(255, 255, 255, 0.18);
}

.cosmic-reference-page .cta.secondary {
  background: rgba(3, 2, 8, 0.64);
  border-color: rgba(155, 87, 223, 0.35);
}

.cosmic-reference-page .cta .premium-emoji {
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 6px;
}

.discord-glyph,
.cosmic-reference-page .topbar-actions .button:not(.ghost)::before {
  content: "";
  width: 15px;
  height: 11px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 7px 7px 5px 5px;
  background:
    radial-gradient(circle at 35% 52%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 65% 52%, currentColor 0 1px, transparent 1.5px);
}

.invite-cta { gap: 8px; }

.cosmic-reference-page .cosmic-hero .hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 410px;
  max-width: 100%;
  margin-top: 30px;
}

.cosmic-reference-page .cosmic-hero .stat {
  position: relative;
  display: grid;
  grid-template-columns: 23px 1fr;
  grid-template-rows: auto auto;
  min-width: 0;
  gap: 0 7px;
}

.cosmic-reference-page .cosmic-hero .stat i {
  grid-row: 1 / 3;
  align-self: center;
  width: 19px;
  height: 19px;
  border: 2px solid #9d45ff;
  border-radius: 5px;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(157, 69, 255, 0.4);
}

.cosmic-reference-page .cosmic-hero .stat:nth-child(2) i { border-radius: 50%; }
.cosmic-reference-page .cosmic-hero .stat:nth-child(3) i { border-radius: 50%; border-style: dotted; }
.cosmic-reference-page .cosmic-hero .stat:nth-child(4) i { border-radius: 50%; border-width: 1px; }

.cosmic-reference-page .cosmic-hero .stat b {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cosmic-reference-page .cosmic-hero .stat b[data-unavailable] {
  font-size: 10px;
}

.cosmic-reference-page .cosmic-hero .stat span {
  color: rgba(220, 216, 229, 0.6);
  font-size: 9px;
  font-weight: 600;
}

.cosmic-features {
  position: relative;
  z-index: 2;
  min-height: 292px;
  padding: 25px max(32px, calc((100% - 1430px) / 2)) 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(122, 50, 202, 0.18), transparent 44%),
    radial-gradient(circle at 12% 70%, rgba(72, 31, 128, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(3, 2, 8, 0.9), rgba(3, 2, 8, 0.98)),
    #030207;
  border-top: 1px solid rgba(146, 79, 215, 0.09);
  opacity: 0.6;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.cosmic-features.is-visible,
.cosmic-reference-page.reduced-motion .cosmic-features { opacity: 1; transform: none; }

.cosmic-features .section-head {
  margin-bottom: 14px;
  text-align: center;
}

.cosmic-features .section-head .eyebrow-line { margin-bottom: 5px; font-size: 8px; }
.cosmic-features .section-head h2 { margin: 0; font-size: 24px; letter-spacing: 0; }
.cosmic-features .section-head h2::first-letter { color: #fff; }

.cosmic-reference-page .cosmic-features .planet-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-width: 1430px;
  margin: 0 auto;
}

.cosmic-reference-page .cosmic-features .planet-cell {
  width: 100%;
  max-width: none;
  margin: 0;
}

.cosmic-reference-page .cosmic-features .feature-orb {
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 100%;
  padding: 0;
}

.cosmic-reference-page .cosmic-features .orb-core.orb-art {
  width: 150px;
  height: 128px;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.cosmic-reference-page .cosmic-features .orb-core.orb-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.32);
}

.cosmic-reference-page .cosmic-features .feature-orb:hover .orb-core,
.cosmic-reference-page .cosmic-features .feature-orb:focus-visible .orb-core {
  transform: translateY(-5px) scale(1.05);
  filter: brightness(1.14);
}

.cosmic-reference-page .cosmic-features .orb-label {
  color: #f7f4fa;
  font-size: 14px;
  font-weight: 740;
}

.cosmic-reference-page .cosmic-features .orb-copy {
  max-width: 170px;
  min-height: 40px;
  margin: 6px auto 0;
  color: rgba(229, 224, 235, 0.67);
  font-size: 9px;
  line-height: 1.45;
}

.cosmic-dashboard-band {
  position: relative;
  z-index: 2;
  min-height: 330px;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 40%, rgba(113, 35, 206, 0.22), transparent 27%),
    linear-gradient(180deg, #06030d, #040207);
  border-top: 1px solid rgba(181, 106, 255, 0.14);
  opacity: 0.6;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.cosmic-dashboard-band.is-visible,
.cosmic-reference-page.reduced-motion .cosmic-dashboard-band { opacity: 1; transform: none; }

.dashboard-band-inner {
  position: relative;
  display: grid;
  grid-template-columns: 250px minmax(500px, 1fr) 255px;
  align-items: center;
  gap: 36px;
  width: min(1380px, calc(100% - 64px));
  min-height: 330px;
  margin: 0 auto;
}

.dashboard-band-copy h2,
.live-rail h2 {
  margin: 0;
  color: #fff;
  font-size: 23px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
}

.dashboard-band-copy > p:not(.eyebrow-line) {
  margin: 13px 0 0;
  color: rgba(225, 220, 232, 0.63);
  font-size: 11px;
  line-height: 1.55;
}

.dashboard-band-copy .cta { margin-top: 18px; }

.cosmic-dashboard-preview {
  display: grid;
  grid-template-columns: 112px 1fr;
  height: 278px;
  overflow: hidden;
  border: 1px solid rgba(181, 113, 247, 0.23);
  border-radius: 8px;
  background: rgba(5, 5, 10, 0.84);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 50px rgba(100, 31, 184, 0.1);
}

.cosmic-dashboard-preview aside {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 15px 9px;
  background: rgba(13, 9, 20, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.cosmic-dashboard-preview aside b {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 5px 10px;
  font-size: 9px;
}

.cosmic-dashboard-preview aside b i {
  width: 17px;
  height: 17px;
  border: 3px solid #913bff;
  border-right-color: transparent;
  border-radius: 50%;
}

.cosmic-dashboard-preview aside span {
  padding: 6px 8px;
  border-radius: 4px;
  color: rgba(230, 225, 236, 0.52);
  font-size: 8px;
}

.cosmic-dashboard-preview aside span.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(129, 41, 223, 0.9), rgba(107, 37, 184, 0.72));
}

.preview-main { padding: 13px 16px; min-width: 0; }
.preview-top { display: flex; align-items: center; gap: 8px; color: rgba(229, 224, 235, 0.48); font-size: 8px; }
.preview-top span { margin-right: auto; }
.preview-top i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.preview-main h3 { margin: 18px 0 12px; font-size: 14px; }
.preview-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.preview-stats > span {
  display: grid;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
}
.preview-stats small { color: rgba(230, 225, 236, 0.55); font-size: 7px; }
.preview-stats b { overflow: hidden; margin-top: 4px; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.preview-stats em { margin-top: 4px; color: #55d996; font-size: 6px; font-style: normal; }
.preview-chart {
  position: relative;
  height: 92px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(123, 44, 212, 0.08), transparent);
}
.preview-chart span { position: absolute; top: 8px; left: 10px; color: rgba(229, 224, 235, 0.58); font-size: 7px; }
.preview-chart i {
  position: absolute;
  bottom: 21px;
  width: 14%;
  height: 2px;
  background: #9944ff;
  box-shadow: 0 0 9px rgba(153, 68, 255, 0.6);
  transform-origin: left center;
}
.preview-chart i:nth-of-type(1) { left: 5%; transform: rotate(-13deg); }
.preview-chart i:nth-of-type(2) { left: 18%; bottom: 27px; transform: rotate(10deg); }
.preview-chart i:nth-of-type(3) { left: 31%; bottom: 23px; transform: rotate(-18deg); }
.preview-chart i:nth-of-type(4) { left: 44%; bottom: 31px; transform: rotate(8deg); }
.preview-chart i:nth-of-type(5) { left: 57%; bottom: 29px; transform: rotate(-11deg); }
.preview-chart i:nth-of-type(6) { left: 70%; bottom: 34px; transform: rotate(15deg); }
.preview-chart i:nth-of-type(7) { left: 83%; bottom: 26px; transform: rotate(-6deg); }

.live-rail {
  position: relative;
  min-height: 260px;
  padding-right: 110px;
}

.live-rail .eyebrow-line { margin-bottom: 6px; font-size: 8px; }
.live-rail h2 { font-size: 21px; }
.live-rail dl { display: grid; gap: 6px; margin: 16px 0 0; }
.live-rail dl div { display: grid; }
.live-rail dt { order: 2; color: rgba(225, 220, 232, 0.5); font-size: 7px; text-transform: uppercase; }
.live-rail dd { margin: 0; color: #ad5cff; font-size: 17px; font-weight: 800; }
.live-rail dd[data-unavailable] { font-size: 9px; }
.system-online { display: flex; align-items: center; gap: 5px; margin: 11px 0 0; color: #54da8d; font-size: 8px; }
.system-online i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.cosmic-reference-page:not(.telemetry-live) .system-online { color: #d6a85a; }
.live-earth {
  position: absolute;
  right: -58px;
  bottom: -45px;
  width: 215px;
  height: 215px;
  filter: drop-shadow(0 0 28px rgba(123, 56, 229, 0.35));
  transform: translate3d(calc(var(--pointer-x) * -9px), calc(var(--pointer-y) * -6px), 0);
}
.live-earth img { display: block; width: 100%; height: 100%; object-fit: contain; }

.cosmic-reference-page .site-footer {
  margin-top: 0;
  display: block;
  background: rgba(3, 2, 7, 0.96);
  border-color: rgba(158, 80, 237, 0.12);
}

@media (max-width: 1180px) {
  .cosmic-reference-page .topbar,
  .cosmic-hero-inner,
  .dashboard-band-inner { width: min(100% - 40px, 1040px); }
  .cosmic-reference-page .topbar .nav { gap: 7px; }
  .cosmic-reference-page .topbar .nav a { font-size: 10px; }
  .dashboard-band-inner { grid-template-columns: 220px minmax(430px, 1fr); }
  .live-rail { display: none; }
}

@media (max-width: 900px) {
  .cosmic-reference-page .topbar { grid-template-columns: 1fr auto; }
  .cosmic-reference-page .topbar .nav { display: none; }
  .cosmic-reference-page .topbar-actions { grid-column: 2; }
  .cosmic-hero { min-height: 650px; }
  .cosmic-hero-inner { min-height: 650px; padding-top: 100px; }
  .cosmic-hero-art { inset: 160px -34% -12% -30%; background-position: 67% 50%; background-size: cover; }
  .cosmic-hero::before { background: linear-gradient(180deg, rgba(2,1,6,0.95) 0%, rgba(2,1,6,0.74) 40%, rgba(2,1,6,0.15) 70%, rgba(2,1,6,0.72) 100%); }
  .cosmic-reference-page .cosmic-hero .hero-copy { width: 420px; }
  .cosmic-reference-page .cosmic-features .planet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .cosmic-features { padding-bottom: 35px; }
  .dashboard-band-inner { grid-template-columns: 1fr; padding: 52px 0; }
  .dashboard-band-copy { max-width: 520px; }
  .cosmic-dashboard-preview { width: 100%; }
}

@media (max-width: 600px) {
  .cosmic-reference-page .topbar,
  .cosmic-hero-inner,
  .dashboard-band-inner { width: calc(100% - 28px); }
  .cosmic-reference-page .topbar-actions .button.ghost { display: none; }
  .cosmic-reference-page .topbar-actions .button { padding: 0 11px; font-size: 10px; }
  .cosmic-hero { min-height: 660px; }
  .cosmic-reference-page .cosmic-hero h1 { font-size: 40px; }
  .cosmic-reference-page .cosmic-hero .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 310px; }
  .cosmic-reference-page .cosmic-hero .stat b[data-unavailable] { font-size: 9px; }
  .cosmic-hero-art { inset: 225px -85% -5% -60%; background-position: 65% 50%; }
  .cosmic-features .section-head h2 { font-size: 22px; }
  .cosmic-reference-page .cosmic-features .planet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cosmic-reference-page .cosmic-features .orb-core.orb-art { width: 135px; height: 116px; }
  .cosmic-reference-page .cosmic-features .orb-copy { min-height: 56px; }
  .cosmic-dashboard-preview { grid-template-columns: 76px 1fr; height: 246px; }
  .cosmic-dashboard-preview aside { padding-inline: 6px; }
  .cosmic-dashboard-preview aside b { font-size: 7px; }
  .cosmic-dashboard-preview aside span { padding: 5px 6px; font-size: 7px; }
  .preview-main { padding: 10px; }
  .preview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-stats > span:nth-child(n + 3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-hero-art,
  .live-earth { transform: none; animation: none; }
}

/* Galaxy command center -------------------------------------------------- */
.galaxy-dashboard-page {
  --mission-purple: #8f42ff;
  --mission-violet: #b95cff;
  --mission-blue: #5c8dff;
  --mission-cyan: #49d9e8;
  --mission-green: #39dc87;
  --mission-gold: #f4bd55;
  --mission-red: #ff607f;
  min-width: 320px;
  color: #f7f5ff;
  background: #030208;
}

.galaxy-dashboard-page > .topbar,
.galaxy-dashboard-page > .site-footer { display: none; }
.galaxy-dashboard-page > main { width: 100%; min-height: 100vh; margin: 0; padding: 0; }

.mission-control {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 54% 36%, rgba(90, 33, 178, 0.07), transparent 32%),
    #03030a;
}

.mission-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 720px;
  padding: 22px 18px 18px;
  border-right: 1px solid rgba(165, 111, 255, 0.12);
  background: rgba(5, 4, 14, 0.98);
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.24);
}

.mission-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 0 11px 17px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mission-brand-mark,
.mission-brand-orbit {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
}
.mission-brand-orbit {
  position: relative;
  display: block;
  border: 2px solid #9a42ff;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(143, 66, 255, 0.34), inset 0 0 16px rgba(143, 66, 255, 0.18);
  transform: rotate(-24deg);
}
.mission-brand-orbit::before,
.mission-brand-orbit::after,
.mission-brand-orbit i {
  content: "";
  position: absolute;
  border: 2px solid #8f42ff;
  border-radius: 50%;
}
.mission-brand-orbit::before { inset: 5px -5px; }
.mission-brand-orbit::after { inset: 10px -8px; opacity: 0.7; }
.mission-brand-orbit i { inset: 10px; background: #8f42ff; box-shadow: 0 0 13px #8f42ff; }
.mission-brand-mark {
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(143, 66, 255, 0.38);
}

.mission-sidebar nav { display: grid; gap: 2px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.mission-sidebar nav::-webkit-scrollbar { display: none; }
.mission-nav-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 6px 10px;
  overflow: hidden;
  color: rgba(229, 225, 241, 0.68);
  border: 1px solid transparent;
  border-radius: 7px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mission-nav-link:hover,
.mission-nav-link:focus-visible,
.mission-nav-link.active {
  color: #fff;
  border-color: rgba(161, 97, 255, 0.2);
  background: linear-gradient(90deg, rgba(111, 40, 205, 0.46), rgba(91, 44, 172, 0.15));
  transform: translateX(2px);
}

.mission-nav-link .premium-emoji {
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: 7px;
  font-size: 7px;
}

.mission-nav-link > span { min-width: 0; }
.mission-nav-link b,
.mission-nav-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-nav-link b { font-size: 11px; font-weight: 620; }
.mission-nav-link small,
.mission-nav-link em { display: none; }

.mission-system-status {
  position: relative;
  margin-top: auto;
  min-height: 174px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(161, 110, 246, 0.15);
  border-radius: 8px;
  background: rgba(10, 8, 20, 0.72);
}

.mission-system-status > span { color: rgba(216, 209, 230, 0.5); font-size: 9px; }
.mission-system-status > b { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 9px; font-weight: 650; }
.mission-system-status > b i,
.live-indicator i,
.mission-planet-copy small i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.mission-system-status .is-online { color: #42df89; }
.mission-system-status .is-warning { color: #f3bd5d; }
.mission-system-status .is-waiting { color: #9a8cad; }
.mission-system-status strong { position: absolute; right: 14px; bottom: 26px; font-size: 18px; }
.mission-system-status > small { position: absolute; right: 14px; bottom: 13px; color: rgba(216, 209, 230, 0.43); font-size: 8px; }

.mission-radar { position: absolute; left: 18px; bottom: 16px; width: 70px; height: 70px; border: 1px solid rgba(73, 217, 232, 0.18); border-radius: 50%; }
.mission-radar::before,
.mission-radar::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(73, 217, 232, 0.14); border-radius: inherit; }
.mission-radar::after { inset: 31px; background: #51e5d5; border: 0; box-shadow: 0 0 12px #51e5d5; }
.mission-radar i { position: absolute; left: 50%; top: 50%; width: 34px; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(74, 229, 219, 0.8), transparent); animation: mission-radar 4s linear infinite; }
.mission-radar i:nth-child(2) { transform: rotate(120deg); opacity: 0.34; animation: none; }
.mission-radar i:nth-child(3) { transform: rotate(238deg); opacity: 0.22; animation: none; }

.mission-workspace { min-width: 0; }
.mission-topbar {
  position: sticky;
  top: 0;
  z-index: 24;
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(280px, 1.35fr) 42px auto minmax(190px, auto);
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(166, 109, 255, 0.11);
  background: rgba(4, 3, 11, 0.94);
  backdrop-filter: blur(20px);
}

.mission-title h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: 0; }
.mission-title p { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; color: rgba(207, 199, 223, 0.55); font-size: 10px; }
.mission-title p i { width: 6px; height: 6px; border-radius: 50%; background: var(--mission-purple); box-shadow: 0 0 9px var(--mission-purple); }

.mission-search-wrap { position: relative; width: 100%; max-width: 520px; justify-self: center; }
.mission-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  height: 43px;
  padding: 0 12px;
  border: 1px solid rgba(161, 105, 255, 0.14);
  border-radius: 7px;
  background: rgba(10, 8, 20, 0.68);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
}

.search-lens { position: relative; width: 14px; height: 14px; border: 1.5px solid #9e8fc0; border-radius: 50%; }
.search-lens::after { content: ""; position: absolute; width: 6px; height: 1.5px; right: -5px; bottom: -2px; background: #9e8fc0; transform: rotate(45deg); }
.mission-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; color: #f5f1ff; background: transparent; font: inherit; font-size: 11px; }
.mission-search input::placeholder { color: rgba(211, 202, 229, 0.58); }
.mission-search kbd { padding: 4px 6px; color: rgba(209, 199, 226, 0.43); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; font: inherit; font-size: 8px; }
.mission-search:focus-within { border-color: rgba(158, 87, 255, 0.62); box-shadow: 0 0 0 3px rgba(127, 0, 255, 0.08), 0 15px 45px rgba(0, 0, 0, 0.28); }

.mission-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  max-height: 360px;
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(161, 105, 255, 0.2);
  border-radius: 8px;
  background: rgba(8, 6, 17, 0.98);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.mission-search-results[hidden],
.mission-search-results [hidden] { display: none !important; }
.mission-search-results a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px; color: rgba(231, 226, 241, 0.75); border-radius: 6px; text-decoration: none; }
.mission-search-results a:hover,
.mission-search-results a:focus-visible,
.mission-search-results a.is-search-active { color: #fff; background: rgba(133, 62, 240, 0.18); }
.mission-search-results b { font-size: 11px; }
.mission-search-results span { color: rgba(202, 193, 219, 0.46); font-size: 9px; text-align: right; }
.mission-search-empty { margin: 0; padding: 12px 10px; color: rgba(231, 226, 241, 0.62); font-size: 10px; }

.mission-notification {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
}
.mission-notification i { position: absolute; left: 13px; top: 10px; width: 12px; height: 14px; border: 1.5px solid #b9aecb; border-radius: 8px 8px 5px 5px; }
.mission-notification i::after { content: ""; position: absolute; left: 4px; bottom: -5px; width: 4px; height: 4px; border-bottom: 1.5px solid #b9aecb; border-radius: 50%; }
.mission-notification > span { position: absolute; right: 4px; top: 3px; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; color: #fff; border-radius: 7px; background: #8d3cff; font-size: 7px; }
.mission-notification:hover { border-color: rgba(164, 101, 255, 0.25); background: rgba(139, 67, 246, 0.1); }

.mission-user-menu,
.mission-server-menu { position: relative; min-width: 0; }
.mission-user-menu summary,
.mission-server-menu summary {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 7px 9px;
  list-style: none;
  border: 1px solid rgba(160, 105, 244, 0.13);
  border-radius: 8px;
  background: rgba(11, 9, 20, 0.72);
  cursor: pointer;
}
.mission-user-menu summary::-webkit-details-marker,
.mission-server-menu summary::-webkit-details-marker { display: none; }
.mission-user-menu summary img,
.mission-user-avatar,
.mission-server-avatar,
.mission-server-fallback { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; }
.mission-server-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  overflow: hidden;
}
.mission-server-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.mission-user-menu summary span,
.mission-server-menu summary span { min-width: 0; }
.mission-user-menu summary small,
.mission-user-menu summary b,
.mission-server-menu summary small,
.mission-server-menu summary b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-user-menu summary small,
.mission-server-menu summary small { color: rgba(206, 197, 221, 0.48); font-size: 8px; }
.mission-user-menu summary b,
.mission-server-menu summary b { margin-top: 2px; font-size: 11px; }
.mission-user-menu summary > i,
.mission-server-menu summary > i { width: 7px; height: 7px; border-right: 1px solid #9d91af; border-bottom: 1px solid #9d91af; transform: rotate(45deg); }
.mission-user-menu[open] summary,
.mission-server-menu[open] summary { border-color: rgba(163, 93, 255, 0.48); }
.mission-user-menu > div,
.mission-server-menu > div {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 70;
  display: grid;
  width: 240px;
  max-height: 380px;
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(165, 106, 255, 0.2);
  border-radius: 8px;
  background: rgba(8, 6, 17, 0.98);
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.55);
}
.mission-user-menu > div { width: 170px; }
.mission-user-menu > div a,
.mission-server-menu > div a { display: flex; align-items: center; gap: 9px; padding: 9px; color: rgba(232, 227, 241, 0.72); border-radius: 6px; text-decoration: none; font-size: 10px; }
.mission-user-menu > div a:hover,
.mission-server-menu > div a:hover { color: #fff; background: rgba(136, 63, 241, 0.18); }
.mission-server-menu > div a > span:nth-child(2) { min-width: 0; }
.mission-server-menu > div b,
.mission-server-menu > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-server-menu > div small { margin-top: 2px; color: rgba(202, 193, 217, 0.46); font-size: 8px; }

.mission-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  padding: 14px 16px 22px;
}
.mission-center-column { min-width: 0; }

.mission-scene {
  position: relative;
  min-height: 512px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(160, 100, 255, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 21% 28%, rgba(51, 139, 157, 0.13), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(126, 52, 181, 0.12), transparent 34%),
    linear-gradient(145deg, #05070d, #080711 52%, #05060b);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.42), inset 0 0 100px rgba(93, 27, 178, 0.12);
  perspective: 1200px;
}
.mission-scene::before,
.mission-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mission-scene::before { background: linear-gradient(180deg, rgba(3, 2, 10, 0.1), rgba(3, 2, 10, 0.02) 58%, rgba(3, 2, 10, 0.58)); }
.mission-scene::after { opacity: 0.62; background-image: radial-gradient(circle at 8% 22%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 71% 14%, #b894ff 0 1px, transparent 1.5px), radial-gradient(circle at 84% 66%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 37% 82%, #8a56e8 0 1px, transparent 1.5px); background-size: 173px 139px, 219px 177px, 283px 233px, 127px 191px; }
.mission-scene > header { position: relative; z-index: 16; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; background: linear-gradient(180deg, rgba(5, 3, 13, 0.78), transparent); }
.mission-scene > header p { margin: 0; color: #f7f2ff; font-size: 14px; font-weight: 820; text-transform: uppercase; }
.mission-scene > header h2 { margin: 4px 0 0; color: rgba(225, 217, 237, 0.58); font-size: 10px; font-weight: 520; letter-spacing: 0; }
.mission-scene > header > div:last-child { display: flex; gap: 8px; }
.mission-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; color: #f2edfb; border: 1px solid rgba(155, 96, 241, 0.3); border-radius: 6px; background: rgba(7, 5, 15, 0.63); text-decoration: none; font-size: 9px; font-weight: 700; backdrop-filter: blur(10px); }
.mission-action.primary { color: #fff; border-color: rgba(186, 123, 255, 0.35); background: linear-gradient(135deg, #6930c9, #8d3cf2); box-shadow: 0 13px 28px rgba(88, 25, 188, 0.28); }
.mission-action:hover { transform: translateY(-1px); filter: brightness(1.12); }

.mission-orbit-field {
  position: absolute;
  inset: 78px 8% 18px;
  z-index: 1;
  pointer-events: none;
  transform: translate3d(var(--orbit-x, 0px), var(--orbit-y, 0px), 0);
}
.mission-orbit-field i {
  position: absolute;
  left: 50%;
  top: 53%;
  border: 1px solid rgba(154, 91, 233, 0.22);
  border-radius: 50%;
  box-shadow: inset 0 0 28px rgba(126, 56, 203, 0.05), 0 0 18px rgba(91, 37, 151, 0.05);
  transform: translate(-50%, -50%) rotate(var(--orbit-tilt));
  animation: mission-orbit-track var(--orbit-speed) linear infinite;
}
.mission-orbit-field i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b674ff;
  box-shadow: 0 0 8px #9d43ff, 0 0 18px rgba(157, 67, 255, 0.7);
}
.mission-orbit-field i:nth-child(1) { width: 42%; height: 34%; --orbit-tilt: -7deg; --orbit-speed: 25s; }
.mission-orbit-field i:nth-child(2) { width: 68%; height: 58%; --orbit-tilt: 5deg; --orbit-speed: 38s; animation-direction: reverse; }
.mission-orbit-field i:nth-child(3) { width: 96%; height: 84%; --orbit-tilt: -3deg; --orbit-speed: 52s; }

.mission-bot-core {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #fff;
  text-decoration: none;
  transform: translate(-50%, -50%) translate3d(var(--core-x, 0px), var(--core-y, 0px), 0);
}
.mission-bot-core::before,
.mission-bot-core::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44px;
  z-index: -1;
  border: 1px solid rgba(180, 105, 255, 0.46);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: mission-core-pulse 4.8s ease-in-out infinite;
}
.mission-bot-core::before { width: 126px; height: 126px; }
.mission-bot-core::after { width: 151px; height: 151px; border-color: rgba(130, 70, 210, 0.2); animation-delay: -2.4s; }
.mission-bot-avatar-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(219, 178, 255, 0.82);
  border-radius: 50%;
  background: rgba(11, 6, 22, 0.92);
  box-shadow: 0 0 0 5px rgba(137, 51, 229, 0.14), 0 0 28px rgba(144, 60, 242, 0.52), inset 0 0 22px rgba(152, 80, 244, 0.24);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mission-bot-avatar-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mission-bot-core strong { margin-top: 5px; font-size: 12px; line-height: 1; text-shadow: 0 2px 12px #030108; }
.mission-bot-core small { display: flex; align-items: center; gap: 5px; color: rgba(223, 213, 236, 0.66); font-size: 8px; }
.mission-bot-core small i { width: 6px; height: 6px; border-radius: 50%; background: #42dc89; box-shadow: 0 0 9px #42dc89; }
.mission-bot-core:hover .mission-bot-avatar-frame,
.mission-bot-core:focus-visible .mission-bot-avatar-frame { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(137, 51, 229, 0.2), 0 0 42px rgba(162, 76, 255, 0.7); }

.mission-planet { position: absolute; z-index: 9; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; transform: translate3d(var(--planet-x, 0px), var(--planet-y, 0px), 0); transition: filter 0.2s ease; }
.mission-planet-sphere { position: relative; display: grid; place-items: center; width: 82px; height: 82px; flex: 0 0 auto; border-radius: 50%; transition: transform 0.3s ease; filter: drop-shadow(0 0 20px rgba(152, 78, 255, 0.36)); }
.mission-planet-sphere::after { content: ""; position: absolute; inset: 17% -15%; border: 1px solid currentColor; border-radius: 50%; opacity: 0.35; transform: rotate(-12deg); }
.mission-planet-sphere picture { display: contents; }
.mission-planet-sphere img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.mission-planet-glyph { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid currentColor; border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,0.3), transparent 28%), radial-gradient(circle at center, currentColor 0, rgba(74, 38, 110, 0.7) 72%); box-shadow: inset -10px -10px 25px rgba(0,0,0,0.35), 0 0 28px currentColor; }
.mission-planet-glyph svg { width: 30px; height: 30px; }
.mission-planet-copy { display: grid; gap: 3px; min-width: 90px; text-shadow: 0 2px 10px #020107; }
.mission-planet-copy b { font-size: 11px; }
.mission-planet-copy small { display: flex; align-items: center; gap: 5px; color: rgba(225, 218, 235, 0.62); font-size: 8px; }
.mission-planet-copy small i { color: #41dc86; }
.mission-planet:hover .mission-planet-sphere,
.mission-planet:focus-visible .mission-planet-sphere { transform: translateY(-5px) scale(1.09) rotate(2deg); }
.mission-planet:hover .mission-planet-copy b { color: #d5b6ff; }
.mission-planet.is-focused { z-index: 14; filter: brightness(1.2); }
.planet-purple { color: #a45cff; --planet-depth: 11px; }
.planet-blue { color: #5b8cff; --planet-depth: 15px; }
.planet-green { color: #4cdd88; --planet-depth: 13px; }
.planet-gold { color: #f4bd55; --planet-depth: 17px; }
.planet-red { color: #ff6281; --planet-depth: 14px; }
.planet-cyan { color: #49d9e8; --planet-depth: 19px; }
.planet-violet { color: #9e86ff; --planet-depth: 16px; }
.planet-1 { left: 42%; top: 16%; }
.planet-2 { right: 11%; top: 25%; }
.planet-3 { left: 13%; top: 30%; flex-direction: row-reverse; text-align: right; }
.planet-4 { left: 10%; bottom: 16%; flex-direction: row-reverse; text-align: right; }
.planet-5 { right: 8%; bottom: 24%; }
.planet-6 { left: 30%; bottom: 5%; flex-direction: row-reverse; text-align: right; }
.planet-7 { right: 24%; bottom: 3%; }

.mission-scene-inspector { position: absolute; left: 18px; bottom: 14px; z-index: 18; display: grid; max-width: 230px; padding: 9px 11px; border-left: 2px solid #8f42ff; background: rgba(5, 3, 12, 0.46); backdrop-filter: blur(8px); }
.mission-scene-inspector span { color: #a787d2; font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; }
.mission-scene-inspector b { margin-top: 3px; font-size: 9px; }

.mission-metrics { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.mission-metric { position: relative; display: grid; grid-template-columns: 43px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 87px; padding: 10px; overflow: hidden; color: #fff; border: 1px solid rgba(160, 107, 239, 0.13); border-radius: 8px; background: rgba(11, 9, 20, 0.76); text-align: left; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; }
.mission-metric:hover,
.mission-metric:focus-visible,
.mission-metric.active { border-color: rgba(153, 78, 255, 0.5); background: rgba(22, 14, 42, 0.9); transform: translateY(-2px); }
.mission-meter { position: relative; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(#8f42ff var(--meter), rgba(255,255,255,0.08) 0); }
.mission-meter::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: #0c0917; }
.mission-metric small,
.mission-metric b,
.mission-metric em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-metric small { color: rgba(221, 213, 234, 0.62); font-size: 8px; }
.mission-metric b { margin-top: 2px; font-size: 16px; letter-spacing: 0; }
.mission-metric.text-value b { font-size: 11px; }
.mission-metric em { margin-top: 2px; color: rgba(205, 195, 220, 0.39); font-size: 7px; font-style: normal; }

.mission-lower-grid { display: grid; grid-template-columns: 1.1fr 0.9fr 1.05fr; gap: 10px; margin-top: 10px; }
.mission-panel,
.mission-rail-panel { min-width: 0; border: 1px solid rgba(160, 105, 241, 0.13); border-radius: 8px; background: rgba(10, 8, 18, 0.78); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02); }
.mission-panel { min-height: 220px; padding: 15px; }
.mission-panel > header,
.mission-rail-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mission-panel header span,
.mission-rail-panel header span { color: rgba(232, 226, 241, 0.72); font-size: 10px; font-weight: 720; }
.mission-panel header h2 { margin: 8px 0 0; font-size: 22px; letter-spacing: 0; }
.mission-panel header p { margin: 2px 0 0; color: rgba(210, 202, 222, 0.45); font-size: 8px; }
.mission-panel header a,
.mission-rail-panel header a { padding: 6px 8px; color: rgba(224, 216, 236, 0.62); border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; background: rgba(255,255,255,0.025); text-decoration: none; font-size: 8px; }

.mission-bar-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 7px; height: 118px; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.04); background: linear-gradient(180deg, rgba(129,52,226,0.035), transparent); }
.mission-bar-chart > span { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 6px; width: 13%; height: 100%; }
.mission-bar-chart i { align-self: end; width: min(28px, 80%); height: var(--bar-value); border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #a959ff, #6930cf); box-shadow: 0 0 18px rgba(136, 57, 236, 0.2); animation: mission-bars 0.7s ease both; animation-delay: var(--bar-delay); }
.mission-bar-chart small { color: rgba(215, 207, 226, 0.42); font-size: 7px; text-transform: uppercase; }
.runtime-panel .live-indicator { display: flex; align-items: center; gap: 5px; color: #40df89; font-size: 8px; }
.runtime-panel dl { display: grid; gap: 0; margin: 12px 0 0; }
.runtime-panel dl div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; border-top: 1px solid rgba(255,255,255,0.05); }
.runtime-panel dt { color: rgba(216, 207, 228, 0.5); font-size: 8px; }
.runtime-panel dd { margin: 0; color: #eee7fb; font-size: 9px; font-weight: 720; }
.mission-log-lines { display: grid; margin-top: 12px; }
.mission-log-lines p { display: grid; grid-template-columns: 47px 35px minmax(0, 1fr); gap: 6px; margin: 0; min-height: 29px; align-items: center; border-top: 1px solid rgba(255,255,255,0.045); font-size: 8px; }
.mission-log-lines time { color: rgba(214, 205, 226, 0.42); }
.mission-log-lines b { color: #55b7ff; font-size: 7px; }
.mission-log-lines span { overflow: hidden; color: rgba(226, 220, 235, 0.62); text-overflow: ellipsis; white-space: nowrap; }

.mission-activity-rail { display: grid; align-content: start; gap: 11px; min-width: 0; }
.mission-rail-panel { padding: 14px; }
.mission-activity-rail > .mission-rail-panel:nth-child(1) { min-height: 300px; }
.mission-activity-rail > .mission-rail-panel:nth-child(2) { min-height: 200px; }
.mission-activity-rail > .mission-rail-panel:nth-child(3) { min-height: 250px; }
.mission-rail-panel header small { display: block; margin-top: 3px; color: rgba(207, 198, 220, 0.4); font-size: 7px; }
.mission-activity-row { display: grid; grid-template-columns: 31px minmax(0, 1fr) 72px; align-items: center; gap: 8px; min-height: 51px; color: rgba(233, 228, 242, 0.72); border-top: 1px solid rgba(255,255,255,0.045); text-decoration: none; }
.mission-activity-row:first-child { margin-top: 9px; }
.mission-activity-row:hover { color: #fff; }
.activity-signal { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(135deg, #8442ea, #9a4cff); box-shadow: 0 0 17px rgba(135, 65, 239, 0.25); }
.activity-signal.signal-1 { background: linear-gradient(135deg, #4d7cf0, #6c93ff); }
.activity-signal.signal-2 { background: linear-gradient(135deg, #ec4e72, #ff718c); }
.activity-signal.signal-3 { background: linear-gradient(135deg, #6436cf, #9f5bff); }
.activity-signal .premium-emoji { width: 17px; height: 17px; border: 0; background: transparent; box-shadow: none; font-size: 5px; }
.mission-activity-row b,
.mission-activity-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-activity-row b { font-size: 9px; }
.mission-activity-row small { margin-top: 2px; color: rgba(207, 197, 219, 0.42); font-size: 7px; }
.mission-activity-row time { color: rgba(202, 192, 214, 0.4); font-size: 7px; text-align: right; }
.mission-empty { display: grid; gap: 4px; padding: 18px 4px 4px; }
.mission-empty b { font-size: 10px; }
.mission-empty span { color: rgba(211, 202, 223, 0.46); font-size: 8px; }

.telemetry-pulse strong { display: block; margin-top: 18px; font-size: 27px; }
.telemetry-pulse > p { margin: 4px 0 0; color: rgba(210, 201, 222, 0.46); font-size: 8px; line-height: 1.45; }
.pulse-lines { display: flex; align-items: end; gap: 6px; height: 58px; margin-top: 10px; border-bottom: 1px solid rgba(154, 85, 247, 0.18); }
.pulse-lines i { flex: 1; height: 20%; background: linear-gradient(180deg, #b14fff, #5925bc); border-radius: 2px 2px 0 0; animation: mission-pulse 2.3s ease-in-out infinite alternate; }
.pulse-lines i:nth-child(2) { height: 42%; animation-delay: -1.1s; }
.pulse-lines i:nth-child(3) { height: 31%; animation-delay: -0.6s; }
.pulse-lines i:nth-child(4) { height: 72%; animation-delay: -1.7s; }
.pulse-lines i:nth-child(5) { height: 52%; animation-delay: -0.3s; }
.pulse-lines i:nth-child(6) { height: 88%; animation-delay: -1.3s; }
.pulse-lines i:nth-child(7) { height: 62%; animation-delay: -0.9s; }

.server-snapshot-panel strong { display: block; margin-top: 16px; font-size: 27px; font-weight: 680; letter-spacing: 0; }
.server-snapshot-panel > p { margin: 4px 0 0; color: rgba(210, 201, 222, 0.46); font-size: 8px; line-height: 1.45; }
.server-snapshot-line {
  position: relative;
  height: 74px;
  margin-top: 9px;
  overflow: hidden;
  border-bottom: 1px solid rgba(154, 85, 247, 0.15);
  background: linear-gradient(180deg, rgba(117, 48, 212, 0.08), transparent);
}
.server-snapshot-line::before {
  content: "";
  position: absolute;
  inset: 9px 0 8px;
  background: linear-gradient(90deg, #5c35d7, #a849ff);
  clip-path: polygon(0 81%, 10% 70%, 21% 72%, 32% 53%, 43% 59%, 54% 41%, 65% 47%, 76% 31%, 87% 36%, 100% 12%, 100% 17%, 87% 41%, 76% 36%, 65% 52%, 54% 46%, 43% 64%, 32% 58%, 21% 77%, 10% 75%, 0 86%);
  filter: drop-shadow(0 0 7px rgba(146, 66, 255, 0.65));
}
.server-snapshot-line::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background: repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,0.05) 18px);
}
.server-snapshot-line i { display: none; }

.mission-category-list { display: grid; gap: 12px; margin-top: 13px; }
.mission-category-row { position: relative; display: grid; gap: 6px; color: rgba(231, 225, 240, 0.73); text-decoration: none; }
.mission-category-row > span { display: flex; justify-content: space-between; gap: 10px; }
.mission-category-row b { font-size: 9px; }
.mission-category-row small { color: rgba(205, 196, 218, 0.42); font-size: 7px; }
.mission-category-row > i { position: relative; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,0.055); }
.mission-category-row > i::after { content: ""; display: block; width: var(--category-width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7333d2, #a54cff); box-shadow: 0 0 8px #8438de; }

@keyframes mission-radar { to { transform: rotate(360deg); } }
@keyframes mission-orbit-track {
  from { transform: translate(-50%, -50%) rotate(var(--orbit-tilt)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orbit-tilt) + 360deg)); }
}
@keyframes mission-core-pulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes mission-bars { from { height: 0; opacity: 0; } }
@keyframes mission-pulse { to { filter: brightness(1.5); transform: scaleY(0.72); transform-origin: bottom; } }

@media (max-width: 1380px) {
  .mission-control { grid-template-columns: 188px minmax(0, 1fr); }
  .mission-sidebar { padding-inline: 12px; }
  .mission-layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .mission-topbar { grid-template-columns: 165px minmax(230px, 1fr) 42px 132px 175px; }
  .mission-metrics { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
  .mission-metric { grid-template-columns: 30px minmax(0, 1fr); gap: 5px; min-height: 76px; padding: 7px; }
  .mission-meter { width: 28px; height: 28px; }
  .mission-meter::after { inset: 3px; }
  .mission-metric b { font-size: 13px; }
  .mission-metric.text-value b { font-size: 9px; }
  .mission-planet-sphere { width: 72px; height: 72px; }
  .mission-planet-copy b { font-size: 10px; }
}

@media (max-width: 1120px) {
  .mission-layout { grid-template-columns: 1fr; }
  .mission-activity-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mission-topbar { grid-template-columns: 150px minmax(230px, 1fr) 42px 130px; }
  .mission-server-menu { display: none; }
  .mission-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mission-scene { min-height: 550px; }
}

@media (max-width: 860px) {
  .mission-control { display: block; overflow: visible; }
  .mission-sidebar { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; width: 100%; height: auto; min-height: 68px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid rgba(165, 111, 255, 0.12); }
  .mission-brand { min-height: 48px; padding: 0 12px 0 0; }
  .mission-brand span { display: none; }
  .mission-sidebar nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .mission-sidebar nav::-webkit-scrollbar { display: none; }
  .mission-nav-link { grid-template-columns: 26px auto; min-width: max-content; min-height: 44px; padding: 7px 9px; }
  .mission-nav-link small,
  .mission-nav-link em { display: none; }
  .mission-nav-link b { font-size: 10px; }
  .mission-nav-link .premium-emoji { width: 23px; height: 23px; }
  .mission-system-status { display: none; }
  .mission-topbar { top: 68px; grid-template-columns: minmax(130px, 0.7fr) minmax(200px, 1.3fr) 42px auto; min-height: 76px; }
  .mission-user-menu summary { grid-template-columns: 34px 9px; }
  .mission-user-menu summary > span { display: none; }
  .mission-server-menu { display: none; }
  .mission-lower-grid { grid-template-columns: 1fr 1fr; }
  .recent-log-panel { grid-column: 1 / -1; }
  .mission-activity-rail { grid-template-columns: 1fr 1fr; }
  .mission-activity-rail .mission-rail-panel:last-child { grid-column: 1 / -1; }
}

@media (max-width: 660px) {
  .mission-topbar { grid-template-columns: minmax(0, 1fr) 42px 44px; gap: 6px; padding-inline: 10px; }
  .mission-title { display: none; }
  .mission-search-wrap { max-width: none; }
  .mission-user-menu summary { min-height: 43px; padding: 3px; border-color: transparent; background: transparent; }
  .mission-user-menu summary > i { display: none; }
  .mission-layout { padding: 9px; }
  .mission-scene { min-height: 620px; }
  .mission-scene > header { padding: 14px; }
  .mission-scene > header > div:last-child { display: grid; }
  .mission-action { min-height: 32px; padding-inline: 9px; font-size: 8px; }
  .mission-scene > header p { font-size: 12px; }
  .mission-scene > header h2 { max-width: 220px; }
  .mission-planet { gap: 5px; }
  .mission-planet-sphere { width: 61px; height: 61px; }
  .mission-planet-copy { min-width: 0; max-width: 94px; }
  .mission-planet-copy b { font-size: 9px; }
  .mission-planet-copy small { font-size: 7px; }
  .planet-1 { left: 37%; top: 18%; }
  .planet-2 { right: 2%; top: 29%; }
  .planet-3 { left: 2%; top: 31%; }
  .planet-4 { left: 2%; bottom: 21%; }
  .planet-5 { right: 1%; bottom: 24%; }
  .planet-6 { left: 17%; bottom: 7%; }
  .planet-7 { right: 7%; bottom: 4%; }
  .mission-bot-avatar-frame { width: 68px; height: 68px; }
  .mission-bot-core::before { width: 98px; height: 98px; top: 34px; }
  .mission-bot-core::after { width: 116px; height: 116px; top: 34px; }
  .mission-bot-core strong { font-size: 10px; }
  .mission-scene-inspector { max-width: 175px; }
  .mission-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission-lower-grid,
  .mission-activity-rail { grid-template-columns: 1fr; }
  .recent-log-panel,
  .mission-activity-rail .mission-rail-panel:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mission-radar i,
  .mission-orbit-field i,
  .mission-bot-core::before,
  .mission-bot-core::after,
  .mission-bar-chart i,
  .pulse-lines i { animation: none; }
  .mission-orbit-field,
  .mission-bot-core,
  .mission-planet { transform: none; }
}

/* Slayya shop */
.shop-body {
  background: #050609 url("/slayya-hero.png") center top / 100% auto no-repeat fixed;
  background-image: image-set(
    url("/slayya-hero.avif") type("image/avif"),
    url("/slayya-hero.webp") type("image/webp"),
    url("/slayya-hero.png") type("image/png")
  );
  color: #f6f7fb;
}
.shop-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(3, 5, 9, .82);
  backdrop-filter: saturate(.75) brightness(.7);
}
.shop-body main { min-height: 80vh; }
.shop-page { width: min(1540px, calc(100% - 40px)); margin: 28px auto 80px; }
.shop-hero {
  min-height: 290px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(420px, .65fr);
  align-items: end;
  gap: 32px;
  padding: clamp(28px, 5vw, 70px);
  border: 1px solid rgba(107, 230, 220, .23);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3, 7, 12, .96), rgba(5, 9, 16, .62)),
    url("/planets/economy.png") right -110px center / 620px auto no-repeat;
  background-image:
    linear-gradient(90deg, rgba(3, 7, 12, .96), rgba(5, 9, 16, .62)),
    image-set(
      url("/planets/economy.avif") type("image/avif"),
      url("/planets/economy.webp") type("image/webp"),
      url("/planets/economy.png") type("image/png")
    );
  background-position: left top, right -110px center;
  background-size: auto, 620px auto;
  background-repeat: no-repeat;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .45), inset 0 1px rgba(255,255,255,.08);
}
.shop-hero-copy { max-width: 760px; }
.shop-hero-copy .eyebrow { display: flex; align-items: center; gap: 9px; color: #61ded2; }
.shop-hero-copy h1 { margin: 10px 0 14px; font-size: clamp(48px, 7vw, 94px); line-height: .92; letter-spacing: 0; }
.shop-hero-copy > p:last-child { max-width: 650px; color: #b6bec9; font-size: 18px; line-height: 1.65; }
.shop-wallet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(6, 9, 15, .78);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  backdrop-filter: blur(18px);
}
.shop-wallet span { min-width: 0; padding: 20px; border-right: 1px solid rgba(255,255,255,.1); }
.shop-wallet span:last-child { border-right: 0; }
.shop-wallet small { display: block; color: #8e9aa9; font-size: 12px; }
.shop-wallet b { display: block; margin-top: 8px; color: #fff; font-size: clamp(20px, 2.2vw, 34px); overflow: hidden; text-overflow: ellipsis; }
.shop-alert { margin: 16px 0; display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid rgba(88, 222, 209, .3); border-radius: 6px; background: rgba(7, 24, 25, .88); }
.shop-alert b { color: #61ded2; }
.shop-alert span { flex: 1; color: #c6ced7; }
.shop-alert a { color: #fff; font-weight: 800; }
.shop-alert.error { border-color: rgba(242, 112, 123, .45); background: rgba(35, 9, 15, .9); }
.shop-alert.error b { color: #ff8f9a; }
.shop-toolbar {
  position: sticky;
  top: 72px;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(210px, .45fr) minmax(180px, .35fr) auto;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(5, 7, 12, .92);
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 50px rgba(0,0,0,.38);
}
.shop-toolbar label { min-width: 0; }
.shop-toolbar label > span:not(.search-lens) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.shop-toolbar input, .shop-toolbar select, .shop-inventory-toggle {
  width: 100%; height: 48px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: #0b0e14; color: #eef3f7; padding: 0 14px; font: inherit;
}
.shop-search { position: relative; }
.shop-search input { padding-left: 46px; }
.shop-search .search-lens { left: 17px; top: 15px; }
.shop-inventory-toggle { width: auto; cursor: pointer; padding-inline: 18px; font-weight: 800; }
.shop-inventory-toggle b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 6px; border-radius: 50%; background: #61ded2; color: #041110; }
.shop-category-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 20px 0 10px; padding: 4px 0 10px; scrollbar-width: thin; }
.shop-category-tabs button, .shop-filter-row button {
  flex: 0 0 auto; min-height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; background: rgba(10,13,19,.78); color: #abb4c0; font: inherit; font-weight: 800; cursor: pointer;
}
.shop-category-tabs button.active { border-color: #61ded2; background: #0e2929; color: #eafffd; }
.shop-filter-row { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.shop-filter-row button { min-height: 34px; padding-inline: 12px; font-size: 13px; }
.shop-filter-row button.active { border-color: #de70b5; color: #ffd9ef; background: #28101f; }
.shop-filter-row > span { margin-left: auto; color: #8994a1; }
.shop-filter-row > span b { color: #fff; }
.shop-content { position: relative; }
.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.shop-item-card {
  min-width: 0; overflow: hidden; display: grid; grid-template-rows: 182px 1fr auto; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(7, 9, 14, .86); box-shadow: 0 16px 45px rgba(0,0,0,.28); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.shop-item-card:hover { transform: translateY(-3px); border-color: rgba(97,222,210,.42); box-shadow: 0 22px 60px rgba(0,0,0,.4); }
.shop-item-card[hidden] { display: none; }
.shop-item-preview { position: relative; width: 100%; padding: 0; border: 0; overflow: hidden; background: #0b0d12; cursor: pointer; }
.shop-item-preview::after { content: ""; position: absolute; inset: auto 0 0; height: 58%; background: linear-gradient(transparent, rgba(4,6,10,.88)); pointer-events: none; }
.shop-item-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.75,.2,1), filter .3s; }
.shop-item-card:hover .shop-item-preview img { transform: scale(1.045); filter: saturate(1.12); }
.shop-item-category, .shop-owned-mark { position: absolute; z-index: 2; top: 12px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: rgba(4,7,11,.82); color: #c9d4de; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.shop-item-category { left: 12px; }
.shop-owned-mark { right: 12px; color: #7bf1c1; border-color: rgba(79,229,165,.35); }
.shop-item-copy { min-height: 164px; padding: 16px 17px 12px; }
.shop-item-copy > div { display: flex; align-items: flex-start; gap: 10px; }
.shop-item-copy h2 { min-width: 0; flex: 1; margin: 0; font-size: 18px; line-height: 1.25; }
.shop-item-code { max-width: 92px; overflow: hidden; text-overflow: ellipsis; padding: 4px 7px; border-radius: 4px; background: #151a22; color: #84909f; font: 11px/1.2 monospace; white-space: nowrap; }
.shop-item-copy p { margin: 12px 0 10px; color: #aeb7c3; line-height: 1.5; font-size: 14px; }
.shop-item-copy small { display: block; color: #697684; line-height: 1.4; }
.shop-item-card > footer { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.09); }
.shop-item-card > footer strong, .shop-dialog > footer strong { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 17px; }
.shop-coin-mark { width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1px solid #65ded3; border-radius: 50%; background: #112a31; color: #8efff3; font-style: normal; font-size: 12px; box-shadow: 0 0 18px rgba(67,221,209,.24); }
.shop-buy-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #61ded2; border-radius: 5px; background: #55d3c8; color: #03100f; font: inherit; font-weight: 900; text-decoration: none; cursor: pointer; }
.shop-buy-button.secondary { border-color: #d46aa9; background: #25121e; color: #ffc7e9; }
.shop-buy-button:disabled { border-color: #252b34; background: #14181f; color: #66717d; cursor: not-allowed; }
.shop-inventory { position: fixed; z-index: 50; top: 88px; right: 20px; bottom: 20px; width: min(430px, calc(100% - 40px)); padding: 22px; overflow-y: auto; border: 1px solid rgba(97,222,210,.3); border-radius: 8px; background: rgba(5,8,13,.97); box-shadow: -20px 20px 90px rgba(0,0,0,.65); backdrop-filter: blur(24px); }
.shop-inventory[hidden] { display: none; }
.shop-inventory header { display: flex; align-items: flex-start; justify-content: space-between; }
.shop-inventory header p { margin: 0 0 3px; color: #61ded2; text-transform: uppercase; font-size: 12px; font-weight: 900; }
.shop-inventory h2 { margin: 0; }
.shop-inventory header button, .shop-dialog-close { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: #10151c; color: #fff; font-size: 24px; cursor: pointer; }
.shop-bank-meter { margin: 22px 0; padding: 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; }
.shop-bank-meter span { display: flex; justify-content: space-between; margin-bottom: 10px; }
.shop-bank-meter small { color: #8792a0; }
.shop-bank-meter > i { display: block; width: 100%; height: 5px; border-radius: 5px; background: #171d25; overflow: hidden; }
.shop-bank-meter > i::before { content: ""; display: block; width: var(--bank-fill); height: 100%; background: #61ded2; }
.shop-inventory ul { list-style: none; margin: 0; padding: 0; }
.shop-inventory li { display: flex; justify-content: space-between; gap: 15px; padding: 13px 3px; border-bottom: 1px solid rgba(255,255,255,.08); color: #c1cad4; }
.shop-inventory li b { color: #77eadf; }
.shop-empty { padding: 70px 20px; text-align: center; color: #8f99a6; }
.shop-dialog { width: min(560px, calc(100% - 28px)); padding: 0; overflow: hidden; border: 1px solid rgba(97,222,210,.35); border-radius: 8px; background: #070a0f; color: #f4f7fa; box-shadow: 0 40px 120px rgba(0,0,0,.7); }
.shop-dialog::backdrop { background: rgba(0,2,5,.78); backdrop-filter: blur(8px); }
.shop-dialog > img { width: 100%; height: 245px; display: block; object-fit: cover; }
.shop-dialog > div { padding: 23px 25px; }
.shop-dialog h2 { margin: 5px 0 12px; font-size: 32px; }
.shop-dialog p:not(.eyebrow) { color: #b4bec9; line-height: 1.65; }
.shop-dialog small { display: block; margin-top: 13px; color: #768391; }
.shop-dialog > footer { display: flex; align-items: center; padding: 17px 25px; border-top: 1px solid rgba(255,255,255,.1); }
.shop-dialog-close { position: absolute; z-index: 2; top: 12px; right: 12px; background: rgba(4,7,11,.84); }
.shop-live-toast { position: fixed; z-index: 80; right: 22px; bottom: 22px; max-width: min(440px, calc(100% - 44px)); padding: 15px 18px; border: 1px solid rgba(80,229,166,.45); border-radius: 6px; background: #092218; color: #baffd9; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.shop-live-toast.error { border-color: rgba(244,99,115,.5); background: #2a0b11; color: #ffc2c9; }
@media (max-width: 1180px) {
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-hero { grid-template-columns: 1fr; }
  .shop-toolbar { grid-template-columns: minmax(0, 1fr) 220px; }
}
@media (max-width: 780px) {
  .shop-page { width: min(100% - 20px, 1540px); margin-top: 12px; }
  .shop-hero { min-height: 0; padding: 28px 20px; background-position: center; background-size: cover; }
  .shop-hero-copy h1 { font-size: 50px; }
  .shop-wallet { grid-template-columns: 1fr; }
  .shop-wallet span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 13px 16px; }
  .shop-wallet span:last-child { border-bottom: 0; }
  .shop-toolbar { position: static; grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-filter-row { overflow-x: auto; }
}
@media (max-width: 520px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-item-card { grid-template-rows: 200px 1fr auto; }
  .shop-alert { align-items: flex-start; flex-wrap: wrap; }
}

/* Redemption panel inside the shop dialog. Shown for type:"redeem" items
   whose fulfillment.mode is "ticket" - these cannot be bought on the web
   because a staff member fulfils them through a private Discord ticket, so
   the dialog shows the exact command instead of navigating the user away. */
.shop-redeem {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(127, 0, 255, 0.28);
  border-radius: 12px;
  background: rgba(127, 0, 255, 0.06);
}

.shop-redeem-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c39bff;
}

.shop-redeem-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.shop-redeem-row code {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.shop-redeem-copy {
  flex: 0 0 auto;
  min-width: 78px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.shop-redeem-copy:hover,
.shop-redeem-copy:focus-visible {
  background: rgba(127, 0, 255, 0.22);
  border-color: rgba(160, 107, 255, 0.5);
}

.shop-redeem-link {
  display: inline-block;
  margin-top: 10px;
  color: #a06bff;
  font-size: 13px;
  font-weight: 700;
}

/* Shared vector icons replace the old abbreviated emoji badges everywhere. */
body .premium-emoji.dashboard-pictogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #e2aff6;
  vertical-align: middle;
}
body .premium-emoji.dashboard-pictogram > svg {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  filter: drop-shadow(0 1px 3px #b644d62b);
}
body a.active .dashboard-pictogram { color: #f18bff; }

/* Module summaries stay compact regardless of the surrounding dashboard theme. */
body .guild-premium-board.module-board {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  gap: 10px;
}
body .guild-premium-board.module-board > article {
  min-width: 0;
  min-height: 124px;
  padding: 14px 16px;
  grid-column: auto;
}
body .guild-premium-board.module-board > article > span {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
body .guild-premium-board.module-board > article > b {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body .guild-premium-board.module-board > article > em {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
body .guild-premium-board.module-board .premium-emoji {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-right: 8px;
}
body .guild-premium-board.module-board > article::before,
body .guild-premium-board.module-board > article::after { display: none; }