/* Xyneria dimensional UI pass -------------------------------------------------
   Keeps the original dark/purple identity while replacing native-looking
   dropdowns, making the hero emblem symmetrical, and adding restrained depth.
---------------------------------------------------------------------------- */

:root {
  --xyn-depth-shadow: 0 28px 68px rgba(0, 0, 0, .48), 0 8px 24px rgba(62, 14, 95, .2);
  --xyn-edge: rgba(246, 222, 255, .18);
  --xyn-glow: rgba(173, 78, 255, .18);
}

body::after {
  content: "";
  position: fixed;
  inset: -45%;
  z-index: -4;
  pointer-events: none;
  opacity: .18;
  background:
    conic-gradient(from 90deg at 50% 50%, transparent 0 24%, rgba(151, 66, 255, .14) 30%, transparent 38% 58%, rgba(255, 115, 218, .08) 68%, transparent 77%),
    radial-gradient(circle at 50% 50%, rgba(128, 45, 255, .12), transparent 46%);
  filter: blur(70px);
  animation: xynAuroraTurn 30s linear infinite;
}

.panel-line {
  box-shadow:
    var(--xyn-depth-shadow),
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 -1px 0 rgba(77, 22, 112, .16);
}

.primary-action,
.secondary-action,
.table-button,
.music-file-button,
.music-play,
.admin-nav-link,
.account-chip {
  transform: translateZ(0);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(0, 0, 0, .18);
}

.primary-action:hover,
.secondary-action:hover,
.table-button:hover:not(:disabled),
.music-file-button:hover,
.account-chip:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, .3),
    0 0 30px rgba(145, 54, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .13);
}

.primary-action:active,
.secondary-action:active,
.table-button:active:not(:disabled),
.music-file-button:active {
  transform: translateY(1px) scale(.99);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3), inset 0 2px 5px rgba(0, 0, 0, .24);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
.admin-input,
.admin-textarea {
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .025),
    0 1px 0 rgba(255, 255, 255, .025);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
.admin-input:focus,
.admin-textarea:focus {
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .22),
    0 0 0 4px rgba(149, 56, 255, .075),
    0 10px 28px rgba(88, 23, 126, .14);
}

/* Fully custom dropdowns. The original <select> remains in the form so form
   submission and existing change listeners continue to work. */
.xyn-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

.xyn-select {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
}

.xyn-select-trigger {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 13px;
  color: var(--white-soft);
  text-align: left;
  border: 1px solid rgba(239, 211, 255, .14);
  border-radius: 12px;
  outline: 0;
  background:
    linear-gradient(180deg, rgba(30, 14, 43, .92), rgba(10, 5, 16, .97)),
    rgba(7, 3, 10, .96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -1px 0 rgba(0, 0, 0, .32),
    0 9px 22px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
}

.select-field .xyn-select-trigger {
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
}

.key-product-field .xyn-select-trigger {
  min-height: 42px;
}

.xyn-select-trigger:hover,
.xyn-select-trigger:focus-visible,
.xyn-select.is-open .xyn-select-trigger {
  border-color: rgba(236, 188, 255, .38);
  background: linear-gradient(180deg, rgba(42, 18, 59, .96), rgba(12, 5, 18, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 0 0 4px rgba(145, 51, 255, .065),
    0 14px 28px rgba(0, 0, 0, .28),
    0 0 28px rgba(146, 57, 255, .08);
  transform: translateY(-1px);
}

.select-field .xyn-select-trigger:hover,
.select-field .xyn-select-trigger:focus-visible,
.select-field .xyn-select.is-open .xyn-select-trigger {
  transform: none;
  box-shadow: none;
  background: transparent;
}

.xyn-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xyn-select-chevron {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), background 180ms ease, border-color 180ms ease;
}

.xyn-select-chevron i {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--lavender);
  border-bottom: 1.5px solid var(--lavender);
  transform: translateY(-2px) rotate(45deg);
}

.xyn-select.is-open .xyn-select-chevron {
  border-color: rgba(235, 194, 255, .2);
  background: rgba(166, 72, 255, .09);
  transform: rotate(180deg);
}

.xyn-select-portal {
  position: fixed;
  z-index: 10000;
  display: grid;
  gap: 5px;
  padding: 7px;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--white-soft);
  border: 1px solid rgba(238, 207, 255, .2);
  border-radius: 15px;
  background:
    linear-gradient(155deg, rgba(27, 12, 39, .985), rgba(7, 3, 11, .99)),
    #09040d;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .62),
    0 0 45px rgba(130, 39, 255, .13),
    inset 0 1px 0 rgba(255, 255, 255, .075);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  opacity: 0;
  transform: translateY(-8px) perspective(600px) rotateX(-5deg) scale(.985);
  transform-origin: 50% 0;
  transition: opacity 150ms ease, transform 190ms cubic-bezier(.2,.8,.2,1);
}

.xyn-select-portal[data-side="top"] {
  transform-origin: 50% 100%;
  transform: translateY(8px) perspective(600px) rotateX(5deg) scale(.985);
}

.xyn-select-portal.is-open {
  opacity: 1;
  transform: translateY(0) perspective(600px) rotateX(0) scale(1);
}

.xyn-select-option {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  color: var(--muted);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  outline: 0;
  background: transparent;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.xyn-select-option:hover,
.xyn-select-option:focus-visible {
  color: var(--white);
  border-color: rgba(240, 211, 255, .13);
  background: linear-gradient(90deg, rgba(144, 48, 255, .17), rgba(255, 117, 220, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  transform: translateX(2px);
}

.xyn-select-option.is-selected {
  color: #fff9ff;
  border-color: rgba(239, 202, 255, .17);
  background:
    linear-gradient(90deg, rgba(157, 58, 255, .24), rgba(255, 117, 220, .08)),
    rgba(255, 255, 255, .02);
}

.xyn-select-option:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.xyn-select-check {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: transparent;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}

.xyn-select-option.is-selected .xyn-select-check {
  color: #17071e;
  border-color: rgba(245, 215, 255, .65);
  background: linear-gradient(135deg, #fff8ff, #f0a8ff 50%, #a45bff);
  box-shadow: 0 0 18px rgba(199, 106, 255, .24);
}

/* Digital nova hero object --------------------------------------------------
   A symmetrical, CSS-only firework/starburst. No generated image assets. */
.hero-art {
  perspective: 1200px;
}

.hero-word {
  display: none !important;
}

.prism {
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  width: clamp(248px, 24vw, 370px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  clip-path: polygon(50.00% 1.00%, 51.57% 38.10%, 62.68% 2.67%, 54.59% 38.91%, 74.50% 7.56%, 57.31% 40.48%, 84.65% 15.35%, 59.52% 42.69%, 92.44% 25.50%, 61.09% 45.41%, 97.33% 37.32%, 61.90% 48.43%, 99.00% 50.00%, 61.90% 51.57%, 97.33% 62.68%, 61.09% 54.59%, 92.44% 74.50%, 59.52% 57.31%, 84.65% 84.65%, 57.31% 59.52%, 74.50% 92.44%, 54.59% 61.09%, 62.68% 97.33%, 51.57% 61.90%, 50.00% 99.00%, 48.43% 61.90%, 37.32% 97.33%, 45.41% 61.09%, 25.50% 92.44%, 42.69% 59.52%, 15.35% 84.65%, 40.48% 57.31%, 7.56% 74.50%, 38.91% 54.59%, 2.67% 62.68%, 38.10% 51.57%, 1.00% 50.00%, 38.10% 48.43%, 2.67% 37.32%, 38.91% 45.41%, 7.56% 25.50%, 40.48% 42.69%, 15.35% 15.35%, 42.69% 40.48%, 25.50% 7.56%, 45.41% 38.91%, 37.32% 2.67%, 48.43% 38.10%);
  background:
    radial-gradient(circle at 50% 50%, #fff 0 3%, #f8d8ff 4% 7%, rgba(237, 151, 255, .96) 8% 18%, rgba(159, 59, 255, .9) 25%, rgba(105, 26, 196, .76) 43%, rgba(66, 10, 117, .3) 66%, transparent 76%),
    repeating-conic-gradient(from 1deg, rgba(255,255,255,.95) 0 .8deg, rgba(245,167,255,.82) 1.1deg 2deg, rgba(161,75,255,.58) 2.4deg 3.1deg, transparent 3.6deg 7.5deg);
  box-shadow: none;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.18))
    drop-shadow(0 0 35px rgba(234, 129, 255, .3))
    drop-shadow(0 0 82px rgba(126, 42, 255, .28));
  transform-style: preserve-3d;
  animation: xynNovaFloat 7.4s ease-in-out infinite;
}

.prism::before,
.prism::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: inherit;
}

.prism::before {
  inset: 7%;
  z-index: 1;
  opacity: .72;
  background:
    repeating-conic-gradient(from 7.5deg, rgba(255,235,255,.92) 0 .65deg, rgba(208,112,255,.62) .9deg 1.7deg, transparent 2.1deg 7.5deg),
    radial-gradient(circle, rgba(255,255,255,.5), rgba(186,76,255,.16) 45%, transparent 72%);
  filter: blur(.35px);
  transform: rotate(7.5deg) scale(.92) translateZ(22px);
}

.prism::after {
  inset: 19%;
  z-index: 2;
  opacity: .8;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 7%, rgba(239,166,255,.6) 9% 30%, rgba(128,43,255,.18) 52%, transparent 72%);
  transform: rotate(-7.5deg) translateZ(36px);
  filter: blur(.2px);
}

.prism-x {
  z-index: 5;
  font-size: clamp(112px, 10.6vw, 180px);
  letter-spacing: -.08em;
  background: linear-gradient(135deg, #fff 6%, #f9d3ff 36%, #e897ff 54%, #9a47ff 82%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 5px 3px rgba(33, 4, 47, .38))
    drop-shadow(0 0 18px rgba(255, 215, 255, .34));
  transform: translateX(-2%) translateZ(62px);
}

.prism-core {
  z-index: 7;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%) translateZ(78px);
  box-shadow: 0 0 13px #fff, 0 0 32px var(--pink), 0 0 78px var(--purple);
  animation: xynCorePulse 2.2s ease-in-out infinite;
}

.orbit {
  border-color: rgba(242, 213, 255, .15);
  box-shadow: inset 0 0 24px rgba(147, 57, 255, .025), 0 0 24px rgba(139, 50, 255, .035);
}

.orbit::before {
  box-shadow: 0 0 9px #fff, 0 0 19px var(--pink), 0 0 34px rgba(157, 72, 255, .6);
}

.orbit-a {
  width: 88%;
  aspect-ratio: 1.45;
  animation-duration: 18s;
}

.orbit-b {
  width: 66%;
  aspect-ratio: 1.18;
  animation-duration: 13s;
}

/* Shared dimensional tilt. JS feeds very small pointer-relative angles. */
.script-card,
.license-card,
.profile-panel,
.licenses-panel,
.favorites-panel,
.security-panel,
.key-acquire-panel,
.admin-metric,
.admin-panel,
.admin-entity-card,
.license-issue-panel {
  --xyn-tilt-x: 0deg;
  --xyn-tilt-y: 0deg;
  --xyn-light-x: 50%;
  --xyn-light-y: 0%;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--xyn-tilt-x)) rotateY(var(--xyn-tilt-y)) translateY(0);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, border-color 220ms ease;
}

