@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root {
  --c-void: #000000;
  --c-base: #030303;
  --c-surface: #070707;
  --c-surface-2: #0d0d0d;
  --c-card: #101010;
  --c-border: #161616;
  --c-border-2: #202020;
  --c-border-3: #2c2c2c;
  --c-violet: #9B59B6;
  --c-violet-hi: #B44FFF;
  --c-violet-dk: #7B2FBE;
  --c-violet-dim: rgba(155, 89, 182, 0.1);
  --c-violet-glow: rgba(180, 79, 255, 0.22);
  --c-discord: #5865F2;
  --c-discord-dim: rgba(88, 101, 242, 0.08);
  --c-discord-mid: rgba(88, 101, 242, 0.18);
  --c-discord-glow: rgba(88, 101, 242, 0.3);
  --c-text: #CECFD1;
  --c-text-2: #5A5C60;
  --c-text-ghost: #252528;
  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --void-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --void-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --void-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast: 0.13s;
  --t-mid: 0.22s;
  --t-slow: 0.4s;
  --t-enter: 0.65s;
  --breathe: 6s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background: var(--c-void);
  color: var(--c-text);
  font-family: var(--void-font-body);
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--c-surface); }
::-webkit-scrollbar-thumb { background: var(--c-violet); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-violet-hi); }

::selection {
  background: rgba(155, 89, 182, 0.32);
  color: #fff;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--c-void), 0 0 0 3px var(--c-violet);
}

*:focus:not(:focus-visible) { outline: none; }

/* VOID entrance */
html:has(body.login-body) {
  height: 100%;
  overflow: hidden;
}

.login-body {
  --logo-loop: 19.3167s;
  --logo-pulse: 9.6583s;
  --breathe: var(--logo-pulse);
  --look-x: 0px;
  --look-y: 0px;
  --art-x: 0px;
  --art-y: 0px;
  --stage-x: 0px;
  --stage-y: 0px;
  min-height: 100vh;
  height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  background: #000;
  isolation: isolate;
}

.login-body::before,
.login-body::after,
.void-artscape,
.void-grid,
.void-bloom,
#void-canvas,
.void-haze,
.void-entry-collapse,
.gateway-frame {
  position: fixed;
  pointer-events: none;
}

.login-body::before,
.login-body::after,
.void-artscape,
.void-grid,
.void-bloom,
#void-canvas,
.void-haze,
.gateway-frame {
  inset: 0;
}

.login-body::before {
  content: '';
  z-index: 0;
  background:
    radial-gradient(ellipse 46% 72% at -10% 52%, rgba(180, 79, 255, 0.13), rgba(87, 28, 130, 0.038) 38%, transparent 72%),
    radial-gradient(ellipse 50% 74% at 112% 45%, rgba(180, 79, 255, 0.15), rgba(87, 28, 130, 0.05) 40%, transparent 74%),
    radial-gradient(ellipse 78% 34% at 52% -14%, rgba(180, 79, 255, 0.065), transparent 70%),
    radial-gradient(ellipse 82% 34% at 48% 114%, rgba(180, 79, 255, 0.075), transparent 72%),
    radial-gradient(circle at 33% 49%, rgba(180, 79, 255, 0.07), transparent 22%),
    radial-gradient(circle at 72% 42%, rgba(180, 79, 255, 0.055), transparent 28%),
    radial-gradient(circle at 40% 52%, transparent 0 38%, rgba(180, 79, 255, 0.018) 39%, transparent 41%);
  opacity: 0;
  animation: void-field-enter 1.65s var(--ease-out) 0.12s forwards, void-field-breathe var(--breathe) var(--ease-inout) 2.2s infinite;
}

.login-body::after {
  content: '';
  z-index: 9;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.009) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 8% 18%, rgba(180, 79, 255, 0.05) 0 0.12%, transparent 0.34%),
    radial-gradient(circle at 91% 24%, rgba(180, 79, 255, 0.045) 0 0.1%, transparent 0.32%),
    radial-gradient(circle at 12% 82%, rgba(180, 79, 255, 0.04) 0 0.11%, transparent 0.34%),
    radial-gradient(circle at 84% 78%, rgba(180, 79, 255, 0.038) 0 0.1%, transparent 0.32%),
    radial-gradient(ellipse 80% 56% at 36% 50%, transparent 0%, transparent 58%, rgba(0, 0, 0, 0.38) 82%, #000 100%);
  opacity: 0.1;
}

#void-canvas {
  z-index: 5;
  width: 100%;
  height: 100%;
}

.void-artscape {
  z-index: 1;
  user-select: none;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.18) 100%),
    radial-gradient(ellipse 72% 52% at 36% 50%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.42) 82%, #000 100%),
    url('/assets/void-scene-1440.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100vw auto;
  background-position:
    center,
    center,
    calc(50% + var(--art-x)) calc(50% + var(--art-y));
  opacity: 0;
  transform: scale(1.012);
  will-change: transform, opacity, background-position;
  animation: artscape-enter 1.85s var(--ease-out) 0.06s forwards, artscape-drift 28s var(--ease-inout) 2.4s infinite;
}

.void-artscape::before,
.void-artscape::after,
.void-haze::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.void-artscape::before {
  background:
    radial-gradient(ellipse 38% 30% at 32% 50%, rgba(180, 79, 255, 0.26), transparent 72%),
    radial-gradient(ellipse 28% 48% at 67% 43%, rgba(180, 79, 255, 0.25), rgba(180, 79, 255, 0.1) 34%, transparent 74%),
    radial-gradient(ellipse 44% 36% at 74% 42%, rgba(180, 79, 255, 0.18), transparent 76%);
  opacity: 0.64;
  animation: art-glow var(--breathe) var(--ease-inout) 1.8s infinite;
}

.void-artscape::after {
  background:
    linear-gradient(180deg, #000 0%, transparent 12%, transparent 84%, #000 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, transparent 10%, transparent 90%, rgba(0, 0, 0, 0.84) 100%),
    radial-gradient(ellipse 48% 42% at 38% 49%, transparent 0%, rgba(0, 0, 0, 0.02) 58%, rgba(0, 0, 0, 0.38) 100%);
}

.void-grid {
  z-index: 3;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(180, 79, 255, 0.085) 18.15% 18.28%, transparent 18.45%),
    radial-gradient(circle at 50% 48%, transparent 0 34%, rgba(180, 79, 255, 0.055) 34.1% 34.22%, transparent 34.4%),
    radial-gradient(circle at 50% 48%, transparent 0 49%, rgba(180, 79, 255, 0.04) 49.08% 49.18%, transparent 49.34%),
    linear-gradient(90deg, rgba(180, 79, 255, 0.18) 0 1px, transparent 1px) left 3.2vw top 4vh / 1px 88vh no-repeat,
    linear-gradient(90deg, transparent, rgba(180, 79, 255, 0.16), transparent) left 3.2vw top 15vh / 72px 1px no-repeat,
    linear-gradient(rgba(180, 79, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 79, 255, 0.018) 1px, transparent 1px);
  background-size: auto, auto, 140px 140px, 140px 140px;
  opacity: 0;
  transform: scale(1.02);
  mask-image: radial-gradient(ellipse 122% 92% at 46% 48%, #000 0%, #000 76%, transparent 100%);
  animation: grid-enter 2.1s var(--ease-out) 0.28s forwards, grid-drift calc(var(--logo-loop) * 2) linear 2.8s infinite, orbit-field-turn calc(var(--logo-loop) * 4) linear 2.8s infinite;
}

.void-grid::before,
.void-grid::after {
  content: '';
  position: absolute;
  inset: -8vmax;
  pointer-events: none;
}

.void-grid::before {
  background:
    radial-gradient(circle at 7% 16%, transparent 0 14.8vmax, rgba(180, 79, 255, 0.08) 14.9vmax 15vmax, transparent 15.14vmax),
    radial-gradient(circle at 94% 12%, transparent 0 17.8vmax, rgba(180, 79, 255, 0.07) 17.9vmax 18vmax, transparent 18.16vmax),
    radial-gradient(circle at 9% 88%, transparent 0 18.2vmax, rgba(180, 79, 255, 0.07) 18.3vmax 18.42vmax, transparent 18.6vmax),
    radial-gradient(circle at 92% 86%, transparent 0 15.8vmax, rgba(180, 79, 255, 0.065) 15.9vmax 16.02vmax, transparent 16.18vmax),
    linear-gradient(118deg, transparent 0 17%, rgba(180, 79, 255, 0.035) 17.1%, transparent 17.35% 64%, rgba(180, 79, 255, 0.026) 64.1%, transparent 64.35%),
    linear-gradient(28deg, transparent 0 22%, rgba(180, 79, 255, 0.028) 22.1%, transparent 22.34% 71%, rgba(180, 79, 255, 0.024) 71.1%, transparent 71.32%);
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
  animation: perimeter-field-drift var(--logo-loop) var(--ease-inout) 0s infinite;
}

.void-grid::after {
  background:
    radial-gradient(circle at 18% 22%, rgba(208, 166, 255, 0.11) 0 1px, transparent 2px),
    radial-gradient(circle at 83% 18%, rgba(180, 79, 255, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 52%, rgba(208, 166, 255, 0.09) 0 1px, transparent 2px),
    radial-gradient(circle at 14% 68%, rgba(180, 79, 255, 0.085) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 86%, rgba(180, 79, 255, 0.08) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 12%, rgba(208, 166, 255, 0.07) 0 1px, transparent 2px);
  opacity: 0.48;
  animation: perimeter-dust-breathe var(--logo-pulse) var(--ease-inout) 0s infinite;
}

.void-bloom {
  z-index: 4;
  background:
    radial-gradient(ellipse 38% 22% at 32% 52%, rgba(180, 79, 255, 0.24) 0%, rgba(155, 89, 182, 0.082) 43%, transparent 77%),
    radial-gradient(ellipse 24% 42% at 66% 45%, rgba(180, 79, 255, 0.16) 0%, rgba(155, 89, 182, 0.066) 38%, transparent 80%),
    radial-gradient(ellipse 40% 30% at 72% 45%, rgba(180, 79, 255, 0.18) 0%, transparent 79%);
  opacity: 0;
  transform: scale(0.96);
  animation: bloom-enter 1.55s var(--ease-out) 0.38s forwards, bloom-breathe var(--breathe) var(--ease-inout) 2.1s infinite;
}

.void-haze {
  z-index: 8;
  background:
    radial-gradient(ellipse 72% 48% at 34% 50%, transparent 0%, transparent 56%, rgba(0, 0, 0, 0.22) 80%, #000 100%),
    radial-gradient(ellipse 104% 28% at 50% 100%, rgba(0, 0, 0, 0.78) 0%, transparent 78%),
    radial-gradient(ellipse 92% 23% at 50% 0%, rgba(0, 0, 0, 0.76) 0%, transparent 78%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.64) 0%, transparent 14%, transparent 86%, rgba(0, 0, 0, 0.68) 100%);
}

.void-haze::after {
  background:
    radial-gradient(ellipse 62% 18% at 34% 73%, transparent 0%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.56) 100%),
    linear-gradient(180deg, transparent 0 70%, rgba(0, 0, 0, 0.28) 100%);
  opacity: 0.34;
}

.gateway-frame {
  z-index: 10;
  opacity: 0;
  animation: frame-enter 1.1s var(--ease-out) 1.08s forwards;
}

.gate-corner,
.gate-rail {
  position: absolute;
  display: block;
}

.gate-corner {
  width: clamp(58px, 8vw, 118px);
  height: clamp(58px, 8vw, 118px);
  border-color: rgba(180, 79, 255, 0.31);
  opacity: 0.7;
  filter: drop-shadow(0 0 7px rgba(180, 79, 255, 0.06));
}

.gate-corner--tl {
  top: clamp(18px, 4vw, 46px);
  left: clamp(18px, 4vw, 46px);
  border-top: 1px solid;
  border-left: 1px solid;
}

.gate-corner--tr {
  top: clamp(18px, 4vw, 46px);
  right: clamp(18px, 4vw, 46px);
  border-top: 1px solid;
  border-right: 1px solid;
}

.gate-corner--bl {
  left: clamp(18px, 4vw, 46px);
  bottom: clamp(18px, 4vw, 46px);
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.gate-corner--br {
  right: clamp(18px, 4vw, 46px);
  bottom: clamp(18px, 4vw, 46px);
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.gate-rail {
  left: 50%;
  width: min(720px, 52vw);
  height: 1px;
  transform: translateX(-50%) scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(180, 79, 255, 0.34), rgba(180, 79, 255, 0.06), rgba(180, 79, 255, 0.34), transparent);
  opacity: 0.42;
  animation: rail-open 1.4s var(--ease-out) 1.18s forwards, rail-breathe var(--breathe) var(--ease-inout) 2.7s infinite;
}

.gate-rail--top { top: clamp(28px, 6vw, 76px); }
.gate-rail--bottom { bottom: clamp(28px, 6vw, 76px); }

.hud-corner {
  position: fixed;
  z-index: 11;
  display: grid;
  gap: 0.28rem;
  color: rgba(180, 79, 255, 0.43);
  font-family: var(--void-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(180, 79, 255, 0.09);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  animation: hud-enter 0.82s var(--ease-out) 1.52s forwards, hud-pulse 10s var(--ease-inout) 2.6s infinite;
}

.hud-corner strong {
  color: rgba(206, 207, 209, 0.46);
  font-family: var(--void-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.hud-corner--tl {
  top: clamp(26px, 4vw, 58px);
  left: clamp(34px, 5vw, 72px);
  text-align: left;
}

.hud-corner--tr {
  top: clamp(26px, 4vw, 58px);
  right: clamp(34px, 5vw, 72px);
  text-align: right;
}

.hud-corner--bl {
  left: clamp(34px, 5vw, 72px);
  bottom: clamp(42px, 6vw, 86px);
  text-align: left;
}

.entrance-stage {
  position: relative;
  z-index: 12;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(4.6rem, 7vh, 5.5rem) 2rem clamp(4.2rem, 6vh, 5rem) clamp(3rem, 13.2vw, 17rem);
}

.summon {
  position: relative;
  width: min(640px, 42vw);
  min-width: 460px;
  display: grid;
  justify-items: center;
  gap: clamp(0.68rem, 1.1vw, 0.88rem);
  text-align: center;
  transform: translate3d(var(--stage-x), var(--stage-y), 0);
  transition: transform 220ms linear;
}

.gateway-shell {
  padding: clamp(1.1rem, 2.1vw, 1.95rem) 0;
}

.void-sigil {
  position: absolute;
  left: 50%;
  top: 44.8%;
  z-index: 1;
  width: min(590px, 76vw);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  pointer-events: none;
  animation: sigil-enter 1.4s var(--ease-out) 0.62s forwards, sigil-breathe var(--breathe) var(--ease-inout) 2.35s infinite, sigil-turn 46s linear 2.35s infinite;
}

.void-sigil-ring,
.void-sigil-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  transform: translate(-50%, -50%);
}

.void-sigil-ring {
  border: 1px solid rgba(180, 79, 255, 0.12);
  border-radius: 999px;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.5);
}

.void-sigil-ring--outer {
  width: 100%;
  height: 100%;
  border-color: rgba(180, 79, 255, 0.1);
}

.void-sigil-ring--inner {
  width: 52%;
  height: 52%;
  border-color: rgba(180, 79, 255, 0.16);
  border-style: dashed;
}

.void-sigil-axis {
  background: linear-gradient(90deg, transparent, rgba(180, 79, 255, 0.16), transparent);
}

.void-sigil-axis--x {
  width: 84%;
  height: 1px;
}

.void-sigil-axis--y {
  width: 1px;
  height: 58%;
  background: linear-gradient(180deg, transparent, rgba(180, 79, 255, 0.14), transparent);
}

.gateway-shell::before,
.gateway-shell::after {
  content: '';
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
}

.gateway-shell::before {
  top: 50%;
  width: 118%;
  height: 128%;
  background:
    radial-gradient(ellipse 50% 26% at 50% 45%, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.54) 42%, transparent 72%),
    radial-gradient(ellipse 54% 32% at 50% 48%, rgba(180, 79, 255, 0.058), transparent 73%),
    radial-gradient(ellipse 88% 56% at 50% 54%, rgba(0, 0, 0, 0.54), transparent 75%);
  transform: translate(-50%, -50%) scale(0.98);
  animation: aperture-enter 1.35s var(--ease-out) 0.5s forwards, aperture-breathe var(--breathe) var(--ease-inout) 2.25s infinite;
}

.gateway-shell::after {
  bottom: clamp(4rem, 7.5vw, 5.45rem);
  width: min(330px, 64%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 79, 255, 0.38), transparent);
  transform: translate(-50%, -50%) scaleX(0);
  animation: throat-open 1s var(--ease-out) 1.08s forwards, throat-pulse var(--breathe) var(--ease-inout) 2.35s infinite;
}

.gateway-slit {
  display: none;
}

.ritual-prompt {
  position: relative;
  z-index: 2;
  top: 0;
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 0.26rem;
  margin-bottom: 0.04rem;
  color: rgba(190, 187, 198, 0.5);
  font-family: var(--void-font-mono);
  font-size: 0.54rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(180, 79, 255, 0.11);
  opacity: 0;
  transform: translateY(8px);
  animation: prompt-enter 0.76s var(--ease-out) 0.62s forwards;
}

.ritual-prompt span {
  display: block;
}

.ritual-prompt span + span {
  color: rgba(188, 137, 220, 0.54);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
}

.ritual-prompt::before,
.ritual-prompt::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 46px;
  height: 1px;
  opacity: 0.72;
  background: linear-gradient(90deg, transparent, rgba(180, 79, 255, 0.58));
}

.ritual-prompt::before {
  right: calc(100% + 1rem);
}

.ritual-prompt::after {
  left: calc(100% + 1rem);
  background: linear-gradient(90deg, rgba(180, 79, 255, 0.58), transparent);
}

.void-brand {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.62rem;
  margin: -0.08rem 0 0.08rem;
}

.void-brand::before,
.void-brand::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 2%;
  z-index: 2;
  width: 92%;
  height: 58%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scaleY(0.86);
  filter: blur(0.2px);
  background:
    radial-gradient(ellipse 7% 42% at 9% 72%, rgba(180, 79, 255, 0.34), transparent 68%),
    radial-gradient(ellipse 8% 46% at 28% 58%, rgba(202, 145, 255, 0.28), transparent 68%),
    radial-gradient(ellipse 9% 48% at 48% 66%, rgba(180, 79, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 7% 42% at 72% 58%, rgba(202, 145, 255, 0.24), transparent 70%),
    radial-gradient(ellipse 8% 44% at 92% 68%, rgba(180, 79, 255, 0.26), transparent 70%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
  animation: brand-flame-enter 1.1s var(--ease-out) 1.08s forwards, brand-flame-drift var(--logo-pulse) var(--ease-inout) 2.2s infinite;
}

.void-brand::after {
  top: 6%;
  width: 82%;
  height: 50%;
  opacity: 0;
  transform: translateX(-50%) translateY(14px) scaleY(0.8);
  background:
    radial-gradient(ellipse 5% 36% at 18% 68%, rgba(180, 79, 255, 0.18), transparent 72%),
    radial-gradient(ellipse 6% 42% at 42% 56%, rgba(202, 145, 255, 0.17), transparent 72%),
    radial-gradient(ellipse 5% 38% at 65% 60%, rgba(180, 79, 255, 0.16), transparent 72%),
    radial-gradient(ellipse 5% 36% at 86% 64%, rgba(202, 145, 255, 0.15), transparent 72%);
  animation: brand-flame-enter-soft 1.2s var(--ease-out) 1.16s forwards, brand-flame-drift-soft var(--logo-loop) var(--ease-inout) 2.4s infinite;
}

.void-wordmark {
  position: relative;
  --mark-brightness: 0.92;
  --mark-contrast: 1.08;
  z-index: 3;
  width: min(590px, 100%);
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
  object-fit: contain;
  opacity: 0.68;
  transform: none;
  filter:
    brightness(var(--mark-brightness)) contrast(var(--mark-contrast))
    drop-shadow(0 0 1px rgba(238, 225, 255, 0.08))
    drop-shadow(0 0 18px rgba(180, 79, 255, 0.2));
  backface-visibility: hidden;
  will-change: opacity;
  animation: brand-enter 1.15s var(--ease-out) 0.42s forwards;
}

video.void-wordmark {
  background: transparent;
}

.void-wordmark.is-fracturing {
  animation: brand-fracture 380ms var(--ease-out) 0s 1;
}

.void-vow {
  width: min(320px, 88vw);
  display: grid;
  gap: 0.28rem;
  color: rgba(207, 184, 228, 0.72);
  font-family: var(--void-font-mono);
  font-size: clamp(0.68rem, 0.88vw, 0.78rem);
  font-weight: 300;
  letter-spacing: 0.36em;
  line-height: 1.16;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(180, 79, 255, 0.12);
  opacity: 0;
  transform: translateY(8px);
  animation: vow-enter 0.78s var(--ease-out) 1.24s forwards;
}

.void-auth {
  position: relative;
  z-index: 4;
  width: min(366px, 100%);
  margin-top: 0.58rem;
  opacity: 0;
  transform: translateY(14px);
  animation: answer-enter 0.78s var(--ease-out) 1.66s forwards;
}

.void-auth::before,
.void-auth::after {
  content: '';
  position: absolute;
  top: 31px;
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 79, 255, 0.28));
  pointer-events: none;
}

.void-auth::before {
  right: calc(100% + 18px);
}

.void-auth::after {
  left: calc(100% + 18px);
  background: linear-gradient(90deg, rgba(180, 79, 255, 0.28), transparent);
}

.btn-discord {
  position: relative;
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  padding: 1.02rem 1.18rem;
  border: 1px solid rgba(203, 188, 222, 0.58);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.056), rgba(255, 255, 255, 0.014) 38%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(90deg, rgba(88, 101, 242, 0.05), transparent 28%, transparent 72%, rgba(180, 79, 255, 0.045)),
    #07080c;
  color: rgba(248, 244, 252, 0.95);
  font-family: var(--void-font-body);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -18px 30px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.028),
    0 16px 38px rgba(0, 0, 0, 0.86),
    0 0 0 1px rgba(180, 79, 255, 0.075),
    0 0 20px rgba(180, 79, 255, 0.075);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    color var(--t-mid) var(--ease-out),
    background var(--t-mid) var(--ease-out);
}

.btn-discord::before,
.btn-discord::after,
.btn-ritual-line,
.btn-violet-pass {
  content: '';
  position: absolute;
  pointer-events: none;
}

.btn-discord::before {
  inset: 5px;
  z-index: 2;
  border: 1px solid rgba(230, 211, 255, 0.055);
  border-radius: 2px;
}

.btn-discord::after {
  left: 20px;
  right: 20px;
  bottom: 7px;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88, 101, 242, 0.18), rgba(216, 182, 255, 0.38), rgba(180, 79, 255, 0.24), transparent);
  opacity: 0.72;
}

.btn-ritual-line {
  display: block;
  top: 0;
  left: -30%;
  z-index: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(180, 79, 255, 0.075), transparent);
  transform: skewX(-18deg);
  animation: button-answer-scan 7.6s var(--ease-inout) 3.2s infinite;
}

.btn-violet-pass {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 68% 120% at 50% 100%, rgba(180, 79, 255, 0.12), transparent 64%),
    linear-gradient(90deg, transparent, rgba(180, 79, 255, 0.07), transparent);
  opacity: 0;
  transform: translateX(-22%) scaleX(0.58);
  transition:
    opacity var(--t-mid) var(--ease-out),
    transform 0.55s var(--ease-out);
}

.btn-discord-mark,
.btn-discord span:not(.btn-ritual-line):not(.btn-violet-pass) {
  position: relative;
  z-index: 1;
}

.btn-discord-mark {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: rgba(226, 229, 255, 0.9);
  opacity: 0.96;
  filter: drop-shadow(0 0 5px rgba(88, 101, 242, 0.16));
  shape-rendering: geometricPrecision;
}

.btn-discord-eye {
  fill: #02030a;
  opacity: 1;
}

.btn-discord:hover,
.login-body.is-answering .btn-discord {
  transform: translateY(-1px) scale(1.012);
  border-color: rgba(216, 190, 248, 0.68);
  color: rgba(255, 255, 255, 0.97);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.016) 37%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(90deg, rgba(88, 101, 242, 0.065), transparent 24%, transparent 76%, rgba(180, 79, 255, 0.06)),
    #0a0a10;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -18px 30px rgba(0, 0, 0, 0.64),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 20px 46px rgba(0, 0, 0, 0.88),
    0 0 0 1px rgba(180, 79, 255, 0.14),
    0 0 26px rgba(180, 79, 255, 0.14);
}

.btn-discord:hover .btn-violet-pass,
.login-body.is-answering .btn-violet-pass {
  opacity: 1;
  transform: translateX(18%) scaleX(1);
}

.btn-discord.is-loading,
.login-body.is-entering .btn-discord {
  cursor: wait;
  transform: translateY(1px) scale(0.998);
  border-color: rgba(216, 182, 255, 0.86);
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.01) 37%, rgba(0, 0, 0, 0.42) 100%),
    radial-gradient(ellipse 74% 120% at 50% 112%, rgba(180, 79, 255, 0.13), transparent 64%),
    #06070b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -18px 30px rgba(0, 0, 0, 0.7),
    0 14px 38px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(180, 79, 255, 0.18),
    0 0 22px rgba(180, 79, 255, 0.16);
}

.btn-discord.is-loading .btn-ritual-line,
.login-body.is-entering .btn-ritual-line {
  animation-duration: 1.05s;
  opacity: 0.9;
}

.btn-discord.is-loading .btn-violet-pass,
.login-body.is-entering .btn-violet-pass {
  opacity: 1;
  transform: translateX(42%) scaleX(1.12);
}

.btn-discord:active {
  transform: translateY(1px) scale(0.996);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 37%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(90deg, rgba(88, 101, 242, 0.055), transparent 20%, transparent 80%, rgba(180, 79, 255, 0.055)),
    #06070a;
}

.btn-discord:focus-visible {
  box-shadow:
    0 0 0 1px #000,
    0 0 0 3px rgba(180, 79, 255, 0.84),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.84),
    0 0 30px rgba(180, 79, 255, 0.18);
}

.auth-readout {
  display: flex;
  justify-content: center;
  gap: 0.68rem;
  margin-top: 0.58rem;
  color: rgba(142, 121, 162, 0.44);
  font-family: var(--void-font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(180, 79, 255, 0.08);
}

.void-auth .ritual-prompt {
  margin-top: 0.62rem;
  margin-bottom: 0;
  color: rgba(165, 153, 178, 0.5);
  font-size: 0.47rem;
  letter-spacing: 0.17em;
  text-shadow: 0 0 8px rgba(180, 79, 255, 0.09);
  animation-delay: 1.92s;
}

.void-auth .ritual-prompt span + span {
  color: rgba(180, 137, 212, 0.5);
  font-size: 0.45rem;
  letter-spacing: 0.14em;
}

.void-auth .ritual-prompt::before,
.void-auth .ritual-prompt::after {
  width: 30px;
  opacity: 0.42;
}

.auth-error {
  position: fixed;
  left: 50%;
  bottom: calc(2rem + env(safe-area-inset-bottom));
  z-index: 20;
  width: min(390px, calc(100vw - 1.5rem));
  padding: 0.85rem 1rem;
  border: 1px solid rgba(180, 79, 255, 0.48);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.16)),
    radial-gradient(ellipse 74% 140% at 50% 100%, rgba(180, 79, 255, 0.16), transparent 68%),
    rgba(5, 5, 8, 0.98);
  color: rgba(241, 232, 255, 0.94);
  font-family: var(--void-font-mono);
  font-size: 0.68rem;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.84),
    0 0 28px rgba(180, 79, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}

.auth-error.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.void-entry-collapse {
  left: 66.6%;
  top: 45.2%;
  z-index: 30;
  width: 130vmax;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.02);
  background: radial-gradient(circle, rgba(218, 195, 255, 0.5) 0 0.24%, rgba(180, 79, 255, 0.32) 0.5%, rgba(88, 101, 242, 0.18) 1.2%, rgba(0, 0, 0, 0.96) 7%, #000 28%, transparent 60%);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}

.login-body.is-entering .void-entry-collapse {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.login-body.is-entering .entrance-stage {
  opacity: 0.18;
  transform: translate3d(var(--stage-x), var(--stage-y), 0) scale(0.94);
  transition: opacity 240ms var(--ease-out), transform 280ms var(--ease-out);
}

@keyframes void-field-enter { to { opacity: 0.56; } }
@keyframes void-field-breathe { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.62; } }
@keyframes artscape-enter { to { opacity: 1; transform: scale(1); } }
@keyframes artscape-drift { 0%, 100% { transform: scale(1) translate3d(0, 0, 0); } 50% { transform: scale(1.004) translate3d(-0.04vw, -0.035vh, 0); } }
@keyframes art-glow { 0%, 100% { opacity: 0.38; } 50% { opacity: 0.58; } }
@keyframes grid-enter { to { opacity: 0.32; transform: scale(1); } }
@keyframes grid-drift {
  0% { background-position: center, center, center, left 3.2vw top 4vh, left 3.2vw top 15vh, 0 0, 0 0; }
  100% { background-position: center, center, center, left 3.2vw top 4vh, left 3.2vw top 15vh, 140px 140px, 140px 140px; }
}
@keyframes orbit-field-turn {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}
@keyframes perimeter-field-drift {
  0%, 100% { opacity: 0.68; transform: translate3d(-0.18vw, 0.1vh, 0) scale(1); }
  50% { opacity: 0.9; transform: translate3d(0.16vw, -0.12vh, 0) scale(1.006); }
}
@keyframes perimeter-dust-breathe {
  0%, 100% { opacity: 0.28; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.58; transform: translate3d(0.08vw, -0.08vh, 0); }
}
@keyframes bloom-enter { to { opacity: 0.92; transform: scale(1); } }
@keyframes bloom-breathe { 0%, 100% { opacity: 0.66; transform: scale(1); } 50% { opacity: 0.96; transform: scale(1.018); } }
@keyframes frame-enter { to { opacity: 0.72; } }
@keyframes rail-open { to { transform: translateX(-50%) scaleX(1); } }
@keyframes rail-breathe { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.48; } }
@keyframes hud-enter { to { opacity: 0.52; transform: translateY(0); } }
@keyframes hud-pulse { 0%, 100% { opacity: 0.36; } 50% { opacity: 0.58; } }
@keyframes sigil-enter { to { opacity: 0.52; transform: translate(-50%, -50%) scale(1); } }
@keyframes sigil-breathe { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.52; } }
@keyframes sigil-turn {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-360deg); }
}
@keyframes aperture-enter { to { opacity: 0.74; transform: translate(-50%, -50%) scale(1); } }
@keyframes aperture-breathe { 0%, 100% { opacity: 0.36; } 50% { opacity: 0.58; } }
@keyframes throat-open { to { opacity: 0.58; transform: translate(-50%, -50%) scaleX(1); } }
@keyframes throat-pulse { 0%, 100% { opacity: 0.24; } 50% { opacity: 0.5; } }
@keyframes prompt-enter { to { opacity: 0.82; transform: translateY(0); } }
@keyframes brand-enter {
  0% { opacity: 0.68; }
  100% { opacity: 1; }
}
@keyframes brand-smolder { 0%, 100% { filter: brightness(var(--mark-brightness, 0.92)) contrast(var(--mark-contrast, 1.08)) drop-shadow(0 0 1px rgba(238, 225, 255, 0.08)) drop-shadow(0 0 10px rgba(180, 79, 255, 0.12)); } 50% { filter: brightness(var(--mark-brightness, 0.92)) contrast(var(--mark-contrast, 1.08)) drop-shadow(0 0 1px rgba(238, 225, 255, 0.1)) drop-shadow(0 0 16px rgba(180, 79, 255, 0.17)); } }
@keyframes brand-fracture { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 42% { transform: translate3d(0, -1px, 0) scale(1.006) skewX(-0.45deg); opacity: 0.96; } 68% { transform: translate3d(0, 1px, 0) scale(0.998) skewX(0.32deg); opacity: 1; } }
@keyframes brand-flame-enter { to { opacity: 0.42; transform: translateX(-50%) translateY(0) scaleY(1); } }
@keyframes brand-flame-enter-soft { to { opacity: 0.26; transform: translateX(-50%) translateY(0) scaleY(1); } }
@keyframes brand-flame-drift { 0%, 100% { opacity: 0.24; transform: translateX(-50%) translateY(2px) scaleY(0.96); } 50% { opacity: 0.46; transform: translateX(-50%) translateY(-9px) scaleY(1.08); } }
@keyframes brand-flame-drift-soft { 0%, 100% { opacity: 0.14; transform: translateX(-50%) translateY(4px) scaleY(0.92); } 50% { opacity: 0.3; transform: translateX(-50%) translateY(-7px) scaleY(1.04); } }
@keyframes vow-enter { to { opacity: 0.9; transform: translateY(0); } }
@keyframes answer-enter { to { opacity: 1; transform: translateY(0); } }
@keyframes button-answer-scan { 0%, 68% { transform: translateX(0) skewX(-18deg); opacity: 0; } 72% { opacity: 1; } 86%, 100% { transform: translateX(520%) skewX(-18deg); opacity: 0; } }

@media (min-width: 981px) {
  .entrance-stage {
    padding-left: clamp(2.5rem, 11.4vw, 14.25rem);
  }

  .summon {
    width: min(760px, 50vw);
    min-width: 600px;
    gap: 0.82rem;
  }

  .void-artscape::before {
    opacity: 0.92;
    background:
      radial-gradient(ellipse 42% 28% at 30% 48%, rgba(180, 79, 255, 0.34), transparent 72%),
      radial-gradient(ellipse 26% 52% at 66% 42%, rgba(180, 79, 255, 0.32), rgba(180, 79, 255, 0.13) 35%, transparent 76%),
      radial-gradient(ellipse 38% 30% at 64% 44%, rgba(180, 79, 255, 0.23), transparent 76%),
      radial-gradient(ellipse 16% 58% at 48% 53%, rgba(180, 79, 255, 0.12), transparent 76%);
  }

  .void-bloom {
    background:
      radial-gradient(ellipse 38% 22% at 32% 52%, rgba(180, 79, 255, 0.28) 0%, rgba(155, 89, 182, 0.09) 43%, transparent 77%),
      radial-gradient(ellipse 22% 46% at 66% 45%, rgba(180, 79, 255, 0.24) 0%, rgba(155, 89, 182, 0.09) 42%, transparent 82%),
      radial-gradient(ellipse 40% 30% at 72% 45%, rgba(180, 79, 255, 0.2) 0%, transparent 79%);
  }

  .void-sigil {
    top: 43.8%;
    width: min(760px, 58vw);
  }

  .void-sigil-ring {
    border-color: rgba(180, 79, 255, 0.18);
    box-shadow:
      inset 0 0 44px rgba(0, 0, 0, 0.6),
      0 0 26px rgba(180, 79, 255, 0.07);
  }

  .void-sigil-ring--outer {
    border-color: rgba(180, 79, 255, 0.15);
  }

  .void-sigil-ring--inner {
    border-color: rgba(216, 182, 255, 0.22);
  }

  .gateway-shell::before {
    top: 47.5%;
    width: 130%;
    height: 112%;
    background:
      radial-gradient(ellipse 58% 30% at 50% 44%, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.28) 45%, transparent 76%),
      radial-gradient(ellipse 64% 38% at 49% 45%, rgba(180, 79, 255, 0.1), transparent 76%),
      radial-gradient(ellipse 98% 58% at 50% 54%, rgba(0, 0, 0, 0.34), transparent 76%);
  }

  .void-brand {
    gap: 0.72rem;
  }

  .void-wordmark {
    --mark-brightness: 0.9;
    --mark-contrast: 1.1;
    width: min(720px, 100%);
    filter:
      brightness(var(--mark-brightness)) contrast(var(--mark-contrast))
      drop-shadow(0 0 1px rgba(238, 225, 255, 0.12))
      drop-shadow(0 0 20px rgba(180, 79, 255, 0.22))
      drop-shadow(0 0 38px rgba(180, 79, 255, 0.075));
  }

  .void-vow {
    width: min(360px, 88vw);
    gap: 0.3rem;
    font-size: clamp(0.74rem, 0.9vw, 0.86rem);
    letter-spacing: 0.39em;
  }

  .void-auth {
    width: min(430px, 100%);
    margin-top: 0.8rem;
  }

  .btn-discord {
    min-height: 66px;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    border-color: rgba(216, 182, 255, 0.78);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -22px 38px rgba(0, 0, 0, 0.72),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 22px 54px rgba(0, 0, 0, 0.9),
      0 0 0 1px rgba(180, 79, 255, 0.12),
      0 0 34px rgba(180, 79, 255, 0.14);
  }

  .void-auth .ritual-prompt {
    margin-top: 0.66rem;
    font-size: 0.5rem;
  }
}

@media (max-width: 980px) {
  .entrance-stage {
    justify-content: center;
    padding: 4.8rem 1.25rem 4.15rem;
  }

  .summon {
    width: min(610px, calc(100vw - 2rem));
    min-width: 0;
    transform: none;
  }

  .void-artscape {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.06)),
      radial-gradient(ellipse 70% 54% at 52% 48%, transparent 0%, rgba(0, 0, 0, 0.32) 82%, #000 100%),
      url('/assets/void-banner-mobile.webp');
    background-size: 100% 100%, 100% 100%, auto min(86vh, 760px);
    background-position:
      center,
      center,
      calc(50% + var(--art-x)) calc(40% + var(--art-y));
    opacity: 0;
  }

  .void-artscape::before {
    opacity: 0.86;
    background:
      radial-gradient(ellipse 46% 30% at 48% 42%, rgba(180, 79, 255, 0.3), transparent 72%),
      radial-gradient(ellipse 42% 52% at 50% 38%, rgba(180, 79, 255, 0.23), rgba(180, 79, 255, 0.09) 40%, transparent 78%),
      radial-gradient(ellipse 52% 42% at 50% 54%, rgba(180, 79, 255, 0.2), transparent 78%);
  }

  .void-artscape::after {
    background:
      linear-gradient(180deg, #000 0%, transparent 9%, transparent 86%, #000 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, transparent 7%, transparent 93%, rgba(0, 0, 0, 0.8) 100%),
      radial-gradient(ellipse 86% 58% at 50% 47%, transparent 0%, rgba(0, 0, 0, 0.14) 72%, rgba(0, 0, 0, 0.48) 100%);
  }

  .void-bloom {
    background:
      radial-gradient(ellipse 72% 34% at 50% 44%, rgba(180, 79, 255, 0.28) 0%, rgba(155, 89, 182, 0.095) 42%, transparent 78%),
      radial-gradient(ellipse 44% 48% at 50% 39%, rgba(180, 79, 255, 0.17) 0%, rgba(155, 89, 182, 0.066) 44%, transparent 82%),
      radial-gradient(ellipse 50% 42% at 50% 52%, rgba(180, 79, 255, 0.21) 0%, transparent 80%);
  }

  .void-haze {
    background:
      radial-gradient(ellipse 88% 58% at 50% 47%, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.24) 84%, #000 100%),
      radial-gradient(ellipse 100% 22% at 50% 100%, rgba(0, 0, 0, 0.64) 0%, transparent 78%),
      radial-gradient(ellipse 92% 18% at 50% 0%, rgba(0, 0, 0, 0.62) 0%, transparent 78%);
  }

  .void-haze::after {
    opacity: 0.16;
  }

  .void-wordmark {
    width: min(540px, 94vw);
  }

  .void-vow {
    letter-spacing: 0.3em;
  }

  .void-entry-collapse {
    left: 50%;
    top: 40.7%;
  }

  .void-sigil {
    top: 45%;
    width: min(520px, 92vw);
  }

  .void-auth::before,
  .void-auth::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .entrance-stage {
    align-items: center;
    padding: 8.95rem 1rem 2rem;
  }

  .summon {
    gap: 0.58rem;
    transform: translateY(66px);
  }

  .gateway-frame {
    opacity: 0.72 !important;
  }

  .gate-corner {
    width: 52px;
    height: 52px;
  }

  .hud-corner,
  .gate-rail {
    display: none;
  }

  .gateway-shell {
    padding-block: 0.65rem;
  }

  .gateway-shell::before {
    top: 48.4%;
    width: 116%;
    height: 82%;
    background:
      radial-gradient(ellipse 58% 28% at 50% 45%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.68) 48%, transparent 76%),
      radial-gradient(ellipse 62% 34% at 50% 48%, rgba(180, 79, 255, 0.046), transparent 74%);
  }

  .gateway-shell::after {
    bottom: 4.15rem;
    width: 62%;
  }

  .ritual-prompt {
    gap: 0.22rem;
    margin-bottom: -0.04rem;
    font-size: 0.51rem;
    letter-spacing: 0.14em;
  }

  .ritual-prompt span + span {
    font-size: 0.47rem;
    letter-spacing: 0.12em;
  }

  .ritual-prompt::before,
  .ritual-prompt::after {
    display: none;
  }

  .void-brand {
    gap: 0.46rem;
    margin-top: -0.04rem;
  }

  .void-wordmark {
    --mark-brightness: 0.93;
    --mark-contrast: 1.08;
    width: min(390px, 104vw);
    filter:
      brightness(var(--mark-brightness)) contrast(var(--mark-contrast))
      drop-shadow(0 0 1px rgba(238, 225, 255, 0.08))
      drop-shadow(0 0 13px rgba(180, 79, 255, 0.16));
  }

  .void-vow {
    width: min(290px, 86vw);
    gap: 0.24rem;
    font-size: 0.63rem;
    letter-spacing: 0.19em;
  }

  .void-auth {
    width: min(342px, calc(100vw - 2rem));
    margin-top: 0.52rem;
  }

  .btn-discord {
    min-height: 60px;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
  }

  .void-auth .ritual-prompt {
    gap: 0.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.43rem;
    letter-spacing: 0.12em;
  }

  .void-auth .ritual-prompt span + span {
    font-size: 0.41rem;
    letter-spacing: 0.105em;
  }

  .void-sigil {
    top: 53%;
    width: min(430px, 112vw);
  }

  .void-entry-collapse {
    left: 50%;
    top: 53%;
  }

  .void-brand::before {
    width: 112%;
    height: 64%;
    opacity: 0;
    animation: brand-flame-enter 1.1s var(--ease-out) 1.08s forwards, brand-flame-drift var(--logo-pulse) var(--ease-inout) 2.2s infinite;
  }

  .void-brand::after {
    width: 100%;
    height: 56%;
    animation: brand-flame-enter-soft 1.2s var(--ease-out) 1.16s forwards, brand-flame-drift-soft var(--logo-loop) var(--ease-inout) 2.4s infinite;
  }
}

@media (max-height: 720px) and (min-width: 981px) {
  .entrance-stage {
    padding-top: 3.2rem;
    padding-bottom: 3rem;
  }

  .summon {
    gap: 0.52rem;
    transform: translate3d(var(--stage-x), calc(var(--stage-y) - 12px), 0) scale(0.94);
    transform-origin: center;
  }

  .void-wordmark {
    width: min(540px, 100%);
  }

  .void-vow {
    gap: 0.22rem;
  }

  .btn-discord {
    min-height: 54px;
  }

  .auth-readout {
    margin-top: 0.4rem;
  }
}
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}

/* 22. Sidebar */
.sidebar {
  width: 240px;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border-2);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.25s var(--ease-out);
  will-change: transform;
  z-index: 10;
}

.sidebar::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--c-violet-hi), transparent);
  opacity: 0.4;
  pointer-events: none;
}

.sidebar-header { padding: 1.4rem 1.25rem 1rem; border-bottom: 1px solid var(--c-border-2); }

.sidebar-logo {
  font-family: var(--void-font-display);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  color: var(--c-violet-hi);
  text-shadow: 0 0 10px rgba(180, 79, 255, 0.35);
}

.sidebar-tagline {
  font-family: var(--void-font-mono);
  font-size: 0.54rem;
  color: var(--c-text-2);
  margin-top: 0.22rem;
  font-style: italic;
  opacity: 0.55;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--c-border-2);
}

.sidebar-avatar    { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-border-2); }
.sidebar-username  { font-size: 0.85rem; font-weight: 600; color: var(--c-text); }
.sidebar-nav       { flex: 1; padding: 0.6rem 0; }

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.58rem 1.25rem;
  color: var(--c-text-2);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  will-change: transform;
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  border-left: 2px solid transparent;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.sidebar-nav-item:hover,
.sidebar-nav-item.active {
  color: var(--c-text);
  background: rgba(155, 89, 182, 0.07);
  border-left-color: var(--c-violet-hi);
}

.sidebar-nav-item:hover { transform: translateX(2px); }

.sidebar-footer { padding: 0.9rem 1.25rem; border-top: 1px solid var(--c-border-2); }

/* 23. Topbar and main content */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--c-border-2);
  background: var(--c-surface);
}

.topbar-title {
  font-family: var(--void-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--c-text-2);
}

.hud {
  font-family: var(--void-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--c-text-2);
  opacity: 0.5;
  text-transform: uppercase;
}

/* 24. Server grid */
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  padding: 2rem 1.5rem;
}

.server-card {
  background: var(--c-card);
  border: 1px solid var(--c-border-2);
  border-radius: 3px;
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  will-change: transform;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
  color: var(--c-text);
}

.server-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(180, 79, 255, 0.2);
  border-color: var(--c-violet);
}

.server-icon             { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-border-2); }
.server-icon-placeholder { width: 54px; height: 54px; border-radius: 50%; background: var(--c-violet-dk); display: flex; align-items: center; justify-content: center; font-family: var(--void-font-display); font-size: 1.1rem; color: #fff; }
.server-name             { font-size: 0.8rem; font-weight: 600; text-align: center; word-break: break-word; }

/* 25. Tabs */
.tabs { display: flex; border-bottom: 1px solid var(--c-border-2); padding: 0 1.5rem; background: var(--c-surface); }

.tab {
  padding: 0.68rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  letter-spacing: 0.02em;
}

.tab:hover { color: var(--c-text); }
.tab.active { color: var(--c-violet-hi); border-bottom-color: var(--c-violet-hi); }
.tab-content  { display: none; }
.tab-content.active { display: flex; flex: 1; }

/* 26. Embed editor */
.editor-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
}

.editor-controls { padding: 1.5rem; overflow-y: auto; border-right: 1px solid var(--c-border-2); }
.editor-preview  { padding: 1.5rem; overflow-y: auto; background: #36393f; }

.editor-preview-label {
  font-family: var(--void-font-mono);
  font-size: 0.58rem;
  color: rgba(255,255,255,0.22);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.discord-embed-wrapper     { display: flex; max-width: 520px; }
.discord-embed-accent      { width: 4px; border-radius: 4px 0 0 4px; flex-shrink: 0; }
.discord-embed-body        { background: #2f3136; padding: 0.75rem 1rem; border-radius: 0 4px 4px 0; flex: 1; min-width: 0; }
.discord-embed-author      { font-size: 0.8rem; font-weight: 600; color: #fff; margin-bottom: 0.25rem; }
.discord-embed-title       { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.discord-embed-description { font-size: 0.875rem; color: #dcddde; line-height: 1.45; margin-bottom: 0.5rem; white-space: pre-wrap; word-break: break-word; }
.discord-embed-fields      { display: grid; gap: 0.3rem; margin-bottom: 0.5rem; }
.discord-embed-field-name  { font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 0.1rem; }
.discord-embed-field-value { font-size: 0.8rem; color: #dcddde; }
.discord-embed-image       { max-width: 100%; border-radius: 4px; margin-top: 0.5rem; }
.discord-embed-thumbnail   { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; float: right; margin-left: 1rem; }
.discord-embed-footer      { font-size: 0.72rem; color: #72767d; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }

/* 27. Components V2 editor */
.v2-component-list { display: flex; flex-direction: column; gap: 0.5rem; }

.v2-component-card {
  background: var(--c-card);
  border: 1px solid var(--c-border-2);
  border-left: 3px solid var(--c-violet);
  border-radius: 2px;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  cursor: grab;
}

.v2-component-card[data-type="section"]      { border-left-color: #5865F2; }
.v2-component-card[data-type="separator"]    { border-left-color: #3a3a3e; }
.v2-component-card[data-type="mediagallery"] { border-left-color: #3ba55d; }
.v2-component-card[data-type="buttons"]      { border-left-color: #b58c00; }

.v2-component-actions {
  display: flex; gap: 0.4rem;
  opacity: 0;
  transition: opacity var(--t-fast);
  margin-left: auto;
}

.v2-component-card:hover .v2-component-actions { opacity: 1; }

/* 28. Shared inputs */
.field { margin-bottom: 1rem; }

label {
  display: block;
  font-family: var(--void-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--c-text-2);
  text-transform: uppercase;
  margin-bottom: 0.32rem;
}

input[type="text"],
input[type="color"],
textarea,
select {
  background: var(--c-card);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  font-family: var(--void-font-body);
  font-size: 0.9rem;
  padding: 0.48rem 0.72rem;
  border-radius: 2px;
  width: 100%;
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}

input[type="text"]:focus,
textarea:focus,
select:focus {
  border-color: var(--c-violet);
  box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.18);
}

input[type="color"] { padding: 2px 4px; height: 36px; cursor: pointer; }

/* 29. Shared buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--void-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  will-change: transform;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
}

.btn:hover  { transform: scale(1.03); }
.btn:active { transform: scale(0.98); }

.btn-primary       { background: var(--c-violet); color: #fff; }
.btn-primary:hover { box-shadow: 0 0 18px rgba(180, 79, 255, 0.4); }

.btn-secondary       { background: var(--c-card); color: var(--c-text); border-color: var(--c-border-2); }
.btn-secondary:hover { border-color: var(--c-violet); }

.btn-danger       { background: #3e0b14; color: rgba(255,255,255,0.8); }
.btn-danger:hover { box-shadow: 0 0 14px rgba(62, 11, 20, 0.8); }

/* 30. Cards */
.card { background: var(--c-card); border: 1px solid var(--c-border-2); border-radius: 3px; padding: 1.1rem; }

/* 31. Spinner */
.spinner {
  width: 18px; height: 18px;
  border: 1px solid var(--c-border-2);
  border-top-color: var(--c-violet-hi);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 32. Tooltips */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-void);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  font-family: var(--void-font-mono);
  font-size: 0.62rem;
  padding: 0.28rem 0.55rem;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

/* 33. Toasts */
#toast-container {
  position: fixed; bottom: 50px; right: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: 9999;
}

.toast {
  background: var(--c-card);
  border: 1px solid var(--c-border-2);
  border-left: 2px solid var(--c-violet);
  color: var(--c-text);
  padding: 0.65rem 1rem;
  border-radius: 2px;
  font-family: var(--void-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  will-change: transform, opacity;
  transform: translateX(110%);
  opacity: 0;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
  min-width: 190px; max-width: 290px;
}
.toast.show  { transform: translateX(0); opacity: 1; }
.toast.error { border-left-color: #6b1622; }

/* 34. Modal */
#modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

/* Hex grid texture for dashboard bg */
.hex-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V18L28 2l28 16v32L28 66zM28 68l28 16v-2L28 66 0 82v2L28 68z' fill='%239B59B6' fill-opacity='0.02'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ritual-orbit,
  .void-grid,
  .void-bloom,
  .gateway-frame,
  .gate-rail,
  .hud-corner,
  .gateway-shell::before,
  .gateway-shell::after,
  .void-sigil,
  .void-sigil-ring,
  .void-sigil-axis,
  .gateway-slit,
  .ritual-prompt,
  .void-wordmark,
  .btn-ritual-line,
  .void-auth {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  .void-sigil {
    opacity: 0.24 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .void-artscape,
  .void-sigil {
    animation: none !important;
  }

  .void-artscape {
    opacity: 0.88 !important;
    transform: scale(1) !important;
  }

  .void-grid {
    opacity: 0.14 !important;
  }

  .void-bloom {
    opacity: 0.42 !important;
  }

  .gateway-frame {
    opacity: 0.7 !important;
  }

  .ritual-prompt {
    opacity: 0.82 !important;
  }

  .void-vow {
    opacity: 0.9 !important;
  }

  .void-entry-collapse {
    display: none !important;
  }

  .auth-error {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(10px) !important;
  }

  .auth-error.is-visible {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    z-index: 50;
  }

  .sidebar.open { transform: translateX(0); }
  .editor-layout { grid-template-columns: 1fr; }
  .editor-preview { display: none; }
}

/* VØID Command Center */
.dashboard-body {
  --dash-bg: #030306;
  --dash-bg-2: #070711;
  --dash-surface: rgba(11, 11, 18, 0.86);
  --dash-surface-2: rgba(16, 15, 25, 0.92);
  --dash-card: rgba(15, 14, 24, 0.78);
  --dash-card-strong: rgba(21, 19, 31, 0.92);
  --dash-border: rgba(170, 135, 214, 0.14);
  --dash-border-strong: rgba(201, 171, 239, 0.28);
  --dash-text: #E6E1EC;
  --dash-muted: #8D849B;
  --dash-faint: #5E536B;
  --dash-accent: #B44FFF;
  --dash-accent-2: #5865F2;
  --dash-success: #57F2A2;
  --dash-warning: #F2C45A;
  --dash-error: #F26C86;
  --dash-radius: 18px;
  --dash-radius-sm: 12px;
  --dash-sidebar: 292px;
  --dash-topbar: 78px;
  --dash-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  --dash-glow: 0 0 42px rgba(180, 79, 255, 0.16);
  min-height: 100vh;
  color: var(--dash-text);
  background:
    radial-gradient(circle at 74% 18%, rgba(180, 79, 255, 0.14), transparent 33vw),
    radial-gradient(circle at 12% 86%, rgba(88, 101, 242, 0.09), transparent 28vw),
    linear-gradient(135deg, rgba(180, 79, 255, 0.035), transparent 35%),
    var(--dash-bg);
}

.dashboard-body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 42%, black, transparent 72%);
  opacity: 0.24;
}

.dashboard-body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% -20%, transparent 20%, rgba(0, 0, 0, 0.62) 76%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.38));
}

.dashboard-layout.command-center {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--dash-sidebar) minmax(0, 1fr);
}

.command-sidebar {
  width: auto;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(14, 13, 21, 0.94), rgba(5, 5, 9, 0.96)),
    var(--dash-surface);
  border-right: 1px solid var(--dash-border);
  box-shadow: 24px 0 80px rgba(0, 0, 0, 0.32);
  overflow-y: auto;
  scrollbar-width: thin;
}

.command-sidebar::before {
  left: auto;
  right: 0;
  top: 9%;
  bottom: 9%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(180, 79, 255, 0.75), transparent);
  opacity: 0.45;
}

.command-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1.2rem 1rem;
  border-bottom-color: var(--dash-border);
}

.brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(180, 79, 255, 0.34);
  background:
    radial-gradient(circle at 50% 18%, rgba(180, 79, 255, 0.2), transparent 58%),
    rgba(0, 0, 0, 0.45);
  color: #F4EAFF;
  font-family: var(--void-font-display);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 24px rgba(180, 79, 255, 0.12), 0 0 26px rgba(180, 79, 255, 0.1);
}

.command-brand .sidebar-logo {
  color: var(--dash-text);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-shadow: none;
}

.command-brand .sidebar-tagline {
  color: var(--dash-muted);
  font-style: normal;
  opacity: 0.82;
}

.command-sidebar .sidebar-user {
  border-bottom-color: var(--dash-border);
  padding: 0.95rem 1.2rem;
}

.command-sidebar .sidebar-avatar {
  width: 40px;
  height: 40px;
  border-color: var(--dash-border-strong);
  box-shadow: 0 0 18px rgba(180, 79, 255, 0.12);
}

.sidebar-user-role {
  display: block;
  margin-top: 0.12rem;
  color: var(--dash-faint);
  font-family: var(--void-font-mono);
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.command-nav {
  padding: 0.8rem 0.7rem 1rem;
}

.nav-group {
  padding: 0.58rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.nav-group:last-child {
  border-bottom: 0;
}

.nav-group-label {
  padding: 0.35rem 0.55rem 0.4rem;
  color: var(--dash-faint);
  font-family: var(--void-font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.command-nav .sidebar-nav-item {
  position: relative;
  gap: 0.62rem;
  min-height: 38px;
  padding: 0.55rem 0.62rem;
  border: 1px solid transparent;
  border-left: 1px solid transparent;
  border-radius: 12px;
  color: rgba(231, 224, 238, 0.68);
  font-size: 0.84rem;
  background: transparent;
  transform: none;
}

.command-nav .sidebar-nav-item:hover {
  color: var(--dash-text);
  transform: translateX(2px);
  border-color: rgba(180, 79, 255, 0.12);
  background: rgba(180, 79, 255, 0.055);
}

.command-nav .sidebar-nav-item.active {
  color: #fff;
  border-color: rgba(180, 79, 255, 0.28);
  background:
    linear-gradient(90deg, rgba(180, 79, 255, 0.17), rgba(88, 101, 242, 0.06)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 0 22px rgba(180, 79, 255, 0.08);
}

.command-nav .sidebar-nav-item.is-placeholder {
  color: rgba(231, 224, 238, 0.46);
}

.command-nav .sidebar-nav-item.is-locked:not(.active) {
  opacity: 0.58;
}

.nav-pill {
  margin-left: auto;
  border: 1px solid rgba(180, 79, 255, 0.18);
  border-radius: 999px;
  padding: 0.08rem 0.34rem;
  color: rgba(222, 198, 255, 0.66);
  font-family: var(--void-font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-pill.advanced {
  border-color: rgba(88, 101, 242, 0.26);
  color: rgba(170, 177, 255, 0.78);
}

.command-sidebar .sidebar-footer {
  border-top-color: var(--dash-border);
  padding: 1rem 1.2rem 1.2rem;
}

.logout-btn {
  width: 100%;
  justify-content: center;
}

.command-main {
  min-width: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0, rgba(180, 79, 255, 0.055), transparent 36rem),
    rgba(0, 0, 0, 0.1);
}

.command-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--dash-topbar);
  padding: 0.9rem 1.35rem;
  border-bottom: 1px solid var(--dash-border);
  background: rgba(5, 5, 9, 0.8);
  backdrop-filter: blur(18px);
}

.topbar-left,
.topbar-tools {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.topbar-title {
  display: block;
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.topbar-subtitle {
  display: block;
  max-width: 56vw;
  margin-top: 0.16rem;
  color: var(--dash-muted);
  font-size: 0.8rem;
}

.sidebar-toggle {
  padding: 0.52rem 0.72rem;
}

.command-search {
  width: min(260px, 22vw);
  position: relative;
  margin: 0;
}

.command-search span {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dash-faint);
  font-family: var(--void-font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  pointer-events: none;
}

.command-search input {
  height: 38px;
  padding-left: 4.15rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  border-color: var(--dash-border);
  font-size: 0.78rem;
}

.server-context {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--dash-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--dash-muted);
  font-family: var(--void-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.server-context-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dash-accent);
  box-shadow: 0 0 12px rgba(180, 79, 255, 0.8);
}

.command-content {
  min-width: 0;
  padding: 1.35rem;
}

.command-tab {
  display: none;
  flex-direction: column;
  gap: 1.15rem;
  animation: command-tab-enter 0.34s var(--ease-out) both;
}

.command-tab.active {
  display: flex;
}

@keyframes command-tab-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.command-hero,
.section-head,
.editor-head,
.state-card,
.server-card,
.module-card,
.editor-controls,
.editor-preview,
.v2-preview-container,
.modal-card {
  border: 1px solid var(--dash-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--dash-card);
  box-shadow: var(--dash-shadow);
}

.command-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 1.35rem;
  align-items: end;
  min-height: 260px;
  padding: clamp(1.35rem, 2.6vw, 2.4rem);
  border-radius: var(--dash-radius);
}

.command-hero::before {
  content: '';
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 42%, rgba(180, 79, 255, 0.19), transparent 24%),
    conic-gradient(from 120deg at 62% 42%, transparent, rgba(180, 79, 255, 0.12), transparent 28%);
  opacity: 0.72;
}

.command-hero > * {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: rgba(205, 181, 238, 0.78);
  font-family: var(--void-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dash-accent);
  box-shadow: 0 0 14px rgba(180, 79, 255, 0.75);
}

.command-hero h1,
.section-head h2,
.editor-head h2 {
  margin-top: 0.35rem;
  color: #fff;
  font-family: var(--void-font-display);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.command-hero h1 {
  font-size: clamp(2rem, 4vw, 4.35rem);
  line-height: 0.96;
}

.command-hero p,
.section-head p,
.editor-head p,
.module-card p,
.server-card p,
.state-card p {
  color: var(--dash-muted);
  line-height: 1.55;
}

.command-hero p {
  max-width: 660px;
  margin-top: 0.85rem;
  font-size: 1.03rem;
}

.hero-status-grid {
  display: grid;
  gap: 0.75rem;
}

.hero-status-grid div,
.control-stats div {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--dash-radius-sm);
  padding: 0.9rem;
  background: rgba(0, 0, 0, 0.28);
}

.hero-status-grid strong,
.control-stats strong {
  display: block;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-status-grid span,
.control-stats span {
  display: block;
  margin-top: 0.22rem;
  color: var(--dash-muted);
  font-size: 0.78rem;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--dash-radius-sm);
  box-shadow: none;
}

.section-head h2 {
  font-size: 1.08rem;
}

.section-head p {
  max-width: 520px;
  font-size: 0.86rem;
  text-align: right;
}

.command-server-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: 0;
}

.server-card {
  position: relative;
  overflow: hidden;
  align-items: flex-start;
  min-height: 260px;
  padding: 1.15rem;
  border-radius: var(--dash-radius);
  color: var(--dash-text);
  transform: translateY(0);
}

.server-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 28% 8%, rgba(180, 79, 255, 0.16), transparent 42%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}

.server-card:hover {
  transform: translateY(-5px);
  border-color: var(--dash-border-strong);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), var(--dash-glow);
}

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

.server-card > * {
  position: relative;
  z-index: 1;
}

.server-icon,
.server-icon-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  border: 1px solid var(--dash-border-strong);
  box-shadow: 0 0 24px rgba(180, 79, 255, 0.1);
}

.server-icon-placeholder {
  background:
    radial-gradient(circle at 35% 20%, rgba(180, 79, 255, 0.38), transparent 56%),
    rgba(0, 0, 0, 0.42);
  color: #fff;
  font-family: var(--void-font-display);
}

.server-status-badge {
  display: inline-flex;
  margin-top: 0.2rem;
  border: 1px solid rgba(87, 242, 162, 0.24);
  border-radius: 999px;
  padding: 0.18rem 0.48rem;
  color: rgba(153, 255, 204, 0.82);
  font-family: var(--void-font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.server-name {
  margin-top: 0.2rem;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.12;
  text-align: left;
}

.server-open-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

.server-skeleton {
  min-height: 250px;
  border-radius: var(--dash-radius);
  border: 1px solid var(--dash-border);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent),
    var(--dash-card);
  background-size: 220% 100%, auto;
  animation: skeleton-pass 1.4s linear infinite;
}

@keyframes skeleton-pass {
  to { background-position: -220% 0, 0 0; }
}

.state-card {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 0.55rem;
  padding: 2rem;
  border-radius: var(--dash-radius);
  text-align: center;
}

.state-card h3 {
  color: #fff;
  font-family: var(--void-font-display);
  letter-spacing: 0.04em;
}

.control-hero {
  grid-template-columns: auto minmax(0, 1fr) minmax(230px, 0.35fr);
  align-items: center;
}

.selected-server-emblem {
  width: clamp(86px, 11vw, 132px);
  height: clamp(86px, 11vw, 132px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid var(--dash-border-strong);
  background:
    radial-gradient(circle at 34% 18%, rgba(180, 79, 255, 0.3), transparent 58%),
    #06060b;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 2.2rem;
  box-shadow: inset 0 0 40px rgba(180, 79, 255, 0.12), var(--dash-glow);
}

.selected-server-emblem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.control-stats {
  display: grid;
  gap: 0.75rem;
}

.control-stats strong {
  font-size: 1.25rem;
}

.module-section,
.module-category {
  display: grid;
  gap: 1rem;
}

.module-category h3 {
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 1rem;
}

.module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  gap: 0.7rem;
  padding: 1rem;
  border-radius: var(--dash-radius);
  overflow: hidden;
  transition:
    transform var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    opacity var(--t-mid) var(--ease-out);
}

.module-card:hover {
  transform: translateY(-4px);
  border-color: var(--dash-border-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52), var(--dash-glow);
}

.module-card.is-soon {
  opacity: 0.74;
}

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

.module-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(180, 79, 255, 0.22);
  background: rgba(180, 79, 255, 0.08);
  color: #EBD9FF;
  font-family: var(--void-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.module-card h4 {
  color: #fff;
  font-size: 1.02rem;
}

.module-card p {
  flex: 1;
  font-size: 0.88rem;
}

.badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 1px solid var(--dash-border);
  border-radius: 999px;
  padding: 0.2rem 0.48rem;
  font-family: var(--void-font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-ready {
  color: rgba(153, 255, 204, 0.88);
  border-color: rgba(87, 242, 162, 0.24);
}

.badge-configure {
  color: rgba(242, 196, 90, 0.88);
  border-color: rgba(242, 196, 90, 0.24);
}

.badge-soon {
  color: rgba(196, 184, 210, 0.72);
}

.badge-advanced {
  color: rgba(170, 177, 255, 0.82);
  border-color: rgba(88, 101, 242, 0.26);
}

.editor-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--dash-radius);
}

.editor-head h2 {
  font-size: 1.1rem;
}

.editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.editor-actions select {
  width: min(240px, 100%);
}

.editor-layout {
  gap: 1rem;
  min-height: 620px;
}

.editor-controls,
.editor-preview {
  border-radius: var(--dash-radius);
  border-color: var(--dash-border);
}

.editor-controls {
  background: var(--dash-card);
}

.editor-preview {
  background:
    radial-gradient(circle at 68% 12%, rgba(88, 101, 242, 0.09), transparent 32%),
    #313338;
}

.editor-preview-label {
  color: rgba(255, 255, 255, 0.34);
}

.form-grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.color-row,
.panel-row,
.v2-tools {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.color-row.compact {
  margin-left: auto;
}

.panel-row {
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.fields-panel {
  margin-top: 1rem;
}

.fields-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.muted-note,
.empty-inline {
  color: var(--dash-muted);
  font-size: 0.85rem;
}

.v2-preview-container {
  min-height: 120px;
  padding: 1rem;
  border-radius: var(--dash-radius-sm);
  background: #2f3136;
}

input[type="text"],
input[type="search"],
input[type="color"],
textarea,
select {
  border-color: var(--dash-border);
  background: rgba(0, 0, 0, 0.32);
  color: var(--dash-text);
  border-radius: 10px;
}

input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: rgba(180, 79, 255, 0.58);
  box-shadow: 0 0 0 3px rgba(180, 79, 255, 0.14);
}

.btn {
  min-height: 38px;
  border-radius: 10px;
  justify-content: center;
}

.btn-primary {
  border-color: rgba(180, 79, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
    linear-gradient(135deg, rgba(180, 79, 255, 0.92), rgba(88, 101, 242, 0.78));
  box-shadow: 0 14px 36px rgba(180, 79, 255, 0.18);
}

.btn-secondary {
  border-color: var(--dash-border);
  background: rgba(255, 255, 255, 0.045);
  color: var(--dash-text);
}

.btn-secondary:hover {
  border-color: var(--dash-border-strong);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

.btn-danger {
  border-color: rgba(242, 108, 134, 0.24);
  background: rgba(242, 108, 134, 0.1);
  color: rgba(255, 218, 226, 0.9);
}

.btn.is-disabled,
.btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.modal-card {
  width: 390px;
  max-width: 92vw;
  padding: 1.1rem;
  border-radius: var(--dash-radius);
}

.modal-card h3 {
  margin-bottom: 1rem;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.toast {
  border-color: var(--dash-border);
  background: rgba(11, 10, 17, 0.96);
  border-radius: 12px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1180px) {
  .dashboard-layout.command-center {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .command-sidebar {
    --dash-sidebar: 232px;
  }

  .topbar-tools {
    gap: 0.5rem;
  }

  .command-search {
    display: none;
  }

  .control-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .control-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .dashboard-layout.command-center {
    display: block;
  }

  .command-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(315px, 86vw);
    transform: translateX(-102%);
    z-index: 60;
  }

  .command-sidebar.open {
    transform: translateX(0);
  }

  .command-main {
    min-height: 100vh;
  }

  .command-topbar {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .topbar-tools {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .topbar-subtitle {
    max-width: 100%;
  }

  .command-hero,
  .control-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .section-head,
  .editor-head {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .editor-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .editor-preview {
    display: block;
  }
}

@media (max-width: 620px) {
  .command-content {
    padding: 0.85rem;
  }

  .command-topbar {
    padding: 0.8rem;
  }

  .topbar-left {
    align-items: flex-start;
  }

  .topbar-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .hud {
    display: none;
  }

  .server-context {
    max-width: 100%;
  }

  .command-hero {
    padding: 1rem;
    border-radius: 16px;
  }

  .command-hero h1 {
    font-size: 2rem;
  }

  .command-server-grid,
  .module-grid,
  .control-stats,
  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .editor-actions,
  .quick-actions {
    width: 100%;
  }

  .editor-actions > *,
  .quick-actions > * {
    width: 100%;
  }

  #toast-container {
    left: 0.85rem;
    right: 0.85rem;
    bottom: 1rem;
  }

  .toast {
    max-width: none;
    width: 100%;
  }
}

/* VOID Core concept override */
.void-core-body {
  --core-bg: #030305;
  --core-graphite: #0A0A10;
  --core-panel: rgba(12, 11, 18, 0.82);
  --core-panel-strong: rgba(18, 16, 26, 0.92);
  --core-line: rgba(173, 138, 215, 0.16);
  --core-line-hot: rgba(180, 79, 255, 0.42);
  --core-violet: #B44FFF;
  --core-violet-soft: rgba(180, 79, 255, 0.16);
  --core-discord: #5865F2;
  --core-crimson: #D33A55;
  --core-crimson-soft: rgba(211, 58, 85, 0.16);
  --core-text: #E8E2EF;
  --core-muted: #93869F;
  --core-dim: #5B5066;
  --core-radius: 24px;
  --core-rail: 268px;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 52% 42%, rgba(180, 79, 255, 0.12), transparent 30vw),
    radial-gradient(circle at 85% 76%, rgba(211, 58, 85, 0.07), transparent 24vw),
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 42%),
    #000;
}

.void-core-body::before {
  opacity: 0.18;
  background:
    radial-gradient(circle at 50% 50%, rgba(180, 79, 255, 0.2) 0 1px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: 90px 90px, 76px 76px, 76px 76px;
  animation: core-drift 28s linear infinite;
}

.void-core-body::after {
  background:
    radial-gradient(circle at 50% 45%, transparent 0 28vw, rgba(0, 0, 0, 0.52) 58vw),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.86));
}

@keyframes core-drift {
  to { background-position: 90px 90px, 76px 76px, -76px 76px; }
}

.void-core-shell {
  grid-template-columns: var(--core-rail) minmax(0, 1fr);
}

.core-rail {
  width: auto;
  background:
    radial-gradient(circle at 50% 0, rgba(180, 79, 255, 0.12), transparent 16rem),
    linear-gradient(180deg, rgba(11, 10, 16, 0.96), rgba(3, 3, 6, 0.98));
  border-right: 1px solid var(--core-line);
}

.core-rail-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem;
  border-bottom: 1px solid var(--core-line);
}

.core-brand-sigil {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--core-line-hot);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 25%, rgba(180, 79, 255, 0.24), transparent 58%),
    #050508;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: inset 0 0 30px rgba(180, 79, 255, 0.12), 0 0 26px rgba(180, 79, 255, 0.12);
}

.core-brand-copy strong {
  display: block;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.core-brand-copy span,
.core-operator span:last-child {
  display: block;
  margin-top: 0.15rem;
  color: var(--core-muted);
  font-family: var(--void-font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.core-operator {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  padding: 0.92rem 1.05rem;
  border-bottom: 1px solid var(--core-line);
}

.core-mode-nav {
  display: grid;
  gap: 0.44rem;
  padding: 0.9rem;
}

.core-mode-nav .core-nav-item {
  min-height: 48px;
  padding: 0.58rem;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
}

.core-nav-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(180, 79, 255, 0.16);
  border-radius: 12px;
  color: rgba(232, 218, 255, 0.78);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--void-font-mono);
  font-size: 0.58rem;
}

.core-nav-icon.danger {
  border-color: rgba(211, 58, 85, 0.24);
  color: rgba(255, 190, 203, 0.82);
}

.core-mode-nav .core-nav-item.active {
  border-color: var(--core-line-hot);
  background:
    linear-gradient(90deg, rgba(180, 79, 255, 0.16), transparent),
    rgba(255, 255, 255, 0.04);
}

.core-mode-nav .core-nav-item.active .core-nav-icon {
  border-color: rgba(180, 79, 255, 0.42);
  background: rgba(180, 79, 255, 0.16);
  box-shadow: 0 0 22px rgba(180, 79, 255, 0.12);
}

.core-rail-footer {
  margin-top: auto;
}

.core-main {
  min-height: 100vh;
}

.core-topbar {
  min-height: 72px;
  background:
    linear-gradient(180deg, rgba(5, 5, 8, 0.9), rgba(5, 5, 8, 0.68));
  border-bottom: 1px solid var(--core-line);
}

.core-search input {
  background: rgba(0, 0, 0, 0.34);
  border-color: var(--core-line);
}

.core-content {
  min-height: calc(100vh - 72px);
  padding: clamp(0.9rem, 1.4vw, 1.35rem);
}

.core-tab {
  min-height: calc(100vh - 100px);
}

.void-chamber {
  position: relative;
  min-height: calc(100vh - 110px);
  overflow: hidden;
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(180, 79, 255, 0.1), transparent 26rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(3, 3, 6, 0.74);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.62);
}

.void-chamber::before {
  content: '';
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(180, 79, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.void-chamber::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.96%, rgba(180, 79, 255, 0.12), transparent 50.08%),
    linear-gradient(0deg, transparent 49.96%, rgba(180, 79, 255, 0.08), transparent 50.08%);
  opacity: 0.45;
}

.server-uplink-chamber {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(330px, 0.72fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1rem, 3vw, 3rem);
}

.loaded-core-chamber {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 1.2rem;
  padding: clamp(1rem, 2vw, 2rem);
}

.core-orb {
  position: relative;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(180, 79, 255, 0.2), transparent 22%),
    radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 46%),
    rgba(0, 0, 0, 0.08);
  filter: drop-shadow(0 0 36px rgba(180, 79, 255, 0.14));
}

.core-ring {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(180, 79, 255, 0.24);
  border-radius: 50%;
}

.ring-a {
  animation: core-spin 32s linear infinite;
  border-top-color: rgba(255, 255, 255, 0.28);
}

.ring-b {
  inset: 18%;
  transform: rotate(22deg);
  border-color: rgba(88, 101, 242, 0.2);
  animation: core-spin 24s linear reverse infinite;
}

.ring-c {
  inset: 29%;
  border-style: dashed;
  border-color: rgba(180, 79, 255, 0.18);
  animation: core-spin 18s linear infinite;
}

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

.core-eye {
  position: relative;
  z-index: 1;
  width: 34%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--core-line-hot);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(180, 79, 255, 0.34), rgba(0, 0, 0, 0.8) 64%);
  color: #fff;
  font-family: var(--void-font-display);
  font-size: clamp(0.72rem, 1.3vw, 1.1rem);
  letter-spacing: 0.12em;
  box-shadow: inset 0 0 42px rgba(180, 79, 255, 0.14), 0 0 38px rgba(180, 79, 255, 0.16);
}

.core-intro-panel,
.server-uplink-panel,
.core-command-copy,
.core-status-strip,
.system-surface,
.studio-switcher {
  position: relative;
  z-index: 1;
}

.core-intro-panel {
  max-width: 620px;
}

.core-intro-panel h1,
.core-command-copy h1 {
  margin-top: 0.42rem;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: clamp(2.2rem, 4.6vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
}

.core-intro-panel p,
.core-command-copy p,
.surface-header p {
  max-width: 720px;
  margin-top: 0.95rem;
  color: var(--core-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.core-mini-readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.core-mini-readouts span {
  border: 1px solid var(--core-line);
  border-radius: 999px;
  padding: 0.38rem 0.6rem;
  color: var(--core-muted);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--void-font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.server-uplink-panel {
  max-height: calc(100vh - 170px);
  overflow: auto;
  border: 1px solid var(--core-line);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.34);
  padding: 1rem;
}

.compact-head {
  padding: 0 0 0.8rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.core-server-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.72rem;
}

.void-core-body .server-card {
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.78rem;
  padding: 0.78rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.void-core-body .server-card p {
  grid-column: 2 / 4;
  margin-top: -0.35rem;
  font-size: 0.78rem;
}

.void-core-body .server-icon,
.void-core-body .server-icon-placeholder {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

.void-core-body .server-status-badge {
  justify-self: start;
}

.void-core-body .server-open-btn {
  grid-column: 3;
  grid-row: 1;
  width: auto;
  white-space: nowrap;
}

.active-core-wrap {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  min-height: 560px;
}

.core-server-emblem {
  position: absolute;
  z-index: 3;
  width: clamp(82px, 9vw, 118px);
  height: clamp(82px, 9vw, 118px);
  border-radius: 28px;
}

.loaded-core {
  width: min(38vw, 520px);
}

.core-command-copy {
  align-self: end;
}

.system-node-map {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 0.72rem;
  align-self: start;
  min-width: 0;
  max-width: 100%;
}

.system-node {
  min-width: 0;
  min-height: 132px;
  border: 1px solid var(--core-line);
  border-radius: 20px;
  padding: 0.9rem;
  background:
    radial-gradient(circle at 50% 0, rgba(180, 79, 255, 0.12), transparent 68%),
    rgba(255, 255, 255, 0.035);
  color: var(--core-text);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid), box-shadow var(--t-mid), background var(--t-mid);
}

.system-node:hover {
  transform: translateY(-5px);
  border-color: var(--core-line-hot);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48), 0 0 34px rgba(180, 79, 255, 0.12);
}

.system-node span,
.system-node strong {
  display: block;
}

.system-node span {
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.system-node strong {
  margin-top: 0.55rem;
  color: var(--core-muted);
  font-family: var(--void-font-mono);
  font-size: 0.62rem;
  line-height: 1.45;
  text-transform: uppercase;
}

.node-security {
  background:
    radial-gradient(circle at 50% 0, var(--core-crimson-soft), transparent 68%),
    rgba(255, 255, 255, 0.035);
}

.core-status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.core-status-strip div {
  border: 1px solid var(--core-line);
  border-radius: 18px;
  padding: 0.82rem;
  background: rgba(255, 255, 255, 0.035);
}

.core-status-strip span,
.surface-badge {
  display: block;
  color: var(--core-muted);
  font-family: var(--void-font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.core-status-strip strong {
  display: block;
  margin-top: 0.32rem;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.95rem;
}

.danger-text {
  color: rgba(255, 166, 184, 0.9) !important;
}

.system-surface,
.studio-switcher {
  border: 1px solid var(--core-line);
  border-radius: var(--core-radius);
  background:
    radial-gradient(circle at 82% 12%, rgba(180, 79, 255, 0.1), transparent 24rem),
    rgba(8, 8, 13, 0.78);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54);
}

.system-surface {
  min-height: calc(100vh - 110px);
  padding: clamp(1rem, 2vw, 2rem);
}

.surface-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.surface-header h2,
.studio-switcher h2 {
  margin-top: 0.35rem;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: clamp(1.6rem, 3vw, 3.4rem);
  line-height: 1;
}

.surface-badge {
  display: inline-flex;
  width: auto;
  border: 1px solid var(--core-line-hot);
  border-radius: 999px;
  padding: 0.35rem 0.58rem;
  background: rgba(180, 79, 255, 0.08);
  color: rgba(225, 205, 255, 0.78);
}

.danger-badge {
  border-color: rgba(211, 58, 85, 0.35);
  background: var(--core-crimson-soft);
  color: rgba(255, 192, 205, 0.84);
}

.danger-dot::before {
  background: var(--core-crimson);
  box-shadow: 0 0 14px rgba(211, 58, 85, 0.75);
}

.flow-board {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  align-items: center;
  gap: 0.8rem;
  margin-top: clamp(2rem, 8vw, 6rem);
}

.flow-node,
.system-lanes article {
  border: 1px solid var(--core-line);
  border-radius: 20px;
  padding: 1.1rem;
  background: rgba(255, 255, 255, 0.04);
}

.flow-node span,
.system-lanes span {
  display: block;
  color: var(--core-muted);
  font-family: var(--void-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.flow-node strong,
.system-lanes strong {
  display: block;
  margin-top: 0.45rem;
  color: #fff;
  font-family: var(--void-font-display);
}

.flow-link {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--core-line-hot), transparent);
}

.system-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-top: clamp(1.4rem, 5vw, 4rem);
}

.studio-switcher {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
}

.studio-mode-buttons {
  display: flex;
  gap: 0.58rem;
  flex-wrap: wrap;
}

.studio-tab .editor-head,
.studio-tab .editor-controls,
.studio-tab .editor-preview {
  border-color: var(--core-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(8, 8, 13, 0.82);
}

.studio-tab .editor-preview {
  background:
    radial-gradient(circle at 72% 18%, rgba(88, 101, 242, 0.12), transparent 36%),
    #313338;
}

@media (max-width: 1180px) {
  .void-core-shell {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .core-brand-copy,
  .core-operator div,
  .core-nav-item span:not(.core-nav-icon),
  .core-rail-footer {
    display: none;
  }

  .core-rail-brand,
  .core-operator,
  .core-mode-nav .core-nav-item {
    justify-content: center;
  }

  .core-mode-nav .core-nav-item {
    padding: 0.5rem;
  }

  .server-uplink-chamber,
  .loaded-core-chamber {
    grid-template-columns: 1fr;
  }

  .active-core-wrap {
    grid-row: auto;
    min-height: 360px;
  }

  .system-node-map {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 900px) {
  .void-core-shell {
    display: block;
  }

  .core-rail {
    width: min(292px, 86vw);
  }

  .core-brand-copy,
  .core-operator div,
  .core-nav-item span:not(.core-nav-icon),
  .core-rail-footer {
    display: block;
  }

  .server-uplink-chamber,
  .loaded-core-chamber,
  .void-chamber {
    min-height: auto;
  }

  .core-orb {
    width: min(82vw, 420px);
  }

  .loaded-core {
    width: min(78vw, 420px);
  }

  .server-uplink-panel {
    max-height: none;
  }

  .flow-board {
    grid-template-columns: 1fr;
  }

  .flow-link {
    height: 34px;
    width: 1px;
    justify-self: center;
    background: linear-gradient(180deg, transparent, var(--core-line-hot), transparent);
  }
}

@media (max-width: 620px) {
  .void-core-body .server-card {
    grid-template-columns: auto 1fr;
  }

  .void-core-body .server-card p,
  .void-core-body .server-open-btn {
    grid-column: 1 / -1;
  }

  .void-core-body .server-open-btn {
    width: 100%;
  }

  .core-status-strip {
    grid-template-columns: 1fr;
  }

  .studio-switcher,
  .surface-header {
    flex-direction: column;
  }

  .studio-mode-buttons,
  .studio-mode-buttons .btn {
    width: 100%;
  }
}

/* VOID production dashboard mockup */
.void-suite-body {
  --suite-bg: #040406;
  --suite-panel: rgba(12, 11, 15, 0.9);
  --suite-card: rgba(16, 15, 20, 0.82);
  --suite-card-hover: rgba(25, 22, 32, 0.92);
  --suite-border: rgba(220, 210, 255, 0.12);
  --suite-border-strong: rgba(190, 132, 255, 0.34);
  --suite-text: #f4efff;
  --suite-muted: rgba(226, 217, 244, 0.64);
  --suite-dim: rgba(226, 217, 244, 0.42);
  --suite-violet: #b75cff;
  --suite-violet-soft: rgba(183, 92, 255, 0.18);
  --suite-success: #62e6a6;
  --suite-warning: #f4c96b;
  --suite-danger: #ff5d7d;
  --suite-radius: 22px;
  --suite-radius-sm: 14px;
  --suite-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
  --suite-glow: 0 0 42px rgba(183, 92, 255, 0.15);
  --suite-sidebar: 284px;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 80% 12%, rgba(183, 92, 255, 0.16), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(88, 101, 242, 0.07), transparent 25%),
    linear-gradient(135deg, #040406 0%, #08070b 48%, #020203 100%);
  color: var(--suite-text);
  font-family: var(--void-font-body);
}

.void-suite-body::before,
.void-suite-body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.void-suite-body::before {
  background-image:
    linear-gradient(rgba(183, 92, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 92, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), transparent 70%);
  opacity: 0.5;
}

.void-suite-body::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.7)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 45%, rgba(0, 0, 0, 0.42));
}

.void-suite-body * {
  box-sizing: border-box;
}

.void-suite {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--suite-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.suite-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 18px;
  background:
    linear-gradient(180deg, rgba(12, 10, 16, 0.98), rgba(5, 5, 7, 0.97)),
    radial-gradient(circle at top, rgba(183, 92, 255, 0.13), transparent 38%);
  border-right: 1px solid rgba(183, 92, 255, 0.16);
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.42);
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

.sidebar-scrim[hidden] {
  display: none;
}

.suite-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
}

.suite-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--suite-border-strong);
  border-radius: 16px;
  background:
    radial-gradient(circle at 58% 28%, rgba(183, 92, 255, 0.34), transparent 30%),
    linear-gradient(145deg, rgba(22, 17, 31, 0.96), rgba(6, 5, 8, 0.96));
  color: #f9f2ff;
  font-family: var(--void-font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: var(--suite-glow);
}

.suite-brand strong {
  display: block;
  font-family: var(--void-font-display);
  font-size: 17px;
  letter-spacing: 0.16em;
}

.suite-brand span,
.sidebar-user-role,
.plan-chip span,
.eyebrow,
.hud {
  color: var(--suite-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.suite-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--suite-radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.sidebar-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(183, 92, 255, 0.42), rgba(88, 101, 242, 0.16));
  object-fit: cover;
}

.sidebar-username {
  display: block;
  max-width: 170px;
  overflow: hidden;
  color: var(--suite-text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-nav {
  display: grid;
  gap: 7px;
  overflow-y: auto;
  padding-right: 4px;
}

.suite-nav::-webkit-scrollbar,
.suite-content::-webkit-scrollbar {
  width: 8px;
}

.suite-nav::-webkit-scrollbar-thumb,
.suite-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(183, 92, 255, 0.24);
}

.dash-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: rgba(244, 239, 255, 0.68);
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

/* Nav label: title + description stacked */
.dash-nav-item .nav-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  width: auto !important;
  color: inherit !important;
  font-family: inherit !important;
}
.dash-nav-item .nav-label strong {
  display: block;
  font: 700 13.5px/1 var(--void-font-body);
  letter-spacing: 0.02em;
  color: rgba(244,239,255,0.88);
}
.dash-nav-item .nav-label em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(148,150,180,0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

/* Home item: nav-pip dot */
.dash-nav-item .nav-pip {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(167,139,250,0.55);
  box-shadow: 0 0 8px rgba(167,139,250,0.40);
  margin-left: 13px;
  margin-right: 1px;
}

.dash-nav-item:hover {
  transform: translateX(3px);
  border-color: rgba(var(--nav-c, 183,92,255), 0.18);
  background: rgba(var(--nav-c, 183,92,255), 0.07);
  color: var(--nav-cl, #fff);
}
.dash-nav-item:hover .nav-label strong { color: var(--nav-cl, #fff); }
.dash-nav-item:hover .nav-label em { color: rgba(200,200,220,0.60); }

.dash-nav-item.active {
  border-color: rgba(var(--nav-c, 139,92,246), 0.28);
  background:
    linear-gradient(90deg, rgba(var(--nav-c, 139,92,246), 0.18), rgba(var(--nav-c, 139,92,246), 0.04) 65%, transparent),
    rgba(255,255,255,0.025);
  box-shadow: inset 3px 0 0 rgba(var(--nav-c, 139,92,246), 0.85);
}
.dash-nav-item.active .nav-label strong { color: var(--nav-cl, #fff); }
.dash-nav-item.active .nav-label em { color: rgba(200,200,220,0.55); }

/* ── PER-MODULE NAV COLOR TOKENS ── */
/* --nav-c  : raw R,G,B for rgba() usage             */
/* --nav-cl : full bright color for text/active       */
.void-nav-list .dash-nav-item[data-view="studio"]     { --nav-c:139,54,255;   --nav-cl:#c4b5fd; }
.void-nav-list .dash-nav-item[data-view="commands"]   { --nav-c:59,130,246;   --nav-cl:#93c5fd; }
.void-nav-list .dash-nav-item[data-view="moderation"] { --nav-c:245,158,11;   --nav-cl:#fde68a; }
.void-nav-list .dash-nav-item[data-view="support"]    { --nav-c:6,182,212;    --nav-cl:#67e8f9; }
.void-nav-list .dash-nav-item[data-view="engagement"] { --nav-c:251,191,36;   --nav-cl:#fef08a; }
.void-nav-list .dash-nav-item[data-view="members"]    { --nav-c:34,197,94;    --nav-cl:#86efac; }
.void-nav-list .dash-nav-item[data-view="settings"]   { --nav-c:148,163,184;  --nav-cl:#e2e8f0; }

/* Colored text for module nav items (not Home) */
.void-nav-list .dash-nav-item[data-view]:not([data-view="overview"]) {
  color: rgba(var(--nav-c, 206,207,209), 0.70);
}

/* Hover: module-colored left bar + bg tint */
.void-nav-list .dash-nav-item[data-view]:not([data-view="overview"]):hover {
  transform: translateX(3px);
  background: rgba(var(--nav-c, 206,207,209), 0.09);
  border-color: rgba(var(--nav-c, 206,207,209), 0.22);
  color: var(--nav-cl, #fff);
  box-shadow: inset 3px 0 0 rgba(var(--nav-c, 206,207,209), 0.55);
}

/* Active: strong left bar + gradient background in module color */
.void-nav-list .dash-nav-item[data-view]:not([data-view="overview"]).active {
  background:
    linear-gradient(90deg, rgba(var(--nav-c, 139,54,255), 0.18), rgba(var(--nav-c, 139,54,255), 0.04) 65%, transparent),
    rgba(255,255,255,0.025);
  border-color: rgba(var(--nav-c, 139,54,255), 0.28);
  color: var(--nav-cl, #fff);
  box-shadow:
    inset 3px 0 0 rgba(var(--nav-c, 139,54,255), 0.85),
    0 0 18px rgba(var(--nav-c, 139,54,255), 0.07);
}

.suite-sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.plan-chip {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(183, 92, 255, 0.2);
  border-radius: var(--suite-radius-sm);
  background: rgba(183, 92, 255, 0.07);
}

.plan-chip strong {
  color: #fff;
  letter-spacing: 0.04em;
}

.suite-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.suite-topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(420px, 0.95fr);
  gap: 22px;
  align-items: center;
  min-height: 104px;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(183, 92, 255, 0.14);
  background: rgba(5, 5, 8, 0.9);
  backdrop-filter: blur(14px);
}

.suite-page-title h1 {
  margin: 4px 0 5px;
  font-family: var(--void-font-display);
  font-size: clamp(1.7rem, 2vw, 2.5rem);
  letter-spacing: 0.04em;
}

.suite-page-title p {
  max-width: 760px;
  margin: 0;
  color: var(--suite-muted);
}

.suite-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) minmax(92px, auto) minmax(96px, 0.55fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.global-search {
  position: relative;
  display: grid;
  gap: 5px;
}

.global-search span {
  color: var(--suite-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.void-suite-body input,
.void-suite-body select,
.void-suite-body textarea {
  width: 100%;
  border: 1px solid rgba(183, 92, 255, 0.18);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--suite-text);
  outline: none;
  padding: 11px 12px;
  font: 700 14px var(--void-font-body);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.void-suite-body textarea {
  min-height: 96px;
  resize: vertical;
}

.void-suite-body input:focus,
.void-suite-body select:focus,
.void-suite-body textarea:focus {
  border-color: rgba(183, 92, 255, 0.58);
  box-shadow: 0 0 0 3px rgba(183, 92, 255, 0.11);
}

.server-select {
  align-self: end;
}

.hud {
  justify-self: end;
  align-self: end;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-trigger {
  align-self: end;
  white-space: nowrap;
}

.suite-content {
  display: block;
  min-width: 0;
  padding: 28px;
}

.search-empty-state {
  display: grid;
  gap: 5px;
  justify-items: start;
  padding: 18px;
  border: 1px dashed rgba(183, 92, 255, 0.26);
  border-radius: var(--suite-radius-sm);
  background: rgba(255, 255, 255, 0.035);
  color: var(--suite-muted);
}

.search-empty-state strong {
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-empty-state span {
  font-size: 0.92rem;
}

.dash-view {
  display: none;
  gap: 18px;
  animation: suiteViewIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dash-view.active {
  display: grid;
}

@keyframes suiteViewIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suite-hero,
.suite-card,
.stat-card,
.module-card,
.premium-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius);
  background:
    linear-gradient(145deg, rgba(26, 20, 36, 0.88), rgba(8, 7, 11, 0.9)),
    rgba(255, 255, 255, 0.03);
  box-shadow: var(--suite-shadow);
}

.suite-hero::before,
.suite-card::before,
.stat-card::before,
.module-card::before,
.premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(183, 92, 255, 0.14), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055), transparent 22%, transparent);
  pointer-events: none;
}

.suite-hero {
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
}

.command-hero-v2 {
  isolation: isolate;
  min-height: 360px;
  background:
    radial-gradient(circle at 78% 48%, rgba(183, 92, 255, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), transparent 24%),
    linear-gradient(145deg, rgba(24, 22, 30, 0.94), rgba(5, 5, 8, 0.96));
}

.command-hero-v2::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: calc(var(--suite-radius) - 6px);
  pointer-events: none;
}

.suite-hero h2,
.module-page-head h2 {
  margin: 8px 0 10px;
  font-family: var(--void-font-display);
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.suite-hero p,
.module-page-head p,
.suite-card p,
.module-card p,
.stat-card p {
  color: var(--suite-muted);
}

.hero-actions,
.card-actions,
.filter-row,
.table-tools,
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.hero-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-signal-row span {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--suite-muted);
  font-family: var(--void-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.void-suite-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  border: 1px solid rgba(183, 92, 255, 0.24);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--suite-text);
  cursor: pointer;
  font: 800 12px/1 var(--void-font-body);
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.void-suite-body .btn:hover,
.void-suite-body .btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(183, 92, 255, 0.54);
  background: rgba(183, 92, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(183, 92, 255, 0.09);
}

.void-suite-body .btn:active {
  transform: translateY(0);
}

.void-suite-body .btn-primary {
  border-color: rgba(183, 92, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(183, 92, 255, 0.9), rgba(102, 69, 217, 0.72)),
    #6d35b4;
  color: #fff;
  box-shadow: 0 12px 36px rgba(183, 92, 255, 0.24);
}

.void-suite-body .btn-secondary {
  background: rgba(0, 0, 0, 0.24);
}

.void-suite-body .btn-ghost {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--suite-muted);
}

.void-suite-body .btn-danger {
  border-color: rgba(255, 93, 125, 0.35);
  background: rgba(255, 93, 125, 0.12);
  color: #ffd5de;
}

.void-figure-panel {
  position: relative;
  min-height: 230px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(183, 92, 255, 0.14);
  border-radius: 32px;
  background:
    radial-gradient(circle at center, rgba(183, 92, 255, 0.22), transparent 38%),
    radial-gradient(circle at 50% 50%, transparent 0 32%, rgba(183, 92, 255, 0.08) 33% 34%, transparent 35%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.3));
}

.void-figure-orb {
  width: 160px;
  height: 160px;
  border: 1px solid rgba(183, 92, 255, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.25), transparent 8%),
    radial-gradient(circle at center, rgba(183, 92, 255, 0.26), transparent 38%),
    #050408;
  box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.8), 0 0 80px rgba(183, 92, 255, 0.18);
}

.void-figure-panel::before,
.void-figure-panel::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(183, 92, 255, 0.16);
  border-radius: 50%;
}

.void-figure-panel::before {
  width: 76%;
  height: 76%;
}

.void-figure-panel::after {
  width: 46%;
  height: 46%;
  border-style: dashed;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.stat-card {
  padding: 18px;
  min-height: 132px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(183, 92, 255, 0.32);
  background:
    linear-gradient(145deg, rgba(30, 25, 41, 0.92), rgba(9, 8, 12, 0.92)),
    rgba(255, 255, 255, 0.04);
}

.stat-card strong {
  display: block;
  margin: 10px 0 4px;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: clamp(1.45rem, 2vw, 2.1rem);
}

.stat-card span {
  color: var(--suite-dim);
  font-family: var(--void-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-card em {
  color: var(--suite-muted);
  font-style: normal;
}

.stat-card p {
  margin: 0;
  font-size: 13px;
}

.stat-trend {
  color: var(--suite-success);
  font-family: var(--void-font-mono);
  font-size: 11px;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.65fr);
  gap: 18px;
}

.operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.58fr);
  gap: 18px;
}

.suite-card,
.module-card,
.premium-card {
  padding: 20px;
}

.card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.card-head h3,
.module-card h3,
.premium-card h3 {
  margin: 0;
  font-family: var(--void-font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.quick-action-list,
.activity-feed,
.module-status-grid,
.shortcut-grid,
.preset-list,
.toggle-grid,
.settings-grid,
.integration-grid,
.billing-grid,
.ops-queue,
.risk-readouts {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.risk-meter {
  position: relative;
  z-index: 1;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
}

.risk-meter span {
  display: block;
  width: var(--risk);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--suite-success), var(--suite-warning), var(--suite-danger));
  box-shadow: 0 0 28px rgba(255, 93, 125, 0.18);
}

.risk-readouts {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
}

.risk-readouts article,
.ops-queue article {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.risk-readouts strong {
  display: block;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 1.35rem;
}

.risk-readouts span,
.ops-queue em {
  color: var(--suite-muted);
  font-style: normal;
}

.ops-queue article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.ops-queue strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 7px;
  font: 800 10px/1 var(--void-font-mono);
  text-transform: uppercase;
}

.queue-priority.high {
  border-color: rgba(255, 93, 125, 0.38);
  color: #ffd5de;
}

.queue-priority.mid {
  border-color: rgba(244, 201, 107, 0.34);
  color: var(--suite-warning);
}

.queue-priority.low {
  color: var(--suite-muted);
}

.quick-action-list button,
.punish-row button,
.preset-list button,
.module-status-grid article {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--suite-text);
  cursor: pointer;
  font: 800 12px/1.2 var(--void-font-body);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.quick-action-list button {
  display: grid;
  gap: 4px;
  min-height: 70px;
  text-align: left;
}

.quick-action-list button strong,
.quick-action-list button span {
  display: block;
}

.quick-action-list button span {
  color: var(--suite-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.quick-action-list button:hover,
.punish-row button:hover,
.preset-list button:hover {
  transform: translateY(-1px);
  border-color: rgba(183, 92, 255, 0.42);
  background: rgba(183, 92, 255, 0.1);
}

.punish-row button,
.quick-action-list button {
  text-align: center;
}

.punish-row button.danger {
  border-color: rgba(255, 93, 125, 0.34);
  color: #ffd5de;
}

.preset-list button span {
  display: block;
  margin-top: 4px;
  color: var(--suite-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.quick-action {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.icon-tile {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(183, 92, 255, 0.22);
  border-radius: 13px;
  background: rgba(183, 92, 255, 0.09);
  color: #eadcff;
  font-family: var(--void-font-mono);
}

.quick-action strong,
.activity-feed strong,
.module-card strong {
  display: block;
}

.quick-action small,
.activity-feed small,
.module-card small,
.void-table small {
  color: var(--suite-muted);
}

.activity-feed article {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.activity-feed em {
  color: var(--suite-muted);
  font-style: normal;
  white-space: nowrap;
}

.activity-feed article:last-child {
  border-bottom: 0;
}

.pulse-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--suite-violet);
  box-shadow: 0 0 20px rgba(183, 92, 255, 0.8);
}

.pulse-dot.safe {
  background: var(--suite-success);
  box-shadow: 0 0 18px rgba(98, 230, 166, 0.42);
}

.pulse-dot.warn {
  background: var(--suite-warning);
  box-shadow: 0 0 18px rgba(244, 201, 107, 0.36);
}

.pulse-dot.danger {
  background: var(--suite-danger);
  box-shadow: 0 0 18px rgba(255, 93, 125, 0.38);
}

.module-status-grid,
.shortcut-grid,
.integration-grid,
.billing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-status-grid article {
  position: relative;
  min-height: 128px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.module-status-grid article::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(183, 92, 255, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(circle, rgba(183, 92, 255, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.035);
}

.module-status-grid article strong {
  margin-top: 4px;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.module-status-grid article p {
  max-width: calc(100% - 58px);
  margin: 0;
  color: var(--suite-muted);
  font-size: 13px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

.module-card {
  display: grid;
  gap: 12px;
  min-height: 190px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.module-card:hover {
  transform: translateY(-3px);
  border-color: rgba(183, 92, 255, 0.34);
  background: var(--suite-card-hover);
}

.module-card.is-disabled {
  opacity: 0.66;
}

.module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.status,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 5px 8px;
  font: 800 10px/1 var(--void-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status.ready,
.badge.success {
  border-color: rgba(98, 230, 166, 0.28);
  background: rgba(98, 230, 166, 0.1);
  color: var(--suite-success);
}

.status.configure,
.badge.warning {
  border-color: rgba(244, 201, 107, 0.3);
  background: rgba(244, 201, 107, 0.1);
  color: var(--suite-warning);
}

.status.advanced {
  border-color: rgba(183, 92, 255, 0.36);
  background: rgba(183, 92, 255, 0.1);
  color: #e5c8ff;
}

.status.soon,
.badge.muted {
  color: var(--suite-dim);
}

.module-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 26px;
  border: 1px solid var(--suite-border);
  border-radius: var(--suite-radius);
  background:
    radial-gradient(circle at 78% 16%, rgba(183, 92, 255, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(22, 17, 31, 0.78), rgba(8, 7, 11, 0.86));
}

.module-page-head .btn {
  min-width: 150px;
}

.module-page-head h2 {
  font-size: clamp(1.8rem, 3vw, 3.5rem);
}

.module-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 18px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid.two,
.settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.void-suite-body label {
  color: var(--suite-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.punish-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.preset-list article,
.toggle-card,
.settings-card,
.integration-card,
.premium-card,
.shortcut-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  padding: 14px;
}

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

.toggle-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.toggle-card:hover {
  transform: translateY(-2px);
  border-color: rgba(183, 92, 255, 0.24);
  background: rgba(255, 255, 255, 0.055);
}

.toggle-card h4,
.settings-card h4,
.integration-card h4,
.shortcut-card h4 {
  margin: 0 0 4px;
  color: #fff;
}

.toggle-card strong,
.settings-card strong,
.integration-card strong,
.shortcut-card strong,
.preset-list strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
}

.toggle-card p,
.settings-card p,
.integration-card p,
.shortcut-card p {
  margin: 0;
  color: var(--suite-muted);
  font-size: 13px;
}

.switch {
  position: relative;
  width: 48px;
  height: 28px;
  display: inline-flex;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  transition: transform 160ms ease, background 160ms ease;
}

.switch input:checked + span {
  border-color: rgba(183, 92, 255, 0.58);
  background: rgba(183, 92, 255, 0.24);
}

.switch input:checked + span::after {
  transform: translateX(20px);
  background: #fff;
  box-shadow: 0 0 16px rgba(183, 92, 255, 0.48);
}

.slider-list {
  display: grid;
  gap: 16px;
}

.range-value {
  float: right;
  min-width: 32px;
  border: 1px solid rgba(183, 92, 255, 0.18);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(183, 92, 255, 0.08);
  color: #fff;
  font-family: var(--void-font-mono);
  font-size: 11px;
  text-align: center;
}

.slider-list input[type="range"] {
  appearance: none;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(183, 92, 255, 0.92), rgba(255, 255, 255, 0.14));
  accent-color: var(--suite-violet);
}

.slider-list input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: var(--suite-violet);
  box-shadow: 0 0 18px rgba(183, 92, 255, 0.48);
}

.slider-list input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: var(--suite-violet);
  box-shadow: 0 0 18px rgba(183, 92, 255, 0.48);
}

.advanced-details {
  border: 1px solid rgba(183, 92, 255, 0.14);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.advanced-details summary {
  cursor: pointer;
  color: #fff;
  font-weight: 800;
}

.void-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
}

.void-table th,
.void-table td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--suite-muted);
  text-align: left;
}

.void-table th {
  color: var(--suite-dim);
  font: 800 11px var(--void-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.void-table tr:hover td {
  background: rgba(183, 92, 255, 0.045);
  color: var(--suite-text);
}

.void-table tr:last-child td {
  border-bottom: 0;
}

.discord-mock {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: #313338;
  color: #dbdee1;
  font-family: "Segoe UI", sans-serif;
}

.discord-mock-header {
  color: #fff;
  font-weight: 800;
}

.discord-embed-preview {
  border-left: 4px solid var(--suite-violet);
  border-radius: 4px;
  padding: 10px;
  background: #2b2d31;
}

.role-pill-list,
.button-role-list,
.segment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-pill,
.segment {
  border: 1px solid rgba(183, 92, 255, 0.2);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(183, 92, 255, 0.07);
  color: #eadcff;
  font-weight: 800;
}

.command-builder {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) 32px minmax(0, 0.55fr) 32px minmax(0, 0.55fr);
  gap: 10px;
  align-items: center;
}

.flow-node {
  padding: 16px;
  border: 1px solid rgba(183, 92, 255, 0.22);
  border-radius: 16px;
  background: rgba(183, 92, 255, 0.07);
}

.flow-link {
  height: 1px;
  background: linear-gradient(90deg, rgba(183, 92, 255, 0), rgba(183, 92, 255, 0.8), rgba(183, 92, 255, 0));
}

.chart-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 8px;
  min-height: 210px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
}

.chart-bars span {
  display: block;
  min-height: 18px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, rgba(183, 92, 255, 0.9), rgba(88, 101, 242, 0.28));
  box-shadow: 0 -10px 28px rgba(183, 92, 255, 0.13);
}

.line-chart {
  min-height: 220px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(183, 92, 255, 0.16), transparent 64%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: auto, 100% 25%, 12.5% 100%;
  clip-path: polygon(0 68%, 10% 54%, 20% 60%, 32% 40%, 44% 48%, 55% 30%, 66% 36%, 78% 20%, 88% 28%, 100% 12%, 100% 100%, 0 100%);
}

.segmented {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
}

.segmented button {
  border: 0;
  border-radius: 999px;
  padding: 8px 11px;
  background: transparent;
  color: var(--suite-muted);
  cursor: pointer;
  font: 800 11px var(--void-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.segmented button.active {
  background: rgba(183, 92, 255, 0.18);
  color: #fff;
}

.ticket-metric,
.metric-tile {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.ticket-metric strong,
.metric-tile strong {
  display: block;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 1.5rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.suite-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
}

.suite-modal.is-open {
  display: flex;
}

.suite-modal-card {
  position: relative;
  width: min(560px, 100%);
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid rgba(183, 92, 255, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(183, 92, 255, 0.16), transparent 36%),
    #0b0811;
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.74);
}

.suite-modal-card > h3 {
  margin: -6px 0 0;
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}

.suite-modal-card > label,
.suite-modal-card .advanced-details label {
  display: grid;
  gap: 7px;
}

.command-palette-card {
  width: min(680px, 100%);
}

.palette-results {
  display: grid;
  gap: 8px;
  max-height: min(430px, 54vh);
  overflow: auto;
  padding-right: 2px;
}

.palette-result,
.palette-empty {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--suite-text);
  text-align: left;
}

.palette-result {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.palette-result:hover,
.palette-result:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(183, 92, 255, 0.38);
  background: rgba(183, 92, 255, 0.1);
}

.palette-result strong,
.palette-result span {
  display: block;
}

.palette-result strong {
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.palette-result span,
.palette-empty {
  margin-top: 4px;
  color: var(--suite-muted);
}

.suite-modal-head,
.suite-modal-body {
  padding: 20px;
}

.suite-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.suite-modal-head h3 {
  margin: 0;
  font-family: var(--void-font-display);
}

.modal-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.045);
  color: var(--suite-muted);
  cursor: pointer;
  font-size: 22px;
}

.modal-x:hover,
.modal-x:focus-visible {
  color: #fff;
  background: rgba(183, 92, 255, 0.16);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.toast-container {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
}

.void-suite-body .toast {
  transform: translateY(10px);
  min-width: 250px;
  border: 1px solid rgba(183, 92, 255, 0.26);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(13, 10, 18, 0.96);
  color: #fff;
  opacity: 0;
  box-shadow: var(--suite-shadow);
  transition: opacity 160ms ease, transform 160ms ease;
}

.void-suite-body .toast.show {
  transform: translateY(0);
  opacity: 1;
}

.void-suite-body .toast.error {
  border-color: rgba(255, 93, 125, 0.45);
}

.legacy-hooks {
  display: none !important;
}

@media (max-width: 1180px) {
  .void-suite {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .suite-sidebar {
    padding: 18px 12px;
  }

  .suite-brand div:not(.suite-logo),
  .suite-user div,
  .suite-sidebar-footer,
  .suite-brand span,
  .suite-brand strong {
    display: none;
  }

  .dash-nav-item {
    justify-content: center;
    padding: 12px 8px;
    font-size: 0;
  }

  .dash-nav-item span {
    width: auto;
    font-size: 11px;
  }

  .suite-topbar {
    grid-template-columns: 1fr;
  }

  .suite-command {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 210px) minmax(88px, auto) minmax(90px, 0.5fr);
  }

  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .void-suite {
    display: block;
  }

  .suite-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(320px, 86vw);
    transform: translateX(-104%);
    transition: transform 180ms ease;
  }

  .suite-sidebar.open {
    transform: translateX(0);
  }

  .suite-brand div:not(.suite-logo),
  .suite-user div,
  .suite-sidebar-footer,
  .suite-brand span,
  .suite-brand strong {
    display: block;
  }

  .dash-nav-item {
    justify-content: flex-start;
    font-size: 14px;
  }

  .sidebar-toggle {
    display: inline-flex !important;
    width: auto;
  }

  .suite-topbar {
    position: relative;
    min-height: auto;
    padding: 16px;
  }

  .suite-page-title p {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .suite-command,
  .suite-hero,
  .overview-grid,
  .operations-grid,
  .module-layout,
  .module-page-head,
  .command-builder {
    grid-template-columns: 1fr;
  }

  .suite-content {
    padding: 16px;
  }

  .suite-hero {
    min-height: auto;
    padding: 22px;
  }

  .void-figure-panel {
    min-height: 180px;
  }

  .stat-grid,
  .module-status-grid,
  .risk-readouts,
  .shortcut-grid,
  .toggle-grid,
  .form-grid.two,
  .settings-grid,
  .integration-grid,
  .billing-grid,
  .metric-grid,
  .punish-row {
    grid-template-columns: 1fr;
  }

  .hud {
    justify-self: start;
  }

  .command-palette-trigger {
    justify-self: start;
  }

  .void-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .module-status-grid article p {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .suite-page-title h1 {
    font-size: 1.55rem;
  }

  .suite-hero h2,
  .module-page-head h2 {
    font-size: 1.82rem;
    line-height: 1.02;
  }

  .suite-command {
    gap: 8px;
  }

  .hero-signal-row span {
    width: 100%;
    text-align: center;
  }

  .activity-feed article,
  .ops-queue article {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .activity-feed em,
  .ops-queue em {
    grid-column: 2;
  }

  .hero-actions,
  .card-actions,
  .filter-row,
  .table-tools,
  .modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .void-suite-body .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .void-suite-body *,
  .void-suite-body *::before,
  .void-suite-body *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* VOID IA shell v2 */
.void-ia-body {
  --void-bg: #07070A;
  --void-surface-1: #0F1017;
  --void-surface-2: #151726;
  --void-surface-3: #1B1E31;
  --void-border: #2A2E47;
  --void-text: #F5F7FF;
  --void-muted: #A7AECF;
  --void-faint: #7C84A8;
  --void-primary: #8B5CF6;
  --void-primary-bright: #A78BFA;
  --void-glow: rgba(139, 92, 246, 0.18);
  --void-success: #3DDC97;
  --void-warning: #F59E0B;
  --void-danger: #F43F5E;
  --void-radius: 18px;
  --void-radius-sm: 12px;
  --void-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --void-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --void-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% 8%, rgba(139, 92, 246, 0.16), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 22rem),
    var(--void-bg);
  color: var(--void-text);
  font-family: var(--void-font-body);
}

.void-ia-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 18%, #000, transparent 72%);
  opacity: 0.32;
}

.void-ia-body * {
  box-sizing: border-box;
}

.void-shell {
  position: relative;
  z-index: auto;
  min-height: 100vh;
}

.void-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: min(300px, 86vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-right: 1px solid rgba(139, 92, 246, 0.18);
  background:
    radial-gradient(ellipse at 60% 0%, rgba(139, 92, 246, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(88, 130, 255, 0.10) 0%, transparent 50%),
    rgba(8, 8, 14, 0.99);
  box-shadow:
    1px 0 0 rgba(139, 92, 246, 0.12),
    24px 0 80px rgba(0, 0, 0, 0.60),
    inset -1px 0 30px rgba(139, 92, 246, 0.04);
  backdrop-filter: blur(20px);
  transform: translateX(-104%);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.void-nav.open {
  transform: translateX(0);
}

.void-brand-block,
.void-operator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.void-brand-block {
  position: relative;
}

.nav-close {
  margin-left: auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--void-muted);
  cursor: pointer;
  font-size: 1.4rem;
}

.void-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 15px;
  background:
    radial-gradient(circle at 55% 20%, rgba(167, 139, 250, 0.25), transparent 42%),
    var(--void-surface-2);
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.88rem;
  font-weight: 900;
  box-shadow: 0 0 32px var(--void-glow);
}

.void-brand-block strong {
  display: block;
  font-family: var(--void-font-display);
  letter-spacing: 0.08em;
}

.void-brand-block span,
.sidebar-user-role,
.void-plan span,
.eyebrow,
.hud {
  color: var(--void-faint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.void-operator {
  padding: 12px;
  border: 1px solid var(--void-border);
  border-radius: var(--void-radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.void-operator .sidebar-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--void-surface-3);
}

.void-nav-list {
  display: grid;
  gap: 7px;
  overflow-y: auto;
  padding-right: 4px;
}

.void-ia-body .dash-nav-item {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 11px 12px;
  background: transparent;
  color: var(--void-muted);
  cursor: pointer;
  font: 700 0.9rem/1 var(--void-font-body);
  text-align: left;
}

.void-ia-body .dash-nav-item span {
  width: 26px;
  color: var(--void-faint);
  font-family: var(--void-font-mono);
  font-size: 0.7rem;
}

.void-ia-body .dash-nav-item:hover,
.void-ia-body .dash-nav-item.active {
  border-color: rgba(139, 92, 246, 0.34);
  background: rgba(139, 92, 246, 0.1);
  color: #fff;
}

.void-ia-body .dash-nav-item:focus-visible,
.hub-tabs button:focus-visible,
.hub-map button:focus-visible,
.action-ribbon button:focus-visible,
.nav-close:focus-visible {
  outline: 0;
  border-color: var(--void-primary-bright);
  box-shadow: 0 0 0 3px var(--void-glow);
}

.void-nav-footer {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 92, 246, 0.12);
}

/* Override generic btn styles inside nav footer */
.void-nav-footer .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, color 0.16s;
  cursor: pointer;
}

/* NEED HELP — violet ghost */
.void-nav-footer .btn:not(.logout-btn) {
  background: rgba(139, 92, 246, 0.10) !important;
  border: 1px solid rgba(139, 92, 246, 0.32) !important;
  color: rgba(196, 181, 253, 0.92) !important;
  box-shadow: none !important;
}
.void-nav-footer .btn:not(.logout-btn):hover {
  background: rgba(139, 92, 246, 0.20) !important;
  border-color: rgba(139, 92, 246, 0.58) !important;
  color: #e9d5ff !important;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.22) !important;
}

/* LOGOUT — muted danger */
.void-nav-footer .logout-btn {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.26) !important;
  color: rgba(252, 165, 165, 0.80) !important;
  box-shadow: none !important;
}
.void-nav-footer .logout-btn:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.46) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.18) !important;
}

.void-plan {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: var(--void-radius-sm);
  background: rgba(139, 92, 246, 0.08);
}

.void-main {
  min-width: 0;
}

.void-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--void-border);
  background: rgba(7, 7, 10, 0.9);
  backdrop-filter: blur(16px);
}

.void-title {
  min-width: 0;
}

.void-title h1 {
  margin: 4px 0;
  font-family: var(--void-font-display);
  font-size: 1.65rem;
  letter-spacing: 0.01em;
}

.void-title p {
  margin: 0;
  color: var(--void-muted);
  line-height: 1.4;
}

.void-command-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.void-ia-body input,
.void-ia-body select,
.void-ia-body textarea {
  width: 100%;
  border: 1px solid var(--void-border);
  border-radius: 13px;
  padding: 12px;
  background: rgba(15, 16, 23, 0.86);
  color: var(--void-text);
  font: 800 0.9rem var(--void-font-body);
}

.void-ia-body input:focus,
.void-ia-body select:focus,
.void-ia-body textarea:focus {
  outline: 0;
  border-color: var(--void-primary-bright);
  box-shadow: 0 0 0 3px var(--void-glow);
}

.void-ia-body .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 13px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--void-text);
  cursor: pointer;
  font: 800 0.76rem/1 var(--void-font-body);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.void-ia-body .btn-primary {
  border-color: var(--void-primary);
  background: linear-gradient(135deg, var(--void-primary), #6D45D8);
  box-shadow: 0 16px 42px rgba(139, 92, 246, 0.22);
}

.void-content {
  display: grid;
  gap: 16px;
  padding: 14px;
}

.dash-view {
  display: none;
  gap: 16px;
}

.dash-view.active {
  display: grid;
}

.void-hero,
.void-panel,
.hub-head,
.tool-card,
.chart-panel,
.security-grid article,
.studio-preview,
.void-stat-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--void-border);
  border-radius: var(--void-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 38%),
    var(--void-surface-1);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
}

.void-hero {
  display: grid;
  gap: 22px;
  padding: 22px;
  min-height: 520px;
}

.void-hero h2,
.hub-head h2 {
  margin: 8px 0 10px;
  font-family: var(--void-font-display);
  font-size: clamp(2rem, 14vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.void-hero p,
.hub-head p,
.void-panel p,
.tool-card strong,
.chart-panel p {
  color: var(--void-muted);
  line-height: 1.5;
}

.hero-actions,
.void-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hero-actions .btn {
  flex: 1 1 150px;
}

.void-signal-row span,
.hub-tabs button,
.queue-priority {
  border: 1px solid var(--void-border);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--void-muted);
  font-family: var(--void-font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.void-core-orb {
  position: relative;
  min-height: 230px;
  display: grid;
  place-items: center;
}

.void-core-orb span {
  position: absolute;
  width: min(70vw, 260px);
  aspect-ratio: 1;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(139, 92, 246, 0.28), transparent 34%),
    radial-gradient(circle, transparent 0 48%, rgba(139, 92, 246, 0.08) 49% 50%, transparent 51%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), 0 0 60px var(--void-glow);
}

.void-core-orb strong {
  z-index: 1;
  font-family: var(--void-font-display);
  letter-spacing: 0.1em;
}

.void-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.void-stat-grid article,
.void-panel,
.hub-head,
.tool-card,
.chart-panel,
.studio-preview {
  padding: 16px;
}

.void-stat-grid span,
.tool-card span,
.chart-panel h3,
.void-panel h3 {
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.void-stat-grid strong {
  display: block;
  margin-top: 8px;
  font-family: var(--void-font-display);
  font-size: 1.55rem;
}

.void-stat-grid em {
  color: var(--void-muted);
  font-style: normal;
}

.void-overview-grid,
.hub-grid,
.security-grid,
.analytics-layout,
.studio-board {
  display: grid;
  gap: 12px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hub-map,
.ops-queue {
  display: grid;
  gap: 10px;
}

.hub-map button,
.ops-queue article,
.action-ribbon button {
  border: 1px solid var(--void-border);
  border-radius: 14px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--void-text);
  text-align: left;
}

.hub-map strong,
.hub-map span,
.ops-queue strong,
.ops-queue em {
  display: block;
}

.hub-map span,
.ops-queue em {
  margin-top: 4px;
  color: var(--void-muted);
  font-style: normal;
}

.ops-queue article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
}

.ops-queue em {
  grid-column: 2;
}

.queue-priority.high {
  border-color: rgba(244, 63, 94, 0.35);
  color: var(--void-danger);
}

.queue-priority.mid {
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--void-warning);
}

.hub-head {
  display: grid;
  gap: 4px;
}

.hub-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.hub-tabs::-webkit-scrollbar,
.action-ribbon::-webkit-scrollbar,
.void-nav-list::-webkit-scrollbar {
  display: none;
}

.hub-tabs button {
  flex: 0 0 auto;
  cursor: pointer;
  white-space: nowrap;
}

.hub-tabs button.active {
  border-color: var(--void-primary);
  background: rgba(139, 92, 246, 0.14);
  color: #fff;
}

.tool-card {
  min-height: 132px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.tool-card.large {
  min-height: 170px;
}

.tool-card::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.08);
}

.action-ribbon {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.action-ribbon button {
  min-width: 92px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.action-ribbon .danger {
  border-color: rgba(244, 63, 94, 0.38);
  color: #ffd5de;
}

.security-grid article {
  padding: 16px;
}

.meter {
  display: block;
  height: 10px;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--void-surface-3);
}

.meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--void-success), var(--void-warning), var(--void-danger));
}

.studio-preview {
  min-height: 260px;
  display: grid;
  align-content: end;
  background:
    radial-gradient(circle at 70% 24%, rgba(139, 92, 246, 0.18), transparent 36%),
    var(--void-surface-1);
}

.flow-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 13px;
  border: 1px solid var(--void-border);
  border-radius: var(--void-radius);
  background: var(--void-surface-1);
}

.flow-strip span {
  flex: 0 0 auto;
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 999px;
  padding: 9px 12px;
}

.flow-strip i {
  width: 32px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--void-primary);
}

.void-line-chart,
.void-bars {
  min-height: 220px;
  margin-top: 14px;
  border-radius: 14px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    var(--void-surface-2);
  background-size: 100% 25%, 20% 100%, auto;
}

.void-line-chart {
  clip-path: polygon(0 72%, 14% 54%, 28% 61%, 42% 38%, 58% 46%, 72% 26%, 86% 34%, 100% 16%, 100% 100%, 0 100%);
  background-color: rgba(139, 92, 246, 0.18);
}

.void-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 10px;
  padding: 16px;
}

.void-bars span {
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, var(--void-primary-bright), rgba(139, 92, 246, 0.2));
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

.sidebar-scrim[hidden],
.legacy-hooks {
  display: none !important;
}

@media (min-width: 760px) {
  .void-shell {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
  }

  .void-nav {
    position: sticky;
    transform: none;
    width: auto;
    height: 100vh;
  }

  .nav-close {
    display: none;
  }

  .void-main {
    min-width: 0;
  }

  .void-topbar {
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
    align-items: end;
    padding: 18px 22px;
  }

  .void-command-strip {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) auto auto;
    align-items: end;
  }

  .void-content {
    padding: 22px;
  }

  .void-hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
    min-height: 420px;
  }

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

  .void-overview-grid,
  .studio-board,
  .analytics-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  }

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

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

  .tool-card.large {
    grid-column: span 2;
  }

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

@media (min-width: 1180px) {
  .hub-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .tool-card.large {
    grid-column: span 2;
  }
}

@media (max-width: 520px) {
  .void-title h1 {
    font-size: 1.35rem;
  }

  .void-hero h2,
  .hub-head h2 {
    font-size: 2rem;
  }

  .void-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* Studio mobile density: reduce the separated "island" feeling inside Studio. */
@media (max-width: 520px) {
  #view-studio.dash-view.active {
    gap: 8px !important;
  }

  #view-studio .hub-shell-head {
    margin-bottom: 8px !important;
    border-radius: 16px !important;
  }

  #view-studio .studio-stage {
    margin-bottom: 8px !important;
    border-radius: 14px !important;
  }

  #view-studio .stg-channel-bar {
    padding: 6px 10px !important;
  }

  #view-studio .control-studio-preview {
    padding: 8px 8px 10px !important;
  }

  #view-studio .dsg-msg {
    gap: 8px !important;
  }

  #view-studio .dsg-embed,
  #view-studio .dsg-v2 {
    margin-top: 3px !important;
    padding: 9px 9px 9px 15px !important;
  }

  #view-studio .dsg-image.is-empty {
    padding: 12px 10px !important;
  }

  #view-studio .stg-action-dock {
    padding: 7px 8px 2px !important;
  }

  #view-studio .builder-dock {
    margin: 4px 0 6px !important;
    padding: 5px !important;
  }

  #view-studio .studio-workbench {
    margin-top: 4px !important;
    padding: 9px 10px 12px !important;
  }

  #view-studio .studio-workbench::before {
    margin-bottom: 6px !important;
  }

  #view-studio .stg-panel-hint {
    margin-bottom: 7px !important;
  }
}

/* VOID mobile refinement */
.void-ia-body.sidebar-is-open {
  overflow: hidden;
}

.void-ia-body .toast {
  transform: translateY(10px);
  min-width: min(320px, calc(100vw - 28px));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 14px;
  padding: 13px 14px;
  background: rgba(15, 16, 23, 0.98);
  color: var(--void-text);
  opacity: 0;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  transition: opacity 160ms ease, transform 160ms ease;
}

.void-ia-body .toast.show {
  transform: translateY(0);
  opacity: 1;
}

.tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.tool-chips b {
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(139, 92, 246, 0.075);
  color: var(--void-muted);
  font-family: var(--void-font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.grouped-card {
  min-height: 0;
}

@media (max-width: 759px) {
  .void-ia-body::before {
    opacity: 0.14;
    background-size: 92px 92px;
  }

  .void-nav {
    width: min(344px, 93vw);
    padding: 16px;
    gap: 14px;
    border-right-color: rgba(167, 139, 250, 0.18);
    background:
      radial-gradient(circle at 52% -8%, rgba(139, 92, 246, 0.16), transparent 16rem),
      rgba(15, 16, 23, 0.99);
  }

  .void-nav-list {
    gap: 8px;
    padding-bottom: 8px;
  }

  .void-ia-body .dash-nav-item {
    min-height: 52px;
    padding: 14px 12px;
    border-radius: 15px;
    font-size: 1rem;
  }

  .void-ia-body .dash-nav-item span {
    font-size: 0.76rem;
  }

  .void-ia-body .eyebrow,
  .void-brand-block span,
  .sidebar-user-role,
  .void-plan span,
  .void-ia-body label.global-search,
  .global-search span,
  .queue-priority {
    font-size: 0.72rem;
  }

  .void-topbar {
    padding: 12px 12px 14px;
    gap: 11px;
  }

  .sidebar-toggle {
    min-height: 46px;
    justify-self: start;
    padding-inline: 14px;
  }

  .void-title h1 {
    margin-top: 5px;
    font-size: clamp(1.35rem, 8vw, 1.9rem);
  }

  .void-title p {
    max-width: 34rem;
    color: #C2C8E3;
    font-size: 1rem;
  }

  .void-command-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .global-search {
    grid-column: 1 / -1;
  }

  .hud {
    display: none;
  }

  .void-ia-body input,
  .void-ia-body select,
  .void-ia-body textarea,
  .void-ia-body .btn,
  .action-ribbon button,
  .hub-tabs button {
    min-height: 50px;
    font-size: 0.9rem;
  }

  .void-content {
    gap: 13px;
    padding: 12px 10px 18px;
  }

  .dash-view {
    gap: 14px;
  }

  .void-hero,
  .hub-head,
  .void-panel,
  .tool-card,
  .chart-panel,
  .studio-preview,
  .security-grid article,
  .void-stat-grid article {
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.26);
  }

  .void-hero {
    min-height: auto;
  }

  .void-hero h2,
  .hub-head h2 {
    font-size: clamp(1.85rem, 10vw, 2.45rem);
    line-height: 1.02;
  }

  .void-hero p,
  .hub-head p,
  .tool-card strong {
    color: #C2C8E3;
    font-size: 1rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .void-signal-row span {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.72rem;
  }

  .void-core-orb {
    min-height: 156px;
  }

  .void-core-orb span {
    width: min(54vw, 190px);
  }

  .void-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .void-stat-grid article {
    min-height: 108px;
  }

  .void-stat-grid strong {
    font-size: 1.42rem;
  }

  .panel-head {
    display: grid;
    gap: 10px;
  }

  .panel-head .btn {
    width: 100%;
  }

  .hub-tabs {
    position: sticky;
    top: 0;
    z-index: 8;
    margin-inline: -10px;
    padding: 9px 10px 10px;
    background: rgba(7, 7, 10, 0.94);
    backdrop-filter: blur(12px);
    scroll-snap-type: x mandatory;
  }

  .hub-tabs button {
    min-width: 136px;
    scroll-snap-align: start;
    text-align: center;
    font-size: 0.78rem;
  }

  .hub-grid,
  .hub-grid.compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tool-card {
    min-height: 0;
    gap: 9px;
  }

  .tool-card::after {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  .tool-card span {
    padding-right: 42px;
    font-size: 0.88rem;
    line-height: 1.25;
  }

  .tool-chips {
    gap: 6px;
  }

  .tool-chips b {
    padding: 7px 8px;
    font-size: 0.72rem;
  }

  .studio-board {
    grid-template-columns: 1fr;
  }

  .studio-preview {
    min-height: 190px;
  }

  .studio-preview .btn {
    width: 100%;
  }

  .security-grid {
    gap: 10px;
  }

  .meter {
    height: 12px;
  }

  .ops-queue article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ops-queue em {
    grid-column: 2;
  }

  .suite-modal {
    align-items: flex-end;
    padding: 10px;
  }

  .suite-modal-card {
    max-height: min(86vh, 720px);
    overflow: auto;
    border-radius: 22px;
    padding: 18px;
  }
}

/* VØID server-centered control hub */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.void-control-body {
  background:
    radial-gradient(circle at 50% -10%, rgba(139, 92, 246, 0.14), transparent 19rem),
    radial-gradient(circle at 100% 22%, rgba(167, 139, 250, 0.08), transparent 18rem),
    linear-gradient(180deg, #07070A 0%, #080810 46%, #050507 100%);
}

.void-control-body .void-shell {
  min-height: 100vh;
}

.control-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.topbar-brand,
.topbar-actions,
.server-name-row,
.section-title-row,
.account-summary {
  display: flex;
  align-items: center;
}

.topbar-brand {
  min-width: 0;
  gap: 10px;
}

.void-mark.small {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 0.78rem;
}

.topbar-brand strong {
  display: block;
  color: var(--void-text);
  font-family: var(--void-font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.topbar-brand span {
  display: block;
  color: var(--void-faint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.topbar-actions {
  gap: 8px;
}

.account-avatar-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  overflow: hidden;
}

.account-avatar-btn img {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
}

.control-content {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding: 14px 12px 28px;
}

.home-view {
  gap: 18px;
}

.server-identity {
  width: 100%;
  display: grid;
  place-items: center;
  gap: 9px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 24px;
  padding: 24px 18px 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(139, 92, 246, 0.18), transparent 14rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(15, 16, 23, 0.92);
  color: var(--void-text);
  cursor: pointer;
  text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.server-icon-wrap {
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 42%),
    rgba(139, 92, 246, 0.08);
  box-shadow: 0 0 0 9px rgba(139, 92, 246, 0.045), 0 18px 44px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.server-icon-wrap img {
  width: 82px;
  height: 82px;
  border-radius: 24px;
  object-fit: cover;
}

.server-name-row {
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}

.server-name-row strong {
  min-width: 0;
  color: white;
  font-family: var(--void-font-display);
  font-size: clamp(1.35rem, 8vw, 2.15rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.server-name-row span {
  color: var(--void-primary-bright);
  font-size: 1.25rem;
  font-weight: 900;
}

.server-identity em {
  color: var(--void-faint);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
}

.bot-settings-cta {
  width: 100%;
  min-height: 72px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 19px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.95), rgba(139, 92, 246, 0.94) 56%, rgba(77, 48, 168, 0.98)),
    var(--void-primary);
  color: white;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 18px 52px rgba(139, 92, 246, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.bot-settings-cta span {
  font-family: var(--void-font-display);
  font-size: 1.12rem;
  font-weight: 800;
}

.bot-settings-cta strong {
  color: rgba(245, 247, 255, 0.84);
  font-size: 0.92rem;
}

.quick-tools-section,
.hub-shell-head,
.hub-area,
.bottom-sheet .sheet-panel {
  border: 1px solid rgba(167, 139, 250, 0.16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.016) 54%),
    rgba(15, 16, 23, 0.94);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.quick-tools-section {
  border-radius: 22px;
  padding: 16px;
}

.section-title-row {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.section-title-row h2 {
  margin: 4px 0 0;
  color: white;
  font-family: var(--void-font-display);
  font-size: 1.22rem;
}

.mini-help {
  min-height: 40px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--void-muted);
  font-weight: 800;
  cursor: pointer;
}

.quick-tools-grid {
  display: grid;
  gap: 10px;
}

.quick-tool {
  position: relative;
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 17px;
  padding: 15px 44px 15px 15px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 44%),
    rgba(255, 255, 255, 0.028);
  color: var(--void-text);
  cursor: pointer;
  text-align: left;
}

.quick-tool::after,
.hub-area::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--void-primary-bright);
  border-right: 2px solid var(--void-primary-bright);
  transform: translateY(-50%) rotate(45deg);
}

.quick-tool span,
.hub-area span {
  color: white;
  font-family: var(--void-font-display);
  font-weight: 800;
}

.quick-tool strong,
.hub-area strong {
  color: #C2C8E3;
  font-size: 0.94rem;
  line-height: 1.35;
}

.quick-tool.optional {
  display: none;
}

.hub-view {
  gap: 13px;
}

.hub-shell-head {
  display: grid;
  gap: 10px;
  border-radius: 22px;
  padding: 18px;
}

.hub-shell-head h1 {
  margin: 0;
  color: white;
  font-family: var(--void-font-display);
  font-size: clamp(2rem, 13vw, 3.5rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.hub-shell-head p {
  margin: 0;
  color: #C2C8E3;
  font-size: 1rem;
  line-height: 1.45;
}

.hub-shell-head .btn {
  width: 100%;
  margin-top: 2px;
}

.hub-area-grid {
  display: grid;
  gap: 10px;
}

.hub-area {
  position: relative;
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: 17px;
  padding: 15px 52px 15px 15px;
}

.hub-area em {
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(139, 92, 246, 0.07);
  color: var(--void-faint);
  font-family: var(--void-font-mono);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.control-studio-preview {
  min-height: 240px;
}

.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  padding: 12px;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.bottom-sheet:not(.is-open) {
  display: none;
}

.bottom-sheet.is-open {
  display: grid;
  opacity: 1;
  pointer-events: auto;
}

.sheet-panel {
  width: min(100%, 560px);
  max-height: min(82vh, 760px);
  margin-inline: auto;
  overflow: auto;
  transform: translateY(18px);
  border-radius: 24px 24px 18px 18px;
  padding: 18px;
  transition: transform 180ms ease;
}

.bottom-sheet.is-open .sheet-panel {
  transform: translateY(0);
}

.sheet-close {
  float: right;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--void-muted);
  cursor: pointer;
  font-size: 1.35rem;
}

.sheet-panel h2 {
  margin: 6px 0 14px;
  color: white;
  font-family: var(--void-font-display);
}

.sheet-list,
.module-groups {
  display: grid;
  gap: 9px;
}

.sheet-list button,
.sheet-list a,
.module-groups button,
.server-option {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--void-text);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-weight: 800;
}

.server-option img,
.account-summary img {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover;
}

.server-option span {
  display: grid;
  gap: 3px;
}

.server-option em {
  color: var(--void-faint);
  font-size: 0.78rem;
  font-style: normal;
}

.server-option.selected {
  border-color: rgba(167, 139, 250, 0.42);
  background: rgba(139, 92, 246, 0.12);
}

.module-groups section {
  display: grid;
  gap: 8px;
}

.module-groups h3 {
  margin: 10px 0 0;
  color: var(--void-faint);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.account-summary {
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.sheet-empty {
  color: var(--void-muted);
  line-height: 1.4;
}

.sheet-is-open {
  overflow: hidden;
}

.void-control-body .toast {
  z-index: 100;
}

@media (min-width: 560px) {
  .quick-tools-grid,
  .hub-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-tool.optional {
    display: grid;
  }
}

@media (min-width: 760px) {
  .void-control-body .void-shell {
    grid-template-columns: 292px minmax(0, 1fr);
  }

  .control-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 16px 22px;
  }

  .control-topbar .sidebar-toggle {
    display: none !important;
  }

  .control-content {
    padding: 24px;
  }

  .home-view {
    max-width: 880px;
    margin-inline: auto;
  }

  .server-identity {
    padding: 32px;
  }

  .server-icon-wrap {
    width: 118px;
    height: 118px;
    border-radius: 34px;
  }

  .server-icon-wrap img {
    width: 98px;
    height: 98px;
    border-radius: 28px;
  }

  .hub-shell-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding: 24px;
  }

  .hub-shell-head .eyebrow,
  .hub-shell-head h1,
  .hub-shell-head p {
    grid-column: 1;
  }

  .hub-shell-head .btn {
    grid-column: 2;
    grid-row: 2 / span 2;
    width: auto;
    min-width: 180px;
  }
}

@media (min-width: 1180px) {
  .hub-area-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 390px) {
  .control-content {
    padding-inline: 10px;
  }

  .server-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 27px;
  }

  .server-icon-wrap img {
    width: 74px;
    height: 74px;
    border-radius: 22px;
  }

  .quick-tools-section,
  .hub-shell-head {
    padding: 14px;
  }
}

@media (max-width: 390px) {
  .void-command-strip {
    grid-template-columns: 1fr;
  }

  .void-stat-grid {
    grid-template-columns: 1fr;
  }

  .void-brand-block strong {
    font-size: 0.92rem;
  }
}

/* VOID premium visual pass */
.void-ia-body {
  background:
    radial-gradient(circle at 80% -8%, rgba(167, 139, 250, 0.2), transparent 25rem),
    radial-gradient(circle at 4% 22%, rgba(61, 220, 151, 0.055), transparent 20rem),
    linear-gradient(180deg, #090910 0%, #07070A 42%, #050507 100%);
}

.void-ia-body::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 35% 5%, rgba(139, 92, 246, 0.12), transparent 24rem);
  background-size: 86px 86px, 86px 86px, auto;
  opacity: 0.22;
}

.void-nav {
  border-right-color: rgba(167, 139, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(21, 23, 38, 0.96), rgba(8, 8, 13, 0.99)),
    radial-gradient(circle at 50% 0, rgba(139, 92, 246, 0.18), transparent 18rem);
}

.void-mark {
  border-color: rgba(167, 139, 250, 0.5);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 36%),
    radial-gradient(circle at 58% 22%, rgba(167, 139, 250, 0.55), transparent 36%),
    #151726;
  box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.055), 0 18px 50px rgba(139, 92, 246, 0.24);
}

.void-operator,
.void-plan {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 42%),
    rgba(255, 255, 255, 0.035);
}

.void-ia-body .dash-nav-item {
  position: relative;
  isolation: isolate;
}

.void-ia-body .dash-nav-item::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--void-primary-bright);
  opacity: 0;
  transform: scaleY(0.45);
  transition: opacity 160ms ease, transform 160ms ease;
}

.void-ia-body .dash-nav-item.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.void-topbar {
  border-bottom-color: rgba(167, 139, 250, 0.14);
  background:
    linear-gradient(180deg, rgba(9, 9, 16, 0.96), rgba(7, 7, 10, 0.84));
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.26);
}

.void-ia-body input,
.void-ia-body select,
.void-ia-body textarea {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(15, 16, 23, 0.92);
}

.void-ia-body .btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.void-ia-body .btn:hover,
.hub-map button:hover,
.tool-card:hover {
  transform: translateY(-1px);
}

.void-ia-body .btn-primary {
  background:
    linear-gradient(135deg, rgba(167, 139, 250, 0.96), rgba(139, 92, 246, 0.94) 52%, rgba(92, 56, 194, 0.98)),
    var(--void-primary);
  box-shadow: 0 16px 46px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.void-hero,
.void-panel,
.hub-head,
.tool-card,
.chart-panel,
.security-grid article,
.studio-preview,
.void-stat-grid article {
  border-color: rgba(167, 139, 250, 0.16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 42%, transparent 70%),
    radial-gradient(circle at 100% 0, rgba(139, 92, 246, 0.11), transparent 15rem),
    rgba(15, 16, 23, 0.92);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.void-hero {
  border-color: rgba(167, 139, 250, 0.22);
  background:
    radial-gradient(circle at 84% 30%, rgba(139, 92, 246, 0.26), transparent 16rem),
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.08), transparent 18rem),
    linear-gradient(135deg, rgba(21, 23, 38, 0.96), rgba(10, 10, 16, 0.96) 60%, rgba(7, 7, 10, 0.98));
}

.void-hero::before,
.hub-head::before,
.studio-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.11), transparent 24%, transparent 76%, rgba(139, 92, 246, 0.08)),
    linear-gradient(90deg, rgba(139, 92, 246, 0.26), transparent 30%);
  opacity: 0.42;
}

.void-hero-copy,
.hub-head > *,
.studio-preview > * {
  position: relative;
  z-index: 1;
}

.void-hero h2 {
  max-width: 10.5ch;
  text-wrap: balance;
}

.void-hero p,
.hub-head p {
  max-width: 46rem;
}

.void-signal-row span,
.hub-tabs button,
.queue-priority,
.tool-chips b {
  border-color: rgba(167, 139, 250, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(139, 92, 246, 0.045);
}

.void-core-orb {
  isolation: isolate;
}

.void-core-orb span {
  background:
    radial-gradient(circle, rgba(245, 247, 255, 0.92) 0 2%, rgba(167, 139, 250, 0.62) 3% 11%, rgba(139, 92, 246, 0.24) 12% 34%, transparent 35%),
    conic-gradient(from 40deg, transparent 0 16%, rgba(167, 139, 250, 0.7) 18% 20%, transparent 22% 56%, rgba(61, 220, 151, 0.36) 58% 60%, transparent 62% 100%);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.74),
    0 0 48px rgba(139, 92, 246, 0.26),
    0 0 110px rgba(139, 92, 246, 0.16);
}

.orb-ring {
  position: absolute;
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 999px;
  pointer-events: none;
}

.orb-ring-a {
  width: min(62vw, 300px);
  aspect-ratio: 1;
  transform: rotate(-14deg) scaleY(0.34);
}

.orb-ring-b {
  width: min(54vw, 250px);
  aspect-ratio: 1;
  transform: rotate(30deg) scaleY(0.5);
  border-color: rgba(61, 220, 151, 0.16);
}

.void-core-orb strong {
  text-shadow: 0 0 28px rgba(167, 139, 250, 0.68);
}

.void-core-orb small {
  position: absolute;
  bottom: 22px;
  z-index: 1;
  color: var(--void-faint);
  font-family: var(--void-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.void-stat-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--void-primary), transparent);
  opacity: 0.7;
}

.hub-map button,
.ops-queue article,
.action-ribbon button {
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.hub-map button:hover,
.action-ribbon button:hover {
  border-color: rgba(167, 139, 250, 0.34);
  background: rgba(139, 92, 246, 0.08);
}

.hub-head {
  padding-block: 20px;
}

.hub-head h2 {
  text-wrap: balance;
}

.tool-card {
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.tool-card:hover {
  border-color: rgba(167, 139, 250, 0.32);
  box-shadow: 0 22px 72px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(139, 92, 246, 0.08) inset;
}

.tool-card::after {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent),
    rgba(139, 92, 246, 0.09);
  box-shadow: 0 0 26px rgba(139, 92, 246, 0.14);
}

.tool-card span {
  color: #FFFFFF;
}

.studio-preview {
  min-height: 310px;
  align-content: space-between;
  gap: 16px;
  background:
    radial-gradient(circle at 86% 12%, rgba(167, 139, 250, 0.25), transparent 16rem),
    linear-gradient(155deg, rgba(30, 33, 52, 0.95), rgba(10, 10, 16, 0.96));
}

.discord-preview-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(21, 23, 38, 0.78);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
}

.preview-rail {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--void-primary-bright), var(--void-success));
}

.preview-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--void-primary), #3d2c78);
  color: white;
  font-weight: 900;
}

.preview-message {
  min-width: 0;
}

.preview-message span {
  color: var(--void-primary-bright);
  font-size: 0.78rem;
  font-weight: 800;
}

.preview-message strong {
  display: block;
  margin-top: 4px;
  color: white;
  font-family: var(--void-font-display);
  font-size: 1.12rem;
}

.preview-message p {
  margin: 6px 0 12px;
  color: #C2C8E3;
}

.preview-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.preview-buttons b {
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 9px;
  padding: 8px 10px;
  background: rgba(139, 92, 246, 0.12);
  color: #F5F7FF;
  font-size: 0.78rem;
}

.meter {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.meter i {
  background: linear-gradient(90deg, var(--void-success), var(--void-primary-bright), var(--void-danger));
  box-shadow: 0 0 22px rgba(167, 139, 250, 0.3);
}

.void-line-chart,
.void-bars {
  border: 1px solid rgba(167, 139, 250, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

@media (max-width: 759px) {
  .void-ia-body {
    background:
      radial-gradient(circle at 92% -6%, rgba(167, 139, 250, 0.18), transparent 17rem),
      linear-gradient(180deg, #090910 0%, #07070A 56%, #050507 100%);
  }

  .void-topbar {
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.22);
  }

  .void-hero h2 {
    max-width: 11ch;
  }

  .void-core-orb small {
    bottom: 8px;
    font-size: 0.7rem;
  }

  .orb-ring-a {
    width: min(68vw, 230px);
  }

  .orb-ring-b {
    width: min(58vw, 198px);
  }

  .studio-preview {
    min-height: 250px;
  }

  .discord-preview-card {
    padding: 13px;
  }

  .preview-buttons b {
    flex: 1 1 auto;
    text-align: center;
  }

  .void-ia-body .btn:hover,
  .hub-map button:hover,
  .tool-card:hover {
    transform: none;
  }
}

/* VØID command surface home override */
.void-control-body .home-view {
  gap: 16px;
}

.void-control-body .server-identity {
  border: 0;
  border-radius: 0;
  padding: 26px 10px 10px;
  background: transparent;
  box-shadow: none;
}

.void-control-body .server-icon-wrap {
  position: relative;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 45%, rgba(167, 139, 250, 0.18), transparent 54%),
    rgba(15, 16, 23, 0.72);
}

.void-control-body .server-icon-wrap::before,
.void-control-body .server-icon-wrap::after {
  content: "";
  position: absolute;
  inset: -16px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: inherit;
  pointer-events: none;
}

.void-control-body .server-icon-wrap::after {
  inset: -31px;
  border-color: rgba(139, 92, 246, 0.08);
  transform: scaleY(0.72) rotate(-12deg);
}

.void-control-body .server-icon-wrap img {
  border-radius: 50%;
}

.void-control-body .server-name-row strong {
  text-shadow: 0 0 30px rgba(139, 92, 246, 0.22);
}

.void-control-body .bot-settings-cta {
  width: min(100%, 430px);
  min-height: 62px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-radius: 999px;
  padding: 13px 17px 13px 20px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}

.void-control-body .bot-settings-cta::after {
  content: "SET";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--void-font-mono);
  font-size: 0.66rem;
}

.void-control-body .bot-settings-cta span,
.void-control-body .bot-settings-cta strong {
  grid-column: 1;
}

.void-control-body .bot-settings-cta strong {
  max-width: 28ch;
  line-height: 1.25;
}

.command-surface {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0 0 18px;
}

.orbit-help {
  position: absolute;
  right: 4px;
  top: 0;
  z-index: 3;
}

.command-surface-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.command-surface-head h2 {
  grid-column: 1;
  margin: 0;
  color: white;
  font-family: var(--void-font-display);
  font-size: 1.1rem;
}

.command-surface-head .eyebrow {
  grid-column: 1;
  font-size: 0.7rem;
}

.command-surface-head .mini-help {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.orbit-launcher {
  position: relative;
  min-height: 342px;
  overflow: hidden;
  isolation: isolate;
  perspective: 920px;
}

.void-orb-art {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(92vw, 360px);
  max-width: none;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 48%;
  transform: translate(-50%, -50%) translateX(0) rotate(-7deg) rotateY(0deg) scale(1.05);
  transform-origin: 50% 52%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, object-position, filter;
  opacity: 0.78;
  mix-blend-mode: screen;
  filter: saturate(1.08) contrast(1.08) brightness(0.76) drop-shadow(0 0 34px rgba(139, 54, 255, 0.24));
  pointer-events: none;
  z-index: 0;
  animation: void-orb-image-orbit 22s ease-in-out infinite;
}

.orbit-launcher::before {
  content: "VØID";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(167, 139, 250, 0.16), transparent 60%),
    rgba(7, 7, 10, 0.64);
  color: rgba(245, 247, 255, 0.58);
  font-family: var(--void-font-display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.orbit-line {
  position: absolute;
  left: 50%;
  top: 48%;
  border: 1px solid rgba(167, 139, 250, 0.12);
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.orbit-line-a {
  width: min(86vw, 340px);
  height: 190px;
  transform: translate(-50%, -50%) rotate(-11deg);
}

.orbit-line-b {
  width: min(78vw, 300px);
  height: 248px;
  border-color: rgba(61, 220, 151, 0.07);
  transform: translate(-50%, -50%) rotate(18deg);
}

.orbit-node.quick-tool {
  position: absolute;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 999px;
  padding: 8px 13px 8px 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(15, 16, 23, 0.9);
  color: var(--void-text);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32), 0 0 26px rgba(139, 92, 246, 0.055);
  z-index: 2;
}

.orbit-node.quick-tool::after {
  display: none;
}

.orbit-node i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.1);
  color: var(--void-primary-bright);
  font-family: var(--void-font-mono);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
}

.orbit-node span {
  color: #fff;
  font-family: var(--void-font-display);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}

.orbit-node strong {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  min-width: 190px;
  max-width: 230px;
  transform: translateX(-50%) translateY(-4px);
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(9, 9, 16, 0.96);
  color: #C2C8E3;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: normal;
}

.orbit-node:focus-visible strong,
.orbit-node:hover strong {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.node-community {
  left: 2%;
  top: 18px;
  transform: rotate(-3deg);
}

.node-moderation {
  right: 6px;
  top: 56px;
  transform: rotate(2deg);
}

.node-protection {
  left: 9%;
  top: 132px;
  transform: rotate(-8deg);
}

.node-engagement {
  left: 9%;
  top: 132px;
  transform: rotate(-8deg);
}

.node-studio {
  right: 8px;
  top: 166px;
  min-height: 56px;
  padding-right: 16px;
  border-color: rgba(167, 139, 250, 0.34);
  box-shadow: 0 18px 54px rgba(139, 92, 246, 0.16);
  transform: rotate(5deg);
}

.node-automation {
  left: 0;
  bottom: 44px;
  transform: rotate(4deg);
}

.node-support {
  right: 8px;
  bottom: 12px;
  transform: rotate(-4deg);
}

@media (min-width: 560px) {
  .orbit-launcher {
    min-height: 390px;
  }

  .orbit-line-a {
    width: 440px;
    height: 220px;
  }

  .orbit-line-b {
    width: 360px;
    height: 300px;
  }

  .node-community {
    left: 9%;
  }

  .node-moderation {
    right: 8%;
  }

  .node-protection {
    left: 14%;
  }

  .node-studio {
    right: 15%;
  }

  .node-automation {
    left: 8%;
  }

  .node-support {
    right: 12%;
  }
}

@media (min-width: 760px) {
  .void-control-body .home-view {
    max-width: 760px;
  }

  .void-control-body .server-identity {
    padding-top: 34px;
  }
}

@media (max-width: 390px) {
  .orbit-launcher {
    min-height: 326px;
  }

  .orbit-node.quick-tool {
    min-height: 46px;
    padding: 7px 10px 7px 7px;
  }

  .orbit-node i {
    width: 31px;
    height: 31px;
    font-size: 0.7rem;
  }

  .orbit-node span {
    font-size: 0.82rem;
  }

  .node-community {
    left: 0;
  }

  .node-moderation {
    right: 4px;
  }

  .node-protection {
    left: 4%;
  }

  .node-studio {
    right: 4px;
  }

  .node-automation {
    left: 0;
  }

  .node-support {
    right: 4px;
  }
}

/* VØID premium motion and palette refinement */
.void-control-body {
  --void-primary: #6F4CC2;
  --void-primary-bright: #B7A3E8;
  --void-glow: rgba(111, 76, 194, 0.16);
  --void-surface-1: #0D0E14;
  --void-surface-2: #121420;
  --void-surface-3: #171A29;
  --void-border: #26293C;
  background:
    radial-gradient(circle at 50% 8%, rgba(91, 62, 153, 0.18), transparent 18rem),
    radial-gradient(circle at 100% 28%, rgba(120, 96, 176, 0.06), transparent 17rem),
    linear-gradient(180deg, #060609 0%, #090910 46%, #050506 100%);
}

.void-control-body::before {
  opacity: 0.16;
  background:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    radial-gradient(circle at 50% 22%, rgba(111, 76, 194, 0.09), transparent 22rem);
  background-size: 96px 96px, 96px 96px, auto;
}

.void-control-body .control-topbar {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.94), rgba(7, 7, 10, 0.76));
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.22);
}

.void-control-body .void-mark.small {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.void-control-body .account-avatar-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.032);
}

.void-control-body .account-avatar-btn img {
  width: 33px;
  height: 33px;
}

.void-control-body .eyebrow,
.void-control-body .topbar-brand span {
  color: rgba(167, 174, 207, 0.62);
  letter-spacing: 0.11em;
}

.void-control-body .server-identity {
  padding-top: 28px;
}

.void-control-body .server-icon-wrap {
  background:
    radial-gradient(circle at 50% 46%, rgba(183, 163, 232, 0.16), transparent 54%),
    rgba(13, 14, 20, 0.78);
  box-shadow:
    0 0 0 10px rgba(111, 76, 194, 0.035),
    0 0 58px rgba(111, 76, 194, 0.15),
    0 20px 54px rgba(0, 0, 0, 0.34);
}

.void-control-body .server-icon-wrap::before {
  border-color: rgba(183, 163, 232, 0.12);
}

.void-control-body .server-icon-wrap::after {
  border-color: rgba(111, 76, 194, 0.1);
}

.void-control-body .server-name-row strong {
  font-weight: 850;
  letter-spacing: -0.01em;
  text-shadow: 0 0 28px rgba(111, 76, 194, 0.2);
}

.void-control-body .server-identity em {
  color: rgba(194, 200, 227, 0.68);
  font-size: 0.82rem;
  font-weight: 650;
}

.void-control-body .bot-settings-cta {
  min-height: 66px;
  border: 1px solid rgba(183, 163, 232, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 42%),
    radial-gradient(circle at 92% 50%, rgba(111, 76, 194, 0.28), transparent 7rem),
    rgba(17, 18, 28, 0.92);
  box-shadow:
    0 0 0 1px rgba(111, 76, 194, 0.1),
    0 14px 44px rgba(0, 0, 0, 0.35),
    0 0 34px rgba(111, 76, 194, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.void-control-body .bot-settings-cta::after {
  border-color: rgba(183, 163, 232, 0.22);
  background: rgba(111, 76, 194, 0.1);
  color: rgba(245, 247, 255, 0.82);
}

.void-control-body .bot-settings-cta span {
  color: #FFFFFF;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.void-control-body .bot-settings-cta strong {
  color: rgba(194, 200, 227, 0.78);
  font-weight: 650;
}

.command-surface::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(88vw, 430px);
  height: 280px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(111, 76, 194, 0.11), transparent 42%),
    linear-gradient(90deg, transparent, rgba(183, 163, 232, 0.06), transparent);
  filter: blur(18px);
  transform: translate(-50%, -50%);
  opacity: 0.76;
}

.command-surface-head h2 {
  font-size: 1.06rem;
  font-weight: 750;
}

.command-surface-head .eyebrow {
  color: rgba(167, 174, 207, 0.62);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.orbit-launcher::before {
  content: "VØID";
  border-color: rgba(183, 163, 232, 0.14);
  background:
    radial-gradient(circle at 50% 35%, rgba(183, 163, 232, 0.14), transparent 60%),
    rgba(7, 7, 10, 0.72);
  color: rgba(245, 247, 255, 0.55);
  animation: void-center-pulse 4.8s ease-in-out infinite;
}

.orbit-line {
  border-color: rgba(183, 163, 232, 0.105);
}

.orbit-line::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 40deg, transparent 0 18%, rgba(183, 163, 232, 0.28) 20% 23%, transparent 25% 66%, rgba(111, 76, 194, 0.2) 69% 72%, transparent 74%);
  mask: radial-gradient(ellipse at center, transparent 63%, #000 64% 66%, transparent 67%);
  opacity: 0.55;
}

.orbit-line-a {
  animation: void-orbit-slow 42s linear infinite;
}

.orbit-line-b {
  border-color: rgba(183, 163, 232, 0.055);
  animation: void-orbit-reverse 58s linear infinite;
}

.orbit-node.quick-tool {
  border-color: rgba(183, 163, 232, 0.16);
  padding: 7px 13px 7px 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(13, 14, 20, 0.92);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34), 0 0 24px rgba(111, 76, 194, 0.055);
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
  animation: void-node-drift 7s ease-in-out infinite;
}

.orbit-node i {
  border-color: rgba(183, 163, 232, 0.18);
  background: rgba(111, 76, 194, 0.12);
  font-weight: 750;
}

.orbit-node span {
  font-size: 0.86rem;
  font-weight: 760;
}

.orbit-node strong {
  border-color: rgba(183, 163, 232, 0.16);
}

.orbit-node:focus-visible,
.orbit-node:hover {
  border-color: rgba(183, 163, 232, 0.36);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    rgba(18, 20, 32, 0.98);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(111, 76, 194, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.node-community {
  --node-rotate: -3deg;
  transform: rotate(var(--node-rotate));
}

.node-moderation {
  --node-rotate: 2deg;
  transform: rotate(var(--node-rotate));
  animation-delay: -1.2s;
}

.node-protection {
  --node-rotate: -8deg;
  transform: rotate(var(--node-rotate));
  animation-delay: -2.6s;
}

.node-studio {
  --node-rotate: 5deg;
  border-color: rgba(183, 163, 232, 0.28);
  box-shadow: 0 18px 54px rgba(111, 76, 194, 0.14);
  transform: rotate(var(--node-rotate));
  animation-delay: -3.8s;
}

.node-automation {
  --node-rotate: 4deg;
  transform: rotate(var(--node-rotate));
  animation-delay: -4.7s;
}

.node-support {
  --node-rotate: -4deg;
  transform: rotate(var(--node-rotate));
  animation-delay: -5.4s;
}

@keyframes void-orbit-slow {
  from { transform: translate(-50%, -50%) rotate(-11deg); }
  to { transform: translate(-50%, -50%) rotate(349deg); }
}

@keyframes void-orbit-reverse {
  from { transform: translate(-50%, -50%) rotate(18deg); }
  to { transform: translate(-50%, -50%) rotate(-342deg); }
}

@keyframes void-center-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(111, 76, 194, 0.08), 0 0 34px rgba(111, 76, 194, 0.06);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(111, 76, 194, 0.035), 0 0 46px rgba(111, 76, 194, 0.14);
  }
}

@keyframes void-node-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-line-a,
  .orbit-line-b,
  .orbit-launcher::before,
  .orbit-node.quick-tool {
    animation: none !important;
  }
}

/* VØID reference-matched orb and command buttons */
.void-control-body {
  --void-bg: #08080f;
  --void-panel: #11111a;
  --void-panel-soft: rgba(26, 17, 38, 0.72);
  --void-border: rgba(176, 108, 255, 0.28);
  --void-purple: #8b36ff;
  --void-purple-soft: #b36dff;
  --void-purple-dark: #3b126f;
  --void-text: #e7d5ff;
  --void-muted: #9b88b8;
  --void-success: #4dff9d;
  --void-danger: #ff3d6e;
  --void-primary: var(--void-purple);
  --void-primary-bright: var(--void-purple-soft);
  --void-glow: rgba(139, 54, 255, 0.18);
  color: var(--void-text);
  background:
    radial-gradient(circle at 70% 20%, rgba(139, 54, 255, 0.18), transparent 34%),
    radial-gradient(circle at 25% 80%, rgba(95, 22, 170, 0.16), transparent 30%),
    linear-gradient(180deg, #08080f 0%, #07070d 52%, #050507 100%);
}

.void-control-body::before {
  opacity: 0.2;
  background:
    radial-gradient(circle at 50% 22%, rgba(179, 109, 255, 0.1), transparent 22rem),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: auto, 118px 118px, 118px 118px;
}

.void-control-body .server-icon-wrap {
  background:
    radial-gradient(circle at 50% 48%, rgba(179, 109, 255, 0.18), transparent 58%),
    rgba(9, 9, 17, 0.92);
  box-shadow:
    0 0 0 8px rgba(139, 54, 255, 0.04),
    0 0 58px rgba(139, 54, 255, 0.2),
    0 18px 54px rgba(0, 0, 0, 0.44);
}

.void-control-body .server-icon-wrap::before {
  border-color: rgba(176, 108, 255, 0.24);
  box-shadow: 0 0 26px rgba(139, 54, 255, 0.12);
}

.void-control-body .server-icon-wrap::after {
  border-color: rgba(179, 109, 255, 0.12);
}

.void-control-body .server-name-row strong,
.void-glow-text {
  color: var(--void-text);
  text-shadow:
    0 0 8px rgba(179, 109, 255, 0.52),
    0 0 28px rgba(139, 54, 255, 0.34);
}

.void-control-body .server-identity em,
.void-control-body .eyebrow,
.void-control-body .topbar-brand span,
.command-surface-head .eyebrow {
  color: rgba(155, 136, 184, 0.78);
}

.void-control-body .bot-settings-cta {
  border-color: rgba(176, 108, 255, 0.32);
  background:
    linear-gradient(145deg, rgba(22, 18, 34, 0.92), rgba(9, 9, 17, 0.96)),
    radial-gradient(circle at 92% 50%, rgba(139, 54, 255, 0.2), transparent 7rem);
  box-shadow:
    0 0 32px rgba(139, 54, 255, 0.16),
    inset 0 0 18px rgba(179, 109, 255, 0.05),
    inset 0 1px 0 rgba(231, 213, 255, 0.08);
}

.void-control-body .bot-settings-cta::before {
  content: "";
  position: absolute;
  inset: 8px 13px;
  border: 1px solid rgba(176, 108, 255, 0.18);
  clip-path: polygon(2% 0, 96% 0, 100% 42%, 97% 100%, 4% 100%, 0 58%);
  pointer-events: none;
}

.void-control-body .bot-settings-cta::after {
  border-color: rgba(231, 213, 255, 0.22);
  background:
    radial-gradient(circle, rgba(179, 109, 255, 0.16), rgba(17, 17, 26, 0.78));
  color: rgba(231, 213, 255, 0.92);
  box-shadow: 0 0 22px rgba(139, 54, 255, 0.22);
}

.void-control-body .bot-settings-cta span {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(179, 109, 255, 0.28);
}

.void-control-body .bot-settings-cta strong {
  color: rgba(231, 213, 255, 0.74);
}

.command-surface::before {
  background:
    radial-gradient(circle at 50% 46%, rgba(139, 54, 255, 0.16), transparent 38%),
    radial-gradient(circle at 50% 62%, rgba(95, 22, 170, 0.12), transparent 48%);
  filter: blur(20px);
}

.orbit-launcher::before {
  content: "V\00D8ID";
  width: 96px;
  height: 96px;
  border-color: rgba(176, 108, 255, 0.24);
  background:
    linear-gradient(130deg, transparent 42%, rgba(179, 109, 255, 0.5) 43% 44%, transparent 45%),
    linear-gradient(38deg, transparent 38%, rgba(179, 109, 255, 0.34) 39% 40%, transparent 41%),
    radial-gradient(circle at 54% 48%, rgba(255, 61, 110, 0.42) 0 2px, transparent 4px),
    radial-gradient(circle at 62% 30%, rgba(179, 109, 255, 0.22), transparent 20%),
    radial-gradient(circle at 40% 34%, rgba(255, 255, 255, 0.13), transparent 18%),
    radial-gradient(circle at 50% 54%, #15121f 0 35%, #050507 66%, #000 100%);
  color: rgba(231, 213, 255, 0.68);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.86),
    inset 0 0 18px rgba(179, 109, 255, 0.09),
    0 0 28px rgba(139, 54, 255, 0.2),
    0 0 72px rgba(139, 54, 255, 0.12);
  animation: void-crack-pulse 5.6s ease-in-out infinite;
}

.orbit-launcher::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(231, 213, 255, 0.9);
  box-shadow:
    118px 0 10px rgba(179, 109, 255, 0.8),
    -92px 42px 8px rgba(139, 54, 255, 0.72),
    44px -96px 9px rgba(179, 109, 255, 0.56),
    -34px -120px 7px rgba(231, 213, 255, 0.38);
  transform: translate(-50%, -50%);
  opacity: 0.62;
  pointer-events: none;
  animation: void-particle-orbit 28s linear infinite;
}

.orbit-line {
  border-color: rgba(176, 108, 255, 0.16);
}

.orbit-line::after {
  background: conic-gradient(from 40deg, transparent 0 15%, rgba(179, 109, 255, 0.44) 17% 21%, transparent 24% 62%, rgba(139, 54, 255, 0.28) 66% 70%, transparent 73%);
}

.orbit-node.quick-tool {
  min-height: 50px;
  border-color: rgba(176, 108, 255, 0.28);
  border-radius: 12px;
  padding: 8px 15px 8px 9px;
  clip-path: polygon(8px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 8px 100%, 0 50%);
  background:
    linear-gradient(145deg, rgba(22, 18, 34, 0.92), rgba(9, 9, 17, 0.96)),
    rgba(17, 17, 26, 0.9);
  box-shadow:
    0 0 22px rgba(139, 54, 255, 0.16),
    0 16px 44px rgba(0, 0, 0, 0.38),
    inset 0 0 18px rgba(179, 109, 255, 0.04);
}

.orbit-node.quick-tool::before {
  content: "";
  position: absolute;
  inset: 5px 9px;
  border: 1px solid rgba(176, 108, 255, 0.18);
  clip-path: polygon(8px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 8px 100%, 0 50%);
  pointer-events: none;
}

.orbit-node i {
  border-color: rgba(231, 213, 255, 0.2);
  background:
    radial-gradient(circle, rgba(139, 54, 255, 0.28), rgba(17, 17, 26, 0.86));
  color: var(--void-purple-soft);
  box-shadow: 0 0 18px rgba(139, 54, 255, 0.22);
}

.orbit-node span {
  color: var(--void-text);
  text-shadow: 0 0 12px rgba(179, 109, 255, 0.32);
}

.orbit-node:focus-visible,
.orbit-node:hover {
  border-color: rgba(231, 213, 255, 0.34);
  background:
    linear-gradient(145deg, rgba(32, 22, 48, 0.96), rgba(10, 8, 18, 0.98)),
    rgba(17, 17, 26, 0.96);
  box-shadow:
    0 0 34px rgba(179, 109, 255, 0.36),
    0 16px 50px rgba(0, 0, 0, 0.4),
    inset 0 0 18px rgba(179, 109, 255, 0.08);
}

@keyframes void-crack-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      inset 0 0 24px rgba(0, 0, 0, 0.86),
      inset 0 0 18px rgba(179, 109, 255, 0.08),
      0 0 28px rgba(139, 54, 255, 0.18),
      0 0 72px rgba(139, 54, 255, 0.1);
  }
  50% {
    filter: brightness(1.08);
    box-shadow:
      inset 0 0 24px rgba(0, 0, 0, 0.86),
      inset 0 0 26px rgba(179, 109, 255, 0.13),
      0 0 36px rgba(179, 109, 255, 0.28),
      0 0 88px rgba(139, 54, 255, 0.18);
  }
}

@keyframes void-particle-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes void-orb-image-orbit {
  0% {
    object-position: 40% 48%;
    transform: translate(-50%, -50%) translateX(-18px) rotate(-7deg) rotateY(-34deg) scaleX(0.9) scaleY(1.05);
    filter: saturate(1.08) contrast(1.1) brightness(0.7) drop-shadow(0 0 30px rgba(139, 54, 255, 0.2));
  }
  25% {
    object-position: 50% 48%;
    transform: translate(-50%, -50%) translateX(0) rotate(-7deg) rotateY(0deg) scaleX(1.04) scaleY(1.05);
    filter: saturate(1.14) contrast(1.12) brightness(0.82) drop-shadow(0 0 42px rgba(179, 109, 255, 0.3));
  }
  50% {
    object-position: 60% 48%;
    transform: translate(-50%, -50%) translateX(18px) rotate(-7deg) rotateY(34deg) scaleX(0.9) scaleY(1.05);
    filter: saturate(1.08) contrast(1.1) brightness(0.72) drop-shadow(0 0 30px rgba(139, 54, 255, 0.2));
  }
  75% {
    object-position: 50% 48%;
    transform: translate(-50%, -50%) translateX(0) rotate(-7deg) rotateY(0deg) scaleX(1.04) scaleY(1.05);
    filter: saturate(1.14) contrast(1.12) brightness(0.82) drop-shadow(0 0 42px rgba(179, 109, 255, 0.3));
  }
  100% {
    object-position: 40% 48%;
    transform: translate(-50%, -50%) translateX(-18px) rotate(-7deg) rotateY(-34deg) scaleX(0.9) scaleY(1.05);
    filter: saturate(1.08) contrast(1.1) brightness(0.7) drop-shadow(0 0 30px rgba(139, 54, 255, 0.2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-launcher::after,
  .void-orb-art {
    animation: none !important;
  }
}

/* Remove center label orb and add subtle VØID light particles */
.void-control-body .home-view {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.void-control-body .home-view > * {
  position: relative;
  z-index: 1;
}

.void-control-body .home-view::before,
.void-control-body .home-view::after {
  content: "";
  position: absolute;
  inset: -40px 0 auto;
  height: 760px;
  pointer-events: none;
  z-index: 0;
}

.void-control-body .home-view::before {
  background:
    radial-gradient(circle at 16% 12%, rgba(231, 213, 255, 0.38) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 8%, rgba(179, 109, 255, 0.34) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 28%, rgba(231, 213, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 38%, rgba(179, 109, 255, 0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 62%, rgba(231, 213, 255, 0.2) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 76%, rgba(139, 54, 255, 0.3) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 86%, rgba(231, 213, 255, 0.18) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 8px rgba(179, 109, 255, 0.55));
  opacity: 0.72;
  animation: void-light-particles 18s ease-in-out infinite;
}

.void-control-body .home-view::after {
  background:
    radial-gradient(circle at 52% 16%, rgba(179, 109, 255, 0.16), transparent 13rem),
    radial-gradient(circle at 50% 54%, rgba(139, 54, 255, 0.12), transparent 16rem);
  opacity: 0.8;
}

.orbit-launcher::before {
  display: none;
}

.orbit-launcher::after {
  z-index: 1;
}

@keyframes void-light-particles {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.54;
  }
  50% {
    transform: translate3d(10px, -16px, 0);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .void-control-body .home-view::before {
    animation: none !important;
  }
}

/* VØID interaction polish: keep cinematic orbit, make it feel tappable */
.void-control-body .topbar-brand strong {
  color: #f0e3ff;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-shadow: 0 0 16px rgba(179, 109, 255, 0.22);
}

.void-control-body .sidebar-toggle,
.void-control-body .mini-help,
.void-control-body .account-avatar-btn,
.void-control-body .bot-settings-cta,
.orbit-node.quick-tool {
  -webkit-tap-highlight-color: transparent;
}

.void-control-body .sidebar-toggle,
.void-control-body .mini-help {
  border-color: rgba(176, 108, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(22, 18, 34, 0.9), rgba(9, 9, 17, 0.94));
  color: rgba(231, 213, 255, 0.86);
  box-shadow: 0 0 22px rgba(139, 54, 255, 0.12), inset 0 0 14px rgba(179, 109, 255, 0.04);
}

.void-control-body .server-identity {
  padding-bottom: 4px;
}

.void-control-body .server-icon-wrap {
  transition: box-shadow 180ms ease, filter 180ms ease, transform 180ms ease;
}

.void-control-body .server-identity:active .server-icon-wrap,
.void-control-body .server-identity:focus-visible .server-icon-wrap {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    0 0 0 8px rgba(139, 54, 255, 0.06),
    0 0 72px rgba(179, 109, 255, 0.24),
    0 18px 54px rgba(0, 0, 0, 0.44);
}

.void-control-body .server-name-row strong {
  font-size: clamp(2.15rem, 8.8vw, 3.1rem);
  line-height: 1;
}

.void-control-body .server-name-row span {
  color: var(--void-purple-soft);
  text-shadow: 0 0 16px rgba(179, 109, 255, 0.4);
}

.void-control-body .bot-settings-cta {
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.void-control-body .bot-settings-cta:hover,
.void-control-body .bot-settings-cta:focus-visible {
  border-color: rgba(231, 213, 255, 0.34);
  filter: brightness(1.06);
  box-shadow:
    0 0 38px rgba(139, 54, 255, 0.24),
    0 16px 48px rgba(0, 0, 0, 0.38),
    inset 0 0 20px rgba(179, 109, 255, 0.08);
}

.void-control-body .bot-settings-cta:active {
  transform: translateY(1px) scale(0.992);
}

.orbit-launcher {
  margin-top: -4px;
}

.void-orb-art {
  opacity: 0.82;
  transition: filter 180ms ease, opacity 180ms ease;
}

.orbit-launcher:has(.orbit-node:hover) .void-orb-art,
.orbit-launcher:has(.orbit-node:focus-visible) .void-orb-art,
.orbit-launcher:has(.orbit-node:active) .void-orb-art {
  opacity: 0.92;
  filter: saturate(1.18) contrast(1.14) brightness(0.88) drop-shadow(0 0 46px rgba(179, 109, 255, 0.34));
}

.orbit-launcher:has(.node-community:hover),
.orbit-launcher:has(.node-community:focus-visible) {
  --active-orbit-x: 25%;
  --active-orbit-y: 26%;
}

.orbit-launcher:has(.node-moderation:hover),
.orbit-launcher:has(.node-moderation:focus-visible) {
  --active-orbit-x: 76%;
  --active-orbit-y: 32%;
}

.orbit-launcher:has(.node-protection:hover),
.orbit-launcher:has(.node-protection:focus-visible) {
  --active-orbit-x: 30%;
  --active-orbit-y: 54%;
}

.orbit-launcher:has(.node-studio:hover),
.orbit-launcher:has(.node-studio:focus-visible) {
  --active-orbit-x: 76%;
  --active-orbit-y: 58%;
}

.orbit-launcher:has(.node-automation:hover),
.orbit-launcher:has(.node-automation:focus-visible) {
  --active-orbit-x: 26%;
  --active-orbit-y: 78%;
}

.orbit-launcher:has(.node-support:hover),
.orbit-launcher:has(.node-support:focus-visible) {
  --active-orbit-x: 78%;
  --active-orbit-y: 82%;
}

.orbit-launcher {
  --active-orbit-x: 50%;
  --active-orbit-y: 50%;
}

.orbit-launcher .orbit-line-b::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(179, 109, 255, 0);
}

.orbit-launcher:has(.orbit-node:hover)::before,
.orbit-launcher:has(.orbit-node:focus-visible)::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 48%;
  width: 42%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(179, 109, 255, 0.42), rgba(179, 109, 255, 0));
  box-shadow: 0 0 14px rgba(179, 109, 255, 0.22);
  transform-origin: left center;
  transform: translate(0, -50%) rotate(var(--active-ray-angle, -18deg));
  z-index: 1;
}

.orbit-launcher:has(.node-community:hover)::before,
.orbit-launcher:has(.node-community:focus-visible)::before {
  --active-ray-angle: -146deg;
}

.orbit-launcher:has(.node-moderation:hover)::before,
.orbit-launcher:has(.node-moderation:focus-visible)::before {
  --active-ray-angle: -28deg;
}

.orbit-launcher:has(.node-protection:hover)::before,
.orbit-launcher:has(.node-protection:focus-visible)::before {
  --active-ray-angle: -190deg;
}

.orbit-launcher:has(.node-engagement:hover),
.orbit-launcher:has(.node-engagement:focus-visible) {
  --active-orbit-x: 30%;
  --active-orbit-y: 54%;
}

.orbit-launcher:has(.node-engagement:hover)::before,
.orbit-launcher:has(.node-engagement:focus-visible)::before {
  --active-ray-angle: -190deg;
}

.orbit-launcher:has(.node-studio:hover)::before,
.orbit-launcher:has(.node-studio:focus-visible)::before {
  --active-ray-angle: 8deg;
}

.orbit-launcher:has(.node-automation:hover)::before,
.orbit-launcher:has(.node-automation:focus-visible)::before {
  --active-ray-angle: 146deg;
}

.orbit-launcher:has(.node-support:hover)::before,
.orbit-launcher:has(.node-support:focus-visible)::before {
  --active-ray-angle: 42deg;
}

.orbit-node.quick-tool {
  min-height: 54px;
  padding: 9px 16px 9px 10px;
  touch-action: manipulation;
  transform: rotate(var(--node-rotate, 0deg)) translateY(0);
}

.orbit-node.quick-tool::before {
  opacity: 0.85;
}

.orbit-node.quick-tool::after {
  content: "";
  display: block;
  position: absolute;
  right: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid rgba(231, 213, 255, 0.72);
  border-right: 1.5px solid rgba(231, 213, 255, 0.72);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
}

.orbit-node i {
  width: 36px;
  height: 36px;
  font-size: 0.72rem;
}

.orbit-node span {
  padding-right: 4px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.orbit-node:focus-visible,
.orbit-node:hover {
  transform: rotate(var(--node-rotate, 0deg)) translateY(-2px) scale(1.025);
}

.orbit-node:active {
  transform: rotate(var(--node-rotate, 0deg)) translateY(1px) scale(0.985);
  filter: brightness(1.12);
}

.orbit-node:focus-visible i,
.orbit-node:hover i,
.orbit-node:active i {
  background:
    radial-gradient(circle, rgba(179, 109, 255, 0.4), rgba(17, 17, 26, 0.9));
  box-shadow:
    0 0 18px rgba(179, 109, 255, 0.4),
    inset 0 0 12px rgba(231, 213, 255, 0.06);
}

.node-community {
  left: 3%;
  top: 20px;
}

.node-moderation {
  right: 5px;
  top: 62px;
}

.node-protection {
  left: 11%;
  top: 139px;
}

.node-studio {
  right: 7px;
  top: 174px;
}

.node-automation {
  left: 1%;
  bottom: 54px;
}

.node-support {
  right: 7px;
  bottom: 20px;
}

@media (max-width: 390px) {
  .orbit-node.quick-tool {
    min-height: 50px;
    padding: 8px 13px 8px 8px;
  }

  .orbit-node i {
    width: 33px;
    height: 33px;
  }

  .orbit-node span {
    font-size: 0.82rem;
  }
}

/* VOID orbit intent state: stronger controls without turning the surface into a grid */
.void-control-body .home-view {
  background:
    radial-gradient(circle at 50% 22%, rgba(179, 109, 255, 0.16), transparent 16rem),
    radial-gradient(circle at 50% 63%, rgba(139, 54, 255, 0.12), transparent 15rem),
    linear-gradient(180deg, rgba(12, 10, 22, 0.74), rgba(6, 6, 10, 0.1) 58%);
}

.void-control-body .server-name-row strong {
  color: #efe4ff;
  text-shadow:
    0 0 18px rgba(179, 109, 255, 0.34),
    0 2px 0 rgba(0, 0, 0, 0.28);
}

.void-control-body .server-identity em {
  color: rgba(231, 213, 255, 0.62);
}

.void-control-body .bot-settings-cta {
  border-color: rgba(176, 108, 255, 0.3);
}

.void-control-body .bot-settings-cta strong {
  color: rgba(231, 213, 255, 0.76);
}

.orbit-launcher[data-active-orbit] .void-orb-art {
  opacity: 0.96;
  filter: saturate(1.22) contrast(1.18) brightness(0.9) drop-shadow(0 0 54px rgba(179, 109, 255, 0.42));
}

.orbit-launcher[data-active-orbit] .orbit-line-a,
.orbit-launcher[data-active-orbit] .orbit-line-b {
  border-color: rgba(179, 109, 255, 0.26);
  box-shadow:
    0 0 22px rgba(139, 54, 255, 0.18),
    inset 0 0 18px rgba(179, 109, 255, 0.04);
}

.orbit-launcher[data-active-orbit]::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 48%;
  width: 42%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(231, 213, 255, 0.52), rgba(179, 109, 255, 0.2), rgba(179, 109, 255, 0));
  box-shadow: 0 0 18px rgba(179, 109, 255, 0.28);
  transform-origin: left center;
  transform: translate(0, -50%) rotate(var(--active-ray-angle, -18deg));
  z-index: 2;
  opacity: 0.9;
}

.orbit-launcher[data-active-orbit="community"]::before {
  --active-ray-angle: -146deg;
}

.orbit-launcher[data-active-orbit="moderation"]::before {
  --active-ray-angle: -28deg;
}

.orbit-launcher[data-active-orbit="protection"]::before {
  --active-ray-angle: -190deg;
}

.orbit-launcher[data-active-orbit="studio"]::before {
  --active-ray-angle: 8deg;
}

.orbit-launcher[data-active-orbit="automation"]::before {
  --active-ray-angle: 146deg;
}

.orbit-launcher[data-active-orbit="support"]::before {
  --active-ray-angle: 42deg;
}

.orbit-node.quick-tool {
  clip-path: polygon(9px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 9px 100%, 0 50%);
  border-color: rgba(176, 108, 255, 0.28);
  cursor: pointer;
}

.orbit-node.quick-tool::before {
  background:
    linear-gradient(90deg, rgba(179, 109, 255, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(15, 16, 28, 0.96), rgba(5, 6, 13, 0.82));
}

.orbit-node.quick-tool::after {
  transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease;
}

.orbit-node i,
.orbit-node span {
  position: relative;
  z-index: 2;
}

.orbit-node i {
  border-color: rgba(179, 109, 255, 0.36);
  color: #c9a8ff;
}

.orbit-node span {
  color: rgba(245, 247, 255, 0.88);
  text-shadow: 0 0 14px rgba(179, 109, 255, 0.18);
}

.orbit-node.is-orbit-intent,
.orbit-node:focus-visible,
.orbit-node:hover {
  border-color: rgba(231, 213, 255, 0.46);
  color: #fff;
  box-shadow:
    0 0 28px rgba(139, 54, 255, 0.32),
    0 14px 32px rgba(0, 0, 0, 0.42),
    inset 0 0 16px rgba(179, 109, 255, 0.08);
}

.orbit-node.is-orbit-intent::before,
.orbit-node:focus-visible::before,
.orbit-node:hover::before {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(179, 109, 255, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(20, 17, 34, 0.98), rgba(6, 6, 13, 0.9));
}

.orbit-node.is-orbit-intent::after,
.orbit-node:focus-visible::after,
.orbit-node:hover::after {
  opacity: 1;
  border-color: rgba(231, 213, 255, 0.92);
  transform: translate(2px, -50%) rotate(45deg);
}

.orbit-node.is-orbit-intent span,
.orbit-node:focus-visible span,
.orbit-node:hover span {
  color: #fff;
}

.orbit-node.is-orbit-intent i,
.orbit-node:focus-visible i,
.orbit-node:hover i {
  color: #f2e8ff;
}

.orbit-node:active {
  transition-duration: 80ms;
}

/* User-supplied orb, optimized for smooth mobile motion instead of heavy frame decoding. */
.void-orb-art.void-orb-static {
  width: min(118vw, 460px);
  top: 50%;
  object-fit: cover;
  object-position: 50% 52%;
  animation: void-orb-smooth-yaw 18s ease-in-out infinite;
  mix-blend-mode: normal;
  opacity: 0.92;
  filter:
    saturate(1.2)
    contrast(1.14)
    brightness(0.88)
    drop-shadow(0 0 38px rgba(179, 109, 255, 0.28));
  transform: translate(-50%, -50%) rotate(-5deg) rotateY(0deg) scale(1.02);
  will-change: transform;
}

.orbit-launcher:has(.orbit-node:hover) .void-orb-art.void-orb-static,
.orbit-launcher:has(.orbit-node:focus-visible) .void-orb-art.void-orb-static,
.orbit-launcher:has(.orbit-node:active) .void-orb-art.void-orb-static,
.orbit-launcher[data-active-orbit] .void-orb-art.void-orb-static {
  opacity: 0.98;
  filter:
    saturate(1.34)
    contrast(1.22)
    brightness(0.98)
    drop-shadow(0 0 46px rgba(179, 109, 255, 0.42));
}

@keyframes void-orb-smooth-yaw {
  0%, 100% {
    transform: translate(-50%, -50%) translateX(-12px) rotate(-5deg) rotateY(-34deg) scaleX(0.92) scaleY(1.02);
  }
  50% {
    transform: translate(-50%, -50%) translateX(12px) rotate(-5deg) rotateY(34deg) scaleX(1.04) scaleY(1.02);
  }
}

@media (max-width: 390px) {
  .void-orb-art.void-orb-static {
    width: min(124vw, 430px);
  }
}

/* Real VØID mark: replace the old text/placeholder block with the branded logo asset. */
.void-mark,
.void-control-body .void-mark.small {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  font-size: 0;
  text-indent: -999px;
  background:
    linear-gradient(145deg, rgba(231, 213, 255, 0.08), rgba(8, 8, 15, 0.18)),
    #050508 !important;
  border-color: rgba(176, 108, 255, 0.34);
  box-shadow:
    0 0 0 1px rgba(231, 213, 255, 0.04),
    0 0 28px rgba(139, 54, 255, 0.18),
    inset 0 0 18px rgba(179, 109, 255, 0.06);
}

.void-mark::before,
.void-control-body .void-mark.small::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: url("./assets/void-logo.webp") center / cover no-repeat;
  filter: saturate(1.08) contrast(1.08) brightness(0.9);
}

/* Mobile containment pass: prevent hero text and orbit pieces from widening the page. */
.void-control-body,
.void-control-body .void-shell,
.void-control-body .void-main,
.void-control-body .void-content,
.void-control-body .home-view {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.void-control-body .control-topbar {
  width: 100%;
  max-width: 100vw;
  min-width: 0;
}

.void-control-body .dash-view,
.void-control-body .hub-view,
.void-control-body .hub-shell-head,
.void-control-body .command-stack-panel,
.void-control-body .studio-preview,
.void-control-body .case-queue-panel,
.void-control-body .defense-panel,
.void-control-body .ticket-queue-panel,
.void-control-body .campaign-deck,
.void-control-body .journey-panel,
.void-control-body .config-status-panel,
.void-control-body .command-lab,
.void-control-body .vce-lab,
.void-control-body .vce-editor,
.void-control-body .vce-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.void-control-body .csp-row,
.void-control-body .csp-header {
  min-width: 0;
}

.void-control-body .csp-action,
.void-control-body .csp-cmd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.void-control-body .topbar-actions {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
}

.void-control-body .server-name-row {
  justify-content: center;
  max-width: 100%;
  padding-inline: 16px;
}

.void-control-body .server-name-row strong {
  max-width: calc(100vw - 76px);
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  font-size: clamp(2rem, 8vw, 2.72rem);
}

@media (max-width: 460px) {
  .void-control-body .topbar-brand {
    gap: 8px;
  }

  .void-control-body .sidebar-toggle {
    min-width: 104px;
    padding-inline: 14px;
  }
}

@media (max-width: 390px) {
  .void-control-body .topbar-brand span {
    display: none;
  }

  .void-control-body .sidebar-toggle {
    min-width: 98px;
    padding-inline: 12px;
  }
}

/* Premium planet replacement: removes the dirty solar rim and keeps the black-violet VØID core. */
.void-orb-art.void-orb-premium {
  width: min(104vw, 440px);
  aspect-ratio: 620 / 488;
  top: 55%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
  opacity: 0.92;
  transform: translate(-50%, -50%) rotate(-4deg) scale(1);
  animation: none;
  filter:
    saturate(1.18)
    contrast(1.12)
    brightness(0.82)
    drop-shadow(0 0 30px rgba(139, 54, 255, 0.22));
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 58%, rgba(0, 0, 0, 0.9) 70%, transparent 88%);
  mask-image: radial-gradient(ellipse at center, #000 0 58%, rgba(0, 0, 0, 0.9) 70%, transparent 88%);
}

.void-ring-spin {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(98vw, 410px);
  aspect-ratio: 2.05 / 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.52;
  transform-origin: 50% 50%;
  background:
    conic-gradient(
      from 20deg,
      transparent 0 8%,
      rgba(179, 109, 255, 0.06) 10% 15%,
      rgba(231, 213, 255, 0.32) 17% 22%,
      rgba(139, 54, 255, 0.14) 24% 30%,
      transparent 34% 56%,
      rgba(179, 109, 255, 0.1) 59% 64%,
      rgba(231, 213, 255, 0.24) 66% 70%,
      transparent 74% 100%
    );
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 55%, #000 57% 62%, transparent 65%);
  mask-image: radial-gradient(ellipse at center, transparent 0 55%, #000 57% 62%, transparent 65%);
  filter: blur(0.15px) drop-shadow(0 0 12px rgba(179, 109, 255, 0.26));
}

.void-ring-spin-a {
  animation: void-ring-slight-spin 34s linear infinite;
}

.void-ring-spin-b {
  width: min(84vw, 350px);
  top: 55%;
  opacity: 0.28;
  filter: blur(0.35px) drop-shadow(0 0 10px rgba(139, 54, 255, 0.2));
  animation: void-ring-slight-spin-reverse 52s linear infinite;
}

.orbit-launcher:has(.orbit-node:hover) .void-orb-art.void-orb-premium,
.orbit-launcher:has(.orbit-node:focus-visible) .void-orb-art.void-orb-premium,
.orbit-launcher:has(.orbit-node:active) .void-orb-art.void-orb-premium,
.orbit-launcher[data-active-orbit] .void-orb-art.void-orb-premium {
  opacity: 1;
  filter:
    saturate(1.26)
    contrast(1.18)
    brightness(0.94)
    drop-shadow(0 0 46px rgba(179, 109, 255, 0.38));
}

@keyframes void-ring-slight-spin {
  from {
    transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-11deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(62deg) rotateZ(349deg);
  }
}

@keyframes void-ring-slight-spin-reverse {
  from {
    transform: translate(-50%, -50%) rotateX(62deg) rotateZ(24deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-336deg);
  }
}

@keyframes void-orb-premium-drift {
  0%, 100% {
    transform: translate(-50%, -50%) translateX(-10px) rotate(-5deg) scale(0.99);
  }
  50% {
    transform: translate(-50%, -50%) translateX(10px) rotate(-2deg) scale(1.03);
  }
}

@media (max-width: 390px) {
  .void-orb-art.void-orb-premium {
    width: min(110vw, 415px);
  }
}

/* Orbit command buttons: replace initials with sci-fi system glyphs. */
.orbit-node.quick-tool {
  min-height: 56px;
  padding: 8px 19px 8px 8px;
  gap: 9px;
  border-color: rgba(176, 108, 255, 0.36);
  background:
    linear-gradient(90deg, rgba(179, 109, 255, 0.1), transparent 32%),
    linear-gradient(145deg, rgba(12, 13, 23, 0.96), rgba(3, 4, 9, 0.9));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(231, 213, 255, 0.03),
    inset 0 0 18px rgba(179, 109, 255, 0.045);
}

.orbit-node.quick-tool::before {
  background:
    linear-gradient(90deg, rgba(179, 109, 255, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(11, 12, 22, 0.98), rgba(4, 4, 10, 0.92));
}

.orbit-node.quick-tool::after {
  right: 10px;
  width: 6px;
  height: 6px;
  border-color: rgba(231, 213, 255, 0.72);
}

.module-glyph {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border: 1px solid rgba(179, 109, 255, 0.42);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 44%, rgba(179, 109, 255, 0.32), transparent 42%),
    rgba(9, 9, 17, 0.86);
  box-shadow:
    inset 0 0 12px rgba(179, 109, 255, 0.08),
    0 0 18px rgba(139, 54, 255, 0.18);
}

.module-glyph::before,
.module-glyph::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.glyph-community::before {
  width: 18px;
  height: 10px;
  border: 2px solid rgba(231, 213, 255, 0.78);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  bottom: 9px;
}

.glyph-community::after {
  width: 5px;
  height: 5px;
  top: 10px;
  left: 50%;
  border-radius: 999px;
  background: rgba(231, 213, 255, 0.86);
  box-shadow:
    -8px 3px 0 rgba(179, 109, 255, 0.74),
    8px 3px 0 rgba(179, 109, 255, 0.74);
  transform: translateX(-50%);
}

.glyph-moderation::before {
  width: 18px;
  height: 21px;
  background: linear-gradient(180deg, rgba(231, 213, 255, 0.88), rgba(179, 109, 255, 0.28));
  clip-path: polygon(50% 0, 88% 16%, 82% 64%, 50% 100%, 18% 64%, 12% 16%);
}

.glyph-moderation::after {
  width: 8px;
  height: 2px;
  background: rgba(8, 8, 15, 0.9);
  transform: rotate(-38deg);
}

.glyph-protection::before {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(231, 213, 255, 0.82);
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
}

.glyph-protection::after {
  width: 8px;
  height: 8px;
  border: 2px solid rgba(179, 109, 255, 0.86);
  border-radius: 999px;
}

.glyph-studio::before {
  width: 20px;
  height: 15px;
  border-left: 2px solid rgba(231, 213, 255, 0.84);
  border-right: 2px solid rgba(231, 213, 255, 0.84);
}

.glyph-studio::after {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(179, 109, 255, 0.86);
  transform: rotate(45deg);
}

.glyph-automation::before {
  width: 22px;
  height: 2px;
  background: rgba(231, 213, 255, 0.74);
  box-shadow:
    0 -7px 0 rgba(179, 109, 255, 0.64),
    0 7px 0 rgba(179, 109, 255, 0.64);
}

.glyph-automation::after {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(231, 213, 255, 0.88);
  box-shadow:
    -10px -7px 0 rgba(231, 213, 255, 0.72),
    10px 7px 0 rgba(231, 213, 255, 0.72);
}

.glyph-support::before {
  width: 20px;
  height: 15px;
  border: 2px solid rgba(231, 213, 255, 0.82);
  border-radius: 5px 5px 7px 7px;
}

.glyph-support::after {
  width: 8px;
  height: 7px;
  left: 18px;
  bottom: 10px;
  border-right: 2px solid rgba(179, 109, 255, 0.86);
  border-bottom: 2px solid rgba(179, 109, 255, 0.86);
  transform: skewX(-20deg);
}

.orbit-node.is-orbit-intent .module-glyph,
.orbit-node:focus-visible .module-glyph,
.orbit-node:hover .module-glyph,
.orbit-node:active .module-glyph {
  border-color: rgba(231, 213, 255, 0.58);
  background:
    radial-gradient(circle at 50% 44%, rgba(179, 109, 255, 0.46), transparent 44%),
    rgba(12, 11, 22, 0.92);
  box-shadow:
    inset 0 0 14px rgba(231, 213, 255, 0.08),
    0 0 24px rgba(179, 109, 255, 0.38);
}

@media (max-width: 390px) {
  .orbit-node.quick-tool {
    min-height: 52px;
    gap: 7px;
    padding: 7px 16px 7px 7px;
  }

  .module-glyph {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}

@media (max-width: 520px) {
  .orbit-help {
    right: 18px;
  }

  .node-moderation {
    right: 22px;
  }

  .node-studio {
    right: 24px;
  }

  .node-support {
    right: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   VØID DESIGN POLISH · Glyph overhaul + tooltip fixes + orbit polish
   ═══════════════════════════════════════════════════════════════════ */

/* ── MODERATION: filled badge with checkmark instead of diagonal bar ── */
.glyph-moderation::before {
  width: 20px;
  height: 23px;
  background: linear-gradient(160deg, rgba(231, 213, 255, 0.92), rgba(179, 109, 255, 0.32));
  clip-path: polygon(50% 0, 92% 20%, 86% 68%, 50% 100%, 14% 68%, 8% 20%);
}
.glyph-moderation::after {
  width: 9px;
  height: 5px;
  background: none;
  border-left: 2.5px solid rgba(8, 8, 15, 0.94);
  border-bottom: 2.5px solid rgba(8, 8, 15, 0.94);
  transform: rotate(-42deg) translateY(-2px);
}

/* ── PROTECTION: sharper hex shield + keyhole ── */
.glyph-protection::before {
  width: 21px;
  height: 23px;
  border: 2px solid rgba(231, 213, 255, 0.88);
  border-radius: 0;
  clip-path: polygon(50% 0, 93% 22%, 88% 70%, 50% 100%, 12% 70%, 7% 22%);
  background: none;
}
.glyph-protection::after {
  width: 7px;
  height: 7px;
  border: 1.5px solid rgba(179, 109, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 0 7px rgba(179, 109, 255, 0.55);
  background: none;
}

/* ── STUDIO: diamond reticle + center glow ── */
.glyph-studio::before {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(231, 213, 255, 0.80);
  border-left: 2px solid rgba(231, 213, 255, 0.80);
  border-right: 2px solid rgba(231, 213, 255, 0.80);
  background: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.glyph-studio::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(179, 109, 255, 0.96);
  box-shadow:
    0 0 7px rgba(179, 109, 255, 0.85),
    0 0 18px rgba(179, 109, 255, 0.5);
  border: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* ── AUTOMATION: lightning bolt (clip-path polygon) ── */
.glyph-automation::before {
  width: 17px;
  height: 22px;
  background: rgba(231, 213, 255, 0.86);
  clip-path: polygon(66% 0%, 24% 50%, 56% 50%, 34% 100%, 100% 46%, 62% 46%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
}
.glyph-automation::after {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 14px rgba(179, 109, 255, 0.6),
    0 0 6px rgba(231, 213, 255, 0.35);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* ── ENGAGEMENT: 5-pointed star (rewards/activity) ── */
.glyph-engagement::before {
  width: 18px;
  height: 18px;
  background: rgba(255, 200, 55, 0.88);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.glyph-engagement::after {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 14px rgba(255, 200, 55, 0.55), 0 0 6px rgba(255, 200, 55, 0.35);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ── ANALYTICS: ascending bar chart (insight/data) ── */
.glyph-analytics::before {
  width: 20px;
  height: 14px;
  background: rgba(55, 210, 180, 0.86);
  clip-path: polygon(
    0% 100%, 0% 58%, 26% 58%, 26% 100%,
    38% 100%, 38% 28%, 64% 28%, 64% 100%,
    76% 100%, 76% 4%, 100% 4%, 100% 100%
  );
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
}
.glyph-analytics::after {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(55, 210, 180, 0.92);
  box-shadow: 0 0 8px rgba(55, 210, 180, 0.65);
  top: 8px;
  right: 8px;
}

/* ── SETTINGS: three-track slider equalizer (config/control) ── */
.glyph-settings::before {
  width: 18px;
  height: 2px;
  background: rgba(155, 170, 200, 0.78);
  box-shadow:
    0 -6px 0 rgba(155, 170, 200, 0.78),
    0  6px 0 rgba(155, 170, 200, 0.78);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.glyph-settings::after {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(155, 170, 200, 0.94);
  top: calc(50% - 8.5px);
  left: calc(50% - 6px);
  box-shadow:
    7px 6px 0 rgba(155, 170, 200, 0.94),
    -3px 12px 0 rgba(155, 170, 200, 0.94);
}

/* ── SUPPORT: clean chat bubble with corner tail ── */
.glyph-support::before {
  width: 21px;
  height: 15px;
  border: 2px solid rgba(231, 213, 255, 0.82);
  border-radius: 5px 5px 5px 2px;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
}
.glyph-support::after {
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(231, 213, 255, 0.70);
  border-bottom: 2px solid rgba(231, 213, 255, 0.70);
  border-left: none;
  border-top: none;
  border-radius: 0 0 2px 0;
  bottom: 8px;
  left: calc(50% - 12px);
  transform: none;
}

/* ── TOOLTIP POSITIONING ── */

/* Right-side nodes: right-align tooltip to prevent viewport overflow */
.node-moderation strong,
.node-studio strong {
  left: auto;
  right: 0;
  transform: translateY(-4px);
}
.node-moderation:hover strong,
.node-moderation:focus-visible strong,
.node-studio:hover strong,
.node-studio:focus-visible strong {
  opacity: 1;
  transform: translateY(0);
}

/* Support: appears above the button, right-aligned */
.node-support strong {
  top: auto;
  bottom: calc(100% + 8px);
  left: auto;
  right: 0;
  transform: translateY(4px);
}
.node-support:hover strong,
.node-support:focus-visible strong {
  opacity: 1;
  transform: translateY(0);
}

/* Commands node: appears above the button, left-aligned */
.node-automation strong {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  transform: translateY(4px);
}
.node-automation:hover strong,
.node-automation:focus-visible strong {
  opacity: 1;
  transform: translateY(0);
}

/* ── TOPBAR SIDEBAR TOGGLE: bevel highlight ── */
.void-control-body .sidebar-toggle {
  box-shadow:
    0 0 22px rgba(139, 54, 255, 0.12),
    inset 0 0 14px rgba(179, 109, 255, 0.04),
    inset 0 1px 0 rgba(231, 213, 255, 0.09);
}

/* ── ORBIT RING: slightly sharper at peak brightness points ── */
.void-ring-spin-a {
  opacity: 0.58;
  filter: blur(0.12px) drop-shadow(0 0 14px rgba(179, 109, 255, 0.3));
}

/* ── ORBIT NODE: lifted active state ── */
.orbit-node:active {
  transform: rotate(var(--node-rotate, 0deg)) translateY(2px) scale(0.978);
}

/* ── ORBIT NODE: right-side right-to-left entry angle for small screens ── */
@media (max-width: 390px) {
  .node-moderation strong,
  .node-studio strong,
  .node-support strong {
    max-width: 190px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   VØID MODULE SELECTOR REDESIGN
   Shape → chamfered octagon (reference match)
   Glyph → per-module accent color
   Label → uppercase command-panel style
   Layout → tighter, evenly distributed, reduced rotation
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. BUTTON SHAPE: chamfered octagon, 12px cuts on all 4 corners ── */
.orbit-node.quick-tool {
  min-width: 158px;
  min-height: 54px;
  padding: 9px 22px 9px 10px;
  border-radius: 0;
  clip-path: polygon(
    12px 0%, calc(100% - 12px) 0%,
    100% 12px, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 12px 100%,
    0% calc(100% - 12px), 0% 12px
  );
  border-color: rgba(176, 108, 255, 0.40);
  background:
    linear-gradient(135deg, rgba(179, 109, 255, 0.16) 0%, transparent 40%),
    linear-gradient(180deg, rgba(8, 9, 18, 0.98), rgba(3, 4, 12, 1));
  box-shadow:
    0 0 24px rgba(139, 54, 255, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.44),
    inset 0 0 18px rgba(179, 109, 255, 0.04);
}

/* ── 2. INNER BEVEL: octagon inset with chamfer-matched clip-path ── */
.orbit-node.quick-tool::before {
  inset: 5px;
  border: 1px solid rgba(231, 213, 255, 0.22);
  border-radius: 0;
  clip-path: polygon(
    7px 0%, calc(100% - 7px) 0%,
    100% 7px, 100% calc(100% - 7px),
    calc(100% - 7px) 100%, 7px 100%,
    0% calc(100% - 7px), 0% 7px
  );
  background:
    linear-gradient(135deg, rgba(231, 213, 255, 0.09) 0%, transparent 48%),
    linear-gradient(180deg, rgba(12, 13, 26, 0.97), rgba(4, 5, 14, 0.98));
}

/* ── 3. CHEVRON: hidden — octagon chamfer acts as directional cue ── */
.orbit-node.quick-tool::after {
  display: none;
}

/* ── 4. LABEL: uppercase command-panel style ── */
.orbit-node span {
  font-size: 0.81rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 213, 255, 0.92);
  padding-right: 0;
}

/* ── 5. HOVER / FOCUS STATE ── */
.orbit-node.is-orbit-intent,
.orbit-node:focus-visible,
.orbit-node:hover {
  border-color: rgba(231, 213, 255, 0.54);
  background:
    linear-gradient(135deg, rgba(231, 213, 255, 0.13) 0%, transparent 46%),
    linear-gradient(180deg, rgba(16, 17, 32, 0.99), rgba(6, 7, 18, 1));
  box-shadow:
    0 0 38px rgba(179, 109, 255, 0.44),
    0 14px 38px rgba(0, 0, 0, 0.48),
    inset 0 0 22px rgba(179, 109, 255, 0.08);
}
.orbit-node.is-orbit-intent::before,
.orbit-node:focus-visible::before,
.orbit-node:hover::before {
  opacity: 1;
  border-color: rgba(231, 213, 255, 0.40);
  background:
    linear-gradient(135deg, rgba(231, 213, 255, 0.14) 0%, transparent 52%),
    linear-gradient(180deg, rgba(16, 17, 32, 0.99), rgba(6, 7, 18, 1));
}

/* ── 6. LAYOUT: reduced rotation, evenly distributed vertically ── */
.node-community  { --node-rotate: -2deg;    left: 2%;   top: 22px;    }
.node-moderation { --node-rotate:  1.5deg;  right: 5px; top: 64px;    }
.node-protection { --node-rotate: -2deg;    left: 5%;   top: 152px;   }
.node-studio     { --node-rotate:  2deg;    right: 5px; top: 194px;   }
.node-automation { --node-rotate:  1.5deg;  left: 1%;   bottom: 50px; }
.node-support    { --node-rotate: -1.5deg;  right: 5px; bottom: 18px; }

@media (min-width: 560px) {
  .node-community  { left: 9%;   top: 26px;    }
  .node-moderation { right: 9%;  top: 68px;    }
  .node-protection { left: 14%;  top: 158px;   }
  .node-studio     { right: 15%; top: 200px;   }
  .node-automation { left: 8%;   bottom: 52px; }
  .node-support    { right: 12%; bottom: 18px; }
}

@media (max-width: 390px) {
  .orbit-node.quick-tool {
    min-width: 146px;
    min-height: 50px;
    padding: 8px 18px 8px 8px;
  }
  .node-moderation { right: 4px; }
  .node-studio     { right: 4px; }
  .node-support    { right: 4px; }
}

/* ── 7. GLYPH ACCENT COLORS: per-module identity ── */
.module-glyph {
  border-color: rgba(179, 109, 255, 0.52);
  background:
    radial-gradient(circle at 50% 44%, rgba(179, 109, 255, 0.32), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(179, 109, 255, 0.1),
    0 0 18px rgba(139, 54, 255, 0.22);
}

/* Members: green (social/growth) */
.glyph-community {
  border-color: rgba(77, 220, 120, 0.52);
  background:
    radial-gradient(circle at 50% 44%, rgba(77, 220, 120, 0.28), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(77, 220, 120, 0.08),
    0 0 20px rgba(77, 220, 120, 0.24);
}
/* Moderation: amber (authority/law) */
.glyph-moderation {
  border-color: rgba(255, 183, 77, 0.52);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 183, 77, 0.26), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(255, 183, 77, 0.08),
    0 0 20px rgba(255, 183, 77, 0.26);
}
/* Moderation defense: red (security) */
.glyph-protection {
  border-color: rgba(255, 77, 100, 0.52);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 77, 100, 0.26), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(255, 77, 100, 0.08),
    0 0 20px rgba(255, 77, 100, 0.26);
}
/* Studio: VOID purple (creative) */
.glyph-studio {
  border-color: rgba(179, 109, 255, 0.58);
  background:
    radial-gradient(circle at 50% 44%, rgba(179, 109, 255, 0.38), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(179, 109, 255, 0.12),
    0 0 22px rgba(139, 54, 255, 0.30);
}
/* Commands: blue (digital/logic) */
.glyph-automation {
  border-color: rgba(88, 130, 255, 0.54);
  background:
    radial-gradient(circle at 50% 44%, rgba(88, 130, 255, 0.30), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(88, 130, 255, 0.10),
    0 0 20px rgba(88, 130, 255, 0.28);
}
/* Support: cyan (communication) */
.glyph-support {
  border-color: rgba(77, 190, 255, 0.50);
  background:
    radial-gradient(circle at 50% 44%, rgba(77, 190, 255, 0.26), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(77, 190, 255, 0.08),
    0 0 20px rgba(77, 190, 255, 0.24);
}

/* Engagement: gold (rewards/activity) */
.glyph-engagement {
  border-color: rgba(255, 200, 55, 0.50);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 200, 55, 0.26), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(255, 200, 55, 0.08),
    0 0 20px rgba(255, 200, 55, 0.24);
}
/* Activity: teal (insight/data) */
.glyph-analytics {
  border-color: rgba(55, 210, 180, 0.50);
  background:
    radial-gradient(circle at 50% 44%, rgba(55, 210, 180, 0.26), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(55, 210, 180, 0.08),
    0 0 20px rgba(55, 210, 180, 0.24);
}
/* Settings: silver-blue (config/control) */
.glyph-settings {
  border-color: rgba(155, 170, 200, 0.46);
  background:
    radial-gradient(circle at 50% 44%, rgba(155, 170, 200, 0.22), transparent 44%),
    rgba(9, 9, 17, 0.90);
  box-shadow:
    inset 0 0 12px rgba(155, 170, 200, 0.06),
    0 0 18px rgba(155, 170, 200, 0.20);
}

/* ── 8. GLYPH HOVER STATES: each module brightens its own color ── */
.node-community:hover .glyph-community,
.node-community:focus-visible .glyph-community {
  border-color: rgba(77, 220, 120, 0.82);
  background: radial-gradient(circle at 50% 44%, rgba(77, 220, 120, 0.50), transparent 44%), rgba(7, 12, 9, 0.96);
  box-shadow: inset 0 0 14px rgba(77, 220, 120, 0.12), 0 0 30px rgba(77, 220, 120, 0.54);
}
.node-moderation:hover .glyph-moderation,
.node-moderation:focus-visible .glyph-moderation {
  border-color: rgba(255, 183, 77, 0.82);
  background: radial-gradient(circle at 50% 44%, rgba(255, 183, 77, 0.48), transparent 44%), rgba(13, 10, 6, 0.96);
  box-shadow: inset 0 0 14px rgba(255, 183, 77, 0.12), 0 0 30px rgba(255, 183, 77, 0.54);
}
.node-protection:hover .glyph-protection,
.node-protection:focus-visible .glyph-protection {
  border-color: rgba(255, 77, 100, 0.82);
  background: radial-gradient(circle at 50% 44%, rgba(255, 77, 100, 0.48), transparent 44%), rgba(13, 7, 8, 0.96);
  box-shadow: inset 0 0 14px rgba(255, 77, 100, 0.12), 0 0 30px rgba(255, 77, 100, 0.54);
}
.node-studio:hover .glyph-studio,
.node-studio:focus-visible .glyph-studio {
  border-color: rgba(210, 150, 255, 0.88);
  background: radial-gradient(circle at 50% 44%, rgba(179, 109, 255, 0.60), transparent 44%), rgba(10, 8, 18, 0.96);
  box-shadow: inset 0 0 14px rgba(231, 213, 255, 0.12), 0 0 30px rgba(179, 109, 255, 0.58);
}
.node-automation:hover .glyph-automation,
.node-automation:focus-visible .glyph-automation {
  border-color: rgba(88, 130, 255, 0.86);
  background: radial-gradient(circle at 50% 44%, rgba(88, 130, 255, 0.52), transparent 44%), rgba(7, 8, 18, 0.96);
  box-shadow: inset 0 0 14px rgba(88, 130, 255, 0.14), 0 0 30px rgba(88, 130, 255, 0.56);
}
.node-support:hover .glyph-support,
.node-support:focus-visible .glyph-support {
  border-color: rgba(77, 190, 255, 0.82);
  background: radial-gradient(circle at 50% 44%, rgba(77, 190, 255, 0.48), transparent 44%), rgba(7, 10, 16, 0.96);
  box-shadow: inset 0 0 14px rgba(77, 190, 255, 0.12), 0 0 30px rgba(77, 190, 255, 0.54);
}
.node-engagement:hover .glyph-engagement,
.node-engagement:focus-visible .glyph-engagement {
  border-color: rgba(255, 200, 55, 0.84);
  background: radial-gradient(circle at 50% 44%, rgba(255, 200, 55, 0.50), transparent 44%), rgba(14, 12, 4, 0.96);
  box-shadow: inset 0 0 14px rgba(255, 200, 55, 0.12), 0 0 30px rgba(255, 200, 55, 0.54);
}
.node-analytics:hover .glyph-analytics,
.node-analytics:focus-visible .glyph-analytics {
  border-color: rgba(55, 210, 180, 0.84);
  background: radial-gradient(circle at 50% 44%, rgba(55, 210, 180, 0.50), transparent 44%), rgba(4, 14, 12, 0.96);
  box-shadow: inset 0 0 14px rgba(55, 210, 180, 0.12), 0 0 30px rgba(55, 210, 180, 0.54);
}
.node-settings:hover .glyph-settings,
.node-settings:focus-visible .glyph-settings {
  border-color: rgba(155, 170, 200, 0.78);
  background: radial-gradient(circle at 50% 44%, rgba(155, 170, 200, 0.44), transparent 44%), rgba(10, 11, 14, 0.96);
  box-shadow: inset 0 0 14px rgba(155, 170, 200, 0.10), 0 0 28px rgba(155, 170, 200, 0.44);
}

/* ── 9. ORBIT LAUNCHER: slightly taller for the new button sizes ── */
.orbit-launcher {
  min-height: 370px;
}
@media (min-width: 560px) {
  .orbit-launcher {
    min-height: 408px;
  }
}

/* ══════════════════════════════════════════
   HOME SCREEN ADDITIONS v=90
   Health Bar · Quick Actions · Module Status
   ══════════════════════════════════════════ */

/* Fix: browser [hidden] attr overridden by .search-empty-state display:grid */
.search-empty-state[hidden] { display: none !important; }

/* ── Health Bar ── */
.void-health-bar {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  flex-wrap: wrap;
}
.health-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(8, 9, 18, 0.90);
  border: 1px solid rgba(176, 108, 255, 0.22);
  border-radius: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(231, 213, 255, 0.72);
}
.health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.75);
  flex-shrink: 0;
  animation: void-hb-pulse 2.4s ease-in-out infinite;
}
@keyframes void-hb-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(34, 197, 94, 0.75); }
  50%       { opacity: 0.55; box-shadow: 0 0 4px rgba(34, 197, 94, 0.35); }
}
.health-label { color: rgba(231, 213, 255, 0.40); }

/* ── Section eyebrow shared ── */
.void-section-eyebrow {
  display: block;
  padding: 0 16px 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(231, 213, 255, 0.32);
}

/* ── Quick Actions Rail ── */
.void-quick-actions {
  padding: 4px 0 18px;
  max-width: 100%;
  overflow: hidden;
}
.qa-scroll-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 4px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  contain: paint;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.qa-scroll-row::-webkit-scrollbar { display: none; }
.qa-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(8, 9, 18, 0.92);
  border: 1px solid rgba(176, 108, 255, 0.26);
  border-radius: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(231, 213, 255, 0.80);
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s, color 0.16s;
}
.qa-chip:hover, .qa-chip:focus-visible {
  border-color: rgba(231, 213, 255, 0.48);
  background: rgba(16, 17, 32, 0.98);
  box-shadow: 0 0 16px rgba(179, 109, 255, 0.28);
  color: rgba(231, 213, 255, 1);
  outline: none;
}
.qa-arrow {
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(179, 109, 255, 0.90);
  font-style: normal;
  margin-right: 1px;
}

/* ── Module Status Strip ── */
.void-module-status {
  padding: 0 0 32px;
}
.mod-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px;
}
.mod-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 8px;
  background: rgba(8, 9, 18, 0.92);
  border: 1px solid rgba(176, 108, 255, 0.20);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, opacity 0.18s;
  text-align: left;
}
/* smaller glyph inside status chips */
.mod-chip .module-glyph {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.mod-chip-name {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(231, 213, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Toggle pill */
.mod-chip-toggle {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: rgba(231, 213, 255, 0.10);
  border: 1px solid rgba(231, 213, 255, 0.16);
  flex-shrink: 0;
  position: relative;
  transition: background 0.22s, border-color 0.22s;
  pointer-events: none;
}
.mod-chip-toggle::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(231, 213, 255, 0.40);
  top: 2px;
  left: 2px;
  transition: left 0.22s, background 0.22s;
}
/* Enabled */
.mod-chip.is-enabled {
  border-color: rgba(176, 108, 255, 0.36);
  box-shadow: 0 0 10px rgba(139, 54, 255, 0.10);
}
.mod-chip.is-enabled .mod-chip-toggle {
  background: rgba(139, 54, 255, 0.52);
  border-color: rgba(176, 108, 255, 0.58);
}
.mod-chip.is-enabled .mod-chip-toggle::after {
  left: 14px;
  background: rgba(231, 213, 255, 0.96);
}
/* Disabled */
.mod-chip.is-disabled {
  border-color: rgba(231, 213, 255, 0.09);
  opacity: 0.58;
}
.mod-chip.is-disabled .mod-chip-name { color: rgba(231, 213, 255, 0.42); }
/* Hover */
.mod-chip:hover {
  border-color: rgba(231, 213, 255, 0.32);
  box-shadow: 0 0 14px rgba(179, 109, 255, 0.18);
  opacity: 1;
}

/* ══════════════════════════════════════════
   HOME POLISH v=94
   Chat bubble above PFP · Status below PFP
   ══════════════════════════════════════════ */

/* Centered column: bubble → icon → status */
.server-id-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Chat bubble above the server icon ── */
.void-chat-bubble {
  position: relative;
  background: rgba(14, 9, 32, 0.97);
  border: 1px solid rgba(179, 109, 255, 0.40);
  border-radius: 12px;
  padding: 6px 16px;
  margin-bottom: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.70rem;
  font-weight: 500;
  color: rgba(231, 213, 255, 0.70);
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(139, 54, 255, 0.18), inset 0 1px 0 rgba(231, 213, 255, 0.07);
}
/* Border triangle (outer, matches border color) */
.void-chat-bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: rgba(179, 109, 255, 0.40);
  border-bottom: 0;
}
/* Fill triangle (inner, matches bubble background) */
.void-chat-bubble::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(14, 9, 32, 0.97);
  border-bottom: 0;
  z-index: 1;
}

/* ── Status row directly under the icon ── */
.bot-status-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 213, 255, 0.52);
}

/* Reset dot to inline (was absolute) */
.bot-status-dot {
  position: static;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: none;
  bottom: auto;
  right: auto;
  z-index: auto;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.80);
  animation: void-status-pulse 2.6s ease-in-out infinite;
}
@keyframes void-status-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.80); }
  50%       { box-shadow: 0 0 14px rgba(34, 197, 94, 1.0); }
}
.bot-status-dot.is-offline {
  background: #6b7280;
  box-shadow: none;
  animation: none;
}
.bot-status-dot.is-idle {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.70);
}

/* ══════════════════════════════════════════
   HOME POLISH v=95
   White chat bubble · Profile status row
   ══════════════════════════════════════════ */

/* Profile block: column-centered above the name */
.profile-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px 0;
  gap: 0;
}

/* WHITE chat bubble — Discord-style */
.void-chat-bubble {
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 8px 18px !important;
  margin-bottom: 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.80rem !important;
  font-weight: 500 !important;
  color: rgba(14, 8, 32, 0.88) !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  text-transform: none !important;
}
/* White downward tail */
.void-chat-bubble::after {
  border-top-color: rgba(255, 255, 255, 0.95) !important;
  bottom: -9px !important;
}
/* Hide the dark inner triangle — not needed for solid white */
.void-chat-bubble::before {
  display: none !important;
}

/* Profile status row: ● Online · 6/6 active  ⚙ */
.profile-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(231, 213, 255, 0.50);
}
.psr-sep { opacity: 0.30; font-size: 0.80rem; }
.psr-mods { color: rgba(179, 109, 255, 0.72); }

/* Gear / settings button */
.profile-gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(139, 54, 255, 0.16);
  border: 1px solid rgba(179, 109, 255, 0.28);
  color: rgba(179, 109, 255, 0.75);
  font-size: 0.72rem;
  cursor: pointer;
  margin-left: 2px;
  transition: background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.16s;
  line-height: 1;
}
.profile-gear-btn:hover,
.profile-gear-btn:focus-visible {
  background: rgba(139, 54, 255, 0.36);
  border-color: rgba(179, 109, 255, 0.65);
  color: rgba(231, 213, 255, 1);
  box-shadow: 0 0 12px rgba(139, 54, 255, 0.40);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   HUB PAGES PREMIUM REDESIGN — v=97
   Per-module identity · Atmospheric headers · Control-panel cards
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Module color tokens ─── */
#view-members    { --hub-c:#22c55e; --hub-c2:#86efac; --hub-glow:rgba(34,197,94,0.20);   --hub-border:rgba(34,197,94,0.46); }
#view-commands   { --hub-c:#3b82f6; --hub-c2:#93c5fd; --hub-glow:rgba(59,130,246,0.20);  --hub-border:rgba(59,130,246,0.48); }
#view-moderation { --hub-c:#f59e0b; --hub-c2:#fde68a; --hub-glow:rgba(245,158,11,0.20);  --hub-border:rgba(245,158,11,0.48); }
#view-studio     { --hub-c:#8b36ff; --hub-c2:#c09aff; --hub-glow:rgba(139,54,255,0.22);  --hub-border:rgba(139,54,255,0.50); }
#view-support    { --hub-c:#06b6d4; --hub-c2:#67e8f9; --hub-glow:rgba(6,182,212,0.20);   --hub-border:rgba(6,182,212,0.48); }
#view-engagement { --hub-c:#fbbf24; --hub-c2:#fde68a; --hub-glow:rgba(251,191,36,0.20);  --hub-border:rgba(251,191,36,0.46); }
#view-settings   { --hub-c:#94a3b8; --hub-c2:#e2e8f0; --hub-glow:rgba(148,163,184,0.12); --hub-border:rgba(148,163,184,0.36); }
/* ─── Alias tokens: legacy IDs map to current nav IDs ─── */
#view-community  { --hub-c:#22c55e; --hub-c2:#86efac; --hub-glow:rgba(34,197,94,0.20);   --hub-border:rgba(34,197,94,0.46); }
#view-automation { --hub-c:#3b82f6; --hub-c2:#93c5fd; --hub-glow:rgba(59,130,246,0.20);  --hub-border:rgba(59,130,246,0.48); }

/* ─── Hub Hero Header ─── */
.hub-view .hub-shell-head {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(110deg, var(--hub-glow, rgba(139,54,255,0.18)) 0%, transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.010) 54%),
    rgba(10,8,24,0.97) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-left: 3px solid var(--hub-c, #8b36ff) !important;
  box-shadow:
    0 0 60px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Large watermark number — data-hub-sys attribute */
.hub-view .hub-shell-head::before {
  content: attr(data-hub-sys);
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 5.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--hub-c, #8b36ff);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
}

/* Eyebrow: module color */
.hub-view .hub-shell-head .eyebrow {
  color: var(--hub-c, #8b36ff) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* h1: lighter accent + atmospheric glow */
.hub-view .hub-shell-head h1 {
  color: var(--hub-c2, #c09aff) !important;
  text-shadow: 0 0 52px var(--hub-glow, rgba(139,54,255,0.50));
}

/* Description */
.hub-view .hub-shell-head p {
  color: rgba(172,162,205,0.78);
}

/* CTA button: module color + glow */
.hub-view .hub-shell-head .btn.btn-primary {
  background: var(--hub-c, #8b36ff) !important;
  border-color: var(--hub-c, #8b36ff) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px var(--hub-glow, rgba(139,54,255,0.40)) !important;
  transition: filter 0.16s, box-shadow 0.16s;
}
.hub-view .hub-shell-head .btn.btn-primary:hover,
.hub-view .hub-shell-head .btn.btn-primary:focus-visible {
  filter: brightness(1.18);
  outline: none;
}

/* ─── Hub Area Grid: 2-col on mobile ─── */
.hub-view .hub-area-grid {
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 460px) {
  .hub-view .hub-area-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 1180px) {
  .hub-view .hub-area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ─── Hub Area Card: control-panel style ─── */
.hub-view .hub-area {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.052) 0%, rgba(255,255,255,0.009) 70%) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-top-color: rgba(255,255,255,0.11) !important;
  border-left: 2px solid var(--hub-border, rgba(139,54,255,0.48)) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.30) !important;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.14s;
  min-height: 96px;
  padding: 15px 48px 15px 16px;
}
.hub-view .hub-area:hover {
  border-left-color: var(--hub-c, #8b36ff) !important;
  border-top-color: rgba(255,255,255,0.20) !important;
  box-shadow:
    0 5px 28px rgba(0,0,0,0.38),
    0 0 0 1px var(--hub-border, rgba(139,54,255,0.28)),
    inset 0 0 20px var(--hub-glow, rgba(139,54,255,0.06)) !important;
  transform: translateY(-1px);
}

/* Feature name */
.hub-view .hub-area > span {
  color: rgba(230,218,255,0.94) !important;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Feature description */
.hub-view .hub-area > strong {
  color: rgba(162,152,192,0.72) !important;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.38;
}

/* Chevron arrow: module color */
.hub-view .hub-area::after {
  border-top-color: var(--hub-c, #8b36ff) !important;
  border-right-color: var(--hub-c, #8b36ff) !important;
  opacity: 0.35;
  transition: opacity 0.16s;
}
.hub-view .hub-area:hover::after { opacity: 0.85; }

/* ─── Status badge: dot + label ─── */
.hub-view .hub-area em {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 6px 0 18px !important;
  height: 20px;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: rgba(110,100,145,0.70) !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.63rem !important;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.hub-view .hub-area em::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(110,100,145,0.38);
}

/* Staged → blue */
.hub-view .hub-area em[data-status="staged"] {
  color: rgba(96,165,250,0.90) !important;
}
.hub-view .hub-area em[data-status="staged"]::before {
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59,130,246,0.80);
}

/* Live → green pulsing */
.hub-view .hub-area em[data-status="live"] {
  color: rgba(74,222,128,0.92) !important;
}
.hub-view .hub-area em[data-status="live"]::before {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.80);
  animation: void-status-pulse 2.6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR NAV REDESIGN — v=98
   Module glyphs replace numbers · Per-module colors
   ═══════════════════════════════════════════════════════ */

/* Module glyph in the nav: smaller square badge */
.void-nav-list .module-glyph {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

/* Nav pip: placeholder icon for non-module pages (Home, Settings, etc.) */
.nav-pip {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  background: rgba(255, 255, 255, 0.022);
  transition: border-color 0.18s, background 0.18s;
}
.nav-pip::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 3px;
  background: rgba(167, 139, 250, 0.32);
  transition: background 0.18s;
}

/* Active/hover: pip brightens */
.dash-nav-item:hover .nav-pip,
.dash-nav-item.active .nav-pip {
  border-color: rgba(167, 139, 250, 0.36);
  background: rgba(139, 54, 255, 0.10);
}
.dash-nav-item:hover .nav-pip::after,
.dash-nav-item.active .nav-pip::after {
  background: rgba(179, 109, 255, 0.70);
}

/* ── Per-module nav item: hover + active tinting ── */

/* Members compatibility tint */
.void-nav-list [data-view="community"]:hover,
.void-nav-list [data-view="community"].active {
  background: rgba(139, 54, 255, 0.11) !important;
  border-color: rgba(139, 54, 255, 0.34) !important;
}
.void-nav-list [data-view="community"].active::before { background: #8b36ff !important; }

/* Moderation — red */
.void-nav-list [data-view="moderation"]:hover,
.void-nav-list [data-view="moderation"].active {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.32) !important;
}
.void-nav-list [data-view="moderation"].active::before { background: #ef4444 !important; }
.void-nav-list [data-view="moderation"]:hover .module-glyph,
.void-nav-list [data-view="moderation"].active .module-glyph {
  border-color: rgba(239, 68, 68, 0.44);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.20);
}

/* Moderation defense compatibility tint */
.void-nav-list [data-view="protection"]:hover,
.void-nav-list [data-view="protection"].active {
  background: rgba(6, 182, 212, 0.10) !important;
  border-color: rgba(6, 182, 212, 0.32) !important;
}
.void-nav-list [data-view="protection"].active::before { background: #06b6d4 !important; }
.void-nav-list [data-view="protection"]:hover .module-glyph,
.void-nav-list [data-view="protection"].active .module-glyph {
  border-color: rgba(6, 182, 212, 0.44);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.20);
}

/* Studio — pink */
.void-nav-list [data-view="studio"]:hover,
.void-nav-list [data-view="studio"].active {
  background: rgba(236, 72, 153, 0.10) !important;
  border-color: rgba(236, 72, 153, 0.32) !important;
}
.void-nav-list [data-view="studio"].active::before { background: #ec4899 !important; }
.void-nav-list [data-view="studio"]:hover .module-glyph,
.void-nav-list [data-view="studio"].active .module-glyph {
  border-color: rgba(236, 72, 153, 0.44);
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.20);
}

/* Commands compatibility tint */
.void-nav-list [data-view="automation"]:hover,
.void-nav-list [data-view="automation"].active {
  background: rgba(245, 158, 11, 0.09) !important;
  border-color: rgba(245, 158, 11, 0.32) !important;
}
.void-nav-list [data-view="automation"].active::before { background: #f59e0b !important; }
.void-nav-list [data-view="automation"]:hover .module-glyph,
.void-nav-list [data-view="automation"].active .module-glyph {
  border-color: rgba(245, 158, 11, 0.44);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.20);
}

/* Support — blue */
.void-nav-list [data-view="support"]:hover,
.void-nav-list [data-view="support"].active {
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(59, 130, 246, 0.32) !important;
}
.void-nav-list [data-view="support"].active::before { background: #3b82f6 !important; }
.void-nav-list [data-view="support"]:hover .module-glyph,
.void-nav-list [data-view="support"].active .module-glyph {
  border-color: rgba(59, 130, 246, 0.44);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.20);
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR COLLAPSIBLE DRAWER — v=99
   Always overlay, never a static column
   ═══════════════════════════════════════════════════════ */

/* Sidebar: position:fixed overlay at ALL sizes */
.void-control-body .void-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100dvh !important;
  width: min(292px, 88vw) !important;
  transform: translateX(-104%) !important;
  transition: transform 0.22s cubic-bezier(0.32, 0, 0.18, 1) !important;
  z-index: 40 !important;
}
.void-control-body .void-nav.open {
  transform: translateX(0) !important;
  box-shadow: 24px 0 80px rgba(0, 0, 0, 0.60) !important;
}

/* Close button: always visible */
.void-control-body .nav-close {
  display: grid !important;
}

/* Shell: single column — content always takes full width */
@media (min-width: 760px) {
  .void-control-body .void-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Toggle button: always visible */
  .void-control-body .control-topbar .sidebar-toggle {
    display: flex !important;
  }
}

/* Scrim: show behind open sidebar at all sizes */
.void-control-body #sidebar-scrim {
  z-index: 39;
}

/* Toggle button: compact icon style on desktop */
@media (min-width: 760px) {
  .void-control-body .sidebar-toggle {
    padding: 0 14px !important;
    gap: 7px !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em !important;
  }
}

/* ─── v=100: Server-identity compact fix ─────────────────────────────────────
   Base CSS sets width:100% which made the button a giant invisible click
   target across the entire home page. Shrink it to fit-content so only
   the actual server card area is clickable.
   ─────────────────────────────────────────────────────────────────────────── */
.void-control-body .server-identity {
  width: fit-content !important;
  max-width: min(320px, 88vw) !important;
  align-self: center !important;
  padding: 14px 20px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(139, 54, 255, 0.18) !important;
  background: rgba(139, 54, 255, 0.05) !important;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s !important;
}
.void-control-body .server-identity:hover,
.void-control-body .server-identity:focus-visible {
  background: rgba(139, 54, 255, 0.10) !important;
  border-color: rgba(139, 54, 255, 0.38) !important;
  box-shadow: 0 0 18px rgba(139, 54, 255, 0.14) !important;
}
.void-control-body .server-identity em {
  font-size: 0.75rem !important;
  opacity: 0.55 !important;
}

/* ─── v=102: Mobile responsive fixes ─────────────────────────────────────────
   Hub icon grid and server-identity were not tuned for small screens.
   ─────────────────────────────────────────────────────────────────────────── */

/* 2-col cards on mid-mobile: tighter icon + padding */
@media (max-width: 759px) {
  .hub-view .hub-area {
    grid-template-columns: 32px 1fr !important;
    column-gap: 9px !important;
    padding: 12px 38px 12px 11px !important;
    min-height: 72px !important;
  }
  .hub-area-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 1-col full-width cards on very small phones: icon can breathe a bit more */
@media (max-width: 460px) {
  .hub-view .hub-area {
    grid-template-columns: 32px 1fr !important;
    column-gap: 10px !important;
    padding: 13px 38px 13px 12px !important;
    min-height: 76px !important;
  }
  .hub-area-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Server-identity: compact on small phones */
@media (max-width: 390px) {
  .void-control-body .server-identity {
    padding: 12px 16px 10px !important;
  }
}

/* ─── v=101: Hub area sub-module icons ───────────────────────────────────────
   Each hub-area card gets a small SVG icon (.hub-area-icon) before the title.
   Grid: col 1 = 24px icon (spans all rows, centered), col 2 = title/desc/badge.
   The icon uses currentColor so it inherits the module's --hub-c token.
   ─────────────────────────────────────────────────────────────────────────── */
.hub-view .hub-area {
  grid-template-columns: 36px 1fr !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  column-gap: 11px !important;
  padding: 13px 44px 13px 13px !important;
  min-height: 82px !important;
}
.hub-area-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--hub-c, rgba(167,139,250,0.75));
  opacity: 0.72;
  transition: opacity 0.18s, color 0.18s;
}
img.hub-area-icon {
  object-fit: contain;
  border-radius: 7px;
}
.hub-view .hub-area:hover .hub-area-icon { opacity: 1; }
.hub-view .hub-area > span   { grid-column: 2 !important; grid-row: 1 !important; }
.hub-view .hub-area > strong { grid-column: 2 !important; grid-row: 2 !important; }
.hub-view .hub-area > em     { grid-column: 2 !important; grid-row: 3 !important; }

/* v=102: hard mobile containment. Design target is 375px first. */
@media (max-width: 759px) {
  html,
  body,
  .void-control-body,
  .void-control-body .void-shell,
  .void-control-body .void-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .void-control-body .void-shell {
    display: block !important;
  }

  .void-control-body .control-topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .void-control-body .topbar-brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .void-control-body .topbar-actions {
    flex: 0 0 auto !important;
    gap: 7px !important;
    margin-left: 0 !important;
  }

  .void-control-body .sidebar-toggle {
    min-width: 102px !important;
    max-width: 108px !important;
    height: 48px !important;
    padding-inline: 12px !important;
    justify-content: center !important;
  }

  .void-control-body .account-avatar-btn {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .void-control-body .void-content,
  .void-control-body .control-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 10px 22px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .void-control-body .home-view {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-items: center !important;
    gap: 14px !important;
    padding-top: 14px !important;
    overflow: hidden !important;
  }

  .void-control-body .server-identity {
    width: min(100%, 340px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 13px 14px 11px !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .void-control-body .server-icon-wrap {
    width: 90px !important;
    height: 90px !important;
  }

  .void-control-body .server-name-row {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    justify-content: center !important;
  }

  .void-control-body .server-name-row strong {
    max-width: 100% !important;
    font-size: clamp(1.9rem, 7.6vw, 2.36rem) !important;
    line-height: 1.04 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .void-control-body .bot-settings-cta {
    width: calc(100vw - 24px) !important;
    max-width: 406px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding: 16px 74px 16px 18px !important;
    box-sizing: border-box !important;
  }

  .void-control-body .command-surface {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .void-control-body .orbit-launcher {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 330px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  .void-control-body .void-orb-art.void-orb-premium {
    width: min(104vw, 410px) !important;
    top: 55% !important;
  }

  .void-control-body .void-ring-spin {
    width: min(94vw, 360px) !important;
  }

  .void-control-body .orbit-help {
    right: 12px !important;
    top: 2px !important;
  }

  .void-control-body .orbit-node.quick-tool {
    min-height: 50px !important;
    max-width: 154px !important;
    padding: 7px 16px 7px 7px !important;
    gap: 7px !important;
    transform: rotate(var(--node-rotate, 0deg)) !important;
  }

  .void-control-body .module-glyph {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .void-control-body .orbit-node span {
    font-size: 0.78rem !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }

  .void-control-body .node-community  { left: 14px !important; top: 42px !important; right: auto !important; }
  .void-control-body .node-moderation { right: 14px !important; top: 78px !important; left: auto !important; }
  .void-control-body .node-protection { left: 42px !important; top: 134px !important; right: auto !important; }
  .void-control-body .node-studio     { right: 16px !important; top: 172px !important; left: auto !important; }
  .void-control-body .node-automation { left: 12px !important; bottom: 56px !important; right: auto !important; }
  .void-control-body .node-support    { right: 16px !important; bottom: 20px !important; left: auto !important; }
}

@media (max-width: 390px) {
  .void-control-body .topbar-brand span {
    display: none !important;
  }

  .void-control-body .sidebar-toggle {
    min-width: 96px !important;
    max-width: 100px !important;
  }

  .void-control-body .server-icon-wrap {
    width: 82px !important;
    height: 82px !important;
  }

  .void-control-body .server-name-row strong {
    font-size: clamp(1.74rem, 7.3vw, 2.08rem) !important;
  }

  .void-control-body .orbit-node.quick-tool {
    max-width: 146px !important;
  }

  .void-control-body .node-community  { left: 10px !important; }
  .void-control-body .node-moderation { right: 10px !important; }
  .void-control-body .node-protection { left: 34px !important; }
  .void-control-body .node-studio     { right: 10px !important; }
  .void-control-body .node-automation { left: 8px !important; }
  .void-control-body .node-support    { right: 10px !important; }
}

/* v=103: final mobile viewport lock. Keep the VØID command-surface look, but
   make 375px the hard source of truth so nothing pushes the page sideways. */
html {
  background: #050507 !important;
}

.void-control-body {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

.void-control-body .void-shell,
.void-control-body .void-main {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

@media (max-width: 759px) {
  html,
  body,
  .void-control-body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .void-control-body * {
    box-sizing: border-box !important;
  }

  .void-control-body .void-shell,
  .void-control-body .void-main,
  .void-control-body .void-content,
  .void-control-body .control-content,
  .void-control-body .home-view,
  .void-control-body .profile-block,
  .void-control-body .command-surface,
  .void-control-body .void-quick-actions,
  .void-control-body .void-module-status {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  .void-control-body .void-shell {
    display: block !important;
  }

  .void-control-body .void-main {
    display: block !important;
  }

  .void-control-body .control-topbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .void-control-body .topbar-brand {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  .void-control-body .topbar-brand > div:last-child {
    min-width: 0 !important;
  }

  .void-control-body .topbar-actions {
    width: auto !important;
    max-width: 132px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
  }

  .void-control-body .control-topbar .sidebar-toggle {
    width: 82px !important;
    min-width: 0 !important;
    max-width: 82px !important;
    height: 46px !important;
    padding-inline: 8px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
  }

  .void-control-body .account-avatar-btn {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 14px !important;
  }

  .void-control-body .account-avatar-btn img {
    width: 30px !important;
    height: 30px !important;
  }

  .void-control-body .control-content {
    padding: 0 10px 26px !important;
  }

  .void-control-body .home-view {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 13px !important;
    padding-top: 12px !important;
  }

  .void-control-body .profile-block {
    display: grid !important;
    justify-items: center !important;
    padding: 8px 0 0 !important;
  }

  .void-control-body .void-chat-bubble {
    max-width: calc(100vw - 32px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .void-control-body .server-identity {
    width: min(100%, 352px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    padding: 12px 8px 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .void-control-body .server-icon-wrap {
    width: 86px !important;
    height: 86px !important;
    border-radius: 50% !important;
  }

  .void-control-body .server-icon-wrap img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
  }

  .void-control-body .server-name-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 0 !important;
    gap: 6px !important;
  }

  .void-control-body .server-name-row strong {
    max-width: calc(100vw - 54px) !important;
    font-size: clamp(1.72rem, 7.3vw, 2.18rem) !important;
    line-height: 1.04 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance !important;
  }

  .void-control-body .server-identity em {
    font-size: 0.78rem !important;
  }

  .void-control-body .profile-status-row {
    max-width: calc(100vw - 28px) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 4px !important;
  }

  .void-control-body .bot-settings-cta {
    width: calc(100vw - 24px) !important;
    max-width: 406px !important;
    min-width: 0 !important;
    min-height: 76px !important;
    margin: 0 auto !important;
    padding: 15px 68px 15px 18px !important;
    text-align: left !important;
  }

  .void-control-body .bot-settings-cta span,
  .void-control-body .bot-settings-cta strong {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .void-control-body .command-surface {
    padding-top: 2px !important;
  }

  .void-control-body .orbit-help {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    justify-self: end !important;
    margin: 0 2px -8px 0 !important;
    z-index: 8 !important;
  }

  .void-control-body .orbit-launcher {
    position: relative !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 342px !important;
    height: 342px !important;
    margin: 0 !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }

  .void-control-body .void-orb-art.void-orb-premium {
    width: min(94vw, 354px) !important;
    max-width: none !important;
    left: 50% !important;
    top: 55% !important;
  }

  .void-control-body .void-ring-spin {
    width: min(84vw, 316px) !important;
    left: 50% !important;
    top: 55% !important;
  }

  .void-control-body .orbit-node.quick-tool {
    width: auto !important;
    min-width: 120px !important;
    max-width: 132px !important;
    min-height: 50px !important;
    padding: 7px 10px 7px 7px !important;
    gap: 7px !important;
    transform: rotate(var(--node-rotate, 0deg)) !important;
  }

  .void-control-body .orbit-node span {
    font-size: 0.72rem !important;
    letter-spacing: 0.055em !important;
    white-space: nowrap !important;
  }

  .void-control-body .orbit-node strong {
    display: none !important;
  }

  .void-control-body .module-glyph {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  .void-control-body .node-community  { left: 10px !important; right: auto !important; top: 42px !important; bottom: auto !important; }
  .void-control-body .node-moderation { left: auto !important; right: 10px !important; top: 76px !important; bottom: auto !important; }
  .void-control-body .node-protection { left: 30px !important; right: auto !important; top: 136px !important; bottom: auto !important; }
  .void-control-body .node-studio     { left: auto !important; right: 12px !important; top: 176px !important; bottom: auto !important; }
  .void-control-body .node-automation { left: 8px !important; right: auto !important; top: 254px !important; bottom: auto !important; }
  .void-control-body .node-support    { left: auto !important; right: 12px !important; top: 282px !important; bottom: auto !important; }

  .void-control-body .qa-scroll-row {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 4px !important;
    overflow-x: auto !important;
  }

  .void-control-body .mod-status-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    padding-inline: 4px !important;
  }

  .void-control-body .mod-chip {
    min-width: 0 !important;
  }
}

@media (max-width: 390px) {
  .void-control-body .topbar-brand span {
    display: none !important;
  }

  .void-control-body .void-mark.small {
    width: 38px !important;
    height: 38px !important;
  }

  .void-control-body .control-topbar .sidebar-toggle {
    width: 76px !important;
    max-width: 76px !important;
    height: 44px !important;
    font-size: 0.66rem !important;
  }

  .void-control-body .account-avatar-btn {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .void-control-body .control-content {
    padding-inline: 8px !important;
  }

  .void-control-body .server-name-row strong {
    max-width: calc(100vw - 46px) !important;
    font-size: clamp(1.56rem, 7.2vw, 1.98rem) !important;
  }

  .void-control-body .bot-settings-cta {
    width: calc(100vw - 18px) !important;
    padding-right: 62px !important;
  }

  .void-control-body .orbit-launcher {
    width: 100% !important;
    max-width: 100% !important;
    height: 336px !important;
    min-height: 336px !important;
  }

  .void-control-body .void-orb-art.void-orb-premium {
    width: min(92vw, 336px) !important;
  }

  .void-control-body .orbit-node.quick-tool {
    min-width: 112px !important;
    max-width: 124px !important;
  }

  .void-control-body .orbit-node span {
    font-size: 0.62rem !important;
  }

  .void-control-body .module-glyph {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }

  .void-control-body .node-community  { left: 6px !important; top: 42px !important; }
  .void-control-body .node-moderation { left: auto !important; right: 6px !important; top: 76px !important; }
  .void-control-body .node-protection { left: 20px !important; top: 134px !important; }
  .void-control-body .node-studio     { left: auto !important; right: 8px !important; top: 174px !important; }
  .void-control-body .node-automation { left: 4px !important; top: 254px !important; }
  .void-control-body .node-support    { left: auto !important; right: 8px !important; top: 282px !important; }
}

/* v=105: Bot Settings functional form. Keep styling restrained; this is wiring-first. */
#view-settings .settings-grid {
  display: none !important;
}

#view-settings .hub-shell-head > button[data-action] {
  display: none !important;
}

.bot-settings-form {
  width: 100%;
  display: grid;
  gap: 12px;
}

.settings-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(176, 108, 255, 0.18);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(22, 18, 34, 0.82), rgba(9, 9, 17, 0.9));
}

.settings-panel[data-settings-section="general"],
.settings-panel[data-settings-section="audit"] {
  grid-column: 1 / -1;
}

.settings-panel-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.settings-panel-head span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.settings-panel-head strong {
  color: var(--void-text, #f5f7ff);
  font-size: 0.95rem;
}

.settings-panel-head em,
.settings-note,
.settings-save-state {
  color: var(--void-muted, #a7aecf);
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.45;
}

.config-status-panel .csp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.config-status-panel .csp-header em {
  color: rgba(167, 174, 207, 0.78);
  font-size: 0.72rem;
  font-style: normal;
  text-align: right;
}

.settings-core-card,
.settings-inline-status,
.settings-access-stack > div,
.settings-audit-row,
.settings-empty-state,
.settings-warning-list > div {
  border: 1px solid rgba(176, 108, 255, 0.14);
  border-radius: 12px;
  background: rgba(7, 7, 12, 0.48);
}

.settings-core-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
}

.settings-core-card img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(176, 108, 255, 0.28);
}

.settings-core-card span,
.settings-access-stack > div,
.settings-audit-row {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.settings-core-card strong,
.settings-inline-status strong,
.settings-access-stack strong,
.settings-audit-row strong {
  color: rgba(245, 247, 255, 0.94);
  font-size: 0.86rem;
}

.settings-core-card em,
.settings-access-stack span,
.settings-audit-row span,
.settings-audit-row em,
.settings-empty-state {
  color: rgba(167, 174, 207, 0.78);
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.38;
}

.settings-inline-status {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.settings-inline-status span {
  color: rgba(245, 247, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 800;
}

.settings-access-stack,
.settings-audit-list,
.settings-warning-list {
  display: grid;
  gap: 8px;
}

.settings-access-stack > div,
.settings-audit-row,
.settings-empty-state,
.settings-warning-list > div {
  padding: 10px 12px;
}

.settings-warning-list > div {
  border-color: rgba(244, 63, 94, 0.32);
  color: #ff8ca5;
  background: rgba(244, 63, 94, 0.08);
  font-size: 0.76rem;
  line-height: 1.42;
}

.settings-field option[data-invalid="true"] {
  color: #ff8ca5;
}

.settings-field option:disabled {
  color: rgba(167, 174, 207, 0.52);
}

/* ═══════════════════════════════════════════════════════════════════════
   VØID HUB REDESIGN · Tile cards + dramatic module headers + animations
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. SHELL HEAD: stronger identity panel ── */
.hub-view .hub-shell-head {
  min-height: 148px !important;
  background:
    radial-gradient(ellipse at 92% 60%, var(--hub-glow, rgba(139,54,255,0.22)) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 20%, var(--hub-glow, rgba(139,54,255,0.10)) 0%, transparent 50%),
    rgba(6, 6, 14, 0.99) !important;
  border: 1px solid var(--hub-border, rgba(139,54,255,0.36)) !important;
  border-top: 3px solid var(--hub-c, #8b36ff) !important;
  border-left: none !important;
  box-shadow:
    0 8px 48px rgba(0,0,0,0.55),
    inset 0 0 80px var(--hub-glow, rgba(139,54,255,0.07)),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.hub-view .hub-shell-head::before {
  font-size: 9.5rem !important;
  opacity: 0.06 !important;
  right: -10px !important;
  top: 55% !important;
}

/* ── 2. TILE CARDS: flip to vertical flex layout ── */
.hub-view .hub-area-grid .hub-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 14px 13px 12px !important;
  min-height: 138px !important;
  background:
    radial-gradient(ellipse at 50% -10%, var(--hub-glow, rgba(139,54,255,0.13)) 0%, transparent 65%),
    rgba(9, 9, 18, 0.98) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-top: 3px solid var(--hub-c, rgba(139,54,255,0.85)) !important;
  border-left: none !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 22px rgba(0,0,0,0.36) !important;
  transition: transform 0.24s var(--ease-out), box-shadow 0.24s, border-top-color 0.18s, background 0.24s !important;
  overflow: hidden !important;
}

.hub-view .hub-area-grid .hub-area:hover {
  transform: translateY(-4px) !important;
  background:
    radial-gradient(ellipse at 50% -10%, var(--hub-glow, rgba(139,54,255,0.22)) 0%, transparent 65%),
    rgba(12, 11, 22, 0.99) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.50),
    0 0 0 1px var(--hub-border, rgba(139,54,255,0.26)),
    inset 0 0 40px var(--hub-glow, rgba(139,54,255,0.06)) !important;
  border-top-color: var(--hub-c, #8b36ff) !important;
}

/* ── 3. ICON: top of tile, not sidebar column ── */
.hub-view .hub-area-grid .hub-area .hub-area-icon,
.hub-view .hub-area-grid .hub-area img.hub-area-icon {
  grid-column: unset !important;
  grid-row: unset !important;
  align-self: flex-start !important;
  justify-self: flex-start !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 10px !important;
  opacity: 0.88 !important;
  transition: opacity 0.18s !important;
}
.hub-view .hub-area-grid .hub-area:hover .hub-area-icon { opacity: 1 !important; }

/* ── 4. TYPOGRAPHY ── */
.hub-view .hub-area-grid .hub-area > span {
  grid-column: unset !important;
  grid-row: unset !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.005em !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin-bottom: 5px !important;
}

.hub-view .hub-area-grid .hub-area > strong {
  grid-column: unset !important;
  grid-row: unset !important;
  font-size: 0.68rem !important;
  color: rgba(162, 154, 200, 0.65) !important;
  line-height: 1.38 !important;
  flex: 1 !important;
  margin-bottom: 8px !important;
}

.hub-view .hub-area-grid .hub-area > em {
  grid-column: unset !important;
  grid-row: unset !important;
  margin-top: auto !important;
  font-size: 0.58rem !important;
  padding-left: 14px !important;
}

/* ── 5. HIDE CHEVRON ARROW (no space in tile layout) ── */
.hub-view .hub-area-grid .hub-area::after { display: none !important; }

/* ── 6. ENTRY ANIMATION: cascade tiles in on view switch ── */
@keyframes hub-tile-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.dash-view.active .hub-shell-head {
  animation: hub-tile-in 0.50s var(--ease-out) both 0.02s;
}
.dash-view.active .hub-area-grid .hub-area {
  animation: hub-tile-in 0.44s var(--ease-out) both;
}
.dash-view.active .hub-area-grid .hub-area:nth-child(1) { animation-delay: 0.06s; }
.dash-view.active .hub-area-grid .hub-area:nth-child(2) { animation-delay: 0.10s; }
.dash-view.active .hub-area-grid .hub-area:nth-child(3) { animation-delay: 0.14s; }
.dash-view.active .hub-area-grid .hub-area:nth-child(4) { animation-delay: 0.18s; }
.dash-view.active .hub-area-grid .hub-area:nth-child(5) { animation-delay: 0.22s; }
.dash-view.active .hub-area-grid .hub-area:nth-child(6) { animation-delay: 0.26s; }
.dash-view.active .hub-area-grid .hub-area:nth-child(7) { animation-delay: 0.30s; }
.dash-view.active .hub-area-grid .hub-area:nth-child(8) { animation-delay: 0.34s; }
.dash-view.active .hub-area-grid .hub-area:nth-child(9) { animation-delay: 0.38s; }

/* ── 7. MOBILE: override existing 460px single-col rule, keep 2-col down to 340px ── */
@media (max-width: 460px) {
  .hub-view .hub-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 340px) {
  .hub-view .hub-area-grid { grid-template-columns: 1fr !important; }
}

.settings-field {
  display: grid;
  gap: 7px;
}

.settings-field > span,
.settings-check span {
  color: rgba(245, 247, 255, 0.86);
  font-size: 0.82rem;
  font-weight: 800;
}

.settings-field input,
.settings-field select,
.settings-field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(176, 108, 255, 0.22);
  border-radius: 10px;
  background: rgba(7, 7, 12, 0.82);
  color: var(--void-text, #f5f7ff);
  padding: 10px 12px;
  font: inherit;
}

.settings-field textarea {
  resize: vertical;
  min-height: 88px;
}

.settings-field select[multiple] {
  min-height: 116px;
  padding: 8px;
}

.settings-color-field {
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: end;
}

.settings-color-field > span {
  grid-column: 1 / -1;
}

.settings-color-field input[type="color"] {
  padding: 4px;
}

.settings-check {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(176, 108, 255, 0.14);
  border-radius: 10px;
  background: rgba(7, 7, 12, 0.5);
}

.settings-check input {
  width: 20px;
  height: 20px;
  accent-color: #8b36ff;
}

.settings-action-row {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 0 2px;
  background: linear-gradient(180deg, rgba(7, 7, 10, 0), rgba(7, 7, 10, 0.96) 30%);
}

.settings-mini-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.settings-save-state {
  margin: 0 0 4px;
}

.settings-save-state.is-error {
  color: #ff6b8a;
}

#settings-save-btn:disabled {
  opacity: 0.58;
  cursor: wait;
}

@media (min-width: 760px) {
  .bot-settings-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-panel[data-settings-section="permissions"],
  .settings-panel[data-settings-section="logging"],
  .settings-panel[data-settings-section="advanced"],
  .settings-action-row,
  .settings-save-state {
    grid-column: 1 / -1;
  }
}

/* v=106: route visibility guard. Earlier mobile containment must not keep the
   overview/home view rendered underneath other dashboard screens. */
.void-control-body .dash-view:not(.active) {
  display: none !important;
}

@media (max-width: 759px) {
  .void-control-body .home-view:not(.active),
  .void-control-body .dash-view:not(.active) {
    display: none !important;
  }

  .void-control-body .home-view.active {
    display: grid !important;
  }
}

/* v=104: smooth animation pass. Keeps the VØID motion system, but moves the
   heavy animated parts onto composited layers and avoids repaint-heavy states. */
.void-control-body .home-view,
.void-control-body .command-surface,
.void-control-body .orbit-launcher {
  isolation: isolate;
}

.void-control-body .orbit-launcher {
  contain: layout paint style;
  transform: translateZ(0);
}

.void-control-body .void-orb-art,
.void-control-body .void-orb-art.void-orb-premium,
.void-control-body .void-ring-spin,
.void-control-body .orbit-line,
.void-control-body .orbit-line::after,
.void-control-body .orbit-node.quick-tool,
.void-control-body .module-glyph,
.void-control-body .home-view::before {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.void-control-body .void-orb-art,
.void-control-body .void-orb-art.void-orb-premium,
.void-control-body .void-ring-spin,
.void-control-body .orbit-line,
.void-control-body .orbit-line::after {
  will-change: transform, opacity;
}

.void-control-body .orbit-node.quick-tool,
.void-control-body .module-glyph {
  will-change: transform;
}

.void-control-body .void-orb-art.void-orb-premium {
  filter:
    saturate(1.12)
    contrast(1.1)
    brightness(0.84)
    drop-shadow(0 0 22px rgba(139, 54, 255, 0.2));
}

.orbit-launcher:has(.orbit-node:hover) .void-orb-art.void-orb-premium,
.orbit-launcher:has(.orbit-node:focus-visible) .void-orb-art.void-orb-premium,
.orbit-launcher:has(.orbit-node:active) .void-orb-art.void-orb-premium,
.orbit-launcher[data-active-orbit] .void-orb-art.void-orb-premium {
  filter:
    saturate(1.16)
    contrast(1.12)
    brightness(0.9)
    drop-shadow(0 0 30px rgba(179, 109, 255, 0.3));
}

.void-control-body .void-ring-spin {
  filter: drop-shadow(0 0 9px rgba(179, 109, 255, 0.2));
}

.void-control-body .void-ring-spin-b {
  filter: drop-shadow(0 0 7px rgba(139, 54, 255, 0.16));
}

.void-control-body .home-view::before {
  filter: none;
  opacity: 0.55;
}

.void-control-body .orbit-node.quick-tool {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.34),
    0 0 16px rgba(139, 54, 255, 0.055),
    inset 0 0 12px rgba(179, 109, 255, 0.035);
}

.void-control-body .orbit-node.is-orbit-intent,
.void-control-body .orbit-node:focus-visible,
.void-control-body .orbit-node:hover {
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(179, 109, 255, 0.3),
    inset 0 0 16px rgba(179, 109, 255, 0.08);
}

.void-control-body .orbit-node.is-orbit-intent .module-glyph,
.void-control-body .orbit-node:focus-visible .module-glyph,
.void-control-body .orbit-node:hover .module-glyph,
.void-control-body .orbit-node:active .module-glyph {
  filter: none;
  box-shadow:
    inset 0 0 10px rgba(231, 213, 255, 0.08),
    0 0 18px rgba(179, 109, 255, 0.34);
}

.void-control-body .bot-status-dot {
  will-change: opacity;
}

@media (max-width: 759px) {
  .void-control-body .orbit-node.quick-tool {
    transform: translate3d(0, 0, 0) rotate(var(--node-rotate, 0deg));
  }

  .void-control-body .void-orb-art.void-orb-premium {
    filter:
      saturate(1.08)
      contrast(1.08)
      brightness(0.82)
      drop-shadow(0 0 18px rgba(139, 54, 255, 0.18));
  }

  .void-control-body .void-ring-spin {
    opacity: 0.44;
  }

  .void-control-body .orbit-line {
    opacity: 0.38;
  }

  .void-control-body .orbit-node.quick-tool {
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.34),
      0 0 12px rgba(139, 54, 255, 0.055),
      inset 0 0 10px rgba(179, 109, 255, 0.035);
  }

  .void-control-body .orbit-node.is-orbit-intent,
  .void-control-body .orbit-node:focus-visible,
  .void-control-body .orbit-node:hover {
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.38),
      0 0 20px rgba(179, 109, 255, 0.28),
      inset 0 0 14px rgba(179, 109, 255, 0.075);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   VØID CONTROL SURFACES · New component CSS for unique page layouts
   ═══════════════════════════════════════════════════════════════════════ */

/* ── STATUS CHIPS ── */
.status-chip {
  display: inline-flex; align-items: center; padding: 2px 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; border-radius: 4px;
  border: 1px solid; white-space: nowrap; flex-shrink: 0;
}
.chip-live    { color: #4ade80; border-color: rgba(74,222,128,0.40); background: rgba(74,222,128,0.08); }
.chip-ready   { color: #93c5fd; border-color: rgba(147,197,253,0.36); background: rgba(147,197,253,0.07); }
.chip-staged  { color: #c4b5fd; border-color: rgba(196,181,253,0.36); background: rgba(196,181,253,0.07); }
.chip-draft   { color: #fbbf24; border-color: rgba(251,191,36,0.40); background: rgba(251,191,36,0.08); }
.chip-sync    { color: #f0abfc; border-color: rgba(240,171,252,0.38); background: rgba(168,85,247,0.10); }
.chip-coming  { color: #64748b; border-color: rgba(100,116,139,0.28); background: transparent; }
.chip-armed   { color: #4ade80; border-color: rgba(74,222,128,0.40); background: rgba(74,222,128,0.10); }
.chip-standby { color: #fbbf24; border-color: rgba(251,191,36,0.36); background: rgba(251,191,36,0.08); }

/* ── BUILDER DOCK (Studio) ── */
.builder-dock {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px;
  scrollbar-width: none;
}
.builder-dock::-webkit-scrollbar { display: none; }
.dock-pill {
  flex-shrink: 0; padding: 7px 16px;
  background: rgba(139,54,255,0.10); border: 1px solid rgba(139,54,255,0.30);
  border-radius: 999px; color: rgba(196,181,253,0.90);
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.dock-pill:hover, .dock-pill-active {
  background: rgba(139,54,255,0.22); border-color: rgba(139,54,255,0.60);
  color: #e9d5ff;
}

/* ── SUBSYSTEM RAIL (shared) ── */
.subsystem-rail {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 6px;
  scrollbar-width: none;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;
}
.subsystem-rail::-webkit-scrollbar { display: none; }
.rail-card {
  flex-shrink: 0; width: 96px; min-height: 96px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 10px 10px;
  background: rgba(9,9,18,0.97); border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid var(--hub-c, rgba(139,54,255,0.70));
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out, ease), box-shadow 0.18s;
}
.rail-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.40), 0 0 0 1px var(--hub-border, rgba(139,54,255,0.30));
}
.rail-card .rail-icon { width: 30px; height: 30px; object-fit: contain; }
.rail-card > span { font-size: 0.70rem; font-weight: 700; color: #fff; line-height: 1.2; }
.rail-card > .status-chip { margin-top: auto; }

/* ── ACTION DOCK (shared) ── */
.action-dock {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px;
  scrollbar-width: none;
}
.action-dock::-webkit-scrollbar { display: none; }
.dock-action {
  flex-shrink: 0; padding: 8px 16px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px; color: rgba(206,207,209,0.90);
  font-size: 0.76rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dock-action:hover {
  background: var(--hub-glow, rgba(139,54,255,0.12));
  border-color: var(--hub-border, rgba(139,54,255,0.40));
  color: #fff;
}

/* ── COMMAND STACK PANEL ── */
.command-stack-panel {
  background: rgba(9,9,18,0.97); border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--hub-c, #3b82f6);
  border-radius: 18px; overflow: hidden;
}
.csp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.csp-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(147,197,253,0.80); }
.csp-rows { display: flex; flex-direction: column; gap: 0; }
.csp-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  transition: background 0.14s;
}
.csp-row:hover { background: rgba(59,130,246,0.06); }
.csp-cmd {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.80rem; font-weight: 600;
  color: #93c5fd; min-width: 72px; flex-shrink: 0;
}
.csp-arrow { color: rgba(148,163,184,0.40); font-size: 0.80rem; flex-shrink: 0; }
.csp-action { font-size: 0.75rem; color: rgba(206,207,209,0.75); flex: 1; min-width: 0; }
.csp-row .status-chip { margin-left: auto; flex-shrink: 0; }
.csp-row-add { padding: 10px 16px 14px; }
.csp-add-btn {
  padding: 6px 14px; background: rgba(59,130,246,0.12);
  border: 1px dashed rgba(59,130,246,0.36); border-radius: 8px;
  color: rgba(147,197,253,0.80); font-size: 0.74rem; font-weight: 600; cursor: pointer;
}
.csp-add-btn:hover { background: rgba(59,130,246,0.20); border-color: rgba(59,130,246,0.60); }

/* ── FLOW PREVIEW ── */
.flow-preview {
  display: flex; align-items: center; gap: 0; padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  overflow-x: auto; scrollbar-width: none;
}
.flow-preview::-webkit-scrollbar { display: none; }
.flow-node {
  flex-shrink: 0; padding: 6px 14px;
  background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.34);
  border-radius: 8px; font-size: 0.72rem; font-weight: 700;
  font-family: 'IBM Plex Mono', monospace; color: #93c5fd;
}
.flow-line {
  flex-shrink: 0; width: 28px; height: 1px;
  background: linear-gradient(90deg, rgba(59,130,246,0.40), rgba(59,130,246,0.15));
}

/* ── CASE QUEUE PANEL ── */
.case-queue-panel {
  background: rgba(9,9,18,0.97); border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--hub-c, #f59e0b);
  border-radius: 18px; overflow: hidden;
}
.cqp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.cqp-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(253,230,138,0.80); }
.cqp-rows { display: flex; flex-direction: column; }
.cqp-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  transition: background 0.14s;
}
.cqp-row:hover { background: rgba(245,158,11,0.05); }
.cqp-row-alert { background: rgba(239,68,68,0.04); }
.cqp-id { font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; font-weight: 700; color: rgba(253,230,138,0.65); min-width: 38px; flex-shrink: 0; }
.cqp-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cqp-type { font-size: 0.78rem; font-weight: 700; color: #e5e7eb; }
.cqp-user { font-size: 0.68rem; color: rgba(148,163,184,0.60); font-family: 'IBM Plex Mono', monospace; }
.cqp-row .status-chip { margin-left: auto; flex-shrink: 0; }

/* ── DEFENSE PANEL ── */
.defense-panel {
  background: rgba(9,9,18,0.96); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 14px 16px;
}
.defense-header { margin-bottom: 10px; }
.defense-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.70rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(253,230,138,0.70); }
.defense-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.defense-chip {
  padding: 5px 11px; border-radius: 6px; border: 1px solid;
  font-size: 0.68rem; font-weight: 700; font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── TICKET QUEUE PANEL ── */
.ticket-queue-panel {
  background: rgba(9,9,18,0.97); border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--hub-c, #06b6d4);
  border-radius: 18px; overflow: hidden;
}
.tqp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.tqp-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(103,232,249,0.80); }
.tqp-rows { display: flex; flex-direction: column; gap: 0; padding: 0 16px 12px; }
.tqp-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tqp-row:last-child { border-bottom: none; }
.tqp-category { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tqp-label { font-size: 0.78rem; font-weight: 700; color: #e5e7eb; }
.tqp-count { font-size: 0.70rem; color: rgba(103,232,249,0.70); font-family: 'IBM Plex Mono', monospace; }
.tqp-bar { height: 4px; background: rgba(255,255,255,0.07); border-radius: 999px; overflow: hidden; }
.tqp-fill { height: 100%; background: linear-gradient(90deg, var(--hub-c, #06b6d4), var(--hub-c2, #67e8f9)); border-radius: 999px; }
.ticket-panel-preview {
  margin: 0 16px 14px; padding: 12px 14px;
  background: rgba(6,182,212,0.06); border: 1px solid rgba(6,182,212,0.20);
  border-radius: 12px;
}
.tpp-header { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: rgba(103,232,249,0.65); margin-bottom: 10px; font-family: 'IBM Plex Mono', monospace; }
.tpp-body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tpp-open-btn {
  padding: 7px 18px; background: rgba(6,182,212,0.16); border: 1px solid rgba(6,182,212,0.42);
  border-radius: 8px; color: #67e8f9; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  transition: background 0.15s;
}
.tpp-open-btn:hover { background: rgba(6,182,212,0.28); }
.tpp-meta { display: flex; flex-direction: column; gap: 3px; }
.tpp-detail { font-size: 0.68rem; color: rgba(148,163,184,0.65); }

/* ── CAMPAIGN DECK ── */
.campaign-deck {
  background: rgba(9,9,18,0.97); border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--hub-c, #fbbf24);
  border-radius: 18px; overflow: hidden;
}
.campaign-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.campaign-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(253,230,138,0.80); }
.campaign-cards { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 16px; scrollbar-width: none; }
.campaign-cards::-webkit-scrollbar { display: none; }
.campaign-card {
  flex-shrink: 0; width: 180px; padding: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
}
.campaign-card-highlight { border-color: rgba(251,191,36,0.32); background: rgba(251,191,36,0.05); }
.cc-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cc-type { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(253,230,138,0.65); font-family: 'IBM Plex Mono', monospace; }
.cc-title { font-size: 0.86rem; font-weight: 800; color: #fff; margin-bottom: 5px; }
.cc-detail { font-size: 0.70rem; color: rgba(148,163,184,0.65); margin-bottom: 8px; }
.cc-bar { height: 3px; background: rgba(255,255,255,0.07); border-radius: 999px; overflow: hidden; }
.cc-fill { height: 100%; background: linear-gradient(90deg, #fbbf24, #fde68a); border-radius: 999px; }

/* ── MEMBER JOURNEY ── */
.journey-panel {
  background: rgba(9,9,18,0.97); border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--hub-c, #22c55e);
  border-radius: 18px; padding: 14px 16px;
}
.journey-header { margin-bottom: 16px; }
.journey-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(134,239,172,0.80); }
.journey-path { display: flex; align-items: flex-start; overflow-x: auto; gap: 0; padding-bottom: 4px; scrollbar-width: none; }
.journey-path::-webkit-scrollbar { display: none; }
.journey-step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 72px; flex-shrink: 0; }
.journey-node {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(34,197,94,0.30); background: rgba(34,197,94,0.08);
}
.journey-node-live { border-color: rgba(34,197,94,0.60); background: rgba(34,197,94,0.14); box-shadow: 0 0 16px rgba(34,197,94,0.20); }
.journey-node-draft { border-color: rgba(251,191,36,0.40); background: rgba(251,191,36,0.08); }
.journey-node .rail-icon { width: 26px; height: 26px; }
.journey-step-label { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.journey-step-label > span { font-size: 0.66rem; font-weight: 700; color: rgba(206,207,209,0.80); text-align: center; }
.journey-connector {
  flex-shrink: 0; width: 20px; height: 2px; margin-top: 25px;
  background: linear-gradient(90deg, rgba(34,197,94,0.40), rgba(34,197,94,0.15));
}

/* ── CONFIG STATUS PANEL ── */
.config-status-panel {
  background: rgba(9,9,18,0.97); border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid var(--hub-c, #94a3b8);
  border-radius: 18px; overflow: hidden; margin-bottom: 14px;
}
.config-status-panel .csp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.config-status-panel .csp-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(226,232,240,0.70); }
.config-status-rows { display: flex; flex-direction: column; }
.config-status-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  transition: background 0.14s;
}
.config-status-row:hover { background: rgba(148,163,184,0.05); }
.config-status-row .rail-icon { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.csr-label { font-size: 0.80rem; font-weight: 700; color: #e5e7eb; flex: 1; }
.config-status-row .status-chip { margin-left: auto; flex-shrink: 0; }

/* ── HUB SHELL HEAD: data-hub-sys text/symbol update ── */
.hub-view .hub-shell-head[data-hub-sys="ST"]::before,
.hub-view .hub-shell-head[data-hub-sys="CM"]::before,
.hub-view .hub-shell-head[data-hub-sys="MD"]::before,
.hub-view .hub-shell-head[data-hub-sys="SP"]::before,
.hub-view .hub-shell-head[data-hub-sys="EG"]::before,
.hub-view .hub-shell-head[data-hub-sys="MB"]::before {
  font-size: 7rem !important;
  letter-spacing: -0.08em !important;
}

/* ── VIEW-COMMANDS color tokens ── */
#view-commands { --hub-c:#3b82f6; --hub-c2:#93c5fd; --hub-glow:rgba(59,130,246,0.20); --hub-border:rgba(59,130,246,0.48); }
#view-members  { --hub-c:#22c55e; --hub-c2:#86efac; --hub-glow:rgba(34,197,94,0.20);  --hub-border:rgba(34,197,94,0.46);  }

/* v=110: VOID control-surface refresh. This layer keeps the existing markup and
   runtime wiring, but makes hubs read as product controls instead of card grids. */
.hub-view.active {
  display: grid !important;
  gap: 16px;
}

.hub-view .hub-shell-head {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
}

.hub-view .hub-shell-head::after {
  content: attr(data-hub-sys);
  position: absolute;
  right: 14px;
  top: 8px;
  color: var(--hub-c2, #c4b5fd);
  font-size: clamp(3.8rem, 18vw, 8.5rem);
  font-weight: 950;
  line-height: 1;
  opacity: 0.055;
  pointer-events: none;
}

.hub-view .hub-shell-head .btn {
  min-height: 46px;
  border-radius: 999px;
  box-shadow: 0 0 28px var(--hub-glow, rgba(139,54,255,.18));
}

.journey-panel,
.case-queue-panel,
.defense-panel,
.studio-preview,
.command-stack-panel,
.ticket-queue-panel,
.campaign-deck,
.config-status-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hub-border, rgba(139,54,255,.34));
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 10%, var(--hub-glow, rgba(139,54,255,.15)), transparent 38%),
    linear-gradient(145deg, rgba(18,18,30,.92), rgba(5,5,10,.96));
  box-shadow:
    0 20px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 50px rgba(255,255,255,.018);
}

.journey-panel::before,
.case-queue-panel::before,
.studio-preview::before,
.command-stack-panel::before,
.ticket-queue-panel::before,
.campaign-deck::before,
.config-status-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 36%, rgba(255,255,255,.045) 37%, transparent 40%),
    radial-gradient(circle at 12% 20%, var(--hub-glow, rgba(139,54,255,.12)), transparent 28%);
  opacity: .75;
}

.action-dock,
.builder-dock {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

.dock-action,
.dock-pill {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid var(--hub-border, rgba(139,54,255,.30)) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(10,10,18,.82) !important;
  color: rgba(245,247,255,.92) !important;
  box-shadow: 0 0 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s var(--ease-out), border-color .18s, box-shadow .18s;
}

.dock-action:hover,
.dock-action:focus-visible,
.dock-pill:hover,
.dock-pill:focus-visible,
.dock-pill-active {
  transform: translateY(-2px);
  border-color: var(--hub-c, #8b36ff) !important;
  box-shadow: 0 0 24px var(--hub-glow, rgba(139,54,255,.20));
}

.subsystem-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x proximity;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;
}

.subsystem-rail .rail-card {
  flex: 0 0 142px;
  min-height: 118px;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.08);
  border-top-color: var(--hub-c, #8b36ff);
  border-radius: 18px;
  background:
    radial-gradient(circle at 26% 8%, var(--hub-glow, rgba(139,54,255,.12)), transparent 42%),
    rgba(7,7,13,.92);
  transform: skewX(-2deg);
}

.subsystem-rail .rail-card > * {
  transform: skewX(2deg);
}

.status-chip:has(+ *) {
  text-transform: uppercase;
}

.discord-preview-card {
  position: relative;
  z-index: 1;
  margin: 14px;
  min-height: 190px;
  border: 1px solid rgba(139,54,255,.34);
  border-radius: 18px;
  background: rgba(10,11,18,.92);
  box-shadow: inset 4px 0 0 var(--hub-c, #8b36ff);
}

.preview-message p {
  color: rgba(213,221,255,.78);
}

.preview-buttons b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 9px;
  background: rgba(139,54,255,.16);
  border: 1px solid rgba(139,54,255,.28);
  padding: 0 10px;
}

.flow-preview {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 12px;
  padding-top: 12px;
}

.flow-node {
  border-color: var(--hub-border, rgba(59,130,246,.44)) !important;
  box-shadow: 0 0 18px var(--hub-glow, rgba(59,130,246,.16));
}

.defense-panel {
  padding: 14px;
}

.defense-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.defense-chip {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: .72rem;
  font-weight: 850;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}

.campaign-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.campaign-card {
  flex: 0 0 190px;
  border-radius: 18px !important;
  border-top: 2px solid var(--hub-c, #fbbf24);
}

.campaign-card-highlight {
  flex-basis: 235px;
}

.ticket-panel-preview {
  border-radius: 18px !important;
  background: rgba(0,0,0,.22) !important;
}

.bottom-sheet .sheet-list {
  gap: 14px;
}

.capability-group {
  display: grid;
  gap: 9px;
}

.capability-group h3 {
  margin: 0 0 2px;
  color: rgba(167,174,207,.82);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.capability-card {
  width: 100%;
  min-height: 84px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(176,108,255,.20);
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 90% 10%, rgba(139,54,255,.13), transparent 34%),
    rgba(8,8,15,.92);
  color: var(--void-text, #f5f7ff);
}

.capability-card strong,
.capability-card em {
  display: block;
}

.capability-card strong {
  font-size: .95rem;
}

.capability-card em {
  margin-top: 4px;
  color: rgba(167,174,207,.78);
  font-size: .74rem;
  font-style: normal;
  line-height: 1.35;
}

.capability-card small {
  border: 1px solid rgba(176,108,255,.24);
  border-radius: 999px;
  padding: 5px 7px;
  color: #d8c8ff;
  font-size: .62rem;
  font-weight: 900;
}

.capability-card b {
  grid-column: 1 / -1;
  color: var(--hub-c2, #c4b5fd);
  font-size: .72rem;
}

.void-control-body .node-engagement {
  --node-c: #fbbf24;
}

.void-control-body .node-settings {
  --node-c: #c4b5fd;
}

.void-control-body .node-engagement .module-glyph,
.void-control-body .node-settings .module-glyph {
  color: var(--node-c);
}

@media (max-width: 520px) {
  .void-control-body .hub-view > .hub-shell-head,
  .void-control-body .hub-view > .command-stack-panel,
  .void-control-body .hub-view > .studio-preview,
  .void-control-body .hub-view > .case-queue-panel,
  .void-control-body .hub-view > .defense-panel,
  .void-control-body .hub-view > .ticket-queue-panel,
  .void-control-body .hub-view > .campaign-deck,
  .void-control-body .hub-view > .journey-panel,
  .void-control-body .hub-view > .config-status-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .void-control-body .hub-shell-head .eyebrow,
  .void-control-body .hub-shell-head h1,
  .void-control-body .hub-shell-head p,
  .void-control-body .hub-shell-head .btn {
    width: auto !important;
    max-width: 100% !important;
  }

  .void-control-body .action-dock,
  .void-control-body .builder-dock {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .void-control-body .void-command-editor {
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;
    margin-inline: 12px !important;
    box-sizing: border-box;
  }

  .void-control-body .vce-head,
  .void-control-body .vce-head > span,
  .void-control-body .vce-head-actions,
  .void-control-body .vce-actions,
  .void-control-body .vce-layout,
  .void-control-body .vce-form,
  .void-control-body .vce-side {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .void-control-body .csp-row {
    flex-wrap: wrap;
  }

  .void-control-body .csp-row .status-chip {
    margin-left: 0;
  }

  .void-control-body .node-engagement { left: 20px !important; top: 134px !important; }
  .void-control-body .node-settings { left: auto !important; right: 16px !important; top: 236px !important; }

  .subsystem-rail .rail-card {
    flex-basis: 132px;
  }

  .defense-chips {
    grid-template-columns: 1fr;
  }

  .campaign-card {
    flex-basis: 172px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock-action,
  .dock-pill,
  .subsystem-rail .rail-card {
    transition: none !important;
  }
}

/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .hub-tile-in, .hub-tile-appear { animation: none !important; }
  .rail-card:hover, .hub-view .hub-area-grid .hub-area:hover { transform: none !important; }
}

/* ── HUB VIEW GAP (ensure spacing between new blocks) ── */
.hub-view { gap: 14px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   VØID ATMOSPHERE · Icon glow, orb watermarks, background pulse
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ICON GLOW: colored drop-shadow matching module accent ── */
.rail-card img.rail-icon {
  filter: drop-shadow(0 0 6px var(--hub-c, rgba(139,54,255,0.55)));
  transition: filter 0.20s;
}
.rail-card:hover img.rail-icon {
  filter: drop-shadow(0 0 12px var(--hub-c, rgba(139,54,255,0.80))) brightness(1.12);
}

.journey-node img.rail-icon {
  filter: drop-shadow(0 0 8px var(--hub-c, rgba(34,197,94,0.60)));
}
.journey-node-live img.rail-icon {
  filter: drop-shadow(0 0 12px var(--hub-c, rgba(34,197,94,0.80)));
}
.journey-node-draft img.rail-icon {
  filter: drop-shadow(0 0 8px rgba(251,191,36,0.55));
}

/* Settings panel head icons */
.settings-panel-head img.hub-area-icon {
  filter: drop-shadow(0 0 6px rgba(148,163,184,0.50));
}

/* ── VOID ORB WATERMARK: faded orb behind each module header ── */
.hub-view .hub-shell-head::after {
  content: "";
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 170px;
  height: 170px;
  background: url('./assets/void-orb-premium-alpha.webp') center / contain no-repeat;
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  animation: orb-breathe 8s ease-in-out infinite;
}

/* ── ORB BREATHE ANIMATION ── */
@keyframes orb-breathe {
  0%, 100% { opacity: 0.08; transform: translateY(-50%) scale(1.00); }
  50%       { opacity: 0.14; transform: translateY(-50%) scale(1.06); }
}

/* ── MODULE HEADER BACKGROUND PULSE: slow radial glow shift ── */
@keyframes hub-pulse {
  0%, 100% {
    background-position: 90% 55%;
  }
  50% {
    background-position: 85% 45%;
  }
}

.hub-view .hub-shell-head {
  background-size: 200% 200% !important;
  animation: hub-pulse 12s ease-in-out infinite !important;
}

/* ── CASE QUEUE & COMMAND STACK: subtle left glow accent bar ── */
.case-queue-panel::before,
.command-stack-panel::before,
.ticket-queue-panel::before,
.campaign-deck::before,
.journey-panel::before,
.config-status-panel::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--hub-c, rgba(139,54,255,0.80)), transparent);
  border-radius: 999px;
  pointer-events: none;
}
.case-queue-panel,
.command-stack-panel,
.ticket-queue-panel,
.campaign-deck,
.journey-panel,
.config-status-panel {
  position: relative;
  overflow: hidden;
}

/* ── DEFENSE CHIP GLOW ── */
.defense-chip.chip-armed {
  box-shadow: 0 0 10px rgba(74,222,128,0.22), inset 0 0 8px rgba(74,222,128,0.06);
}
.defense-chip.chip-standby {
  box-shadow: 0 0 8px rgba(251,191,36,0.18);
}

/* ── CAMPAIGN CARD HIGHLIGHT GLOW ── */
.campaign-card-highlight {
  box-shadow: 0 0 24px rgba(251,191,36,0.16), inset 0 0 20px rgba(251,191,36,0.05);
}

/* ── FLOW NODES: glow ── */
.flow-node {
  box-shadow: 0 0 14px rgba(59,130,246,0.28);
}

/* ── JOURNEY PATH: glow on live nodes ── */
.journey-node-live {
  box-shadow: 0 0 20px var(--hub-glow, rgba(34,197,94,0.28));
}

/* ── VOID ORB: small spinning ring behind main control objects ── */
.command-stack-panel::after,
.case-queue-panel::after,
.ticket-queue-panel::after,
.campaign-deck::after,
.journey-panel::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px solid var(--hub-border, rgba(139,54,255,0.18));
  opacity: 0.30;
  animation: ring-spin 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── ACTION DOCK: glow on hover ── */
.dock-action:hover {
  box-shadow: 0 0 14px var(--hub-glow, rgba(139,54,255,0.22));
}
.dock-pill:hover, .dock-pill-active {
  box-shadow: 0 0 14px rgba(139,54,255,0.30);
}

/* ── HUB SHELL HEAD: ensure z-index stack works ── */
.hub-view .hub-shell-head > * {
  position: relative;
  z-index: 1;
}

/* ── HUB HEAD ORB IMG: decorative spinning orb inside module headers ── */
.hub-head-orb {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  height: 88px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* ── REAL ACTIVITY STRIPS: runtime events without fake analytics cards ── */
.void-activity-strip {
  margin: 14px 16px 22px;
  padding: 14px;
  border: 1px solid rgba(176, 108, 255, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(13, 12, 22, 0.92), rgba(7, 8, 15, 0.96)),
    radial-gradient(circle at 12% 0%, var(--hub-glow, rgba(139, 54, 255, 0.16)), transparent 34%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(231, 213, 255, 0.05);
}

.void-activity-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.void-activity-head span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(231, 213, 255, 0.84);
}

.void-activity-head em {
  max-width: 54%;
  color: rgba(167, 174, 207, 0.62);
  font-size: 0.72rem;
  font-style: normal;
  text-align: right;
}

.void-activity-list {
  display: grid;
  gap: 8px;
}

.void-activity-row,
.void-activity-empty {
  min-height: 46px;
  display: grid;
  align-items: center;
  border: 1px solid rgba(231, 213, 255, 0.08);
  background: rgba(8, 9, 18, 0.62);
  border-radius: 12px;
}

.void-activity-row {
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 11px;
}

.void-activity-row i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--hub-c2, #b36dff);
  box-shadow: 0 0 12px var(--hub-glow, rgba(139, 54, 255, 0.45));
}

.void-activity-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.void-activity-row strong {
  overflow: hidden;
  color: rgba(245, 247, 255, 0.94);
  font-size: 0.84rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.void-activity-row em,
.void-activity-row time {
  color: rgba(167, 174, 207, 0.68);
  font-size: 0.72rem;
  font-style: normal;
}

.void-activity-row time {
  white-space: nowrap;
}

.void-activity-empty {
  padding: 12px;
  color: rgba(167, 174, 207, 0.66);
  font-size: 0.82rem;
}

.settings-field small {
  margin-left: 5px;
  color: rgba(167, 174, 207, 0.62);
  font-size: 0.68rem;
  font-weight: 650;
}

.settings-status-note {
  margin-top: -4px;
  border-color: rgba(176, 108, 255, 0.18);
}

.settings-status-note.is-live {
  color: rgba(77, 255, 157, 0.82);
  border-color: rgba(77, 255, 157, 0.20);
  background: rgba(77, 255, 157, 0.06);
}

@media (max-width: 440px) {
  .void-activity-strip {
    margin-inline: 12px;
    padding: 12px;
  }

  .void-activity-head {
    display: grid;
    align-items: start;
    gap: 4px;
  }

  .void-activity-head em {
    max-width: none;
    text-align: left;
  }

  .void-activity-row {
    grid-template-columns: 8px minmax(0, 1fr);
  }

  .void-activity-row time {
    grid-column: 2;
  }
}

/* ── COMMAND ENGINE EDITOR ── */
.void-command-editor {
  margin: 14px 16px 18px;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(8, 11, 22, 0.94), rgba(7, 8, 15, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(219, 234, 254, 0.05);
}

#view-commands {
  overflow-x: hidden;
}

.vce-head,
.vce-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.vce-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.vce-head span,
.vce-form label,
.vce-side {
  min-width: 0;
}

.vce-head strong,
.vce-side strong {
  display: block;
  color: rgba(245, 247, 255, 0.94);
  font-size: 0.92rem;
}

.vce-head em,
.vce-list em {
  display: block;
  color: rgba(167, 174, 207, 0.70);
  font-size: 0.74rem;
  font-style: normal;
}

.vce-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
  gap: 12px;
}

.vce-progress-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 12px;
}

.vce-progress-strip span {
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(147, 197, 253, 0.15);
  border-radius: 999px;
  background: rgba(8, 11, 22, 0.72);
  color: rgba(191, 219, 254, 0.82);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.vce-command-core-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(132px, 0.55fr);
  gap: 8px;
  align-items: end;
}

.vce-command-core-grid label:nth-child(3),
.vce-command-core-grid label:nth-child(4),
.vce-command-core-grid label:nth-child(5) {
  grid-column: span 1;
}

.vce-enabled-toggle {
  min-height: 42px;
  align-content: center;
  border: 1px solid rgba(61, 220, 151, 0.16);
  border-radius: 10px;
  background: rgba(61, 220, 151, 0.06);
  padding: 9px 10px;
}

.vce-type-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(167, 174, 207, 0.78);
  font-size: 0.75rem;
  line-height: 1.4;
}

.vce-status-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid rgba(147, 197, 253, 0.12);
  border-radius: 12px;
  background: rgba(5, 7, 14, 0.48);
  padding: 8px;
}

.vce-status-panel small {
  flex-basis: 100%;
  color: rgba(254, 202, 202, 0.86);
  font-size: 0.72rem;
  line-height: 1.35;
}

.vce-form,
.vce-side,
.vce-side > div {
  display: grid;
  gap: 10px;
}

.vce-form label {
  display: grid;
  gap: 5px;
  color: rgba(231, 213, 255, 0.80);
  font-size: 0.75rem;
  font-weight: 700;
}

.vce-form input,
.vce-form textarea,
.vce-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 10px;
  background: rgba(5, 7, 14, 0.86);
  color: rgba(245, 247, 255, 0.94);
  padding: 9px 10px;
  font: inherit;
}

.vce-form textarea {
  resize: vertical;
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 0.8rem;
  line-height: 1.45;
}

.vce-form select[multiple] {
  min-height: 84px;
}

.vce-drawer {
  border: 1px solid rgba(147, 197, 253, 0.14);
  border-radius: 12px;
  background: rgba(5, 7, 14, 0.56);
  padding: 10px;
}

.vce-drawer summary {
  min-height: 34px;
  cursor: pointer;
  color: rgba(245, 247, 255, 0.90);
  font-size: 0.78rem;
  font-weight: 900;
}

.vce-drawer[open] {
  display: grid;
  gap: 9px;
}

.vce-template-cards,
.vce-variable-docs {
  display: grid;
  gap: 7px;
}

.vce-template-cards button,
.vce-variable-docs span {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(147, 197, 253, 0.12);
  border-radius: 10px;
  background: rgba(8, 11, 22, 0.72);
  color: rgba(245, 247, 255, 0.88);
  padding: 9px;
  text-align: left;
}

.vce-template-cards strong,
.vce-variable-docs code {
  display: block;
  color: rgba(245, 247, 255, 0.92);
  font-size: 0.76rem;
}

.vce-template-cards em,
.vce-variable-docs em {
  display: block;
  color: rgba(167, 174, 207, 0.70);
  font-size: 0.68rem;
  font-style: normal;
}

.vce-template-cards small {
  color: rgba(147, 197, 253, 0.78);
  font-size: 0.64rem;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.vce-code-lab {
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.30);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(9, 10, 20, 0.96), rgba(3, 5, 12, 0.98));
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(231, 213, 255, 0.06);
}

.vce-code-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.16);
  padding: 10px 12px;
}

.vce-code-head strong {
  display: block;
  color: rgba(245, 247, 255, 0.96);
  font-size: 0.84rem;
}

.vce-code-head em {
  display: block;
  color: rgba(167, 174, 207, 0.68);
  font-size: 0.68rem;
  font-style: normal;
}

.vce-code-state {
  display: grid;
  justify-items: end;
  gap: 2px;
  white-space: nowrap;
}

.vce-code-state b {
  border: 1px solid rgba(61, 220, 151, 0.28);
  border-radius: 999px;
  background: rgba(61, 220, 151, 0.08);
  color: rgba(125, 255, 190, 0.95);
  padding: 4px 8px;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.vce-code-state b.is-warn {
  border-color: rgba(244, 63, 94, 0.34);
  background: rgba(244, 63, 94, 0.10);
  color: rgba(254, 202, 202, 0.96);
}

.vce-code-state small {
  color: rgba(167, 174, 207, 0.64);
  font-size: 0.64rem;
}

.vce-snippet-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;
  border-bottom: 1px solid rgba(147, 197, 253, 0.10);
  padding: 9px 10px;
  scrollbar-width: thin;
}

.vce-snippet-strip button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 999px;
  background: rgba(20, 17, 34, 0.76);
  color: rgba(231, 213, 255, 0.90);
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 850;
}

.vce-mobile-keybar {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;
  border-top: 1px solid rgba(147, 197, 253, 0.10);
  background:
    linear-gradient(90deg, rgba(139, 92, 246, 0.07), transparent 42%),
    rgba(4, 6, 14, 0.82);
  padding: 9px 10px 10px;
  scrollbar-width: thin;
}

.vce-mobile-keybar button {
  min-height: 40px;
  flex: 0 0 auto;
  border: 1px solid rgba(179, 109, 255, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    rgba(17, 13, 30, 0.86);
  color: rgba(245, 247, 255, 0.94);
  padding: 0 12px;
  font-family: var(--void-font-mono);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.vce-mobile-keybar button:active,
.vce-mobile-keybar button:focus-visible {
  border-color: rgba(179, 109, 255, 0.64);
  box-shadow: 0 0 18px rgba(139, 54, 255, 0.20);
}

.vce-keybar-label {
  flex: 0 0 auto;
  color: rgba(167, 174, 207, 0.68);
  font-family: var(--void-font-mono);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vce-code-frame {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 220px;
  background:
    linear-gradient(90deg, rgba(139, 92, 246, 0.08), transparent 24%),
    rgba(2, 4, 10, 0.92);
}

.vce-line-rail {
  overflow: hidden;
  border-right: 1px solid rgba(147, 197, 253, 0.10);
  color: rgba(167, 174, 207, 0.42);
  padding: 12px 8px;
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: right;
  user-select: none;
  white-space: pre;
}

.vce-code-frame textarea {
  min-height: 220px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(235, 241, 255, 0.96);
  caret-color: #b36dff;
  padding: 12px;
  font-size: 0.82rem;
  line-height: 1.55;
  outline: none;
  resize: vertical;
}

.vce-code-frame:focus-within {
  box-shadow: inset 0 0 0 1px rgba(179, 109, 255, 0.22), 0 0 24px rgba(139, 54, 255, 0.10);
}

.vce-result {
  min-height: 54px;
  white-space: pre-wrap;
  border: 1px solid rgba(147, 197, 253, 0.14);
  border-radius: 12px;
  background: rgba(3, 5, 12, 0.72);
  color: rgba(219, 234, 254, 0.88);
  padding: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.vce-embed-panel {
  border: 1px solid rgba(147, 197, 253, 0.14);
  border-radius: 12px;
  background: rgba(5, 7, 14, 0.56);
  padding: 10px;
}

.vce-embed-panel summary {
  min-height: 34px;
  cursor: pointer;
  color: rgba(245, 247, 255, 0.90);
  font-size: 0.78rem;
  font-weight: 900;
}

.vce-embed-panel[open] {
  display: grid;
  gap: 9px;
}

.vce-embed-preview {
  border-left: 4px solid var(--embed-color, #8B5CF6);
  border-radius: 8px;
  background: rgba(17, 19, 31, 0.88);
  color: rgba(245, 247, 255, 0.92);
  padding: 10px 12px;
}

.vce-embed-preview strong {
  display: block;
  margin-bottom: 5px;
}

.vce-embed-preview p {
  margin: 0;
  color: rgba(219, 234, 254, 0.82);
  white-space: pre-wrap;
}

.vce-embed-preview small {
  display: block;
  margin-top: 8px;
  color: rgba(167, 174, 207, 0.72);
}

.vce-result.is-error,
.danger-action {
  border-color: rgba(244, 63, 94, 0.34);
  color: rgba(254, 202, 202, 0.92);
}

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

.vce-list {
  display: grid;
  gap: 7px;
}

.vce-list button,
.vce-list article,
.vce-empty {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(147, 197, 253, 0.12);
  border-radius: 10px;
  background: rgba(8, 11, 22, 0.72);
  color: rgba(245, 247, 255, 0.88);
  padding: 9px;
  text-align: left;
}

.vce-list small {
  color: rgba(147, 197, 253, 0.78);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.vce-library details {
  border: 1px solid rgba(147, 197, 253, 0.10);
  border-radius: 10px;
  background: rgba(8, 11, 22, 0.62);
  padding: 8px;
}

.vce-library-search {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 10px;
  background: rgba(5, 7, 14, 0.82);
  color: rgba(245, 247, 255, 0.92);
  padding: 8px 10px;
}

.vce-library summary {
  cursor: pointer;
  color: rgba(245, 247, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 800;
}

.vce-library button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  margin-top: 6px;
  padding: 4px 5px;
  text-align: left;
}

.vce-library button:hover,
.vce-snippet-strip button:hover {
  background: rgba(139, 92, 246, 0.14);
}

.vce-library code {
  display: block;
  min-width: 0;
  color: rgba(191, 219, 254, 0.90);
  font-size: 0.72rem;
  white-space: normal;
}

.vce-library button em,
.vce-library button small {
  display: block;
  margin-top: 3px;
  color: rgba(167, 174, 207, 0.70);
  font-size: 0.64rem;
  font-style: normal;
  line-height: 1.35;
}

.vce-library button b {
  color: rgba(167, 174, 207, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .vce-layout,
  .vce-grid,
  .vce-command-core-grid {
    grid-template-columns: 1fr;
  }

  .vce-progress-strip {
    grid-template-columns: repeat(5, max-content);
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .vce-progress-strip span {
    min-width: 70px;
  }

  .void-command-editor {
    margin-inline: 12px;
    padding: 12px;
  }

  .vce-head,
  .vce-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .vce-head-actions {
    justify-content: stretch;
  }

  .vce-head-actions > *,
  .vce-actions > * {
    min-height: 44px;
  }

  .vce-code-head {
    align-items: flex-start;
    display: grid;
  }

  .vce-code-state {
    justify-items: start;
  }

  .vce-code-frame {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 340px;
  }

  .vce-line-rail,
  .vce-code-frame textarea {
    font-size: 0.78rem;
  }

  .vce-line-rail,
  .vce-code-frame textarea {
    min-height: 340px;
  }

  .vce-mobile-keybar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 58px;
    padding-block: 9px;
  }

  .vce-mobile-keybar button {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 0.76rem;
  }
}

@media (max-width: 430px) {
  .vce-code-frame {
    min-height: 390px;
  }

  .vce-line-rail,
  .vce-code-frame textarea {
    min-height: 390px;
  }
}

/* ── REDUCED MOTION: disable all animations ── */
@media (prefers-reduced-motion: reduce) {
  .hub-view .hub-shell-head::after,
  .hub-view .hub-shell-head,
  .command-stack-panel::after,
  .case-queue-panel::after,
  .ticket-queue-panel::after,
  .campaign-deck::after,
  .journey-panel::after {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   VØID HOME · Orbit polish, per-module rays, node glow, depth, chips
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ORB: stronger breathing pulse ── */
@keyframes orb-pulse-glow {
  0%, 100% { filter: saturate(1.08) brightness(0.76) drop-shadow(0 0 36px rgba(139,54,255,0.28)); }
  50%       { filter: saturate(1.22) brightness(0.88) drop-shadow(0 0 64px rgba(139,54,255,0.55)); }
}
.void-orb-art {
  animation: void-orb-image-orbit 22s ease-in-out infinite,
             orb-pulse-glow 5s ease-in-out infinite !important;
}

/* ── ORBIT LAUNCHER: depth gradient behind orb ── */
.orbit-launcher {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(139,54,255,0.12) 0%, rgba(88,101,242,0.04) 40%, transparent 70%),
    radial-gradient(ellipse at 50% 52%, rgba(0,0,0,0.40) 60%, transparent 100%) !important;
}

/* ── ORBIT NODE: lift + expand on hover ── */
.orbit-node.quick-tool:hover,
.orbit-node.quick-tool:focus-visible {
  transform: rotate(var(--node-rotate,0deg)) translateY(-4px) scale(1.04) !important;
  box-shadow:
    0 0 0 1px var(--node-c, rgba(179,109,255,0.55)),
    0 0 32px var(--node-g, rgba(139,54,255,0.40)),
    0 16px 40px rgba(0,0,0,0.50) !important;
}

/* ── PER-MODULE NODE COLORS + RAY COLOR ── */
/* Members (green) */
.node-community { --node-c: rgba(34,197,94,0.55); --node-g: rgba(34,197,94,0.30); }
.orbit-launcher:has(.node-community:hover)::before,
.orbit-launcher:has(.node-community:focus-visible)::before {
  background: linear-gradient(90deg, rgba(34,197,94,0.60), rgba(34,197,94,0.15) 60%, transparent) !important;
  box-shadow: 0 0 18px rgba(34,197,94,0.30) !important;
}

/* Moderation (amber) */
.node-moderation { --node-c: rgba(245,158,11,0.55); --node-g: rgba(245,158,11,0.30); }
.orbit-launcher:has(.node-moderation:hover)::before,
.orbit-launcher:has(.node-moderation:focus-visible)::before {
  background: linear-gradient(90deg, rgba(245,158,11,0.60), rgba(245,158,11,0.15) 60%, transparent) !important;
  box-shadow: 0 0 18px rgba(245,158,11,0.30) !important;
}

/* Engagement (gold) */
.node-engagement { --node-c: rgba(251,191,36,0.55); --node-g: rgba(251,191,36,0.30); }
.orbit-launcher:has(.node-engagement:hover)::before,
.orbit-launcher:has(.node-engagement:focus-visible)::before {
  background: linear-gradient(90deg, rgba(251,191,36,0.60), rgba(251,191,36,0.15) 60%, transparent) !important;
  box-shadow: 0 0 18px rgba(251,191,36,0.30) !important;
}

/* Studio (purple – already default, boost it) */
.node-studio { --node-c: rgba(179,109,255,0.65); --node-g: rgba(139,54,255,0.42); }
.orbit-launcher:has(.node-studio:hover)::before,
.orbit-launcher:has(.node-studio:focus-visible)::before {
  background: linear-gradient(90deg, rgba(179,109,255,0.65), rgba(179,109,255,0.18) 60%, transparent) !important;
  box-shadow: 0 0 22px rgba(139,54,255,0.40) !important;
}

/* Commands (blue) */
.node-automation { --node-c: rgba(59,130,246,0.55); --node-g: rgba(59,130,246,0.30); }
.orbit-launcher:has(.node-automation:hover)::before,
.orbit-launcher:has(.node-automation:focus-visible)::before {
  background: linear-gradient(90deg, rgba(59,130,246,0.60), rgba(59,130,246,0.15) 60%, transparent) !important;
  box-shadow: 0 0 18px rgba(59,130,246,0.30) !important;
}

/* Support (cyan) */
.node-support { --node-c: rgba(6,182,212,0.55); --node-g: rgba(6,182,212,0.30); }
.orbit-launcher:has(.node-support:hover)::before,
.orbit-launcher:has(.node-support:focus-visible)::before {
  background: linear-gradient(90deg, rgba(6,182,212,0.60), rgba(6,182,212,0.15) 60%, transparent) !important;
  box-shadow: 0 0 18px rgba(6,182,212,0.30) !important;
}

/* ── ORB: flare toward active node ── */
.orbit-launcher:has(.orbit-node:hover) .void-orb-art,
.orbit-launcher:has(.orbit-node:focus-visible) .void-orb-art {
  filter: saturate(1.28) brightness(0.92) drop-shadow(0 0 56px rgba(139,54,255,0.60)) !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
  transition: filter 0.3s, transform 0.3s;
}

/* ── ORBIT RINGS: slightly more visible ── */
.void-ring-spin {
  opacity: 0.55 !important;
}
.void-ring-spin-a {
  filter: blur(0px) drop-shadow(0 0 10px rgba(179,109,255,0.35)) !important;
}
.void-ring-spin-b {
  filter: blur(0.5px) drop-shadow(0 0 8px rgba(88,101,242,0.28)) !important;
}

/* ── MODULE STATUS CHIPS: sharper, colored per module ── */
.mod-chip {
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s, border-color 0.18s !important;
}
.mod-chip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.40) !important;
}
.mod-chip.node-community  { border-color: rgba(34,197,94,0.28) !important; }
.mod-chip.node-moderation { border-color: rgba(245,158,11,0.28) !important; }
.mod-chip.node-protection { border-color: rgba(239,68,68,0.28) !important; }
.mod-chip.node-studio     { border-color: rgba(139,54,255,0.32) !important; }
.mod-chip.node-automation { border-color: rgba(59,130,246,0.28) !important; }
.mod-chip.node-support    { border-color: rgba(6,182,212,0.28) !important; }
.mod-chip.is-enabled.node-community  { box-shadow: 0 0 16px rgba(34,197,94,0.10) !important; }
.mod-chip.is-enabled.node-moderation { box-shadow: 0 0 16px rgba(245,158,11,0.10) !important; }
.mod-chip.is-enabled.node-studio     { box-shadow: 0 0 16px rgba(139,54,255,0.14) !important; }
.mod-chip.is-enabled.node-automation { box-shadow: 0 0 16px rgba(59,130,246,0.10) !important; }
.mod-chip.is-enabled.node-support    { box-shadow: 0 0 16px rgba(6,182,212,0.10) !important; }

/* ── QA CHIPS: subtle glow on hover ── */
.qa-chip:hover {
  box-shadow: 0 0 16px rgba(139,54,255,0.20) !important;
  border-color: rgba(139,54,255,0.40) !important;
}

/* ── ORBIT LINES: thicker + more visible ── */
.orbit-line {
  border-width: 1.5px !important;
  opacity: 0.40 !important;
}
.orbit-line-a {
  border-color: rgba(139,54,255,0.35) !important;
  filter: drop-shadow(0 0 4px rgba(139,54,255,0.20));
}
.orbit-line-b {
  border-color: rgba(88,101,242,0.25) !important;
  filter: drop-shadow(0 0 3px rgba(88,101,242,0.15));
}

/* ═══════════════════════════════════════════════════════════════════════
   VØID COMMAND LAB v114 · Premium polish — Commands page
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. COMMAND LAB WRAPPER: cinematic console surface ── */
.void-command-editor {
  margin: 12px 0 16px !important;
  padding: 0 !important;
  border: 1px solid rgba(59,130,246,0.20) !important;
  border-top: 3px solid rgba(59,130,246,0.65) !important;
  border-radius: 18px !important;
  background: rgba(4, 6, 16, 0.98) !important;
  box-shadow:
    0 0 80px rgba(0,0,0,0.55),
    inset 0 0 100px rgba(59,130,246,0.025) !important;
  overflow: hidden !important;
}

/* ── 2. VCE HEAD: console panel header ── */
.vce-head {
  padding: 14px 16px 12px !important;
  background: rgba(59,130,246,0.05) !important;
  border-bottom: 1px solid rgba(59,130,246,0.12) !important;
}
.vce-head strong {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: rgba(245,247,255,0.97) !important;
  letter-spacing: -0.01em;
}
.vce-head em {
  font-size: 0.68rem !important;
  color: rgba(147,197,253,0.55) !important;
}
.vce-head-actions .dock-action {
  background: rgba(59,130,246,0.10) !important;
  border-color: rgba(59,130,246,0.28) !important;
  color: rgba(191,219,254,0.88) !important;
}
.vce-head-actions .dock-action:hover {
  background: rgba(59,130,246,0.20) !important;
  border-color: rgba(59,130,246,0.50) !important;
}

/* ── 3. PROGRESS STRIP: step pipeline ── */
.vce-progress-strip {
  background: rgba(2,4,12,0.90) !important;
  border-bottom: 1px solid rgba(59,130,246,0.10) !important;
}
.vce-progress-strip span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem !important;
  letter-spacing: 0.16em !important;
  color: rgba(147,197,253,0.38) !important;
  border-right: 1px solid rgba(59,130,246,0.08) !important;
}
.vce-progress-strip span:first-child {
  color: rgba(191,219,254,0.90) !important;
  background: rgba(59,130,246,0.14) !important;
  box-shadow: inset 0 -2px 0 rgba(59,130,246,0.55) !important;
}

/* ── 4. FORM: padding inside the command editor ── */
.vce-form,
.vce-side {
  padding: 14px !important;
}
.vce-layout {
  padding: 0 !important;
  align-items: start;
}

/* Form inputs: blue focus ring, larger tap targets on mobile */
.vce-form input:focus,
.vce-form textarea:focus,
.vce-form select:focus {
  outline: none !important;
  border-color: rgba(59,130,246,0.55) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.22), 0 0 18px rgba(59,130,246,0.10) !important;
}
.vce-form input,
.vce-form select {
  min-height: 44px !important;
}

/* ── 5. CODE EDITOR: stronger premium surface ── */
.vce-code-lab {
  border: 1px solid rgba(59,130,246,0.30) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(59,130,246,0.10), transparent 40%),
    linear-gradient(145deg, rgba(5,9,22,0.98), rgba(2,4,12,0.99)) !important;
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.06),
    0 20px 50px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(191,219,254,0.06) !important;
}

.vce-code-head {
  background: rgba(3,6,18,0.95) !important;
  border-bottom: 1px solid rgba(59,130,246,0.12) !important;
  padding: 11px 14px !important;
}
.vce-code-head strong {
  color: rgba(245,247,255,0.97) !important;
  font-size: 0.84rem !important;
}
.vce-code-head em {
  color: rgba(147,197,253,0.50) !important;
}

/* SAFE badge: more prominent */
.vce-code-state b {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.60rem !important;
  letter-spacing: 0.10em !important;
  box-shadow: 0 0 12px rgba(61,220,151,0.22) !important;
}
.vce-code-state small {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.62rem !important;
}

/* Code frame: bigger default, blue gutter tint */
.vce-code-frame {
  min-height: 260px !important;
  background:
    linear-gradient(90deg, rgba(59,130,246,0.07), transparent 16%),
    rgba(2, 4, 12, 0.98) !important;
}
.vce-code-frame textarea {
  min-height: 260px !important;
  caret-color: #60a5fa !important;
  font-size: 0.83rem !important;
}
.vce-line-rail {
  color: rgba(147,197,253,0.32) !important;
  border-right-color: rgba(59,130,246,0.10) !important;
  font-size: 0.75rem !important;
}
.vce-code-frame:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(59,130,246,0.32),
    0 0 32px rgba(59,130,246,0.12) !important;
}

/* ── 6. SNIPPET STRIP ── */
.vce-snippet-strip {
  background: rgba(3,5,16,0.95) !important;
  border-bottom: 1px solid rgba(59,130,246,0.10) !important;
}
.vce-snippet-strip button {
  border-color: rgba(59,130,246,0.26) !important;
  background: rgba(8,14,34,0.85) !important;
  color: rgba(191,219,254,0.88) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.70rem !important;
}
.vce-snippet-strip button:hover {
  background: rgba(59,130,246,0.18) !important;
  border-color: rgba(59,130,246,0.52) !important;
  color: #bfdbfe !important;
}

/* ── 7. MOBILE KEYBAR: VOID keyboard strip ── */
.vce-mobile-keybar {
  background:
    linear-gradient(90deg, rgba(59,130,246,0.10), transparent 55%),
    rgba(3, 5, 18, 0.98) !important;
  border-top: 1px solid rgba(59,130,246,0.16) !important;
  gap: 6px !important;
  padding: 10px 12px 12px !important;
}
.vce-mobile-keybar button {
  border: 1px solid rgba(59,130,246,0.28) !important;
  border-radius: 9px !important;   /* keys, not pills */
  background:
    linear-gradient(145deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04)),
    rgba(6,11,28,0.96) !important;
  color: rgba(191,219,254,0.92) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  padding: 0 13px !important;
  box-shadow: 0 2px 0 rgba(59,130,246,0.22), inset 0 1px 0 rgba(191,219,254,0.05) !important;
  transition: background 0.12s, box-shadow 0.12s, transform 0.08s !important;
}
.vce-mobile-keybar button:active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 rgba(59,130,246,0) !important;
  background: rgba(59,130,246,0.26) !important;
  border-color: rgba(59,130,246,0.60) !important;
}
/* $ key — special accent */
.vce-mobile-keybar button:nth-child(2) {
  border-color: rgba(59,130,246,0.50) !important;
  color: #93c5fd !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  min-width: 40px !important;
  padding: 0 8px !important;
  box-shadow: 0 2px 0 rgba(59,130,246,0.35), 0 0 10px rgba(59,130,246,0.15) !important;
}
.vce-keybar-label {
  font-size: 0.58rem !important;
  color: rgba(59,130,246,0.55) !important;
  letter-spacing: 0.14em !important;
}

/* ── 8. DRAWERS: technical tool panels ── */
.vce-drawer,
.vce-embed-panel {
  border-color: rgba(59,130,246,0.14) !important;
  background: rgba(3,5,14,0.75) !important;
}
.vce-drawer summary,
.vce-embed-panel summary {
  font-size: 0.74rem !important;
  color: rgba(191,219,254,0.82) !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.vce-drawer summary::-webkit-details-marker,
.vce-embed-panel summary::-webkit-details-marker { display: none !important; }
.vce-drawer summary::marker,
.vce-embed-panel summary::marker { display: none !important; }

.vce-drawer summary::before,
.vce-embed-panel summary::before {
  content: "›";
  font-size: 1rem;
  font-weight: 900;
  color: rgba(59,130,246,0.65);
  line-height: 1;
  transition: transform 0.16s var(--ease-out, ease);
  display: inline-block;
}
.vce-drawer[open] summary::before,
.vce-embed-panel[open] summary::before {
  transform: rotate(90deg);
}

/* ── 9. TEST RESULT: terminal output ── */
.vce-result {
  font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace !important;
  font-size: 0.76rem !important;
  background: rgba(2, 4, 12, 0.94) !important;
  border: 1px solid rgba(59,130,246,0.16) !important;
  border-radius: 12px !important;
  color: rgba(191,219,254,0.82) !important;
  padding: 12px 14px !important;
  line-height: 1.50 !important;
}
.vce-result:not(.is-error):not(:empty)::before {
  content: "OUTPUT ›";
  display: block;
  margin-bottom: 6px;
  color: rgba(59,130,246,0.55);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.vce-result.is-error {
  border-color: rgba(244,63,94,0.30) !important;
  color: rgba(254,202,202,0.90) !important;
}
.vce-result.is-error::before {
  content: "ERROR ›";
  color: rgba(244,63,94,0.65);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  display: block;
  margin-bottom: 6px;
}

/* ── 10. FUNCTION LIBRARY: built-in docs ── */
.vce-library-search {
  border-color: rgba(59,130,246,0.22) !important;
  background: rgba(3,5,14,0.92) !important;
  font-size: 0.78rem !important;
  border-radius: 10px !important;
}
.vce-library-search:focus {
  outline: none !important;
  border-color: rgba(59,130,246,0.55) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.18), 0 0 20px rgba(59,130,246,0.10) !important;
}
.vce-library details {
  border-color: rgba(59,130,246,0.10) !important;
  background: rgba(4,7,18,0.80) !important;
}
.vce-library summary {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(147,197,253,0.72) !important;
}
.vce-library button {
  padding: 7px 8px !important;
  border-radius: 8px !important;
  transition: background 0.12s !important;
}
.vce-library button:hover {
  background: rgba(59,130,246,0.12) !important;
}
.vce-library code {
  color: rgba(147,197,253,0.95) !important;
  font-size: 0.73rem !important;
}
.vce-library button em,
.vce-library button small {
  color: rgba(148,163,184,0.62) !important;
  font-size: 0.62rem !important;
}
.vce-library button b {
  color: rgba(59,130,246,0.60) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.06em;
}

/* ── 11. SAVED COMMANDS + LOGS: premium list items ── */
.vce-list button,
.vce-list article {
  border-color: rgba(59,130,246,0.12) !important;
  background: rgba(4,7,18,0.85) !important;
  border-radius: 10px !important;
  transition: border-color 0.14s, background 0.14s !important;
}
.vce-list button:hover {
  border-color: rgba(59,130,246,0.32) !important;
  background: rgba(59,130,246,0.07) !important;
}
.vce-list small {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.62rem !important;
  color: rgba(59,130,246,0.70) !important;
}
.vce-side strong {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(147,197,253,0.65) !important;
}

/* ── 12. ACTION ROW: role-appropriate colors ── */
.vce-actions {
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  background: rgba(3,5,14,0.90) !important;
  border-top: 1px solid rgba(59,130,246,0.10) !important;
}
#custom-command-save.btn.btn-primary {
  background: linear-gradient(135deg, rgba(59,130,246,0.92), rgba(37,99,235,0.90)) !important;
  border-color: rgba(59,130,246,0.80) !important;
  box-shadow: 0 0 24px rgba(59,130,246,0.28), 0 4px 14px rgba(37,99,235,0.30) !important;
  color: #fff !important;
}
#custom-command-save.btn.btn-primary:hover {
  filter: brightness(1.14);
}
#custom-command-delete.dock-action {
  border-color: rgba(244,63,94,0.32) !important;
  color: rgba(254,202,202,0.82) !important;
}
#custom-command-delete.dock-action:hover {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.55) !important;
  color: #fecaca !important;
}
#custom-command-publish.dock-action {
  border-color: rgba(34,197,94,0.32) !important;
  color: rgba(134,239,172,0.85) !important;
}
#custom-command-publish.dock-action:hover {
  background: rgba(34,197,94,0.08) !important;
  border-color: rgba(34,197,94,0.55) !important;
}

/* ── 13. STATUS MESSAGE ── */
.vce-panel-builder-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(139,92,246,0.16);
  border-radius: 12px;
  background: rgba(8,10,22,0.62);
}
.vce-panel-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vce-panel-builder-head strong {
  color: rgba(231,213,255,0.88);
}
.vce-panel-builder-head small {
  color: rgba(167,174,207,0.68);
}
.vce-panel-control-rows {
  display: grid;
  gap: 10px;
}
.vce-panel-control-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 110px minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(59,130,246,0.10);
  border-radius: 10px;
  background: rgba(3,5,14,0.72);
}
.vce-panel-preview {
  --panel-accent: #8B5CF6;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(139,92,246,0.26);
  border-radius: 12px;
  background: radial-gradient(circle at 18% 0%, rgba(139,92,246,0.14), transparent 35%), rgba(5,7,16,0.90);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.025), 0 0 20px rgba(139,92,246,0.12);
}
.vce-panel-preview-embed {
  border-left: 3px solid var(--panel-accent);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(17,19,31,0.86);
}
.vce-panel-preview-embed strong {
  display: block;
  color: rgba(245,247,255,0.94);
  font-size: 0.95rem;
}
.vce-panel-preview-embed p {
  margin: 6px 0 0;
  color: rgba(199,205,230,0.76);
  line-height: 1.5;
}
.vce-panel-preview-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vce-panel-preview-buttons span,
.vce-panel-preview-select {
  min-height: 42px;
  border: 1px solid rgba(139,92,246,0.26);
  border-radius: 10px;
  background: rgba(16,20,38,0.88);
  color: rgba(235,230,255,0.92);
}
.vce-panel-preview-buttons span {
  display: inline-grid;
  place-items: center;
  padding: 0 14px;
  font-weight: 800;
}
.vce-panel-preview-buttons span[data-style="secondary"] {
  border-color: rgba(148,163,184,0.26);
}
.vce-panel-preview-buttons span[data-style="success"] {
  border-color: rgba(61,220,151,0.36);
  color: rgba(187,247,208,0.94);
}
.vce-panel-preview-buttons span[data-style="danger"] {
  border-color: rgba(244,63,94,0.40);
  color: rgba(254,202,202,0.95);
}
.vce-panel-preview-select {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.vce-panel-preview-select b {
  color: rgba(231,213,255,0.78);
  font-size: 0.78rem;
}
.vce-panel-preview-select span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}
.vce-panel-preview-select small {
  color: rgba(167,174,207,0.62);
}

#custom-command-status {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.68rem !important;
  color: rgba(147,197,253,0.55) !important;
  padding: 4px 14px 10px !important;
}

/* ── 14. MOBILE UPGRADES ── */
@media (max-width: 760px) {
  .vce-code-frame,
  .vce-code-frame textarea,
  .vce-line-rail {
    min-height: 380px !important;
  }
  .vce-form input,
  .vce-form textarea,
  .vce-form select {
    min-height: 48px !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }
  .vce-mobile-keybar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    min-height: 60px !important;
  }
  .vce-mobile-keybar button {
    min-height: 46px !important;
    padding-inline: 14px !important;
  }
  .vce-actions {
    position: sticky !important;
    bottom: 60px !important;
    z-index: 4 !important;
    border-bottom: 1px solid rgba(59,130,246,0.10) !important;
    padding: 10px 14px !important;
  }
  .vce-form,
  .vce-side {
    padding: 12px !important;
  }
  #view-commands,
  .void-command-editor,
  .vce-layout,
  .vce-form,
  .vce-side,
  .vce-drawer,
  .vce-panel-builder-block,
  .vce-panel-preview {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .vce-drawer .vce-actions {
    position: static !important;
    bottom: auto !important;
  }
  .vce-panel-control-row {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .vce-panel-control-row label,
  .vce-panel-control-row input,
  .vce-panel-control-row select,
  .vce-panel-control-row textarea {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .vce-panel-builder-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .vce-head {
    padding: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   VØID COMMAND LAB v115 · Depth, type theming, IDE head, Discord embed
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TYPE-BASED COLOR THEMING via data-cmd-type on form ── */
#custom-command-form[data-cmd-type="prefix"]    { --cmd-c:59,130,246;  --cmd-cl:#60a5fa; --cmd-hex:#3b82f6; }
#custom-command-form[data-cmd-type="slash"]     { --cmd-c:34,197,94;   --cmd-cl:#4ade80; --cmd-hex:#22c55e; }
#custom-command-form[data-cmd-type="auto_reply"]{ --cmd-c:245,158,11;  --cmd-cl:#fbbf24; --cmd-hex:#f59e0b; }
#custom-command-form[data-cmd-type="void_run"]  { --cmd-c:139,54,255;  --cmd-cl:#c084fc; --cmd-hex:#8b36ff; }
#custom-command-form[data-cmd-type="word"]      { --cmd-c:6,182,212;   --cmd-cl:#22d3ee; --cmd-hex:#06b6d4; }

/* Apply type color to code lab border + keybar */
#custom-command-form .vce-code-lab {
  border-color: rgba(var(--cmd-c, 59,130,246), 0.34) !important;
}
#custom-command-form .vce-code-head {
  background: rgba(var(--cmd-c, 59,130,246), 0.06) !important;
}
#custom-command-form .vce-code-tab {
  border-color: rgba(var(--cmd-c, 59,130,246), 0.42) !important;
  color: var(--cmd-cl, #60a5fa) !important;
}
#custom-command-form .vce-cmd-prefix {
  color: rgba(var(--cmd-c, 59,130,246), 0.70) !important;
}
#custom-command-form .vce-mobile-keybar {
  background:
    linear-gradient(90deg, rgba(var(--cmd-c, 59,130,246), 0.12), transparent 55%),
    rgba(3, 5, 18, 0.98) !important;
  border-top-color: rgba(var(--cmd-c, 59,130,246), 0.18) !important;
}
#custom-command-form .vce-mobile-keybar button {
  border-color: rgba(var(--cmd-c, 59,130,246), 0.28) !important;
}
#custom-command-form .vce-mobile-keybar button:nth-child(2) {
  border-color: rgba(var(--cmd-c, 59,130,246), 0.55) !important;
  color: var(--cmd-cl, #60a5fa) !important;
  box-shadow: 0 2px 0 rgba(var(--cmd-c, 59,130,246), 0.35), 0 0 10px rgba(var(--cmd-c, 59,130,246), 0.18) !important;
}
#custom-command-form .vce-progress-strip span:first-child {
  background: rgba(var(--cmd-c, 59,130,246), 0.16) !important;
  box-shadow: inset 0 -2px 0 rgba(var(--cmd-c, 59,130,246), 0.60) !important;
  color: var(--cmd-cl, #60a5fa) !important;
}
#custom-command-form #custom-command-save.btn.btn-primary {
  background: linear-gradient(135deg, rgba(var(--cmd-c, 59,130,246), 0.92), rgba(var(--cmd-c, 59,130,246), 0.76)) !important;
  border-color: rgba(var(--cmd-c, 59,130,246), 0.80) !important;
  box-shadow: 0 0 24px rgba(var(--cmd-c, 59,130,246), 0.30) !important;
}

/* ── IDE-STYLE CODE EDITOR HEAD ── */
.vce-code-head {
  align-items: center !important;
  gap: 10px !important;
}
.vce-code-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.vce-code-head-left em {
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem !important;
  color: rgba(147,197,253,0.40) !important;
  white-space: nowrap;
}
.vce-code-tab {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 12px 4px 8px;
  border: 1px solid rgba(59,130,246,0.38);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  background:
    linear-gradient(180deg, rgba(59,130,246,0.10), rgba(59,130,246,0.04));
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.vce-cmd-prefix {
  color: rgba(59,130,246,0.70);
  font-weight: 900;
}
.vce-cmd-name {
  color: rgba(225,235,255,0.90);
}
/* Blinking cursor after name */
.vce-cmd-name::after {
  content: "▋";
  font-size: 0.68rem;
  color: rgba(59,130,246,0.70);
  animation: vce-cursor-blink 1.1s step-end infinite;
  margin-left: 2px;
}
@keyframes vce-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── PROGRESS STRIP: numbered pipeline ── */
.vce-progress-strip span {
  counter-increment: vce-step;
  position: relative;
}
.vce-progress-strip span::before {
  content: attr(data-step);
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  font-weight: 900;
  color: rgba(59,130,246,0.45);
  line-height: 1;
  margin-bottom: 2px;
}
/* Connector lines between steps */
.vce-progress-strip span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 55%;
  background: linear-gradient(180deg, transparent, rgba(59,130,246,0.20), transparent);
}

/* ── CODE FRAME: scanline depth ── */
.vce-code-frame {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 24px,
      rgba(255,255,255,0.012) 24px,
      rgba(255,255,255,0.012) 25px
    ),
    linear-gradient(90deg, rgba(59,130,246,0.07), transparent 16%),
    rgba(2, 4, 12, 0.98) !important;
}
.vce-code-frame textarea {
  background: transparent !important;
  line-height: 1.60 !important; /* match scanline rhythm */
}

/* ── EMBED PREVIEW: real Discord card ── */
.vce-embed-preview {
  background: rgba(47, 49, 54, 0.96) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 14px 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important;
  font-family: var(--void-font-body) !important;
}
.vce-embed-preview::before {
  content: "";
  display: block;
  float: left;
  width: 4px;
  height: 100%;
  background: var(--embed-color, #8B5CF6);
  border-radius: 3px 0 0 3px;
  margin-left: -14px;
  margin-right: 12px;
  margin-top: -12px;
  margin-bottom: -14px;
  min-height: 50px;
}
.vce-embed-preview strong {
  color: rgba(255,255,255,0.92) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}
.vce-embed-preview p {
  color: rgba(220,221,222,0.82) !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

/* ── TEMPLATE CARDS: command pack design ── */
.vce-template-cards button {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
  gap: 6px !important;
  padding: 11px 12px !important;
  border-color: rgba(59,130,246,0.14) !important;
  background: rgba(4,7,20,0.85) !important;
  transition: border-color 0.16s, background 0.16s !important;
  text-align: left !important;
}
.vce-template-cards button:hover {
  border-color: rgba(59,130,246,0.40) !important;
  background: rgba(59,130,246,0.07) !important;
}
.vce-template-cards strong {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.75rem !important;
  color: rgba(191,219,254,0.92) !important;
}
.vce-template-cards em {
  font-size: 0.67rem !important;
  color: rgba(148,163,184,0.65) !important;
  line-height: 1.35 !important;
}
.vce-template-cards small {
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: rgba(59,130,246,0.14) !important;
  border: 1px solid rgba(59,130,246,0.28) !important;
  color: rgba(147,197,253,0.85) !important;
  font-size: 0.60rem !important;
  align-self: start !important;
}

/* ── VARIABLE DOCS: API reference ── */
.vce-variable-docs {
  background: rgba(3,5,14,0.80) !important;
  border: 1px solid rgba(59,130,246,0.12) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  gap: 0 !important;
}
.vce-variable-docs span {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  min-height: 0 !important;
  transition: background 0.14s !important;
}
.vce-variable-docs span:hover {
  background: rgba(59,130,246,0.06) !important;
}
.vce-variable-docs code {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.72rem !important;
  color: rgba(147,197,253,0.95) !important;
  white-space: nowrap !important;
}
.vce-variable-docs em {
  font-style: normal !important;
  font-size: 0.68rem !important;
  color: rgba(148,163,184,0.65) !important;
}

/* ── DESKTOP: sticky right sidebar ── */
@media (min-width: 761px) {
  .vce-side {
    position: sticky !important;
    top: 80px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(59,130,246,0.28) transparent !important;
  }
}

/* ── FUNCTION LIBRARY: category accent dots ── */
.vce-library details:has(summary) {
  border-left: 2px solid rgba(59,130,246,0.28) !important;
  padding-left: 10px !important;
}
.vce-library details:nth-child(odd):has(summary) {
  border-left-color: rgba(139,54,255,0.28) !important;
}
.vce-library details:nth-child(3n):has(summary) {
  border-left-color: rgba(34,197,94,0.28) !important;
}

/* ── COMMAND STACK ROW: animated Live dot ── */
.csp-row .status-chip.chip-live::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: middle;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.6); }
}

/* ── TYPE HINT: callout style ── */
.vce-type-hint {
  border-left: 3px solid rgba(59,130,246,0.40) !important;
  padding-left: 10px !important;
  border-radius: 0 6px 6px 0 !important;
  background: rgba(59,130,246,0.04) !important;
  color: rgba(147,197,253,0.75) !important;
  font-size: 0.73rem !important;
}

/* ── MOBILE: full-viewport code lab ── */
@media (max-width: 760px) {
  .vce-code-tab {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vce-code-head-left em { display: none; } /* hide subtitle on tiny screens */
}

/* ── COMMAND FORM: core grid tighter ── */
.vce-command-core-grid {
  gap: 9px !important;
  padding: 0 !important;
}

/* ── STATUS PANEL: bigger chips ── */
.vce-status-panel {
  gap: 7px !important;
  padding: 4px 0 !important;
}
.vce-status-panel .status-chip {
  padding: 4px 12px !important;
  font-size: 0.62rem !important;
}

/* v=116: Command Lab visual polish */
.command-stack-panel {
  --csp-c: 96, 165, 250;
}

.command-stack-panel .csp-row:not(.csp-row-add) {
  position: relative;
  min-height: 48px;
  color: rgba(219, 234, 254, 0.92);
  box-shadow: inset 2px 0 0 rgba(var(--csp-c), 0.42);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.command-stack-panel .csp-row:nth-child(2) { --csp-c: 139, 92, 246; }
.command-stack-panel .csp-row:nth-child(3) { --csp-c: 34, 197, 94; }
.command-stack-panel .csp-row:nth-child(4) { --csp-c: 245, 158, 11; }

.command-stack-panel .csp-row:not(.csp-row-add)::after {
  content: ">";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(-6px, -50%);
  opacity: 0;
  color: rgba(var(--csp-c), 0.95);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 900;
  transition: transform 0.18s ease, opacity 0.18s ease;
  pointer-events: none;
}

.command-stack-panel .csp-row:not(.csp-row-add):hover,
.command-stack-panel .csp-row:not(.csp-row-add):focus-within {
  transform: translateX(2px);
  background: linear-gradient(90deg, rgba(var(--csp-c), 0.12), rgba(5, 8, 20, 0.60)) !important;
  box-shadow: inset 3px 0 0 rgba(var(--csp-c), 0.92), 0 0 18px rgba(var(--csp-c), 0.10);
}

.command-stack-panel .csp-row:not(.csp-row-add):hover::after,
.command-stack-panel .csp-row:not(.csp-row-add):focus-within::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.command-stack-panel .csp-cmd {
  color: rgb(var(--csp-c));
  text-shadow: 0 0 12px rgba(var(--csp-c), 0.22);
}

.command-stack-panel .csp-arrow {
  color: rgba(var(--csp-c), 0.66) !important;
}

.command-stack-panel .csp-row-add {
  background: linear-gradient(180deg, rgba(7, 10, 24, 0.82), rgba(4, 6, 15, 0.92)) !important;
}

.command-stack-panel .csp-add-btn {
  width: 100%;
  min-height: 44px;
  border-style: dashed !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: rgba(59, 130, 246, 0.035) !important;
  color: rgba(191, 219, 254, 0.88) !important;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.01em;
}

.command-stack-panel .csp-add-btn:hover,
.command-stack-panel .csp-add-btn:focus-visible {
  border-color: rgba(96, 165, 250, 0.78) !important;
  background: rgba(59, 130, 246, 0.11) !important;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.20), 0 0 18px rgba(59, 130, 246, 0.16);
}

.flow-preview {
  align-items: center !important;
}

.flow-node {
  position: relative;
  min-height: 34px;
  padding: 8px 11px !important;
  border: 1px solid rgba(96, 165, 250, 0.24) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(147, 197, 253, 0.13), transparent 48%),
    rgba(5, 8, 20, 0.82) !important;
  box-shadow: inset 0 0 14px rgba(96, 165, 250, 0.04), 0 0 14px rgba(15, 23, 42, 0.25);
  font-family: 'IBM Plex Mono', monospace;
}

.flow-line {
  min-width: 36px !important;
  height: 2px !important;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.06), rgba(96, 165, 250, 0.72), rgba(139, 92, 246, 0.08)) !important;
  background-size: 220% 100% !important;
  animation: void-flow-line-pass 3.6s linear infinite;
  box-shadow: 0 0 14px rgba(96, 165, 250, 0.18);
}

@keyframes void-flow-line-pass {
  0% { background-position: 220% 0; opacity: 0.55; }
  50% { opacity: 1; }
  100% { background-position: -220% 0; opacity: 0.55; }
}

.vce-snippet-strip button {
  min-height: 38px !important;
  padding-inline: 11px !important;
  gap: 8px !important;
  position: relative;
  overflow: hidden;
}

.vce-snippet-strip button::before {
  content: "$";
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background: rgba(34, 211, 238, 0.13);
  color: rgba(103, 232, 249, 0.92);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  font-weight: 900;
  flex: 0 0 auto;
}

.vce-snippet-strip button:nth-child(3)::before,
.vce-snippet-strip button:nth-child(4)::before {
  content: "?";
  background: rgba(245, 158, 11, 0.14);
  color: rgba(252, 211, 77, 0.92);
}

.vce-snippet-strip button:nth-child(5)::before,
.vce-snippet-strip button:nth-child(6)::before {
  content: "#";
  background: rgba(34, 197, 94, 0.13);
  color: rgba(134, 239, 172, 0.92);
}

.vce-snippet-strip button:hover {
  transform: translateY(-1px);
}

.void-command-editor:has(:focus-within) {
  box-shadow:
    0 0 0 1px rgba(var(--cmd-c, 59,130,246), 0.20),
    0 24px 80px rgba(var(--cmd-c, 59,130,246), 0.10),
    0 18px 44px rgba(0, 0, 0, 0.42) !important;
}

.void-command-editor:has(#custom-command-form[data-cmd-type="prefix"]) { --cmd-c: 59,130,246; }
.void-command-editor:has(#custom-command-form[data-cmd-type="slash"]) { --cmd-c: 34,197,94; }
.void-command-editor:has(#custom-command-form[data-cmd-type="auto_reply"]) { --cmd-c: 245,158,11; }
.void-command-editor:has(#custom-command-form[data-cmd-type="void_run"]) { --cmd-c: 139,54,255; }
.void-command-editor:has(#custom-command-form[data-cmd-type="word"]) { --cmd-c: 6,182,212; }

#custom-command-form .vce-code-lab:has(.vce-code-frame:focus-within) {
  border-color: rgba(var(--cmd-c, 59,130,246), 0.62) !important;
  box-shadow:
    0 0 0 1px rgba(var(--cmd-c, 59,130,246), 0.22),
    0 0 36px rgba(var(--cmd-c, 59,130,246), 0.18),
    inset 0 0 28px rgba(var(--cmd-c, 59,130,246), 0.045) !important;
}

#custom-command-form .vce-code-lab:has(.vce-code-frame:focus-within) .vce-code-tab {
  background: rgba(var(--cmd-c, 59,130,246), 0.16) !important;
  color: rgba(239, 246, 255, 0.96) !important;
  text-shadow: 0 0 16px rgba(var(--cmd-c, 59,130,246), 0.32);
}

#custom-command-form .vce-code-frame:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(var(--cmd-c, 59,130,246), 0.58),
    inset 0 0 34px rgba(var(--cmd-c, 59,130,246), 0.055),
    0 0 22px rgba(var(--cmd-c, 59,130,246), 0.12) !important;
}

.vce-command-item {
  --item-c: 96, 165, 250;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  box-shadow: inset 2px 0 0 rgba(var(--item-c), 0.30) !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease !important;
}

.vce-command-item[data-cmd-type="word"] { --item-c: 34, 211, 238; }
.vce-command-item[data-cmd-type="void_run"] { --item-c: 192, 132, 252; }
.vce-command-item[data-cmd-type="auto_reply"] { --item-c: 245, 158, 11; }
.vce-command-item[data-cmd-type="slash"] { --item-c: 34, 197, 94; }

.vce-command-item:hover,
.vce-command-item:focus-visible {
  transform: translateX(2px) !important;
  border-color: rgba(var(--item-c), 0.46) !important;
  background: rgba(var(--item-c), 0.075) !important;
  box-shadow: inset 3px 0 0 rgba(var(--item-c), 0.82), 0 0 18px rgba(var(--item-c), 0.13) !important;
}

.vce-command-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.vce-command-main strong {
  min-width: 0;
}

.vce-command-trigger {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(var(--item-c), 0.95) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.76rem;
  white-space: nowrap;
}

.vce-command-item > .status-chip {
  justify-self: end;
  margin-left: 0 !important;
  white-space: nowrap;
}

.vce-list article[data-log-status="ok"] {
  box-shadow: inset 3px 0 0 rgba(61, 220, 151, 0.76) !important;
}

.vce-list article[data-log-status="fail"] {
  box-shadow: inset 3px 0 0 rgba(244, 63, 94, 0.78) !important;
  border-color: rgba(244, 63, 94, 0.22) !important;
}

.vce-log-ms {
  color: rgba(191, 219, 254, 0.92);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
}

.vce-log-time {
  color: rgba(148, 163, 184, 0.68) !important;
}

.vce-library button {
  position: relative;
  padding-right: 62px !important;
}

.vce-library button::after {
  content: "Insert";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(5px, -50%);
  opacity: 0;
  padding: 3px 7px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 999px;
  color: rgba(191, 219, 254, 0.86);
  background: rgba(15, 23, 42, 0.70);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.56rem;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.vce-library button:hover::after,
.vce-library button:focus-visible::after {
  transform: translate(0, -50%);
  opacity: 1;
}

.vce-library button[data-difficulty="easy"] b {
  color: rgba(134, 239, 172, 0.92) !important;
}

.vce-library button[data-difficulty="medium"] b {
  color: rgba(252, 211, 77, 0.92) !important;
}

.vce-library button[data-difficulty="hard"] b,
.vce-library button[data-difficulty="advanced"] b {
  color: rgba(248, 113, 113, 0.94) !important;
}

.vce-result.is-populated {
  box-shadow:
    inset 0 0 22px rgba(96, 165, 250, 0.055),
    0 0 18px rgba(15, 23, 42, 0.22) !important;
}

.vce-result.is-success {
  border-color: rgba(61, 220, 151, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(61, 220, 151, 0.055), transparent 46%),
    rgba(2, 4, 12, 0.96) !important;
}

.vce-result.is-success::before {
  content: "OUTPUT" !important;
  color: rgba(61, 220, 151, 0.88) !important;
}

@media (max-width: 760px) {
  .vce-enabled-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 58px !important;
  }

  .vce-enabled-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 50px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border: 1px solid rgba(var(--cmd-c, 59,130,246), 0.34) !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.92) !important;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.28) !important;
    flex: 0 0 auto;
  }

  .vce-enabled-toggle input[type="checkbox"]::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.88);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
  }

  .vce-enabled-toggle input[type="checkbox"]:checked {
    background: rgba(var(--cmd-c, 59,130,246), 0.22) !important;
    border-color: rgba(var(--cmd-c, 59,130,246), 0.68) !important;
  }

  .vce-enabled-toggle input[type="checkbox"]:checked::before {
    transform: translateX(22px);
    background: rgb(var(--cmd-c, 59,130,246));
    box-shadow: 0 0 14px rgba(var(--cmd-c, 59,130,246), 0.36), 0 2px 8px rgba(0, 0, 0, 0.45);
  }

  .vce-code-frame {
    overflow-x: hidden !important;
  }

  .vce-code-frame textarea {
    overflow-x: hidden !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  .vce-snippet-strip,
  .vce-mobile-keybar,
  .vce-progress-strip {
    scrollbar-width: none;
  }

  .vce-snippet-strip::-webkit-scrollbar,
  .vce-mobile-keybar::-webkit-scrollbar,
  .vce-progress-strip::-webkit-scrollbar {
    display: none;
  }

  .vce-library button span,
  .vce-library code {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .vce-library button::after {
    display: none;
  }

  .vce-actions {
    border-radius: 18px 18px 0 0 !important;
    background:
      linear-gradient(90deg, rgba(var(--cmd-c, 59,130,246), 0.10), transparent 58%),
      rgba(3, 5, 18, 0.92) !important;
    border-top: 1px solid rgba(var(--cmd-c, 59,130,246), 0.24) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.34), 0 0 22px rgba(var(--cmd-c, 59,130,246), 0.08) !important;
  }

  .vce-actions > * {
    min-height: 48px !important;
  }

  #custom-command-delete {
    margin-left: 10px !important;
    position: relative;
  }

  #custom-command-delete::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: rgba(148, 163, 184, 0.22);
  }

  #custom-command-save {
    order: -1;
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-line,
  .command-stack-panel .csp-row,
  .command-stack-panel .csp-row::after,
  .vce-command-item,
  .vce-library button::after,
  .vce-snippet-strip button {
    animation: none !important;
    transition: none !important;
  }
}

/* Studio Workbench */
.studio-workbench {
  display: grid;
  gap: 14px;
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 78% 12%, rgba(139, 92, 246, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(15, 16, 23, 0.94), rgba(7, 7, 10, 0.96));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36), inset 0 0 20px rgba(167, 139, 250, 0.04);
}

.studio-toolbar,
.studio-toolbar-actions,
.studio-form-grid {
  display: grid;
  gap: 10px;
}

.studio-toolbar label,
.studio-form label {
  display: grid;
  gap: 6px;
  color: var(--void-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.studio-toolbar select,
.studio-form input,
.studio-form textarea,
.studio-form select {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: 12px;
  background: rgba(7, 7, 10, 0.68);
  color: var(--void-text);
  padding: 10px 12px;
  outline: none;
}

.studio-form textarea {
  resize: vertical;
  line-height: 1.45;
}

.studio-toolbar select:focus,
.studio-form input:focus,
.studio-form textarea:focus {
  border-color: rgba(167, 139, 250, 0.58);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.studio-toolbar-actions {
  grid-template-columns: 1fr;
}

.studio-ai-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.studio-ai-bar input {
  flex: 1 1 100%;
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: 12px;
  background: rgba(7, 7, 10, 0.68);
  color: var(--void-text);
  padding: 10px 12px;
  outline: none;
}

.studio-ai-bar input:focus {
  border-color: rgba(167, 139, 250, 0.58);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.studio-ai-bar #studio-ai-generate {
  flex: 1 1 auto;
}

.studio-ai-bar .dock-action:disabled {
  opacity: 0.55;
  cursor: wait;
}

.studio-ai-help-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--void-muted);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.studio-ai-help-btn:hover,
.studio-ai-help-btn[aria-pressed="true"] {
  border-color: var(--hub-border, rgba(139, 54, 255, 0.40));
  color: #fff;
}

.studio-ai-hint {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.06);
  color: var(--void-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.studio-ai-hint[hidden] {
  display: none;
}

.studio-insert-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.studio-insert-bar-hint {
  color: var(--void-faint);
  font-size: 0.75rem;
}

.studio-insert-panel {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 12px;
  background: rgba(7, 7, 10, 0.5);
}

.studio-insert-panel[hidden] {
  display: none;
}

.studio-insert-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.studio-insert-tab {
  border: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--void-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.studio-insert-tab:hover {
  color: var(--void-text);
}

.studio-insert-tab.is-active {
  border-color: var(--hub-border, rgba(139, 54, 255, 0.40));
  background: rgba(139, 92, 246, 0.14);
  color: #fff;
}

.studio-insert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
}

.studio-insert-grid[hidden] {
  display: none;
}

.studio-insert-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 8px;
  background: rgba(21, 23, 38, 0.62);
  color: var(--void-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.studio-insert-grid button:hover {
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.12);
  transform: translateY(-1px);
}

.studio-section-title {
  margin: 0 0 4px;
  color: var(--void-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.studio-section-title:not(:first-child) {
  margin-top: 18px;
}

.studio-section-hint {
  margin: 0 0 6px;
  color: var(--void-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.studio-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.studio-asset-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 12px;
  background: rgba(21, 23, 38, 0.62);
  overflow: hidden;
}

.studio-asset-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  background: rgba(8, 10, 20, 0.6);
}

.studio-asset-meta {
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px;
}

.studio-asset-meta strong {
  color: var(--void-text);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.studio-asset-actions button {
  flex: 1 1 auto;
  min-height: 32px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.10);
  color: var(--void-text);
  font-size: 0.66rem;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.studio-asset-actions button:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.45);
}

.studio-form-question-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.studio-form-question-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(21, 23, 38, 0.74), rgba(10, 10, 18, 0.72));
  box-shadow: inset 0 0 18px rgba(139, 92, 246, 0.04);
}

@media (min-width: 720px) {
  .studio-ai-bar input {
    flex: 1 1 0%;
    min-width: 200px;
  }

  .studio-ai-bar #studio-ai-generate {
    flex: 0 0 auto;
  }

  .studio-form-question-row {
    grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.7fr) minmax(160px, 1fr) auto;
    align-items: end;
  }
}

.studio-mode-panel {
  display: none;
}

.studio-mode-panel.is-active {
  display: block;
}

.studio-mini-list,
.studio-resource-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.studio-mini-list button,
.studio-resource-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 12px;
  background: rgba(21, 23, 38, 0.62);
  color: var(--void-text);
  padding: 10px 12px;
  text-align: left;
}

.studio-mini-list button span,
.studio-resource-list button span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-mini-list button em,
.studio-resource-list button em {
  color: var(--void-muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-mini-list button small,
.studio-resource-list button small {
  color: var(--void-faint);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.studio-preview-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 8px;
}

.studio-preview-fields b {
  color: #f5f7ff;
  font-size: 0.78rem;
}

.studio-preview-fields span,
.studio-live-preview em {
  color: rgba(245, 247, 255, 0.70);
  font-size: 0.74rem;
}

.studio-thumb-preview {
  max-width: 72px;
  max-height: 72px;
  border-radius: 8px;
  margin-top: 8px;
  object-fit: cover;
}

.studio-image-preview {
  width: 100%;
  max-height: 180px;
  border-radius: 10px;
  margin-top: 8px;
  object-fit: cover;
}

.studio-preview-separator {
  border: 0;
  border-top: 1px solid rgba(245, 247, 255, 0.18);
  margin: 10px 0;
}

.dock-pill.is-disabled {
  opacity: 0.55;
}

@media (min-width: 720px) {
  .studio-toolbar {
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
  }

  .studio-toolbar-actions {
    grid-template-columns: repeat(3, max-content);
    justify-content: end;
  }

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

  .studio-asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   VØID v=118 · Commands + Studio visual polish
   Targets: Command Lab code surface, progress pipeline, status chips,
   Studio preview cinematic depth, dock active states, resource shelf,
   V2 command selector, toolbar hierarchy, mobile thumb targets.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── COMMANDS: code editor taller on desktop ──────────────────────── */
@media (min-width: 761px) {
  .vce-code-frame,
  .vce-code-frame textarea,
  .vce-line-rail {
    min-height: 300px !important;
  }
}

/* ─── COMMANDS: status panel → clearer command state ───────────────── */
.vce-status-panel {
  background:
    linear-gradient(135deg, rgba(4, 7, 18, 0.90), rgba(8, 12, 24, 0.70)) !important;
  border-color: rgba(var(--cmd-c, 59, 130, 246), 0.24) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  gap: 8px !important;
}

/* ─── COMMANDS: core grid visual separator ──────────────────────────── */
.vce-command-core-grid {
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.10) !important;
  margin-bottom: 2px !important;
}

/* ─── COMMANDS: enabled toggle states ──────────────────────────────── */
.vce-enabled-toggle {
  border-color: rgba(34, 197, 94, 0.24) !important;
  background: rgba(34, 197, 94, 0.05) !important;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s !important;
}
.vce-enabled-toggle:has(input:checked) {
  border-color: rgba(34, 197, 94, 0.44) !important;
  background: rgba(34, 197, 94, 0.10) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.10), inset 0 0 8px rgba(34, 197, 94, 0.04) !important;
}

/* ─── COMMANDS: danger actions cleaner ─────────────────────────────── */
.danger-action {
  border-color: rgba(244, 63, 94, 0.36) !important;
  color: rgba(254, 202, 202, 0.90) !important;
  background: rgba(244, 63, 94, 0.04) !important;
}
.danger-action:hover {
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(244, 63, 94, 0.60) !important;
  color: #fecaca !important;
}

/* ─── STUDIO: preview → cinematic dark flagship surface ─────────────── */
.void-control-body .control-studio-preview {
  border: 1px solid rgba(139, 54, 255, 0.42) !important;
  background:
    radial-gradient(ellipse 110% 60% at 50% -5%, rgba(139, 54, 255, 0.18), transparent 52%),
    rgba(3, 4, 12, 0.99) !important;
  box-shadow:
    0 0 0 1px rgba(139, 54, 255, 0.10),
    0 32px 80px rgba(0, 0, 0, 0.62),
    0 0 60px rgba(139, 54, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Violet shimmer line along the top edge */
.void-control-body .control-studio-preview::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 54, 255, 0.70) 30%,
    rgba(88, 101, 242, 0.55) 70%,
    transparent
  );
  z-index: 2;
  pointer-events: none;
  opacity: 0.80;
}

/* ─── STUDIO: discord preview card → richer Discord-like surface ─────── */
.void-control-body .discord-preview-card {
  border-color: rgba(139, 54, 255, 0.46) !important;
  background: rgba(14, 16, 26, 0.96) !important;
  min-height: 222px !important;
  padding: 16px 18px !important;
  box-shadow:
    inset 4px 0 0 var(--hub-c, rgba(139, 54, 255, 0.95)),
    0 8px 28px rgba(0, 0, 0, 0.44) !important;
}

/* Preview avatar: Discord-style round with glow */
.void-control-body .preview-avatar {
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(139, 54, 255, 0.76), rgba(88, 101, 242, 0.72)) !important;
  border: 1.5px solid rgba(139, 54, 255, 0.44) !important;
  box-shadow: 0 0 12px rgba(139, 54, 255, 0.30) !important;
}

/* Preview username: accent color */
.void-control-body .preview-message span {
  color: rgba(180, 140, 255, 0.92) !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
}

/* Preview title: crisp white */
.void-control-body .preview-message strong {
  color: rgba(245, 247, 255, 0.96) !important;
  font-size: 0.88rem !important;
  line-height: 1.30 !important;
  font-family: var(--void-font-display) !important;
}

/* Preview body text */
.void-control-body .preview-message p {
  color: rgba(213, 221, 255, 0.80) !important;
  font-size: 0.80rem !important;
  line-height: 1.50 !important;
}

/* Preview buttons: Discord-like clickable style */
.void-control-body .preview-buttons b {
  min-height: 36px !important;
  border-radius: 4px !important;
  padding: 0 14px !important;
  font-size: 0.76rem !important;
  cursor: default !important;
  box-shadow: 0 0 10px rgba(139, 54, 255, 0.14) !important;
}

/* ─── STUDIO: builder dock active pill → clear flagship selection ─────── */
.dock-pill-active {
  background:
    linear-gradient(
      135deg,
      rgba(139, 54, 255, 0.30),
      rgba(88, 101, 242, 0.18)
    ) !important;
  border-color: rgba(139, 54, 255, 0.80) !important;
  color: rgba(245, 247, 255, 1.0) !important;
  box-shadow:
    0 0 20px rgba(139, 54, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ─── STUDIO: toolbar separator ─────────────────────────────────────── */
.studio-toolbar {
  padding-bottom: 16px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.14) !important;
}

.studio-toolbar label > span {
  color: rgba(196, 181, 253, 0.82) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.03em !important;
}

/* ─── STUDIO: Send to Discord → hero CTA ────────────────────────────── */
#studio-send {
  background: linear-gradient(
    135deg,
    rgba(139, 54, 255, 0.88),
    rgba(88, 101, 242, 0.78)
  ) !important;
  border-color: rgba(139, 54, 255, 0.75) !important;
  box-shadow: 0 0 26px rgba(139, 54, 255, 0.36) !important;
  color: #fff !important;
}
#studio-send:hover {
  background: linear-gradient(
    135deg,
    rgba(139, 54, 255, 0.98),
    rgba(88, 101, 242, 0.88)
  ) !important;
  box-shadow: 0 0 38px rgba(139, 54, 255, 0.52) !important;
}

/* ─── STUDIO: "Runs command" → visual link to Command Lab ───────────── */
#studio-v2-button-command {
  border-color: rgba(139, 92, 246, 0.48) !important;
  background:
    radial-gradient(circle at 95% 50%, rgba(139, 54, 255, 0.09), transparent 44%),
    rgba(10, 8, 22, 0.92) !important;
  color: rgba(231, 213, 255, 0.94) !important;
}
#studio-v2-button-command:focus {
  border-color: rgba(139, 54, 255, 0.78) !important;
  box-shadow:
    0 0 0 3px rgba(139, 54, 255, 0.14),
    0 0 20px rgba(139, 54, 255, 0.12) !important;
}

/* "Runs command" label: violet accent to telegraph Commands link */
label:has(#studio-v2-button-command) > span {
  color: rgba(196, 181, 253, 0.92) !important;
  font-weight: 700 !important;
}

/* ─── STUDIO: V2 buttons drawer ──────────────────────────────────────── */
.studio-mode-panel[data-studio-panel="v2"] .vce-drawer {
  border-color: rgba(139, 92, 246, 0.26) !important;
  background: rgba(7, 6, 20, 0.80) !important;
}

/* ─── STUDIO: resource lists → asset shelf with left accent ─────────── */
.studio-resource-list button,
.studio-mini-list button {
  border-left: 3px solid rgba(139, 92, 246, 0.38) !important;
  background:
    radial-gradient(circle at 90% 50%, rgba(139, 54, 255, 0.06), transparent 44%),
    rgba(21, 23, 38, 0.72) !important;
  transition: background 0.18s, border-left-color 0.18s, transform 0.16s var(--ease-out) !important;
}
.studio-resource-list button:hover,
.studio-mini-list button:hover {
  border-left-color: rgba(139, 92, 246, 0.74) !important;
  background:
    radial-gradient(circle at 90% 50%, rgba(139, 54, 255, 0.12), transparent 44%),
    rgba(26, 29, 54, 0.82) !important;
  transform: translateX(2px) !important;
}

/* ─── STUDIO: form field labels ──────────────────────────────────────── */
.studio-form label > span {
  color: rgba(196, 181, 253, 0.82) !important;
  letter-spacing: 0.02em !important;
}

/* ─── STUDIO: focus states → violet glow ────────────────────────────── */
.studio-form input:focus,
.studio-form textarea:focus,
.studio-form select:focus {
  border-color: rgba(167, 139, 250, 0.66) !important;
  box-shadow:
    0 0 0 3px rgba(139, 92, 246, 0.12),
    0 0 16px rgba(139, 54, 255, 0.08) !important;
  outline: none !important;
}

/* ─── STUDIO: status text ────────────────────────────────────────────── */
#studio-status {
  color: rgba(147, 197, 253, 0.55) !important;
  font-size: 0.71rem !important;
  line-height: 1.45 !important;
  font-style: italic !important;
}

/* ─── STUDIO + COMMANDS: mobile thumb targets (390px) ───────────────── */
@media (max-width: 520px) {
  /* Studio workbench tighter padding */
  .studio-workbench {
    padding: 12px !important;
    gap: 14px !important;
    margin: 8px 0 14px !important;
  }

  /* Toolbar action buttons larger */
  .studio-toolbar-actions .dock-action,
  .studio-toolbar-actions .btn {
    min-height: 48px !important;
  }

  /* Builder dock pills thumb-friendly */
  .builder-dock .dock-pill {
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: 0.78rem !important;
  }

  /* Studio form fields: iOS zoom prevention + tap targets */
  .studio-form input,
  .studio-form textarea,
  .studio-form select,
  .studio-toolbar select {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  /* Resource list items: easier to tap */
  .studio-resource-list button,
  .studio-mini-list button {
    min-height: 54px !important;
  }

  /* Discord preview card margin */
  .void-control-body .discord-preview-card {
    margin: 10px !important;
  }

  /* Send button larger */
  #studio-send {
    min-height: 52px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   VØID v=119 · Amplified Commands + Studio visual presence
   Raises all opacities/contrast so effects are actually visible
   ════════════════════════════════════════════════════════════ */

/* ── STUDIO: outer preview container ─────────────────────────────────── */
.void-control-body .control-studio-preview {
  border-color: rgba(139,54,255,0.75) !important;
  background:
    radial-gradient(ellipse 130% 55% at 50% 0%,
      rgba(139,54,255,0.38) 0%,
      rgba(88,101,242,0.16) 44%,
      transparent 65%),
    rgba(4,3,14,0.99) !important;
  box-shadow:
    0 0 0 1px rgba(139,54,255,0.24),
    0 0 52px rgba(139,54,255,0.30),
    0 40px 100px rgba(0,0,0,0.78),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ── STUDIO: top shimmer — thicker, full brightness ──────────────────── */
.void-control-body .control-studio-preview::after {
  height: 2px !important;
  opacity: 1 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(139,54,255,1.0) 25%,
    rgba(196,157,255,1.0) 50%,
    rgba(88,101,242,0.90) 75%,
    transparent 100%) !important;
}

/* ── STUDIO: Discord preview card — elevated surface ─────────────────── */
.void-control-body .discord-preview-card {
  background: rgba(24,22,46,0.97) !important;
  border-color: rgba(139,54,255,0.62) !important;
  box-shadow:
    inset 6px 0 0 rgba(139,54,255,1.0),
    0 16px 48px rgba(0,0,0,0.65),
    0 0 0 1px rgba(139,54,255,0.18) !important;
}

/* ── STUDIO: dock pills — visible idle state ──────────────────────────── */
.builder-dock .dock-pill {
  border: 1px solid rgba(139,54,255,0.28) !important;
  background: rgba(13,10,30,0.78) !important;
  color: rgba(196,181,253,0.72) !important;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s, color 0.16s !important;
}
.builder-dock .dock-pill:hover:not(.is-disabled) {
  border-color: rgba(167,139,250,0.55) !important;
  background: rgba(20,15,44,0.90) !important;
  color: rgba(225,215,255,0.98) !important;
}
.builder-dock .dock-pill.dock-pill-active {
  background: linear-gradient(135deg, rgba(139,54,255,0.55), rgba(88,101,242,0.38)) !important;
  border-color: rgba(196,157,255,1.0) !important;
  color: #fff !important;
  box-shadow:
    0 0 28px rgba(139,54,255,0.60),
    0 0 14px rgba(139,54,255,0.40),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  text-shadow: 0 0 12px rgba(210,190,255,0.65) !important;
}

/* ── STUDIO: form inputs — violet-tinted ─────────────────────────────── */
.studio-form input:not([type="color"]),
.studio-form textarea,
.studio-form select {
  border-color: rgba(139,54,255,0.30) !important;
  background: rgba(9,7,23,0.88) !important;
  color: rgba(228,222,255,0.92) !important;
}
.studio-form input:focus,
.studio-form textarea:focus,
.studio-form select:focus {
  border-color: rgba(167,139,250,0.82) !important;
  box-shadow:
    0 0 0 3px rgba(139,54,255,0.20),
    inset 0 0 12px rgba(139,54,255,0.06) !important;
  outline: none !important;
}

/* ── STUDIO: Send to Discord — full hero intensity ───────────────────── */
#studio-send {
  background: linear-gradient(135deg, rgba(139,54,255,1.0), rgba(88,101,242,0.92)) !important;
  border-color: rgba(210,190,255,0.55) !important;
  box-shadow:
    0 0 40px rgba(139,54,255,0.60),
    0 4px 20px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
#studio-send:hover {
  box-shadow:
    0 0 56px rgba(139,54,255,0.78),
    0 6px 24px rgba(0,0,0,0.50) !important;
}

/* ── COMMANDS: command rows — left accent + hover ─────────────────────── */
.csp-row:not(.csp-row-add) {
  border-left: 3px solid rgba(59,130,246,0.50) !important;
  padding-left: 10px !important;
  border-radius: 0 8px 8px 0 !important;
  transition: border-left-color 0.15s, background 0.15s !important;
}
.csp-row:not(.csp-row-add):hover {
  border-left-color: rgba(96,165,250,1.0) !important;
  background: rgba(37,99,235,0.10) !important;
}
.csp-cmd {
  color: rgba(147,197,253,1.0) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(59,130,246,0.55) !important;
}

/* ── COMMANDS: flow preview nodes ────────────────────────────────────── */
.flow-node {
  background: rgba(9,13,34,0.95) !important;
  border: 1px solid rgba(59,130,246,0.42) !important;
  color: rgba(147,197,253,0.92) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
}
.flow-line {
  background: rgba(59,130,246,0.38) !important;
  flex: 1 !important;
}

/* ── COMMANDS + ALL: status chips — vivid glows ─────────────────────── */
.chip-live {
  background: rgba(16,185,129,0.20) !important;
  border: 1px solid rgba(16,185,129,0.68) !important;
  color: rgba(110,231,183,1.0) !important;
  box-shadow: 0 0 12px rgba(16,185,129,0.32) !important;
}
.chip-ready {
  background: rgba(245,158,11,0.18) !important;
  border: 1px solid rgba(245,158,11,0.62) !important;
  color: rgba(252,211,77,1.0) !important;
  box-shadow: 0 0 12px rgba(245,158,11,0.28) !important;
}
.chip-staged {
  background: rgba(245,158,11,0.14) !important;
  border: 1px solid rgba(245,158,11,0.50) !important;
  color: rgba(252,211,77,0.88) !important;
}

/* ── COMMANDS: action dock buttons ──────────────────────────────────── */
.action-dock .dock-action {
  border: 1px solid rgba(59,130,246,0.28) !important;
  background: rgba(9,12,32,0.80) !important;
  color: rgba(147,197,253,0.80) !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s !important;
}
.action-dock .dock-action:hover {
  border-color: rgba(96,165,250,0.65) !important;
  background: rgba(18,28,72,0.88) !important;
  color: rgba(186,230,253,1.0) !important;
  box-shadow: 0 0 16px rgba(59,130,246,0.28) !important;
}

/* ── COMMANDS: code lab IDE head ─────────────────────────────────────── */
.vce-code-head {
  background: rgba(5,8,24,0.98) !important;
  border-bottom-color: rgba(59,130,246,0.28) !important;
}
.vce-code-tab {
  border: 1px solid rgba(59,130,246,0.40) !important;
  background: rgba(10,18,52,0.78) !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
}
.vce-cmd-prefix {
  color: rgba(147,197,253,1.0) !important;
  text-shadow: 0 0 10px rgba(59,130,246,0.65) !important;
}
.vce-cmd-name {
  color: rgba(186,230,253,0.96) !important;
}
.vce-code-frame {
  background: rgba(3,5,15,0.99) !important;
  border-color: rgba(59,130,246,0.28) !important;
}

/* ── SHARED: eyebrow labels — glow accent ────────────────────────────── */
.eyebrow {
  color: rgba(196,181,253,0.96) !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
  text-shadow: 0 0 16px rgba(139,54,255,0.35) !important;
}

/* ════════════════════════════════════════════════════════════
   VØID v=119 · Studio deep polish
   ════════════════════════════════════════════════════════════ */

/* ── STUDIO: hub head — intensified flagship gradient ─────────────────── */
#view-studio .hub-shell-head {
  background:
    radial-gradient(ellipse 85% 75% at 78% 15%, rgba(139,54,255,0.30) 0%, transparent 55%),
    linear-gradient(155deg, rgba(139,54,255,0.24) 0%, rgba(88,101,242,0.14) 45%, transparent 100%) !important;
  border-bottom: 1px solid rgba(139,54,255,0.30) !important;
}

/* ── STUDIO: builder dock — tray band ────────────────────────────────── */
.builder-dock {
  background:
    linear-gradient(180deg, rgba(12,8,30,0.96) 0%, rgba(7,5,20,0.88) 100%) !important;
  border-top: 1px solid rgba(139,54,255,0.20) !important;
  border-bottom: 1px solid rgba(139,54,255,0.12) !important;
  padding: 10px 14px 12px !important;
  margin: 0 !important;
}

/* ── STUDIO: Save Draft + Save Template — subtle purple tint ─────────── */
#studio-save-draft,
#studio-save-template {
  border: 1px solid rgba(139,54,255,0.34) !important;
  background: rgba(13,9,32,0.82) !important;
  color: rgba(196,181,253,0.90) !important;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s !important;
}
#studio-save-draft:hover,
#studio-save-template:hover {
  border-color: rgba(167,139,250,0.68) !important;
  background: rgba(22,14,52,0.92) !important;
  box-shadow: 0 0 20px rgba(139,54,255,0.30) !important;
}

/* ── STUDIO: form inputs — visible purple border ─────────────────────── */
.studio-form input:not([type="color"]),
.studio-form textarea,
.studio-form select,
#view-studio .studio-workbench input:not([type="color"]),
#view-studio .studio-workbench textarea,
#view-studio .studio-workbench select {
  border: 1px solid rgba(139,54,255,0.36) !important;
  background: rgba(8,6,22,0.90) !important;
  color: rgba(228,222,255,0.92) !important;
}
.studio-form input:not([type="color"]):focus,
.studio-form textarea:focus,
.studio-form select:focus {
  border-color: rgba(167,139,250,0.80) !important;
  box-shadow:
    0 0 0 3px rgba(139,54,255,0.18),
    inset 0 0 10px rgba(139,54,255,0.05) !important;
  outline: none !important;
}

/* ── STUDIO: channel select in toolbar ───────────────────────────────── */
#studio-channel-select {
  border: 1px solid rgba(139,54,255,0.36) !important;
  background: rgba(8,6,22,0.90) !important;
  color: rgba(228,222,255,0.88) !important;
}

/* ── STUDIO: active mode panel — violet top bar ──────────────────────── */
.studio-mode-panel.is-active {
  border-top: 2px solid rgba(139,54,255,0.44) !important;
  padding-top: 16px !important;
}

/* ── STUDIO: workbench as a distinct surface ─────────────────────────── */
.studio-workbench {
  background:
    linear-gradient(175deg, rgba(12,9,28,0.60) 0%, rgba(6,4,16,0.40) 100%) !important;
  border: 1px solid rgba(139,54,255,0.14) !important;
  border-radius: 18px !important;
}

/* ── STUDIO: embed preview accent rail ───────────────────────────────── */
/* background intentionally left to the inline style set by
   renderStudioPreview() so the rail reflects the live embed/component
   color — see the "Real Discord preview" block below for shape rules */

/* ── STUDIO: preview message typography ──────────────────────────────── */
.void-control-body .preview-message > span:first-child {
  color: rgba(196,157,255,0.98) !important;
  font-weight: 800 !important;
  font-size: 0.83rem !important;
  letter-spacing: 0.01em !important;
}
.void-control-body .preview-message strong {
  color: rgba(248,248,255,1.0) !important;
  font-size: 0.93rem !important;
  display: block !important;
  margin: 2px 0 5px !important;
}
.void-control-body .preview-message p {
  color: rgba(200,210,240,0.84) !important;
  font-size: 0.86rem !important;
  line-height: 1.52 !important;
  margin: 0 !important;
}

/* ── STUDIO: preview V2 button row ───────────────────────────────────── */
.void-control-body .preview-buttons b {
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, rgba(88,101,242,0.70), rgba(59,71,212,0.60)) !important;
  border: 1px solid rgba(88,101,242,0.55) !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 0 14px !important;
  min-height: 34px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(88,101,242,0.30) !important;
}

/* ── STUDIO: vce-drawer inside Studio panels ─────────────────────────── */
#view-studio .vce-drawer {
  border: 1px solid rgba(139,54,255,0.22) !important;
  background: rgba(7,5,20,0.75) !important;
  border-radius: 12px !important;
}
#view-studio .vce-drawer summary {
  color: rgba(196,181,253,0.88) !important;
  font-weight: 700 !important;
}

/* ── STUDIO: resource list — drafts, templates ───────────────────────── */
.studio-resource-list,
.studio-mini-list {
  background: rgba(7,5,20,0.70) !important;
  border: 1px solid rgba(139,54,255,0.18) !important;
  border-radius: 12px !important;
  padding: 6px !important;
}

/* ── STUDIO: mobile 390px workbench adjustments ──────────────────────── */
@media (max-width: 520px) {
  .studio-workbench {
    border-radius: 14px !important;
  }
  #studio-save-draft,
  #studio-save-template {
    min-height: 48px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   VØID v=119 · Studio live-editor layout + de-genericize
   ════════════════════════════════════════════════════════════ */

/* ── STUDIO: side-by-side on desktop — preview left, builder right ─── */
@media (min-width: 761px) {
  #view-studio.hub-view.active {
    grid-template-columns: minmax(300px, 44%) 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    align-items: start !important;
  }

  /* Hub head spans full width */
  #view-studio.hub-view.active > .hub-shell-head {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* Preview locked to left column, sticky while form scrolls */
  #view-studio.hub-view.active > .control-studio-preview {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    position: sticky !important;
    top: 72px !important;
    align-self: start !important;
    min-height: 380px !important;
  }

  /* Dock sits at top of right column */
  #view-studio.hub-view.active > .builder-dock {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* Workbench fills rest of right column */
  #view-studio.hub-view.active > .studio-workbench {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
}

/* ── STUDIO: form zone — clean/functional, not glowing ───────────────── */
/* Reduce the glow on the workbench so it reads as tool, not decoration */
.studio-workbench {
  box-shadow: none !important;
  border-color: rgba(139,54,255,0.10) !important;
  background: rgba(10,8,24,0.70) !important;
}

/* Form labels: tighter, more utilitarian */
.studio-form label > span,
#view-studio label > span {
  font-size: 0.65rem !important;
  letter-spacing: 0.10em !important;
  font-weight: 700 !important;
  color: rgba(148,130,200,0.72) !important;
  text-transform: uppercase !important;
}

/* Form inputs: clean borders, no glow at rest */
.studio-form input:not([type="color"]),
.studio-form textarea,
.studio-form select,
#view-studio .studio-workbench input:not([type="color"]),
#view-studio .studio-workbench textarea,
#view-studio .studio-workbench select {
  border-color: rgba(80,60,130,0.40) !important;
  background: rgba(6,5,18,0.92) !important;
  color: rgba(220,215,255,0.90) !important;
  box-shadow: none !important;
}

/* Focus: only then does it glow */
.studio-form input:focus,
.studio-form textarea:focus,
.studio-form select:focus {
  border-color: rgba(139,54,255,0.75) !important;
  box-shadow: 0 0 0 2px rgba(139,54,255,0.16) !important;
  background: rgba(9,7,24,0.96) !important;
  outline: none !important;
}

/* Toolbar channel select: same treatment */
#studio-channel-select {
  border-color: rgba(80,60,130,0.40) !important;
  background: rgba(6,5,18,0.92) !important;
}

/* Save buttons: clean ghost style */
#studio-save-draft,
#studio-save-template {
  border-color: rgba(80,60,130,0.40) !important;
  background: transparent !important;
  color: rgba(180,160,230,0.80) !important;
  font-size: 0.82rem !important;
}
#studio-save-draft:hover,
#studio-save-template:hover {
  border-color: rgba(139,54,255,0.60) !important;
  background: rgba(139,54,255,0.08) !important;
  color: rgba(210,195,255,1.0) !important;
  box-shadow: none !important;
}

/* Send: stays hero */
#studio-send {
  letter-spacing: 0.06em !important;
  font-weight: 800 !important;
}

/* Studio drawers: minimal at rest */
#view-studio .vce-drawer {
  border-color: rgba(60,45,100,0.40) !important;
  background: rgba(6,5,18,0.60) !important;
}

/* ── STUDIO: preview zone — the stage stays dramatic ─────────────────── */
@media (min-width: 761px) {
  #view-studio .control-studio-preview {
    box-shadow:
      0 0 0 1px rgba(139,54,255,0.30),
      0 0 64px rgba(139,54,255,0.36),
      0 48px 100px rgba(0,0,0,0.80),
      inset 0 1px 0 rgba(255,255,255,0.08) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   VØID v=119 · Real Discord preview + VOID identity reset
   ════════════════════════════════════════════════════════════ */

/* ── Preview viewport: Discord channel gray, VOID crown ──────────── */
.void-control-body .control-studio-preview {
  background:
    radial-gradient(ellipse 72% 28% at 50% 0%,
      rgba(139,54,255,0.22) 0%, transparent 56%),
    #313338 !important;
  border-color: rgba(0,0,0,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(139,54,255,0.22),
    0 0 52px rgba(139,54,255,0.26),
    0 36px 80px rgba(0,0,0,0.82),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ── Embed card: Discord embed dark ──────────────────────────────── */
.void-control-body .discord-preview-card {
  background: #2b2d31 !important;
  border: none !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45) !important;
  margin: 12px !important;
  min-height: 80px !important;
  padding: 10px 12px 10px 16px !important;
}

/* ── Accent rail: thin colored bar reflecting the live embed/component
   color, Discord-style — clipped to the card's rounded left corners ── */
.void-control-body .preview-rail {
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  border-radius: 4px 0 0 4px !important;
}

/* ── Avatar: Discord-style circle, VOID × blurple gradient ──────── */
.void-control-body .preview-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #8B36FF, #5865F2) !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: 0 !important;
}

/* ── Bot name: Discord white + BOT chip ──────────────────────────── */
.void-control-body .preview-message > span:first-child {
  color: #f2f3f5 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  line-height: 1.375 !important;
}
.void-control-body .preview-message > span:first-child::after {
  content: "APP";
  margin-left: 4px;
  padding: 1px 4px;
  background: #5865F2;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0.04em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── Embed title: Discord white ──────────────────────────────────── */
.void-control-body .preview-message strong {
  display: block !important;
  color: #f2f3f5 !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ── Embed description: Discord light gray ───────────────────────── */
.void-control-body .preview-message p {
  color: #dbdee1 !important;
  font-size: 0.875rem !important;
  line-height: 1.375 !important;
  margin: 3px 0 6px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ── V2 buttons: Discord blurple, small radius ───────────────────── */
.void-control-body .preview-buttons {
  margin-top: 8px !important;
  gap: 6px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.void-control-body .preview-buttons b {
  background: #5865F2 !important;
  border: none !important;
  border-radius: 3px !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  min-height: 32px !important;
  padding: 0 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.40) !important;
}

/* ── Embed image/thumbnail: Discord corner radius ────────────────── */
.void-control-body .studio-image-preview,
.void-control-body .studio-thumb-preview {
  border-radius: 4px !important;
  margin-top: 8px !important;
}

/* ── Embed footer: Discord muted gray, no italics ────────────────── */
.void-control-body .preview-message em {
  display: block !important;
  font-style: normal !important;
  color: #949ba4 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
}

/* ── VOID identity: strip purple from dead surfaces ──────────────── */

/* Form area: charcoal void, no purple tint */
.studio-workbench {
  background: rgba(7,7,11,0.88) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Inputs: true black at rest, glow only on focus */
.studio-form input:not([type="color"]),
.studio-form textarea,
.studio-form select,
#view-studio .studio-workbench input:not([type="color"]),
#view-studio .studio-workbench textarea,
#view-studio .studio-workbench select {
  background: rgba(4,4,7,0.96) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(230,228,240,0.92) !important;
}

/* Channel select */
#studio-channel-select {
  background: rgba(4,4,7,0.96) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Focus: energy appears only then */
.studio-form input:focus,
.studio-form textarea:focus,
.studio-form select:focus {
  border-color: rgba(139,54,255,0.75) !important;
  box-shadow: 0 0 0 2px rgba(139,54,255,0.16) !important;
  outline: none !important;
}

/* Save buttons: true ghost */
#studio-save-draft,
#studio-save-template {
  background: transparent !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(200,195,220,0.70) !important;
}
#studio-save-draft:hover,
#studio-save-template:hover {
  border-color: rgba(139,54,255,0.55) !important;
  color: rgba(220,215,255,0.92) !important;
  background: rgba(139,54,255,0.07) !important;
  box-shadow: none !important;
}

/* Drawers: black void, energy only on summary hover */
#view-studio .vce-drawer {
  background: rgba(4,4,7,0.80) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Mode panel border: clean line, not glow */
.studio-mode-panel.is-active {
  border-top-color: rgba(139,54,255,0.30) !important;
}

/* ── STUDIO: mobile compact preview — fits hub head + preview + form above fold ── */
@media (max-width: 760px) {
  /* Shrink the outer preview frame */
  #view-studio .control-studio-preview {
    padding: 10px !important;
    min-height: auto !important;
  }

  /* Discord card: compact row layout, avatar pinned to top like Discord */
  #view-studio .discord-preview-card {
    min-height: 72px !important;
    padding: 10px 12px 10px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Avatar smaller */
  #view-studio .preview-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 0.70rem !important;
  }

  /* Message block: tighter */
  #view-studio .preview-message {
    flex: 1 !important;
    min-width: 0 !important;
  }
  #view-studio .preview-message > span:first-child {
    font-size: 0.72rem !important;
  }
  #view-studio .preview-message strong {
    font-size: 0.82rem !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Body text hidden in compact mode — too noisy at small size */
  #view-studio .preview-message p {
    display: none !important;
  }
  /* Buttons hidden in compact mode */
  #view-studio .preview-buttons {
    display: none !important;
  }

  /* Hub head more compact on mobile */
  #view-studio .hub-shell-head {
    padding-bottom: 16px !important;
  }
  #view-studio .hub-shell-head h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    margin-bottom: 6px !important;
  }
  #view-studio .hub-shell-head p {
    display: none !important;
  }
  /* Decorative spinning orb sits in normal flow on mobile and adds ~100px
     of dead space above the builder — drop it so the live editor starts
     closer to the fold */
  #view-studio .hub-head-orb {
    display: none !important;
  }

  /* Toolbar actions: Save Draft + Save Template share a row, Send to
     Discord stays full-width as the primary action below them */
  #view-studio .studio-toolbar-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #view-studio #studio-send {
    grid-column: 1 / -1 !important;
  }
}

/* ── COMMANDS: mobile hero compaction — bring Command Stack above the fold ── */
@media (max-width: 760px) {
  #view-commands .hub-shell-head p {
    display: none !important;
  }
  #view-commands .hub-shell-head h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    margin-bottom: 6px !important;
  }
  #view-commands .hub-shell-head {
    padding-bottom: 16px !important;
  }
  #view-commands .hub-head-orb {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   STUDIO vNEXT — live Discord message editor
   The Studio centerpiece is a real Discord message surface. Every region
   carries data-studio-edit and focuses its matching hidden-form input.
   Mobile-first (390px), appended last so it wins the legacy cascade.
   ════════════════════════════════════════════════════════════════════ */

/* ── Stage: the channel frame ─────────────────────────────────────── */
#view-studio .studio-stage {
  position: relative;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 12, 18, 0.97), rgba(7, 7, 10, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(139, 54, 255, 0.05);
  overflow: hidden;
}

#view-studio .stg-channel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 10, 14, 0.92);
}

#view-studio .stg-hash {
  color: #80848e;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

#view-studio .stg-channel-pick {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

#view-studio .stg-channel-pick > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#view-studio .stg-channel-pick::after {
  content: "▾";
  color: #80848e;
  font-size: 0.72rem;
  pointer-events: none;
}

#view-studio #studio-channel-select {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f2f3f5 !important;
  font-family: var(--f-ui);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 8px 2px !important;
  min-height: 40px;
  cursor: pointer;
  text-overflow: ellipsis;
}

#view-studio #studio-channel-select:focus {
  outline: none !important;
  box-shadow: inset 0 -2px 0 rgba(180, 79, 255, 0.7) !important;
}

#view-studio #studio-channel-select option {
  background: #0c0c12;
  color: #e6e4f0;
  font-weight: 500;
}

#view-studio .stg-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(155, 89, 182, 0.4);
  border-radius: 999px;
  color: #cdb6f0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#view-studio .stg-live-chip i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-violet-hi);
  box-shadow: 0 0 8px rgba(180, 79, 255, 0.8);
  animation: stg-live-pulse 2.4s ease-in-out infinite;
}

@keyframes stg-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Channel canvas: where the message lives ──────────────────────── */
#view-studio .control-studio-preview {
  display: block !important;
  min-height: 0 !important;
  padding: 18px 14px 20px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(139, 54, 255, 0.05), transparent 18rem),
    rgba(9, 9, 13, 0.6) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

#view-studio .studio-preview::before {
  content: none !important;
  display: none !important;
}

/* ── The Discord message ──────────────────────────────────────────── */
#view-studio .dsg-msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 680px;
}

#view-studio .dsg-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.22), transparent 56%),
    linear-gradient(145deg, var(--c-violet-hi), #4c1d95);
  color: #fff;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(124, 47, 190, 0.35);
}

#view-studio .dsg-msg-body {
  flex: 1;
  min-width: 0;
}

#view-studio .dsg-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  line-height: 1.3;
}

#view-studio .dsg-name {
  color: #f2f3f5;
  font-size: 0.95rem;
  font-weight: 700;
}

#view-studio .dsg-bot-tag {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--c-discord);
  color: #fff;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#view-studio .dsg-bot-tag::before {
  content: "✓";
  font-size: 0.6rem;
}

#view-studio .dsg-time {
  color: #80848e;
  font-size: 0.7rem;
  font-weight: 500;
}

/* ── Editable regions: hover ring + pencil ────────────────────────── */
#view-studio .dsg-edit {
  position: relative;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

#view-studio .dsg-edit:hover,
#view-studio .dsg-edit:focus-visible {
  background: rgba(139, 92, 246, 0.09);
  box-shadow: inset 0 0 0 1px rgba(180, 79, 255, 0.4);
  outline: none;
}

#view-studio .dsg-edit:hover::after,
#view-studio .dsg-edit:focus-visible::after {
  content: "✎";
  position: absolute;
  top: 2px;
  right: 5px;
  color: var(--c-violet-hi);
  font-size: 0.68rem;
  font-style: normal;
  opacity: 0.85;
  pointer-events: none;
}

#view-studio .dsg-edit.is-empty {
  color: rgba(170, 168, 185, 0.45);
  font-style: italic;
  font-weight: 400;
}

#view-studio .dsg-inline-edit {
  cursor: text;
  caret-color: #b36dff;
  min-width: 42px;
  outline: none;
}

#view-studio .dsg-inline-edit.is-editing {
  background: rgba(88, 101, 242, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(179, 109, 255, 0.42),
    0 0 16px rgba(139, 54, 255, 0.16);
}

#view-studio .dsg-inline-edit.is-editing::after {
  content: "editing";
  position: absolute;
  top: -18px;
  right: 2px;
  padding: 2px 6px;
  border: 1px solid rgba(179, 109, 255, 0.28);
  border-radius: 999px;
  background: rgba(8, 8, 15, 0.92);
  color: rgba(231, 213, 255, 0.72);
  font-family: var(--f-ui);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

#view-studio .dsg-inline-edit.is-editing:hover::after,
#view-studio .dsg-inline-edit.is-editing:focus-visible::after {
  content: "editing";
}

#view-studio .studio-inline-toolbar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 9px 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-width: none;
}

#view-studio .studio-inline-toolbar[hidden] {
  display: none !important;
}

#view-studio .studio-inline-toolbar::-webkit-scrollbar {
  display: none;
}

#view-studio .studio-inline-toolbar button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(179, 109, 255, 0.26);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(30, 22, 53, 0.96), rgba(11, 9, 23, 0.94));
  color: rgba(231, 213, 255, 0.88);
  font-family: var(--f-ui);
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

#view-studio .studio-inline-toolbar button:hover,
#view-studio .studio-inline-toolbar button:focus-visible {
  border-color: rgba(179, 109, 255, 0.62);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px rgba(139, 54, 255, 0.20);
  outline: none;
}

/* ── Embed card (and V2 shell) ────────────────────────────────────── */
#view-studio .dsg-embed,
#view-studio .dsg-v2 {
  position: relative;
  margin-top: 6px;
  max-width: 520px;
  padding: 12px 14px 12px 19px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  background: #131218;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#view-studio .dsg-rail {
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 5px;
  border-radius: 8px 0 0 8px;
  background: var(--dsg-rail, #8B5CF6);
  cursor: pointer;
  transition: width var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

#view-studio .dsg-rail:hover,
#view-studio .dsg-rail:focus-visible {
  width: 9px;
  box-shadow: 0 0 14px var(--dsg-rail, #8B5CF6);
  outline: none;
}

#view-studio .dsg-embed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  row-gap: 3px;
  grid-template-areas:
    "author thumb"
    "title  thumb"
    "desc   thumb"
    "fields fields"
    "image  image"
    "footer footer";
}

#view-studio .dsg-author {
  grid-area: author;
  padding: 1px 4px;
  color: #dbdee1;
  font-size: 0.78rem;
  font-weight: 700;
}

#view-studio .dsg-title {
  grid-area: title;
  padding: 2px 4px;
  color: #f2f3f5;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#view-studio .dsg-desc {
  grid-area: desc;
  padding: 2px 4px;
  min-height: 1.4em;
  color: #c8cad1;
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
}

#view-studio .dsg-var {
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.16);
  color: #d8c9f5;
  font-family: var(--f-mono);
  font-size: 0.82em;
  font-style: normal;
}

#view-studio .dsg-h1, #view-studio .dsg-h2, #view-studio .dsg-h3 {
  display: block;
  color: #f2f3f5;
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.3;
}

#view-studio .dsg-h1 { font-size: 1.2rem; }
#view-studio .dsg-h2 { font-size: 1.05rem; }
#view-studio .dsg-h3 { font-size: 0.92rem; }

/* Fields */
#view-studio .dsg-fields {
  grid-area: fields;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 7px;
}

#view-studio .dsg-field {
  flex: 1 1 100%;
  padding: 3px 5px;
  min-width: 0;
}

#view-studio .dsg-field.is-inline {
  flex: 1 1 calc(33.33% - 8px);
  min-width: 118px;
}

#view-studio .dsg-field b {
  display: block;
  color: #f2f3f5;
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#view-studio .dsg-field span {
  color: #c8cad1;
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Ghost “add” chips on the surface */
#view-studio .dsg-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  min-height: 40px;
  border: 1px dashed rgba(155, 89, 182, 0.38);
  border-radius: 8px;
  color: rgba(205, 195, 230, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}

#view-studio .dsg-add:hover,
#view-studio .dsg-add:focus-visible {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(180, 79, 255, 0.6);
  color: #fff;
  outline: none;
}

#view-studio .dsg-field-add {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.7rem;
}

#view-studio .dsg-add-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  max-width: 520px;
}

#view-studio .dsg-add-row .dsg-add { flex: 1; }

/* Media slots */
#view-studio .dsg-thumb {
  grid-area: thumb;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
}

#view-studio .dsg-thumb.is-empty {
  border: 1px dashed rgba(255, 255, 255, 0.14);
  color: #6d6f78;
}

#view-studio .dsg-thumb i,
#view-studio .dsg-image i {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
}

#view-studio .dsg-thumb i { font-size: 1.15rem; }

#view-studio .dsg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#view-studio .dsg-image {
  grid-area: image;
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
}

#view-studio .dsg-image.is-empty {
  padding: 16px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  color: #6d6f78;
  text-align: center;
}

#view-studio .dsg-image img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}

/* Footer + timestamp chip */
#view-studio .dsg-footer-row {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

#view-studio .dsg-footer {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  color: #949ba4;
  font-size: 0.74rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

#view-studio .dsg-dot {
  margin: 0 4px;
  font-style: normal;
}

#view-studio .dsg-stamp {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-size: 0.85rem;
  font-style: normal;
  opacity: 0.5;
  transition: opacity var(--t-fast) ease;
}

#view-studio .dsg-stamp.is-on {
  border: 1px solid rgba(155, 89, 182, 0.55);
  background: rgba(139, 92, 246, 0.13);
  opacity: 1;
}

#view-studio .dsg-stamp:hover::after,
#view-studio .dsg-stamp:focus-visible::after { content: none; }

/* ── Components V2 blocks ─────────────────────────────────────────── */
#view-studio .dsg-v2-stack {
  display: grid;
  gap: 10px;
}

#view-studio .dsg-v2-text {
  margin: 0;
  padding: 2px 5px;
  color: #c8cad1;
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#view-studio .dsg-ghost-block { padding: 12px 10px; }

#view-studio .dsg-sep {
  margin: 3px 0;
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

#view-studio .dsg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
}

#view-studio .dsg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
}

#view-studio .dsg-btn.is-cmd {
  background: var(--c-discord);
  box-shadow: 0 3px 12px rgba(88, 101, 242, 0.3);
}

#view-studio .dsg-btn.is-link {
  background: #232329;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

#view-studio .dsg-runs {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Action dock under the message ────────────────────────────────── */
#view-studio .stg-action-dock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 14px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#view-studio .stg-action-dock .dock-action,
#view-studio .stg-action-dock .btn {
  min-height: 44px;
  border-radius: 10px;
}

#view-studio .stg-action-dock #studio-send {
  grid-column: 1 / -1;
}

#view-studio .stg-status {
  margin: 6px 0 0;
  padding: 0 14px 12px;
  color: #8a8a96;
  font-size: 0.73rem;
}

/* Focus flash when a surface tap lands on its input */
.stg-flash {
  border-color: rgba(180, 79, 255, 0.85) !important;
  box-shadow: 0 0 0 2px rgba(180, 79, 255, 0.55), 0 0 18px rgba(180, 79, 255, 0.3) !important;
}

/* ── Builder dock + workbench drawer ──────────────────────────────── */
#view-studio .builder-dock {
  margin: 0 0 10px;
  padding: 6px;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(10, 10, 14, 0.8);
}

#view-studio .builder-dock .dock-pill {
  min-height: 40px;
}

#view-studio .studio-workbench {
  border-radius: 18px;
}

#view-studio .studio-workbench::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

#view-studio .stg-panel-hint {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 2px solid rgba(155, 89, 182, 0.5);
  border-radius: 0 8px 8px 0;
  background: rgba(139, 92, 246, 0.05);
  color: #9b93ad;
  font-size: 0.77rem;
  line-height: 1.5;
}

/* ── Resource lists: message presets / saved versions ─────────────── */
#view-studio .studio-resource-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#view-studio .studio-resource-list > button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 13px 14px 13px 19px;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px;
  background: #101016 !important;
  text-align: left;
  overflow: hidden;
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease;
}

#view-studio .studio-resource-list > button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c-violet-hi), var(--c-violet-dk));
}

#view-studio .studio-resource-list > button:hover {
  border-color: rgba(180, 79, 255, 0.45) !important;
  transform: translateY(-1px);
}

#view-studio .studio-resource-list > button > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#view-studio .studio-resource-list > button strong {
  color: #f2f3f5;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

#view-studio .studio-resource-list > button em {
  color: #8d8d99;
  font-size: 0.74rem;
  font-style: normal;
  overflow-wrap: anywhere;
}

#view-studio .studio-resource-list > button small {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(155, 89, 182, 0.4);
  border-radius: 999px;
  color: var(--c-violet-hi);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#view-studio .studio-resource-list > button.danger-action small,
#view-studio .studio-resource-list > button.danger-action::before {
  border-color: rgba(248, 113, 113, 0.45);
  color: #f87171;
  background: linear-gradient(180deg, #f87171, #7f1d1d);
}

#view-studio .studio-resource-list > button.danger-action small { background: none; }

/* Form blueprint secondary rows (apply/delete) sit tighter */
#view-studio #studio-form-list > button[data-studio-form-apply],
#view-studio #studio-form-list > button[data-studio-form-delete] {
  min-height: 48px;
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ── Variables: token chips ───────────────────────────────────────── */
#view-studio #studio-variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#view-studio #studio-variable-list > button {
  display: inline-flex;
  width: auto;
  min-height: 42px;
  padding: 8px 12px 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(155, 89, 182, 0.35) !important;
  background: rgba(139, 92, 246, 0.08) !important;
}

#view-studio #studio-variable-list > button::before { content: none; }

#view-studio #studio-variable-list > button > span {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
}

#view-studio #studio-variable-list > button strong {
  color: #d8c9f5;
  font-family: var(--f-mono);
  font-size: 0.76rem;
}

#view-studio #studio-variable-list > button em {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
}

#view-studio #studio-variable-list > button small {
  border-color: rgba(248, 113, 113, 0.45);
  color: #f87171;
}

/* ── Assets: media shelf ──────────────────────────────────────────── */
#view-studio .studio-upload-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(31, 24, 54, 0.84), rgba(12, 12, 18, 0.96));
}

#view-studio .studio-upload-drop {
  position: relative;
  display: flex;
  min-height: 76px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px dashed rgba(198, 166, 255, 0.36);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

#view-studio .studio-upload-drop span {
  color: #a9a3b8;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#view-studio .studio-upload-drop strong {
  color: #f7f3ff;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

#view-studio .studio-upload-drop input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

#view-studio .studio-upload-actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

#view-studio .studio-upload-actions input {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(7, 7, 12, 0.86);
  color: #fff;
  padding: 0 12px;
}

#view-studio .studio-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

#view-studio .studio-asset-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: #101016;
  overflow: hidden;
}

#view-studio .studio-asset-card img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

#view-studio .studio-asset-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

#view-studio .studio-asset-meta strong {
  color: #f2f3f5;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

#view-studio .studio-asset-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#view-studio .studio-asset-actions button {
  width: 100%;
  min-height: 38px;
  border-radius: 8px;
}

/* ── Form blueprints: Discord-modal styling ───────────────────────── */
#view-studio #studio-form-blueprint-form {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #101016;
}

#view-studio #studio-form-blueprint-form::before {
  content: "Discord modal · blueprint (staged runtime)";
  display: block;
  margin-bottom: 12px;
  color: #8d8d99;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Mobile fit (≤480px) ──────────────────────────────────────────── */
@media (max-width: 480px) {
  #view-studio .control-studio-preview {
    padding: 14px 10px 16px !important;
  }
  #view-studio .dsg-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
  #view-studio .dsg-msg { gap: 10px; }
  #view-studio .dsg-embed,
  #view-studio .dsg-v2 {
    max-width: 100%;
    padding: 11px 11px 11px 17px;
  }
  #view-studio .dsg-field.is-inline {
    flex: 1 1 calc(50% - 8px);
    min-width: 104px;
  }
  #view-studio .dsg-add-row { flex-wrap: wrap; }
  #view-studio .stg-live-chip { display: none; }
}

/* ── Desktop comfort (≥761px) ─────────────────────────────────────── */
@media (min-width: 761px) {
  #view-studio .control-studio-preview {
    padding: 26px 22px 28px !important;
    min-height: 280px !important;
  }
  #view-studio .stg-action-dock {
    display: flex;
    justify-content: flex-end;
  }
  #view-studio .stg-action-dock .dock-action,
  #view-studio .stg-action-dock .btn {
    flex: 0 0 auto;
    width: auto;
  }
  #view-studio .stg-action-dock #studio-send { min-width: 200px; }
  #view-studio .studio-resource-list {
    grid-template-columns: 1fr 1fr;
  }
  #view-studio #studio-draft-list,
  #view-studio #studio-form-list {
    grid-template-columns: 1fr;
  }
}

/* ── V2: media gallery + section blocks ───────────────────────────── */
#view-studio .dsg-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  overflow: hidden;
}

#view-studio .dsg-gallery.count-1 { grid-template-columns: 1fr; }

#view-studio .dsg-gallery img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  border-radius: 6px;
}

#view-studio .dsg-gallery.count-1 img { height: 160px; }

#view-studio .dsg-section {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 5px;
}

#view-studio .dsg-section-text {
  flex: 1;
  min-width: 0;
  color: #c8cad1;
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#view-studio .dsg-section-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
}

#view-studio .dsg-section-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#view-studio .dsg-section-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  font-size: 0.78rem;
}

/* ── Compact mobile pass: less scrolling at 390px ─────────────────── */
@media (max-width: 760px) {
  /* Hero: title only, no CTA, tight padding */
  #view-studio .hub-shell-head {
    padding: 14px 16px 10px !important;
  }
  #view-studio .hub-shell-head h1 {
    font-size: 1.55rem !important;
    margin-bottom: 2px !important;
  }
  #view-studio .hub-shell-head .eyebrow {
    font-size: 0.58rem !important;
  }
  #view-studio .hub-shell-head .btn {
    display: none !important;
  }

  /* Decorative subsystem rail adds a screen of scroll — drop it */
  #view-studio .subsystem-rail {
    display: none !important;
  }

  /* Stage chrome tighter */
  #view-studio .stg-channel-bar {
    padding: 7px 12px;
  }
  #view-studio #studio-channel-select {
    min-height: 36px;
    font-size: 0.88rem;
  }
  #view-studio .control-studio-preview {
    padding: 12px 10px 14px !important;
  }
  #view-studio .stg-action-dock {
    gap: 6px;
    padding: 8px 10px 2px;
  }
  #view-studio .stg-action-dock .dock-action,
  #view-studio .stg-action-dock .btn {
    min-height: 40px;
  }
  #view-studio .stg-status {
    padding: 0 12px 9px;
    margin-top: 4px;
    font-size: 0.67rem;
  }

  /* Mode pills: 4×2 grid, everything visible, no horizontal scroll */
  #view-studio .builder-dock {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    overflow: visible !important;
    margin-bottom: 8px;
  }
  #view-studio .builder-dock .dock-pill {
    min-height: 38px;
    min-width: 0 !important;
    width: 100%;
    padding: 6px 4px !important;
    font-size: 0.72rem !important;
    text-align: center;
    justify-content: center;
  }

  /* Workbench: tighter drawer */
  #view-studio .studio-workbench {
    padding: 12px 12px 14px !important;
  }
  #view-studio .studio-workbench::before {
    margin-bottom: 8px;
  }
  #view-studio .stg-panel-hint {
    margin-bottom: 9px;
    padding: 6px 10px;
    font-size: 0.69rem;
    line-height: 1.45;
  }
  #view-studio .studio-form {
    gap: 9px !important;
  }
  #view-studio .studio-form label > span {
    font-size: 0.66rem !important;
  }
  #view-studio .studio-form input:not([type="color"]):not([type="checkbox"]),
  #view-studio .studio-form select {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  #view-studio .studio-form textarea {
    min-height: 74px !important;
  }
  #view-studio .studio-ai-bar input {
    min-height: 40px !important;
  }
  #view-studio .studio-insert-bar-hint {
    display: none;
  }
  #view-studio .vce-drawer summary {
    min-height: 42px;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
  #view-studio .studio-mini-list button,
  #view-studio .studio-resource-list > button {
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #view-studio .studio-resource-list {
    gap: 8px;
  }
  #view-studio .studio-section-title {
    font-size: 0.78rem !important;
  }
  #view-studio .studio-section-hint {
    font-size: 0.7rem !important;
  }
  #view-studio .studio-upload-card {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  #view-studio .studio-upload-drop {
    min-height: 68px;
  }
  #view-studio .studio-asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }

  /* Surface add-chips: five fit in two slim rows */
  #view-studio .dsg-add {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 0.7rem;
  }
  #view-studio .dsg-add-row {
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  #view-studio .dsg-add-row .dsg-add {
    flex: 1 1 30%;
  }
}

/* Mobile stability pass: keep VOID usable before visual redesign tweaks. */
@media (max-width: 520px) {
  .void-control-body,
  .void-control-body .void-shell,
  .void-control-body .void-main,
  .void-control-body .void-content,
  .void-control-body .dash-view {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  .void-control-body .void-content {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .void-control-body .hub-view > .hub-shell-head {
    min-height: 0 !important;
    padding: 14px 16px 12px !important;
  }

  .void-control-body .hub-view > .hub-shell-head h1 {
    font-size: clamp(1.55rem, 8vw, 2.1rem) !important;
    line-height: 1.05 !important;
  }

  .void-control-body .hub-view > .hub-shell-head p {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }

  .void-control-body .dash-view.active button,
  .void-control-body .dash-view.active select,
  .void-control-body .dash-view.active input,
  .void-control-body .dash-view.active textarea,
  .bottom-sheet button,
  .void-nav button {
    min-height: 44px;
  }

  .void-control-body .bottom-sheet {
    align-items: flex-end;
    padding: 10px;
  }

  .void-control-body .sheet-panel {
    width: min(100%, 430px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .void-control-body .void-nav.open {
    width: min(330px, calc(100vw - 18px));
  }

  .void-control-body .void-nav-list .dash-nav-item {
    min-height: 56px;
  }

  #view-studio .studio-inline-toolbar {
    padding-inline: 10px;
  }

  #view-studio .studio-inline-toolbar button {
    min-height: 42px;
  }

  #view-commands .vce-code-frame,
  #view-commands .vce-editor-shell,
  #view-commands .vce-result,
  #view-settings .settings-panel,
  #view-settings .settings-core-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Studio desktop density pass: keep the live Discord surface and controls connected. */
@media (min-width: 761px) and (max-width: 1023px) {
  #view-studio.hub-view.active {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }

  #view-studio.hub-view.active > .hub-shell-head,
  #view-studio.hub-view.active > .studio-stage,
  #view-studio.hub-view.active > .builder-dock,
  #view-studio.hub-view.active > .studio-workbench,
  #view-studio.hub-view.active > .subsystem-rail,
  #view-studio.hub-view.active > .void-activity-strip {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1024px) {
  #view-studio.hub-view.active {
    grid-template-columns: minmax(430px, 0.94fr) minmax(460px, 1.06fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "head head"
      "stage dock"
      "stage workbench"
      "rail workbench"
      "activity activity" !important;
    align-items: start !important;
    gap: 14px 18px !important;
  }

  #view-studio.hub-view.active > .hub-shell-head {
    grid-area: head !important;
    margin: 0 !important;
  }

  #view-studio.hub-view.active > .studio-stage {
    grid-area: stage !important;
    position: sticky !important;
    top: 84px !important;
    align-self: start !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  #view-studio.hub-view.active > .builder-dock {
    grid-area: dock !important;
    align-self: start !important;
    margin: 0 !important;
  }

  #view-studio.hub-view.active > .studio-workbench {
    grid-area: workbench !important;
    align-self: start !important;
    margin: 0 !important;
    max-height: calc(100dvh - 214px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  #view-studio.hub-view.active > .studio-workbench::before {
    margin-bottom: 9px !important;
  }

  #view-studio.hub-view.active > .subsystem-rail {
    grid-area: rail !important;
    margin: 0 !important;
  }

  #view-studio.hub-view.active > .void-activity-strip {
    grid-area: activity !important;
    margin: 0 !important;
  }
}

/* Studio composer pass: make Studio feel like a Discord creation surface, not a hub dashboard. */
#view-studio {
  --studio-line: rgba(167, 139, 250, 0.22);
  --studio-line-hot: rgba(196, 181, 253, 0.52);
  --studio-ink: rgba(245, 247, 255, 0.96);
  --studio-muted: rgba(181, 172, 209, 0.72);
}

#view-studio.hub-view.active {
  isolation: isolate;
}

#view-studio .studio-head {
  min-height: 0 !important;
  padding: 13px 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "eyebrow action"
    "title action"
    "copy action" !important;
  align-items: center !important;
  gap: 2px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(167, 139, 250, 0.18) !important;
  border-top-color: rgba(196, 181, 253, 0.34) !important;
  background:
    linear-gradient(90deg, rgba(139, 54, 255, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(13, 11, 24, 0.94), rgba(6, 6, 10, 0.96)) !important;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.34) !important;
  animation: none !important;
}

#view-studio .studio-head::before,
#view-studio .studio-head::after,
#view-studio .studio-head .hub-head-orb {
  display: none !important;
}

#view-studio .studio-head .eyebrow {
  grid-area: eyebrow !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.16em !important;
  color: rgba(196, 181, 253, 0.74) !important;
}

#view-studio .studio-head h1 {
  grid-area: title !important;
  margin: 0 !important;
  font-size: clamp(1.5rem, 2vw, 2.05rem) !important;
  line-height: 1 !important;
  color: var(--studio-ink) !important;
  text-shadow: 0 0 28px rgba(139, 54, 255, 0.28) !important;
}

#view-studio .studio-head p {
  grid-area: copy !important;
  max-width: 760px !important;
  margin: 3px 0 0 !important;
  color: var(--studio-muted) !important;
  font-size: 0.84rem !important;
  line-height: 1.35 !important;
}

#view-studio .studio-head .btn {
  grid-area: action !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  background: rgba(139, 54, 255, 0.18) !important;
  border: 1px solid rgba(196, 181, 253, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 22px rgba(139,54,255,0.20) !important;
}

#view-studio .studio-stage,
#view-studio .builder-dock,
#view-studio .studio-workbench {
  border-color: var(--studio-line) !important;
}

#view-studio .studio-stage {
  border-radius: 18px !important;
  background:
    radial-gradient(ellipse 90% 42% at 50% 0%, rgba(88, 101, 242, 0.10), transparent 58%),
    linear-gradient(180deg, rgba(12, 12, 18, 0.98), rgba(5, 5, 8, 0.99)) !important;
}

#view-studio .stg-channel-bar {
  min-height: 56px;
  background: rgba(8, 8, 12, 0.96) !important;
}

#view-studio .stg-live-chip {
  border-color: rgba(61, 220, 151, 0.34) !important;
  color: rgba(102, 255, 184, 0.82) !important;
}

#view-studio .control-studio-preview {
  padding: 24px 20px 26px !important;
  min-height: 220px !important;
  background:
    linear-gradient(180deg, rgba(49, 51, 56, 0.25), rgba(22, 23, 27, 0.14)),
    rgba(10, 10, 14, 0.94) !important;
  border: 0 !important;
  box-shadow: none !important;
}

#view-studio .control-studio-preview::after {
  opacity: 0.35 !important;
}

#view-studio .dsg-msg {
  max-width: 760px;
}

#view-studio .dsg-avatar {
  box-shadow: 0 0 0 3px rgba(139,54,255,0.14), 0 0 28px rgba(139,54,255,0.24) !important;
}

#view-studio .dsg-embed,
#view-studio .dsg-v2 {
  max-width: min(100%, 660px);
  background: rgba(17, 18, 24, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
}

#view-studio .stg-action-dock {
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.86), rgba(5, 5, 8, 0.96));
}

#view-studio .builder-dock {
  border-radius: 18px !important;
  padding: 8px !important;
  background:
    linear-gradient(180deg, rgba(15, 12, 30, 0.92), rgba(7, 7, 12, 0.96)) !important;
}

#view-studio .builder-dock .dock-pill {
  min-height: 42px !important;
  border-radius: 12px !important;
}

#view-studio .builder-dock .dock-pill-active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.74), rgba(88, 101, 242, 0.56)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 26px rgba(139,92,246,0.34) !important;
}

#view-studio .studio-workbench {
  border-radius: 18px !important;
  padding: 14px !important;
  background:
    linear-gradient(180deg, rgba(12, 11, 18, 0.98), rgba(5, 5, 9, 0.98)) !important;
}

#view-studio .studio-workbench::before {
  width: 40px !important;
  height: 3px !important;
  background: rgba(196, 181, 253, 0.16) !important;
}

#view-studio .stg-panel-hint {
  border-left-color: rgba(167, 139, 250, 0.50) !important;
  background: rgba(139, 92, 246, 0.055) !important;
  color: rgba(201, 194, 224, 0.78) !important;
}

#view-studio .studio-ai-bar {
  align-items: center;
}

#view-studio .studio-ai-bar input {
  min-height: 46px !important;
  border-radius: 12px !important;
}

#view-studio .studio-form input:not([type="color"]):not([type="checkbox"]),
#view-studio .studio-form textarea,
#view-studio .studio-form select,
#view-studio .studio-workbench input:not([type="color"]):not([type="checkbox"]),
#view-studio .studio-workbench textarea,
#view-studio .studio-workbench select {
  border-radius: 12px !important;
  border-color: rgba(255,255,255,0.09) !important;
  background: rgba(2, 2, 5, 0.72) !important;
}

#view-studio .subsystem-rail {
  display: none !important;
}

@media (min-width: 1024px) {
  #view-studio.hub-view.active {
    grid-template-columns: minmax(500px, 0.95fr) minmax(500px, 1.05fr) !important;
    grid-template-areas:
      "head head"
      "stage dock"
      "stage workbench"
      "activity workbench" !important;
    gap: 12px 16px !important;
  }

  #view-studio.hub-view.active > .studio-stage {
    top: 76px !important;
  }

  #view-studio.hub-view.active > .studio-workbench {
    max-height: calc(100dvh - 188px) !important;
  }
}

@media (max-width: 760px) {
  #view-studio .studio-head {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "eyebrow"
      "title" !important;
    padding: 12px 14px !important;
  }

  #view-studio .studio-head p,
  #view-studio .studio-head .btn {
    display: none !important;
  }

  #view-studio .studio-head h1 {
    font-size: 1.72rem !important;
  }

  #view-studio .control-studio-preview {
    padding: 18px 12px 20px !important;
    min-height: 0 !important;
  }

  #view-studio .builder-dock {
    border-radius: 16px !important;
  }

  #view-studio .studio-workbench {
    border-radius: 16px !important;
    padding: 12px !important;
  }
}