.script-card:hover,
.license-card:hover,
.profile-panel:hover,
.licenses-panel:hover,
.favorites-panel:hover,
.security-panel:hover,
.key-acquire-panel:hover,
.admin-metric:hover,
.admin-panel:hover,
.admin-entity-card:hover,
.license-issue-panel:hover {
  transform: perspective(1100px) rotateX(var(--xyn-tilt-x)) rotateY(var(--xyn-tilt-y)) translateY(-5px);
  border-color: rgba(242, 211, 255, .18);
  box-shadow:
    0 34px 76px rgba(0, 0, 0, .46),
    0 10px 30px rgba(88, 24, 129, .16),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

.script-card::before,
.license-card::before,
.admin-metric::before,
.admin-entity-card::before {
  background:
    radial-gradient(circle at var(--xyn-light-x) var(--xyn-light-y), rgba(255,255,255,.09), transparent 28%),
    linear-gradient(90deg, transparent, rgba(253, 225, 255, .25), transparent 70%);
}

/* Keep the home button as the original rounded square. */
.brand-mark {
  clip-path: none !important;
  border-radius: 17px !important;
}

.brand-mark::after {
  border-radius: 21px;
}

/* The owner-panel mark may keep the decorative star treatment. */
.admin-logo {
  clip-path: polygon(
    50% 3%, 61% 29%, 84% 16%, 71% 39%,
    97% 50%, 71% 61%, 84% 84%, 61% 71%,
    50% 97%, 39% 71%, 16% 84%, 29% 61%,
    3% 50%, 29% 39%, 16% 16%, 39% 29%
  );
  border-radius: 0 !important;
}

.music-panel,
.music-corner-bar {
  box-shadow:
    0 30px 76px rgba(0, 0, 0, .55),
    0 0 42px rgba(123, 44, 255, .11),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.music-disc {
  transform-style: preserve-3d;
  animation: xynDiscHover 5s ease-in-out infinite;
}

/* Community-focused dimensional redesign ---------------------------------- */
.account-title-gradient {
  margin: 10px 0 0;
  color: transparent;
  font-size: clamp(72px, 8.8vw, 142px) !important;
  line-height: .86 !important;
  letter-spacing: -.075em !important;
  background:
    linear-gradient(105deg, #fff 4%, #f7dcff 30%, #ef9eff 58%, #b55dff 78%, #7b2cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 14px 38px rgba(106, 32, 161, .18));
}

.community-grid-v2 {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.42fr) minmax(310px, .58fr);
  gap: 20px;
}

.community-depth-card {
  --xyn-tilt-x: 0deg;
  --xyn-tilt-y: 0deg;
  --xyn-light-x: 50%;
  --xyn-light-y: 0%;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--xyn-tilt-x)) rotateY(var(--xyn-tilt-y));
  transition: transform 250ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease, box-shadow 220ms ease;
}

.community-depth-card:hover {
  border-color: rgba(242, 211, 255, .2);
  box-shadow:
    0 42px 92px rgba(0, 0, 0, .5),
    0 12px 36px rgba(105, 29, 158, .18),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.community-grid-v2 .community-hero {
  min-height: 700px;
  grid-template-columns: minmax(0, .88fr) minmax(440px, 1.12fr);
  background:
    radial-gradient(circle at var(--xyn-light-x) var(--xyn-light-y), rgba(255,255,255,.055), transparent 24%),
    radial-gradient(circle at 75% 45%, rgba(153, 52, 255, .2), transparent 29%),
    radial-gradient(circle at 88% 72%, rgba(255, 106, 218, .075), transparent 34%),
    linear-gradient(145deg, rgba(20, 8, 31, .91), rgba(6, 3, 10, .985));
}

.community-grid-v2 .community-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .4;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(227, 174, 255, .05) 46.15% 46.35%, transparent 46.55% 100%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%);
}

.community-grid-v2 .community-copy {
  min-height: 700px;
  padding: clamp(44px, 5.8vw, 88px);
  transform: translateZ(36px);
}

.community-grid-v2 .community-copy h1 {
  margin: 18px 0 22px;
  font-size: clamp(66px, 7.15vw, 114px);
  line-height: .84;
  letter-spacing: -.075em;
}

.community-grid-v2 .community-copy h1 em {
  color: transparent;
  background: linear-gradient(100deg, #fff 0%, #f2b6ff 36%, #d679ff 62%, #8e3cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 34px rgba(146, 48, 215, .14));
}

.community-grid-v2 .community-copy p {
  max-width: 520px;
  margin-bottom: 30px;
  color: #ad9eb8;
  font-size: 15px;
  line-height: 1.75;
}

.community-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.community-live-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.community-live-note i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f3b8ff;
  box-shadow: 0 0 10px #f3b8ff, 0 0 24px rgba(157, 67, 255, .7);
  animation: livePulse 2.1s ease-in-out infinite;
}

.community-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.community-tags span {
  padding: 7px 10px;
  color: #b8a8c2;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(242, 217, 255, .1);
  border-radius: 999px;
  background: rgba(255,255,255,.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.community-grid-v2 .community-signal {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 50% 50%, rgba(221, 159, 255, .16), transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(120, 31, 217, .24), transparent 31%),
    radial-gradient(circle at 58% 46%, rgba(255, 112, 220, .07), transparent 48%),
    linear-gradient(90deg, rgba(6,3,9,.62), transparent 24%);
}

.community-grid-v2 .community-signal::before {
  inset: 5%;
  opacity: .86;
  background: repeating-radial-gradient(circle, transparent 0 45px, rgba(242, 215, 255, .035) 46px 47px);
  mask-image: radial-gradient(circle, #000 0 61%, transparent 83%);
}

.community-grid-v2 .community-signal::after {
  content: "";
  position: absolute;
  inset: 4%;
  pointer-events: none;
  opacity: .62;
  background:
    radial-gradient(circle at 16% 27%, #f8dcff 0 1px, transparent 1.8px),
    radial-gradient(circle at 27% 72%, #b45dff 0 1.2px, transparent 2px),
    radial-gradient(circle at 74% 21%, #f4c6ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 84% 66%, #9851ff 0 1.2px, transparent 2px),
    radial-gradient(circle at 66% 82%, #ef9cff 0 1px, transparent 1.7px),
    radial-gradient(circle at 39% 16%, #fff 0 .8px, transparent 1.5px),
    radial-gradient(circle at 91% 37%, #fff 0 .8px, transparent 1.5px);
  filter: drop-shadow(0 0 5px rgba(215, 142, 255, .6));
  animation: xynSignalTwinkle 4.5s ease-in-out infinite alternate;
}

.signal-grid {
  position: absolute;
  inset: 11%;
  opacity: .17;
  border-radius: 50%;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle, #000 0 42%, transparent 76%);
  transform: perspective(700px) rotateX(64deg) rotateZ(-12deg) scale(1.14);
}

.community-grid-v2 .signal-ring {
  z-index: 2;
  border-color: rgba(236, 209, 255, .15);
  box-shadow: inset 0 0 22px rgba(163, 69, 255, .02), 0 0 26px rgba(139, 50, 255, .04);
}

.community-grid-v2 .ring-one {
  width: 76%;
  aspect-ratio: 1.46;
  transform: translate(-50%,-50%) rotate(16deg);
  animation: xynCommunityOrbitOne 19s linear infinite;
}

.community-grid-v2 .ring-two {
  width: 59%;
  aspect-ratio: 1.18;
  border-style: solid;
  transform: translate(-50%,-50%) rotate(-31deg);
  animation: xynCommunityOrbitTwo 14s linear infinite reverse;
}

.community-grid-v2 .ring-three {
  width: 91%;
  aspect-ratio: 1.03;
  opacity: .44;
  transform: translate(-50%,-50%) rotate(51deg);
  animation: xynCommunityOrbitThree 26s linear infinite;
}

.community-grid-v2 .signal-ring i {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 12%;
  top: 13%;
  border-radius: 50%;
  background: #f8d6ff;
  box-shadow: 0 0 8px #fff, 0 0 20px #f08eff, 0 0 32px rgba(139, 51, 255, .65);
}

.community-grid-v2 .ring-two i {
  left: auto;
  right: 7%;
  top: 61%;
  width: 6px;
  height: 6px;
  background: #aa62ff;
}

.community-grid-v2 .ring-three i {
  left: 69%;
  top: 4%;
  width: 5px;
  height: 5px;
  opacity: .74;
}

.community-grid-v2 .signal-core {
  z-index: 4;
  width: clamp(190px, 20vw, 300px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  clip-path: polygon(50.00% 1.00%, 51.57% 38.10%, 62.68% 2.67%, 54.59% 38.91%, 74.50% 7.56%, 57.31% 40.48%, 84.65% 15.35%, 59.52% 42.69%, 92.44% 25.50%, 61.09% 45.41%, 97.33% 37.32%, 61.90% 48.43%, 99.00% 50.00%, 61.90% 51.57%, 97.33% 62.68%, 61.09% 54.59%, 92.44% 74.50%, 59.52% 57.31%, 84.65% 84.65%, 57.31% 59.52%, 74.50% 92.44%, 54.59% 61.09%, 62.68% 97.33%, 51.57% 61.90%, 50.00% 99.00%, 48.43% 61.90%, 37.32% 97.33%, 45.41% 61.09%, 25.50% 92.44%, 42.69% 59.52%, 15.35% 84.65%, 40.48% 57.31%, 7.56% 74.50%, 38.91% 54.59%, 2.67% 62.68%, 38.10% 51.57%, 1.00% 50.00%, 38.10% 48.43%, 2.67% 37.32%, 38.91% 45.41%, 7.56% 25.50%, 40.48% 42.69%, 15.35% 15.35%, 42.69% 40.48%, 25.50% 7.56%, 45.41% 38.91%, 37.32% 2.67%, 48.43% 38.10%);
  background:
    radial-gradient(circle at 50% 50%, #fff 0 3%, #f8d6ff 4% 8%, rgba(238, 151, 255, .96) 9% 20%, rgba(164, 66, 255, .86) 27%, rgba(82, 13, 144, .3) 58%, transparent 75%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.96) 0 .75deg, rgba(241,150,255,.86) 1deg 1.8deg, rgba(157,63,255,.56) 2.1deg 3deg, transparent 3.4deg 7.5deg);
  box-shadow: none;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.18))
    drop-shadow(0 0 34px rgba(228, 120, 255, .34))
    drop-shadow(0 0 80px rgba(119, 33, 222, .32));
  transform: translate(-50%, -50%);
  animation: xynCommunityNova 6.8s ease-in-out infinite;
}

.community-grid-v2 .signal-core::before,
.community-grid-v2 .signal-core::after {
  content: "";
  position: absolute;
  inset: 9%;
  clip-path: inherit;
  pointer-events: none;
}

.community-grid-v2 .signal-core::before {
  opacity: .72;
  background: repeating-conic-gradient(from 7.5deg, rgba(255,236,255,.9) 0 .7deg, rgba(195,90,255,.55) 1deg 1.8deg, transparent 2.1deg 7.5deg);
  transform: rotate(7.5deg) scale(.92);
}

.community-grid-v2 .signal-core::after {
  inset: 25%;
  background: radial-gradient(circle, rgba(255,255,255,.92) 0 7%, rgba(236,158,255,.58) 10% 32%, rgba(129,37,232,.12) 55%, transparent 72%);
  transform: rotate(-7.5deg);
}

.community-grid-v2 .signal-core span {
  position: relative;
  z-index: 5;
  font-size: clamp(84px, 9vw, 138px);
  filter: drop-shadow(0 4px 3px rgba(31, 2, 45, .38)) drop-shadow(0 0 16px rgba(255,226,255,.25));
}

.community-grid-v2 .signal-label {
  z-index: 6;
  padding: 8px 10px;
  color: #c6b7cf;
  border-color: rgba(244, 220, 255, .12);
  background: rgba(8, 3, 13, .7);
  box-shadow: 0 10px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.community-grid-v2 .label-a { left: 11%; top: 20%; }
.community-grid-v2 .label-b { right: 8%; top: 39%; }
.community-grid-v2 .label-c { left: 21%; bottom: 17%; }

.community-grid-v2 .community-stat {
  min-height: 250px;
  padding: 30px 32px;
  background:
    radial-gradient(circle at var(--xyn-light-x) var(--xyn-light-y), rgba(255,255,255,.05), transparent 26%),
    radial-gradient(circle at 84% 15%, rgba(255, 112, 220, .14), transparent 29%),
    linear-gradient(145deg, rgba(18,8,27,.92), rgba(7,3,11,.98));
}

.community-stat-main {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-top: 6px;
}

.community-stat-main strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(64px, 6.4vw, 96px);
  line-height: .82;
  letter-spacing: -.08em;
  background: linear-gradient(100deg, #fff 0%, #f4c4ff 50%, #b35dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.community-stat-main span {
  padding-bottom: 8px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.community-grid-v2 .community-stat > p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.community-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.community-card-index {
  color: rgba(239, 205, 255, .38);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
}

.community-grid-v2 .principles-panel {
  min-height: 430px;
  padding: 30px 32px;
  background:
    radial-gradient(circle at var(--xyn-light-x) var(--xyn-light-y), rgba(255,255,255,.045), transparent 25%),
    radial-gradient(circle at 15% 100%, rgba(117, 38, 216, .11), transparent 38%),
    linear-gradient(145deg, rgba(17,8,25,.9), rgba(7,3,11,.98));
}

.community-feature-list {
  gap: 9px;
  margin-top: 18px;
}

.community-feature-list > div {
  grid-template-columns: 36px minmax(0, 1fr);
  padding: 16px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255,255,255,.018);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.community-feature-list > div:hover {
  transform: translateX(4px) translateZ(18px);
  border-color: rgba(237, 206, 255, .12);
  background: linear-gradient(90deg, rgba(136, 45, 244, .1), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.16);
}

.community-feature-list > div:first-child {
  border-top-color: transparent;
}

.community-feature-list h2 {
  font-size: 17px;
}

.community-feature-list p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

@keyframes xynNovaFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) rotateX(calc(var(--hero-tilt-x) - 2deg)) rotateY(calc(var(--hero-tilt-y) + 3deg)) rotateZ(-.7deg) scale(.98);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-13px) rotateX(calc(var(--hero-tilt-x) + 3deg)) rotateY(calc(var(--hero-tilt-y) - 3deg)) rotateZ(.7deg) scale(1.025);
  }
}

@keyframes xynCommunityNova {
  0%, 100% { transform: translate(-50%, -50%) scale(.96) rotate(-.7deg); filter: drop-shadow(0 0 12px rgba(255,255,255,.18)) drop-shadow(0 0 34px rgba(228,120,255,.3)) drop-shadow(0 0 76px rgba(119,33,222,.28)); }
  50% { transform: translate(-50%, -50%) scale(1.035) rotate(.7deg); filter: drop-shadow(0 0 17px rgba(255,255,255,.24)) drop-shadow(0 0 44px rgba(228,120,255,.4)) drop-shadow(0 0 92px rgba(119,33,222,.34)); }
}

@keyframes xynSignalTwinkle {
  from { opacity: .38; transform: scale(.99); }
  to { opacity: .78; transform: scale(1.015); }
}

@keyframes xynCommunityOrbitOne {
  from { transform: translate(-50%,-50%) rotate(16deg); }
  to { transform: translate(-50%,-50%) rotate(376deg); }
}

@keyframes xynCommunityOrbitTwo {
  from { transform: translate(-50%,-50%) rotate(-31deg); }
  to { transform: translate(-50%,-50%) rotate(329deg); }
}

@keyframes xynCommunityOrbitThree {
  from { transform: translate(-50%,-50%) rotate(51deg); }
  to { transform: translate(-50%,-50%) rotate(411deg); }
}

@keyframes xynAuroraTurn {
  to { transform: rotate(360deg) scale(1.04); }
}

@keyframes xynStarFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) rotateX(calc(var(--hero-tilt-x) - 4deg)) rotateY(calc(var(--hero-tilt-y) + 4deg)) rotateZ(-1deg);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-14px) rotateX(calc(var(--hero-tilt-x) + 4deg)) rotateY(calc(var(--hero-tilt-y) - 4deg)) rotateZ(1deg);
  }
}

@keyframes xynCorePulse {
  0%, 100% { transform: translate(-50%, -50%) translateZ(62px) scale(.88); opacity: .84; }
  50% { transform: translate(-50%, -50%) translateZ(68px) scale(1.14); opacity: 1; }
}

@keyframes xynDiscHover {
  0%, 100% { transform: perspective(500px) rotateX(0) rotateY(0) translateY(0); }
  50% { transform: perspective(500px) rotateX(7deg) rotateY(-7deg) translateY(-2px); }
}

@media (max-width: 720px) {
  .xyn-select-portal {
    border-radius: 13px;
  }

  .prism {
    width: clamp(190px, 64vw, 280px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .prism,
  .prism-core,
  .music-disc {
    animation: none !important;
  }

  .script-card,
  .license-card,
  .profile-panel,
  .licenses-panel,
  .favorites-panel,
  .security-panel,
  .key-acquire-panel,
  .admin-metric,
  .admin-panel,
  .admin-entity-card,
  .license-issue-panel {
    transform: none !important;
  }
}

/* Community responsive polish */
@media (max-width: 1180px) {
  .community-grid-v2 { grid-template-columns: 1fr; }
  .community-grid-v2 .community-hero { grid-row: auto; }
  .community-grid-v2 .community-stat,
  .community-grid-v2 .principles-panel { min-height: unset; }
}

@media (max-width: 820px) {
  .community-grid-v2 .community-hero { grid-template-columns: 1fr; min-height: 0; }
  .community-grid-v2 .community-copy { min-height: 0; padding: 42px 28px 24px; }
  .community-grid-v2 .community-signal { min-height: 430px; }
  .community-grid-v2 .signal-core { width: min(56vw, 240px); }
  .community-grid-v2 .signal-label { display: none; }
  .account-title-gradient { font-size: clamp(62px, 18vw, 102px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .community-live-note i,
  .community-grid-v2 .community-signal::after,
  .community-grid-v2 .signal-core,
  .community-grid-v2 .signal-ring { animation: none !important; }
  .community-depth-card { transform: none !important; }
}

/* Final community layout corrections */
.community-grid-v2 .community-stat {
  display: block;
}

.community-grid-v2 .ring-one::before,
.community-grid-v2 .ring-two::before {
  display: none;
}

/* -------------------------------------------------------------------------
   Sphere revision
   Replaces the nova/starburst treatment with a smoother dimensional orb.
   The existing orbit markup stays intact, so only the center object changes.
   ------------------------------------------------------------------------- */
.prism {
  overflow: hidden;
  border: 1px solid rgba(255, 236, 255, .2);
  border-radius: 50%;
  clip-path: none;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.98) 0 2.2%, rgba(255,226,255,.86) 3.2%, rgba(255,205,255,.22) 8%, transparent 17%),
    radial-gradient(circle at 42% 36%, rgba(245,180,255,.42) 0 7%, transparent 28%),
    radial-gradient(circle at 63% 67%, rgba(94,28,181,.54) 0 12%, transparent 39%),
    radial-gradient(circle at 50% 52%, #a646f1 0, #651eb0 30%, #25073f 62%, #09020f 83%, #030106 100%);
  box-shadow:
    inset 20px 18px 42px rgba(255,255,255,.08),
    inset -42px -50px 72px rgba(3,0,8,.72),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 34px 85px rgba(22,0,39,.72),
    0 0 36px rgba(236,139,255,.3),
    0 0 105px rgba(126,42,255,.32);
  filter: none;
  animation: xynSphereFloat 7.4s ease-in-out infinite;
}

.prism::before,
.prism::after {
  clip-path: none;
  border-radius: 50%;
}

.prism::before {
  inset: -7%;
  z-index: 1;
  opacity: .62;
  background:
    repeating-conic-gradient(from 12deg, rgba(255,255,255,.055) 0 5deg, transparent 7deg 18deg),
    radial-gradient(ellipse at 62% 40%, transparent 0 38%, rgba(244,163,255,.16) 40% 43%, transparent 46% 100%);
  mix-blend-mode: screen;
  filter: blur(1px);
  transform: none;
  animation: xynSphereSurface 18s linear infinite;
}

.prism::after {
  inset: 4%;
  z-index: 2;
  opacity: 1;
  background:
    radial-gradient(ellipse at 32% 21%, rgba(255,255,255,.48) 0 5%, rgba(255,229,255,.16) 12%, transparent 30%),
    radial-gradient(circle at 72% 78%, transparent 0 50%, rgba(223,135,255,.12) 64%, rgba(255,255,255,.08) 72%, transparent 78%);
  box-shadow: inset 0 0 34px rgba(248,194,255,.08);
  transform: none;
  filter: none;
}

.prism-x {
  z-index: 5;
  font-size: clamp(104px, 9.6vw, 164px);
  letter-spacing: -.09em;
  background: linear-gradient(135deg, #fff 2%, #f8d5ff 34%, #e599ff 57%, #a24fff 86%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 8px 4px rgba(18, 1, 28, .4))
    drop-shadow(0 0 19px rgba(255, 225, 255, .26));
  transform: translateX(-2%) translateZ(58px);
}

.prism-core {
  z-index: 7;
  width: 13px;
  height: 13px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 0 12px #fff, 0 0 28px var(--pink), 0 0 64px var(--purple);
}

.community-grid-v2 .signal-core {
  overflow: hidden;
  border: 1px solid rgba(255, 235, 255, .2);
  border-radius: 50%;
  clip-path: none;
  background:
    radial-gradient(circle at 30% 23%, rgba(255,255,255,.98) 0 2%, rgba(255,224,255,.74) 3%, rgba(255,205,255,.18) 8%, transparent 17%),
    radial-gradient(circle at 42% 38%, rgba(239,171,255,.34) 0 8%, transparent 29%),
    radial-gradient(circle at 66% 70%, rgba(102,29,192,.5) 0 12%, transparent 37%),
    radial-gradient(circle at 50% 52%, #a943ef 0, #611aa9 31%, #23063b 63%, #08010e 84%, #020104 100%);
  box-shadow:
    inset 16px 15px 34px rgba(255,255,255,.075),
    inset -34px -40px 58px rgba(2,0,7,.7),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 28px 72px rgba(0,0,0,.58),
    0 0 34px rgba(232,132,255,.3),
    0 0 92px rgba(118,31,224,.3);
  filter: none;
  animation: xynCommunitySphere 7s ease-in-out infinite;
}

.community-grid-v2 .signal-core::before,
.community-grid-v2 .signal-core::after {
  clip-path: none;
  border-radius: 50%;
}

.community-grid-v2 .signal-core::before {
  inset: -8%;
  opacity: .58;
  background:
    repeating-conic-gradient(from 18deg, rgba(255,255,255,.052) 0 5deg, transparent 7deg 19deg),
    radial-gradient(ellipse at 61% 41%, transparent 0 39%, rgba(239,146,255,.14) 41% 44%, transparent 47% 100%);
  mix-blend-mode: screen;
  transform: none;
  animation: xynSphereSurface 16s linear infinite reverse;
}

.community-grid-v2 .signal-core::after {
  inset: 4%;
  opacity: 1;
  background:
    radial-gradient(ellipse at 31% 21%, rgba(255,255,255,.46) 0 5%, rgba(255,228,255,.15) 12%, transparent 30%),
    radial-gradient(circle at 73% 79%, transparent 0 52%, rgba(225,138,255,.1) 65%, rgba(255,255,255,.07) 72%, transparent 79%);
  box-shadow: inset 0 0 28px rgba(248,194,255,.075);
  transform: none;
}

.community-grid-v2 .signal-core span {
  z-index: 5;
  font-size: clamp(76px, 8vw, 124px);
  background: linear-gradient(135deg, #fff 2%, #f8d5ff 35%, #e495ff 57%, #9c48ff 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 7px 4px rgba(20,1,30,.4)) drop-shadow(0 0 17px rgba(255,225,255,.24));
}

@keyframes xynSphereFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) rotateX(calc(var(--hero-tilt-x) - 2deg)) rotateY(calc(var(--hero-tilt-y) + 3deg)) scale(.985);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-13px) rotateX(calc(var(--hero-tilt-x) + 3deg)) rotateY(calc(var(--hero-tilt-y) - 3deg)) scale(1.025);
  }
}

@keyframes xynCommunitySphere {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) scale(.97);
    box-shadow: inset 16px 15px 34px rgba(255,255,255,.075), inset -34px -40px 58px rgba(2,0,7,.7), inset 0 0 0 1px rgba(255,255,255,.07), 0 28px 72px rgba(0,0,0,.58), 0 0 34px rgba(232,132,255,.28), 0 0 88px rgba(118,31,224,.27);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px) scale(1.025);
    box-shadow: inset 16px 15px 34px rgba(255,255,255,.085), inset -34px -40px 58px rgba(2,0,7,.66), inset 0 0 0 1px rgba(255,255,255,.09), 0 34px 78px rgba(0,0,0,.62), 0 0 44px rgba(232,132,255,.37), 0 0 104px rgba(118,31,224,.34);
  }
}

@keyframes xynSphereSurface {
  from { transform: rotate(0deg) scale(1.02); }
  to { transform: rotate(360deg) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .prism::before,
  .community-grid-v2 .signal-core::before {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   Minimal orb refinement
   Keeps the orbital identity while removing the rotating/conic "roulette"
   surface treatment. The orb is intentionally simple, smooth and symmetric.
   ------------------------------------------------------------------------- */
.prism {
  overflow: hidden;
  border: 1px solid rgba(248, 222, 255, .22);
  border-radius: 50%;
  clip-path: none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .78) 0 3%, rgba(255, 232, 255, .18) 8%, transparent 22%),
    radial-gradient(circle at 50% 48%, #c868ff 0%, #8a36df 36%, #4a1588 68%, #160426 100%);
  box-shadow:
    inset 14px 14px 30px rgba(255, 255, 255, .08),
    inset -26px -30px 44px rgba(8, 0, 16, .42),
    0 22px 55px rgba(10, 0, 20, .46),
    0 0 44px rgba(183, 83, 255, .24);
  filter: none;
  animation: xynSimpleOrbFloat 7.8s ease-in-out infinite;
}

.prism::before {
  inset: 8%;
  z-index: 1;
  opacity: .34;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.22), transparent 50%);
  mix-blend-mode: screen;
  filter: blur(8px);
  transform: none;
  animation: none;
}

.prism::after {
  inset: 7%;
  z-index: 2;
  opacity: .46;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.13), transparent 38% 100%);
  box-shadow: none;
  transform: none;
  filter: none;
}

.prism-x {
  z-index: 5;
  font-size: clamp(102px, 9.4vw, 160px);
  letter-spacing: -.09em;
  background: linear-gradient(145deg, #fff 0%, #f3caff 40%, #ca75ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 5px 8px rgba(31, 3, 46, .34));
  transform: translateX(-2%) translateZ(40px);
}

.prism-core {
  z-index: 7;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 0 10px rgba(255,255,255,.72), 0 0 26px rgba(215,111,255,.48);
  animation: none;
}

.community-grid-v2 .signal-core {
  overflow: hidden;
  border: 1px solid rgba(248, 222, 255, .22);
  border-radius: 50%;
  clip-path: none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .76) 0 3%, rgba(255, 232, 255, .17) 8%, transparent 22%),
    radial-gradient(circle at 50% 48%, #c868ff 0%, #8734da 37%, #471482 69%, #150424 100%);
  box-shadow:
    inset 12px 12px 26px rgba(255,255,255,.075),
    inset -22px -26px 38px rgba(8,0,16,.4),
    0 20px 50px rgba(8,0,17,.44),
    0 0 40px rgba(181,81,255,.22);
  filter: none;
  animation: xynSimpleCommunityOrb 7.4s ease-in-out infinite;
}

.community-grid-v2 .signal-core::before {
  inset: 8%;
  opacity: .32;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.2), transparent 50%);
  mix-blend-mode: screen;
  filter: blur(7px);
  transform: none;
  animation: none;
}

.community-grid-v2 .signal-core::after {
  inset: 7%;
  opacity: .44;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 38% 100%);
  box-shadow: none;
  transform: none;
}

.community-grid-v2 .signal-core span {
  z-index: 5;
  background: linear-gradient(145deg, #fff 0%, #f3caff 40%, #ca75ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 5px 7px rgba(31,3,46,.34));
}

/* Keep the orbits clean and understated rather than wheel-like. */
.orbit,
.community-grid-v2 .signal-ring {
  border-color: rgba(235, 201, 255, .12);
  box-shadow: none;
}

.orbit::before,
.community-grid-v2 .signal-ring > i {
  opacity: .68;
}

@keyframes xynSimpleOrbFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y)) scale(.99);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-9px) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y)) scale(1.015);
  }
}

@keyframes xynSimpleCommunityOrb {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(.985); }
  50% { transform: translate(-50%, -50%) translateY(-6px) scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .prism,
  .community-grid-v2 .signal-core {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   Orb palette match - WEBSITE(6)
   Keep the minimal sphere from WEBSITE(5), but use the same dark-violet,
   electric-purple and pale-lilac palette as the original Xyneria hero object.
   No roulette/conic surface animation is reintroduced.
   ------------------------------------------------------------------------- */
.prism,
.community-grid-v2 .signal-core {
  background:
    radial-gradient(circle at 35% 28%,
      rgba(255, 247, 255, .94) 0 2.5%,
      rgba(223, 168, 253, .88) 5%,
      rgba(202, 117, 255, .34) 13%,
      rgba(125, 75, 168, .12) 24%,
      transparent 36%),
    radial-gradient(circle at 61% 64%,
      rgba(104, 36, 190, .70) 0%,
      rgba(76, 23, 129, .48) 34%,
      rgba(52, 14, 90, .16) 58%,
      transparent 72%),
    radial-gradient(circle at 48% 46%,
      #7d4ba8 0%,
      #6824be 27%,
      #4c1781 51%,
      #34105a 72%,
      #16051f 100%);
  border-color: rgba(223, 168, 253, .24);
  box-shadow:
    inset 13px 13px 28px rgba(223, 168, 253, .10),
    inset -28px -30px 46px rgba(10, 2, 18, .48),
    0 22px 58px rgba(10, 0, 20, .48),
    0 0 44px rgba(104, 36, 190, .28),
    0 0 78px rgba(202, 117, 255, .12);
}

.prism::before,
.community-grid-v2 .signal-core::before {
  background: radial-gradient(circle at 38% 32%,
    rgba(255, 255, 255, .28),
    rgba(223, 168, 253, .10) 28%,
    transparent 58%);
  opacity: .55;
}

.prism::after,
.community-grid-v2 .signal-core::after {
  background: linear-gradient(145deg,
    rgba(255, 255, 255, .12),
    rgba(223, 168, 253, .055) 31%,
    transparent 49% 100%);
  opacity: .56;
}

.prism-x,
.community-grid-v2 .signal-core span {
  background: linear-gradient(145deg,
    #fff7ff 0%,
    #dfa8fd 34%,
    #ca75ff 67%,
    #9d55e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 5px 8px rgba(31, 3, 46, .38));
}

.prism-core {
  background: #fffaff;
  box-shadow:
    0 0 9px rgba(255, 250, 255, .88),
    0 0 24px rgba(223, 168, 253, .60);
}

/* -------------------------------------------------------------------------
   Dark orb refinement - WEBSITE(7)
   Matches the darker visual weight of the original Xyneria hero treatment.
   The orb stays spherical and smooth, but no longer reads as a bright,
   fully-lit purple disc. Highlights are smaller and the edge falls almost
   to black-violet while preserving the lilac / violet identity.
   ------------------------------------------------------------------------- */
.prism,
.community-grid-v2 .signal-core {
  background:
    radial-gradient(circle at 34% 27%,
      rgba(255, 247, 255, .48) 0 1.4%,
      rgba(223, 168, 253, .28) 4.2%,
      rgba(202, 117, 255, .10) 9.5%,
      transparent 18%),
    radial-gradient(circle at 61% 66%,
      rgba(104, 36, 190, .34) 0%,
      rgba(76, 23, 129, .22) 31%,
      rgba(52, 14, 90, .08) 53%,
      transparent 70%),
    radial-gradient(circle at 49% 47%,
      #43156f 0%,
      #35105d 27%,
      #260b43 50%,
      #170624 72%,
      #09020e 100%);
  border-color: rgba(223, 168, 253, .14);
  box-shadow:
    inset 10px 10px 24px rgba(223, 168, 253, .045),
    inset -30px -34px 52px rgba(4, 0, 8, .68),
    0 22px 58px rgba(5, 0, 11, .56),
    0 0 30px rgba(104, 36, 190, .13),
    0 0 58px rgba(202, 117, 255, .055);
}

.prism::before,
.community-grid-v2 .signal-core::before {
  background: radial-gradient(circle at 37% 31%,
    rgba(255, 255, 255, .16),
    rgba(223, 168, 253, .045) 25%,
    transparent 52%);
  opacity: .30;
  filter: blur(10px);
}

.prism::after,
.community-grid-v2 .signal-core::after {
  background: linear-gradient(145deg,
    rgba(255, 255, 255, .055),
    rgba(223, 168, 253, .018) 28%,
    transparent 45% 100%);
  opacity: .26;
}

/* Keep the X readable while the sphere itself stays low-luminance. */
.prism-x,
.community-grid-v2 .signal-core span {
  background: linear-gradient(145deg,
    #f7e9ff 0%,
    #dfa8fd 33%,
    #c36dff 67%,
    #9148d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 7px rgba(18, 2, 28, .42));
}

.prism-core {
  background: rgba(255, 250, 255, .96);
  box-shadow:
    0 0 7px rgba(255, 250, 255, .72),
    0 0 16px rgba(223, 168, 253, .34);
}

/* -------------------------------------------------------------------------
   X gradient refinement - WEBSITE(8)
   Give the central X a clearly visible Xyneria lilac-to-violet gradient
   while keeping the darker orb treatment from WEBSITE(7).
   ------------------------------------------------------------------------- */
.prism-x,
.community-grid-v2 .signal-core span {
  background-image: linear-gradient(135deg,
    #fff3ff 0%,
    #f3c0ff 20%,
    #e58cff 42%,
    #c15eff 64%,
    #9843ed 82%,
    #6928c9 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 2px 2px rgba(255, 223, 255, .08))
    drop-shadow(0 5px 8px rgba(16, 1, 28, .48));
}

/* -------------------------------------------------------------------------
   Xyneria baseplate emblem - WEBSITE(11)
   Replaces the smooth sphere with a chunky, beveled X plate while preserving
   the existing orbital rings. The silhouette uses broad arms and chamfered
   ends so it reads as a logo/emblem rather than crossed blades.
   ------------------------------------------------------------------------- */
.prism,
.community-grid-v2 .signal-core {
  --xyn-plate-clip: polygon(
    20% 6%,
    50% 36%,
    80% 6%,
    94% 20%,
    64% 50%,
    94% 80%,
    80% 94%,
    50% 64%,
    20% 94%,
    6% 80%,
    36% 50%,
    6% 20%
  );
  overflow: visible;
  border: 0;
  border-radius: 0;
  clip-path: var(--xyn-plate-clip);
  background:
    radial-gradient(circle at 28% 19%, rgba(255,255,255,.30), transparent 23%),
    linear-gradient(135deg,
      #6f46ff 0%,
      #7544fb 18%,
      #8a47f3 38%,
      #ac46ea 58%,
      #d34bd8 78%,
      #f060c3 100%);
  box-shadow: none;
  filter:
    drop-shadow(0 13px 0 rgba(38, 8, 68, .68))
    drop-shadow(0 20px 18px rgba(7, 0, 15, .55))
    drop-shadow(0 0 18px rgba(153, 79, 255, .30))
    drop-shadow(0 0 42px rgba(224, 74, 226, .16));
  isolation: isolate;
}

.prism {
  width: clamp(248px, 24vw, 370px);
  aspect-ratio: 1;
  animation: xynBaseplateFloat 7.8s ease-in-out infinite;
}

.prism::before,
.community-grid-v2 .signal-core::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: 1;
  border-radius: 0;
  clip-path: var(--xyn-plate-clip);
  background:
    linear-gradient(145deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.10) 14%,
      transparent 32% 68%,
      rgba(255,161,239,.12) 86%,
      rgba(255,255,255,.18) 100%),
    linear-gradient(135deg,
      rgba(123, 70, 255, .90),
      rgba(153, 69, 244, .84) 48%,
      rgba(233, 80, 205, .88));
  box-shadow:
    inset 0 0 0 2px rgba(255, 231, 255, .38),
    inset 9px 10px 18px rgba(255,255,255,.08),
    inset -12px -14px 20px rgba(35, 4, 61, .36);
  opacity: .96;
  mix-blend-mode: normal;
  filter: none;
  transform: translateY(-1.2%);
  animation: none;
}

.prism::after,
.community-grid-v2 .signal-core::after {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 2;
  border-radius: 0;
  clip-path: var(--xyn-plate-clip);
  background:
    linear-gradient(156deg,
      rgba(255,255,255,.28) 0 4%,
      rgba(255,255,255,.06) 11%,
      transparent 27% 71%,
      rgba(255,132,223,.13) 90% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset -16px -16px 26px rgba(47, 5, 77, .18);
  opacity: .76;
  transform: translateY(-1.6%);
  filter: none;
}

/* The plate itself is the X, so the old text glyph is no longer needed. */
.prism-x,
.community-grid-v2 .signal-core > span {
  display: none !important;
}

/* Small center reactor keeps the original Xyneria focal point without making
   the emblem busy. */
.prism-core {
  z-index: 6;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 226, 255, .74);
  border-radius: 50%;
  background: #fff8ff;
  box-shadow:
    0 0 8px rgba(255,255,255,.84),
    0 0 22px rgba(235, 95, 255, .55),
    0 0 42px rgba(132, 66, 255, .34);
  animation: xynPlateCorePulse 2.8s ease-in-out infinite;
}

.community-grid-v2 .signal-core {
  width: clamp(190px, 20vw, 300px);
  aspect-ratio: 1;
  animation: xynCommunityBaseplateFloat 7.3s ease-in-out infinite;
}

/* Preserve the orbital identity and make the points slightly brighter against
   the new solid X plate. */
.orbit,
.community-grid-v2 .signal-ring {
  border-color: rgba(219, 166, 255, .16);
  box-shadow: 0 0 20px rgba(119, 49, 204, .025);
}

.orbit::before,
.community-grid-v2 .signal-ring > i {
  opacity: .82;
  box-shadow:
    0 0 7px rgba(255,255,255,.82),
    0 0 18px rgba(235, 100, 255, .62),
    0 0 30px rgba(128, 70, 255, .42);
}

@keyframes xynBaseplateFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0)
      rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y)) scale(.985);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-9px)
      rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y)) scale(1.012);
  }
}

@keyframes xynCommunityBaseplateFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(.985); }
  50% { transform: translate(-50%, -50%) translateY(-6px) scale(1.01); }
}

@keyframes xynPlateCorePulse {
  0%, 100% { opacity: .9; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .prism,
  .community-grid-v2 .signal-core,
  .prism-core {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------
   Flat-cap baseplate emblem - WEBSITE(12)
   Broad crossed plates with blunt rounded-rectangle ends. This intentionally
   removes every pointed / blade-like tip while keeping the orbital system.
   ------------------------------------------------------------------------- */
.prism,
.community-grid-v2 .signal-core {
  clip-path: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate;
  filter:
    drop-shadow(0 12px 0 rgba(28, 5, 52, .66))
    drop-shadow(0 19px 19px rgba(5, 0, 12, .58))
    drop-shadow(0 0 19px rgba(143, 73, 255, .24))
    drop-shadow(0 0 36px rgba(223, 75, 224, .12)) !important;
}

.prism::before,
.prism::after,
.community-grid-v2 .signal-core::before,
.community-grid-v2 .signal-core::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 34% !important;
  height: 91% !important;
  inset: auto !important;
  z-index: 2 !important;
  clip-path: none !important;
  border-radius: clamp(16px, 2.1vw, 27px) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  filter: none !important;
  background:
    linear-gradient(152deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 12%,
      transparent 27% 71%,
      rgba(255,146,232,.08) 88%,
      rgba(255,255,255,.11) 100%),
    linear-gradient(145deg,
      #b99aff 0%,
      #8c5af4 25%,
      #8148ed 46%,
      #b849e3 68%,
      #e45fce 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(244, 222, 255, .30),
    inset 8px 8px 15px rgba(255,255,255,.075),
    inset -10px -12px 18px rgba(31, 4, 57, .34),
    0 0 12px rgba(178, 91, 255, .16) !important;
}

/* Each arm is a thick, blunt plate. The caps remain flat/rounded -- never
   tapered, pointed or knife-shaped. */
.prism::before,
.community-grid-v2 .signal-core::before {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.prism::after,
.community-grid-v2 .signal-core::after {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* Keep the center readable without cutting into the broad X plates. */
.prism-core {
  z-index: 8 !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(255, 226, 255, .70) !important;
  background: #fff8ff !important;
  box-shadow:
    0 0 7px rgba(255,255,255,.78),
    0 0 19px rgba(232, 99, 255, .46),
    0 0 34px rgba(126, 68, 255, .27) !important;
}

/* The community emblem has no separate core node, so add only a restrained
   center glow on the parent without filling its transparent square. */
.community-grid-v2 .signal-core {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,248,255,.96) 0 2.2%,
      rgba(229,101,255,.45) 2.4% 4.2%,
      transparent 7%) !important;
}

/* Orbit styling intentionally retained. */
.orbit,
.community-grid-v2 .signal-ring {
  border-color: rgba(219, 166, 255, .16) !important;
}

@media (max-width: 720px) {
  .prism::before,
  .prism::after,
  .community-grid-v2 .signal-core::before,
  .community-grid-v2 .signal-core::after {
    width: 36% !important;
    height: 88% !important;
    border-radius: 16px !important;
  }
}

/* -------------------------------------------------------------------------
   Canonical Xyneria image logo
   The approved logo.png already contains the exact centered X and orbital
   artwork, so legacy CSS-built emblems/orbits are intentionally removed.
   ------------------------------------------------------------------------- */
.xyn-brand-logo {
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Homepage hero: exact artwork, centered in the art column. */
.hero-art {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  perspective: none !important;
}
.hero-art::before,
.hero-art::after {
  display: none !important;
}
.hero-logo-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(98%, 620px);
  max-width: 98%;
  max-height: 98%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  filter: drop-shadow(0 18px 48px rgba(40, 0, 74, .32));
}

/* Community: same canonical image and same baked-in orbit. */
.community-grid-v2 .community-signal {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(83, 22, 136, .08), transparent 55%),
    linear-gradient(90deg, rgba(6,3,9,.38), transparent 24%) !important;
}
.community-grid-v2 .community-signal::before,
.community-grid-v2 .community-signal::after {
  display: none !important;
}
.community-logo-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(94%, 670px);
  max-width: 94%;
  max-height: 94%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 20px 52px rgba(35, 0, 69, .35));
}
.community-grid-v2 .signal-label {
  z-index: 5;
}

/* About page uses the same identity instead of another recreated X/orbit. */
.about-brand-visual {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.about-brand-visual::before {
  display: none !important;
}
.about-logo-image {
  width: min(94%, 540px);
  max-height: 94%;
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 46px rgba(49, 7, 83, .32));
}

/* The navigation button stays the preferred rounded square; only its art is new. */
.brand-mark {
  overflow: hidden;
}
.brand-mark svg {
  display: none !important;
}
.brand-logo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  transform: scale(1.025);
}

/* Compact brand appearances. */
.mini-mark,
.about-creator-mark,
.admin-logo {
  overflow: hidden !important;
  padding: 0 !important;
  background: #07030c !important;
}
.mini-mark img,
.about-creator-mark img,
.admin-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* The music badge uses the new logo but does not rotate the full brand mark. */
.music-disc {
  overflow: hidden;
  padding: 0 !important;
  background: #07030c !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 30px rgba(164,91,255,.15) !important;
}
.music-disc img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.music-dock.is-playing .music-disc {
  animation: none !important;
}

@media (max-width: 900px) {
  .hero-logo-image { width: min(92vw, 540px); max-height: 94%; }
  .community-logo-image { width: min(92vw, 590px); max-height: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-image,
  .community-logo-image,
  .about-logo-image { animation: none !important; }
}


/* === Xyneria canonical transparent-logo integration v14 === */
/* logo.png is the approved X/orbit artwork with only the near-black source
   background made transparent. The orbit is part of the artwork itself;
   do not recreate it with CSS rings. */
.xyn-brand-logo,
.brand-logo-image,
.mini-mark img,
.about-creator-mark img,
.admin-logo img,
.music-disc img {
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: transparent !important;
}

/* Homepage hero: blend the transparent artwork into the card instead of
   presenting it as a rectangular image panel. */
.hero-art {
  isolation: isolate;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 54% 49%, rgba(111, 38, 189, .18) 0%, rgba(71, 22, 121, .10) 31%, transparent 66%) !important;
}
.hero-art::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 78, 255, .10), rgba(105, 41, 187, .045) 42%, transparent 72%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}
.hero-art::after { display: none !important; }
.hero-logo-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(108%, 680px) !important;
  max-width: none !important;
  max-height: 108% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 14px rgba(153, 68, 255, .17))
    drop-shadow(0 18px 44px rgba(18, 0, 35, .36)) !important;
  z-index: 1;
}

/* Community uses the exact same approved orbit artwork and no duplicate
   signal rings, boxes, masks or photographic backdrop. */
.community-grid-v2 .community-signal {
  isolation: isolate;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(103, 31, 172, .15), rgba(48, 14, 79, .055) 43%, transparent 70%) !important;
}
.community-grid-v2 .community-signal::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215, 71, 255, .075), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.community-grid-v2 .community-signal::after { display: none !important; }
.community-logo-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(106%, 720px) !important;
  max-width: none !important;
  max-height: 106% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 15px rgba(151, 57, 255, .15))
    drop-shadow(0 20px 46px rgba(17, 0, 33, .36)) !important;
  z-index: 1;
}
.community-grid-v2 .signal-ring,
.community-grid-v2 .signal-core {
  display: none !important;
}
.community-grid-v2 .signal-label { z-index: 2 !important; }

/* About: same transparent identity with a restrained glow behind it. */
.about-brand-visual {
  isolation: isolate;
  background: radial-gradient(circle at 50% 50%, rgba(111, 37, 183, .11), transparent 69%) !important;
}
.about-brand-visual::before { display: none !important; }
.about-logo-image {
  width: min(102%, 570px) !important;
  max-height: 102% !important;
  filter: drop-shadow(0 16px 38px rgba(29, 0, 55, .35)) !important;
}

/* Keep compact logo containers intentional, but never bring back the old
   rectangular source-image backdrop. */
.brand-mark,
.mini-mark,
.about-creator-mark,
.admin-logo,
.music-disc {
  background-color: rgba(8, 4, 13, .88) !important;
}
.brand-logo-image {
  width: 100% !important;
  height: 100% !important;
  padding: 2px;
  transform: scale(1.08) !important;
  border-radius: inherit;
}
.mini-mark img,
.about-creator-mark img,
.admin-logo img,
.music-disc img {
  width: 100% !important;
  height: 100% !important;
  padding: 2px;
  transform: scale(1.08);
}

@media (max-width: 900px) {
  .hero-logo-image { width: min(118vw, 610px) !important; max-height: 102% !important; }
  .community-logo-image { width: min(116vw, 640px) !important; max-height: 102% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-image,
  .community-logo-image,
  .about-logo-image { animation: none !important; }
}


/* === Xyneria animated orbital identity v15 ===
   Large brand displays use logo-core.png (the approved X with the baked orbit
   removed) and rebuild the orbit/nebula as real DOM/CSS layers. This keeps the
   X fixed and centered while the surrounding energy can move independently. */
.xyn-orbital-stage {
  --xyn-orbit-line: rgba(207, 111, 255, .34);
  --xyn-orbit-line-soft: rgba(157, 73, 235, .18);
  position: relative;
  width: min(112%, 710px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  container-type: inline-size;
  pointer-events: none;
  overflow: visible;
}
.xyn-orbital-stage-hero { width: min(116%, 720px); }
.xyn-orbital-stage-community { width: min(108%, 735px); }
.xyn-orbital-stage-about { width: min(104%, 575px); }

.xyn-orbital-stage .xyn-brand-core {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 132% !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 8;
  filter:
    drop-shadow(0 0 9px rgba(190, 84, 255, .34))
    drop-shadow(0 0 28px rgba(169, 54, 255, .16))
    drop-shadow(0 20px 40px rgba(15, 0, 28, .42)) !important;
}
.xyn-orbital-stage-about .xyn-brand-core { width: 127% !important; }

.xyn-core-halo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(229, 105, 255, .16) 0 8%, rgba(126, 58, 237, .10) 28%, rgba(75, 20, 139, .035) 52%, transparent 72%);
  filter: blur(18px);
  animation: xynCoreHaloPulse 5.8s ease-in-out infinite;
}

/* Soft cosmic clouds model the purple dust in the reference, but they are
   separate translucent layers so they can drift rather than being frozen. */
.xyn-nebula-cloud {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  opacity: .42;
  mix-blend-mode: screen;
  filter: blur(15px) saturate(1.18);
  will-change: transform, opacity;
}
.xyn-nebula-cloud::before,
.xyn-nebula-cloud::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  inset: 8%;
  background:
    radial-gradient(circle at 22% 48%, rgba(161, 65, 255, .42) 0 3%, transparent 19%),
    radial-gradient(circle at 48% 38%, rgba(93, 48, 239, .32) 0 7%, transparent 28%),
    radial-gradient(circle at 70% 66%, rgba(227, 64, 255, .28) 0 5%, transparent 25%);
  filter: blur(8px);
}
.xyn-nebula-cloud::after {
  inset: 23% 2% 4% 18%;
  opacity: .62;
  transform: rotate(18deg);
}
.xyn-nebula-cloud-a {
  left: 11%; top: 43%; width: 41%; height: 25%;
  background:
    radial-gradient(ellipse at 45% 50%, rgba(90, 30, 224, .36), rgba(126, 29, 214, .16) 38%, transparent 72%);
  transform: rotate(-19deg);
  animation: xynNebulaDriftA 12s ease-in-out infinite alternate;
}
.xyn-nebula-cloud-b {
  right: 10%; top: 48%; width: 38%; height: 23%;
  background:
    radial-gradient(ellipse at 52% 50%, rgba(221, 48, 238, .30), rgba(121, 30, 199, .14) 42%, transparent 74%);
  transform: rotate(17deg);
  animation: xynNebulaDriftB 14s ease-in-out infinite alternate;
}
.xyn-nebula-cloud-c {
  left: 34%; top: 30%; width: 32%; height: 19%;
  opacity: .23;
  background: radial-gradient(ellipse at 50% 50%, rgba(117, 65, 255, .32), transparent 72%);
  animation: xynNebulaDriftC 10s ease-in-out infinite alternate;
}

.xyn-star-field {
  position: absolute;
  z-index: 2;
  inset: 10%;
  border-radius: 50%;
  opacity: .58;
  background:
    radial-gradient(circle at 13% 48%, rgba(244, 196, 255, .92) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 67%, rgba(162, 92, 255, .85) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 35%, rgba(229, 158, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 77%, rgba(180, 89, 255, .82) 0 1px, transparent 2px),
    radial-gradient(circle at 51% 18%, rgba(240, 190, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 42%, rgba(153, 89, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 72%, rgba(244, 122, 255, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 33%, rgba(229, 167, 255, .92) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 89% 58%, rgba(173, 91, 255, .78) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 88%, rgba(222, 115, 255, .65) 0 1px, transparent 2px);
  animation: xynStarTwinkle 5.2s ease-in-out infinite alternate;
}
.xyn-star-field::before,
.xyn-star-field::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f4c5ff;
  box-shadow: 0 0 8px 2px rgba(210, 91, 255, .65), 0 0 24px rgba(154, 56, 255, .42);
  animation: xynNodePulse 3.7s ease-in-out infinite;
}
.xyn-star-field::before { left: 16%; top: 66%; }
.xyn-star-field::after { right: 13%; top: 29%; animation-delay: -1.8s; }

/* Orbit lines remain visually stable while their nodes travel along them.
   This avoids the whole mark feeling like a roulette wheel/loading spinner. */
.xyn-motion-orbit {
  --tilt: 0deg;
  --squash: .88;
  --runner-speed: 13s;
  --runner-delay: 0s;
  position: absolute;
  z-index: 5;
  inset: 7%;
  border: 1px solid var(--xyn-orbit-line);
  border-radius: 50%;
  transform: rotate(var(--tilt)) scaleY(var(--squash));
  transform-origin: center;
  box-shadow: inset 0 0 18px rgba(149, 50, 255, .018), 0 0 9px rgba(189, 72, 255, .04);
  animation: xynOrbitBreathe 8.5s ease-in-out infinite alternate;
}
.xyn-motion-orbit i {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  transform-origin: center;
  animation: xynOrbitRunner var(--runner-speed) linear var(--runner-delay) infinite;
}
.xyn-motion-orbit i::before,
.xyn-motion-orbit i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(249, 203, 255, .98);
  box-shadow:
    0 0 7px 2px rgba(226, 87, 255, .88),
    0 0 19px 6px rgba(156, 64, 255, .30);
}
.xyn-motion-orbit i::after {
  left: 14%;
  top: auto;
  bottom: 4%;
  width: 4px;
  height: 4px;
  opacity: .72;
}
.xyn-motion-orbit-a {
  inset: 5%; --tilt: -8deg; --squash: .91; --runner-speed: 15.5s;
  border-color: rgba(213, 121, 255, .39);
}
.xyn-motion-orbit-b {
  inset: 12%; --tilt: 12deg; --squash: .84; --runner-speed: 12.8s; --runner-delay: -5.2s;
  border-color: rgba(190, 89, 255, .25);
  animation-delay: -3s;
}
.xyn-motion-orbit-c {
  inset: 19%; --tilt: -24deg; --squash: .73; --runner-speed: 18s; --runner-delay: -8s;
  border-color: rgba(151, 75, 236, .20);
  animation-delay: -5s;
}
.xyn-motion-orbit-d {
  inset: 14%; --tilt: 34deg; --squash: .63; --runner-speed: 21s; --runner-delay: -13s;
  border-color: rgba(221, 92, 255, .30);
  border-style: dashed;
  border-width: 1px;
  opacity: .72;
  animation-delay: -1s;
}
.xyn-motion-orbit-d i::after { display: none; }

@keyframes xynOrbitRunner { to { transform: rotate(360deg); } }
@keyframes xynOrbitBreathe {
  0% { opacity: .62; filter: brightness(.92); }
  100% { opacity: 1; filter: brightness(1.12); }
}
@keyframes xynCoreHaloPulse {
  0%,100% { opacity: .58; transform: translate(-50%, -50%) scale(.96); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes xynNebulaDriftA {
  0% { transform: translate3d(-3%, 1%, 0) rotate(-19deg) scale(.94); opacity: .29; }
  55% { opacity: .48; }
  100% { transform: translate3d(7%, -5%, 0) rotate(-14deg) scale(1.08); opacity: .36; }
}
@keyframes xynNebulaDriftB {
  0% { transform: translate3d(5%, 3%, 0) rotate(17deg) scale(.96); opacity: .27; }
  100% { transform: translate3d(-7%, -4%, 0) rotate(22deg) scale(1.08); opacity: .43; }
}
@keyframes xynNebulaDriftC {
  0% { transform: translate3d(-4%, 4%, 0) scale(.9); opacity: .14; }
  100% { transform: translate3d(5%, -6%, 0) scale(1.12); opacity: .30; }
}
@keyframes xynStarTwinkle {
  0% { opacity: .33; filter: brightness(.82); }
  50% { opacity: .64; }
  100% { opacity: .46; filter: brightness(1.2); }
}
@keyframes xynNodePulse {
  0%,100% { opacity: .55; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Large-logo integration overrides v14's baked-image sizing. */
.hero-art .xyn-orbital-stage,
.community-grid-v2 .community-signal .xyn-orbital-stage,
.about-brand-visual .xyn-orbital-stage {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 1;
}
.hero-art .hero-logo-image,
.community-grid-v2 .community-signal .community-logo-image,
.about-brand-visual .about-logo-image {
  margin: 0 !important;
}
.community-grid-v2 .signal-label { z-index: 20 !important; }

@media (max-width: 900px) {
  .xyn-orbital-stage-hero { width: min(118vw, 620px); }
  .xyn-orbital-stage-community { width: min(114vw, 630px); }
  .xyn-orbital-stage-about { width: min(100vw, 520px); }
  .xyn-orbital-stage .xyn-brand-core { width: 128% !important; }
}

@media (max-width: 620px) {
  .xyn-nebula-cloud { filter: blur(11px) saturate(1.1); opacity: .30; }
  .xyn-motion-orbit i::before { width: 6px; height: 6px; }
  .xyn-motion-orbit i::after { width: 3px; height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .xyn-motion-orbit,
  .xyn-motion-orbit i,
  .xyn-nebula-cloud,
  .xyn-star-field,
  .xyn-star-field::before,
  .xyn-star-field::after,
  .xyn-core-halo {
    animation: none !important;
  }
}